html[data-finboard-theme="dark"] {
--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-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);
--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);
}
html[data-finboard-theme] {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
}
body.finboard-community-page,
body.finboard-auth-page {
overflow-x: visible !important;
overflow-y: visible !important;
}
body.finboard-community-page .page-header,
body.finboard-community-page main > .page-header,
body.finboard-community-page h1.entry-title {
display: none !important;
}
[data-finboard-theme="light"] .finboard,
.finboard.finboard--light {
background-color: transparent;
background-image: none;
}
.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; }
.finboard > * { position: relative; z-index: 1; }
.finboard .finboard-btn { padding: 8px 16px; }
.finboard .finboard-btn--primary:disabled { opacity: 0.4; background: var(--fb-bg-raised); color: var(--fb-text-muted); }
.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;
}
.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;
}
.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;
}
.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);
}
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: 9500;
box-sizing: border-box;
animation: finboard-morph-panel-in 180ms cubic-bezier(.4,0,.2,1);
}
.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;
}
.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);
}
.admin-bar .finboard-community-bar {
top: 32px;
}
.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); }
.finboard-community-tab:focus-visible {
outline: 2px solid var(--fb-gold);
outline-offset: 2px;
border-radius: var(--fb-radius-pill);
}
.finboard-community-tab--disabled {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
.finboard-community-tab--disabled svg { opacity: .3; }
.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);
}
.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;
}
[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;
}
[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;
}
.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;
}
[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);
}
[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;
}
.finboard-post-card:has(.finboard-status--hot),
.finboard-post-card:has(.finboard-status--best) {
border-left: 3px solid var(--fb-gold);
}
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;
}
.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%);
background-position: -200% 0;
pointer-events: none;
}
.finboard-btn--primary:hover::before { animation: finboard-shimmer 1.1s ease-in-out; }
.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;
}
.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; }
.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%);
background-position: -200% 0;
pointer-events: none;
}
.finboard-btn--hero:hover::before { animation: finboard-shimmer 1.1s ease-in-out; }
.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);
}
.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; }
.finboard-question > *:not(.finboard-community-bar):not(.finboard-breadcrumb) {
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
.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);
}
.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); }
.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);
}
.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;
}
.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);
}
.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;
}
.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; }
.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;
}
.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);
}
.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);
}
.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);
}
.tic-page-wrapper .finboard-badge,
.finboard.finboard--light .finboard-badge {
background: rgba(196,146,10,.1);
color: #c4920a;
}
.tic-page-wrapper .finboard-news-card__title,
.finboard.finboard--light .finboard-news-card__title {
color: #111318;
-webkit-text-fill-color: #111318;
}
.tic-page-wrapper .finboard-news-card__excerpt,
.finboard.finboard--light .finboard-news-card__excerpt {
color: #3d4250;
}
.tic-page-wrapper .finboard-news-card__time,
.finboard.finboard--light .finboard-news-card__time {
color: #6b7280;
}
.tic-page-wrapper .finboard-news-card__discuss-btn,
.finboard.finboard--light .finboard-news-card__discuss-btn {
color: #6b7280;
}
.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;
}
.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);
}
.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);
}
.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;
}
.finboard.finboard--light .finboard-thread__title {
color: #1a1d25;
}
.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; }
.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); }
.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 { }
.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;
}
.finboard-btn--gold {
background: var(--fb-gold); color: #000; -webkit-text-fill-color: #000; 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; -webkit-text-fill-color: #fff;
box-shadow: 0 4px 16px var(--fb-gold-glow, rgba(232,169,16,.3));
transform: translateY(-1px);
}
.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; }
[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);
}
.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; }
.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;
}
.finboard-community-tab:focus-visible {
outline: 2px solid var(--fb-gold);
outline-offset: -2px;
border-radius: var(--fb-radius-xs);
}
.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;
}
.finboard-btn--primary:active,
.finboard-btn--gold:active {
transform: scale(0.97);
box-shadow: var(--fb-neu-in-sm);
}
[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);
}
.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;
}
[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);
}
.finboard-community-bar__inner {
max-width: var(--fb-container-w, 1200px) !important;
margin: 0 auto !important;
}
.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;
}
[data-finboard-theme="dark"] .finboard,
[data-finboard-theme="dark"].finboard {
--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);
}
html[data-finboard-theme="dark"] body.finboard-community-page,
html[data-finboard-theme="dark"] body.finboard-auth-page {
background-color: #353535 !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;
}
[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;
}
[data-finboard-theme="dark"] .finboard-btn--primary,
[data-finboard-theme="dark"] .finboard-post-new-btn,
[data-finboard-theme="dark"] .finboard-sort-btn--active {
}
[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;
}
[data-finboard-theme="dark"] [class*="finboard-"][class*="banner"],
[data-finboard-theme="dark"] [class*="finboard-"][class*="cta"] {
}
[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;
}
[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;
}
[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;
}
.finboard.finboard-thread {
background-image: none !important;
background-color: #353535 !important;
background-attachment: scroll !important;
}
.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;
}
.finboard > * {
z-index: 1;
}
.finboard > *:not(.finboard-community-bar):not(.finboard-sidebar):not(.finboard-breadcrumb) {
position: relative;
}
.finboard .finboard-community-bar,
.finboard-community-bar {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 90;
}
.admin-bar .finboard-community-bar {
top: 32px;
}
.finboard-question {
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.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;
}
.finboard-question .finboard-breadcrumb + * ,
.finboard-question > .finboard-question__header:first-of-type {
margin-top: 20px;
}
.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;
}
.finboard-question > .finboard-community-bar {
width: 100%;
max-width: none;
margin: 0;
padding: 8px 16px;
}
.finboard-question__answers-section {
padding-bottom: 48px;
}
.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;
}
.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);
}
.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;
}
.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; }
.finboard-news-card:hover {
border-color: var(--fb-border-gold) !important;
transform: translateY(-2px);
box-shadow: var(--fb-neu-out-sm) !important;
}
@media (max-width: 900px) and (min-width: 601px) {
.finboard-news-card__image { width: 96px; height: 72px; }
}
.finboard-news-hero__image {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: #0f1118;
}
.finboard-news-hero__image::before {
content: "";
position: absolute;
inset: 0;
background: var(--hero-img) center / cover no-repeat;
filter: blur(28px) saturate(1.3) brightness(0.82);
transform: scale(1.25);
z-index: 0;
}
.finboard-news-hero__image > img {
position: relative;
z-index: 1;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
#finboard-news .finboard-news__ticker {
background: #11141c;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
opacity: 1;
}
[data-finboard-theme="dark"] #finboard-news .finboard-news__ticker {
background: var(--fb-bg-card);
border-bottom: 1px solid var(--fb-border);
}
@media (max-width: 900px) {
body.finboard-community-page,
body.finboard-auth-page {
overflow-x: hidden !important;
}
}
@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);
}
}
@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;
}
.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;
}
}
.finboard-comment__actions {
flex-wrap: wrap !important;
gap: 6px !important;
}
.finboard-post__actions,
.finboard-question__actions,
.finboard-card__actions {
flex-wrap: wrap !important;
gap: 6px !important;
}
@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; }
}
@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;
}
}
.finboard-tool-edit__presets,
.finboard-tool-presets,
[class*="finboard-tool"][class*="__preset"] {
flex-wrap: wrap !important;
gap: 6px !important;
}
@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;
}
}
@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;
}
}
@media (max-width: 480px) {
.finboard-tool-result-grid,
.finboard-tool-alloc-legend {
grid-template-columns: 1fr !important;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
html:not([data-finboard-theme]) body.finboard-community-page,
html:not([data-finboard-theme]) body.finboard-auth-page {
--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;
}
@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;
}
}
@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;
}
.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;
}
}
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);
}
html:not([data-finboard-theme="light"]) body.finboard-community-page,
html:not([data-finboard-theme="light"]) body.finboard-auth-page {
background-color: #353535 !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;
}
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;
}
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;
}
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: transparent !important;
background-image: none !important;
}
@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;
}
}
@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;
}
}
@media (max-width: 900px) {
.finboard-sidebar {
top: 108px !important;
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;
max-height: calc(100vh - 140px) !important;
}
@media (max-width: 782px) {
.admin-bar .finboard-sidebar {
top: 154px !important;
max-height: calc(100vh - 154px) !important;
}
}
}
.finboard-profile__completeness {
padding: 12px 14px;
background: var(--fb-bg-card, rgba(255, 255, 255, 0.03));
border: 1px solid var(--fb-border, rgba(255, 255, 255, 0.08));
border-radius: 12px;
}
.finboard-profile__completeness-hint {
font-size: 13px;
color: var(--fb-text, inherit);
margin: 8px 0 10px;
line-height: 1.45;
}
.finboard-profile__completeness-hint strong {
color: var(--fb-gold, #e8a910);
}
.finboard-profile__completeness-checklist {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 14px;
}
@media (max-width: 600px) {
.finboard-profile__completeness-checklist {
grid-template-columns: 1fr;
}
}
.finboard-profile__completeness-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
line-height: 1.4;
color: var(--fb-text-muted, #6b7280);
padding: 4px 0;
}
.finboard-profile__completeness-item--done {
color: var(--fb-text, inherit);
}
.finboard-profile__completeness-item--done .finboard-profile__completeness-text {
text-decoration: line-through;
text-decoration-color: var(--fb-text-muted, #6b7280);
text-decoration-thickness: 1px;
opacity: 0.85;
}
.finboard-profile__completeness-icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
font-size: 11px;
line-height: 1;
font-weight: 700;
}
.finboard-profile__completeness-item--done .finboard-profile__completeness-icon {
background: var(--fb-gold, #e8a910);
color: #000;
}
.finboard-profile__completeness-item--todo .finboard-profile__completeness-icon {
background: transparent;
color: var(--fb-text-muted, #6b7280);
border: 1px dashed var(--fb-border, rgba(255, 255, 255, 0.18));
}
.finboard-profile__completeness-cta {
display: inline-flex;
align-items: center;
margin-top: 12px;
text-decoration: none;
}
.finboard-profile__completeness .screen-reader-text {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
:root {
--fb-gold-text: #8a6407;
--fb-gold-text-hover: #6d4f05;
}
html[data-finboard-theme="dark"] {
--fb-gold-text: #E8A910;
--fb-gold-text-hover: #ffc548;
}
.finboard .finboard-sort-btn.active,
.finboard .finboard-community-tab.active,
.finboard-community-tab.active,
.finboard .finboard-topic-btn.active,
.finboard .finboard-topic-btn[aria-current="page"],
.finboard .finboard-post-vote-count,
.finboard .finboard-equity-count,
.finboard .finboard-rank-progress__label,
.finboard a.finboard-post-author:hover {
color: var(--fb-gold-text);
}
.finboard a:hover .finboard-post-vote-count,
.finboard a.finboard-post-author:focus-visible {
color: var(--fb-gold-text-hover);
}
.finboard .finboard-post-action,
.finboard .finboard-action-btn,
.finboard .finboard-dc-bookmark-btn,
.finboard .finboard-thread-bookmark-btn,
.finboard .finboard-sort-btn,
.finboard .finboard-post-like-btn,
.finboard .finboard-vote-btn,
.finboard nav[aria-label="Pagination"] a,
.finboard .finboard-community-tab {
min-height: 44px;
min-width: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.finboard .finboard-sidebar-card > a,
.finboard .finboard-sidebar-card > nav > a,
.finboard .finboard-sidebar-card > ul > li > a {
min-height: 44px;
display: flex;
align-items: center;
}
@media (max-width: 480px) {
.finboard .finboard-post-action,
.finboard .finboard-action-btn {
height: auto;
min-height: 44px;
}
}
.finboard .finboard-post-header {
font-size: 12px;
line-height: 1.45;
gap: 5px;
}
.finboard .finboard-post-status {
font-size: 11px;
letter-spacing: 0.4px;
padding: 3px 8px;
line-height: 1.3;
}
.finboard .finboard-broker-cta {
background: rgba(196, 146, 10, 0.05);
border: 1.25px solid rgba(196, 146, 10, 0.35);
border-radius: var(--fb-radius-sm, 8px);
}
.finboard .finboard-broker-cta:hover {
background: rgba(196, 146, 10, 0.10);
border-color: rgba(196, 146, 10, 0.45);
}
html[data-finboard-theme="dark"] .finboard .finboard-broker-cta {
background: rgba(232, 169, 16, 0.06);
border-color: rgba(232, 169, 16, 0.35);
}
html[data-finboard-theme="dark"] .finboard .finboard-broker-cta:hover {
background: rgba(232, 169, 16, 0.12);
border-color: rgba(232, 169, 16, 0.50);
}
.finboard nav[aria-label="Community sections"] a.active,
.finboard .finboard-community-tab.active,
.finboard-community-tab.active {
box-shadow: inset 0 -2px 0 currentColor;
font-weight: 700;
}
.finboard .finboard-sort-btn.active {
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1.5px;
}
.finboard .finboard-topic-btn.active,
.finboard .finboard-topic-btn[aria-current="page"] {
outline: 2px solid var(--fb-gold-text);
outline-offset: -1px;
}
.finboard :focus-visible,
.finboard-wrap :focus-visible,
.finboard-community-bar :focus-visible {
outline: 2px solid var(--fb-gold-text);
outline-offset: 2px;
}
html[data-finboard-theme="dark"] .finboard :focus-visible,
html[data-finboard-theme="dark"] .finboard-wrap :focus-visible,
html[data-finboard-theme="dark"] .finboard-community-bar :focus-visible {
outline-color: var(--fb-gold);
}
.finboard button:focus,
.finboard a:focus,
.finboard input:focus,
.finboard select:focus,
.finboard textarea:focus,
.finboard [role="button"]:focus,
.finboard-wrap button:focus,
.finboard-wrap a:focus,
.finboard-community-bar button:focus,
.finboard-community-bar a:focus {
outline: none !important;
box-shadow: none;
}
.finboard button:focus-visible,
.finboard a:focus-visible,
.finboard input:focus-visible,
.finboard select:focus-visible,
.finboard textarea:focus-visible,
.finboard [role="button"]:focus-visible,
.finboard-wrap button:focus-visible,
.finboard-wrap a:focus-visible,
.finboard-community-bar button:focus-visible,
.finboard-community-bar a:focus-visible {
outline: 2px solid var(--fb-gold-text, #8a6407) !important;
outline-offset: 2px !important;
}
html[data-finboard-theme="dark"] .finboard button:focus-visible,
html[data-finboard-theme="dark"] .finboard a:focus-visible,
html[data-finboard-theme="dark"] .finboard input:focus-visible,
html[data-finboard-theme="dark"] .finboard select:focus-visible,
html[data-finboard-theme="dark"] .finboard textarea:focus-visible {
outline-color: var(--fb-gold, #E8A910) !important;
}
.finboard-quiz {
padding-bottom: 48px;
}
@media (max-width: 700px) {
.finboard-quiz {
padding-bottom: 32px;
}
}
.finboard-quiz__streak-banner {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
margin: 0 0 16px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(245, 158, 11, 0.10) 0%, rgba(245, 158, 11, 0.02) 70%);
border: 1px solid rgba(245, 158, 11, 0.25);
border-left: 4px solid #f59e0b;
}
.finboard-quiz__streak-banner--done {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 70%);
border-color: rgba(16, 185, 129, 0.25);
border-left-color: #10b981;
}
.finboard-quiz__streak-flame {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex-shrink: 0;
background: rgba(245, 158, 11, 0.15);
border-radius: 10px;
line-height: 1;
}
.finboard-quiz__streak-banner--done .finboard-quiz__streak-flame {
background: rgba(16, 185, 129, 0.15);
}
.finboard-quiz__streak-flame-icon {
font-size: 18px;
line-height: 1;
}
.finboard-quiz__streak-flame-count {
font-size: 11px;
font-weight: 800;
color: #b45309;
margin-top: 2px;
line-height: 1;
}
.finboard-quiz__streak-banner--done .finboard-quiz__streak-flame-count {
color: #047857;
}
html[data-finboard-theme="dark"] .finboard-quiz__streak-flame-count {
color: #fbbf24;
}
html[data-finboard-theme="dark"] .finboard-quiz__streak-banner--done .finboard-quiz__streak-flame-count {
color: #34d399;
}
.finboard-quiz__streak-text {
font-size: 14px;
line-height: 1.4;
color: var(--fb-text, #0f172a);
}
.finboard-quiz__streak-text strong {
color: var(--fb-text, #0f172a);
font-weight: 700;
}
.finboard-quiz__streak-countdown {
color: #b45309;
font-weight: 700;
}
html[data-finboard-theme="dark"] .finboard-quiz__streak-countdown {
color: #fbbf24;
}
.finboard .finboard-quiz__select > .finboard-quiz__leaderboard {
display: none !important;
}
.finboard .finboard-quiz__option-btn.incorrect {
color: #b91c1c;
}
html[data-finboard-theme="dark"] .finboard .finboard-quiz__option-btn.incorrect {
color: #fca5a5;
}
.finboard .finboard-quiz__option-btn {
overflow: visible;
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
height: auto;
min-height: 48px;
line-height: 1.5;
}
.finboard-breadcrumb {
display: none !important;
}
.finboard .finboard-platform-rep-section {
display: none !important;
}
.finboard .finboard-compare-check-label,
.finboard #finboard-compare-btn {
display: none !important;
}
.finboard .finboard-broker-list-item-wrap > .finboard-broker-list-item {
margin-left: 0;
}
@media (max-width: 900px) {
.finboard-sidebar {
box-shadow: -6px 0 22px rgba(0,0,0,0.27) !important;
}
}
@media (max-width: 600px) {
.finboard-search-modal {
padding: 8px 12px 12px;
align-items: flex-start;
}
.finboard-search-modal__panel {
max-height: calc(100vh - 24px);
}
}
.finboard-sidebar-collapse {
display: none;
}
@media (min-width: 901px) {
.finboard-sidebar {
position: relative;
}
.finboard-sidebar-collapse,
button.finboard-sidebar-collapse {
position: absolute !important;
top: 14px !important;
left: -14px !important;
z-index: 6;
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 30px !important;
height: 30px !important;
padding: 0 !important;
margin: 0 !important;
border: 1px solid rgba(0,0,0,0.08) !important;
border-radius: 50% !important;
background: #ffffff !important;
color: #6b7280 !important;
font-family: var(--fb-font, system-ui, sans-serif) !important;
cursor: pointer;
box-shadow:
0 2px 8px rgba(0,0,0,0.10),
0 1px 2px rgba(0,0,0,0.06) !important;
text-transform: none !important;
line-height: 1 !important;
outline: none;
transition:
transform 220ms cubic-bezier(.4,0,.2,1),
box-shadow 220ms cubic-bezier(.4,0,.2,1),
background-color 180ms ease,
color 180ms ease,
border-color 180ms ease;
}
.finboard-sidebar-collapse:hover,
button.finboard-sidebar-collapse:hover {
background: #ffffff !important;
color: #0f172a !important;
border-color: rgba(0,0,0,0.18) !important;
box-shadow:
0 6px 18px rgba(0,0,0,0.14),
0 2px 4px rgba(0,0,0,0.08) !important;
transform: scale(1.08);
}
.finboard-sidebar-collapse:active {
transform: scale(0.96);
}
.finboard-sidebar-collapse:focus,
.finboard-sidebar-collapse:focus-visible {
outline: 2px solid var(--fb-gold-text, #8a6407) !important;
outline-offset: 2px !important;
border-color: rgba(0,0,0,0.18) !important;
}
.finboard-sidebar-collapse__icon {
width: 14px !important;
height: 14px !important;
transition: transform 240ms cubic-bezier(.4,0,.2,1);
flex-shrink: 0;
}
.finboard-sidebar-collapse__label {
display: none;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1;
}
html[data-finboard-theme="dark"] .finboard-sidebar-collapse,
html[data-finboard-theme="dark"] button.finboard-sidebar-collapse {
background: var(--fb-bg-raised, #232838) !important;
border-color: rgba(255,255,255,0.12) !important;
color: var(--fb-text-secondary, #9ca3b4) !important;
box-shadow:
0 3px 12px rgba(0,0,0,0.50),
0 1px 2px rgba(0,0,0,0.35) !important;
}
html[data-finboard-theme="dark"] .finboard-sidebar-collapse:hover {
background: var(--fb-bg-hover, #2a3042) !important;
color: var(--fb-text, #e8ecf4) !important;
border-color: rgba(255,255,255,0.20) !important;
}
.finboard-wrap.finboard-wrap--sidebar-collapsed {
grid-template-columns: 1fr 44px !important;
}
.finboard-wrap--sidebar-collapsed .finboard-sidebar {
padding-left: 0;
padding-right: 0;
overflow: visible;
}
.finboard-wrap--sidebar-collapsed .finboard-sidebar > *:not(.finboard-sidebar-collapse) {
display: none !important;
}
.finboard-wrap--sidebar-collapsed .finboard-sidebar-collapse,
.finboard-wrap--sidebar-collapsed button.finboard-sidebar-collapse {
position: sticky !important;
top: 24px !important;
left: auto !important;
margin: 14px auto 0 !important;
}
.finboard-wrap--sidebar-collapsed .finboard-sidebar-collapse__icon {
transform: rotate(180deg);
}
.finboard-sidebar-collapse__label {
display: none !important;
}
}
.finboard-community-bar .finboard-theme-toggle {
display: none !important;
}
.finboard-edit-profile__theme-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 0;
}
.finboard-edit-profile__theme-label {
display: flex;
flex-direction: column;
gap: 2px;
}
.finboard-edit-profile__theme-label-title {
font-weight: 600;
font-size: 14px;
color: var(--fb-text, inherit);
}
.finboard-edit-profile__theme-label-hint {
font-size: 12px;
color: var(--fb-text-muted, #6b7280);
}
.finboard-theme-toggle--profile {
display: inline-flex !important;
}
.finboard-rank-position {
display: flex;
align-items: center;
gap: 6px;
margin-top: 4px;
font-size: 12px;
color: var(--fb-text-muted, #6b7280);
}
.finboard-rank-position__num {
font-weight: 700;
color: var(--fb-gold-text, #8a6407);
}
html[data-finboard-theme="dark"] .finboard-rank-position__num {
color: var(--fb-gold, #E8A910);
}
.finboard-rank-position__tie-note {
display: block;
margin-top: 2px;
font-size: 11px;
color: var(--fb-text-muted, #6b7280);
font-style: italic;
}
button.finboard-quiz__skeleton-retry,
.finboard-quiz__skeleton-retry {
display: inline;
background: none !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
text-shadow: none !important;
cursor: pointer;
color: var(--fb-gold-text, #8a6407) !important;
-webkit-text-fill-color: var(--fb-gold-text, #8a6407) !important;
font: inherit !important;
text-decoration: underline !important;
text-transform: none !important;
letter-spacing: 0 !important;
-webkit-appearance: none;
appearance: none;
outline: 0;
}
button.finboard-quiz__skeleton-retry:hover,
.finboard-quiz__skeleton-retry:hover {
text-decoration: none !important;
}
html[data-finboard-theme="dark"] button.finboard-quiz__skeleton-retry,
html[data-finboard-theme="dark"] .finboard-quiz__skeleton-retry {
color: var(--fb-gold, #E8A910) !important;
-webkit-text-fill-color: var(--fb-gold, #E8A910) !important;
}
.finboard-profile__header {
gap: 28px !important;
padding: 28px 32px !important;
margin-bottom: 22px !important;
}
@media (max-width: 700px) {
.finboard-profile__header {
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 18px !important;
padding: 22px !important;
}
}
.finboard-profile__meta-row {
margin-top: 8px;
gap: 10px !important;
row-gap: 6px;
flex-wrap: wrap;
}
.finboard-profile__knowledge {
margin-top: 8px !important;
}
.finboard-profile__bio {
margin-top: 10px !important;
}
.finboard-profile__actions {
margin-top: 16px !important;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
@media (max-width: 540px) {
.finboard-profile__actions {
gap: 6px;
}
.finboard-profile__actions .finboard-btn {
flex: 1 1 calc(50% - 4px);
min-width: 0;
}
}
.finboard-profile__completeness {
padding: 18px 20px !important;
margin-bottom: 22px !important;
}
.finboard-profile__progress-bar {
height: 8px !important;
margin-top: 10px;
margin-bottom: 4px;
}
.finboard-profile__completeness-hint {
margin: 12px 0 14px !important;
font-size: 14px !important;
}
.finboard-profile__completeness-cta {
margin-top: 16px !important;
}
@media (max-width: 700px) {
.finboard-community-bar nav[aria-label="Community sections"] {
display: flex;
gap: 2px;
padding: 6px 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.finboard-community-bar nav[aria-label="Community sections"]::-webkit-scrollbar {
display: none;
}
.finboard-community-bar .finboard-community-tab {
display: flex !important;
flex-direction: column !important;
align-items: center;
justify-content: center;
gap: 4px !important;
flex-shrink: 0;
min-width: 64px;
padding: 8px 10px !important;
scroll-snap-align: start;
font-size: 10px !important;
font-weight: 600 !important;
text-transform: none;
letter-spacing: 0.02em;
line-height: 1;
border-radius: 10px !important;
transition: background-color 160ms ease, color 160ms ease;
}
.finboard-community-bar .finboard-community-tab svg {
width: 22px !important;
height: 22px !important;
flex-shrink: 0;
}
.finboard-community-bar .finboard-community-tab span {
font-size: 11px !important;
font-weight: 600 !important;
white-space: nowrap;
}
.finboard-community-bar .finboard-community-tab.active,
.finboard-community-bar .finboard-community-tab[aria-current="page"] {
background: var(--fb-gold-dim, rgba(232,169,16,0.12)) !important;
color: var(--fb-gold-text, #8a6407) !important;
box-shadow: inset 0 -2px 0 var(--fb-gold, #E8A910);
}
html[data-finboard-theme="dark"] .finboard-community-bar .finboard-community-tab.active {
color: var(--fb-gold, #E8A910) !important;
}
.finboard-community-bar .finboard-community-tab--disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
.finboard-rank-position--quiz {
margin: 6px 0 10px;
padding: 8px 12px;
border-radius: 8px;
background: var(--fb-gold-dim, rgba(232,169,16,0.08));
border-left: 3px solid var(--fb-gold, #E8A910);
font-size: 13px;
}
.finboard-rank-position--unranked {
background: rgba(0,0,0,0.03);
border-left-color: var(--fb-text-muted, #6b7280);
color: var(--fb-text-muted, #6b7280);
font-style: italic;
}
html[data-finboard-theme="dark"] .finboard-rank-position--unranked {
background: rgba(255,255,255,0.03);
}
.finboard-quiz__topic-card[data-topic] {
position: relative;
overflow: hidden;
transition:
transform 220ms cubic-bezier(.4,0,.2,1),
box-shadow 220ms cubic-bezier(.4,0,.2,1),
border-color 180ms ease;
}
.finboard-quiz__topic-card[data-topic]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--fb-topic-color, var(--fb-gold, #E8A910));
border-top-left-radius: inherit;
border-top-right-radius: inherit;
z-index: 1;
}
.finboard-quiz__topic-card[data-topic="forex"] {
--fb-topic-color: #2563eb;
--fb-topic-tint: rgba(37, 99, 235, 0.04);
--fb-topic-emoji: '🌍';
}
.finboard-quiz__topic-card[data-topic="isa"] {
--fb-topic-color: #10b981;
--fb-topic-tint: rgba(16, 185, 129, 0.04);
--fb-topic-emoji: '🛡️';
}
.finboard-quiz__topic-card[data-topic="crypto"] {
--fb-topic-color: #f59e0b;
--fb-topic-tint: rgba(245, 158, 11, 0.04);
--fb-topic-emoji: '⚡';
}
.finboard-quiz__topic-card[data-topic="cfd"] {
--fb-topic-color: #8b5cf6;
--fb-topic-tint: rgba(139, 92, 246, 0.04);
--fb-topic-emoji: '📈';
}
.finboard-quiz__topic-card[data-topic="tax"] {
--fb-topic-color: #14b8a6;
--fb-topic-tint: rgba(20, 184, 166, 0.04);
--fb-topic-emoji: '💷';
}
.finboard-quiz__topic-card[data-topic="regulation"] {
--fb-topic-color: #64748b;
--fb-topic-tint: rgba(100, 116, 139, 0.04);
--fb-topic-emoji: '⚖️';
}
.finboard-quiz__topic-card[data-topic] {
background: var(--fb-topic-tint, transparent);
}
.finboard-quiz__topic-card[data-topic]:hover {
transform: translateY(-4px);
border-color: var(--fb-topic-color, var(--fb-border-gold)) !important;
box-shadow:
0 12px 28px rgba(0,0,0,0.10),
0 4px 8px rgba(0,0,0,0.06),
0 0 0 2px color-mix(in srgb, var(--fb-topic-color) 18%, transparent);
}
.finboard-quiz__topic-card[data-topic] .finboard-quiz__topic-fill {
background: var(--fb-topic-color, var(--fb-gold, #E8A910)) !important;
}
.finboard-quiz__topic-card[data-topic] .finboard-quiz__topic-name {
position: relative;
z-index: 2;
padding: 4px 0 8px 0;
margin: 16px 0 10px 0;
font-size: 15.5px;
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.2px;
color: var(--fb-topic-color, var(--fb-text)) !important;
-webkit-text-fill-color: var(--fb-topic-color, var(--fb-text)) !important;
border-bottom: 1px solid color-mix(in srgb, var(--fb-topic-color) 22%, transparent);
}
.finboard-quiz__topic-card[data-topic="bubbles"] {
--fb-topic-color: #dc2626;
--fb-topic-tint: rgba(220, 38, 38, 0.04);
--fb-topic-emoji: '📉';
}
.finboard-quiz__topic-card[data-topic="mindgames"] {
--fb-topic-color: #6366f1;
--fb-topic-tint: rgba(99, 102, 241, 0.04);
--fb-topic-emoji: '🧠';
}
.finboard-quiz__topic-card[data-topic="legends"] {
--fb-topic-color: #b45309;
--fb-topic-tint: rgba(180, 83, 9, 0.04);
--fb-topic-emoji: '🎩';
}
html[data-finboard-theme="dark"] .finboard-quiz__topic-card[data-topic="forex"] { --fb-topic-tint: rgba(37, 99, 235, 0.10); }
html[data-finboard-theme="dark"] .finboard-quiz__topic-card[data-topic="isa"] { --fb-topic-tint: rgba(16, 185, 129, 0.10); }
html[data-finboard-theme="dark"] .finboard-quiz__topic-card[data-topic="crypto"] { --fb-topic-tint: rgba(245, 158, 11, 0.10); }
html[data-finboard-theme="dark"] .finboard-quiz__topic-card[data-topic="cfd"] { --fb-topic-tint: rgba(139, 92, 246, 0.10); }
html[data-finboard-theme="dark"] .finboard-quiz__topic-card[data-topic="tax"] { --fb-topic-tint: rgba(20, 184, 166, 0.10); }
html[data-finboard-theme="dark"] .finboard-quiz__topic-card[data-topic="regulation"] { --fb-topic-tint: rgba(100, 116, 139, 0.10); }
html[data-finboard-theme="dark"] .finboard-quiz__topic-card[data-topic="bubbles"] { --fb-topic-tint: rgba(220, 38, 38, 0.10); }
html[data-finboard-theme="dark"] .finboard-quiz__topic-card[data-topic="mindgames"] { --fb-topic-tint: rgba(99, 102, 241, 0.10); }
html[data-finboard-theme="dark"] .finboard-quiz__topic-card[data-topic="legends"] { --fb-topic-tint: rgba(180, 83, 9, 0.10); }
.finboard-quiz__topic-card--locked {
opacity: 0.85;
}
.finboard-quiz__topic-card--locked:hover {
transform: none !important;
box-shadow: none !important;
}
.finboard-quiz__topic-card--locked .finboard-quiz__topic-name {
color: var(--fb-text-muted, #6b7280);
}
.finboard-quiz__topic-locked-msg {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
padding: 14px 12px !important;
margin: 12px 0 0 !important;
background: rgba(0,0,0,0.025);
border: 1px solid rgba(0,0,0,0.06);
border-radius: 10px;
font-size: 13px !important;
line-height: 1.5 !important;
color: var(--fb-text-muted, #6b7280);
box-sizing: border-box !important;
width: 100% !important;
text-align: left;
}
.finboard-quiz__topic-locked-text {
flex: 1 1 auto;
min-width: 0;
word-wrap: break-word;
}
.finboard-quiz__topic-locked-msg strong {
color: var(--fb-text, #0f172a);
font-weight: 700;
white-space: nowrap;
}
.finboard-quiz__topic-locked-icon {
flex: 0 0 auto;
font-size: 18px;
line-height: 1.4;
margin-top: 1px;
}
html[data-finboard-theme="dark"] .finboard-quiz__topic-locked-msg {
background: rgba(255,255,255,0.03);
border-color: rgba(255,255,255,0.06);
}
html[data-finboard-theme="dark"] .finboard-quiz__topic-locked-msg strong {
color: var(--fb-text, #e8e8f0);
}
.finboard-quiz__topic-card--specialist::before {
}
.finboard-quiz__topic-card--specialist .finboard-quiz__topic-name::after {
content: 'Specialist';
display: inline-block;
margin-left: 8px;
padding: 2px 6px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fb-topic-color, var(--fb-gold, #E8A910));
background: var(--fb-topic-tint, rgba(232,169,16,0.10));
border: 1px solid currentColor;
border-radius: 4px;
vertical-align: middle;
line-height: 1;
}
.finboard-hook {
position: relative;
margin: 0 0 16px;
padding: 14px 16px;
border-radius: 14px;
background: var(--fb-bg-card, #ffffff);
border: 1px solid var(--fb-border, rgba(0,0,0,0.08));
box-shadow: 0 4px 14px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04);
animation: finboard-hook-in 220ms cubic-bezier(.4,0,.2,1);
}
@keyframes finboard-hook-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
html[data-finboard-theme="dark"] .finboard-hook {
background: var(--fb-bg-raised, #232838);
border-color: rgba(255,255,255,0.08);
box-shadow: 0 8px 22px rgba(0,0,0,0.45);
}
.finboard-hook__dismiss,
button.finboard-hook__dismiss {
position: absolute;
top: 10px;
right: 10px;
width: 24px;
height: 24px;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: var(--fb-text-muted, #6b7280) !important;
font-size: 18px;
line-height: 1;
cursor: pointer;
border-radius: 50% !important;
outline: none !important;
transition: background-color 160ms ease, color 160ms ease;
}
.finboard-hook__dismiss:hover {
background: rgba(0,0,0,0.05) !important;
color: var(--fb-text, #0f172a) !important;
}
.finboard-hook__dismiss:focus,
.finboard-hook__dismiss:focus-visible {
outline: 2px solid var(--fb-gold-text, #8a6407) !important;
outline-offset: 2px !important;
}
.finboard-hook--streak {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 16px;
align-items: center;
border-left: 4px solid #f59e0b;
background: linear-gradient(135deg, rgba(245, 158, 11, 0.06) 0%, transparent 60%);
padding-right: 44px;
}
@media (max-width: 640px) {
.finboard-hook--streak {
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
padding-right: 36px;
}
.finboard-hook--streak .finboard-hook__cta {
grid-column: 1 / -1;
justify-self: stretch;
text-align: center;
}
}
.finboard-hook__streak-flame {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: rgba(245, 158, 11, 0.12);
border: 1px solid rgba(245, 158, 11, 0.30);
border-radius: 12px;
line-height: 1;
}
.finboard-hook__streak-flame-icon {
font-size: 20px;
line-height: 1;
}
.finboard-hook__streak-flame-count {
font-size: 12px;
font-weight: 800;
color: #b45309;
margin-top: 2px;
line-height: 1;
}
html[data-finboard-theme="dark"] .finboard-hook__streak-flame-count {
color: #fbbf24;
}
.finboard-hook__body {
min-width: 0;
}
.finboard-hook__title {
font-size: 15px;
font-weight: 700;
color: var(--fb-text, #0f172a);
line-height: 1.3;
margin: 0;
}
.finboard-hook__title strong {
color: #b45309;
font-weight: 800;
}
html[data-finboard-theme="dark"] .finboard-hook__title strong {
color: #fbbf24;
}
.finboard-hook__sub {
font-size: 12px;
color: var(--fb-text-muted, #6b7280);
line-height: 1.4;
margin-top: 3px;
display: block;
}
.finboard-hook__cta,
a.finboard-hook__cta {
display: inline-flex !important;
align-items: center;
gap: 6px;
padding: 10px 16px !important;
background: var(--fb-gold, #E8A910) !important;
color: #0f0f0f !important;
border: 0 !important;
border-radius: var(--fb-radius-pill, 9999px) !important;
font-size: 13px !important;
font-weight: 700 !important;
text-decoration: none !important;
outline: none !important;
box-shadow: 0 3px 10px rgba(196,146,10,0.30);
transition: background-color 180ms ease, transform 220ms cubic-bezier(.4,0,.2,1), box-shadow 220ms cubic-bezier(.4,0,.2,1);
white-space: nowrap;
}
.finboard-hook__cta:hover {
background: var(--fb-gold-hover, #f0bd3e) !important;
color: #0f0f0f !important;
transform: translateY(-1px);
box-shadow: 0 5px 14px rgba(196,146,10,0.40);
}
.finboard-hook__cta:focus,
.finboard-hook__cta:focus-visible {
outline: 2px solid var(--fb-gold-text, #8a6407) !important;
outline-offset: 3px !important;
}
.finboard-hook__cta svg {
width: 14px;
height: 14px;
}
.finboard-hook--mission {
padding-right: 44px;
}
.finboard-hook__header {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 10px;
}
.finboard-hook--mission .finboard-hook__title {
font-size: 14px;
font-weight: 700;
}
.finboard-hook--mission .finboard-hook__sub {
margin-top: 0;
flex-shrink: 0;
}
.finboard-hook__missions {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.finboard-hook__mission {
display: grid;
grid-template-columns: 28px 1fr auto;
gap: 12px;
align-items: center;
position: relative;
}
.finboard-hook__mission-icon {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
background: var(--fb-gold-dim, rgba(232,169,16,0.10));
border-radius: 8px;
line-height: 1;
}
.finboard-hook__mission-link,
a.finboard-hook__mission-link {
display: flex !important;
flex-direction: column;
gap: 1px;
padding: 6px 8px !important;
border-radius: 8px !important;
color: var(--fb-text, #0f172a) !important;
text-decoration: none !important;
border: 0 !important;
outline: none !important;
background: transparent !important;
transition: background-color 160ms ease;
min-width: 0;
}
.finboard-hook__mission-link:hover {
background: rgba(0,0,0,0.04) !important;
color: var(--fb-text, #0f172a) !important;
}
html[data-finboard-theme="dark"] .finboard-hook__mission-link:hover {
background: rgba(255,255,255,0.05) !important;
}
.finboard-hook__mission-link:focus,
.finboard-hook__mission-link:focus-visible {
outline: 2px solid var(--fb-gold-text, #8a6407) !important;
outline-offset: 1px !important;
}
.finboard-hook__mission-label {
font-size: 13px;
font-weight: 600;
line-height: 1.3;
color: var(--fb-text, #0f172a);
}
.finboard-hook__mission-reward {
font-size: 11px;
font-weight: 600;
color: var(--fb-gold-text, #8a6407);
letter-spacing: 0.02em;
}
html[data-finboard-theme="dark"] .finboard-hook__mission-reward {
color: var(--fb-gold, #E8A910);
}
.finboard-hook__mission-arrow {
width: 14px;
height: 14px;
color: var(--fb-text-muted, #6b7280);
flex-shrink: 0;
transition: transform 200ms cubic-bezier(.4,0,.2,1);
}
.finboard-hook__mission:hover .finboard-hook__mission-arrow {
transform: translateX(2px);
color: var(--fb-gold, #E8A910);
}
.finboard-broker-page__discussion-section {
display: none !important;
}
.finboard-auth__input,
.finboard-auth-field input {
-webkit-text-fill-color: var(--fb-text, #1a1d25);
}
html[data-finboard-theme="dark"] .finboard-auth__input,
html[data-finboard-theme="dark"] .finboard-auth-field input {
-webkit-text-fill-color: var(--fb-text, #e8ecf4);
}
.finboard-portfolio {
max-width: 880px;
margin: 0 auto;
padding: 8px 0 32px;
}
.finboard-portfolio__header {
text-align: center;
margin: 16px 0 20px;
}
.finboard-portfolio__title {
font-size: 28px;
font-weight: 800;
line-height: 1.1;
margin: 0 0 8px;
letter-spacing: -0.02em;
color: var(--fb-text, inherit);
}
.finboard-portfolio__intro {
font-size: 14px;
line-height: 1.55;
color: var(--fb-text-muted, #6b7280);
margin: 0 auto;
max-width: 560px;
}
.finboard-portfolio__disclaimer {
padding: 14px 16px;
border-left: 3px solid var(--fb-gold, #E8A910);
background: var(--fb-gold-dim, rgba(232,169,16,0.08));
border-radius: 6px;
font-size: 13px;
line-height: 1.55;
color: var(--fb-text, inherit);
}
.finboard-portfolio__disclaimer--top {
margin-bottom: 24px;
}
.finboard-portfolio__disclaimer--bottom {
margin-top: 32px;
border-left-color: var(--fb-text-muted, #6b7280);
background: rgba(0,0,0,0.03);
color: var(--fb-text-muted, #6b7280);
font-size: 12px;
}
html[data-finboard-theme="dark"] .finboard-portfolio__disclaimer--bottom {
background: rgba(255,255,255,0.03);
}
.finboard-portfolio__locked {
text-align: center;
padding: 48px 24px;
background: var(--fb-bg-card, rgba(0,0,0,0.02));
border: 1px solid var(--fb-border, rgba(0,0,0,0.08));
border-radius: 16px;
margin: 16px 0;
}
.finboard-portfolio__locked-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
margin: 0 auto 16px;
border-radius: 50%;
background: var(--fb-gold-dim, rgba(232,169,16,0.10));
color: var(--fb-gold, #E8A910);
}
.finboard-portfolio__locked-icon svg {
width: 28px;
height: 28px;
}
.finboard-portfolio__locked-title {
font-size: 22px;
font-weight: 700;
margin: 0 0 10px;
color: var(--fb-text, inherit);
}
.finboard-portfolio__locked-desc {
font-size: 15px;
line-height: 1.55;
margin: 0 auto 20px;
max-width: 480px;
color: var(--fb-text-muted, #6b7280);
}
.finboard-portfolio__locked-desc strong {
color: var(--fb-text, inherit);
}
.finboard-portfolio__locked-actions {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 16px;
}
.finboard-portfolio__locked-hint {
font-size: 12px;
color: var(--fb-text-muted, #6b7280);
margin: 0;
}
.finboard-portfolio__chart-wrap {
display: grid;
grid-template-columns: 280px 1fr;
gap: 32px;
align-items: center;
margin: 24px 0;
padding: 24px;
background: var(--fb-bg-card, #ffffff);
border: 1px solid var(--fb-border, rgba(0,0,0,0.08));
border-radius: 16px;
}
@media (max-width: 700px) {
.finboard-portfolio__chart-wrap {
grid-template-columns: 1fr;
gap: 20px;
padding: 16px;
}
}
.finboard-portfolio__chart {
position: relative;
width: 240px;
height: 240px;
margin: 0 auto;
border-radius: 50%;
box-shadow:
0 8px 24px rgba(0,0,0,0.08),
0 2px 6px rgba(0,0,0,0.05);
}
.finboard-portfolio__chart-hole {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 130px;
height: 130px;
border-radius: 50%;
background: var(--fb-bg-card, #ffffff);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.finboard-portfolio__chart-label {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--fb-text, inherit);
text-align: center;
}
.finboard-portfolio__chart-sub {
font-size: 11px;
color: var(--fb-text-muted, #6b7280);
}
.finboard-portfolio__legend {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.finboard-portfolio__legend-item {
display: grid;
grid-template-columns: 14px 1fr auto;
gap: 10px;
align-items: center;
padding: 8px 10px;
border-radius: 8px;
transition: background-color 160ms ease;
}
.finboard-portfolio__legend-item:hover {
background: rgba(0,0,0,0.03);
}
html[data-finboard-theme="dark"] .finboard-portfolio__legend-item:hover {
background: rgba(255,255,255,0.04);
}
.finboard-portfolio__legend-swatch {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 4px;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}
.finboard-portfolio__legend-name {
font-size: 14px;
color: var(--fb-text, inherit);
font-weight: 500;
}
.finboard-portfolio__legend-pct {
font-size: 14px;
font-weight: 700;
color: var(--fb-text-muted, #6b7280);
font-variant-numeric: tabular-nums;
}
.finboard-portfolio__ig {
display: grid;
grid-template-columns: auto auto 1fr auto;
gap: 16px;
align-items: center;
padding: 16px 20px;
margin: 24px auto 4px;
max-width: 760px;
width: 100%;
box-sizing: border-box;
background: linear-gradient(135deg, #1a1e28 0%, #2a2e3a 100%);
border: 1px solid var(--fb-border-gold, rgba(232,169,16,0.3));
border-radius: 14px;
color: #ffffff;
text-decoration: none;
transition: transform 220ms cubic-bezier(.4,0,.2,1), box-shadow 220ms cubic-bezier(.4,0,.2,1);
}
.finboard-portfolio__ig-risk {
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.finboard-portfolio__ig:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0,0,0,0.20);
color: #ffffff;
}
@media (max-width: 700px) {
.finboard-portfolio__ig {
grid-template-columns: auto 1fr;
grid-template-rows: auto auto auto;
gap: 12px;
}
.finboard-portfolio__ig-rank { grid-row: 1; grid-column: 1; }
.finboard-portfolio__ig-logo { grid-row: 1; grid-column: 2; justify-self: end; }
.finboard-portfolio__ig-body { grid-row: 2; grid-column: 1 / -1; }
.finboard-portfolio__ig-cta { grid-row: 3; grid-column: 1 / -1; justify-self: stretch; text-align: center; }
}
.finboard-portfolio__ig-rank {
font-size: 18px;
font-weight: 800;
color: var(--fb-gold, #E8A910);
background: rgba(232,169,16,0.12);
border-radius: 8px;
padding: 6px 10px;
line-height: 1;
align-self: flex-start;
}
.finboard-portfolio__ig-logo {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: #cc0033;
color: #ffffff;
font-weight: 800;
font-size: 20px;
font-style: italic;
border-radius: 8px;
flex-shrink: 0;
overflow: hidden;
}
.finboard-portfolio__ig-logo:has(img) {
background: #ffffff;
padding: 4px;
}
.finboard-portfolio__ig-logo img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.finboard-portfolio__ig-body {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.finboard-portfolio__ig-title {
font-size: 16px;
font-weight: 700;
color: #ffffff;
}
.finboard-portfolio__ig-best {
font-size: 12px;
color: rgba(255,255,255,0.75);
padding: 4px 8px;
border: 1px solid var(--fb-gold, #E8A910);
border-radius: 6px;
align-self: flex-start;
}
.finboard-portfolio__ig-best strong {
color: var(--fb-gold, #E8A910);
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.06em;
}
.finboard-portfolio__ig-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-top: 4px;
}
@media (max-width: 600px) {
.finboard-portfolio__ig-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.finboard-portfolio__ig-cell {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.finboard-portfolio__ig-cell-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--fb-gold, #E8A910);
}
.finboard-portfolio__ig-cell-value {
font-size: 13px;
font-weight: 600;
color: #ffffff;
line-height: 1.3;
}
.finboard-portfolio__ig-cta {
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
background: var(--fb-gold, #E8A910);
color: #0f0f0f;
padding: 14px 18px;
border-radius: 10px;
transition: background-color 180ms ease;
}
.finboard-portfolio__ig:hover .finboard-portfolio__ig-cta {
background: var(--fb-gold-hover, #f0bd3e);
}
.finboard-portfolio__ig-cta-text {
font-size: 14px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #0f0f0f;
}
.finboard-portfolio__ig-cta-terms {
font-size: 11px;
color: #0f0f0f;
opacity: 0.75;
}
.finboard-portfolio__ig-risk {
font-size: 11px;
color: var(--fb-text-muted, #6b7280);
margin: 0 0 0 4px;
text-align: center;
}
.finboard-portfolio__ig-risk p {
margin: 0;
font-size: inherit;
color: inherit;
line-height: 1.4;
}
.finboard-portfolio__ig-risk strong {
font-weight: 600;
color: inherit;
}
.finboard-broker-filter-bar {
display: flex;
align-items: center;
gap: 12px;
margin: 8px 0 16px;
padding: 0 4px;
}
.finboard-broker-filter-toggle {
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
user-select: none;
font-size: 13px;
color: var(--fb-text, inherit);
}
.finboard-broker-filter-toggle input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
pointer-events: none;
}
.finboard-broker-filter-toggle__track {
position: relative;
display: inline-block;
width: 36px;
height: 20px;
background: var(--fb-border, rgba(0,0,0,0.18));
border-radius: 9999px;
transition: background-color 180ms ease;
flex-shrink: 0;
}
.finboard-broker-filter-toggle__track::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: #ffffff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
transition: transform 200ms cubic-bezier(.4,0,.2,1);
}
.finboard-broker-filter-toggle input[type="checkbox"]:checked + .finboard-broker-filter-toggle__track {
background: var(--fb-gold, #E8A910);
}
.finboard-broker-filter-toggle input[type="checkbox"]:checked + .finboard-broker-filter-toggle__track::after {
transform: translateX(16px);
}
.finboard-broker-filter-toggle input[type="checkbox"]:focus-visible + .finboard-broker-filter-toggle__track {
outline: 2px solid var(--fb-gold-text, #8a6407);
outline-offset: 2px;
}
.finboard-broker-filter-toggle__label {
display: inline-flex;
align-items: center;
gap: 6px;
}
.finboard-broker-filter-toggle__count {
color: var(--fb-text-muted, #6b7280);
font-size: 12px;
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.finboard-feed-filter {
position: relative;
}
.finboard-feed-filter__btn,
button.finboard-feed-filter__btn {
display: inline-flex !important;
align-items: center;
gap: 8px;
padding: 8px 12px 8px 12px !important;
border: 1px solid transparent !important;
border-radius: var(--fb-radius-pill, 9999px) !important;
background: var(--fb-bg-card, #ffffff) !important;
color: var(--fb-text, #0f172a) !important;
font-family: var(--fb-font, system-ui, sans-serif) !important;
font-size: 13px !important;
line-height: 1.2 !important;
cursor: pointer;
outline: none !important;
box-shadow: none;
min-height: 40px;
transition:
background-color 160ms ease,
border-color 160ms ease;
}
.finboard-feed-filter__btn:hover,
button.finboard-feed-filter__btn:hover {
background: var(--fb-bg-hover, #f5f7fa) !important;
outline: none !important;
}
.finboard-feed-filter__btn:focus,
.finboard-feed-filter__btn:focus-visible,
button.finboard-feed-filter__btn:focus,
button.finboard-feed-filter__btn:focus-visible {
outline: 2px solid var(--fb-gold-text, #8a6407) !important;
outline-offset: 2px !important;
}
.finboard-feed-filter.is-open .finboard-feed-filter__btn,
.finboard-feed-filter__btn[aria-expanded="true"] {
background: rgba(232,169,16,0.08) !important;
}
.finboard-feed-filter__icon {
width: 14px;
height: 14px;
flex-shrink: 0;
color: var(--fb-text-muted, #6b7280);
}
.finboard-feed-filter__current {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 240px;
}
.finboard-feed-filter__sort {
color: var(--fb-text, #0f172a);
}
.finboard-feed-filter__sep {
color: var(--fb-text-muted, #6b7280);
font-weight: 400;
}
.finboard-feed-filter__topic {
color: var(--fb-text-muted, #6b7280);
font-weight: 500;
}
.finboard-feed-filter__chev {
width: 14px;
height: 14px;
color: var(--fb-text-muted, #6b7280);
transition: transform 200ms cubic-bezier(.4,0,.2,1);
flex-shrink: 0;
}
.finboard-feed-filter.is-open .finboard-feed-filter__chev {
transform: rotate(180deg);
}
@media (max-width: 600px) {
.finboard-feed-filter__current {
display: none;
}
.finboard-feed-filter__btn {
padding: 8px 10px;
}
}
.finboard-feed-filter__panel {
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 50;
min-width: 280px;
max-width: 360px;
padding: 10px;
background: var(--fb-bg-card, #ffffff);
border: 1px solid var(--fb-border, rgba(0,0,0,0.10));
border-radius: 12px;
box-shadow:
0 12px 32px rgba(0,0,0,0.12),
0 4px 8px rgba(0,0,0,0.06);
display: flex;
flex-direction: column;
gap: 4px;
animation: finboard-feed-filter-in 140ms cubic-bezier(.4,0,.2,1);
}
@keyframes finboard-feed-filter-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.finboard-feed-filter__panel[hidden] {
display: none;
}
.finboard-feed-filter__group + .finboard-feed-filter__group {
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid var(--fb-border, rgba(0,0,0,0.06));
}
.finboard-feed-filter__group-title {
margin: 0 0 4px;
padding: 6px 10px 0;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--fb-text-muted, #6b7280);
}
.finboard-feed-filter__options {
display: flex;
flex-direction: column;
gap: 1px;
}
.finboard-feed-filter__option {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 10px;
border-radius: 8px;
color: var(--fb-text, #0f172a);
text-decoration: none;
font-size: 13px;
font-weight: 500;
line-height: 1.2;
transition: background-color 140ms ease, color 140ms ease;
}
.finboard-feed-filter__option:hover {
background: var(--fb-bg-hover, rgba(0,0,0,0.04));
color: var(--fb-text, #0f172a);
}
.finboard-feed-filter__option.is-active {
background: var(--fb-gold-dim, rgba(232,169,16,0.12));
color: var(--fb-gold-text, #8a6407);
font-weight: 700;
}
.finboard-feed-filter__option.is-active::after {
content: '✓';
font-size: 12px;
color: var(--fb-gold, #E8A910);
font-weight: 800;
}
html[data-finboard-theme="dark"] .finboard-feed-filter__panel {
background: var(--fb-bg-raised, #232838);
border-color: rgba(255,255,255,0.08);
box-shadow:
0 16px 36px rgba(0,0,0,0.50),
0 4px 10px rgba(0,0,0,0.30);
}
html[data-finboard-theme="dark"] .finboard-feed-filter__option:hover {
background: rgba(255,255,255,0.05);
}
html[data-finboard-theme="dark"] .finboard-feed-filter__option.is-active {
color: var(--fb-gold, #E8A910);
}
.finboard-sidebar { padding-bottom: 32px; }
.finboard-sidebar-card:last-child { margin-bottom: 24px; }
@media (max-width: 900px) {
.finboard-sidebar { padding-bottom: 16px; }
.finboard-sidebar-card:last-child { margin-bottom: 12px; }
}
.finboard-quiz__results-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 16px;
align-items: center;
}
.finboard-quiz__results-next {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-weight: 700;
letter-spacing: 0.01em;
}
.finboard-quiz__results-next:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(196, 146, 10, 0.25);
}
@media (max-width: 600px) {
.finboard-quiz__results-actions { flex-direction: column; align-items: stretch; gap: 8px; }
.finboard-quiz__results-actions .finboard-btn { width: 100%; }
}
.finboard-broker-rating__review:not(.finboard-comment) {
display: grid !important;
grid-template-columns: 1fr auto !important;
column-gap: 16px !important;
row-gap: 8px !important;
padding: 14px 16px !important;
margin-bottom: 10px !important;
align-items: start !important;
}
.finboard-broker-rating__review:not(.finboard-comment) .finboard-broker-rating__review-header {
grid-column: 1;
grid-row: 1;
margin-bottom: 0 !important;
}
.finboard-broker-rating__review:not(.finboard-comment) .finboard-broker-rating__review-text {
grid-column: 1 / -1 !important;
grid-row: 2;
margin: 0 !important;
}
.finboard-broker-rating__review:not(.finboard-comment) .finboard-broker-rating__discuss-link {
grid-column: 1 / -1;
grid-row: 3;
justify-self: start;
}
.finboard-broker-rating__review:not(.finboard-comment) .finboard-broker-rating__review-actions {
grid-column: 2 !important;
grid-row: 1 !important;
align-self: center !important;
margin-top: 0 !important;
display: grid !important;
grid-template-columns: 36px 28px 78px !important;
align-items: center !important;
gap: 4px !important;
justify-items: center !important;
}
.finboard-broker-rating__review:not(.finboard-comment) .finboard-broker-rating__review-actions > .finboard-vote-btn,
.finboard-broker-rating__review:not(.finboard-comment) .finboard-broker-rating__review-actions > .finboard-action-btn {
justify-self: stretch !important;
width: 100% !important;
}
.finboard-broker-rating__review:not(.finboard-comment) .finboard-broker-rating__review-actions > .finboard-broker-rating__review-score {
grid-column: 2 !important;
}
.finboard-broker-rating__review-actions .finboard-vote-btn,
.finboard-broker-rating__review-actions .finboard-action-btn,
.finboard-broker-rating__review-actions button.finboard-vote-btn:link,
.finboard-broker-rating__review-actions button.finboard-action-btn:link {
border: 1px solid rgba(0,0,0,0.08) !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
border-radius: 6px !important;
padding: 4px 8px !important;
color: var(--fb-text-muted, #6b7280) !important;
transition: background .15s, border-color .15s, color .15s !important;
}
.finboard-broker-rating__review-actions .finboard-vote-btn:focus,
.finboard-broker-rating__review-actions .finboard-vote-btn:focus-visible,
.finboard-broker-rating__review-actions .finboard-vote-btn:active,
.finboard-broker-rating__review-actions .finboard-action-btn:focus,
.finboard-broker-rating__review-actions .finboard-action-btn:focus-visible,
.finboard-broker-rating__review-actions .finboard-action-btn:active {
outline: none !important;
box-shadow: none !important;
border-color: rgba(196,146,10,0.30) !important;
}
.finboard-broker-rating__review-actions .finboard-vote-btn:hover,
.finboard-broker-rating__review-actions .finboard-action-btn:hover {
background: rgba(196,146,10,0.08) !important;
border-color: rgba(196,146,10,0.25) !important;
color: var(--fb-gold, #c4920a) !important;
}
.finboard-broker-rating__review-actions .finboard-vote-btn--active,
.finboard-broker-rating__review-actions .finboard-vote-btn--active:hover,
.finboard-broker-rating__review-actions .finboard-vote-btn--active:focus {
background: rgba(196,146,10,0.15) !important;
border-color: rgba(196,146,10,0.5) !important;
color: var(--fb-gold, #c4920a) !important;
}
.finboard-broker-rating__review-actions .finboard-vote-btn svg,
.finboard-broker-rating__review-actions .finboard-action-btn svg {
stroke: currentColor !important;
}
html[data-finboard-theme="dark"] .finboard-broker-rating__review-actions .finboard-vote-btn,
html[data-finboard-theme="dark"] .finboard-broker-rating__review-actions .finboard-action-btn {
border-color: rgba(255,255,255,0.08) !important;
color: rgba(232,232,240,0.65) !important;
}
@media (max-width: 540px) {
.finboard-broker-rating__review:not(.finboard-comment) {
grid-template-columns: 1fr !important;
}
.finboard-broker-rating__review:not(.finboard-comment) .finboard-broker-rating__review-actions {
grid-column: 1 !important;
grid-row: auto !important;
justify-self: start !important;
}
}
.finboard-portfolio__roi {
margin: 32px 0 24px;
padding: 24px;
background: rgba(255,255,255,0.02);
border: 1px solid var(--fb-border, rgba(0,0,0,0.08));
border-radius: 12px;
}
.finboard-portfolio__roi-title {
font-size: 18px;
font-weight: 700;
margin: 0 0 4px;
color: var(--fb-text, #0f172a);
}
.finboard-portfolio__roi-subtitle {
font-size: 12px;
color: var(--fb-text-muted, #6b7280);
margin: 0 0 16px;
line-height: 1.5;
}
.finboard-portfolio__roi-chart-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 16px;
}
.finboard-portfolio__roi-chart {
display: block;
width: 100%;
height: auto;
min-width: 480px;
max-width: 720px;
margin: 0 auto;
color: var(--fb-text-muted, #6b7280);
}
.finboard-portfolio__roi-chart polyline {
transition: opacity .15s, stroke-width .15s;
}
.finboard-portfolio__roi-chart polyline:hover {
opacity: 1 !important;
stroke-width: 3.5;
}
.finboard-portfolio__roi-legend {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 6px 12px;
list-style: none;
margin: 0 0 16px;
padding: 0;
}
.finboard-portfolio__roi-legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
line-height: 1.4;
padding: 4px 0;
}
.finboard-portfolio__roi-legend-swatch {
flex: 0 0 auto;
width: 10px;
height: 10px;
border-radius: 2px;
}
.finboard-portfolio__roi-legend-name {
flex: 1 1 auto;
color: var(--fb-text, #0f172a);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.finboard-portfolio__roi-legend-value {
flex: 0 0 auto;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.finboard-portfolio__roi-legend-value--up { color: #16a34a; }
.finboard-portfolio__roi-legend-value--down { color: #dc2626; }
.finboard-portfolio__roi-source {
font-size: 11px;
color: var(--fb-text-muted, #6b7280);
line-height: 1.5;
margin: 0;
padding-top: 12px;
border-top: 1px dashed rgba(0,0,0,0.08);
}
html[data-finboard-theme="dark"] .finboard-portfolio__roi {
background: rgba(255,255,255,0.03);
border-color: rgba(255,255,255,0.08);
}
html[data-finboard-theme="dark"] .finboard-portfolio__roi-chart text {
fill: rgba(232,232,240,0.65) !important;
}
html[data-finboard-theme="dark"] .finboard-portfolio__roi-chart line {
stroke: rgba(255,255,255,0.10) !important;
}
html[data-finboard-theme="dark"] .finboard-portfolio__roi-legend-name {
color: rgba(232,232,240,0.85);
}
html[data-finboard-theme="dark"] .finboard-portfolio__roi-source {
border-top-color: rgba(255,255,255,0.08);
}
.finboard-glossary-term {
border-bottom: 1px dotted var(--fb-gold, #c4920a);
cursor: help;
text-decoration: none;
color: inherit;
-webkit-text-fill-color: inherit;
transition: background-color .15s, border-bottom-color .15s;
padding: 0 1px;
border-radius: 2px;
}
.finboard-glossary-term:hover,
.finboard-glossary-term:focus {
background: rgba(196, 146, 10, 0.10);
border-bottom-color: var(--fb-gold, #c4920a);
outline: none;
}
.finboard-glossary-term:focus-visible {
outline: 2px solid rgba(196, 146, 10, 0.4);
outline-offset: 2px;
}
.finboard-glossary-tooltip {
position: absolute;
z-index: 999999;
max-width: 320px;
min-width: 240px;
padding: 12px 14px;
background: #1f1f24;
color: #ffffff;
border: 1px solid rgba(196, 146, 10, 0.3);
border-radius: 10px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
font-size: 13px;
line-height: 1.5;
opacity: 0;
transform: translateY(-4px);
transition: opacity .15s, transform .15s;
pointer-events: none;
}
.finboard-glossary-tooltip--visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.finboard-glossary-tooltip__title {
font-weight: 700;
color: var(--fb-gold, #c4920a);
margin-bottom: 4px;
font-size: 13px;
letter-spacing: 0.01em;
}
.finboard-glossary-tooltip__def {
color: #e8e8f0;
-webkit-text-fill-color: #e8e8f0;
line-height: 1.55;
}
.finboard-glossary-tooltip::after {
content: '';
position: absolute;
bottom: -7px;
left: 50%;
margin-left: -7px;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #1f1f24;
}
.finboard-glossary-tooltip--below::after {
bottom: auto;
top: -7px;
border-top: none;
border-bottom: 7px solid #1f1f24;
}
html[data-finboard-theme="light"] .finboard-glossary-tooltip,
.tic-page-wrapper .finboard-glossary-tooltip {
background: #ffffff;
border-color: rgba(196, 146, 10, 0.4);
color: #0f172a;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
html[data-finboard-theme="light"] .finboard-glossary-tooltip__def,
.tic-page-wrapper .finboard-glossary-tooltip__def {
color: #0f172a;
-webkit-text-fill-color: #0f172a;
}
html[data-finboard-theme="light"] .finboard-glossary-tooltip::after,
.tic-page-wrapper .finboard-glossary-tooltip::after {
border-top-color: #ffffff;
}
html[data-finboard-theme="light"] .finboard-glossary-tooltip--below::after,
.tic-page-wrapper .finboard-glossary-tooltip--below::after {
border-bottom-color: #ffffff;
border-top: none;
}
@media (max-width: 480px) {
.finboard-glossary-tooltip {
max-width: calc(100vw - 32px);
min-width: 0;
left: 16px !important;
right: 16px !important;
width: calc(100vw - 32px);
}
.finboard-glossary-tooltip::after { display: none; }
}
* Quiz UX 2026-05-06: progress + correct counter, feedback panel,
* Continue button, results-review explanation.
*
* The previous quiz auto-advanced 1.2-1.5s after answer reveal which was
* far too fast to read the correct answer, let alone learn from it. The
* new flow shows a feedback panel with the result + an educational
* explanation (when defined in quiz-config.json) and a Continue button
* the user controls. Timer was also bumped from 15s to 30s.
* ─────────────────────────────────────────────────────────────────── */
.finboard-quiz__stats {
display: inline-flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.finboard-quiz__correct {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
background: rgba(34, 197, 94, 0.12);
color: #22c55e;
border: 1px solid rgba(34, 197, 94, 0.25);
line-height: 1.3;
transition: transform 200ms ease, background 200ms ease;
}
html[data-finboard-theme="dark"] .finboard-quiz__correct {
background: rgba(34, 197, 94, 0.18);
color: #4ade80;
border-color: rgba(74, 222, 128, 0.35);
}
@keyframes finboard-correct-pulse {
0% { transform: scale(1); }
35% { transform: scale(1.15); background: rgba(34, 197, 94, 0.30); }
100% { transform: scale(1); }
}
.finboard-quiz__correct--pulse {
animation: finboard-correct-pulse 480ms ease-out;
}
.finboard-quiz__feedback {
margin-top: 18px;
padding: 0;
}
.finboard-quiz__feedback[hidden] {
display: none !important;
}
.finboard-quiz__feedback-inner {
border-radius: 14px;
padding: 18px 20px;
border: 1px solid var(--fb-border, rgba(0, 0, 0, 0.08));
background: var(--fb-card-bg, #fff);
display: flex;
flex-direction: column;
gap: 12px;
text-align: left;
animation: finboard-feedback-in 260ms ease-out;
}
@keyframes finboard-feedback-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
html[data-finboard-theme="dark"] .finboard-quiz__feedback-inner {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.08);
}
.finboard-quiz__feedback--correct {
border-left: 4px solid #22c55e;
}
.finboard-quiz__feedback--wrong {
border-left: 4px solid #ef4444;
}
.finboard-quiz__feedback--timeout {
border-left: 4px solid #f97316;
}
.finboard-quiz__feedback-label {
font-size: 17px;
font-weight: 700;
line-height: 1.3;
}
.finboard-quiz__feedback--correct .finboard-quiz__feedback-label { color: #16a34a; }
.finboard-quiz__feedback--wrong .finboard-quiz__feedback-label { color: #dc2626; }
.finboard-quiz__feedback--timeout .finboard-quiz__feedback-label { color: #ea580c; }
html[data-finboard-theme="dark"] .finboard-quiz__feedback--correct .finboard-quiz__feedback-label { color: #4ade80; }
html[data-finboard-theme="dark"] .finboard-quiz__feedback--wrong .finboard-quiz__feedback-label { color: #f87171; }
html[data-finboard-theme="dark"] .finboard-quiz__feedback--timeout .finboard-quiz__feedback-label { color: #fb923c; }
.finboard-quiz__feedback-explanation {
font-size: 14px;
line-height: 1.55;
color: var(--fb-text, #1f2937);
background: rgba(0, 0, 0, 0.025);
padding: 10px 12px;
border-radius: 8px;
border-left: 3px solid var(--fb-gold, #d4af37);
}
html[data-finboard-theme="dark"] .finboard-quiz__feedback-explanation {
color: rgba(255, 255, 255, 0.86);
background: rgba(255, 255, 255, 0.04);
}
.finboard-quiz__continue-btn {
align-self: flex-start;
margin-top: 4px;
min-width: 140px;
}
@media (max-width: 480px) {
.finboard-quiz__feedback-inner {
padding: 14px 14px;
}
.finboard-quiz__continue-btn {
align-self: stretch;
}
.finboard-quiz__stats {
gap: 8px;
}
.finboard-quiz__correct {
font-size: 12px;
padding: 2px 8px;
}
}
.finboard-quiz__result-explanation {
margin-top: 8px;
padding: 8px 12px;
border-radius: 8px;
border-left: 3px solid var(--fb-gold, #d4af37);
background: rgba(0, 0, 0, 0.025);
font-size: 13.5px;
line-height: 1.55;
color: var(--fb-text, #374151);
}
html[data-finboard-theme="dark"] .finboard-quiz__result-explanation {
color: rgba(255, 255, 255, 0.82);
background: rgba(255, 255, 255, 0.04);
}
html[data-finboard-theme="light"] .finboard-news__filter.finboard-news__filter--active,
html[data-finboard-theme="light"] .finboard-news__filter.active,
html .tic-page-wrapper .finboard-news__filter--active,
html .tic-page-wrapper .finboard-news__filter.active,
html .finboard.finboard--light .finboard-news__filter--active,
html .finboard.finboard--light .finboard-news__filter.active {
background: var(--fb-gold, #c4920a) !important;
color: #000 !important;
-webkit-text-fill-color: #000 !important;
border-color: var(--fb-gold, #c4920a) !important;
}
html[data-finboard-theme="dark"] .finboard-news__filter.finboard-news__filter--active,
html[data-finboard-theme="dark"] .finboard-news__filter.active,
html .finboard.finboard--dark .finboard-news__filter--active,
html .finboard.finboard--dark .finboard-news__filter.active {
background: var(--fb-gold) !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
border-color: var(--fb-gold) !important;
}
.finboard-quiz button.finboard-quiz__option-btn,
.finboard-quiz__options button.finboard-quiz__option-btn {
display: block;
width: 100%;
padding: 14px 18px;
margin: 0 0 10px 0;
text-align: center;
font-size: 15px;
font-weight: 500;
line-height: 1.4;
border: 1.5px solid var(--fb-border, rgba(0,0,0,.12)) !important;
border-radius: 12px !important;
background: var(--fb-bg-card, rgba(255,255,255,.02)) !important;
color: var(--fb-text, #1f2937) !important;
-webkit-text-fill-color: var(--fb-text, #1f2937) !important;
cursor: pointer;
transition:
background-color 180ms ease,
border-color 180ms ease,
color 180ms ease,
transform 180ms ease,
box-shadow 180ms ease;
}
html[data-finboard-theme="dark"] .finboard-quiz button.finboard-quiz__option-btn,
html[data-finboard-theme="dark"] .finboard-quiz__options button.finboard-quiz__option-btn {
background: rgba(255,255,255,.03) !important;
color: rgba(255,255,255,.92) !important;
-webkit-text-fill-color: rgba(255,255,255,.92) !important;
border-color: rgba(255,255,255,.10) !important;
}
.finboard-quiz button.finboard-quiz__option-btn:hover:not(:disabled) {
border-color: var(--fb-gold, #d4af37) !important;
background: rgba(212,175,55,.08) !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
html[data-finboard-theme="dark"] .finboard-quiz button.finboard-quiz__option-btn:hover:not(:disabled) {
background: rgba(212,175,55,.10) !important;
box-shadow: 0 4px 12px rgba(0,0,0,.30);
}
.finboard-quiz button.finboard-quiz__option-btn:focus-visible {
outline: 2px solid var(--fb-gold, #d4af37) !important;
outline-offset: 2px;
}
.finboard-quiz button.finboard-quiz__option-btn--selected,
.finboard-quiz button.finboard-quiz__option-btn.finboard-quiz__option-btn--selected {
border-color: var(--fb-gold, #d4af37) !important;
background: rgba(212,175,55,.14) !important;
}
.finboard-quiz button.finboard-quiz__option-btn.correct {
border-color: #22c55e !important;
background: rgba(34,197,94,.18) !important;
color: #15803d !important;
-webkit-text-fill-color: #15803d !important;
font-weight: 700;
}
html[data-finboard-theme="dark"] .finboard-quiz button.finboard-quiz__option-btn.correct {
color: #4ade80 !important;
-webkit-text-fill-color: #4ade80 !important;
background: rgba(34,197,94,.18) !important;
}
.finboard-quiz button.finboard-quiz__option-btn.incorrect {
border-color: #ef4444 !important;
background: rgba(239,68,68,.15) !important;
color: #b91c1c !important;
-webkit-text-fill-color: #b91c1c !important;
font-weight: 600;
}
html[data-finboard-theme="dark"] .finboard-quiz button.finboard-quiz__option-btn.incorrect {
color: #fca5a5 !important;
-webkit-text-fill-color: #fca5a5 !important;
background: rgba(239,68,68,.18) !important;
}
.finboard-quiz button.finboard-quiz__option-btn.highlight-correct {
border-color: #22c55e !important;
background: rgba(34,197,94,.10) !important;
color: #15803d !important;
-webkit-text-fill-color: #15803d !important;
font-weight: 600;
}
html[data-finboard-theme="dark"] .finboard-quiz button.finboard-quiz__option-btn.highlight-correct {
color: #4ade80 !important;
-webkit-text-fill-color: #4ade80 !important;
background: rgba(34,197,94,.12) !important;
}
.finboard-quiz button.finboard-quiz__option-btn:disabled:not(.correct):not(.incorrect):not(.highlight-correct):not(.finboard-quiz__option-btn--selected) {
opacity: 0.38 !important;
filter: grayscale(0.4);
cursor: default;
pointer-events: none;
}
.finboard-quiz button.finboard-quiz__option-btn:disabled.correct,
.finboard-quiz button.finboard-quiz__option-btn:disabled.incorrect,
.finboard-quiz button.finboard-quiz__option-btn:disabled.highlight-correct,
.finboard-quiz button.finboard-quiz__option-btn:disabled.finboard-quiz__option-btn--selected {
opacity: 1 !important;
filter: none;
}
.finboard-quiz__viewport .finboard-quiz__question {
font-size: 18px;
font-weight: 600;
line-height: 1.45;
margin: 14px 0 22px 0;
color: var(--fb-text);
}
@media (min-width: 700px) {
.finboard-quiz__viewport .finboard-quiz__question {
font-size: 21px;
margin: 16px 0 26px 0;
}
}
.finboard-quiz__viewport {
position: relative;
border-radius: 16px;
box-shadow: 0 4px 22px rgba(0,0,0,.07);
}
html[data-finboard-theme="dark"] .finboard-quiz__viewport {
box-shadow: 0 6px 28px rgba(0,0,0,.45);
}
.finboard-quiz__viewport::before {
content: '';
position: absolute;
top: 0;
left: 24px;
right: 24px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--fb-gold, #d4af37), transparent);
opacity: 0.45;
pointer-events: none;
}
.finboard-quiz__streak-inline {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
background: linear-gradient(135deg, rgba(255,107,53,.16), rgba(248,200,80,.22));
color: #ea580c;
border: 1px solid rgba(255,107,53,.32);
line-height: 1.3;
animation: finboard-streak-glow 1.6s ease-in-out infinite;
}
html[data-finboard-theme="dark"] .finboard-quiz__streak-inline {
color: #fb923c;
background: linear-gradient(135deg, rgba(255,107,53,.20), rgba(248,200,80,.18));
border-color: rgba(255,107,53,.40);
}
@keyframes finboard-streak-glow {
0%, 100% { box-shadow: 0 0 0 rgba(255,107,53,0); }
50% { box-shadow: 0 0 14px rgba(255,107,53,.40); }
}
.finboard-quiz__plus-one {
position: fixed;
pointer-events: none;
font-size: 18px;
font-weight: 800;
color: #16a34a;
opacity: 0;
transform: translate(-50%, 0);
animation: finboard-plus-one-pop 1100ms cubic-bezier(.4, 0, .2, 1) forwards;
z-index: 1000;
text-shadow: 0 1px 2px rgba(0,0,0,.10);
white-space: nowrap;
}
.finboard-quiz__plus-one--pts-2 {
font-size: 19px;
color: #f59e0b;
}
.finboard-quiz__plus-one--pts-3 {
font-size: 21px;
color: var(--fb-gold, #E8A910);
text-shadow: 0 1px 2px rgba(0,0,0,.10), 0 0 12px rgba(232,169,16,.35);
}
html[data-finboard-theme="dark"] .finboard-quiz__plus-one {
color: #4ade80;
}
html[data-finboard-theme="dark"] .finboard-quiz__plus-one--pts-2 {
color: #fbbf24;
}
html[data-finboard-theme="dark"] .finboard-quiz__plus-one--pts-3 {
color: #f0bd3e;
}
@keyframes finboard-plus-one-pop {
0% { opacity: 0; transform: translate(-50%, 4px) scale(0.85); }
18% { opacity: 1; transform: translate(-50%, -4px) scale(1.20); }
55% { opacity: 1; transform: translate(-50%, -22px) scale(1.05); }
100% { opacity: 0; transform: translate(-50%, -38px) scale(0.95); }
}
.finboard-quiz__result-meta {
display: inline-block;
margin-left: 6px;
font-size: 11px;
font-weight: 600;
color: var(--fb-text-muted);
letter-spacing: 0.02em;
padding: 2px 7px;
border-radius: 999px;
background: rgba(0,0,0,0.04);
border: 1px solid var(--fb-border);
vertical-align: middle;
}
.finboard-quiz__result-meta--fast {
color: var(--fb-gold, #E8A910);
background: rgba(232,169,16,0.10);
border-color: rgba(232,169,16,0.25);
}
.finboard-quiz__question--enter {
animation: finboard-question-enter 280ms cubic-bezier(.4, 0, .2, 1);
}
.finboard-quiz__options--enter {
animation: finboard-question-enter 320ms cubic-bezier(.4, 0, .2, 1);
}
@keyframes finboard-question-enter {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.fb-ask-hero {
position: relative;
margin: 0 0 22px;
padding: 24px 32px 22px;
background: linear-gradient(
135deg,
var(--fb-bg-card) 0%,
color-mix(in srgb, var(--fb-gold, #c4920a) 6%, var(--fb-bg-card)) 100%
);
border: 1px solid var(--fb-border);
border-radius: var(--fb-radius);
overflow: hidden;
}
.fb-ask-hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent 0%, var(--fb-gold) 30%, var(--fb-gold) 70%, transparent 100%);
opacity: 0.7;
}
.fb-ask-hero__inner {
max-width: 620px;
}
.fb-ask-hero__eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--fb-gold);
margin-bottom: 12px;
}
.fb-ask-hero__title {
font-family: var(--fb-font-display);
font-size: 28px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--fb-text);
margin: 0;
}
.fb-ask-hero__sub {
font-size: 15px;
line-height: 1.55;
color: var(--fb-text-secondary);
margin: 0 0 18px;
}
.fb-ask-hero__stats {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 18px 32px;
}
.fb-ask-hero__stat {
font-size: 13px;
color: var(--fb-text-muted);
line-height: 1.3;
display: flex;
flex-direction: column;
gap: 2px;
}
.fb-ask-hero__stat strong {
font-family: var(--fb-font-display);
font-size: 22px;
font-weight: 800;
color: var(--fb-gold);
letter-spacing: -0.01em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
.fb-ask-hero { padding: 18px 20px 16px; }
.fb-ask-hero__title { font-size: 22px; }
}
.fb-ask-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 28px;
align-items: start;
}
@media (max-width: 920px) {
.fb-ask-layout {
grid-template-columns: 1fr;
}
.fb-ask-tips {
order: -1;
}
}
@media (min-width: 921px) {
.fb-ask-tips[data-mobile-wrap] > .fb-ask-tips__mobile-summary {
display: none;
}
}
@media (max-width: 920px) {
.fb-ask-tips[data-mobile-wrap] {
background: transparent;
border: none;
padding: 0;
position: static;
}
.fb-ask-tips[data-mobile-wrap][open] {
background: var(--fb-bg-inset);
border: 1px solid var(--fb-border);
padding: 18px 18px 14px;
}
.fb-ask-tips__mobile-summary {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: var(--fb-bg-card);
border: 1px solid var(--fb-border);
border-radius: var(--fb-radius-sm);
cursor: pointer;
font-family: var(--fb-font-display);
font-size: 13px;
font-weight: 700;
color: var(--fb-text);
letter-spacing: 0.02em;
list-style: none;
transition: background var(--fb-transition), border-color var(--fb-transition);
}
.fb-ask-tips__mobile-summary::-webkit-details-marker { display: none; }
.fb-ask-tips__mobile-summary::marker { content: ""; }
.fb-ask-tips__mobile-summary svg {
color: var(--fb-gold);
flex-shrink: 0;
}
.fb-ask-tips__mobile-summary::after {
content: "+";
margin-left: auto;
font-size: 20px;
font-weight: 400;
line-height: 1;
color: var(--fb-text-muted);
transition: transform var(--fb-transition);
}
.fb-ask-tips[data-mobile-wrap][open] > .fb-ask-tips__mobile-summary {
margin-bottom: 14px;
background: transparent;
border-color: transparent;
padding: 0;
}
.fb-ask-tips[data-mobile-wrap][open] > .fb-ask-tips__mobile-summary::after {
content: "−";
}
.fb-ask-tips[data-mobile-wrap] > .fb-ask-tips__title {
display: none;
}
.fb-ask-tips__mobile-summary:hover,
.fb-ask-tips__mobile-summary:focus-visible {
background: var(--fb-bg-hover);
border-color: var(--fb-border-gold);
color: var(--fb-gold);
outline: none;
}
}
.fb-ask-form {
margin: 0;
}
.fb-ask-form .fb-ask-step {
border: none;
padding: 0;
margin: 0 0 28px;
}
.fb-ask-step__title {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--fb-font-display);
font-size: 16px;
font-weight: 700;
color: var(--fb-text);
margin: 0 0 6px;
padding: 0;
letter-spacing: -0.005em;
}
.fb-ask-step__num {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--fb-gold-dim);
color: var(--fb-gold);
font-size: 13px;
font-weight: 800;
font-variant-numeric: tabular-nums;
border: 1px solid var(--fb-border-gold);
}
.fb-ask-step__title-meta {
font-weight: 500;
color: var(--fb-text-muted);
font-size: 13px;
margin-left: 2px;
}
.fb-ask-step__help {
font-size: 13px;
line-height: 1.5;
color: var(--fb-text-muted);
margin: 0 0 14px;
padding-left: 36px;
}
.fb-ask-step__help code {
background: var(--fb-bg-inset);
border: 1px solid var(--fb-border);
border-radius: 4px;
padding: 1px 6px;
font-size: 12px;
color: var(--fb-text-secondary);
font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}
button.fb-ask-step__help-tip,
.fb-ask-step__help-tip {
flex-shrink: 0;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 20px !important;
height: 20px !important;
margin: 0 0 0 -4px !important;
padding: 0 !important;
font-size: 0 !important;
line-height: 1 !important;
font-family: inherit !important;
font-weight: 400 !important;
letter-spacing: normal !important;
text-transform: none !important;
text-shadow: none !important;
background: var(--fb-bg-inset) !important;
background-color: var(--fb-bg-inset) !important;
border: 1px solid var(--fb-border) !important;
border-radius: 50% !important;
color: var(--fb-text-muted) !important;
-webkit-text-fill-color: var(--fb-text-muted) !important;
box-shadow: none !important;
-webkit-appearance: none !important;
appearance: none !important;
cursor: pointer;
position: relative;
outline: none !important;
transition: background var(--fb-transition), border-color var(--fb-transition), color var(--fb-transition);
}
button.fb-ask-step__help-tip:hover,
button.fb-ask-step__help-tip:focus-visible,
.fb-ask-step__help-tip:hover,
.fb-ask-step__help-tip:focus-visible {
background: var(--fb-gold-dim) !important;
background-color: var(--fb-gold-dim) !important;
border-color: var(--fb-border-gold) !important;
color: var(--fb-gold) !important;
-webkit-text-fill-color: var(--fb-gold) !important;
}
button.fb-ask-step__help-tip:focus-visible,
.fb-ask-step__help-tip:focus-visible {
box-shadow: 0 0 0 2px var(--fb-gold-dim) !important;
}
.fb-ask-step__help-tip svg {
display: block;
flex-shrink: 0;
}
.fb-ask-step__help-tip__popover {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 20;
min-width: 200px;
max-width: 280px;
padding: 10px 12px;
background: var(--fb-bg-card);
border: 1px solid var(--fb-border-gold);
border-radius: var(--fb-radius-sm);
box-shadow: var(--fb-neu-out-sm), 0 6px 18px rgba(0,0,0,0.14);
font-size: 12.5px;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0;
color: var(--fb-text-secondary);
text-align: left;
text-transform: none;
white-space: normal;
pointer-events: none;
}
@keyframes fbAskHelpTipFadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.fb-ask-step__help-tip__popover em {
color: var(--fb-text);
font-style: italic;
}
.fb-ask-step__help-tip__popover::before,
.fb-ask-step__help-tip__popover::after {
content: "";
position: absolute;
bottom: 100%;
width: 0;
height: 0;
border-style: solid;
}
.fb-ask-step__help-tip__popover::before {
left: 6px;
border-width: 0 7px 7px 7px;
border-color: transparent transparent var(--fb-border-gold) transparent;
}
.fb-ask-step__help-tip__popover::after {
left: 7px;
border-width: 0 6px 6px 6px;
border-color: transparent transparent var(--fb-bg-card) transparent;
}
.fb-ask-step__help-tip:hover .fb-ask-step__help-tip__popover,
.fb-ask-step__help-tip:focus-visible .fb-ask-step__help-tip__popover,
.fb-ask-step__help-tip.is-open .fb-ask-step__help-tip__popover {
display: block;
pointer-events: auto;
animation: fbAskHelpTipFadeIn 160ms ease-out;
}
@media (max-width: 480px) {
.fb-ask-step__help-tip__popover {
min-width: 180px;
max-width: calc(100vw - 60px);
}
}
.fb-ask-topic-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
}
.fb-ask-topic-card__input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.fb-ask-topic-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: var(--fb-bg-card);
border: 1px solid var(--fb-border);
border-radius: var(--fb-radius-sm);
cursor: pointer;
transition: background var(--fb-transition), border-color var(--fb-transition), transform var(--fb-transition), box-shadow var(--fb-transition);
}
.fb-ask-topic-card:hover {
background: var(--fb-bg-hover);
border-color: var(--fb-border-gold);
transform: translateY(-1px);
}
.fb-ask-topic-card__input:checked + .fb-ask-topic-card {
background: var(--fb-gold-dim);
border-color: var(--fb-gold);
box-shadow: 0 0 0 1px var(--fb-gold) inset, 0 4px 12px rgba(232,169,16,0.10);
}
.fb-ask-topic-card__input:focus-visible + .fb-ask-topic-card {
outline: 2px solid var(--fb-gold);
outline-offset: 2px;
}
.fb-ask-topic-card__icon {
flex-shrink: 0;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--fb-bg-inset);
border-radius: var(--fb-radius-sm);
color: var(--fb-gold);
}
.fb-ask-topic-card__input:checked + .fb-ask-topic-card .fb-ask-topic-card__icon {
background: var(--fb-gold);
color: #000;
}
.fb-ask-topic-card__icon svg { width: 18px; height: 18px; }
.fb-ask-topic-card__body {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.fb-ask-topic-card__label {
font-size: 14px;
font-weight: 700;
color: var(--fb-text);
line-height: 1.2;
}
.fb-ask-topic-card__sub {
font-size: 11px;
color: var(--fb-text-muted);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fb-ask-submit {
display: inline-flex !important;
align-items: center;
gap: 8px;
margin-top: 8px;
padding: 12px 24px !important;
font-size: 14px !important;
}
.fb-ask-tips {
background: var(--fb-bg-inset);
border: 1px solid var(--fb-border);
border-radius: var(--fb-radius);
padding: 18px 18px 14px;
position: sticky;
top: 80px;
}
.fb-ask-tips__title {
font-family: var(--fb-font-display);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fb-gold);
margin: 0 0 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--fb-border);
}
.fb-ask-tips__card {
margin: 0 0 10px;
padding: 0;
border: none;
background: transparent;
}
.fb-ask-tips__card > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
color: var(--fb-text);
padding: 8px 0;
border-radius: 4px;
transition: color var(--fb-transition);
}
.fb-ask-tips__card > summary::-webkit-details-marker { display: none; }
.fb-ask-tips__card > summary::marker { content: ''; }
.fb-ask-tips__card > summary svg {
color: var(--fb-gold);
flex-shrink: 0;
}
.fb-ask-tips__card > summary::after {
content: "+";
margin-left: auto;
font-size: 18px;
font-weight: 400;
line-height: 1;
color: var(--fb-text-muted);
transition: transform var(--fb-transition);
}
.fb-ask-tips__card[open] > summary::after {
content: "−";
}
.fb-ask-tips__card > summary:hover {
color: var(--fb-gold);
}
.fb-ask-tips__card > p {
margin: 0 0 12px;
padding-left: 22px;
font-size: 12.5px;
line-height: 1.55;
color: var(--fb-text-secondary);
}
.fb-ask-tips__card > p em {
color: var(--fb-text);
font-style: italic;
}
.fb-ask-tips__foot {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--fb-border);
}
.fb-ask-tips__foot-eyebrow {
display: block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fb-gold);
margin-bottom: 4px;
}
.fb-ask-tips__foot-text {
margin: 0;
font-size: 12px;
line-height: 1.5;
color: var(--fb-text-muted);
}
.fb-ask-tips__foot-text strong {
color: var(--fb-gold);
font-weight: 700;
}
@media (max-width: 920px) {
.fb-ask-tips {
position: static;
}
}
.fb-ask-hint-row {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
flex-wrap: wrap;
}
.fb-ask-hint-count {
font-size: 11px;
color: var(--fb-text-muted);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
white-space: nowrap;
}
.fb-ask-preview-card.finboard-post-card {
position: relative;
box-shadow: var(--fb-neu-out-sm);
border-style: dashed;
border-color: var(--fb-border-gold);
pointer-events: none;
}
.finboard .fb-ask-preview-card.finboard-post-card[data-topic]::before {
display: none !important;
}
.fb-ask-preview-ribbon {
position: absolute;
top: 8px;
right: 10px;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.16em;
color: var(--fb-gold);
background: var(--fb-gold-dim);
border: 1px solid var(--fb-border-gold);
padding: 2px 7px;
border-radius: var(--fb-radius-pill);
z-index: 2;
pointer-events: none;
}
.fb-ask-preview-card.finboard-post-card .finboard-post-title,
.fb-ask-preview-card.finboard-post-card .finboard-post-preview {
pointer-events: auto;
}
.fb-ask-preview-placeholder {
font-style: italic;
color: var(--fb-text-muted);
font-weight: 500;
}
.fb-ask-preview-image {
margin: 10px 0 0;
padding: 0;
border-radius: var(--fb-radius-sm);
overflow: hidden;
background: var(--fb-bg-inset);
border: 1px solid var(--fb-border);
line-height: 0;
}
.fb-ask-preview-image img {
display: block;
width: 100%;
max-height: 220px;
height: auto;
object-fit: contain;
margin: 0 auto;
}
[hidden].fb-ask-preview-image {
display: none;
}
.fb-ask-preview-card.finboard-post-card .finboard-post-title {
color: var(--fb-text);
cursor: default;
}
@media (min-width: 901px) {
.finboard-sidebar {
background: var(--fb-bg-inset);
border: 1px solid var(--fb-border);
border-radius: var(--fb-radius);
padding: 12px 12px 0;
box-shadow:
inset 0 1px 0 rgba(0, 0, 0, 0.05),
inset 0 -1px 0 rgba(255, 255, 255, 0.02);
}
.finboard-sidebar::after {
content: "";
display: block;
position: sticky;
bottom: 0;
margin: -48px -12px 0;
height: 48px;
pointer-events: none;
z-index: 1;
background: linear-gradient(
to bottom,
transparent 0%,
var(--fb-bg-inset) 92%
);
border-bottom-left-radius: calc(var(--fb-radius) - 1px);
border-bottom-right-radius: calc(var(--fb-radius) - 1px);
}
[data-finboard-theme="light"] .finboard-sidebar::after {
background: linear-gradient(
to bottom,
transparent 0%,
rgba(0, 0, 0, 0.025) 92%
);
}
.finboard-wrap--sidebar-collapsed .finboard-sidebar::after {
display: none;
}
[data-finboard-theme="light"] .finboard-sidebar {
background: rgba(0, 0, 0, 0.025);
border-color: rgba(0, 0, 0, 0.08);
box-shadow:
inset 0 1px 0 rgba(0, 0, 0, 0.04),
inset 0 -1px 0 rgba(255, 255, 255, 0.7);
}
.finboard-sidebar > .finboard-sidebar-card {
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
margin-bottom: 0;
padding: 12px 4px;
border-bottom: 1px solid var(--fb-border);
transition: none;
}
.finboard-sidebar > .finboard-sidebar-card:first-of-type {
padding-top: 4px;
}
.finboard-sidebar > .finboard-sidebar-card:last-of-type {
padding-bottom: 4px;
border-bottom: none;
}
.finboard-sidebar > .finboard-sidebar-card:hover {
background: transparent;
border-color: transparent transparent var(--fb-border) transparent;
box-shadow: none;
}
[data-finboard-theme="light"] .finboard-sidebar > .finboard-sidebar-card {
border-bottom-color: rgba(0, 0, 0, 0.07);
}
[data-finboard-theme="light"] .finboard-sidebar > .finboard-sidebar-card:hover {
background: transparent;
box-shadow: none;
}
.finboard-sidebar > .finboard-sidebar-card:first-of-type {
background: var(--fb-bg-card);
border: 1px solid var(--fb-border);
border-radius: var(--fb-radius-sm);
padding: 12px;
margin-bottom: 4px;
border-bottom: 1px solid var(--fb-border);
}
[data-finboard-theme="light"] .finboard-sidebar > .finboard-sidebar-card:first-of-type {
background: #ffffff;
border-color: rgba(0, 0, 0, 0.08);
}
.finboard-wrap--sidebar-collapsed .finboard-sidebar {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
}
}
.finboard .finboard-feed-toolbar--rail {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
flex-wrap: nowrap;
min-width: 0;
}
.finboard .finboard-search-bar--icon {
flex: 0 0 auto !important;
min-width: 0 !important;
width: 36px !important;
height: 36px !important;
min-height: 36px !important;
max-height: 36px !important;
padding: 0 !important;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--fb-bg-card);
border: 1px solid var(--fb-border-strong);
border-radius: var(--fb-radius-pill);
color: var(--fb-text-muted);
cursor: pointer;
transition: background var(--fb-transition), border-color var(--fb-transition), color var(--fb-transition);
box-shadow: var(--fb-neu-out-sm);
font-size: 0;
line-height: 0;
gap: 0;
-webkit-appearance: none;
appearance: none;
}
.finboard .finboard-search-bar--icon:hover,
.finboard .finboard-search-bar--icon:focus-visible {
background: var(--fb-bg-hover);
border-color: var(--fb-border-gold);
color: var(--fb-gold);
outline: none;
}
.finboard .finboard-search-bar--icon:focus-visible {
box-shadow: 0 0 0 3px var(--fb-gold-dim);
}
.finboard .finboard-search-bar--icon svg {
width: 16px;
height: 16px;
display: block;
flex-shrink: 0;
}
.finboard .finboard-topic-rail {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 auto;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scrollbar-width: none;
padding: 2px 0;
}
.finboard .finboard-topic-rail::-webkit-scrollbar { display: none; }
.finboard .finboard-topic-rail .finboard-topic-pill {
flex-shrink: 0;
scroll-snap-align: start;
padding: 7px 14px;
font-size: 12.5px;
font-weight: 600;
border-radius: var(--fb-radius-pill);
color: var(--fb-text-secondary);
background: var(--fb-bg-card);
border: 1px solid var(--fb-border-strong);
transition:
background var(--fb-transition),
border-color var(--fb-transition),
color var(--fb-transition);
text-decoration: none;
white-space: nowrap;
line-height: 1.2;
}
.finboard .finboard-topic-rail .finboard-topic-pill:hover {
background: var(--fb-bg-hover);
border-color: var(--fb-border-gold);
color: var(--fb-text);
}
.finboard .finboard-topic-rail .finboard-topic-pill--active,
.finboard .finboard-topic-rail .finboard-topic-pill[aria-current="page"] {
background: var(--fb-gold);
color: #0f0f17;
border-color: var(--fb-gold);
-webkit-text-fill-color: #0f0f17;
}
.finboard .finboard-profile-equity {
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}
.finboard .finboard-profile-equity__new-post {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px 7px 11px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1;
color: var(--fb-gold);
background: var(--fb-gold-dim);
border: 1px solid var(--fb-border-gold);
border-radius: var(--fb-radius-pill);
text-decoration: none;
transition: background var(--fb-transition), color var(--fb-transition), transform var(--fb-transition);
-webkit-text-fill-color: var(--fb-gold);
white-space: nowrap;
}
.finboard .finboard-profile-equity__new-post:hover,
.finboard .finboard-profile-equity__new-post:focus-visible {
background: var(--fb-gold);
color: #0f0f17;
-webkit-text-fill-color: #0f0f17;
transform: translateY(-1px);
outline: none;
}
.finboard .finboard-profile-equity__new-post:focus-visible {
box-shadow: 0 0 0 3px var(--fb-gold-dim);
}
.finboard .finboard-profile-equity__new-post svg {
flex-shrink: 0;
display: block;
}
@media (max-width: 600px) {
.finboard .finboard-feed-toolbar--rail {
gap: 8px;
}
.finboard .finboard-search-bar--icon {
width: 44px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
}
.finboard .finboard-search-bar--icon svg {
width: 18px;
height: 18px;
}
.finboard .finboard-topic-rail .finboard-topic-pill {
padding: 6px 12px;
font-size: 12px;
}
}