/* ===================================================================
Focstone B1 ÃÂÃÂÃÂÃÂÃÂÃÂÃÂâÃÂÃÂÃÂâÃÂÃÂÃÂÃÂÃÂÃÂÃÂìÃÂÃÂÃÂâÃÂÃÂÃÂÃÂÃÂÃÂÃÂàVisual System Patch
Generated 2026-08-25 from audit-report-v1.md
Implements: C1 (band CSS) + H1 (Geist) + H2 (newsletter class) +
H3 (kicker style) + H4 (focus ring) + H5 (hover states)
=================================================================== */
/* === GEIST FONT FACES === */
@font-face {
font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap;
src: url('/wp-content/uploads/fonts/geist/Geist-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap;
src: url('/wp-content/uploads/fonts/geist/Geist-Medium.woff2') format('woff2');
}
@font-face {
font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap;
src: url('/wp-content/uploads/fonts/geist/Geist-SemiBold.woff2') format('woff2');
}
@font-face {
font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap;
src: url('/wp-content/uploads/fonts/geist/Geist-Bold.woff2') format('woff2');
}
:root {
--foc-display: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body,
.entry-content,
.foc-ticker-wrap,
.foc-cal-wrap,
.foc-earn-wrap,
.foc-wl-wrap {
font-family: var(--foc-display);
}
h1, h2, h3, h4, h5, h6,
.entry-title,
.ast-archive-title,
.page-title {
font-family: var(--foc-display);
letter-spacing: -0.015em;
}
/* === BAND CONTAINERS === */
.foc-home-v2 { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.foc-band { padding: 32px 0; border-bottom: 1px solid var(--foc-border); }
.foc-band:last-of-type { border-bottom: 0; }
.foc-band-title {
font-size: 1.5rem; font-weight: 700; color: var(--foc-navy);
margin: 0 0 20px; letter-spacing: -0.015em;
font-family: var(--foc-display);
}
/* === BAND 1: TAPE === */
.foc-tape-row {
display: flex; gap: 32px; overflow-x: auto;
padding: 8px 4px; scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.foc-tape-row::-webkit-scrollbar { height: 4px; }
.foc-tape-row::-webkit-scrollbar-thumb { background: var(--foc-border); border-radius: 2px; }
.foc-tape-cell {
display: inline-flex; gap: 8px; align-items: baseline;
font-size: 13px; white-space: nowrap; flex-shrink: 0;
}
.foc-tape-sym { color: var(--foc-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.foc-tape-val { font-family: 'IBM Plex Mono', Consolas, monospace; font-weight: 600; color: var(--foc-text); }
.foc-tape-chg { font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 12px; font-weight: 600; }
/* === BAND 2: HERO === */
.foc-featured {
display: grid; grid-template-columns: 2fr 1fr; gap: 40px;
align-items: start;
}
@media (max-width: 900px) { .foc-featured { grid-template-columns: 1fr; gap: 24px; } }
.foc-featured-kicker {
display: inline-block; font-size: 11px; font-weight: 600;
color: var(--foc-gold); text-transform: none; letter-spacing: 0.08em;
margin-bottom: 8px; font-style: italic;
}
.foc-featured-title {
font-size: 1.875rem; line-height: 1.2; font-weight: 700;
color: var(--foc-navy); margin: 0 0 12px; letter-spacing: -0.02em;
}
.foc-featured-excerpt { color: var(--foc-muted); font-size: 1rem; line-height: 1.6; margin: 0 0 16px; max-width: 60ch; }
.foc-featured-meta { font-size: 12px; color: var(--foc-muted); }
.foc-topmovers { background: var(--foc-bg-soft); padding: 20px; border-radius: 4px; }
.foc-topmovers h3 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--foc-navy); margin: 0 0 12px; font-weight: 700; }
.foc-movers-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; list-style: none; padding: 0; margin: 0; }
.foc-movers-group h4 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--foc-muted); margin: 0 0 8px; font-weight: 600; }
.foc-movers-group ul { list-style: none; padding: 0; margin: 0; }
.foc-movers-cols li { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; font-family: 'IBM Plex Mono', Consolas, monospace; transition: background 200ms; }
.foc-movers-cols li:hover { background: rgba(10,37,64,0.04); }
.foc-movers-cols li > span { font-weight: 600; }
/* === BAND 3: PILLARS === */
.foc-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .foc-pillars { grid-template-columns: 1fr; } }
.foc-pillar {
padding: 24px; background: #fff;
border: 1px solid var(--foc-border);
border-left: 3px solid var(--foc-navy);
border-radius: 4px;
transition: border-left-color 200ms, background 200ms;
}
.foc-pillar:hover { border-left-color: var(--foc-gold); background: var(--foc-bg-soft); }
.foc-pillar h3 { font-size: 1.125rem; margin: 0 0 8px; color: var(--foc-navy); font-weight: 700; }
.foc-pillar p { color: var(--foc-muted); font-size: 0.9rem; line-height: 1.55; margin: 0 0 16px; }
.foc-pillar-cta {
display: inline-block; font-size: 13px; font-weight: 600;
color: var(--foc-blue); text-decoration: none; letter-spacing: 0.01em;
margin-right: 12px;
}
.foc-pillar-cta:hover { color: var(--foc-navy); }
/* === BAND 4: HEATMAP === */
.foc-heatmap {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: minmax(80px, 1fr);
gap: 4px; min-height: 200px;
}
@media (max-width: 900px) { .foc-heatmap { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .foc-heatmap { grid-template-columns: repeat(2, 1fr); } }
.foc-heat {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 12px 6px; border-radius: 4px; color: #fff; text-align: center;
text-decoration: none; transition: filter 200ms, transform 200ms;
}
.foc-heat:hover { filter: brightness(1.1); transform: translateY(-1px); }
.foc-heat-sym { font-family: 'IBM Plex Mono', Consolas, monospace; font-weight: 700; font-size: 14px; }
.foc-heat-name { font-size: 10px; opacity: 0.9; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.04em; }
.foc-heat-pct { font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 12px; margin-top: 4px; }
.foc-heat.foc-up { background: var(--foc-up); }
.foc-heat.foc-down { background: var(--foc-down); }
.foc-heat.foc-flat { background: #4b5563; }
/* === BAND 5: TOOLS === */
.foc-tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .foc-tools-grid { grid-template-columns: 1fr; } }
.foc-tool {
display: block; padding: 20px 22px; background: var(--foc-bg-soft);
border: 1px solid var(--foc-border); border-radius: 4px;
color: var(--foc-text); text-decoration: none;
transition: border-color 200ms, transform 200ms, background 200ms;
}
.foc-tool:hover { border-color: var(--foc-navy); background: #fff; transform: translateY(-1px); }
.foc-tool strong { display: block; color: var(--foc-navy); font-size: 1rem; margin-bottom: 4px; font-weight: 700; }
.foc-tool span { font-size: 0.85rem; color: var(--foc-muted); line-height: 1.4; }
.foc-tool:hover strong { color: var(--foc-blue); }
/* === BAND 6: NEWSLETTER === */
.foc-newsletter-signup {
max-width: 540px; margin: 32px auto; padding: 32px 28px;
background: linear-gradient(135deg, var(--foc-navy) 0%, #1e3a5f 100%);
color: #fff; border-radius: 8px; text-align: center;
}
.foc-newsletter-title { margin: 0 0 8px; font-size: 1.4rem; color: #fff; font-weight: 700; }
.foc-newsletter-subtitle { margin: 0 0 20px; color: #cbd5e1; font-size: 0.95rem; }
.foc-newsletter-form { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.foc-newsletter-input {
flex: 1; min-width: 220px; padding: 10px 14px; border: none;
border-radius: 4px; font-size: 15px; font-family: inherit;
}
.foc-newsletter-button {
padding: 10px 22px; background: var(--foc-gold); color: var(--foc-navy);
border: none; border-radius: 4px; font-weight: 600; cursor: pointer; font-size: 15px;
font-family: inherit; transition: background 200ms;
}
.foc-newsletter-button:hover { background: #d97706; }
.foc-newsletter-msg { margin-top: 12px; min-height: 20px; font-size: 0.9rem; }
.foc-newsletter-msg.foc-up { color: #22c55e; }
.foc-newsletter-msg.foc-down { color: #ef4444; }
.foc-newsletter-msg.foc-flat { color: #cbd5e1; }
/* === FOCUS RING (H4) === */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--foc-gold);
outline-offset: 2px;
border-radius: 2px;
}
/* === SKELETON SHIMMER (for B2 placeholders) === */
@keyframes foc-shimmer { 0% { opacity: 0.4; } 50% { opacity: 0.85; } 100% { opacity: 0.4; } }
.foc-movers-cols:not(.foc-movers-loaded) .foc-movers-pct,
.foc-tape-row:not(.foc-tape-loaded) .foc-tape-val,
.foc-tape-row:not(.foc-tape-loaded) .foc-tape-chg {
animation: foc-shimmer 1.4s infinite;
color: var(--foc-border) !important;
}
.foc-movers-pct.foc-up { color: var(--foc-up); }
.foc-movers-pct.foc-down { color: var(--foc-down); }
.foc-movers-pct.foc-flat { color: var(--foc-flat); }
/* === focstone style-fix 2026-09-01 ===
Issues fixed:
1. Heatmap text contrast (white on green/red/gray)
2. Orphan "Losers" list from pre-B2 content
3. Sticky tape visible on all sizes (just smaller on mobile)
4. Typography hierarchy tightening
5. Band spacing increased for breathing room
6. Top Movers clean up
================================================================== */
/* --- 1. Heatmap: text color so it shows on green/red/gray backgrounds --- */
.foc-heat,
.foc-heat-sym,
.foc-heat-name,
.foc-heat-pct { color: #fff !important; }
.foc-heat-sym { font-size: 13px !important; font-weight: 700; }
.foc-heat-name { font-size: 9px !important; opacity: 0.85; }
.foc-heat-pct { font-size: 11px !important; font-weight: 600; }
.foc-heat { padding: 8px 6px !important; min-height: 70px; }
.foc-heat-pct::before { content: ""; }
.foc-heat-sym,
.foc-heat-pct { display: block; }
.foc-heat-sym { margin-bottom: 2px; }
.foc-heat-pct { margin-top: 2px; }
/* --- 2. Hide orphan "Losers" list (B2 regex left this behind) --- */
.foc-movers-cols h4,
.foc-movers-cols ul {
/* default: only the shortcode output should show */
}
.foc-movers-cols + h4,
.foc-movers-cols + p,
.foc-movers-cols + ul { display: none !important; }
/* The original page 10 content has the structure:
[shortcode output]
Losers
- ...old hardcoded values...
The selectors above hide the orphan h4/p/ul that come right after the shortcode output.
*/
/* --- 3. Sticky tape: show on all sizes, just smaller on mobile --- */
.foc-tape-sticky-inner { padding: 8px 16px; }
.foc-tape-sticky .foc-tape-cell { font-size: 12px; }
.foc-tape-sticky .foc-tape-sym { font-size: 10px; }
.foc-tape-sticky { top: 80px; }
@media (max-width: 600px) {
.foc-tape-sticky-inner { padding: 6px 12px; gap: 0; }
.foc-tape-sticky .foc-tape-cell { font-size: 11px; gap: 4px; }
.foc-tape-sticky { top: 60px; }
}
/* --- 4. Typography hierarchy --- */
.foc-featured-title {
font-size: clamp(1.5rem, 3.2vw, 2.25rem) !important;
line-height: 1.15 !important;
letter-spacing: -0.025em !important;
font-weight: 700 !important;
}
.foc-featured-excerpt {
font-size: 1rem !important;
line-height: 1.6 !important;
color: var(--foc-muted) !important;
}
.foc-featured-kicker {
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.12em !important;
color: var(--foc-gold) !important;
}
.foc-band-title {
font-size: 1.5rem !important;
letter-spacing: -0.02em !important;
margin-bottom: 24px !important;
}
.foc-pillar h3 {
font-size: 1.15rem !important;
letter-spacing: -0.015em !important;
font-weight: 700 !important;
}
.foc-pillar p {
font-size: 0.9rem !important;
line-height: 1.55 !important;
}
.foc-pillar-cta {
font-size: 13px !important;
font-weight: 600 !important;
}
.foc-tool strong {
font-size: 1rem !important;
font-weight: 700 !important;
}
.foc-tool span {
font-size: 0.85rem !important;
line-height: 1.45 !important;
}
/* --- 5. Band spacing --- */
.foc-band { padding: 40px 0 !important; }
.foc-band:last-of-type { padding-bottom: 48px !important; }
.foc-home-v2 { max-width: 1200px; padding: 0 24px; }
/* --- 6. Top Movers clean up --- */
.foc-movers-cols {
gap: 24px !important;
padding: 16px !important;
background: var(--foc-bg-soft);
border-radius: 4px;
}
.foc-movers-cols h4 {
font-size: 10px !important;
letter-spacing: 0.12em !important;
font-weight: 700 !important;
color: var(--foc-muted) !important;
margin: 0 0 8px !important;
text-transform: uppercase;
}
.foc-movers-cols li {
font-size: 13px !important;
padding: 4px 0 !important;
}
/* --- 7. Newsletter polish --- */
.foc-newsletter-title {
font-size: 1.4rem !important;
letter-spacing: -0.015em !important;
font-weight: 700 !important;
}
.foc-newsletter-subtitle {
font-size: 0.9rem !important;
color: #cbd5e1 !important;
}
.foc-newsletter-input {
font-size: 15px !important;
}
.foc-newsletter-button {
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0.01em !important;
}
/* --- 8. Hero: better mobile spacing --- */
@media (max-width: 600px) {
.foc-featured-title { font-size: 1.4rem !important; }
.foc-featured-excerpt { font-size: 0.9rem !important; }
.foc-band { padding: 28px 0 !important; }
}
/* === 9. Orphan Losers list hide (page 10 leftover from pre-B2 content) === */
li:not([data-symbol]) { display: none !important; }
h4:has(+ ul:not([data-symbol])) { display: none !important; }
/* === Phase B polish: Top Movers + mobile tape + rhythm === */
.foc-movers-group > h4 { display: none !important; }
.foc-movers-cols { display: flex !important; gap: 0 !important; position: relative; padding: 8px 0 !important; }
.foc-movers-group { flex: 1 1 50% !important; min-width: 0 !important; padding: 0 20px !important; display: flex !important; flex-direction: column !important; }
.foc-movers-group:first-child { padding-left: 0 !important; }
.foc-movers-group:last-child { padding-right: 0 !important; border-left: 1px solid rgba(10,37,64,0.10) !important; }
@media (max-width: 720px) { .foc-movers-cols { flex-direction: column !important; gap: 16px !important; } .foc-movers-group:last-child { border-left: 0 !important; border-top: 1px solid rgba(10,37,64,0.10) !important; padding-top: 16px !important; } }
.foc-movers-gainers, .foc-movers-losers { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.foc-movers-gainers li, .foc-movers-losers li { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 9px 0 !important; border-bottom: 1px solid rgba(10,37,64,0.06) !important; }
.foc-movers-gainers li:last-child, .foc-movers-losers li:last-child { border-bottom: 0 !important; }
.foc-movers-sym { font-weight: 600 !important; font-size: 13px !important; color: #0a2540 !important; }
.foc-movers-pct { font-family: 'IBM Plex Mono', Consolas, monospace !important; font-size: 13px !important; font-weight: 600 !important; }
@media (max-width: 600px) { body .foc-tape-sticky { display: flex !important; top: 56px !important; } .foc-tape-sticky-inner { padding: 4px 12px !important; } .foc-tape-sticky .foc-tape-row { gap: 18px !important; } .foc-tape-sticky .foc-tape-cell { font-size: 10px !important; padding: 1px 0 !important; } .foc-tape-sticky .foc-tape-sym { font-size: 9px !important; } .foc-tape-sticky .foc-tape-val { font-size: 10px !important; } }
.foc-band-title { letter-spacing: -0.012em !important; margin-bottom: 18px !important; font-weight: 700 !important; }
/* === Phase B v2: visible improvements === */
/* A. Stronger column separator */
.foc-movers-cols {
border-top: 2px solid #0a2540 !important;
padding-top: 14px !important;
margin-top: 4px !important;
}
.foc-movers-group:last-child {
border-left: 1px solid rgba(10, 37, 64, 0.18) !important;
padding-left: 24px !important;
}
.foc-movers-group:first-child {
padding-right: 24px !important;
}
/* B. Add direction indicator as a small uppercase eyebrow before each list */
.foc-movers-group:first-child::before {
content: "DOWN" !important;
display: block !important;
font-family: 'IBM Plex Mono', Consolas, monospace !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
color: #6b7280 !important;
margin-bottom: 12px !important;
}
.foc-movers-group:last-child::before {
content: "UP" !important;
display: block !important;
font-family: 'IBM Plex Mono', Consolas, monospace !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
color: #6b7280 !important;
margin-bottom: 12px !important;
}
/* C. Clearer row separators */
.foc-movers-gainers li, .foc-movers-losers li {
padding: 10px 0 !important;
border-bottom: 1px solid rgba(10, 37, 64, 0.10) !important;
}
/* D. Sticky tape on mobile - bigger touch */
@media (max-width: 600px) {
body .foc-tape-sticky {
top: 56px !important;
background: linear-gradient(180deg, #0a2540 0%, #0a2540 100%) !important;
}
}
/* E. Mobile column stacking - force even if parent flex stays */
@media (max-width: 720px) {
.foc-movers-cols {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
.foc-movers-group {
flex: 1 1 100% !important;
width: 100% !important;
padding: 0 !important;
border: 0 !important;
}
.foc-movers-group:last-child {
border-top: 1px solid rgba(10, 37, 64, 0.18) !important;
padding-top: 18px !important;
}
}
/* === Phase B v3: What-we-cover 1+2 bento === */
.foc-pillars {
display: grid !important;
grid-template-columns: 1.4fr 1fr 1fr !important;
gap: 16px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.foc-pillar {
background: #ffffff !important;
border: 1px solid rgba(10, 37, 64, 0.10) !important;
border-radius: 8px !important;
padding: 24px 24px 22px !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
transition: border-color 180ms ease, transform 180ms ease !important;
}
.foc-pillar:hover { border-color: rgba(10, 37, 64, 0.30) !important; }
.foc-pillar h3 {
font-size: 1.05rem !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
margin: 0 !important;
color: #0a2540 !important;
}
.foc-pillar p {
font-size: 0.92rem !important;
line-height: 1.55 !important;
color: #4b5563 !important;
margin: 0 0 4px !important;
}
.foc-pillar-cta {
font-family: 'IBM Plex Mono', Consolas, monospace !important;
font-size: 12px !important;
font-weight: 600 !important;
color: #0a2540 !important;
text-decoration: none !important;
letter-spacing: 0.01em !important;
display: inline-block !important;
margin-top: 2px !important;
}
.foc-pillar-cta:hover { color: #F59E0B !important; }
/* A. Pillar A is the primary (Commodity x Stock) - dark navy, dominant */
.foc-pillar-a {
background: #0a2540 !important;
border-color: #0a2540 !important;
padding: 28px 28px 26px !important;
position: relative !important;
overflow: hidden !important;
}
.foc-pillar-a::before {
content: "PRIMARY" !important;
position: absolute !important;
top: 14px !important;
right: 18px !important;
font-family: 'IBM Plex Mono', Consolas, monospace !important;
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: 0.14em !important;
color: rgba(255, 255, 255, 0.42) !important;
}
.foc-pillar-a h3 { color: #ffffff !important; font-size: 1.2rem !important; }
.foc-pillar-a p { color: rgba(255, 255, 255, 0.72) !important; }
.foc-pillar-a .foc-pillar-cta { color: #F59E0B !important; }
.foc-pillar-a .foc-pillar-cta:hover { color: #fbbf24 !important; }
.foc-pillar-b, .foc-pillar-c {
min-height: 140px !important;
}
@media (max-width: 720px) {
.foc-pillars {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.foc-pillar-a { padding: 22px 22px 20px !important; }
.foc-pillar-a h3 { font-size: 1.1rem !important; }
.foc-pillar-a::before { top: 12px !important; right: 14px !important; }
}
/* === 1. Color tokens (CSS custom properties) === */
:root {
--foc-ink: #0d253d;
--foc-ink-secondary: #273951;
--foc-ink-mute: #64748d;
--foc-ink-mute-2: #61718a;
--foc-primary: #533afd; /* indigo, was #F59E0B gold */
--foc-primary-deep: #4434d4;
--foc-primary-press: #2e2b8c;
--foc-primary-soft: #665efd;
--foc-primary-soft-bg: #b9b9f9;
--foc-brand-dark-900: #1c1e54;
--foc-canvas: #ffffff;
--foc-canvas-soft: #f6f9fc;
--foc-canvas-cream: #f5e9d4;
--foc-hairline: #e3e8ee;
--foc-hairline-input: #a8c3de;
--foc-ruby: #ea2261;
--foc-magenta: #f96bee;
--foc-lemon: #9b6829;
--foc-on-primary: #ffffff;
--foc-up: #16A34A; /* keep gain/green from old palette */
--foc-down: #DC2626;
--foc-flat: #64748d;
}
/* === 2. Typography: Inter at weight 300 (Sohne substitute) === */
body, .foc-page, .foc-band, .foc-tool, .foc-pillar {
font-family: 'Inter', -apple-system, 'SF Pro Display', system-ui, sans-serif !important;
font-weight: 300 !important;
font-feature-settings: "ss01" 1, "tnum" 1 !important;
letter-spacing: 0 !important;
color: var(--foc-ink) !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* === 3. Display tier: thin with negative tracking === */
.foc-featured-title,
h1.foc-display, h2.foc-display {
font-size: clamp(36px, 5vw, 56px) !important;
font-weight: 300 !important;
letter-spacing: -0.028em !important;
line-height: 1.05 !important;
color: var(--foc-ink) !important;
}
.foc-band-title {
font-size: clamp(22px, 2.6vw, 32px) !important;
font-weight: 300 !important;
letter-spacing: -0.02em !important;
line-height: 1.1 !important;
color: var(--foc-ink) !important;
}
/* === 4. Money / numeric cells: tabular figures === */
.foc-tape-val, .foc-tape-chg, .foc-movers-pct, .foc-heat-pct,
.foc-newsletter-input, .foc-tool, .foc-band-tape, .foc-pillar-cta {
font-feature-settings: "tnum" 1, "ss01" 1 !important;
font-variant-numeric: tabular-nums !important;
letter-spacing: -0.015em !important;
}
/* === 5. Gradient mesh hero backdrop === */
.foc-featured,
.foc-band.foc-band-featured {
position: relative !important;
overflow: hidden !important;
isolation: isolate;
background: var(--foc-canvas) !important;
padding: 80px 0 96px !important;
}
.foc-featured::before {
content: "" !important;
position: absolute !important;
top: -10% !important; left: -10% !important;
width: 120% !important; height: 120% !important;
z-index: -1 !important;
pointer-events: none !important;
background:
radial-gradient(ellipse 38% 50% at 18% 25%, #f5e9d4 0%, transparent 60%),
radial-gradient(ellipse 30% 50% at 36% 45%, #f96bee 0%, transparent 65%),
radial-gradient(ellipse 35% 55% at 55% 30%, #9b6829 0%, transparent 60%),
radial-gradient(ellipse 40% 60% at 78% 50%, #533afd 0%, transparent 65%),
radial-gradient(ellipse 28% 45% at 92% 65%, #ea2261 0%, transparent 65%),
linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.95) 100%) !important;
filter: blur(60px) saturate(115%) !important;
opacity: 0.85 !important;
}
.foc-featured::after {
content: "" !important;
position: absolute !important;
bottom: 0 !important; left: 0 !important; right: 0 !important;
height: 100px !important;
background: linear-gradient(180deg, transparent 0%, var(--foc-canvas) 100%) !important;
pointer-events: none !important;
z-index: 0 !important;
}
.foc-featured > * { position: relative; z-index: 1; }
/* === 6. Pill buttons === */
.foc-cta, .foc-cta-link, .foc-newsletter-button, .foc-pillar-cta,
button, a.button {
border-radius: 9999px !important;
font-weight: 400 !important;
font-size: 15px !important;
letter-spacing: 0 !important;
padding: 8px 18px !important;
transition: background 160ms ease, transform 80ms ease !important;
}
.foc-cta, button.foc-primary {
background: var(--foc-primary) !important;
color: var(--foc-on-primary) !important;
}
.foc-cta:hover, button.foc-primary:hover {
background: var(--foc-primary-press) !important;
}
.foc-cta:active, button.foc-primary:active {
transform: translateY(1px) !important;
}
.foc-newsletter-button {
background: var(--foc-brand-dark-900) !important;
color: var(--foc-on-primary) !important;
font-weight: 400 !important;
}
.foc-newsletter-button:hover {
background: var(--foc-ink) !important;
}
/* === 7. Card / band: 12px radius, hairline, soft shadow === */
.foc-band {
padding: 64px 0 !important;
}
.foc-movers, .foc-pillar, .foc-tool, .foc-heat {
background: var(--foc-canvas) !important;
border: 1px solid var(--foc-hairline) !important;
border-radius: 12px !important;
box-shadow: rgba(0, 55, 112, 0.06) 0 1px 3px !important;
}
/* === 8. Pillar A featured (dark tier) === */
.foc-pillar-a {
background: var(--foc-brand-dark-900) !important;
border-color: var(--foc-brand-dark-900) !important;
color: var(--foc-on-primary) !important;
}
.foc-pillar-a h3 { color: var(--foc-on-primary) !important; }
.foc-pillar-a p { color: rgba(255,255,255,0.70) !important; }
.foc-pillar-a .foc-pillar-cta { color: #b9b9f9 !important; }
.foc-pillar-a .foc-pillar-cta:hover { color: #fff !important; }
.foc-pillar-a::before {
color: rgba(255,255,255,0.55) !important;
letter-spacing: 0.16em !important;
}
/* === 9. Top Movers: lose the navy band on top, use a soft tint === */
.foc-movers {
background: var(--foc-canvas) !important;
border: 1px solid var(--foc-hairline) !important;
border-radius: 12px !important;
padding: 22px 24px !important;
box-shadow: rgba(0,55,112,0.06) 0 1px 3px !important;
}
.foc-movers-cols {
border-top: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
.foc-movers-group:first-child::before,
.foc-movers-group:last-child::before {
font-weight: 500 !important;
letter-spacing: 0.16em !important;
color: var(--foc-ink-mute) !important;
font-size: 10px !important;
font-family: 'Inter', system-ui, sans-serif !important;
}
/* === 10. Cream band: insert a soft canvas-cream section between
"What we cover" and "Sector Heatmap" via the canvas-soft variant === */
.foc-band-pillars {
background: var(--foc-canvas) !important;
}
.foc-band-heatmap {
background: var(--foc-canvas-soft) !important;
border-top: 1px solid var(--foc-hairline) !important;
border-bottom: 1px solid var(--foc-hairline) !important;
}
.foc-band-tools {
background: var(--foc-canvas) !important;
}
/* === 11. Sticky tape: dark navy with white type (was already navy) === */
.foc-tape-sticky {
background: var(--foc-brand-dark-900) !important;
font-weight: 300 !important;
letter-spacing: 0 !important;
}
/* === 12. Newsletter card: restyle to Stripi brand-dark-900 === */
.foc-newsletter {
background: var(--foc-brand-dark-900) !important;
border-radius: 16px !important;
padding: 48px 32px !important;
color: var(--foc-on-primary) !important;
border: 0 !important;
}
.foc-newsletter-title { color: var(--foc-on-primary) !important; font-weight: 300 !important; }
.foc-newsletter-subtitle { color: rgba(255,255,255,0.72) !important; }
.foc-newsletter-input {
background: rgba(255,255,255,0.08) !important;
color: var(--foc-on-primary) !important;
border: 1px solid rgba(255,255,255,0.18) !important;
border-radius: 6px !important;
}
.foc-newsletter-input::placeholder { color: rgba(255,255,255,0.5) !important; }
/* === 13. Replace GOLD accents with INDIGO === */
.foc-pillar-cta, a[href*="/sector-heatmap/"] {
color: var(--foc-primary) !important;
}
.foc-pillar-cta:hover { color: var(--foc-primary-deep) !important; }
/* === 14. Section heading rhythm (96px gap) === */
.foc-band + .foc-band { margin-top: 0 !important; }
.foc-band-title { margin-bottom: 32px !important; }
/* === 15. Pill soft tag (replaces b1.css Phase B v3 PRIMARY badge variant) === */
.foc-pillar-a::before {
background: rgba(255,255,255,0.10) !important;
padding: 3px 8px !important;
border-radius: 9999px !important;
font-size: 9px !important;
}
/* === 16. Footer typography === */
.foc-footer, footer, .site-footer {
color: var(--foc-ink-mute) !important;
font-size: 13px !important;
font-weight: 300 !important;
letter-spacing: 0 !important;
}
.foc-footer a, footer a, .site-footer a { color: var(--foc-ink-mute) !important; }
.foc-footer a:hover, footer a:hover, .site-footer a:hover { color: var(--foc-primary) !important; }
/* === 17. Headings & body text ÃÂââÃÂìâÃÂàkeep ink color === */
.foc-pillar h3, .foc-tool strong, .foc-band-title {
color: var(--foc-ink) !important;
font-weight: 400 !important;
letter-spacing: -0.015em !important;
}
.foc-pillar p, .foc-tool span, .foc-band p {
color: var(--foc-ink-secondary) !important;
}
/* === 18. Heatmap cells: lift the text contrast on green/red === */
.foc-heat {
border-radius: 8px !important;
font-weight: 500 !important;
font-size: 13px !important;
letter-spacing: -0.01em !important;
}
.foc-heat-pct { font-feature-settings: "tnum" 1 !important; }
/* === 19. Mobile adjustments === */
@media (max-width: 720px) {
.foc-featured { padding: 56px 0 64px !important; }
.foc-band { padding: 40px 0 !important; }
.foc-featured-title { font-size: 36px !important; }
.foc-band-title { font-size: 22px !important; }
}
/* === 20. ss01 + tnum globally on body for stylistic set + tabular === */
html { font-feature-settings: "ss01" 1, "tnum" 1; }
/* === 1. Color tokens (CSS custom properties) === */
:root {
--foc-ink: #0d253d;
--foc-ink-secondary: #273951;
--foc-ink-mute: #64748d;
--foc-ink-mute-2: #61718a;
--foc-primary: #533afd; /* indigo, was #F59E0B gold */
--foc-primary-deep: #4434d4;
--foc-primary-press: #2e2b8c;
--foc-primary-soft: #665efd;
--foc-primary-soft-bg: #b9b9f9;
--foc-brand-dark-900: #1c1e54;
--foc-canvas: #ffffff;
--foc-canvas-soft: #f6f9fc;
--foc-canvas-cream: #f5e9d4;
--foc-hairline: #e3e8ee;
--foc-hairline-input: #a8c3de;
--foc-ruby: #ea2261;
--foc-magenta: #f96bee;
--foc-lemon: #9b6829;
--foc-on-primary: #ffffff;
--foc-up: #16A34A; /* keep gain/green from old palette */
--foc-down: #DC2626;
--foc-flat: #64748d;
}
/* === 2. Typography: Inter at weight 300 (Sohne substitute) === */
body, .foc-page, .foc-band, .foc-tool, .foc-pillar {
font-family: 'Inter', -apple-system, 'SF Pro Display', system-ui, sans-serif !important;
font-weight: 300 !important;
font-feature-settings: "ss01" 1, "tnum" 1 !important;
letter-spacing: 0 !important;
color: var(--foc-ink) !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* === 3. Display tier: thin with negative tracking === */
.foc-featured-title,
h1.foc-display, h2.foc-display {
font-size: clamp(36px, 5vw, 56px) !important;
font-weight: 300 !important;
letter-spacing: -0.028em !important;
line-height: 1.05 !important;
color: var(--foc-ink) !important;
}
.foc-band-title {
font-size: clamp(22px, 2.6vw, 32px) !important;
font-weight: 300 !important;
letter-spacing: -0.02em !important;
line-height: 1.1 !important;
color: var(--foc-ink) !important;
}
/* === 4. Money / numeric cells: tabular figures === */
.foc-tape-val, .foc-tape-chg, .foc-movers-pct, .foc-heat-pct,
.foc-newsletter-input, .foc-tool, .foc-band-tape, .foc-pillar-cta {
font-feature-settings: "tnum" 1, "ss01" 1 !important;
font-variant-numeric: tabular-nums !important;
letter-spacing: -0.015em !important;
}
/* === 5. Gradient mesh hero backdrop === */
.foc-featured,
.foc-band.foc-band-featured {
position: relative !important;
overflow: hidden !important;
isolation: isolate;
background: var(--foc-canvas) !important;
padding: 80px 0 96px !important;
}
.foc-featured::before {
content: "" !important;
position: absolute !important;
top: -10% !important; left: -10% !important;
width: 120% !important; height: 120% !important;
z-index: -1 !important;
pointer-events: none !important;
background:
radial-gradient(ellipse 38% 50% at 18% 25%, #f5e9d4 0%, transparent 60%),
radial-gradient(ellipse 30% 50% at 36% 45%, #f96bee 0%, transparent 65%),
radial-gradient(ellipse 35% 55% at 55% 30%, #9b6829 0%, transparent 60%),
radial-gradient(ellipse 40% 60% at 78% 50%, #533afd 0%, transparent 65%),
radial-gradient(ellipse 28% 45% at 92% 65%, #ea2261 0%, transparent 65%),
linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.95) 100%) !important;
filter: blur(60px) saturate(115%) !important;
opacity: 0.85 !important;
}
.foc-featured::after {
content: "" !important;
position: absolute !important;
bottom: 0 !important; left: 0 !important; right: 0 !important;
height: 100px !important;
background: linear-gradient(180deg, transparent 0%, var(--foc-canvas) 100%) !important;
pointer-events: none !important;
z-index: 0 !important;
}
.foc-featured > * { position: relative; z-index: 1; }
/* === 6. Pill buttons === */
.foc-cta, .foc-cta-link, .foc-newsletter-button, .foc-pillar-cta,
button, a.button {
border-radius: 9999px !important;
font-weight: 400 !important;
font-size: 15px !important;
letter-spacing: 0 !important;
padding: 8px 18px !important;
transition: background 160ms ease, transform 80ms ease !important;
}
.foc-cta, button.foc-primary {
background: var(--foc-primary) !important;
color: var(--foc-on-primary) !important;
}
.foc-cta:hover, button.foc-primary:hover {
background: var(--foc-primary-press) !important;
}
.foc-cta:active, button.foc-primary:active {
transform: translateY(1px) !important;
}
.foc-newsletter-button {
background: var(--foc-brand-dark-900) !important;
color: var(--foc-on-primary) !important;
font-weight: 400 !important;
}
.foc-newsletter-button:hover {
background: var(--foc-ink) !important;
}
/* === 7. Card / band: 12px radius, hairline, soft shadow === */
.foc-band {
padding: 64px 0 !important;
}
.foc-movers, .foc-pillar, .foc-tool {
background: var(--foc-canvas) !important;
border: 1px solid var(--foc-hairline) !important;
border-radius: 12px !important;
box-shadow: rgba(0, 55, 112, 0.06) 0 1px 3px !important;
}
/* === 8. Pillar A featured (dark tier) === */
.foc-pillar-a {
background: var(--foc-brand-dark-900) !important;
border-color: var(--foc-brand-dark-900) !important;
color: var(--foc-on-primary) !important;
}
.foc-pillar-a h3 { color: var(--foc-on-primary) !important; }
.foc-pillar-a p { color: rgba(255,255,255,0.70) !important; }
.foc-pillar-a .foc-pillar-cta { color: #b9b9f9 !important; }
.foc-pillar-a .foc-pillar-cta:hover { color: #fff !important; }
.foc-pillar-a::before {
color: rgba(255,255,255,0.55) !important;
letter-spacing: 0.16em !important;
}
/* === 9. Top Movers: lose the navy band on top, use a soft tint === */
.foc-movers {
background: var(--foc-canvas) !important;
border: 1px solid var(--foc-hairline) !important;
border-radius: 12px !important;
padding: 22px 24px !important;
box-shadow: rgba(0,55,112,0.06) 0 1px 3px !important;
}
.foc-movers-cols {
border-top: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
.foc-movers-group:first-child::before,
.foc-movers-group:last-child::before {
font-weight: 500 !important;
letter-spacing: 0.16em !important;
color: var(--foc-ink-mute) !important;
font-size: 10px !important;
font-family: 'Inter', system-ui, sans-serif !important;
}
/* === 10. Cream band: insert a soft canvas-cream section between
"What we cover" and "Sector Heatmap" via the canvas-soft variant === */
.foc-band-pillars {
background: var(--foc-canvas) !important;
}
.foc-band-heatmap {
background: var(--foc-canvas-soft) !important;
border-top: 1px solid var(--foc-hairline) !important;
border-bottom: 1px solid var(--foc-hairline) !important;
}
.foc-band-tools {
background: var(--foc-canvas) !important;
}
/* === 11. Sticky tape: dark navy with white type (was already navy) === */
.foc-tape-sticky {
background: var(--foc-brand-dark-900) !important;
font-weight: 300 !important;
letter-spacing: 0 !important;
}
/* === 12. Newsletter card: restyle to Stripi brand-dark-900 === */
.foc-newsletter {
background: var(--foc-brand-dark-900) !important;
border-radius: 16px !important;
padding: 48px 32px !important;
color: var(--foc-on-primary) !important;
border: 0 !important;
}
.foc-newsletter-title { color: var(--foc-on-primary) !important; font-weight: 300 !important; }
.foc-newsletter-subtitle { color: rgba(255,255,255,0.72) !important; }
.foc-newsletter-input {
background: rgba(255,255,255,0.08) !important;
color: var(--foc-on-primary) !important;
border: 1px solid rgba(255,255,255,0.18) !important;
border-radius: 6px !important;
}
.foc-newsletter-input::placeholder { color: rgba(255,255,255,0.5) !important; }
/* === 13. Replace GOLD accents with INDIGO === */
.foc-pillar-cta, a[href*="/sector-heatmap/"] {
color: var(--foc-primary) !important;
}
.foc-pillar-cta:hover { color: var(--foc-primary-deep) !important; }
/* === 14. Section heading rhythm (96px gap) === */
.foc-band + .foc-band { margin-top: 0 !important; }
.foc-band-title { margin-bottom: 32px !important; }
/* === 15. Pill soft tag (replaces b1.css Phase B v3 PRIMARY badge variant) === */
.foc-pillar-a::before {
background: rgba(255,255,255,0.10) !important;
padding: 3px 8px !important;
border-radius: 9999px !important;
font-size: 9px !important;
}
/* === 16. Footer typography === */
.foc-footer, footer, .site-footer {
color: var(--foc-ink-mute) !important;
font-size: 13px !important;
font-weight: 300 !important;
letter-spacing: 0 !important;
}
.foc-footer a, footer a, .site-footer a { color: var(--foc-ink-mute) !important; }
.foc-footer a:hover, footer a:hover, .site-footer a:hover { color: var(--foc-primary) !important; }
/* === 17. Headings & body text â≠keep ink color === */
.foc-pillar h3, .foc-tool strong, .foc-band-title {
color: var(--foc-ink) !important;
font-weight: 400 !important;
letter-spacing: -0.015em !important;
}
.foc-pillar p, .foc-tool span, .foc-band p {
color: var(--foc-ink-secondary) !important;
}
/* === 18. Heatmap cells: lift the text contrast on green/red === */
.foc-heat {
border-radius: 8px !important;
font-weight: 500 !important;
font-size: 13px !important;
letter-spacing: -0.01em !important;
}
.foc-heat-pct { font-feature-settings: "tnum" 1 !important; }
/* === 19. Mobile adjustments === */
@media (max-width: 720px) {
.foc-featured { padding: 56px 0 64px !important; }
.foc-band { padding: 40px 0 !important; }
.foc-featured-title { font-size: 36px !important; }
.foc-band-title { font-size: 22px !important; }
}
/* === 20. ss01 + tnum globally on body for stylistic set + tabular === */
html { font-feature-settings: "ss01" 1, "tnum" 1; }
/* ===================================================================
focstone.com ââ¬â Stripi-Inspired Theme
Design system: electric indigo + deep navy + gradient mesh hero +
Sohne thin (Inter fallback) + pill buttons +
tabular figures for money + dark featured tier.
Source: DESIGN.md (user-provided, 2026-09-01)
=================================================================== */
/* === 1. Color tokens (CSS custom properties) === */
:root {
--foc-ink: #0d253d;
--foc-ink-secondary: #273951;
--foc-ink-mute: #64748d;
--foc-ink-mute-2: #61718a;
--foc-primary: #533afd; /* indigo, was #F59E0B gold */
--foc-primary-deep: #4434d4;
--foc-primary-press: #2e2b8c;
--foc-primary-soft: #665efd;
--foc-primary-soft-bg: #b9b9f9;
--foc-brand-dark-900: #1c1e54;
--foc-canvas: #ffffff;
--foc-canvas-soft: #f6f9fc;
--foc-canvas-cream: #f5e9d4;
--foc-hairline: #e3e8ee;
--foc-hairline-input: #a8c3de;
--foc-ruby: #ea2261;
--foc-magenta: #f96bee;
--foc-lemon: #9b6829;
--foc-on-primary: #ffffff;
--foc-up: #16A34A; /* keep gain/green from old palette */
--foc-down: #DC2626;
--foc-flat: #64748d;
}
/* === 2. Typography: Inter at weight 300 (Sohne substitute) === */
body, .foc-page, .foc-band, .foc-tool, .foc-pillar {
font-family: 'Inter', -apple-system, 'SF Pro Display', system-ui, sans-serif !important;
font-weight: 300 !important;
font-feature-settings: "ss01" 1, "tnum" 1 !important;
letter-spacing: 0 !important;
color: var(--foc-ink) !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* === 3. Display tier: thin with negative tracking === */
.foc-featured-title,
h1.foc-display, h2.foc-display {
font-size: clamp(36px, 5vw, 56px) !important;
font-weight: 300 !important;
letter-spacing: -0.028em !important;
line-height: 1.05 !important;
color: var(--foc-ink) !important;
}
.foc-band-title {
font-size: clamp(22px, 2.6vw, 32px) !important;
font-weight: 300 !important;
letter-spacing: -0.02em !important;
line-height: 1.1 !important;
color: var(--foc-ink) !important;
}
/* === 4. Money / numeric cells: tabular figures === */
.foc-tape-val, .foc-tape-chg, .foc-movers-pct, .foc-heat-pct,
.foc-newsletter-input, .foc-tool, .foc-band-tape, .foc-pillar-cta {
font-feature-settings: "tnum" 1, "ss01" 1 !important;
font-variant-numeric: tabular-nums !important;
letter-spacing: -0.015em !important;
}
/* === 5. Gradient mesh hero backdrop === */
.foc-featured,
.foc-band.foc-band-featured {
position: relative !important;
overflow: hidden !important;
isolation: isolate;
background: var(--foc-canvas) !important;
padding: 80px 0 96px !important;
}
.foc-featured::before {
content: "" !important;
position: absolute !important;
top: -10% !important; left: -10% !important;
width: 120% !important; height: 120% !important;
z-index: -1 !important;
pointer-events: none !important;
background:
radial-gradient(ellipse 38% 50% at 18% 25%, #f5e9d4 0%, transparent 60%),
radial-gradient(ellipse 30% 50% at 36% 45%, #f96bee 0%, transparent 65%),
radial-gradient(ellipse 35% 55% at 55% 30%, #9b6829 0%, transparent 60%),
radial-gradient(ellipse 40% 60% at 78% 50%, #533afd 0%, transparent 65%),
radial-gradient(ellipse 28% 45% at 92% 65%, #ea2261 0%, transparent 65%),
linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.95) 100%) !important;
filter: blur(60px) saturate(115%) !important;
opacity: 0.85 !important;
}
.foc-featured::after {
content: "" !important;
position: absolute !important;
bottom: 0 !important; left: 0 !important; right: 0 !important;
height: 100px !important;
background: linear-gradient(180deg, transparent 0%, var(--foc-canvas) 100%) !important;
pointer-events: none !important;
z-index: 0 !important;
}
.foc-featured > * { position: relative; z-index: 1; }
/* === 6. Pill buttons === */
.foc-cta, .foc-cta-link, .foc-newsletter-button, .foc-pillar-cta,
button, a.button {
border-radius: 9999px !important;
font-weight: 400 !important;
font-size: 15px !important;
letter-spacing: 0 !important;
padding: 8px 18px !important;
transition: background 160ms ease, transform 80ms ease !important;
}
.foc-cta, button.foc-primary {
background: var(--foc-primary) !important;
color: var(--foc-on-primary) !important;
}
.foc-cta:hover, button.foc-primary:hover {
background: var(--foc-primary-press) !important;
}
.foc-cta:active, button.foc-primary:active {
transform: translateY(1px) !important;
}
.foc-newsletter-button {
background: var(--foc-brand-dark-900) !important;
color: var(--foc-on-primary) !important;
font-weight: 400 !important;
}
.foc-newsletter-button:hover {
background: var(--foc-ink) !important;
}
/* === 7. Card / band: 12px radius, hairline, soft shadow === */
.foc-band {
padding: 64px 0 !important;
}
.foc-movers, .foc-pillar, .foc-tool {
background: var(--foc-canvas) !important;
border: 1px solid var(--foc-hairline) !important;
border-radius: 12px !important;
box-shadow: rgba(0, 55, 112, 0.06) 0 1px 3px !important;
}
/* === 8. Pillar A featured (dark tier) === */
.foc-pillar-a {
background: var(--foc-brand-dark-900) !important;
border-color: var(--foc-brand-dark-900) !important;
color: var(--foc-on-primary) !important;
}
.foc-pillar-a h3 { color: var(--foc-on-primary) !important; }
.foc-pillar-a p { color: rgba(255,255,255,0.70) !important; }
.foc-pillar-a .foc-pillar-cta { color: #b9b9f9 !important; }
.foc-pillar-a .foc-pillar-cta:hover { color: #fff !important; }
.foc-pillar-a::before {
color: rgba(255,255,255,0.55) !important;
letter-spacing: 0.16em !important;
}
/* === 9. Top Movers: lose the navy band on top, use a soft tint === */
.foc-movers {
background: var(--foc-canvas) !important;
border: 1px solid var(--foc-hairline) !important;
border-radius: 12px !important;
padding: 22px 24px !important;
box-shadow: rgba(0,55,112,0.06) 0 1px 3px !important;
}
.foc-movers-cols {
border-top: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
.foc-movers-group:first-child::before,
.foc-movers-group:last-child::before {
font-weight: 500 !important;
letter-spacing: 0.16em !important;
color: var(--foc-ink-mute) !important;
font-size: 10px !important;
font-family: 'Inter', system-ui, sans-serif !important;
}
/* === 10. Cream band: insert a soft canvas-cream section between
"What we cover" and "Sector Heatmap" via the canvas-soft variant === */
.foc-band-pillars {
background: var(--foc-canvas) !important;
}
.foc-band-heatmap {
background: var(--foc-canvas-soft) !important;
border-top: 1px solid var(--foc-hairline) !important;
border-bottom: 1px solid var(--foc-hairline) !important;
}
.foc-band-tools {
background: var(--foc-canvas) !important;
}
/* === 11. Sticky tape: dark navy with white type (was already navy) === */
.foc-tape-sticky {
background: var(--foc-brand-dark-900) !important;
font-weight: 300 !important;
letter-spacing: 0 !important;
}
/* === 12. Newsletter card: restyle to Stripi brand-dark-900 === */
.foc-newsletter {
background: var(--foc-brand-dark-900) !important;
border-radius: 16px !important;
padding: 48px 32px !important;
color: var(--foc-on-primary) !important;
border: 0 !important;
}
.foc-newsletter-title { color: var(--foc-on-primary) !important; font-weight: 300 !important; }
.foc-newsletter-subtitle { color: rgba(255,255,255,0.72) !important; }
.foc-newsletter-input {
background: rgba(255,255,255,0.08) !important;
color: var(--foc-on-primary) !important;
border: 1px solid rgba(255,255,255,0.18) !important;
border-radius: 6px !important;
}
.foc-newsletter-input::placeholder { color: rgba(255,255,255,0.5) !important; }
/* === 13. Replace GOLD accents with INDIGO === */
.foc-pillar-cta, a[href*="/sector-heatmap/"] {
color: var(--foc-primary) !important;
}
.foc-pillar-cta:hover { color: var(--foc-primary-deep) !important; }
/* === 14. Section heading rhythm (96px gap) === */
.foc-band + .foc-band { margin-top: 0 !important; }
.foc-band-title { margin-bottom: 32px !important; }
/* === 15. Pill soft tag (replaces b1.css Phase B v3 PRIMARY badge variant) === */
.foc-pillar-a::before {
background: rgba(255,255,255,0.10) !important;
padding: 3px 8px !important;
border-radius: 9999px !important;
font-size: 9px !important;
}
/* === 16. Footer typography === */
.foc-footer, footer, .site-footer {
color: var(--foc-ink-mute) !important;
font-size: 13px !important;
font-weight: 300 !important;
letter-spacing: 0 !important;
}
.foc-footer a, footer a, .site-footer a { color: var(--foc-ink-mute) !important; }
.foc-footer a:hover, footer a:hover, .site-footer a:hover { color: var(--foc-primary) !important; }
/* === 17. Headings & body text ââ¬â keep ink color === */
.foc-pillar h3, .foc-tool strong, .foc-band-title {
color: var(--foc-ink) !important;
font-weight: 400 !important;
letter-spacing: -0.015em !important;
}
.foc-pillar p, .foc-tool span, .foc-band p {
color: var(--foc-ink-secondary) !important;
}
/* === 18. Heatmap cells: lift the text contrast on green/red === */
.foc-heat {
border-radius: 8px !important;
font-weight: 500 !important;
font-size: 13px !important;
letter-spacing: -0.01em !important;
}
.foc-heat-pct { font-feature-settings: "tnum" 1 !important; }
/* === 19. Mobile adjustments === */
@media (max-width: 720px) {
.foc-featured { padding: 56px 0 64px !important; }
.foc-band { padding: 40px 0 !important; }
.foc-featured-title { font-size: 36px !important; }
.foc-band-title { font-size: 22px !important; }
}
/* === 20. ss01 + tnum globally on body for stylistic set + tabular === */
html { font-feature-settings: "ss01" 1, "tnum" 1; }
/* === Stripi fix: force heatmap cell colors with !important === */
.foc-heat.foc-up { background-color: #16A34A !important; color: #fff !important; }
.foc-heat.foc-down { background-color: #DC2626 !important; color: #fff !important; }
.foc-heat.foc-flat { background-color: #4b5563 !important; color: #fff !important; }
.foc-heat-sym, .foc-heat-name, .foc-heat-pct { color: #fff !important; }