/* ===================================================================
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; }
/* === Nav menu fix: keep dark header readable === */
/* The header keeps Astra's dark navy bg; menu items need white text */
.site-header .menu-link,
.main-header-menu .menu-link,
.ast-header-custom-item a {
color: #ffffff !important;
}
.site-header .menu-link:hover,
.main-header-menu .menu-link:hover,
.ast-header-custom-item a:hover {
color: rgba(255,255,255,0.72) !important;
}
.main-header-menu .current-menu-item .menu-link {
color: #b9b9f9 !important; /* subdued indigo for active */
}
/* Hamburger toggle: white icon on dark */
.ast-menu-toggle .ast-icon,
button.ast-menu-toggle svg,
.ast-mobile-menu-buttons .ast-menu-toggle {
color: #ffffff !important;
fill: #ffffff !important;
}
/* Drop body-level !important on color: only set where needed */
body {
color: var(--foc-ink);
}
.foc-pillar h3, .foc-band-title, .foc-tool strong, .foc-featured-title {
color: var(--foc-ink);
}
/* === Nav menu aggressive fix for desktop 1920x1080 === */
/* Nuke anything that might be hiding or recoloring nav links */
html body .site-header .main-header-menu,
html body .site-header .main-header-menu .menu-item,
html body .site-header .main-header-menu .menu-item .menu-link,
html body .site-header .main-navigation,
html body .site-header .ast-inline-flex {
display: inline-block !important;
visibility: visible !important;
}
html body .site-header .main-header-menu .menu-link,
html body .site-header .main-header-menu a {
color: #ffffff !important;
background: transparent !important;
text-decoration: none !important;
opacity: 1 !important;
}
html body .site-header .main-header-menu .menu-item {
list-style: none !important;
display: inline-flex !important;
align-items: center !important;
margin: 0 14px !important;
padding: 0 !important;
}
html body .site-header .main-header-menu .menu-link {
font-size: 15px !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
line-height: 1.4 !important;
padding: 8px 4px !important;
text-transform: none !important;
}
html body .site-header .main-header-menu .menu-link:hover,
html body .site-header .main-header-menu a:hover {
color: rgba(255,255,255,0.72) !important;
}
html body .site-header .main-header-menu .current-menu-item > .menu-link,
html body .site-header .main-header-menu .current-menu-ancestor > .menu-link {
color: #b9b9f9 !important;
}
/* Force desktop nav visible at 1920px  the desktop header must show */
@media (min-width: 1024px) {
html body #ast-desktop-header,
html body #primary-site-navigation-desktop {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
}
html body #ast-mobile-header,
html body #ast-mobile-site-navigation {
display: none !important;
}
}
/* Force mobile nav visible at mobile */
@media (max-width: 1023px) {
html body #ast-mobile-header,
html body #ast-mobile-site-navigation {
display: block !important;
visibility: visible !important;
}
html body #ast-desktop-header {
display: none !important;
}
}
/* === Markets page (Operate mode) — 5-card wall === */
.foc-markets {
background: linear-gradient(180deg, #f5f1ea 0%, #ffffff 240px);
padding: 56px 24px 80px;
max-width: 1280px;
margin: 0 auto;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
color: #0d253d;
font-feature-settings: 'tnum' 1, 'ss01' 1;
}
.foc-markets-hero { max-width: 720px; margin: 0 0 40px; }
.foc-markets-kicker {
font-size: 12px; font-weight: 500; letter-spacing: 0.14em;
text-transform: uppercase; color: #533afd;
margin: 0 0 14px;
}
.foc-markets-title {
font-size: 56px; font-weight: 600; line-height: 1.04; letter-spacing: -0.025em;
margin: 0 0 16px; color: #0d253d;
}
.foc-markets-sub {
font-size: 18px; line-height: 1.55; color: #475569; margin: 0; max-width: 620px;
}
.foc-markets-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
}
.foc-mcard {
grid-column: span 4;
background: #ffffff;
border: 1px solid rgba(13,37,61,0.08);
border-radius: 12px;
padding: 24px 24px 20px;
display: flex; flex-direction: column;
box-shadow: 0 1px 0 rgba(13,37,61,0.04), 0 8px 24px -12px rgba(13,37,61,0.12);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.foc-mcard:hover {
transform: translateY(-2px);
box-shadow: 0 1px 0 rgba(13,37,61,0.04), 0 18px 36px -18px rgba(13,37,61,0.22);
border-color: rgba(83,58,253,0.30);
}
.foc-mcard-head { margin: 0 0 12px; padding: 0 0 14px; border-bottom: 1px solid rgba(13,37,61,0.06); }
.foc-mcard-title {
font-size: 22px; font-weight: 600; letter-spacing: -0.01em;
margin: 0 0 4px; color: #0d253d;
}
.foc-mcard-desc {
font-size: 13px; color: #64748b; margin: 0; line-height: 1.4;
}
.foc-mcard-rows {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column;
}
.foc-mrow {
display: grid;
grid-template-columns: 64px 1fr 64px 78px 68px;
align-items: center;
column-gap: 12px;
padding: 11px 0;
border-top: 1px solid rgba(13,37,61,0.05);
font-size: 13px;
font-variant-numeric: tabular-nums;
}
.foc-mrow:first-child { border-top: 0; padding-top: 6px; }
.foc-mrow-sym {
font-weight: 600; color: #0d253d; letter-spacing: 0.01em;
}
.foc-mrow-name {
color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 12px; font-weight: 400;
}
.foc-mrow-spark-svg {
width: 64px; height: 20px; display: block; overflow: visible;
}
.foc-mrow-last {
text-align: right; font-weight: 500; color: #0d253d; font-size: 13px;
}
.foc-mrow-chg {
text-align: right; font-weight: 500; font-size: 12px;
padding: 3px 6px; border-radius: 4px; white-space: nowrap;
}
.foc-mrow-chg.foc-up { color: #15803D; background: rgba(22,163,74,0.10); }
.foc-mrow-chg.foc-down { color: #B91C1C; background: rgba(220,38,38,0.10); }
.foc-mrow-chg.foc-flat { color: #475569; background: rgba(100,116,139,0.10); }
/* v3.6: make sure foc-mrow renders inside the card (defeat generic ol reset) */
.foc-mcard .foc-mcard-rows,
.foc-markets .foc-mcard-rows,
.entry-content .foc-mcard-rows {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
.foc-mcard .foc-mrow,
.foc-markets .foc-mrow,
.entry-content .foc-mrow {
display: grid !important;
grid-template-columns: 64px 1fr 64px 78px 68px !important;
align-items: center !important;
column-gap: 12px !important;
padding: 11px 0 !important;
border-top: 1px solid rgba(13,37,61,0.05) !important;
font-size: 13px !important;
font-variant-numeric: tabular-nums !important;
list-style: none !important;
background: transparent !important;
color: #0d253d !important;
}
.foc-mcard .foc-mrow:first-child,
.foc-markets .foc-mrow:first-child {
border-top: 0 !important;
padding-top: 6px !important;
}
@media (max-width: 640px) {
.foc-mcard .foc-mrow,
.foc-markets .foc-mrow,
.entry-content .foc-mrow {
grid-template-columns: 56px 1fr 56px 64px !important;
column-gap: 8px !important;
}
.foc-mcard .foc-mrow-name,
.foc-markets .foc-mrow-name,
.entry-content .foc-mrow-name {
display: none !important;
}
.foc-mcard .foc-mrow-last,
.foc-markets .foc-mrow-last,
.entry-content .foc-mrow-last {
font-size: 12px !important;
}
.foc-mcard .foc-mrow-chg,
.foc-markets .foc-mrow-chg,
.entry-content .foc-mrow-chg {
font-size: 11px !important;
padding: 2px 5px !important;
}
}
.foc-mcard-cta {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 18px; align-self: flex-start;
padding: 8px 14px;
border: 1px solid rgba(13,37,61,0.16);
border-radius: 999px;
color: #0d253d;
font-size: 13px; font-weight: 500;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.foc-mcard-cta:hover {
background: rgba(83,58,253,0.08);
color: #533afd;
border-color: rgba(83,58,253,0.30);
}
@media (max-width: 1023px) {
.foc-mcard { grid-column: span 6; }
.foc-markets-title { font-size: 44px; }
}
@media (max-width: 640px) {
.foc-markets { padding: 36px 16px 56px; }
.foc-mcard { grid-column: span 12; padding: 20px 18px 16px; }
.foc-markets-title { font-size: 32px; }
.foc-markets-sub { font-size: 16px; }
.foc-mrow { grid-template-columns: 56px 1fr 56px 64px; column-gap: 8px; }
.foc-mrow-name { display: none; }
.foc-mrow-last { font-size: 12px; }
.foc-mrow-chg { font-size: 11px; padding: 2px 5px; }
}
/* === focstone.com homepage redesign — 10-band Stripi-inspired landing === */
.foc-home {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
color: #0d253d;
font-feature-settings: 'tnum' 1, 'ss01' 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.foc-home * { box-sizing: border-box; }
/* ---------- Band 1: Hero + Band 2: Mockup ---------- */
.foc-home-hero {
position: relative;
overflow: hidden;
padding: 96px 32px 120px;
background: #f6f9fc;
isolation: isolate;
}
.foc-home-mesh {
position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(ellipse 60% 80% at 0% 50%, rgba(245, 233, 212, 1) 0%, rgba(245, 233, 212, 0) 60%),
radial-gradient(ellipse 50% 60% at 25% 30%, rgba(249, 107, 238, 0.45) 0%, rgba(249, 107, 238, 0) 70%),
radial-gradient(ellipse 55% 70% at 50% 50%, rgba(155, 104, 41, 0.30) 0%, rgba(155, 104, 41, 0) 70%),
radial-gradient(ellipse 50% 65% at 70% 40%, rgba(185, 185, 249, 0.55) 0%, rgba(185, 185, 249, 0) 70%),
radial-gradient(ellipse 60% 75% at 100% 50%, rgba(83, 58, 253, 0.35) 0%, rgba(83, 58, 253, 0) 70%),
radial-gradient(ellipse 50% 50% at 85% 70%, rgba(234, 34, 97, 0.30) 0%, rgba(234, 34, 97, 0) 70%);
filter: blur(40px) saturate(120%);
opacity: 0.85;
}
.foc-home-hero-grid {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.foc-home-kicker {
font-size: 12px; font-weight: 500; letter-spacing: 0.14em;
text-transform: uppercase; color: #533afd;
margin: 0 0 18px;
}
.foc-home-title {
font-size: 64px; font-weight: 300; line-height: 1.02;
letter-spacing: -1.4px; color: #0d253d;
margin: 0 0 24px;
}
.foc-home-sub {
font-size: 20px; font-weight: 300; line-height: 1.45;
color: #273951; margin: 0 0 32px; max-width: 560px;
}
.foc-home-cta-row {
display: flex; gap: 12px; flex-wrap: wrap;
margin: 0 0 24px;
}
.foc-home-cta {
display: inline-flex; align-items: center; gap: 6px;
padding: 12px 22px; border-radius: 9999px;
font-size: 16px; font-weight: 400; line-height: 1;
text-decoration: none; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
cursor: pointer; white-space: nowrap;
}
.foc-home-cta-primary {
background: #533afd; color: #ffffff; border: 1px solid #533afd;
}
.foc-home-cta-primary:hover { background: #4434d4; border-color: #4434d4; }
.foc-home-cta-primary:active { background: #2e2b8c; border-color: #2e2b8c; }
.foc-home-cta-secondary {
background: #ffffff; color: #533afd; border: 1px solid #533afd;
}
.foc-home-cta-secondary:hover { background: rgba(83, 58, 253, 0.06); }
.foc-home-proof {
font-size: 13px; color: #61718a; margin: 0; line-height: 1.5;
}
/* Mockup composite */
.foc-home-mockup {
display: grid;
grid-template-columns: 1fr 1.1fr 1fr;
gap: 12px;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(13, 37, 61, 0.10);
border-radius: 16px;
padding: 14px;
box-shadow: 0 8px 32px rgba(0, 55, 112, 0.10), 0 2px 6px rgba(0, 55, 112, 0.04);
min-height: 380px;
}
.foc-mockup-ide,
.foc-mockup-table,
.foc-mockup-chart {
background: #1c1e54;
color: #ffffff;
border-radius: 10px;
padding: 12px;
font-size: 11px;
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 0;
}
.foc-mockup-dots {
display: flex; gap: 5px; margin-bottom: 8px;
}
.foc-mockup-dots span {
width: 7px; height: 7px; border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
}
.foc-mockup-code {
margin: 0; padding: 0;
font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
font-size: 10.5px; line-height: 1.55;
color: rgba(255, 255, 255, 0.92);
white-space: pre-wrap;
flex: 1;
font-variant-numeric: tabular-nums;
}
.foc-mockup-code .cm { color: rgba(255, 255, 255, 0.50); font-style: italic; }
.foc-mockup-code .kw { color: #b9b9f9; }
.foc-mockup-code .fn { color: #f96bee; }
.foc-mockup-code .str { color: #9b6829; }
.foc-mockup-table {
padding: 10px 12px;
gap: 4px;
}
.foc-mockup-row {
display: grid;
grid-template-columns: 50px 60px 1fr 56px;
align-items: center;
gap: 8px;
padding: 5px 0;
font-size: 11px;
font-variant-numeric: tabular-nums;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.foc-mockup-row:first-child { border-top: 0; }
.foc-mockup-row.foc-mockup-head {
font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.55); font-weight: 500;
padding-bottom: 4px; margin-bottom: 2px;
}
.foc-mockup-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foc-mockup-row span:nth-child(2) { text-align: right; font-weight: 500; }
.foc-mockup-row span:nth-child(3) { text-align: right; font-weight: 500; }
.foc-mockup-row .foc-up { color: #4ade80; }
.foc-mockup-row .foc-down { color: #f87171; }
.foc-mockup-row .foc-spark-svg { width: 56px; height: 16px; display: block; }
.foc-mockup-chart {
padding: 12px;
gap: 6px;
}
.foc-mockup-cap {
margin: 0; font-size: 10px; letter-spacing: 0.06em;
text-transform: uppercase; color: rgba(255, 255, 255, 0.55);
}
.foc-mockup-bigsvg {
width: 100%; height: 80px; display: block; flex: 1; margin: 4px 0;
}
.foc-mockup-meta {
margin: 0; font-size: 10px; color: rgba(255, 255, 255, 0.65);
font-variant-numeric: tabular-nums;
}
/* ---------- Generic band scaffolding ---------- */
.foc-home-band { padding: 80px 32px; background: #ffffff; }
.foc-home-band-inner { max-width: 1280px; margin: 0 auto; }
.foc-home-band-head { max-width: 720px; margin: 0 0 48px; }
.foc-home-h2 {
font-size: 44px; font-weight: 300; line-height: 1.1;
letter-spacing: -0.88px; color: #0d253d; margin: 0 0 14px;
}
.foc-home-h3 {
font-size: 22px; font-weight: 500; line-height: 1.2;
letter-spacing: -0.22px; color: #0d253d; margin: 0 0 8px;
}
.foc-home-band-sub {
font-size: 18px; font-weight: 300; line-height: 1.5;
color: #475569; margin: 0;
}
.foc-home-band-link {
display: inline-flex; align-items: center; gap: 4px;
margin-top: 28px;
font-size: 15px; font-weight: 500; color: #533afd;
text-decoration: none;
}
.foc-home-band-link:hover { color: #2e2b8c; text-decoration: underline; text-underline-offset: 3px; }
/* ---------- Band 3: Pillars ---------- */
.foc-home-pillars {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.foc-home-pillar {
background: #ffffff;
border: 1px solid #e3e8ee;
border-radius: 12px;
padding: 32px;
display: flex; flex-direction: column;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.foc-home-pillar:hover {
transform: translateY(-2px);
border-color: rgba(83, 58, 253, 0.30);
box-shadow: 0 12px 32px -16px rgba(0, 55, 112, 0.18);
}
.foc-home-pillar-ico {
width: 48px; height: 48px;
border: 1px solid rgba(83, 58, 253, 0.25);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 20px;
background: rgba(83, 58, 253, 0.04);
}
.foc-home-pillar-ico svg { width: 24px; height: 24px; }
.foc-home-pillar-sub {
font-size: 15px; line-height: 1.55; color: #475569; margin: 0 0 20px; flex: 1;
}
.foc-home-pillar-link {
font-size: 14px; font-weight: 500; color: #533afd;
text-decoration: none; align-self: flex-start;
}
.foc-home-pillar-link:hover { color: #2e2b8c; }
/* ---------- Band 4: Heatmap ---------- */
.foc-home-heat-band { background: #f6f9fc; }
.foc-home-heat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 130px;
gap: 10px;
}
.foc-home-heat {
display: flex; flex-direction: column; justify-content: space-between;
padding: 14px;
border-radius: 8px;
text-decoration: none;
position: relative;
transition: transform 0.15s ease, box-shadow 0.15s ease, outline-color 0.15s ease;
outline: 2px solid transparent;
font-variant-numeric: tabular-nums;
overflow: hidden;
}
.foc-home-heat-lg { grid-column: span 2; }
.foc-home-heat-md { grid-column: span 1; }
.foc-home-heat-sm { grid-column: span 1; }
.foc-home-heat:hover {
transform: translateY(-2px);
outline-color: #533afd;
box-shadow: 0 8px 20px -8px rgba(0, 55, 112, 0.25);
z-index: 1;
}
.foc-home-heat-head { display: flex; flex-direction: column; gap: 2px; }
.foc-home-heat-sym {
font-size: 14px; font-weight: 600; letter-spacing: 0.04em;
}
.foc-home-heat-name {
font-size: 11px; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.05em;
}
.foc-home-heat-spark .foc-spark-svg { width: 80px; height: 22px; display: block; opacity: 0.9; }
.foc-home-heat-rows { display: flex; flex-direction: column; gap: 1px; font-size: 10px; }
.foc-home-heat-row {
display: grid; grid-template-columns: 1fr auto; gap: 6px;
font-weight: 500;
}
.foc-home-heat-foot {
position: absolute; top: 14px; right: 14px;
font-size: 12px; font-weight: 600;
}
/* Heat colors */
.foc-home-heat.foc-up-strong { background: #15803D; color: #ffffff; }
.foc-home-heat.foc-up-soft { background: #4ade80; color: #0d253d; }
.foc-home-heat.foc-flat { background: #64748b; color: #ffffff; }
.foc-home-heat.foc-down-soft { background: #f87171; color: #ffffff; }
.foc-home-heat.foc-down-strong{ background: #B91C1C; color: #ffffff; }
/* heat content color comes from container */
/* ---------- Band 5: Tools ---------- */
.foc-home-tools {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.foc-home-tool {
background: #ffffff;
border: 1px solid #e3e8ee;
border-radius: 12px;
padding: 24px;
display: flex; flex-direction: column;
transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.foc-home-tool:hover {
transform: translateY(-2px);
border-color: rgba(83, 58, 253, 0.30);
box-shadow: 0 12px 32px -16px rgba(0, 55, 112, 0.18);
}
.foc-home-tool-head {
display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.foc-home-tool-ico {
width: 36px; height: 36px;
background: rgba(83, 58, 253, 0.06);
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.foc-home-tool-ico svg { width: 20px; height: 20px; }
.foc-home-tool-sub {
font-size: 14px; line-height: 1.5; color: #475569; margin: 0 0 16px; flex: 0 0 auto;
}
.foc-home-tool-mini {
background: #f6f9fc;
border: 1px solid #e3e8ee;
border-radius: 8px;
padding: 10px 12px;
font-size: 12px;
font-variant-numeric: tabular-nums;
margin-top: auto;
}
.foc-home-tool-mini .row {
display: flex; align-items: center; justify-content: space-between;
padding: 4px 0; gap: 8px;
border-top: 1px solid rgba(13, 37, 61, 0.06);
}
.foc-home-tool-mini .row:first-child { border-top: 0; }
.foc-home-tool-mini .tag-hi { color: #B91C1C; background: rgba(220, 38, 38, 0.10); padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; }
.foc-home-tool-mini .tag-md { color: #b45309; background: rgba(245, 158, 11, 0.10); padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; }
.foc-home-tool-mini .tag-lo { color: #15803D; background: rgba(22, 163, 74, 0.10); padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; }
.foc-home-tool-mini-cal .row > span:nth-child(1) { font-weight: 500; }
.foc-home-tool-mini-cal .row > span:nth-child(3) { color: #61718a; font-size: 11px; }
.foc-home-tool-mini-tape .row > span:nth-child(1) { font-weight: 600; }
.foc-home-tool-mini-tape .row > span:nth-child(2) { color: #475569; }
.foc-home-tool-mini-tape .row > span:nth-child(3) { font-weight: 500; }
.foc-home-tool-mini-heat {
display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
padding: 10px;
}
.foc-home-tool-mini-heat .cell {
padding: 12px 6px;
text-align: center;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
}
.foc-home-tool-mini-heat .cell.foc-up { background: #4ade80; color: #0d253d; }
.foc-home-tool-mini-heat .cell.foc-flat { background: #64748b; color: #ffffff; }
.foc-home-tool-mini-search .search-box {
background: #ffffff;
border: 1px solid #a8c3de;
border-radius: 6px;
padding: 8px 10px;
font-size: 13px;
color: #61718a;
margin-bottom: 6px;
}
.foc-home-tool-mini-search .hint { font-size: 11px; color: #61718a; padding: 0 2px; }
/* ---------- Band 6: News ---------- */
.foc-home-news-band { background: #ffffff; }
.foc-home-news-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.foc-home-news {
background: #ffffff;
border: 1px solid #e3e8ee;
border-radius: 12px;
padding: 24px;
display: flex; flex-direction: column;
transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.foc-home-news:hover {
transform: translateY(-2px);
border-color: rgba(83, 58, 253, 0.30);
box-shadow: 0 12px 32px -16px rgba(0, 55, 112, 0.18);
}
.foc-home-news-kicker {
font-size: 11px; font-weight: 500; letter-spacing: 0.10em;
text-transform: uppercase; color: #533afd;
margin: 0 0 12px;
}
.foc-home-news-time { color: #61718a; font-weight: 400; text-transform: none; letter-spacing: 0; }
.foc-home-news-title {
font-size: 19px; line-height: 1.3; font-weight: 500;
letter-spacing: -0.19px; color: #0d253d; margin: 0 0 12px;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
}
.foc-home-news-excerpt {
font-size: 14px; line-height: 1.55; color: #475569; margin: 0 0 16px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
flex: 1;
}
.foc-home-news-link {
font-size: 14px; font-weight: 500; color: #533afd;
text-decoration: none;
}
.foc-home-news-link:hover { color: #2e2b8c; text-decoration: underline; text-underline-offset: 3px; }
/* ---------- Band 7: Pull-quote ---------- */
.foc-home-quote-band { background: #f6f9fc; padding: 96px 32px; }
.foc-home-quote-grid {
display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px;
align-items: center;
}
.foc-home-quote-mark {
font-size: 64px; line-height: 0.5; color: rgba(83, 58, 253, 0.25);
margin: 0 0 24px; font-family: Georgia, serif;
}
.foc-home-quote-text {
font-size: 36px; font-weight: 300; line-height: 1.18;
letter-spacing: -0.72px; color: #0d253d;
margin: 0 0 24px; border: 0; padding: 0;
}
.foc-home-quote-by {
font-size: 14px; color: #61718a; margin: 0;
letter-spacing: 0.01em;
}
.foc-home-quote-author {
background: #ffffff;
border: 1px solid #e3e8ee;
border-radius: 12px;
padding: 32px;
text-align: center;
}
.foc-home-quote-avatar {
width: 80px; height: 80px; border-radius: 50%;
background: linear-gradient(135deg, #533afd 0%, #b9b9f9 100%);
color: #ffffff; font-size: 28px; font-weight: 500;
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 16px;
}
.foc-home-quote-name { font-size: 18px; font-weight: 500; color: #0d253d; margin: 0 0 4px; }
.foc-home-quote-role { font-size: 14px; color: #61718a; margin: 0 0 20px; line-height: 1.5; }
.foc-home-quote-link {
font-size: 14px; font-weight: 500; color: #533afd;
text-decoration: none;
}
.foc-home-quote-link:hover { color: #2e2b8c; text-decoration: underline; text-underline-offset: 3px; }
/* ---------- Band 8: Cream interlude ---------- */
.foc-home-cream-band {
background: #f5e9d4;
padding: 64px 32px;
}
.foc-home-cream-eyebrow {
font-size: 12px; font-weight: 500; letter-spacing: 0.16em;
text-transform: uppercase; color: #61718a;
text-align: center; margin: 0 0 24px;
}
.foc-home-cream-logos {
display: flex; align-items: center; justify-content: center;
flex-wrap: wrap; gap: 48px;
margin-bottom: 40px;
}
.foc-home-logo-text {
font-size: 22px; font-weight: 600; letter-spacing: -0.4px;
color: #273951; opacity: 0.55;
font-family: 'Inter', system-ui, sans-serif;
}
.foc-home-cream-metrics {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
max-width: 880px; margin: 0 auto;
}
.foc-home-cream-metrics .metric {
text-align: center;
display: flex; flex-direction: column; gap: 4px;
}
.foc-home-cream-metrics strong {
font-size: 40px; font-weight: 300; line-height: 1;
letter-spacing: -0.8px; color: #0d253d;
font-variant-numeric: tabular-nums;
}
.foc-home-cream-metrics span {
font-size: 13px; color: #61718a; letter-spacing: 0.02em;
}
/* ---------- Band 9: Newsletter CTA ---------- */
.foc-home-newsletter-band {
background: #1c1e54;
color: #ffffff;
padding: 96px 32px;
text-align: center;
}
.foc-home-newsletter-inner { max-width: 640px; margin: 0 auto; }
.foc-home-newsletter-band .foc-home-h2 { color: #ffffff; }
.foc-home-newsletter-band .foc-home-band-sub { color: rgba(255, 255, 255, 0.75); margin-bottom: 32px; }
.foc-home-newsletter-form {
display: flex; gap: 8px; max-width: 480px; margin: 0 auto 16px;
background: #ffffff;
border-radius: 9999px;
padding: 6px;
border: 1px solid rgba(255, 255, 255, 0.12);
}
.foc-home-newsletter-input {
flex: 1; min-width: 0;
border: 0; outline: 0; background: transparent;
padding: 10px 16px;
font-size: 15px; color: #0d253d;
font-family: inherit;
}
.foc-home-newsletter-input::placeholder { color: #61718a; }
.foc-home-newsletter-btn {
background: #533afd; color: #ffffff;
border: 0; border-radius: 9999px;
padding: 12px 24px;
font-size: 15px; font-weight: 500;
cursor: pointer;
transition: background 0.15s ease;
}
.foc-home-newsletter-btn:hover { background: #4434d4; }
.foc-home-newsletter-micro { font-size: 13px; color: rgba(255, 255, 255, 0.6); margin: 0; }
/* ---------- Band 10: Footer ---------- */
.foc-home-footer {
background: #ffffff;
color: #0d253d;
padding: 64px 32px 32px;
border-top: 1px solid #e3e8ee;
}
.foc-home-footer-inner {
max-width: 1280px; margin: 0 auto;
display: grid;
grid-template-columns: 1.2fr 3fr;
gap: 64px;
margin-bottom: 40px;
}
.foc-home-footer-logo {
font-size: 20px; font-weight: 600; letter-spacing: -0.2px;
color: #0d253d; margin: 0 0 8px;
}
.foc-home-footer-tag {
font-size: 14px; color: #61718a; margin: 0; max-width: 240px; line-height: 1.5;
}
.foc-home-footer-cols {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
.foc-home-footer-col { display: flex; flex-direction: column; gap: 8px; }
.foc-home-footer-h {
font-size: 12px; font-weight: 600; letter-spacing: 0.10em;
text-transform: uppercase; color: #0d253d; margin: 0 0 4px;
}
.foc-home-footer-col a {
font-size: 14px; color: #61718a; text-decoration: none;
transition: color 0.15s ease;
}
.foc-home-footer-col a:hover { color: #533afd; }
.foc-home-footer-bottom {
max-width: 1280px; margin: 0 auto;
display: flex; align-items: center; justify-content: space-between;
padding-top: 24px; border-top: 1px solid #e3e8ee;
flex-wrap: wrap; gap: 16px;
}
.foc-home-footer-bottom p { font-size: 13px; color: #61718a; margin: 0; }
.foc-home-footer-social { display: flex; gap: 16px; }
.foc-home-footer-social a { color: #61718a; transition: color 0.15s ease; }
.foc-home-footer-social a:hover { color: #533afd; }
/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
.foc-home-hero { padding: 64px 24px 80px; }
.foc-home-hero-grid { grid-template-columns: 1fr; gap: 48px; }
.foc-home-title { font-size: 48px; letter-spacing: -1.0px; }
.foc-home-sub { font-size: 18px; }
.foc-home-mockup { grid-template-columns: 1fr 1fr; min-height: 320px; }
.foc-home-mockup-chart { display: none; }
.foc-home-band { padding: 64px 24px; }
.foc-home-h2 { font-size: 36px; }
.foc-home-pillars { grid-template-columns: repeat(2, 1fr); }
.foc-home-heat-grid { grid-template-columns: repeat(3, 1fr); }
.foc-home-heat-lg { grid-column: span 1; }
.foc-home-tools { grid-template-columns: repeat(2, 1fr); }
.foc-home-news-grid { grid-template-columns: 1fr; }
.foc-home-quote-grid { grid-template-columns: 1fr; gap: 40px; }
.foc-home-quote-text { font-size: 28px; }
.foc-home-cream-metrics { grid-template-columns: repeat(2, 1fr); }
.foc-home-footer-inner { grid-template-columns: 1fr; gap: 40px; }
.foc-home-footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.foc-home-hero { padding: 48px 16px 64px; }
.foc-home-title { font-size: 36px; letter-spacing: -0.7px; }
.foc-home-sub { font-size: 16px; }
.foc-home-cta-row { flex-direction: column; align-items: stretch; }
.foc-home-cta { justify-content: center; }
.foc-home-mockup { grid-template-columns: 1fr; min-height: auto; }
.foc-home-mockup-ide { display: none; }
.foc-home-mockup-table { padding: 12px; }
.foc-home-band { padding: 48px 16px; }
.foc-home-h2 { font-size: 28px; }
.foc-home-band-sub { font-size: 16px; }
.foc-home-pillars { grid-template-columns: 1fr; }
.foc-home-heat-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 110px; }
.foc-home-tools { grid-template-columns: 1fr; }
.foc-home-cream-logos { gap: 24px; }
.foc-home-logo-text { font-size: 16px; }
.foc-home-cream-metrics { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.foc-home-cream-metrics strong { font-size: 32px; }
.foc-home-newsletter-form { flex-direction: column; border-radius: 16px; padding: 8px; }
.foc-home-newsletter-btn { width: 100%; }
.foc-home-quote-text { font-size: 22px; }
.foc-home-footer-bottom { flex-direction: column; align-items: flex-start; }
}
/* ===== v2.2: header / menu fix v2 (correct selectors) ===== */
/* ============================================================
Header / menu fix v2 — Astra → focstone design system
============================================================ */
/* --- 1. Hide leftovers: eMail widget + duplicate Subscribe nav item --- */
.ast-header-html, /* the "eMail: nsrzsean@hotmail.com" wrapper */
#menu-item-732, /* duplicate Subscribe in nav */
li.foc-cta-link { /* same item, by class */
display: none !important;
}
/* --- 2. Replace the .site-logo-img (old PNG) with the FOCSTONE wordmark SVG --- */
.site-branding {
width: 140px !important;
height: 28px !important;
margin-right: 16px !important;
display: flex !important;
align-items: center !important;
}
.site-logo-img,
.custom-logo-link,
.custom-logo {
width: 140px !important;
height: 28px !important;
display: block !important;
position: relative !important;
overflow: hidden !important;
}
.site-logo-img .custom-logo,
.custom-logo-link .custom-logo {
/* Hide the actual ![]()
; the SVG is rendered as a background */
visibility: hidden !important;
position: absolute !important;
width: 140px !important;
height: 28px !important;
object-fit: contain !important;
}
.site-logo-img::before,
.custom-logo-link::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: url('https://www.focstone.com/wp-content/uploads/focstone-wordmark.svg') no-repeat left center !important;
background-size: contain !important;
pointer-events: none !important;
}
.custom-logo-link {
pointer-events: auto !important;
}
/* --- 3. Main nav: strip Astra styles, apply focstone design system --- */
.ast-desktop-header .main-header-menu,
.ast-desktop-header .main-header-menu ul {
background: transparent !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.ast-desktop-header .main-header-menu > .menu-item > .menu-link {
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
font-size: 15px !important;
font-weight: 500 !important;
letter-spacing: -0.2px !important;
color: var(--ink) !important;
background: transparent !important;
border: 0 !important;
padding: 8px 12px !important;
border-radius: 8px !important;
transition: color .15s ease, background .15s ease !important;
text-decoration: none !important;
line-height: 1.4 !important;
}
.ast-desktop-header .main-header-menu > .menu-item > .menu-link:hover {
color: var(--indigo) !important;
background: rgba(83, 58, 253, 0.06) !important;
}
.ast-desktop-header .main-header-menu > .menu-item.current-menu-item > .menu-link,
.ast-desktop-header .main-header-menu > .menu-item.current-menu-ancestor > .menu-link {
color: var(--indigo) !important;
background: transparent !important;
position: relative !important;
}
.ast-desktop-header .main-header-menu > .menu-item.current-menu-item > .menu-link::after {
content: '' !important;
position: absolute !important;
left: 12px; right: 12px; bottom: 2px !important;
height: 2px !important;
background: var(--indigo) !important;
border-radius: 1px !important;
}
/* --- 4. Sign in / Subscribe buttons --- */
.site-header-primary-section-right,
.ast-builder-menu-1,
.site-header-section-right {
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
/* Style the existing buttons in the header */
.site-header .button-custom-menu-item a,
.site-header .ast-header-button-1 a,
.site-header .ast-header-button-2 a,
.site-header .site-ast-header-button-1 a,
.site-header .site-ast-header-button-2 a {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
letter-spacing: -0.2px !important;
border-radius: 9999px !important;
padding: 8px 16px !important;
text-decoration: none !important;
transition: background .15s ease, border-color .15s ease, color .15s ease !important;
white-space: nowrap !important;
line-height: 1 !important;
display: inline-block !important;
}
.site-header .ast-header-button-1 a,
.site-header .button-ghost {
background: transparent !important;
color: var(--ink) !important;
border: 1px solid var(--hairline) !important;
}
.site-header .ast-header-button-1 a:hover,
.site-header .button-ghost:hover {
background: var(--canvas-soft) !important;
border-color: var(--ink-mute-2) !important;
}
.site-header .ast-header-button-2 a,
.site-header .button-primary,
.site-header .ast-builder-button-wrap a {
background: var(--indigo) !important;
color: #fff !important;
border: 1px solid var(--indigo) !important;
}
.site-header .ast-header-button-2 a:hover,
.site-header .button-primary:hover,
.site-header .ast-builder-button-wrap a:hover {
background: var(--indigo-deep) !important;
border-color: var(--indigo-deep) !important;
}
/* --- 5. Header overall --- */
.site-header,
.ast-desktop-header {
background: rgba(255, 255, 255, 0.94) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border-bottom: 1px solid var(--hairline) !important;
padding: 14px 0 !important;
position: sticky !important;
top: 0 !important;
z-index: 100 !important;
}
.site-header .ast-container,
.site-header .main-header-bar {
max-width: 1320px !important;
display: flex !important;
align-items: center !important;
gap: 24px !important;
padding: 0 32px !important;
margin: 0 auto !important;
}
.site-header .main-header-bar-navigation {
flex: 1 1 auto !important;
display: flex !important;
justify-content: center !important;
}
/* --- 6. Footer cleanup --- */
footer.site-footer .ast-footer-copyright,
footer .footer-email-wrap {
display: none !important;
}
/* ===== v2.3: variable aliases + mobile menu polish (2026-09-06) =====
The header/menu fix v2 referenced --ink / --indigo / --hairline / --indigo-deep
/ --ink-mute-2 / --canvas-soft, but only the --foc-* prefixed tokens were
defined. Add the unprefixed aliases so the menu styling actually applies. */
:root {
--ink: var(--foc-ink);
--ink-2: var(--foc-ink-secondary);
--ink-mute: var(--foc-ink-mute);
--ink-mute-2: var(--foc-ink-mute-2);
--indigo: var(--foc-primary);
--indigo-deep: var(--foc-primary-deep);
--indigo-soft: var(--foc-primary-soft);
--canvas: var(--foc-canvas);
--canvas-soft: var(--foc-canvas-soft);
--canvas-cream: var(--foc-canvas-cream);
--hairline: var(--foc-hairline);
--on-primary: var(--foc-on-primary);
--up: var(--foc-up);
--down: var(--foc-down);
--flat: var(--foc-flat);
--r-md: 8px;
--r-lg: 12px;
--r-pill: 9999px;
}
/* --- 2. Mobile menu items: also clean up when drawer is open --- */
.ast-mobile-header-content .main-header-menu > .menu-item > .menu-link,
.ast-mobile-popup-content .main-header-menu > .menu-item > .menu-link {
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
font-size: 15px !important;
font-weight: 500 !important;
letter-spacing: -0.2px !important;
color: var(--ink) !important;
background: transparent !important;
border: 0 !important;
padding: 10px 14px !important;
border-radius: 8px !important;
text-decoration: none !important;
line-height: 1.4 !important;
}
.ast-mobile-header-content .main-header-menu > .menu-item > .menu-link:hover,
.ast-mobile-popup-content .main-header-menu > .menu-item > .menu-link:hover {
color: var(--indigo) !important;
background: rgba(83, 58, 253, 0.06) !important;
}
.ast-mobile-header-content .main-header-menu > .menu-item.current-menu-item > .menu-link,
.ast-mobile-popup-content .main-header-menu > .menu-item.current-menu-item > .menu-link {
color: var(--indigo) !important;
}
/* --- 3. Mobile header brand: same FOCSTONE wordmark via ::before --- */
.ast-mobile-header .site-branding,
.ast-mobile-header .site-logo-img {
width: 140px !important;
height: 28px !important;
position: relative !important;
overflow: hidden !important;
}
.ast-mobile-header .site-branding .custom-logo,
.ast-mobile-header .site-logo-img .custom-logo {
visibility: hidden !important;
position: absolute !important;
width: 140px !important;
height: 28px !important;
}
.ast-mobile-header .site-branding::before,
.ast-mobile-header .site-logo-img::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: url('https://www.focstone.com/wp-content/uploads/focstone-wordmark.svg') no-repeat left center !important;
background-size: contain !important;
pointer-events: none !important;
}
/* --- 4. Mobile menu trigger: tinted for visibility on glass header --- */
.ast-mobile-header .menu-toggle.main-header-menu-toggle,
.ast-mobile-header .ast-mobile-menu-trigger-fill {
color: var(--ink) !important;
background: transparent !important;
border: 1px solid var(--hairline) !important;
border-radius: 8px !important;
padding: 6px 8px !important;
}
.ast-mobile-header .menu-toggle.main-header-menu-toggle:hover {
background: var(--canvas-soft) !important;
border-color: var(--ink-mute-2) !important;
}
/* --- 5. Stock-tape offset under sticky header --- */
.foc-tape-sticky { top: 60px !important; }
@media (max-width: 600px) {
.foc-tape-sticky { top: 56px !important; }
}
/* ===== v2.4: header/menu specificity bump (2026-09-06) =====
WordPress Customizer "Additional CSS" injects a