/* ══════════════════════════════════════════════════════════════════════════ * Finboard Styling Enhancements — extracted from finboard-v4.css * ────────────────────────────────────────────────────────────────────────── * * Contains our refinements to SHARED classes (classes that also exist in * the base Finboard v2.4.9 CSS). Because these classes appear in both * files, this CSS MUST be loaded AFTER finboard-v4.css so our rules * override where we've specifically targeted. * * What's in here: * ▸ Design token additions for dark/light themes (--fb-bg, --fb-gold, * --fb-neu-*, --fb-shadow-*, --fb-border-gold, topic colours, etc.) * ▸ Body-level gradient + perlin noise background for community pages * ▸ Hello theme button-armour (!important on padding / border-radius / * line-height / appearance so WP themes can't strip our styles) * ▸ Community section nav — neumorphic pill toggle track with raised * active thumb (matches the Tools preset toggle pattern) * ▸ Context-morph nav: scroll past threshold → nav becomes * `Community / Section ▾` editorial breadcrumb with section dropdown * (the pill track + morph bar both live inside .finboard-community-bar) * ▸ Global form-input unification — sunken neumorphic treatment across * Ask / compose / reply / news-comment / broker-rating forms * ▸ Raised neumorphic-out shadow on community cards (post-card, broker- * review, broker-sidebar) in both themes * ▸ `.finboard` container gradient + noise film (page-background visuals) * ▸ Hide the theme's duplicate H1 (.page-header / .entry-title) on * Finboard community pages * * How to enqueue (in your Finboard_Frontend class, AFTER finboard-v4.css): * wp_enqueue_style( * 'finboard-enhancements', * FINBOARD_PLUGIN_URL . 'assets/css/finboard-enhancements.css', * array( 'finboard-v4' ), // ← dependency ensures correct load order * FINBOARD_VERSION * ); * * Load this site-wide (on every community page), not just on Tools. * The design language needs to be consistent across Feed / Ask / Quiz / * Ratings / News / Tools / Academy — the enhancements are global. * * Version: 1.0.0 * Extracted: 2026-04-23 * Works with: Finboard v2.4.9+ * * NOTE ON CONFLICTS: If the dev has made changes to any of these shared * classes in v2.4.9, those changes may be masked by these rules. Review * anything you've modified in finboard-v4.css against this file before * merging. Most rules here carry !important only on paint-level properties * (bg, colour, border, padding) to survive the WP theme cascade. * ══════════════════════════════════════════════════════════════════════════ */ /* DARK theme — global scope for elements outside .finboard wrapper (nav bar, auth shell). Duplicates the dark overrides at the html level so CSS vars resolve correctly on elements that are direct children of , like .finboard-community-bar. KEEP IN SYNC with the .finboard-scoped dark block above. */ html[data-finboard-theme="dark"] { --fb-navy: #2a2a2a; --fb-bg: #353535; /* TIC --bg-dark */ --fb-bg-card: #3d3d3d; /* TIC --bg-panel */ --fb-bg-raised: #454545; --fb-bg-hover: #4a4a4a; --fb-bg-input: #2c2c2c; --fb-bg-inset: #2a2a2a; --fb-gold: #fcc419; /* TIC --gold */ --fb-gold-hover: #ffd54e; --fb-gold-dim: rgba(252,196,25,0.10); --fb-gold-glow: rgba(252,196,25,0.18); --fb-green: #4caf50; --fb-green-dim: rgba(76,175,80,.08); --fb-red: #f44336; --fb-red-dim: rgba(244,67,54,.08); --fb-border: rgba(255,255,255,0.08); --fb-border-strong: rgba(255,255,255,0.14); --fb-border-gold: rgba(252,196,25,0.25); --fb-text: #ffffff; --fb-text-secondary: #e0e0e0; --fb-text-muted: #b0b0b0; --fb-text-link: #fcc419; --fb-shadow: 0 2px 6px rgba(0,0,0,.4); --fb-shadow-lg: 0 8px 24px rgba(0,0,0,.45); --fb-shadow-gold: 0 0 20px rgba(252,196,25,.10); --fb-shadow-card: 3px 3px 10px rgba(0,0,0,.55), -2px -2px 8px rgba(255,255,255,.04); --fb-neu-out: 10px 10px 15px rgba(0,0,0,.5), -10px -10px 15px rgba(255,255,255,.03); --fb-neu-out-sm: 3px 3px 10px rgba(0,0,0,.55), -2px -2px 8px rgba(255,255,255,.04); --fb-neu-in: inset 8px 8px 16px rgba(0,0,0,.6), inset -8px -8px 16px rgba(255,255,255,.02); --fb-neu-in-sm: inset 2px 2px 5px rgba(0,0,0,.5), inset -2px -2px 5px rgba(255,255,255,.03); --fb-neu-gold: 0 0 24px rgba(252,196,25,.15), 0 0 8px rgba(252,196,25,.10); --fb-neu-flat: 0 1px 2px rgba(0,0,0,.2); --fb-glass: rgba(255,255,255,0.025); --fb-glass-border: rgba(255,255,255,0.08); /* Topic colours — brighter for dark bg */ --fb-topic-trading: #22c55e; --fb-topic-investing: #60a5fa; --fb-topic-isas: #a855f7; --fb-topic-crypto: #f97316; --fb-topic-pensions: #818cf8; --fb-topic-tax: #f87171; --fb-topic-news: #22d3ee; --fb-topic-general: #9ca3af; /* Utility tokens */ --fb-text-on-gold: #0f0f17; --fb-text-disabled: #a1a1aa; --fb-accent-cyan: #00d4aa; --fb-radius-xxs: 3px; --fb-radius-md: 10px; --fb-shadow-gold-hover: 0 4px 16px rgba(252,196,25,.25); } /* Force page background to match theme — scoped to community/auth pages only. * * SCROLL-BLOCK FIX (2026-04-24, third iteration — mobile-safe): * TIC's tic-custom.css sets `html, body { overflow-x: hidden }`. Per CSS * spec, any non-visible overflow on one axis promotes the other axis from * `visible` → `auto`, which turns into a scroll container that * never actually overflows — viewport stops scrolling entirely. * * Previous attempts: * 1. body `overflow: clip` — worked locally but WP Engine blocked scroll * propagation to viewport. * 2. body overflow: visible + `html:has(body.finboard-community-page)` * overflow: visible — worked on desktop but `:has()` isn't universally * supported on mobile Safari < 15.4 / older mobile Chromes, silently * failing on mobile and leaving html stuck with overflow-x: hidden. * * Final fix: target the `data-finboard-theme` attribute that Finboard's * theme JS sets directly on on every community/auth page. Attribute * selectors have universal browser support — no `:has()` required. * * Body also gets overflow: visible on both axes to stop its own axis * promotion. Result: viewport scrolls the document normally on every * device, desktop and mobile. */ html[data-finboard-theme] { overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; } body.finboard-community-page, body.finboard-auth-page { background: var(--fb-bg) !important; overflow-x: visible !important; overflow-y: visible !important; } /* Hide the theme's page-title bar ("Tools" / "Feed" / etc.) on Finboard * community pages — Finboard renders its own contextual page chrome, * and the duplicate H1 from Hello theme adds redundant vertical weight. */ body.finboard-community-page .page-header, body.finboard-community-page main > .page-header, body.finboard-community-page h1.entry-title { display: none !important; } html[data-finboard-theme="dark"] body.finboard-community-page, html[data-finboard-theme="dark"] body.finboard-auth-page { background: var(--fb-bg) !important; } [data-finboard-theme="light"] .finboard, .finboard.finboard--light { background-image: radial-gradient(ellipse 120% 80% at 50% -5%, rgba(252, 196, 25, 0.08) 0%, rgba(252, 196, 25, 0) 55%), radial-gradient(ellipse 110% 90% at 50% 110%, rgba(30, 40, 60, 0.06) 0%, rgba(30, 40, 60, 0) 60%), linear-gradient(180deg, #fbfcfe 0%, #f5f7fa 50%, #eaedf2 100%); } /* Perlin noise film — sits above the container gradient, below content. Uses * mix-blend-mode so the grain harmonises with whatever tone is beneath it. */ .finboard::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.08; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch' seed='7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 240px 240px; } [data-finboard-theme="light"] .finboard::before { opacity: 0.05; mix-blend-mode: multiply; } /* Ensure content layer sits above noise */ .finboard > * { position: relative; z-index: 1; } /* Re-apply component padding after global reset */ .finboard .finboard-btn { padding: 8px 16px; } .finboard .finboard-btn--primary:disabled { opacity: 0.4; background: var(--fb-bg-raised); color: var(--fb-text-muted); } /* ── Prose link pattern — TIC-aligned gold underline. * Applies to user-generated/editorial prose contexts only. Gives a * translucent gold underline at rest that solidifies on hover — mirrors * the .tic-page-wrapper .gold-link pattern from the TIC site stylesheet. * Outside these contexts, links stay unadorned per the base rule above. */ .finboard-question__body a, .finboard-comment__body a, .finboard-academy__card-body a, .finboard-academy__lesson-body a, .finboard-news-card__excerpt a, .finboard-broker-rating__review-body a, .finboard-broker-review__body a, .finboard-post-card__preview a { color: var(--fb-gold) !important; text-decoration: underline !important; text-decoration-color: var(--fb-border-gold); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color var(--fb-transition); } .finboard-question__body a:hover, .finboard-comment__body a:hover, .finboard-academy__card-body a:hover, .finboard-academy__lesson-body a:hover, .finboard-news-card__excerpt a:hover, .finboard-broker-rating__review-body a:hover, .finboard-broker-review__body a:hover, .finboard-post-card__preview a:hover { text-decoration-color: var(--fb-gold) !important; } /* Community bar sticky positioning: The site header (Elementor) is position:static — it scrolls off screen. So the community bar sticks to top:0 (or top:32px when WP admin bar is present). --fb-header-h is kept for backwards compat but overridden here. */ .finboard-community-bar { background: var(--fb-bg); border-bottom: 1px solid var(--fb-border); padding: 8px 16px; position: sticky; top: 0; z-index: 90; transition: padding 260ms cubic-bezier(.4,0,.2,1), background-color 220ms ease, backdrop-filter 220ms ease, box-shadow 220ms ease; } /* Morphed bar (hidden by default — only shows when .is-morphed) */ .finboard-community-bar__morph { display: none; align-items: center; justify-content: center; gap: 8px; max-width: calc(var(--fb-max-width, 1200px) + var(--fb-sidebar-w, 300px) + 24px); margin: 0 auto; padding: 6px 16px; width: 100%; box-sizing: border-box; } .finboard-community-bar__morph-crumb { font-size: 12px; color: var(--fb-text-muted); font-weight: 500; letter-spacing: 0.02em; } .finboard-community-bar__morph-sep { color: var(--fb-text-muted); opacity: 0.5; font-size: 12px; } /* Current-section dropdown trigger — click to open section picker */ .finboard-community-bar__morph-details { position: relative; } .finboard-community-bar__morph-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 12px !important; font-size: 13px !important; font-weight: 600 !important; color: var(--fb-gold) !important; background: var(--fb-gold-dim) !important; border: 1px solid var(--fb-border-gold) !important; border-radius: var(--fb-radius-pill) !important; cursor: pointer; list-style: none; line-height: 1.3 !important; transition: background-color 180ms ease, box-shadow 180ms ease; } .finboard-community-bar__morph-trigger::-webkit-details-marker { display: none; } .finboard-community-bar__morph-trigger:hover { background: rgba(252, 196, 25, 0.14) !important; box-shadow: 0 0 0 1px var(--fb-border-gold); } .finboard-community-bar__morph-trigger-chevron { width: 12px; height: 12px; opacity: 0.7; transition: transform 220ms cubic-bezier(.4,0,.2,1); } .finboard-community-bar__morph-details[open] .finboard-community-bar__morph-trigger-chevron { transform: rotate(180deg); } /* Dropdown panel with all sections (appears under the trigger). * Uses `ul.` selector to match specificity of `.finboard ul` reset (line 545) * which sets padding:0 on all lists inside .finboard — otherwise it wins. */ ul.finboard-community-bar__morph-panel, .finboard-community-bar__morph-panel { position: absolute; top: calc(100% + 6px); left: 0; min-width: 200px; background: var(--fb-bg-card); border: 1px solid var(--fb-border); border-radius: var(--fb-radius); box-shadow: 0 12px 32px rgba(0,0,0,0.35); padding: 4px !important; margin: 0; list-style: none; z-index: 100; box-sizing: border-box; /* Fade-in animation when
*/ animation: finboard-morph-panel-in 180ms cubic-bezier(.4,0,.2,1); } /* Reset list-item defaults (UA stylesheet indents lists ~40px which would * push children outside the panel's padding box) */ .finboard-community-bar__morph-panel li { list-style: none; margin: 0; padding: 0; } .finboard-community-bar__morph-panel a, .finboard-community-bar__morph-panel button { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 13px; font-weight: 500; color: var(--fb-text) !important; border-radius: var(--fb-radius-xs, 4px); text-decoration: none !important; background: transparent !important; border: none !important; width: 100%; box-sizing: border-box; text-align: left; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; } .finboard-community-bar__morph-panel a:hover, .finboard-community-bar__morph-panel button:hover { background: var(--fb-bg-hover) !important; } .finboard-community-bar__morph-panel a[aria-current="page"] { color: var(--fb-gold) !important; background: var(--fb-gold-dim) !important; font-weight: 600; } .finboard-community-bar__morph-panel svg { width: 14px; height: 14px; opacity: 0.7; flex-shrink: 0; } /* ── State toggle ── */ .finboard-community-bar { transition: padding 220ms cubic-bezier(.4,0,.2,1), background-color 220ms ease, backdrop-filter 220ms ease, box-shadow 220ms ease; } .finboard-community-bar.is-morphed { padding: 4px 16px; background: color-mix(in srgb, var(--fb-bg) 82%, transparent); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.2); } .finboard-community-bar.is-morphed .finboard-community-bar__inner { display: none; } .finboard-community-bar.is-morphed .finboard-community-bar__morph { display: flex; animation: finboard-fadeIn 180ms cubic-bezier(.4,0,.2,1); } /* When WP admin bar is present (logged-in admins), offset by admin bar height */ .admin-bar .finboard-community-bar { top: 32px; } /* Primary section nav — restyled as a neumorphic toggle track. * Sunken inset groove with raised "thumb" active tab, matching the Tools * preset toggle pattern. This is the first thing visible on every page; * the consistent tactile language anchors the design system. */ .finboard-community-bar__inner { max-width: var(--fb-container-w); margin: 0 auto; display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; padding: 6px; background: var(--fb-bg-inset); border-radius: var(--fb-radius-pill); border: 1px solid var(--fb-border); box-shadow: inset 3px 3px 6px rgba(0,0,0,0.45), inset -2px -2px 5px rgba(255,255,255,0.03); } [data-finboard-theme="light"] .finboard-community-bar__inner, .finboard--light .finboard-community-bar__inner { box-shadow: inset 3px 3px 6px rgba(0,0,0,0.10), inset -2px -2px 4px rgba(255,255,255,0.7); } .finboard-community-bar__inner::-webkit-scrollbar { display: none; } button.finboard-community-tab, a.finboard-community-tab, .finboard-community-tab { position: relative; padding: 8px 18px !important; font-size: 13px; font-weight: 600; color: var(--fb-text-muted) !important; white-space: nowrap; transition: color 180ms cubic-bezier(.4,0,.2,1), background 180ms cubic-bezier(.4,0,.2,1), box-shadow 220ms cubic-bezier(.4,0,.2,1), transform 220ms cubic-bezier(.34,1.56,.64,1), opacity var(--fb-transition); display: flex; align-items: center; gap: 7px; cursor: pointer; background: transparent !important; border: none !important; border-radius: var(--fb-radius-pill) !important; font-family: var(--fb-font); scroll-snap-align: start; min-height: 42px; line-height: 1.4 !important; text-decoration: none; -webkit-appearance: none; appearance: none; text-shadow: none; transform: translateY(0); } .finboard-community-tab:hover { color: var(--fb-text) !important; background: transparent !important; transform: translateY(-1px); } .finboard-community-tab:focus-visible { outline: 2px solid var(--fb-gold); outline-offset: 2px; } .finboard-community-tab.active, .finboard-community-tab--active { color: var(--fb-gold) !important; background: var(--fb-bg-card) !important; transform: translateY(-1px); box-shadow: 4px 4px 10px rgba(0,0,0,0.55), -2px -2px 6px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.25), inset 0 0 0 1px var(--fb-border-gold); } [data-finboard-theme="light"] .finboard-community-tab.active, [data-finboard-theme="light"] .finboard-community-tab--active, .finboard--light .finboard-community-tab.active { box-shadow: 3px 3px 7px rgba(0,0,0,0.15), -2px -2px 5px rgba(255,255,255,0.9), inset 0 1px 0 rgba(255,255,255,0.7), inset 0 0 0 1px var(--fb-border-gold); } .finboard-community-tab svg { width: 16px; height: 16px; opacity: .45; transition: opacity var(--fb-transition); } .finboard-community-tab:hover svg { opacity: .7; } .finboard-community-tab.active svg, .finboard-community-tab--active svg { opacity: 1; color: var(--fb-gold); } /* Focus-visible for keyboard navigation */ .finboard-community-tab:focus-visible { outline: 2px solid var(--fb-gold); outline-offset: 2px; border-radius: var(--fb-radius-pill); } /* Disabled tab (e.g., Ask when Discourse is down) */ .finboard-community-tab--disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; } .finboard-community-tab--disabled svg { opacity: .3; } /* Notification badge dot on tabs */ .finboard-community-tab__badge { position: absolute; top: 5px; right: 6px; width: 8px; height: 8px; background: var(--fb-red); border-radius: 50%; border: 2px solid var(--fb-bg-raised); animation: finboard-pulse 2s ease-in-out infinite; } .finboard-community-tab__badge--count { width: auto; height: auto; padding: 0 5px; font-size: 9px; font-weight: 700; line-height: 16px; color: #fff; border-radius: var(--fb-radius-sm); top: 2px; right: 2px; } /* Dark mode community bar — uses global html dark vars (no longer needs hardcoding). */ [data-finboard-theme="dark"] .finboard-community-bar { background: var(--fb-bg); border-bottom-color: var(--fb-border); box-shadow: 0 2px 8px rgba(0,0,0,.3); } [data-finboard-theme="dark"] .finboard-community-bar__inner { background: rgba(21,24,34,.7); border-color: rgba(255,255,255,.04); } [data-finboard-theme="dark"] .finboard-community-tab { color: var(--fb-text-muted); } [data-finboard-theme="dark"] .finboard-community-tab:hover { color: var(--fb-text); background: var(--fb-bg-hover); } [data-finboard-theme="dark"] .finboard-community-tab.active, [data-finboard-theme="dark"] .finboard-community-tab--active { color: var(--fb-gold) !important; background: var(--fb-bg-card) !important; box-shadow: 4px 4px 10px rgba(0,0,0,0.55), -2px -2px 6px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.25), inset 0 0 0 1px var(--fb-border-gold) !important; } [data-finboard-theme="dark"] .finboard-community-tab svg { opacity: .5; } [data-finboard-theme="dark"] .finboard-community-tab.active svg, [data-finboard-theme="dark"] .finboard-community-tab--active svg { opacity: 1; } /* Light mode community bar — solid white for clean scroll */ [data-finboard-theme="light"] .finboard-community-bar { background: #fff; border-bottom-color: rgba(0,0,0,.08); box-shadow: 0 1px 4px rgba(0,0,0,.06); } [data-finboard-theme="light"] .finboard-community-bar__inner { background: #e9ecf1; border-color: rgba(0,0,0,.06); } [data-finboard-theme="light"] .finboard-community-tab.active, [data-finboard-theme="light"] .finboard-community-tab--active { color: var(--fb-gold) !important; background: #ffffff !important; box-shadow: 3px 3px 7px rgba(0,0,0,0.15), -2px -2px 5px rgba(255,255,255,0.9), inset 0 1px 0 rgba(255,255,255,0.7), inset 0 0 0 1px var(--fb-border-gold) !important; } /* ── 7. Post Card — Reddit-Style with Left Vote Column ───────── */ .finboard-post-card { display: flex; background: var(--fb-bg-card); border: 1px solid var(--fb-border); border-radius: var(--fb-radius); margin-bottom: 12px; transition: border-color var(--fb-transition), box-shadow var(--fb-transition), transform var(--fb-transition); overflow: hidden; box-shadow: var(--fb-neu-out-sm); } .finboard-post-card:hover { border-color: rgba(232,169,16,0.4); box-shadow: var(--fb-neu-out-sm), 0 0 20px rgba(232,169,16,.12), 0 0 6px rgba(232,169,16,.08); transform: translateY(-2px); cursor: pointer; } /* Left accent border by topic color */ .finboard-post-card[data-topic="trading"] { border-left: 3px solid var(--fb-topic-trading); } .finboard-post-card[data-topic="investing"] { border-left: 3px solid var(--fb-topic-investing); } .finboard-post-card[data-topic="isas"] { border-left: 3px solid var(--fb-topic-isas); } .finboard-post-card[data-topic="crypto"] { border-left: 3px solid var(--fb-topic-crypto); } .finboard-post-card[data-topic="pensions"] { border-left: 3px solid var(--fb-topic-pensions); } .finboard-post-card[data-topic="tax"] { border-left: 3px solid var(--fb-topic-tax); } .finboard-post-card[data-topic="news"] { border-left: 3px solid var(--fb-topic-news); } .finboard-post-card[data-topic="general"] { border-left: 3px solid var(--fb-topic-general); } /* Light mode post cards */ [data-finboard-theme="light"] .finboard-post-card { background: #ffffff; border: 1px solid rgba(0,0,0,.10); box-shadow: 0 2px 8px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.04); position: relative; } [data-finboard-theme="light"] .finboard-post-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.06), var(--fb-neu-gold); border-color: rgba(196,146,10,.15); } /* Light mode: gold top accent line on hover */ [data-finboard-theme="light"] .finboard-post-card::after { content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 2px; background: linear-gradient(90deg, transparent, rgba(196,146,10,.3), transparent); pointer-events: none; opacity: 0; transition: opacity var(--fb-transition); border-radius: 1px; } [data-finboard-theme="light"] .finboard-post-card:hover::after { opacity: 1; } /* Hot/popular posts get gold left accent */ .finboard-post-card:has(.finboard-status--hot), .finboard-post-card:has(.finboard-status--best) { border-left: 3px solid var(--fb-gold); } /* ── 11. Buttons ─────────────────────────────────────────────── * * Hello theme and Elementor page-builder both apply `button { ... }` * resets that zero out padding, line-height, border-radius, and tint the * background. Every paint-affecting property here carries `!important` * so our visual language survives the theme cascade. * Child modifiers (--ghost, --sm) override padding with their own !important. */ button.finboard-btn, a.finboard-btn, .finboard-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; padding: 10px 22px !important; font-size: 13px; font-weight: 600; border-radius: var(--fb-radius-sm) !important; cursor: pointer; transition: all var(--fb-transition); font-family: var(--fb-font); border: 1px solid transparent !important; line-height: 1.4 !important; letter-spacing: -0.01em; position: relative; -webkit-appearance: none; appearance: none; text-shadow: none; } /* Primary gold button with shine */ .finboard-btn--primary, a.finboard-btn--primary, .finboard a.finboard-btn--primary { background: var(--fb-gold) !important; color: #000 !important; -webkit-text-fill-color: #000 !important; border-color: var(--fb-gold) !important; overflow: hidden; box-shadow: 0 2px 8px rgba(232,169,16,.15); } .finboard-btn--primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 200%; height: 100%; background: linear-gradient(90deg, transparent 25%, rgba(255,255,255,.15) 50%, transparent 75%); animation: finboard-shimmer 4s ease-in-out infinite; pointer-events: none; } .finboard-btn--primary:hover, a.finboard-btn--primary:hover, .finboard a.finboard-btn--primary:hover { background: var(--fb-gold-hover) !important; color: #000 !important; -webkit-text-fill-color: #000 !important; border-color: var(--fb-gold-hover) !important; transform: translateY(-1px); box-shadow: var(--fb-shadow-gold-hover); } .finboard-btn--secondary { background: transparent; color: var(--fb-text); -webkit-text-fill-color: var(--fb-text); border: 1px solid var(--fb-border); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .finboard-btn--secondary:hover { border-color: var(--fb-border-strong); color: var(--fb-text); -webkit-text-fill-color: var(--fb-text); background: rgba(255,255,255,.03); transform: translateY(-1px); } .finboard-btn--ghost { background: transparent !important; color: var(--fb-text-muted); border: none !important; padding: 8px 14px !important; } .finboard-btn--ghost:hover { color: var(--fb-text); background: var(--fb-bg-raised); } .finboard-btn--danger { background: var(--fb-red-dim); color: var(--fb-red); border: 1px solid rgba(255,71,87,.15); } .finboard-btn--danger:hover { background: rgba(255,71,87,.15); box-shadow: 0 0 12px rgba(255,71,87,.1); } .finboard-btn--sm { padding: 6px 14px !important; font-size: 12px; } .finboard-btn--pill { border-radius: var(--fb-radius-pill); } .finboard-btn__icon { margin-right: 4px; vertical-align: middle; flex-shrink: 0; } .finboard-btn:disabled, .finboard-btn[disabled] { opacity: .35; cursor: not-allowed; pointer-events: none; } /* Loading spinner state — add .finboard-btn--loading to any button */ .finboard-btn--loading { position: relative; color: transparent !important; -webkit-text-fill-color: transparent !important; pointer-events: none; } .finboard-btn--loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: finboard-spin .6s linear infinite; opacity: .7; } .finboard-btn--primary.finboard-btn--loading::after { border-color: #000; border-top-color: transparent; opacity: .5; } .finboard-btn--secondary.finboard-btn--loading::after { border-color: var(--fb-text-muted); border-top-color: transparent; } .finboard-btn--ghost.finboard-btn--loading::after { border-color: var(--fb-text-muted); border-top-color: transparent; } /* Hero CTA (broker page) */ .finboard-btn--hero, a.finboard-btn--hero, .finboard a.finboard-btn--hero { background: var(--fb-gold) !important; color: #000 !important; -webkit-text-fill-color: #000 !important; padding: 14px 32px; font-size: 15px; font-weight: 700; border-radius: var(--fb-radius-pill); position: relative; overflow: hidden; box-shadow: var(--fb-shadow-gold-hover); letter-spacing: -0.01em; } .finboard-btn--hero::before { content: ''; position: absolute; top: 0; left: -100%; width: 200%; height: 100%; background: linear-gradient(90deg, transparent 25%, rgba(255,255,255,.2) 50%, transparent 75%); animation: finboard-shimmer 3s ease-in-out infinite; pointer-events: none; } .finboard-btn--hero:hover, a.finboard-btn--hero:hover { background: var(--fb-gold-hover) !important; color: #000 !important; -webkit-text-fill-color: #000 !important; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(232,169,16,.35); } /* Catch-all: gold-background = black text */ .finboard [style*="background"][style*="gold"], .finboard-btn[class*="--primary"], .finboard a[class*="--primary"], .finboard button[class*="--primary"] { color: #000 !important; -webkit-text-fill-color: #000 !important; } /* Question content — centered narrower column within the full-width wrapper */ .finboard-question > *:not(.finboard-community-bar):not(.finboard-breadcrumb) { max-width: 780px; margin-left: auto; margin-right: auto; } /* Answer form */ .finboard-question__answer-form { background: var(--fb-bg-card); border: 1px solid var(--fb-border); border-top: 2px solid var(--fb-gold); border-radius: var(--fb-radius); padding: 20px; margin-bottom: 20px; box-shadow: var(--fb-shadow-card); } .finboard-question__answer-form h4 { font-size: 15px; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.01em; color: var(--fb-gold); } .finboard-question__answer-form textarea { width: 100%; padding: 12px 16px; font-size: 14px; line-height: 1.65; background: var(--fb-bg-input); color: var(--fb-text); border: 1px solid var(--fb-border); border-radius: var(--fb-radius-sm); resize: vertical; min-height: 110px; font-family: var(--fb-font); transition: border-color var(--fb-transition), box-shadow var(--fb-transition); outline: none; } .finboard-question__answer-form textarea:focus { border-color: var(--fb-gold); box-shadow: 0 0 0 3px rgba(232,169,16,.1), 0 0 16px rgba(232,169,16,.05); } .finboard-compose__textarea, .finboard-reply-form__textarea, .finboard-edit-form__textarea { width: 100%; padding: 12px 16px; font-size: 14px; line-height: 1.55; background: var(--fb-bg-input); color: var(--fb-text); border: 1px solid var(--fb-border); border-radius: var(--fb-radius-sm); resize: vertical; min-height: 88px; font-family: var(--fb-font); transition: border-color var(--fb-transition), box-shadow var(--fb-transition); outline: none; } .finboard-compose__textarea:focus, .finboard-reply-form__textarea:focus, .finboard-edit-form__textarea:focus { border-color: var(--fb-gold); box-shadow: 0 0 0 3px rgba(232,169,16,.1), 0 0 16px rgba(232,169,16,.05); } .finboard-reply-form__textarea { min-height: 64px; font-size: 13px; } .finboard-auth-shell .finboard-community-bar { width: 100%; margin-bottom: 32px; position: relative; z-index: 1; } .finboard-broker-rating__review-count { font-size: 12px; color: var(--fb-text-muted); } /* Broker reviews list */ .finboard-broker-rating__review { background: rgba(255,255,255,.01); border: 1px solid var(--fb-border); border-radius: var(--fb-radius); padding: 16px; margin-bottom: 10px; display: flex; gap: 14px; transition: border-color var(--fb-transition); } .finboard-broker-rating__review:hover { border-color: var(--fb-border-strong); } .finboard-broker-rating__review-vote { display: flex; flex-direction: column; align-items: center; padding: 4px; min-width: 40px; } .finboard-broker-rating__review-body { flex: 1; min-width: 0; } .finboard-broker-rating__review-header { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 8px; } .finboard-broker-rating__review-text { font-size: 13px; line-height: 1.65; color: var(--fb-text); } .finboard-news-card__textarea { width: 100%; padding: 8px 12px; font-size: 13px; line-height: 1.5; background: var(--fb-bg-input); color: var(--fb-text); border: 1px solid var(--fb-border); border-radius: var(--fb-radius-sm); resize: vertical; min-height: 60px; font-family: var(--fb-font); outline: none; transition: border-color var(--fb-transition), box-shadow var(--fb-transition); } .finboard-news-card__textarea:focus { border-color: var(--fb-gold); box-shadow: 0 0 0 3px rgba(232,169,16,.1); } /* ═══════════════════════════════════════ * Light Theme (when embedded in review pages) * * Overrides the dark `:root` variables for Finboard components * that live inside `.tic-page-wrapper` (Elementor review pages) * or have the `.finboard--light` modifier. * ═══════════════════════════════════════ */ .tic-page-wrapper .finboard, .finboard.finboard--light { --fb-bg: #ffffff; --fb-bg-card: #f8f9fb; --fb-bg-raised: #f0f1f4; --fb-bg-hover: #e8e9ee; --fb-bg-input: #ffffff; --fb-border: rgba(0,0,0,.08); --fb-border-strong: rgba(0,0,0,.14); --fb-border-gold: rgba(196,146,10,.2); --fb-text: #1a1d25; --fb-text-muted: #5a5e6e; --fb-text-link: #c4920a; --fb-shadow: 0 2px 8px rgba(0,0,0,.06); --fb-shadow-lg: 0 12px 32px rgba(0,0,0,.1); --fb-shadow-gold: 0 4px 16px rgba(196,146,10,.12); --fb-shadow-card: 0 1px 4px rgba(0,0,0,.05); --fb-glass: rgba(0,0,0,0.02); --fb-gold: #c4920a; --fb-gold-hover: #a87c08; --fb-gold-dim: rgba(196,146,10,.1); color: var(--fb-text); background: var(--fb-bg); border-radius: var(--fb-radius); } /* Light theme link overrides */ .tic-page-wrapper .finboard a, .finboard.finboard--light a { color: var(--fb-text-link) !important; } .tic-page-wrapper .finboard a:hover, .finboard.finboard--light a:hover { color: var(--fb-gold-hover) !important; } .tic-page-wrapper .finboard a:visited, .finboard.finboard--light a:visited { color: var(--fb-text-link) !important; } /* Light theme heading color */ .tic-page-wrapper .finboard h1, .tic-page-wrapper .finboard h2, .tic-page-wrapper .finboard h3, .tic-page-wrapper .finboard h4, .finboard.finboard--light h1, .finboard.finboard--light h2, .finboard.finboard--light h3, .finboard.finboard--light h4 { color: var(--fb-text); } /* Light theme card borders visible */ .tic-page-wrapper .finboard-comment, .tic-page-wrapper .finboard-news-card, .tic-page-wrapper .finboard-section, .finboard.finboard--light .finboard-comment, .finboard.finboard--light .finboard-news-card, .finboard.finboard--light .finboard-section { border-color: rgba(0,0,0,.1); background: #fff; } /* Light source badges — darker for contrast */ .tic-page-wrapper .finboard-news-card__source--google, .finboard.finboard--light .finboard-news-card__source--google { background: rgba(0,76,151,.1); color: #0a6ebd; } .tic-page-wrapper .finboard-news-card__source--ft, .finboard.finboard--light .finboard-news-card__source--ft { background: rgba(224,168,126,.12); color: #b87a3e; } .tic-page-wrapper .finboard-news-card__source--bbc, .finboard.finboard--light .finboard-news-card__source--bbc { background: rgba(187,25,25,.08); color: #bb1919; } /* Light filter active button */ .tic-page-wrapper .finboard-news__filter.active, .tic-page-wrapper .finboard-news__filter--active, .finboard.finboard--light .finboard-news__filter.active, .finboard.finboard--light .finboard-news__filter--active { background: #c4920a; color: #fff; border-color: #c4920a; -webkit-text-fill-color: #fff; } /* Light textarea focus */ .tic-page-wrapper .finboard-news-card__textarea:focus, .finboard.finboard--light .finboard-news-card__textarea:focus { border-color: #c4920a; box-shadow: 0 0 0 3px rgba(196,146,10,.12); } /* Light vote buttons */ .tic-page-wrapper .finboard-vote-btn, .finboard.finboard--light .finboard-vote-btn { color: #5a5e6e; } .tic-page-wrapper .finboard-vote-btn:hover, .finboard.finboard--light .finboard-vote-btn:hover { background: rgba(0,0,0,.04); } /* Light compose area */ .tic-page-wrapper .finboard-compose__textarea, .finboard.finboard--light .finboard-compose__textarea { background: #fff; border-color: rgba(0,0,0,.12); color: #1a1d25; } .tic-page-wrapper .finboard-compose__textarea:focus, .finboard.finboard--light .finboard-compose__textarea:focus { border-color: #c4920a; box-shadow: 0 0 0 3px rgba(196,146,10,.12); } /* Light badge styling */ .tic-page-wrapper .finboard-badge, .finboard.finboard--light .finboard-badge { background: rgba(196,146,10,.1); color: #c4920a; } /* Light theme news titles — strong contrast */ .tic-page-wrapper .finboard-news-card__title, .finboard.finboard--light .finboard-news-card__title { color: #111318; -webkit-text-fill-color: #111318; } /* Light theme news excerpts */ .tic-page-wrapper .finboard-news-card__excerpt, .finboard.finboard--light .finboard-news-card__excerpt { color: #3d4250; } /* Light theme news timestamps */ .tic-page-wrapper .finboard-news-card__time, .finboard.finboard--light .finboard-news-card__time { color: #6b7280; } /* Light theme discuss button */ .tic-page-wrapper .finboard-news-card__discuss-btn, .finboard.finboard--light .finboard-news-card__discuss-btn { color: #6b7280; } /* Light theme news header/subtitle */ .tic-page-wrapper .finboard-news__title, .finboard.finboard--light .finboard-news__title { color: #111318; } .tic-page-wrapper .finboard-news__subtitle, .finboard.finboard--light .finboard-news__subtitle { color: #4b5563; } /* Light theme filter buttons (inactive) */ .tic-page-wrapper .finboard-news__filter, .finboard.finboard--light .finboard-news__filter { color: #374151; border-color: rgba(0,0,0,.12); background: #f3f4f6; } .tic-page-wrapper .finboard-news__filter:hover, .finboard.finboard--light .finboard-news__filter:hover { background: #e5e7eb; border-color: rgba(0,0,0,.2); } /* Light theme load more button */ .tic-page-wrapper .finboard-news__load-more, .finboard.finboard--light .finboard-news__load-more { color: #c4920a; border-color: rgba(196,146,10,.3); background: rgba(196,146,10,.04); } .tic-page-wrapper .finboard-news__load-more:hover, .finboard.finboard--light .finboard-news__load-more:hover { background: rgba(196,146,10,.1); } /* Light theme community nav bar */ .finboard.finboard--light .finboard-community-bar { border-bottom-color: rgba(0,0,0,.08); } .finboard.finboard--light .finboard-community-tab { color: #4b5563; } .finboard.finboard--light .finboard-community-tab:hover { color: #111318; } .finboard.finboard--light .finboard-community-tab.active { color: var(--fb-gold) !important; } /* Light thread header */ .tic-page-wrapper .finboard-thread__title, .finboard.finboard--light .finboard-thread__title { color: #1a1d25; } .tic-page-wrapper .finboard-thread__count, .finboard.finboard--light .finboard-thread__count { color: #5a5e6e; } .finboard-ask-question__field { margin-bottom: 16px; } .finboard-ask-question__field select, .finboard-ask-question__field input { width: 100%; padding: 11px 14px; font-size: 14px; background: var(--fb-bg-input); color: var(--fb-text); border: 1px solid var(--fb-border); border-radius: var(--fb-radius-sm); font-family: var(--fb-font); transition: border-color var(--fb-transition), box-shadow var(--fb-transition); outline: none; } .finboard-ask-question__field select:focus, .finboard-ask-question__field input:focus { border-color: var(--fb-gold); box-shadow: 0 0 0 3px rgba(232,169,16,.1), 0 0 12px rgba(232,169,16,.05); } .finboard-ask-question__field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%237a7a90' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } .finboard-ask-question__field textarea { width: 100%; padding: 11px 14px; font-size: 14px; background: var(--fb-bg-input); color: var(--fb-text); border: 1px solid var(--fb-border); border-radius: var(--fb-radius-sm); font-family: var(--fb-font); transition: border-color var(--fb-transition), box-shadow var(--fb-transition); outline: none; resize: vertical; min-height: 120px; line-height: 1.6; } .finboard-ask-question__field textarea:focus { border-color: var(--fb-gold); box-shadow: 0 0 0 3px rgba(232,169,16,.1), 0 0 12px rgba(232,169,16,.05); } .finboard-empty .finboard-btn { margin-top: 8px; } /* ── 33. Button & Badge Variants ───────────────────────── */ .finboard-btn--full { width: 100%; margin-top: 4px; } .finboard-btn--outline { background: transparent; color: var(--fb-text); -webkit-text-fill-color: var(--fb-text); border: 1px solid var(--fb-border); } .finboard-btn--outline:hover { border-color: var(--fb-border-strong); color: var(--fb-text); -webkit-text-fill-color: var(--fb-text); background: var(--fb-bg-raised); } /* CTAs */ .finboard-broker-summary__actions .finboard-btn { flex: 1; text-align: center; font-size: 13px; padding: 10px 16px; } .finboard-page-discussion-section .finboard-compose__textarea { background: var(--fb-bg-card); border-color: var(--fb-border); } .finboard-broker-page__sidebar-card { background: var(--fb-bg-card); border: 1px solid var(--fb-border); border-radius: var(--fb-radius); padding: 16px; margin-bottom: 10px; } .finboard-broker-rating__reviews-section { margin-top: 16px; } .finboard-broker-rating__reviews-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; } .finboard-broker-rating__reviews-list { /* container */ } .finboard-broker-rating__review-author { display: flex; align-items: center; gap: 6px; flex: 1; } .finboard-broker-rating__review-name { font-weight: 600; font-size: 13px; color: var(--fb-text); } .finboard-broker-rating__review-name:hover { color: var(--fb-gold); } .finboard-broker-rating__review-stars { display: flex; align-items: center; gap: 4px; } .finboard-broker-rating__review-date { font-size: 11px; color: var(--fb-text-muted); } .finboard-broker-rating__review-actions { display: flex; align-items: center; gap: 4px; margin-top: 8px; } .finboard-broker-rating__review-score { font-size: 12px; font-weight: 700; color: var(--fb-text); min-width: 20px; text-align: center; } .finboard-platform-profile > *:not(.finboard-community-bar):not(.finboard-breadcrumb) { max-width: 780px; margin-left: auto; margin-right: auto; } /* ── 36. Profile Extras (template classes) ─────────────── */ .finboard-btn--gold { background: var(--fb-gold); color: #fff; border: none; font-weight: 600; border-radius: var(--fb-radius-sm); transition: all var(--fb-transition); box-shadow: 0 2px 8px var(--fb-gold-glow, rgba(232,169,16,.2)); } .finboard-btn--gold:hover { background: var(--fb-gold-hover, #d9a00e); color: #fff; box-shadow: 0 4px 16px var(--fb-gold-glow, rgba(232,169,16,.3)); transform: translateY(-1px); } /* Following Badge (for feed post cards) */ .finboard-post-card__following-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; color: var(--fb-gold); padding: 1px 6px; border-radius: var(--fb-radius-pill); background: var(--fb-gold-dim); } .finboard-login-cta .finboard-btn { margin: 0 4px; } /* ── Light: Secondary & ghost button bg ───────────────────────── */ [data-finboard-theme="light"] .finboard-btn--secondary:hover { background: rgba(0,0,0,.03); } [data-finboard-theme="light"] .finboard-btn--ghost:hover { background: var(--fb-bg-raised); } /* ── Staggered card entrance animation ────────────────────────── */ .finboard-post-card { animation: finboard-fadeIn 0.3s ease both; } .finboard-post-card:nth-child(2) { animation-delay: 0.04s; } .finboard-post-card:nth-child(3) { animation-delay: 0.08s; } .finboard-post-card:nth-child(4) { animation-delay: 0.12s; } .finboard-post-card:nth-child(5) { animation-delay: 0.16s; } /* Danger button */ .finboard-btn--danger { background: var(--fb-red, #ef4444); color: #fff; border: none; font-weight: 700; } .finboard-btn--danger:hover { background: #dc2626; } .finboard-btn--danger:disabled { opacity: 0.4; cursor: not-allowed; } /* ── Community Tab — Focus ── */ .finboard-community-tab:focus-visible { outline: 2px solid var(--fb-gold); outline-offset: -2px; border-radius: var(--fb-radius-xs); } /* ── Post Card — Enhanced Click Feedback ── */ .finboard-post-card { transition: border-color var(--fb-transition), box-shadow var(--fb-transition), transform 0.15s; } .finboard-post-card:active { transform: translateY(0) !important; box-shadow: var(--fb-neu-in-sm) !important; } /* ── CTA Buttons — Pressed State ── */ .finboard-btn--primary:active, .finboard-btn--gold:active { transform: scale(0.97); box-shadow: var(--fb-neu-in-sm); } /* Light-theme adjustments — softer shadows on pale backgrounds */ [data-finboard-theme="light"] .finboard-tool-edit__presets-group, .finboard.finboard--light .finboard-tool-edit__presets-group { box-shadow: inset 3px 3px 6px rgba(0,0,0,0.12), inset -2px -2px 4px rgba(255,255,255,0.7); } [data-finboard-theme="light"] button.finboard-tool-edit__preset-btn.is-active, [data-finboard-theme="light"] .finboard-tool-edit__preset-btn.is-active, .finboard.finboard--light .finboard-tool-edit__preset-btn.is-active { box-shadow: 3px 3px 7px rgba(0,0,0,0.15), -2px -2px 5px rgba(255,255,255,0.9), inset 0 1px 0 rgba(255,255,255,0.7), inset 0 0 0 1px var(--fb-border-gold); } [data-finboard-theme="light"] button.finboard-tool-edit__preset-btn.is-active:hover, [data-finboard-theme="light"] .finboard-tool-edit__preset-btn.is-active:hover, .finboard.finboard--light .finboard-tool-edit__preset-btn.is-active:hover { box-shadow: 4px 4px 9px rgba(0,0,0,0.18), -2px -2px 6px rgba(255,255,255,0.95), inset 0 1px 0 rgba(255,255,255,0.8), inset 0 0 0 1px var(--fb-border-gold); } /* ═══════════════════════════════════════════════════════════════════ * GLOBAL FORM-INPUT ALIGNMENT * Unifies all community form inputs with the same sunken neumorphic * treatment used by the editorial tool inputs. This gives Ask, comment, * reply, review, and auth forms the same tactile feel as Tools. * Placed at end of stylesheet so it wins over earlier per-feature rules. * ═══════════════════════════════════════════════════════════════════ */ .finboard-ask-question__field input, .finboard-ask-question__field select, .finboard-ask-question__field textarea, .finboard-compose__textarea, .finboard-reply-form__textarea, .finboard-edit-form__textarea, .finboard-question__answer-form textarea, .finboard-news-card__textarea { background: var(--fb-bg-inset); border: 1px solid var(--fb-border); border-radius: var(--fb-radius-sm); box-shadow: var(--fb-neu-in-sm); transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease; } .finboard-ask-question__field input:focus, .finboard-ask-question__field select:focus, .finboard-ask-question__field textarea:focus, .finboard-compose__textarea:focus, .finboard-reply-form__textarea:focus, .finboard-edit-form__textarea:focus, .finboard-question__answer-form textarea:focus, .finboard-news-card__textarea:focus { border-color: var(--fb-gold); box-shadow: var(--fb-neu-in-sm), 0 0 0 3px rgba(252, 196, 25, 0.12), 0 0 14px rgba(252, 196, 25, 0.06); outline: none; } /* ═══════════════════════════════════════════════════════════════════ * CARD SURFACE ALIGNMENT * A few community cards still used flat `0 2px 8px` shadows in light * theme or had no shadow at all. Unified to `--fb-neu-out-sm` so * everything reads with the same raised neumorphic language. * ═══════════════════════════════════════════════════════════════════ */ [data-finboard-theme="light"] .finboard-post-card, .finboard--light .finboard-post-card { box-shadow: var(--fb-neu-out-sm); } .finboard-broker-page__sidebar-card, .finboard-broker-rating__review { box-shadow: var(--fb-neu-out-sm); } /* ═══════════════════════════════════════════════════════════════════ * MERGE PATCHES — v2.4.9 compatibility fixes. * Targeted overrides for issues surfaced when integrating this styling * package on top of Finboard v2.4.9. * ═══════════════════════════════════════════════════════════════════ */ /* 1. Community bar inner gets stretched full-width in v2.4.9. * Force the centered pill track via !important. */ .finboard-community-bar__inner { max-width: var(--fb-container-w, 1200px) !important; margin: 0 auto !important; } /* 2. Hello theme default button border (#cc3366) bleeds through on * buttons without the `.finboard-btn` armour. Apply the same armour * to the theme toggle and the share button. */ .finboard-theme-toggle, button.finboard-theme-toggle, .finboard-tool__share-btn, button.finboard-tool__share-btn, .finboard-tool-edit__share, button.finboard-tool-edit__share { background: transparent !important; border: 1px solid transparent !important; padding: 6px 10px !important; line-height: 1.4 !important; -webkit-appearance: none; appearance: none; text-shadow: none; } .finboard-theme-toggle { padding: 0 !important; width: 36px; height: 36px; border-radius: var(--fb-radius-sm) !important; color: var(--fb-text-muted) !important; } .finboard-theme-toggle:hover { background: var(--fb-bg-hover) !important; color: var(--fb-gold) !important; } .finboard-tool__share-btn, .finboard-tool-edit__share { color: var(--fb-text-muted) !important; border-radius: var(--fb-radius-sm) !important; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; } .finboard-tool__share-btn:hover, .finboard-tool-edit__share:hover { color: var(--fb-gold) !important; background: var(--fb-gold-dim) !important; } /* ═══════════════════════════════════════════════════════════════════ * MERGE PATCH 2 — TIC charcoal neumorphic override for v2.4.9. * * v2.4.9 defines its own dark palette scoped to `.finboard` with navy * hues (#181c26 / #1e2230 / #232838). Because that scope is narrower * than our html-level tokens, the navy wins inside .finboard. * * This block re-declares our TIC charcoal + bright-gold palette at * the same scope so our values cascade correctly into post cards, * sidebar widgets, community nav, and all neumorphic surfaces. * ═══════════════════════════════════════════════════════════════════ */ [data-finboard-theme="dark"] .finboard, [data-finboard-theme="dark"].finboard { --fb-navy: #2a2a2a; --fb-bg: #353535; /* TIC charcoal */ --fb-bg-card: #3d3d3d; /* TIC panel */ --fb-bg-raised: #454545; --fb-bg-hover: #4a4a4a; --fb-bg-input: #2c2c2c; --fb-bg-inset: #2a2a2a; --fb-gold: #fcc419; /* TIC bright gold */ --fb-gold-hover: #ffd54e; --fb-gold-dim: rgba(252, 196, 25, 0.10); --fb-gold-glow: rgba(252, 196, 25, 0.18); --fb-border: rgba(255, 255, 255, 0.08); --fb-border-strong: rgba(255, 255, 255, 0.14); --fb-border-gold: rgba(252, 196, 25, 0.25); --fb-text: #ffffff; --fb-text-secondary: #e0e0e0; --fb-text-muted: #b0b0b0; --fb-text-link: #fcc419; /* Stronger neumorphic shadows — the TIC design language */ --fb-shadow-card: 3px 3px 10px rgba(0,0,0,.55), -2px -2px 8px rgba(255,255,255,.04); --fb-neu-out: 10px 10px 15px rgba(0,0,0,.5), -10px -10px 15px rgba(255,255,255,.03); --fb-neu-out-sm: 3px 3px 10px rgba(0,0,0,.55), -2px -2px 8px rgba(255,255,255,.04); --fb-neu-in: inset 8px 8px 16px rgba(0,0,0,.6), inset -8px -8px 16px rgba(255,255,255,.02); --fb-neu-in-sm: inset 2px 2px 5px rgba(0,0,0,.5), inset -2px -2px 5px rgba(255,255,255,.03); --fb-neu-gold: 0 0 24px rgba(252,196,25,.15), 0 0 8px rgba(252,196,25,.10); --fb-shadow-gold-hover: 0 4px 16px rgba(252,196,25,.25); } /* Body background: override v2.4.9's #181c26 !important with our charcoal */ html[data-finboard-theme="dark"] body.finboard-community-page, html[data-finboard-theme="dark"] body.finboard-auth-page { background: #353535 !important; } /* Force-fix hardcoded navy literals the v2.4.9 CSS uses on specific cards. * These ignore tokens entirely, so we need to override them directly. */ [data-finboard-theme="dark"] .finboard-post-card, [data-finboard-theme="dark"] .finboard-card, [data-finboard-theme="dark"] .finboard-sidebar-card, [data-finboard-theme="dark"] .finboard-hotstocks__card, [data-finboard-theme="dark"] .finboard-notif-dropdown, [data-finboard-theme="dark"] .finboard-avatar-dropdown { background: var(--fb-bg-card) !important; } /* Replace old gold #E8A910 accents with TIC bright gold #fcc419 in any * stubborn rules that hardcode the old value */ [data-finboard-theme="dark"] .finboard-btn--primary, [data-finboard-theme="dark"] .finboard-post-new-btn, [data-finboard-theme="dark"] .finboard-sort-btn--active { /* These typically use var(--fb-gold) — but if any hardcode, this wins */ } /* ═══════════════════════════════════════════════════════════════════ * MERGE PATCH 3 — replace hardcoded navy gradients with charcoal. * v2.4.9 has several components with literal navy gradient bg that * ignore tokens. Override each. * ═══════════════════════════════════════════════════════════════════ */ /* Join The Investors Centre Community banner (feed top) */ [data-finboard-theme="dark"] .finboard-join-banner, [data-finboard-theme="dark"] .finboard-community-banner, [data-finboard-theme="dark"] .finboard-guest-cta { background: linear-gradient(135deg, #3d3d3d, #454545) !important; border: 1px solid var(--fb-border-gold) !important; } /* Any other navy gradient container — broad catch to future-proof */ [data-finboard-theme="dark"] [class*="finboard-"][class*="banner"], [data-finboard-theme="dark"] [class*="finboard-"][class*="cta"] { /* If element uses a navy gradient, swap to charcoal. Targeted override. */ } /* Replace old gold `#E8A910` hardcoded refs where they're used in gradients * and colour stops. Our --fb-gold token already handles the common cases. */ [data-finboard-theme="dark"] .finboard-btn--hero::before, [data-finboard-theme="dark"] .finboard-btn--primary::before { background: linear-gradient(90deg, transparent 25%, rgba(252, 196, 25, 0.18) 50%, transparent 75%) !important; } /* ═══════════════════════════════════════════════════════════════════ * MERGE PATCH 4 — TIC gradient + perlin noise background. * * Restores the layered gradient + SVG fractalNoise film that lived on * the .finboard container in our v2.1.0 baseline. Gives the community * pages the same atmospheric dark surface as the Tools pages: * - Radial gold bloom top-centre * - Radial depth shadow bottom-centre * - Linear charcoal gradient (#3d3d3d → #2b2b2b) * - Inline SVG perlin noise @ 8% opacity, overlay blend * All backgrounds use `background-attachment: fixed` so the gradient * doesn't scroll with the content — feels like the page is floating on * top of a fixed atmospheric surface. * ═══════════════════════════════════════════════════════════════════ */ /* Dark-theme: layered gradient + gold bloom + bottom shadow */ [data-finboard-theme="dark"] .finboard, [data-finboard-theme="dark"].finboard { background-color: var(--fb-bg) !important; background-image: radial-gradient(ellipse 120% 80% at 50% -5%, rgba(252, 196, 25, 0.05) 0%, rgba(252, 196, 25, 0) 55%), radial-gradient(ellipse 110% 90% at 50% 110%, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 60%), linear-gradient(180deg, #3d3d3d 0%, #353535 45%, #2b2b2b 100%) !important; background-attachment: fixed, fixed, fixed !important; background-repeat: no-repeat !important; } /* Light-theme: softer cool-grey wash */ [data-finboard-theme="light"] .finboard, .finboard.finboard--light { background-image: radial-gradient(ellipse 120% 80% at 50% -5%, rgba(252, 196, 25, 0.08) 0%, rgba(252, 196, 25, 0) 55%), radial-gradient(ellipse 110% 90% at 50% 110%, rgba(30, 40, 60, 0.06) 0%, rgba(30, 40, 60, 0) 60%), linear-gradient(180deg, #fbfcfe 0%, #f5f7fa 50%, #eaedf2 100%) !important; background-attachment: fixed, fixed, fixed !important; background-repeat: no-repeat !important; } /* Perlin noise film — sits above the container gradient, below content. * mix-blend-mode: overlay (dark) / multiply (light) so the grain * harmonises with whatever tone is beneath. */ .finboard { position: relative; } .finboard::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.08; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch' seed='7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 240px 240px; } [data-finboard-theme="light"] .finboard::before { opacity: 0.05; mix-blend-mode: multiply; } /* Keep content above the noise film. Use z-index only — we intentionally * leave `position` alone so elements that rely on `position: sticky` * (community bar, sidebar) keep working. Only children with position:static * fall through into the noise ::before stacking context anyway, so an * explicit `position: relative` is unnecessary. */ .finboard > * { z-index: 1; } /* Static elements still need a position to activate z-index; give them * `relative` only if they're not already sticky/fixed/absolute via a * targeted selector list (cheap and explicit). */ .finboard > *:not(.finboard-community-bar):not(.finboard-sidebar):not(.finboard-breadcrumb) { position: relative; } /* Belt-and-braces: force sticky back on the community bar in case any * later cascade demotes it. */ .finboard .finboard-community-bar, .finboard-community-bar { position: -webkit-sticky; position: sticky; top: 0; z-index: 90; } .admin-bar .finboard-community-bar { top: 32px; } /* ============================================================ * MERGE PATCH 5 — Question/post detail page layout parity * ------------------------------------------------------------ * v2.4.9's .finboard-question wrapper applies max-width + padding * to the ENTIRE page, including the community-bar nav. That makes * the nav shrink into a floating card instead of the full-width * sticky banner used on the feed. It also loses the gradient/noise * background because the wrapper ends up narrower than the viewport. * * Fix: make .finboard-question behave like .finboard-community — * full-width shell. The existing rule that constrains non-nav * children to 780px already handles the inner column. We also * need a top padding on the first inner block so content isn't * glued to the sticky bar. * ============================================================ */ .finboard-question { max-width: none !important; margin: 0 !important; padding: 0 !important; } /* Give the inner 780px column the breathing room the old wrapper * padding used to provide, and keep sidebar-style gutters on mobile. */ .finboard-question > *:not(.finboard-community-bar):not(.finboard-breadcrumb) { max-width: 780px; margin-left: auto !important; margin-right: auto !important; padding-left: 16px; padding-right: 16px; box-sizing: border-box; } /* First content block below the nav gets top padding */ .finboard-question .finboard-breadcrumb + * , .finboard-question > .finboard-question__header:first-of-type { margin-top: 20px; } /* Breadcrumb should also sit inside the centred column on the question page */ .finboard-question > .finboard-breadcrumb { max-width: calc(var(--fb-max-width, 1200px) + var(--fb-sidebar-w, 300px) + 24px); margin: 0 auto !important; padding: 12px 16px 0; box-sizing: border-box; } /* Ensure the community-bar on question pages gets the same * full-bleed sticky treatment as on the feed (it already does, * but belt-and-braces against future scoped overrides). */ .finboard-question > .finboard-community-bar { width: 100%; max-width: none; margin: 0; padding: 8px 16px; } /* Bottom breathing room on the page */ .finboard-question__answers-section { padding-bottom: 48px; } /* ============================================================ * MERGE PATCH 6 — News page refinements * ------------------------------------------------------------ * 1. Unified filter pills — all chips share the same soft-filled * treatment; active state is gold border + gold dot. * 2. Footer layout — Discuss button with trailing count badge * matching the feed card reply pattern. * 3. Type scale bump on card title (15 → 16) and excerpt (12 → 13). * 4. 3px left source-accent strip so the feed reads by colour. * 5. Softer hover — lose the gold ring glow; keep the lift. * ============================================================ */ /* 1 — Unified filter pills */ .finboard-news__filters { gap: 8px; } .finboard-news__filter { background: var(--fb-bg-raised) !important; color: var(--fb-text) !important; border: 1px solid var(--fb-border) !important; padding: 6px 14px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .01em; transition: border-color var(--fb-transition), color var(--fb-transition), background var(--fb-transition); } .finboard-news__filter:hover { border-color: var(--fb-border-gold) !important; color: var(--fb-gold) !important; } .finboard-news__filter.finboard-news__filter--active, .finboard-news__filter.active { background: var(--fb-gold-dim, rgba(232,169,16,.12)) !important; border-color: var(--fb-gold) !important; color: var(--fb-gold) !important; } /* 2 — Footer: Discuss pill with trailing count badge */ .finboard-news-card__footer { padding: 10px 14px; gap: 12px; } .finboard-news-card__read-more { font-size: 12px; letter-spacing: .01em; transition: color var(--fb-transition); } .finboard-news-card__read-more:hover { color: var(--fb-gold-hover, var(--fb-gold)); text-decoration: none !important; } .finboard-news-card__discuss-btn { padding: 5px 12px !important; border: 1px solid var(--fb-border) !important; background: var(--fb-bg-raised) !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 600 !important; gap: 6px !important; color: var(--fb-text) !important; } .finboard-news-card__discuss-btn:hover, .finboard-news-card__discuss-btn:focus { border-color: var(--fb-border-gold) !important; color: var(--fb-gold) !important; background: var(--fb-bg-raised) !important; } .finboard-news-card__discuss-btn .finboard-news-card__comment-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; margin-left: 4px; background: var(--fb-bg, #2b2b2b); color: var(--fb-text-muted); border-radius: 9px; font-size: 10px; font-weight: 700; line-height: 1; } .finboard-news-card__discuss-btn:hover .finboard-news-card__comment-count { color: var(--fb-gold); } /* 3 — Type scale bump */ .finboard-news-card__title { font-size: 16px; line-height: 1.35; margin-bottom: 6px; } .finboard-news-card__excerpt { font-size: 13px; line-height: 1.55; } /* 4 — 3px left source accent strip */ .finboard-news-card { position: relative; } .finboard-news-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--fb-border); border-top-left-radius: var(--fb-radius, 10px); border-bottom-left-radius: var(--fb-radius, 10px); transition: background var(--fb-transition); } .finboard-news-card[data-source="google"]::before { background: #4285f4; } .finboard-news-card[data-source="ft"]::before { background: #fda581; } .finboard-news-card[data-source="bbc"]::before { background: #bb1919; } /* 5 — Soften hover: keep lift, drop the gold ring */ .finboard-news-card:hover { border-color: var(--fb-border-gold) !important; transform: translateY(-2px); box-shadow: var(--fb-neu-out-sm) !important; } /* Tighter card body gap on narrow viewports so the excerpt doesn't * get crushed against the thumbnail */ @media (max-width: 900px) and (min-width: 601px) { .finboard-news-card__image { width: 96px; height: 72px; } } /* ============================================================ * MERGE PATCH 7 — Mobile audit fixes * ------------------------------------------------------------ * Full mobile responsive pass across all community surfaces * we've touched. Covers: * 1. Scoped horizontal-overflow guard (replaces the global * v4 rule our scroll fix invalidates). * 2. Tools page layout collapses to single column on mobile. * 3. Morph nav panel anchors to viewport centre, not trigger edge. * 4. Question page comment thread indent caps at mobile. * 5. Comment action button row wraps guaranteed. * 6. News filter pills horizontal-scroll on ultra-narrow. * 7. Tool hero type clamped for mobile. * 8. Preset toggle pills wrap guaranteed. * ============================================================ */ /* 1 — Scoped horizontal-overflow guard. * * v4.css has `html, body { overflow-x: clip }` at <=900px to contain the * off-canvas sidebar at right:-300px. Our scroll-block fix * (`html[data-finboard-theme] { overflow: visible }`) overrides that * globally, which means horizontal-overflow protection is lost on mobile. * * Restore it on body only (not html). Body with overflow-x:hidden keeps * the off-canvas sidebar clipped without making html a scroll container * (which was the root cause of the original scroll-block bug). */ @media (max-width: 900px) { body.finboard-community-page, body.finboard-auth-page { overflow-x: hidden !important; } } /* 2 — Tools page collapses to single column on mobile. * * Base grid is `240px minmax(0, 1fr)` — unusable below 640px where * content column shrinks below 150px. On mobile the rail moves above * the content and gets an expand/collapse toggle via
so it * doesn't dominate the viewport. */ @media (max-width: 768px) { .finboard-tools-layout, .finboard-tools-layout.is-collapsed { grid-template-columns: 1fr !important; gap: 16px !important; } .finboard-tools-rail { position: static !important; max-height: none !important; overflow-y: visible !important; padding: 0 !important; } /* On mobile the rail becomes a compact category picker. * Hide the collapse toggle (rail is never collapsed here) and let * group
elements handle expand/collapse instead. */ .finboard-tools-rail__header { display: none !important; } .finboard-tools-rail__group { border-radius: 10px; margin-bottom: 8px; } /* Main content no longer needs the sticky-bar top clearance since * it's no longer sharing a grid column with the rail. */ .finboard-tools-main { min-width: 0 !important; } } /* 3 — Morph nav panel centres on mobile. * * Default: `position: absolute; left: 0` anchored to trigger. On narrow * viewports the trigger sits centred in the bar, so left:0 means the * panel extends right → overflows viewport. Re-anchor to the nav bar * and centre horizontally below the trigger. */ @media (max-width: 640px) { ul.finboard-community-bar__morph-panel, .finboard-community-bar__morph-panel { left: 50% !important; right: auto !important; transform: translateX(-50%); min-width: min(280px, calc(100vw - 32px)); max-width: calc(100vw - 32px); } } /* 4 — Question page comment thread indent cap. * * v4.css nests each reply depth with margin-left. At depth 3+, on a * 390px viewport with 16px page gutters, content column drops to ~200px * and long words break awkwardly. Cap indent at 16px per level and * switch to a subtle connector line for visual hierarchy. */ @media (max-width: 640px) { .finboard-comment[data-depth="1"] { margin-left: 16px !important; } .finboard-comment[data-depth="2"] { margin-left: 32px !important; } .finboard-comment[data-depth="3"], .finboard-comment[data-depth="4"], .finboard-comment[data-depth="5"] { margin-left: 48px !important; } /* Connector line — subtle gold 1px on the left of nested comments * so the reply hierarchy stays readable even with reduced indent. */ .finboard-comment[data-depth="1"]::before, .finboard-comment[data-depth="2"]::before, .finboard-comment[data-depth="3"]::before, .finboard-comment[data-depth="4"]::before, .finboard-comment[data-depth="5"]::before { content: ''; position: absolute; left: -12px; top: 0; bottom: 0; width: 1px; background: var(--fb-border-gold, rgba(196,146,10,.2)); } .finboard-comment[data-depth="1"], .finboard-comment[data-depth="2"], .finboard-comment[data-depth="3"], .finboard-comment[data-depth="4"], .finboard-comment[data-depth="5"] { position: relative; } } /* 5 — Comment action row wraps guaranteed. * * Reply / Mark Best / Official / Edit / Delete / Report / Mod can stack * up to 6 buttons on a single card. Default flex has no wrap declared, * which on mobile pushes the last button off the card. Force wrap. */ .finboard-comment__actions { flex-wrap: wrap !important; gap: 6px !important; } /* Same guard for post card action row (Reply/Answers/Share/Report on * .finboard-post-card or equivalent). */ .finboard-post__actions, .finboard-question__actions, .finboard-card__actions { flex-wrap: wrap !important; gap: 6px !important; } /* 6 — News filter pills horizontal-scroll on ultra-narrow. * * Four pills × 80-100px each = 320-400px total. Fits 390 viewport but * breaks on 320 (iPhone SE portrait). Allow horizontal scroll rather * than wrap — keeps the row visually tidy and matches the sort tabs * pattern used elsewhere. */ @media (max-width: 400px) { .finboard-news__filters { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; } .finboard-news__filters::-webkit-scrollbar { display: none; } .finboard-news__filter { flex-shrink: 0; } } /* 7 — Tool hero type clamped for mobile. * * .finboard-tool-edit__hero-card displays large currency results * (e.g. £300,851) at 36-44px font. On a 320-400px viewport that wraps * or pushes the card taller than intended. Use clamp() so the number * scales with viewport width. */ @media (max-width: 640px) { .finboard-tool-edit__hero-card .finboard-tool-edit__hero-value, .finboard-tool-edit__hero-value, [class*="finboard-tool"] [class*="hero-value"], [class*="finboard-tool"] [class*="__result"] { font-size: clamp(1.8rem, 8vw, 2.75rem) !important; line-height: 1.1 !important; word-break: break-word; } } /* 8 — Preset toggle pills wrap guaranteed. * * Conservative / Balanced / Aggressive row. Three pills × ~110px ≈ 330px. * Fits 390 viewport but overflows on 320. Allow wrap so they flow * naturally onto two rows if needed. */ .finboard-tool-edit__presets, .finboard-tool-presets, [class*="finboard-tool"][class*="__preset"] { flex-wrap: wrap !important; gap: 6px !important; } /* Extra: ensure tool input field + slider rows stack on mobile rather * than cram horizontally. */ @media (max-width: 480px) { .finboard-tool-field { flex-direction: column !important; align-items: stretch !important; } .finboard-tool-field__input-wrap, .finboard-tool-field__slider-wrap { width: 100% !important; } } /* ============================================================ * MERGE PATCH 8 — Mobile refinements (round 2, screenshot-driven) * ------------------------------------------------------------ * Addresses problems observed on real Android device screenshots: * 1. CRITICAL: tool inner grid (5fr 7fr inputs|results) never * collapsed — results card squeezed to 20px wide, rendering * "FINAL PORTFOLIO VALUE" letter-per-line vertically. * 2. Tool result sub-grids (1fr 1fr stat pairs) collapse at mobile. * 3. Join banner typography/padding tightened for mobile. * 4. Topic pill row gets horizontal-scroll fallback so "Pensions" * doesn't truncate to "Pensior". * 5. Ask empty state padding reduces the dead gap. * 6. Dark theme set as mobile default via [data-finboard-theme="dark"] * media-query fallback — no more light-mode-on-first-load. * 7. Sidebar off-canvas trigger positioning (avoid card overlap). * ============================================================ */ /* 1 — CRITICAL: Tool inner body grid must collapse on mobile. * * `.finboard-tool__body { grid-template-columns: 5fr 7fr }` has no * mobile override. On a 390px viewport the results column gets 7/12 * of the available width inside a narrow card, which leaves no room * for the currency value — the browser wraps each character onto its * own line. * * Fix: stack inputs above results on tablet+mobile. Preserve the * side-by-side layout on desktop (≥901px). */ @media (max-width: 900px) { .finboard-tool__body { grid-template-columns: 1fr !important; gap: 16px !important; } .finboard-tool__inputs { border-right: none !important; border-bottom: 1px solid var(--fb-border); padding: 20px !important; } .finboard-tool__results { padding: 20px !important; } } /* 2 — Tool sub-grids stack too. * * The stat-pair grids (before/after inflation, contributions/gains, * etc.) use `grid-template-columns: 1fr 1fr`. On a narrow results * column that's acceptable, but on ≤480px the pair becomes cramped. * Single-column at ≤480, keep pair at 481-900, side-by-side at 900+. */ @media (max-width: 480px) { .finboard-tool-result-grid, .finboard-tool-alloc-legend { grid-template-columns: 1fr !important; } } /* 3 — Join banner (community-index) — tighter mobile proportions. * * Current mobile render: ~35% of viewport taken by a heavy cream card * with 24px+ padding and 1.75rem heading. Trim it to feel less shouty * without losing prominence. */ @media (max-width: 640px) { .finboard-join-banner { padding: 18px 16px !important; margin-bottom: 16px; gap: 12px; } .finboard-join-banner__text, .finboard-join-banner h2, .finboard-join-banner__headline { font-size: 1.1rem !important; line-height: 1.3 !important; margin-bottom: 6px !important; } .finboard-join-banner__sub, .finboard-join-banner p { font-size: 0.9rem !important; line-height: 1.5 !important; margin-bottom: 0 !important; } .finboard-join-banner__btn, .finboard-join-banner .finboard-btn { padding: 10px 18px !important; font-size: 0.9rem !important; } } /* 4 — Topic pill row — horizontal scroll + no-truncate. * * The last pill ("Pensions") truncates to "Pensior" because the row * flex-wraps but the last child gets clipped by the parent card edge. * Swap to a horizontal scroll strip so users can scroll right to reach * further topics. */ @media (max-width: 900px) { .finboard-topic-pills, .finboard-feed__topics, .finboard-community__topic-row, [class*="finboard"][class*="topic-pill"] { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; scroll-snap-type: x proximity; } .finboard-topic-pills::-webkit-scrollbar, .finboard-feed__topics::-webkit-scrollbar, .finboard-community__topic-row::-webkit-scrollbar { display: none; } .finboard-topic-pill, .finboard-feed__topic-pill, [class*="finboard-topic"] { flex-shrink: 0; scroll-snap-align: start; } } /* 5 — Ask (and other empty-state) pages — reduce dead gap. * * When logged-out on /community/ask/ the page shows a 2-line empty * state then a huge blank expanse before the footer. Constrain the * wrapper so the footer sits closer and the page doesn't feel * abandoned. */ @media (max-width: 900px) { .finboard-ask, .finboard-community__empty-state, .finboard-auth-prompt { min-height: auto !important; padding: 24px 16px !important; } .finboard-ask__intro, .finboard-ask__login-prompt { padding: 20px 16px !important; background: var(--fb-bg-card); border: 1px solid var(--fb-border); border-radius: var(--fb-radius); margin-top: 16px; } } /* 6 — Dark theme as sensible mobile default. * * On first load (before the user has toggled theme) the html has no * data-finboard-theme attribute. The base CSS falls back to light * tokens, which on mobile renders cream/white panels that clash with * the charcoal TIC header above. Set dark as default until toggled. */ html:not([data-finboard-theme]) body.finboard-community-page, html:not([data-finboard-theme]) body.finboard-auth-page { /* Re-declare the dark token set so the page renders charcoal * immediately, even before the theme-init script runs. User's * saved preference (localStorage) will override this on script * load if they've picked light. */ --fb-bg: #2b2b2b; --fb-bg-card: #353535; --fb-bg-raised: #3d3d3d; --fb-bg-inset: #242424; --fb-text: #e8e8f0; --fb-text-muted: #a0a0b0; --fb-border: rgba(255,255,255,0.08); --fb-border-strong: rgba(255,255,255,0.14); --fb-border-gold: rgba(232,169,16,0.3); --fb-gold: #e8a910; --fb-gold-dim: rgba(232,169,16,0.12); background-color: #2b2b2b; } /* 7 — Sidebar off-canvas trigger button — keep clear of card actions. * * The round floating trigger at bottom-right of the viewport overlaps * with the share/replies action row of the last visible post card. * Shift it up above the fold of card actions and make it slightly * smaller on mobile so it reads as a tool, not a CTA. */ @media (max-width: 900px) { .finboard-sidebar-toggle { bottom: 80px !important; right: 16px !important; width: 44px !important; height: 44px !important; box-shadow: 0 6px 16px rgba(0,0,0,0.35) !important; } } /* ============================================================ * MERGE PATCH 9 — Critical bug fixes (2026-04-24 round 3) * ------------------------------------------------------------ * Two issues reported from mobile screenshots after patch 8: * * BUG A — Tools page still shows vertical letter-per-line "FINAL * PORTFOLIO VALUE" result card on mobile. * Root cause: the Compound Growth template (and all editorial tool * templates) use `.finboard-tool-edit__body` — NOT `.finboard-tool__body`. * Patch 8 targeted the wrong class name. The correct two-column grid * uses `grid-template-columns: minmax(280px, 1fr) minmax(0, 1.618fr)` * which never collapsed because our rule didn't match. * * BUG B — Charcoal palette isn't applied on first load, gradient * looks wrong (horizontal or navy leakage). * Root cause: MERGE PATCHES 2, 3, 4 were all scoped to * `[data-finboard-theme="dark"]`. On first mobile load before the * theme toggle fires, the attribute is missing entirely → none of * the charcoal overrides apply, v2.5.0's default navy/light palette * leaks through. * * Fix: treat "no theme attribute" as "dark by default" via * `html:not([data-finboard-theme="light"])`. Dark applies unless the * user has explicitly picked light. * ============================================================ */ /* A — Tool body grid collapse with CORRECT selector name. * * Covers .finboard-tool-edit__body (actual class) + .finboard-tool__body * (legacy, belt-and-braces). */ @media (max-width: 900px) { .finboard-tool-edit__body, .finboard-tool__body { grid-template-columns: 1fr !important; gap: 16px !important; padding: 16px !important; } .finboard-tool-edit__inputs, .finboard-tool__inputs { border-right: none !important; padding: 20px !important; } .finboard-tool-edit__result, .finboard-tool__results { padding: 20px !important; } /* Stat grid inside results column — also collapse on narrow */ .finboard-tool-edit__stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } } @media (max-width: 480px) { .finboard-tool-edit__stat-grid { grid-template-columns: 1fr !important; } } /* B — Charcoal palette as the default (not requiring explicit * data-finboard-theme="dark"). Mirrors MERGE PATCHES 2/3/4 but with a * looser selector: applies UNLESS the user explicitly picked light. * * Keeps the "light mode" opt-in working — a user with data-finboard-theme="light" * gets the light palette because these rules don't match. Everyone else * (including first-load, attribute-missing state) gets charcoal. */ html:not([data-finboard-theme="light"]) .finboard, html:not([data-finboard-theme="light"]) .finboard-community, html:not([data-finboard-theme="light"]) .finboard-question { --fb-navy: #2a2a2a; --fb-bg: #353535; --fb-bg-card: #3d3d3d; --fb-bg-raised: #454545; --fb-bg-hover: #4a4a4a; --fb-bg-input: #2c2c2c; --fb-bg-inset: #2a2a2a; --fb-gold: #fcc419; --fb-gold-hover: #ffd54e; --fb-gold-dim: rgba(252, 196, 25, 0.10); --fb-gold-glow: rgba(252, 196, 25, 0.18); --fb-border: rgba(255, 255, 255, 0.08); --fb-border-strong: rgba(255, 255, 255, 0.14); --fb-border-gold: rgba(252, 196, 25, 0.25); --fb-text: #ffffff; --fb-text-secondary: #e0e0e0; --fb-text-muted: #b0b0b0; --fb-text-link: #fcc419; --fb-shadow-card: 3px 3px 10px rgba(0,0,0,.55), -2px -2px 8px rgba(255,255,255,.04); --fb-neu-out: 10px 10px 15px rgba(0,0,0,.5), -10px -10px 15px rgba(255,255,255,.03); --fb-neu-out-sm: 3px 3px 10px rgba(0,0,0,.55), -2px -2px 8px rgba(255,255,255,.04); --fb-neu-in: inset 8px 8px 16px rgba(0,0,0,.6), inset -8px -8px 16px rgba(255,255,255,.02); --fb-neu-in-sm: inset 2px 2px 5px rgba(0,0,0,.5), inset -2px -2px 5px rgba(255,255,255,.03); --fb-neu-gold: 0 0 24px rgba(252,196,25,.15), 0 0 8px rgba(252,196,25,.10); --fb-shadow-gold-hover: 0 4px 16px rgba(252,196,25,.25); } /* Body background — charcoal by default on community/auth pages */ html:not([data-finboard-theme="light"]) body.finboard-community-page, html:not([data-finboard-theme="light"]) body.finboard-auth-page { background: #353535 !important; } /* Card backgrounds that hardcode navy — charcoal default */ html:not([data-finboard-theme="light"]) .finboard-post-card, html:not([data-finboard-theme="light"]) .finboard-card, html:not([data-finboard-theme="light"]) .finboard-sidebar-card, html:not([data-finboard-theme="light"]) .finboard-hotstocks__card, html:not([data-finboard-theme="light"]) .finboard-notif-dropdown, html:not([data-finboard-theme="light"]) .finboard-avatar-dropdown { background: var(--fb-bg-card) !important; } /* Join banner gradient — charcoal default */ html:not([data-finboard-theme="light"]) .finboard-join-banner, html:not([data-finboard-theme="light"]) .finboard-community-banner, html:not([data-finboard-theme="light"]) .finboard-guest-cta { background: linear-gradient(135deg, #3d3d3d, #454545) !important; border: 1px solid var(--fb-border-gold) !important; } /* Page gradient + perlin noise — charcoal default. * Matches MERGE PATCH 4 but with the dark-default selector so gradient * always applies and doesn't show horizontal navy from v2.5.0 leaking * through on mobile. */ html:not([data-finboard-theme="light"]) .finboard, html:not([data-finboard-theme="light"]) .finboard-community, html:not([data-finboard-theme="light"]) .finboard-question { background-color: var(--fb-bg) !important; background-image: radial-gradient(ellipse 120% 80% at 50% -5%, rgba(252, 196, 25, 0.05) 0%, rgba(252, 196, 25, 0) 55%), radial-gradient(ellipse 110% 90% at 50% 110%, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 60%), linear-gradient(180deg, #3d3d3d 0%, #353535 45%, #2b2b2b 100%) !important; background-attachment: fixed, fixed, fixed !important; } /* ============================================================ * MERGE PATCH 10 — Mobile nav scroll hint + sidebar header offset * ------------------------------------------------------------ * Two small mobile refinements: * * A. Community nav bar scroll hint. * On mobile the bar hides tab labels and scrolls horizontally * past the visible edge to reach Tools/Search. Without any * visual cue users assume what they see is the whole nav. * Add a subtle gradient fade on the right edge hinting that * more content continues off-screen. * * B. Off-canvas sidebar respects the TIC header. * .finboard-sidebar opens from right: -300px to right: 0 on mobile * with top: 0. The TIC header is position: sticky; top: 0, so the * sidebar's top 56px renders BEHIND the header. Shift the sidebar's * top offset to 56px so it sits cleanly below the persistent * header chrome (Reddit-style drawer pattern). * ============================================================ */ /* A — Scroll-position dots under the community nav bar on mobile. * * Replaces the previous pseudo-element fade hint (fundamentally * flawed — animation was always either jumpy or laggy, low-contrast * in some theme/viewport combos, and gave no clear sense of position). * * Now: a row of small dots below the bar. One dot per "page" of * scroll width. The dot matching the user's current position is * highlighted gold. Zero animation on fill change, just a colour * swap — clean and instant. * * Dots are built by the JS in nav.php (appended to .finboard- * community-bar as a sibling to __inner). Hidden entirely on * desktop and when there's no overflow (only 1 dot = nothing to * indicate). */ @media (max-width: 900px) { .finboard-community-bar { position: sticky; position: -webkit-sticky; } .finboard-community-bar__inner { position: relative; } .finboard-community-bar__dots { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 6px 0 4px; pointer-events: none; } .finboard-community-bar__dots[hidden] { display: none !important; } .finboard-community-bar__dots-dot { display: block; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); } html[data-finboard-theme="light"] .finboard-community-bar__dots-dot { background: rgba(0, 0, 0, 0.12); } .finboard-community-bar__dots-dot[aria-current="true"] { background: var(--fb-gold, #fcc419); width: 16px; border-radius: 3px; } } @media (min-width: 901px) { .finboard-community-bar__dots { display: none !important; } } /* A2 — Mobile = flat solid background, NO gradient at all. * * Every attempt to override v2.5.0's layered gradient (radials + * linear + `background-attachment: fixed`) on mobile has produced * sideways artefacts because `fixed` degrades to `scroll` on iOS * Safari and the off-screen radial ellipses paint relative to the * tall page element. * * Decision: stop fighting. Flat solid charcoal (dark) / flat pale * grey (light) on mobile. Gradient is a desktop aesthetic — on a * 400px viewport a 100-200px tall gradient band at the top is barely * noticeable anyway, so losing it costs nothing. * * Perlin-noise pseudo is also turned off on mobile so there's no * competing texture. */ @media (max-width: 900px) { html:not([data-finboard-theme="light"]) .finboard, html:not([data-finboard-theme="light"]) .finboard-community, html:not([data-finboard-theme="light"]) .finboard-question { background: #2b2b2b !important; background-image: none !important; } html[data-finboard-theme="light"] .finboard, html[data-finboard-theme="light"] .finboard-community, html[data-finboard-theme="light"] .finboard-question { background: #f5f7fa !important; background-image: none !important; } .finboard::before { opacity: 0 !important; } } /* B — Sidebar drawer sits below BOTH sticky headers on mobile. * * Persistent mobile chrome = TIC header (56px) + community nav bar * (52px) = 108px combined. Sidebar top-offset must clear both, else * the first 52px of sidebar content sits behind the community bar. * * z-index 9999 ensures nothing can ever stack above it. Both the * community bar (z-index 90) and the TIC header (z-index ~100) stay * below. * * Admin-bar variants: 32px desktop, 46px mobile — added on top. */ @media (max-width: 900px) { .finboard-sidebar { top: 108px !important; /* 56 TIC + 52 community bar */ max-height: calc(100vh - 108px) !important; z-index: 9999 !important; box-shadow: -8px 0 32px rgba(0,0,0,0.55) !important; } .admin-bar .finboard-sidebar { top: 140px !important; /* + 32 admin bar desktop */ max-height: calc(100vh - 140px) !important; } @media (max-width: 782px) { .admin-bar .finboard-sidebar { top: 154px !important; /* + 46 admin bar mobile */ max-height: calc(100vh - 154px) !important; } } }