/* ============================================================
SUVI — Design System 2026
Senior UI overhaul. One clean file, no conflicts.
Rules: CSS-only. No HTML/JS/template changes.
No display:flex on anchors. No position overrides.
No font-size on inline icons. Colorful, gentle, modern.
============================================================ */
/* ── Design tokens ────────────────────────────────────────── */
:root {
/* Surfaces — warm off-white "paper", not cold slate */
--ds-bg: #F7F6F3;
--ds-surface: #FFFFFF;
--ds-surface2: #F0EEE8;
/* Text — warm slate body, navy headings */
--ds-text: #232B36;
--ds-heading: #1E3A8A;
--ds-muted: #5B6573;
--ds-subtle: #8A8F99;
/* Brand — logo navy + logo green (from sister-brand guidelines) */
--ds-navy: #1E3A8A;
--ds-navy-lt: #16306E;
--primary-tint: rgba(30,58,138,0.07);
--primary-tint-hi: rgba(30,58,138,0.12);
/* Borders — warm hairlines */
--ds-border: #E6E2D9;
--ds-border-lt: #EDEAE3;
/* Semantic — prosperity green warmed toward gold (growth + wealth, timeless, not neon) */
--ds-green: #4E8A35;
--ds-green-dk: #3A6B27;
--ds-green-lt: #A8C66A; /* light warm green for accents on navy/dark backgrounds */
--ds-green-deep:#2E5A26; /* deep prosperity green — leads hero & dark sections */
--ds-gold: #C28B2B; /* wealth gold — accent on light backgrounds */
--ds-gold-lt: #E3BD63; /* bright wealth gold — headline/accent on dark backgrounds */
--ds-red: #CF4A3C;
--ds-amber: #A86A22;
/* Highlight — saffron used only as faint warmth */
--ds-highlight: #FBF3E4;
/* Icon palette — restrained, institutional (no electric blue / purple / pink).
Navy + green carry the brand; slate/saffron/teal are quiet supporting tones. */
--ic-blue: #1E3A8A;
--ic-purple: #3F4D78;
--ic-amber: #A86A22;
--ic-green: #4E8A35;
--ic-pink: #8A4A55;
--ic-red: #CF4A3C;
--ic-indigo: #2A3F6B;
--ic-teal: #0F766E;
--ic-gray: #5B6573;
--ic-navy: #1E3A8A;
--ic-orange: #A86A22;
--ic-cyan: #1F6F86;
--ic-rose: #9F5560;
--ic-violet: #3F4D78;
--ic-lime: #4E7A2E;
/* Radii */
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--r-xl: 18px;
/* Shadow */
--sh-sm: 0 1px 3px rgba(0,0,0,0.06);
--sh-md: 0 4px 16px rgba(0,0,0,0.08);
--sh-lg: 0 8px 30px rgba(0,0,0,0.10);
}
/* ── Reset helpers ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* ── Base ─────────────────────────────────────────────────── */
body {
font-family: 'Hanken Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
background-color: var(--ds-bg) !important;
color: var(--ds-text) !important;
font-size: 14px !important;
line-height: 1.6 !important;
-webkit-font-smoothing: antialiased;
font-variant-numeric: tabular-nums;
}
/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--ds-bg); }
::-webkit-scrollbar-thumb { background: var(--ds-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ds-muted); }
/* ── Typography ───────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 {
font-family: 'Hanken Grotesk', system-ui, sans-serif !important;
color: var(--ds-heading);
font-weight: 600 !important;
line-height: 1.25 !important;
letter-spacing: -0.01em;
}
h1 { font-size: 26px !important; }
h2 { font-size: 21px !important; }
h3 { font-size: 17px !important; }
h4 { font-size: 15px !important; }
h5 { font-size: 13px !important; }
h6 { font-size: 12px !important; }
/* Headings on dark backgrounds — override the base rule */
.header-primary h1,.header-primary h2,.header-primary h3,
.header-primary h4,.header-primary h5,.header-primary h6,
.form-header h1,.form-header h2,.form-header h3,
.form-header h4,.form-header h5,.form-header h6,
.form-header-modal h1,.form-header-modal h2,.form-header-modal h3,
.form-header-modal h4,.form-header-modal h5,.form-header-modal h6,
footer.footer h1,footer.footer h2,footer.footer h3,
footer.footer h4,footer.footer h5,footer.footer h6 {
color: #ffffff !important;
}
/* Utility color classes */
.white-text-color,
.text-white { color: #ffffff !important; }
.text-gray-dark,
.color-dimgray { color: var(--ds-muted) !important; }
.text-success { color: var(--ds-green) !important; }
.text-danger, .text-red { color: var(--ds-red) !important; }
.text-primary { color: var(--ds-navy) !important; }
.text-muted { color: var(--ds-muted) !important; }
.text-bold { font-weight: 600 !important; }
p { color: var(--ds-text); line-height: 1.65; }
a { color: var(--ds-navy); transition: color 150ms ease-out; }
a:hover { color: var(--ds-navy-lt); text-decoration: none; }
/* Links on dark/navy backgrounds */
.article-user-info .profile-content a,
.header-primary a { color: rgba(255,255,255,0.85) !important; }
.article-user-info .profile-content a:hover,
.header-primary a:hover { color: #fff !important; text-decoration: none !important; }
/* HR */
hr, hr.hr-border, .article-profile-hr {
border-top: 1px solid var(--ds-border) !important;
border-bottom: none !important;
margin: 12px 0 !important;
}
/* ── Layout ───────────────────────────────────────────────── */
.container {
max-width: 1120px !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
.main-container {
background-color: var(--ds-bg) !important;
min-height: calc(100vh - 56px);
padding-bottom: 72px;
}
/* ── Navbar ───────────────────────────────────────────────── */
nav.navbar.top-navbar,
.navbar {
background-color: var(--ds-surface) !important;
border-bottom: 1px solid var(--ds-border) !important;
box-shadow: none !important;
min-height: 56px !important;
padding: 0 !important;
}
.navbar-header { min-height: 56px; }
.navbar .navbar-nav > li > a {
color: var(--ds-muted) !important;
font-size: 13px !important;
font-weight: 500 !important;
padding: 18px 12px !important;
transition: color 150ms ease-out;
}
.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus {
color: var(--ds-navy) !important;
background: transparent !important;
}
.nav-brand {
color: var(--ds-text) !important;
font-weight: 700 !important;
font-size: 15px !important;
letter-spacing: -0.01em !important;
text-shadow: none !important;
}
.navbar-toggle {
border: none !important;
background: transparent !important;
padding: 8px !important;
margin: 0 4px !important;
}
/* ── Navbar icon colors ───────────────────────────────────── */
.navbar .fa-home,
.navbar-at-bottom .fa-home { color: var(--ic-blue) !important; }
.navbar .fa-video-camera,
.navbar-at-bottom .fa-video-camera { color: var(--ic-purple) !important; }
.navbar .fa-pencil-square-o,
.navbar-at-bottom .fa-pencil-square-o { color: var(--ic-amber) !important; }
.navbar .fa-newspaper-o,
.navbar-at-bottom .fa-newspaper-o { color: var(--ic-green) !important; }
.navbar .fa-comments,
.navbar-at-bottom .fa-comments { color: var(--ic-pink) !important; }
.far.fa-bell { color: var(--ic-amber) !important; }
/* ── Dropdown menus ───────────────────────────────────────── */
.dropdown-menu,
.dropdown-menu.notifications-lists {
background: var(--ds-surface) !important;
border: 1px solid var(--ds-border) !important;
border-radius: var(--r-md) !important;
box-shadow: var(--sh-md) !important;
padding: 6px 0 !important;
min-width: 170px;
}
.notifications-lists::before { content: none !important; }
.dropdown-menu li > a,
.navbar .dropdown-menu li > a {
color: var(--ds-text) !important;
font-size: 13px !important;
font-weight: 400 !important;
padding: 9px 16px !important;
transition: background 120ms ease-out;
}
.dropdown-menu li > a:hover,
.navbar .dropdown-menu li > a:hover {
background-color: var(--ds-surface2) !important;
color: var(--ds-navy) !important;
}
.dropdown-menu li { border-bottom: none !important; }
/* Dropdown icon base — vertical alignment only, no gray lock-in */
.dropdown-menu .material-icons { vertical-align: -4px; margin-right: 6px; }
.dropdown-menu .fa, .dropdown-menu .fas,
.dropdown-menu .far, .dropdown-menu .fab { margin-right: 6px; }
/* ── Navbar account dropdown: color by href (icon name is text content, not class) */
/* Unauthenticated: Create Account + Sign in */
.navbar a[href*="register"] { color: var(--ic-green) !important; font-weight: 600 !important; }
.navbar a[href*="register"] .material-icons { color: var(--ic-green) !important; }
.navbar a[href*="login"]:not([href*="logout"]) { color: var(--ic-blue) !important; font-weight: 600 !important; }
.navbar a[href*="login"]:not([href*="logout"]) .material-icons { color: var(--ic-blue) !important; }
/* Authenticated: settings dropdown — nth-child matches fixed template order */
/* 1: Profile 2: Edit Profile 3: Change Password 4: Sign out */
.navbar .notifications-lists li:nth-child(1) > a .material-icons { color: var(--ic-blue) !important; }
.navbar .notifications-lists li:nth-child(2) > a .material-icons { color: var(--ic-blue) !important; }
.navbar .notifications-lists li:nth-child(3) > a .material-icons { color: var(--ic-amber) !important; }
.navbar .notifications-lists li:nth-child(4) > a .material-icons { color: var(--ic-red) !important; }
/* Sign out link stays red always */
.navbar a[href*="logout"] { color: var(--ic-red) !important; }
.navbar a[href*="logout"] .material-icons { color: var(--ic-red) !important; }
/* Change password amber */
.navbar a[href*="change_password"] .material-icons { color: var(--ic-amber) !important; }
/* Edit profile blue */
.navbar a[href*="edit_profile"] .material-icons { color: var(--ic-blue) !important; }
/* Post settings dropdown (more_vert menus) — nth-child colors */
.articles-setting .dropdown-menu li:nth-child(1) > a .material-icons,
.right-setting-bar .dropdown-menu li:nth-child(1) > a .material-icons { color: var(--ic-blue) !important; }
.articles-setting .dropdown-menu li:nth-child(2) > a .material-icons,
.right-setting-bar .dropdown-menu li:nth-child(2) > a .material-icons { color: var(--ic-teal) !important; }
.articles-setting .dropdown-menu li:nth-child(3) > a .material-icons,
.right-setting-bar .dropdown-menu li:nth-child(3) > a .material-icons { color: var(--ic-red) !important; }
/* FA hand arrow in dropdowns */
.dropdown-menu .fa-hand-o-right { color: var(--ic-amber) !important; }
/* ── Cards ────────────────────────────────────────────────── */
.card {
border: 1px solid var(--ds-border) !important;
border-radius: var(--r-lg) !important;
box-shadow: var(--sh-sm) !important;
background: var(--ds-surface) !important;
overflow: visible; /* don't clip dropdowns */
}
/* Re-clip only the feed card so hover transform looks clean */
.articles-list-box.card { overflow: hidden !important; }
.card .header-primary,
.custom-card > .header-primary {
background: var(--ds-navy) !important;
background-image: none !important;
box-shadow: none !important;
padding: 16px 20px !important;
}
.card .header-primary h4,
.custom-card > .header-primary h4 {
color: #fff !important;
margin: 0 !important;
}
/* ── Feed / article items ─────────────────────────────────── */
.articles-list-box {
background: var(--ds-surface) !important;
border: 1px solid var(--ds-border) !important;
border-radius: var(--r-lg) !important;
box-shadow: none !important;
padding: 16px !important;
margin-bottom: 14px !important;
transition: box-shadow 200ms ease-out, transform 200ms ease-out !important;
}
.articles-list-box:hover {
box-shadow: var(--sh-md) !important;
transform: translateY(-1px) !important;
}
/* Header box (profile row) + content box form one visual card:
header has margin-bottom-0px → flatten bottom edge and kill gap;
the following sibling content box flattens its top edge to meet it. */
.articles-list-box.margin-bottom-0px {
margin-bottom: 0 !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-bottom: none !important;
}
/* Direct sibling content box immediately after a 0-margin header */
.articles-list-box.margin-bottom-0px + .col-sm-12 > .articles-list-box,
.articles-list-box.margin-bottom-0px + .articles-list-box {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
margin-top: 0 !important;
border-top: none !important;
}
.article-post { border-top: 1px solid var(--ds-border) !important; margin-top: 8px !important; }
/* articles-post-top is the first card on the feed — no extra top border needed */
.articles-post-top.article-post { border-top: none !important; margin-top: 0 !important; }
.article-title > h4 { color: var(--ds-text) !important; font-weight: 600 !important; }
.article-title:hover { color: var(--ds-navy) !important; text-decoration: none !important; }
/* Post action strip */
.article-post-ul {
border-top: 1px solid var(--ds-border-lt) !important;
padding-top: 8px !important;
margin-top: 10px !important;
}
.article-post-ul > li > a,
.article-post-ul > li > button {
color: var(--ds-muted) !important;
font-size: 13px !important;
font-weight: 500 !important;
padding: 4px 8px !important;
border-radius: var(--r-sm) !important;
transition: background 150ms ease-out, color 150ms ease-out !important;
}
.article-post-ul > li > a:hover {
background: var(--ds-surface2) !important;
color: var(--ds-navy) !important;
text-decoration: none !important;
}
/* Feed action icon colors */
.fas.fa-thumbs-up, .fa-thumbs-up.liked { color: var(--ic-blue) !important; }
.far.fa-thumbs-up { color: var(--ic-gray) !important; }
.fas.fa-thumbs-down { color: var(--ic-red) !important; }
.far.fa-thumbs-down { color: var(--ic-gray) !important; }
.fas.fa-comment { color: var(--ic-pink) !important; }
.far.fa-comment { color: var(--ic-gray) !important; }
.fas.fa-download { color: var(--ic-indigo) !important; }
.fas.fa-bookmark { color: var(--ic-amber) !important; }
.far.fa-bookmark { color: var(--ic-gray) !important; }
.fas.fa-star { color: var(--ic-amber) !important; }
.far.fa-star { color: var(--ic-gray) !important; }
.fas.fa-trash-alt { color: var(--ic-red) !important; }
.fas.fa-trophy, .fa-trophy { color: var(--ic-amber) !important; }
.fas.fa-bullhorn { color: var(--ic-red) !important; }
.fas.fa-plus { color: var(--ic-green) !important; }
.fa-pie-chart { color: var(--ic-purple) !important; }
.fa-bullseye { color: var(--ic-teal) !important; }
.fa-clock-o, .fa-hourglass-half { color: var(--ic-indigo) !important; }
.fa-bolt { color: var(--ic-amber) !important; }
.fa-check-circle.text-green { color: var(--ic-green) !important; }
.fa-times-circle.text-red { color: var(--ic-red) !important; }
/* ═══════════════════════════════════════════════════════════
MATERIAL ICONS — Working color system
Icon name = TEXT CONTENT, not a CSS class.
.material-icons.icon_name selectors NEVER match.
These rules use: global default + context selectors +
utility-class selectors (font-size-14px etc.) +
style-attribute selectors (vertical-align:-4px etc.)
═══════════════════════════════════════════════════════════ */
/* Global default: anything not overridden → blue */
.material-icons { color: var(--ic-blue) !important; }
/* ── Form addon icons → blue ──────────────────────────────── */
.input-group-addon .material-icons { color: var(--ic-blue) !important; }
/* ── Neutral/settings icons ───────────────────────────────── */
.navbar .dropdown-toggle > .material-icons,
.articles-setting > li > a > .material-icons,
.right-setting-bar > li > a > .material-icons,
.material-icons.color-gray { color: var(--ic-gray) !important; }
/* ── Profile-date: public/visibility icon on posts → teal ─── */
.profile-date .material-icons,
.profile-date-inline .material-icons { color: var(--ic-teal) !important; }
/* ── Tag/domain icons: identified by vertical-align style ─── */
/* local_offer icons always have style="...vertical-align: -4px" */
.material-icons[style*="vertical-align: -4px"],
.material-icons[style*="vertical-align:-4px"] { color: var(--ic-amber) !important; }
/* ── Post top action bar icons (post_add, add_comment) ───── */
.article-post-ul .material-icons,
.articles-post-top .material-icons { color: var(--ic-blue) !important; }
/* ── Expand/collapse arrows in batch/filter sections ─────── */
.accordion .material-icons,
a.text-hover-same .material-icons,
a.theme-text-color .material-icons { color: var(--ds-muted) !important; }
/* ── font-size-14px: forward/create in post dropdown ─────── */
.material-icons.font-size-14px { color: var(--ic-blue) !important; }
/* Last item in these dropdowns = delete → red */
.dropdown-menu li:last-child > a .material-icons.font-size-14px { color: var(--ic-red) !important; }
.dropdown-menu li:nth-child(3) > a .material-icons.font-size-14px { color: var(--ic-red) !important; }
/* ── font-size-15px + pull-left: create/delete in comment dropdowns */
.material-icons.font-size-15px.pull-left { color: var(--ic-blue) !important; }
.dropdown-menu li:last-child > a .material-icons.font-size-15px.pull-left { color: var(--ic-red) !important; }
.dropdown-menu li:nth-child(3) > a .material-icons.font-size-15px.pull-left { color: var(--ic-red) !important; }
/* ── font-size-15px standalone (query_builder, laptop_mac, verified_user) */
.material-icons.font-size-15px:not(.pull-left) { color: var(--ic-indigo) !important; }
.material-icons.font-size-12px { color: var(--ic-indigo) !important; }
/* ── Status indicators: inherit parent link inline color ─── */
/* do_not_disturb_alt / verified_user / lock inside */
.articles-list-box a[style*="color"] .material-icons { color: inherit !important; }
/* ── Sidebar institute icons ──────────────────────────────── */
.material-icons.theme-text-light { color: var(--ic-indigo) !important; }
.article-user-info .material-icons { color: var(--ds-navy) !important; }
/* ── Popup close button → red ─────────────────────────────── */
.btn.popup_close .material-icons { color: var(--ic-red) !important; }
/* ── Modal close button stays white always ────────────────── */
.modal-header .material-icons,
.modal-close-button .material-icons { color: rgba(255,255,255,0.9) !important; }
/* Social brand colors */
.fab.fa-facebook-f { color: #1877F2 !important; }
.fab.fa-youtube { color: #FF0000 !important; }
.fab.fa-google-plus-g { color: #EA4335 !important; }
/* ── Panels (right sidebar) ───────────────────────────────── */
.feed-right-side-section .panel {
border: 1px solid var(--ds-border) !important;
border-radius: var(--r-lg) !important;
box-shadow: none !important;
overflow: hidden;
margin-bottom: 14px;
background: var(--ds-surface) !important;
}
.feed-right-side-section .panel .panel-heading {
background: var(--ds-surface) !important;
background-image: none !important;
border-bottom: 2px solid var(--ds-border) !important;
border-left: 3px solid var(--ds-navy) !important;
padding: 10px 14px !important;
}
.feed-right-side-section .panel .panel-heading h6 {
color: var(--ds-text) !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.8px !important;
margin: 0 !important;
}
.feed-right-side-section .panel .panel-body {
padding: 10px 14px !important;
background: var(--ds-surface) !important;
}
.feed-right-side-section .panel { box-shadow: none !important; }
/* ── Profile / left sidebar ───────────────────────────────── */
.article-user-info {
background: var(--ds-surface) !important;
border: 1px solid var(--ds-border) !important;
border-radius: var(--r-lg) !important;
box-shadow: none !important;
overflow: hidden;
margin-bottom: 14px !important;
}
.article-user-info .profile-content {
background: var(--ds-navy) !important;
background-image: none !important;
padding: 14px 16px !important;
}
/* ── Feed card profile row: flex layout (replaces absolute positioning) ── */
.profile-div {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 4px 0 !important;
position: relative; /* keep for dropdown/settings children */
flex-wrap: nowrap !important;
min-width: 0 !important;
}
.profile-div > a:first-child { /* avatar link wrapper */
flex-shrink: 0 !important;
line-height: 0 !important;
}
.profile-img {
width: 42px !important;
height: 42px !important;
border-radius: 50% !important;
border: 2px solid var(--ds-border) !important;
object-fit: cover !important;
display: block !important;
flex-shrink: 0 !important;
}
/* Name grows to fill remaining space; truncates if too long */
.profile-user-name {
position: static !important; /* undo old absolute, flex handles layout */
flex: 1 1 auto !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
margin-left: 0 !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--ds-text) !important;
line-height: 1.3 !important;
}
.profile-user-name:hover {
color: var(--ds-navy) !important;
text-decoration: none !important;
}
/* Sidebar profile card only: white text on dark navy */
.article-user-info .profile-content .profile-div { background: transparent; }
.article-user-info .profile-content .profile-user-name,
.profile-content .profile-user-name {
color: rgba(255,255,255,0.95) !important;
}
/* Profile date — sits directly after the name, no auto-margin */
.profile-date {
flex-shrink: 0 !important;
white-space: nowrap !important;
}
.profile-date > a,
.profile-date-inline {
position: static !important;
font-size: 11px !important;
color: var(--ds-subtle) !important;
}
/* Three-dot settings: pull out of old absolute positioning, anchor to flex right */
.articles-setting {
position: static !important; /* cancel style.css: position:absolute;right:0 */
display: flex !important; /* cancel style.css: display:inline-block */
align-items: center !important;
margin-left: auto !important; /* single auto-margin pushes it to far right */
flex-shrink: 0 !important;
list-style: none !important;
padding: 0 !important;
margin-bottom: 0 !important;
right: auto !important; /* neutralise any residual right: 0 */
}
/* Ensure the dropdown toggle link and more_vert icon are always tappable/visible */
.articles-setting .notification-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
color: var(--ds-muted) !important;
}
.articles-setting .notification-icon .material-icons {
font-size: 20px !important;
line-height: 1 !important;
}
/* ── Images inside rich-text post content ─────────────────── */
/* Exclude avatars: a bare .profile-img (comment/reply composer) is not
wrapped in .profile-div, so without :not() this generic rule would win
over .profile-img and render it as a rounded square forced onto its own
line. :not(.profile-img) keeps avatars circular and inline everywhere. */
.articles-list-box img:not(.profile-img),
.word_break img:not(.profile-img),
.team-player img:not(.profile-img) {
max-width: 100% !important;
height: auto !important;
border-radius: var(--r-sm) !important;
display: block;
margin: 8px auto;
}
/* Don't distort profile avatars — circular, inline, fixed size, regardless
of whether they sit inside .profile-div. */
.profile-div .profile-img,
.profile-img {
display: inline-block !important;
margin: 0 !important;
border-radius: 50% !important;
width: 42px !important;
height: 42px !important;
object-fit: cover !important;
vertical-align: middle !important;
/* If the image src is broken, the browser otherwise renders the alt text
inside the box, wrapping it across several lines. font-size:0 + overflow
hidden keep a broken avatar as a clean fixed-size box (JS then swaps in
the default avatar). */
font-size: 0 !important;
overflow: hidden !important;
}
/* Honour the explicit avatar-size helpers so nested comment/reply avatars
keep their smaller scale (the base .profile-img above otherwise forces
42px). Higher specificity (.profile-img + helper) wins; circular + cover
are inherited so they stay undistorted. */
.profile-img.width-height-30-30px { width: 30px !important; height: 30px !important; }
.profile-img.width-height-25-25px { width: 25px !important; height: 25px !important; }
/* ── Buttons ──────────────────────────────────────────────── */
.btn.btn-submit,
.form-btn .btn-submit {
background: var(--ds-navy) !important;
background-image: none !important;
color: #fff !important;
border: 1px solid transparent !important;
border-radius: var(--r-sm) !important;
font-weight: 600 !important;
font-size: 14px !important;
box-shadow: none !important;
transition: opacity 150ms ease-out !important;
}
.btn.btn-submit:hover,
.form-btn .btn-submit:hover { opacity: 0.88; box-shadow: none !important; }
.btn.btn-cancle,
.form-btn .btn-cancle {
background: transparent !important;
background-image: none !important;
color: var(--ds-text) !important;
border: 1px solid var(--ds-border) !important;
border-radius: var(--r-sm) !important;
font-weight: 500 !important;
box-shadow: none !important;
transition: all 150ms ease-out !important;
}
.btn.btn-cancle:hover,
.form-btn .btn-cancle:hover {
border-color: var(--ds-text) !important;
background: transparent !important;
box-shadow: none !important;
}
.btn.btn-primary, .btn-primary {
background: var(--ds-navy) !important;
background-image: none !important;
border-color: var(--ds-navy) !important;
border-radius: var(--r-sm) !important;
box-shadow: none !important;
font-weight: 500 !important;
transition: opacity 150ms ease-out !important;
}
.btn-primary:hover { opacity: 0.88; }
.btn.btn-default, .btn-default {
background: var(--ds-surface) !important;
background-image: none !important;
border: 1px solid var(--ds-border) !important;
color: var(--ds-text) !important;
border-radius: var(--r-sm) !important;
box-shadow: none !important;
font-weight: 500 !important;
transition: background 150ms ease-out !important;
}
.btn-default:hover { background: var(--ds-surface2) !important; }
.btn.btn-danger, .btn-danger {
background: var(--ds-red) !important;
background-image: none !important;
border-color: var(--ds-red) !important;
border-radius: var(--r-sm) !important;
box-shadow: none !important;
}
.btn.btn-simple.btn-just-icon {
color: var(--ds-muted) !important;
box-shadow: none !important;
}
.btn.btn-simple.btn-just-icon:hover { color: var(--ds-navy) !important; }
.add_btn {
background: transparent !important;
border: 1px solid var(--ds-navy) !important;
color: var(--ds-navy) !important;
border-radius: var(--r-sm) !important;
box-shadow: none !important;
font-weight: 500 !important;
transition: all 150ms ease-out !important;
}
.add_btn:hover { background: var(--ds-navy) !important; color: #fff !important; }
.add-student-btn {
background: var(--ds-navy) !important;
background-image: none !important;
border-radius: 20px !important;
box-shadow: none !important;
border-color: transparent !important;
color: #fff !important;
font-weight: 500 !important;
transition: opacity 150ms ease-out !important;
}
.add-student-btn:hover,
.add-student-btn:active,
.add-student-btn:focus { opacity: 0.88; background: var(--ds-navy) !important; }
.edit_question_btn { color: var(--ic-blue) !important; border-radius: var(--r-sm) !important; }
.delete_question_btn { color: var(--ic-red) !important; border-radius: var(--r-sm) !important; }
/* ── Forms ────────────────────────────────────────────────── */
/* Auth page background */
.header.header-filter {
background-image: none !important;
background-color: var(--ds-bg) !important;
min-height: 100vh;
}
/* Card wrapper for full-page forms */
.card.card-signup {
border: 1px solid var(--ds-border) !important;
border-radius: var(--r-lg) !important;
box-shadow: var(--sh-md) !important;
background: var(--ds-surface) !important;
overflow: hidden;
max-width: 480px;
width: 100%;
}
.card.card-signup.account-forms { max-width: 560px !important; }
/* Form header bar */
.header.header-primary.form-header {
background: var(--ds-navy) !important;
background-image: none !important;
box-shadow: none !important;
padding: 18px 24px !important;
margin-top: 0 !important;
}
.header.header-primary.form-header h4 {
color: #fff !important;
font-size: 16px !important;
font-weight: 600 !important;
margin: 0 !important;
}
.header.header-primary.form-header-modal {
background: var(--ds-navy) !important;
background-image: none !important;
box-shadow: none !important;
padding: 14px 20px !important;
margin-top: 0 !important;
}
.header.header-primary.form-header-modal h4 {
color: #fff !important;
font-size: 15px !important;
font-weight: 600 !important;
margin: 0 !important;
}
/* Form content area */
.card-signup .content { padding: 24px 28px !important; }
/* Input groups */
.input-group { margin-bottom: 14px !important; }
.input-group .input-group-addon {
background: var(--ds-bg) !important;
border: 1px solid var(--ds-border) !important;
border-right: none !important;
color: var(--ds-muted) !important;
padding: 0 12px !important;
min-width: 44px;
text-align: center;
border-radius: var(--r-sm) 0 0 var(--r-sm) !important;
vertical-align: middle;
}
.input-group .input-group-addon i.material-icons { vertical-align: middle; line-height: 1; font-size: 18px; }
.input-group .form-control {
border: 1px solid var(--ds-border) !important;
border-left: none !important;
border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
padding: 10px 14px !important;
height: 42px !important;
font-size: 14px !important;
background: var(--ds-surface) !important;
color: var(--ds-text) !important;
box-shadow: none !important;
}
.input-group .form-control:focus {
border-color: var(--ds-navy) !important;
box-shadow: none !important;
z-index: 2;
}
/* When there's no addon, standalone form-control gets full radius */
.form-group > .form-control,
.form-control:not(.input-group .form-control) {
border-radius: var(--r-sm) !important;
}
/* Standalone inputs */
.form-control {
border: 1px solid var(--ds-border) !important;
border-radius: var(--r-sm) !important;
padding: 10px 14px !important;
height: auto !important;
font-size: 14px !important;
background: var(--ds-surface) !important;
color: var(--ds-text) !important;
box-shadow: none !important;
transition: border-color 150ms ease-out !important;
}
.form-control:focus {
border-color: var(--ds-navy) !important;
box-shadow: 0 0 0 3px rgba(11,37,69,0.08) !important;
background-image: none !important;
}
.form-group.is-focused .form-control {
background-image: linear-gradient(var(--ds-navy), var(--ds-navy)),
linear-gradient(var(--ds-border), var(--ds-border)) !important;
}
/* Labels */
.form-group label,
.form-group label.control-label {
color: var(--ds-muted) !important;
font-size: 12px !important;
font-weight: 500 !important;
text-transform: none !important;
letter-spacing: 0 !important;
margin-bottom: 4px !important;
}
/* Input group addon */
.input-group-addon {
background: var(--ds-bg) !important;
border-color: var(--ds-border) !important;
color: var(--ds-muted) !important;
}
/* Form buttons */
.form-btn { padding: 8px 0 !important; }
/* Buttons size to content (no full-bleed slabs). Applies to every form,
modal or page, so they're consistent. Lone CTAs stay full width below. */
.form-btn .btn-submit,
.form-btn .btn-cancle {
width: auto !important;
min-width: 116px !important;
display: inline-block !important;
padding: 9px 22px !important;
}
.form-btn .btn-cancle { min-width: 92px !important; }
/* A lone primary CTA in a single full-width column keeps full width
(login, register, etc. — clean, conventional). */
.col-xs-12.form-btn .btn-submit, .col-sm-12.form-btn .btn-submit, .col-md-12.form-btn .btn-submit,
.col-xs-12.form-btn .btn, .col-sm-12.form-btn .btn { width: 100% !important; }
/* Split submit/cancel button rows → align the pair as one tidy group.
Order matters: centre first, then right/left so the responsive
col-xs-6.col-sm-8 / col-xs-6.col-sm-4 pairs resolve correctly.
col-md-6 (toggle-switch rows) is intentionally absent — those keep
the native grid and contain no .btn, so nothing here touches them. */
.col-xs-6.form-btn, .col-sm-6.form-btn,
.col-xs-3.form-btn, .col-sm-3.form-btn { text-align: center !important; }
.col-xs-8.form-btn, .col-sm-8.form-btn { text-align: right !important; padding-right: 5px !important; }
.col-xs-4.form-btn, .col-sm-4.form-btn { text-align: left !important; padding-left: 5px !important; }
.form-btn a {
display: block !important;
margin-top: 10px !important;
font-size: 13px !important;
color: var(--ds-muted) !important;
text-align: center !important;
}
.form-btn a:hover { color: var(--ds-navy) !important; }
.form-btn p {
font-size: 12px !important;
color: var(--ds-muted) !important;
text-align: center !important;
margin-bottom: 10px !important;
}
/* Auth footer links */
.login-footer { padding: 12px 24px 16px !important; }
.login-footer p { font-size: 13px !important; color: var(--ds-muted) !important; margin: 4px 0 !important; }
.login-footer a, .login-footer a.login-a {
color: var(--ds-navy) !important;
font-size: 13px !important;
font-weight: 500 !important;
text-decoration: none !important;
}
.login-footer a:hover { text-decoration: underline !important; }
/* Alerts inside forms */
.card-signup .alert,
.modal-body .alert {
border-radius: var(--r-sm) !important;
padding: 10px 14px !important;
font-size: 13px !important;
margin-bottom: 14px !important;
border: 1px solid #FECACA !important;
background: #FEF2F2 !important;
color: var(--ds-red) !important;
}
.card-signup .alert .form-error-message { color: var(--ds-red) !important; }
/* Account type radio cards */
.border-1px-normal {
border: 1px solid var(--ds-border) !important;
transition: border-color 150ms ease-out, background 150ms ease-out !important;
}
.border-1px-normal:hover {
border-color: var(--ds-navy) !important;
background: var(--ds-surface2) !important;
}
.border-radius-10px { border-radius: var(--r-md) !important; }
.radio.text-center.border-1px-normal { padding: 14px 8px !important; cursor: pointer; }
.radio.text-center.border-1px-normal label { font-size: 13px !important; font-weight: 500 !important; cursor: pointer; }
.radio.text-center.border-1px-normal i.material-icons { font-size: 26px !important; display: block !important; margin-bottom: 6px !important; color: var(--ds-muted) !important; }
/* OTP input */
.input-lg.text-center {
text-align: center !important;
font-size: 22px !important;
font-weight: 600 !important;
letter-spacing: 8px !important;
padding: 14px !important;
border: 1px solid var(--ds-border) !important;
border-radius: var(--r-sm) !important;
color: var(--ds-navy) !important;
}
.input-lg.text-center:focus {
border-color: var(--ds-navy) !important;
box-shadow: 0 0 0 3px rgba(11,37,69,0.08) !important;
}
/* Helper texts */
small.password-strength, small.help-text, small.desc-small-text {
font-size: 11px !important;
color: var(--ds-muted) !important;
display: block !important;
margin-top: 4px !important;
position: static !important;
}
/* Modal forms — strip inner card chrome so modal is the only frame */
.modal-body .card.custom-card,
.modal-body > .card,
.modal-body .card-signup {
border: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border-radius: 0 !important;
}
/* Content div inside modal forms — tighter padding than full-page forms */
.modal-body .content,
.modal-body .card .content { padding: 12px 4px !important; }
/* Form-header inside modal body should not show again (already shown in modal-header) */
.modal-body .form-header,
.modal-body .form-header-modal { display: none !important; }
/* Select2 */
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single {
border: 1px solid var(--ds-border) !important;
border-radius: var(--r-sm) !important;
background: var(--ds-surface) !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
border-color: var(--ds-navy) !important;
box-shadow: 0 0 0 3px rgba(11,37,69,0.08) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background: var(--ds-highlight) !important;
color: var(--ds-text) !important;
}
.select2-dropdown {
border: 1px solid var(--ds-border) !important;
border-radius: var(--r-sm) !important;
box-shadow: var(--sh-md) !important;
}
/* Checkboxes / radios accent */
.radio input[type=radio]:checked ~ .check { background-color: var(--ds-navy) !important; }
.radio input[type=radio]:checked ~ .circle { border-color: var(--ds-navy) !important; }
.checkbox input[type=checkbox]:checked + .checkbox-material .check { background: var(--ds-navy) !important; }
/* TinyMCE */
.mce-tinymce { border: 1px solid var(--ds-border) !important; box-shadow: none !important; }
/* File upload */
.file_uploaded_div {
background: var(--ds-bg) !important;
border: 1px solid var(--ds-border) !important;
border-radius: var(--r-sm) !important;
padding: 6px 10px !important;
margin-bottom: 4px !important;
font-size: 12px !important;
}
.file_name { color: var(--ds-text) !important; font-weight: 500 !important; }
.file_size { color: var(--ds-muted) !important; }
.delete_file { color: var(--ic-red) !important; }
/* ── Modals ────────────────────────────────────────────────── */
.modal-content {
border: none !important;
border-radius: var(--r-lg) !important;
box-shadow: var(--sh-lg) !important;
background: var(--ds-surface) !important;
overflow: hidden;
}
/* Zero out modal-header so the inner navy bar fills edge-to-edge */
.modal-header {
padding: 0 !important;
border-bottom: none !important;
background: transparent !important;
position: relative !important;
}
/* The actual navy header bar inside modal-header */
.modal-header .header-primary,
.modal-header .form-header-modal,
.form-header-modal.header-primary {
background: var(--ds-navy) !important;
background-image: none !important;
box-shadow: none !important;
padding: 16px 56px 16px 20px !important; /* right padding leaves room for close btn */
margin: 0 !important;
position: relative !important;
border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
}
.modal-header .header-primary h4,
.modal-header .form-header-modal h4 {
color: #fff !important;
font-size: 15px !important;
font-weight: 600 !important;
margin: 0 !important;
text-align: center !important;
}
/* Close button — absolute within the navy header bar */
.modal-header .close.modal-close-button,
.modal-header .modal-close-button {
position: absolute !important;
right: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
color: rgba(255,255,255,0.9) !important;
opacity: 1 !important;
font-size: 20px !important;
line-height: 1 !important;
margin: 0 !important;
padding: 4px !important;
float: none !important;
z-index: 1 !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
}
.modal-header .close.modal-close-button:hover,
.modal-header .modal-close-button:hover { color: #fff !important; opacity: 1 !important; }
.modal-body { padding: 20px !important; overflow-y: auto !important; max-height: calc(100vh - 180px) !important; }
.modal-footer {
border-top: 1px solid var(--ds-border) !important;
padding: 12px 20px !important;
background: var(--ds-bg) !important;
}
/* Modal dialog standard sizing */
.modal-dialog {
max-width: 580px !important;
width: calc(100% - 30px) !important;
margin: 60px auto !important;
}
/* ── Badges & Labels ──────────────────────────────────────── */
.label {
border-radius: 4px !important;
font-size: 11px !important;
font-weight: 500 !important;
padding: 3px 8px !important;
}
.label-default { background: #EEF2FF !important; color: var(--ic-indigo) !important; }
.label-success { background: #DCFCE7 !important; color: var(--ds-green) !important; }
.label-danger { background: #FEE2E2 !important; color: var(--ds-red) !important; }
.label-primary { background: var(--ds-navy) !important; color: #fff !important; }
.badge { border-radius: 10px !important; font-size: 11px !important; font-weight: 600 !important; padding: 2px 7px !important; background: var(--ds-navy) !important; }
.badge-success { background: var(--ds-green) !important; }
.badge-danger { background: var(--ds-red) !important; }
/* ── Alerts (global) ──────────────────────────────────────── */
.alert {
border-radius: var(--r-sm) !important;
font-size: 13px !important;
font-weight: 500 !important;
padding: 10px 16px !important;
box-shadow: none !important;
border: 1px solid transparent !important;
}
.alert-success { background: #F0FDF4 !important; border-color: #BBF7D0 !important; color: var(--ds-green) !important; }
.alert-danger { background: #FEF2F2 !important; border-color: #FECACA !important; color: var(--ds-red) !important; }
.alert-info { background: #EFF6FF !important; border-color: #BFDBFE !important; color: var(--ic-blue) !important; }
.alert-warning { background: var(--ds-highlight) !important; border-color: #FDE68A !important; color: var(--ds-amber) !important; }
/* ── Progress bars ────────────────────────────────────────── */
.progress {
height: 5px !important;
background: var(--ds-border) !important;
border-radius: 3px !important;
box-shadow: none !important;
border: none !important;
margin-bottom: 12px !important;
}
.progress-bar {
background: var(--ds-navy) !important;
background-image: none !important;
border-radius: 3px !important;
box-shadow: none !important;
}
.rating_progressbar {
height: 5px !important;
border-radius: 3px !important;
box-shadow: none !important;
border: 1px solid var(--ds-border) !important;
background: var(--ds-surface) !important;
}
/* ── Tables ───────────────────────────────────────────────── */
.table { font-size: 13px !important; color: var(--ds-text) !important; }
.table > thead > tr > th {
border-bottom: 1px solid var(--ds-border) !important;
color: var(--ds-muted) !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
padding: 10px 12px !important;
background: var(--ds-bg) !important;
}
.table > tbody > tr > td {
border-top: 1px solid var(--ds-border-lt) !important;
padding: 10px 12px !important;
vertical-align: middle !important;
color: var(--ds-text) !important;
transition: background 150ms ease-out !important;
}
.table > tbody > tr:hover > td { background: #F5F4F0 !important; }
.table-bordered { border: 1px solid var(--ds-border) !important; }
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border-color: var(--ds-border) !important; }
/* ── Tabs / nav pills ─────────────────────────────────────── */
.nav-pills > li > a {
border-radius: var(--r-sm) !important;
color: var(--ds-muted) !important;
font-size: 13px !important;
font-weight: 500 !important;
padding: 8px 16px !important;
transition: all 150ms ease-out;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover { background: var(--ds-navy) !important; color: #fff !important; }
.nav-pills > li > a:hover { background: var(--ds-surface2) !important; color: var(--ds-navy) !important; }
.nav-tabs { border-bottom: 1px solid var(--ds-border) !important; }
.nav-tabs > li > a {
color: var(--ds-muted) !important;
font-size: 13px !important;
font-weight: 500 !important;
border: none !important;
border-bottom: 2px solid transparent !important;
border-radius: 0 !important;
padding: 10px 16px !important;
background: transparent !important;
transition: all 150ms ease-out;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
color: var(--ds-navy) !important;
border-bottom: 2px solid var(--ds-navy) !important;
background: transparent !important;
border-top: none !important; border-left: none !important; border-right: none !important;
}
.nav-tabs > li > a:hover { color: var(--ds-navy) !important; background: transparent !important; }
/* ── Footer ───────────────────────────────────────────────── */
footer.footer {
background: var(--ds-navy) !important;
border-top: none !important;
color: rgba(232,230,224,0.8) !important;
}
footer.footer ul li a { color: rgba(232,230,224,0.7) !important; }
footer.footer ul li a:hover { color: #fff !important; }
footer .copyright > i { color: #FCA5A5 !important; }
/* Mobile bottom nav */
.navbar-at-bottom {
background: var(--ds-surface) !important;
border-top: 1px solid var(--ds-border) !important;
box-shadow: 0 -2px 12px rgba(0,0,0,0.06) !important;
padding-top: 6px !important;
}
.navbar-at-bottom ul > li > a {
color: var(--ds-muted) !important;
font-size: 10px !important;
font-weight: 500 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 2px !important;
}
.navbar-at-bottom ul > li > a > i { font-size: 20px !important; }
.navbar-at-bottom ul > li > a:hover,
.navbar-at-bottom ul > li > a:hover > i { color: var(--ds-navy) !important; }
/* ── Online test interface ────────────────────────────────── */
.question_basic {
border: 1px solid var(--ds-border) !important;
border-radius: var(--r-md) !important;
background: var(--ds-surface) !important;
padding: 14px !important;
}
.question_basic .question_text {
background: var(--ds-highlight) !important;
color: var(--ds-navy) !important;
border-radius: var(--r-sm) !important;
padding: 10px 12px !important;
font-weight: 500 !important;
}
.question_option_table { background: var(--ds-bg) !important; }
.question_option_table > tbody > tr > td {
padding: 8px 12px !important;
border-top: 1px solid var(--ds-border-lt) !important;
}
.paragraph_question {
background: var(--ds-highlight) !important;
border: 1px solid var(--ds-border) !important;
border-radius: var(--r-sm) !important;
padding: 10px 14px !important;
}
.paragraph_subquestion {
background: var(--ds-bg) !important;
border: 1px solid var(--ds-border) !important;
border-radius: var(--r-sm) !important;
}
.add_test_box {
border: 1.5px dashed var(--ds-border) !important;
border-radius: var(--r-md) !important;
background: var(--ds-surface) !important;
transition: all 150ms ease-out !important;
}
.add_test_box:hover { border-color: var(--ds-navy) !important; background: var(--ds-surface2) !important; }
.add_test_box > i { color: var(--ds-muted) !important; }
.live_test_light_btn {
background: var(--ds-surface) !important;
border: 1px solid var(--ds-border) !important;
color: var(--ds-text) !important;
border-radius: var(--r-sm) !important;
box-shadow: none !important;
font-size: 13px !important;
font-weight: 500 !important;
transition: all 150ms ease-out !important;
}
.live_test_light_btn:hover { background: var(--ds-surface2) !important; border-color: var(--ds-navy) !important; }
.live_test_light_btn.active { background: var(--ds-navy) !important; color: #fff !important; border-color: var(--ds-navy) !important; }
.live_test_dark_btn {
background: var(--ds-navy) !important;
background-image: none !important;
color: #fff !important;
border: 1px solid var(--ds-navy) !important;
border-radius: var(--r-sm) !important;
box-shadow: none !important;
font-size: 13px !important;
font-weight: 500 !important;
transition: opacity 150ms ease-out !important;
}
.live_test_dark_btn:hover { opacity: 0.88; }
/* Test report metric boxes */
.test_report_box {
background: var(--ds-surface) !important;
border: 1px solid var(--ds-border) !important;
border-radius: var(--r-md) !important;
border-right: none !important;
padding: 14px 10px !important;
text-align: center !important;
transition: box-shadow 200ms ease-out !important;
}
.test_report_box:last-child { border-right: 1px solid var(--ds-border) !important; }
.report_data { font-size: 20px !important; font-weight: 700 !important; color: var(--ds-navy) !important; display: block !important; }
.report_title { font-size: 11px !important; color: var(--ds-muted) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; font-weight: 500 !important; display: block !important; margin-top: 4px !important; }
/* Section tabs in test creation */
.add_test_section_tabs > li > a {
color: var(--ds-muted) !important;
border: 1px solid var(--ds-border) !important;
border-radius: var(--r-sm) !important;
font-size: 13px !important;
font-weight: 500 !important;
background: var(--ds-surface) !important;
transition: all 150ms ease-out !important;
}
.add_test_section_tabs > li.active > a,
.add_test_section_tabs > li > a:hover { background: var(--ds-navy) !important; color: #fff !important; border-color: var(--ds-navy) !important; }
.option_group_item { border: 1px solid var(--ds-border) !important; border-radius: var(--r-sm) !important; background: var(--ds-surface) !important; padding: 12px !important; }
/* ── Comment / reply forms ────────────────────────────────── */
.comment_text_area, .reply_text_area {
border: 1px solid var(--ds-border) !important;
border-radius: var(--r-sm) !important;
padding: 8px 12px !important;
font-size: 13px !important;
resize: none;
transition: border-color 150ms ease-out !important;
}
.comment_text_area:focus, .reply_text_area:focus {
border-color: var(--ds-navy) !important;
box-shadow: none !important;
outline: none !important;
}
.post-comment-btn {
background: transparent !important;
box-shadow: none !important;
border-radius: var(--r-sm) !important;
}
.post-comment-btn .post-comment-icon { color: var(--ds-muted) !important; }
.post-comment-btn:hover .post-comment-icon,
.post-comment-btn:hover { color: var(--ds-navy) !important; background: transparent !important; box-shadow: none !important; }
.comment_reply_btn {
border-color: var(--ds-navy) !important;
color: var(--ds-navy) !important;
border-radius: 4px !important;
transition: all 150ms ease-out !important;
}
.comment_reply_btn:hover { background: var(--ds-navy) !important; color: #fff !important; }
/* ── Notification badge ───────────────────────────────────── */
.notification-number {
background: var(--ds-red) !important;
color: #fff !important;
font-size: 10px !important;
font-weight: 600 !important;
width: 16px !important;
height: 16px !important;
border-radius: 50% !important;
line-height: 16px !important;
}
/* ── More-vert settings icon ──────────────────────────────── */
ul.articles-setting > li > a > i,
ul.right-setting-bar > li > a > i {
color: var(--ds-muted) !important;
font-size: 20px !important; /* keep the three-dots small everywhere, even without .notification-icon */
line-height: 1 !important;
padding: 4px !important;
border-radius: 4px !important;
transition: background 150ms ease-out !important;
}
ul.articles-setting > li > a:hover > i,
ul.right-setting-bar > li > a:hover > i {
background: var(--ds-surface2) !important;
color: var(--ds-navy) !important;
}
/* ── Institute list items ─────────────────────────────────── */
.institute_lists {
border-left: 3px solid var(--ds-navy) !important;
transition: box-shadow 200ms ease-out, transform 200ms ease-out !important;
}
.institute_lists:hover {
box-shadow: var(--sh-md) !important;
transform: translateY(-1px) !important;
}
/* ── Misc ──────────────────────────────────────────────────── */
.theme-background-image { background-image: none !important; background-color: var(--ds-navy) !important; }
.main-container { background-color: var(--ds-bg) !important; }
.wrapper .top-navbar-height { background-color: var(--ds-navy) !important; }
.divider-new::before, .divider-new::after,
.article-list > .divider-new::before,
.article-list > .divider-new::after {
background-image: none !important;
background-color: var(--ds-border) !important;
}
.divider-new > h3 {
font-size: 11px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
color: var(--ds-muted) !important;
padding: 0 12px !important;
}
.back-to-top {
color: var(--ds-muted) !important;
border: 1px solid var(--ds-border) !important;
border-radius: var(--r-sm) !important;
background: var(--ds-surface) !important;
font-size: 11px !important;
}
.back-to-top:hover { color: var(--ds-navy) !important; border-color: var(--ds-navy) !important; }
.user-name {
color: rgba(232,230,224,0.95) !important;
font-weight: 500 !important;
text-shadow: none !important;
font-size: 13px !important;
}
.sp_ribbon_class {
background: var(--ds-navy) !important;
background-image: none !important;
border-radius: 20px !important;
color: #fff !important;
font-size: 11px !important;
font-weight: 600 !important;
padding: 3px 12px !important;
border: none !important;
box-shadow: none !important;
}
.sp_ribbon_class.success_color { background: var(--ds-green) !important; }
.sp_ribbon_class.danger_color { background: var(--ds-red) !important; }
.delete_btn:hover { background: #FEF2F2 !important; color: var(--ds-red) !important; }
.hover-with-box-shadow {
border-radius: var(--r-sm) !important;
transition: background 150ms ease-out !important;
padding: 6px 10px !important;
}
.hover-with-box-shadow:hover { background: var(--ds-surface2) !important; }
.rating_form {
background: var(--ds-bg) !important;
border: 1px solid var(--ds-border) !important;
border-radius: var(--r-sm) !important;
padding: 10px 14px !important;
}
.article-post-ul { list-style: none !important; }
/* ── Responsive: tablet ───────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
.container { max-width: 100% !important; padding: 0 20px !important; }
.articles-list-box { padding: 16px !important; }
}
/* ── Responsive: mobile ───────────────────────────────────── */
@media (max-width: 767px) {
.container { padding: 0 12px !important; }
.articles-list-box { padding: 14px !important; border-radius: var(--r-md) !important; margin-bottom: 10px !important; }
.card, .card-signup { border-radius: var(--r-md) !important; }
.card.card-signup { max-width: 100% !important; margin: 70px 0 24px !important; }
.card.card-signup.account-forms { max-width: 100% !important; }
.card-signup .content { padding: 18px 16px !important; }
.header.header-primary.form-header { padding: 14px 16px !important; }
.login-footer { padding: 10px 16px 14px !important; }
.form-control { font-size: 16px !important; }
.input-group .form-control { font-size: 16px !important; }
.modal-dialog { margin: 10px auto !important; width: calc(100% - 20px) !important; max-width: 100% !important; }
.modal-content { border-radius: var(--r-md) !important; }
.navbar-at-bottom ul > li > a { padding: 6px 10px !important; min-width: 48px !important; min-height: 48px !important; }
.dropdown-menu { min-width: 85vw !important; }
h1 { font-size: 22px !important; } h2 { font-size: 18px !important; }
}
/* ── Desktop cap ──────────────────────────────────────────── */
@media (min-width: 1200px) {
.container { max-width: 1120px !important; }
}
/* ─────────────────────────────────────────────────────────────
VISIBILITY FIXES — font colors and component consistency
──────────────────────────────────────────────────────────── */
/* Ensure profile-date links are readable on navy profile-content */
.article-user-info .profile-content .profile-date,
.article-user-info .profile-content .profile-date a,
.article-user-info .profile-content .profile-date-inline {
color: rgba(255,255,255,0.65) !important;
font-size: 11px !important;
}
/* Stats/numbers in profile sidebar on navy bg */
.article-user-info .profile-content p,
.article-user-info .profile-content span { color: rgba(255,255,255,0.82) !important; }
.article-user-info .profile-content strong { color: #fff !important; font-weight: 600 !important; }
/* Profile section below profile-content (white bg) */
.article-user-info .profile-content ~ * p,
.article-user-info .profile-content ~ * a,
.article-user-info .profile-content ~ * span { color: var(--ds-text) !important; }
/* Feed item text visibility */
.articles-list-box p,
.articles-list-box span,
.articles-list-box li { color: var(--ds-text) !important; }
.articles-list-box .text-muted,
.articles-list-box small { color: var(--ds-muted) !important; }
/* Multi-line header inside card */
.multi_line_header { color: var(--ds-text) !important; padding: 12px 20px !important; }
.card-signup h3.multi_line_header { font-size: 15px !important; font-weight: 500 !important; color: var(--ds-muted) !important; }
/* Full-page form card — vertical center on auth pages */
.card.card-signup { margin: 80px auto 40px !important; }
.card.card-signup.account-forms { margin: 60px auto 40px !important; }
/* Consistent button height */
.btn.btn-submit, .btn.btn-cancle, .btn.btn-primary, .btn.btn-default {
min-height: 40px !important;
line-height: 1.4 !important;
}
/* Tab-width cap: feed columns max 360px each at tablet */
@media (min-width: 768px) and (max-width: 1024px) {
.col-md-3 { max-width: 260px; }
.col-md-6 { flex: 1; }
}
/* Toggle switch label text visibility */
.maincontent strong,
.input-group strong { color: var(--ds-text) !important; font-size: 13px !important; font-weight: 500 !important; }
/* Feed header: one-row action bar + date-filter chip.
Scoped to .articles-post-top so the like/comment strips stay as-is.
Popover and persistence JS live in configuration_custom_script.js. */
/* Card is one flex row */
.articles-post-top.article-post {
display: flex !important;
flex-wrap: nowrap !important; /* keep the chip on the actions row */
align-items: center !important;
gap: 6px 8px !important;
padding: 9px 14px !important;
position: relative !important;
z-index: 20 !important; /* keeps the filter popover above the posts */
}
/* Actions cluster (left, grows). Never wraps: if the actions can't fit they
scroll horizontally (scrollbar hidden) — the row height never grows. */
.articles-post-top .text-center {
flex: 1 1 auto !important;
text-align: left !important;
min-width: 0 !important;
overflow-x: auto !important;
-ms-overflow-style: none !important;
scrollbar-width: none !important;
}
.articles-post-top .text-center::-webkit-scrollbar { display: none !important; }
.articles-post-top .article-post-ul {
display: inline-flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 3px !important;
border-top: none !important;
margin: 0 !important;
padding: 0 !important;
vertical-align: middle !important;
}
.articles-post-top .article-post-ul + .article-post-ul { margin-left: 4px !important; }
.articles-post-top .article-post-ul > li {
border-right: none !important; /* kill the silver pipe dividers */
padding: 0 !important;
margin: 0 !important;
float: none !important;
list-style: none !important;
display: inline-flex !important;
flex: 0 0 auto !important; /* items keep their size; cluster scrolls instead of wrapping */
}
.articles-post-top .article-post-ul hr { display: none !important; }
/* This zone holds two kinds of items, styled differently:
- navigation / list links (open a page): coloured text, no icon
- actions (open a modal, or the primary create CTA): icon buttons */
.articles-post-top .article-profile-icon br { display: none !important; }
.articles-post-top .article-profile-icon {
display: inline-flex !important;
align-items: center !important;
white-space: nowrap !important;
min-width: 0 !important;
line-height: 1.2 !important;
border: 1px solid transparent !important;
transition: background 150ms ease-out, color 150ms ease-out !important;
}
/* Navigation / list links: coloured text, no icon */
.articles-post-top .article-profile-icon:not([data-toggle="modal"]):not(.primary-action) {
color: var(--ds-navy) !important;
font-size: 13px !important;
font-weight: 600 !important;
padding: 7px 9px !important;
border-radius: var(--r-sm) !important;
background: transparent !important;
}
.articles-post-top .article-profile-icon:not([data-toggle="modal"]):not(.primary-action) > i,
.articles-post-top .article-profile-icon:not([data-toggle="modal"]):not(.primary-action) > .material-icons {
display: none !important;
}
.articles-post-top .article-profile-icon:not([data-toggle="modal"]):not(.primary-action):hover {
color: var(--ds-navy-lt) !important;
text-decoration: underline !important;
background: transparent !important;
}
/* Actions: icon buttons (label kept in DOM for a11y, hidden visually) */
.articles-post-top .article-profile-icon[data-toggle="modal"],
.articles-post-top .article-profile-icon.primary-action {
font-size: 0 !important;
width: 38px !important;
height: 38px !important;
padding: 0 !important;
justify-content: center !important;
border-radius: 50% !important;
}
.articles-post-top .article-profile-icon[data-toggle="modal"] > i.material-icons,
.articles-post-top .article-profile-icon.primary-action > i.material-icons {
display: inline-block !important;
margin: 0 !important;
font-size: 20px !important;
line-height: 1 !important;
vertical-align: middle !important;
}
/* Secondary action (e.g. Join Batch): tinted circle */
.articles-post-top .article-profile-icon[data-toggle="modal"]:not(.primary-action) {
background: var(--primary-tint) !important;
color: var(--ds-navy) !important;
}
.articles-post-top .article-profile-icon[data-toggle="modal"]:not(.primary-action) > i.material-icons { color: var(--ds-navy) !important; }
.articles-post-top .article-profile-icon[data-toggle="modal"]:not(.primary-action):hover { background: var(--primary-tint-hi) !important; }
/* Primary action: filled circle */
.articles-post-top .article-profile-icon.primary-action {
background: var(--ds-navy) !important;
border-color: var(--ds-navy) !important;
box-shadow: var(--sh-sm) !important;
}
.articles-post-top .article-profile-icon.primary-action > i.material-icons { color: #fff !important; }
.articles-post-top .article-profile-icon.primary-action:hover { background: var(--ds-navy-lt) !important; }
/* ── Filter cluster (right) — retire accordion shell ──────── */
.accordion { display: none !important; }
.accordion-panel,
.accordion-container .accordion-panel {
display: block !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
min-width: 0 !important;
max-width: none !important;
}
.accordion-container { display: block !important; }
.articles-post-top .accordion-container {
flex: 0 0 auto !important;
margin-left: auto !important; /* push the chip to the far right */
}
/* ── Smart date-filter chip + popover (walls/date_filter.html) */
.feed-filter { position: relative !important; display: inline-block !important; }
/* Default = compact icon-only pill so it tucks into the actions row. */
.feed-filter__chip {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
height: 36px !important;
width: 36px !important;
padding: 0 !important;
border: 1px solid var(--ds-border) !important;
border-radius: 18px !important;
background: var(--ds-surface) !important;
color: var(--ds-text) !important;
font-size: 12.5px !important;
font-weight: 500 !important;
cursor: pointer !important;
outline: none !important;
flex: 0 0 auto !important;
transition: border-color 150ms ease-out, background 150ms ease-out, color 150ms ease-out !important;
}
.feed-filter__chip:hover { border-color: var(--ds-navy) !important; }
.feed-filter__chip > i.material-icons { font-size: 18px !important; color: var(--ds-muted) !important; }
/* Hidden until a filter is set — then the pill expands to show the range. */
.feed-filter__label, .feed-filter__caret { display: none !important; }
.feed-filter__label { white-space: nowrap !important; }
.feed-filter__chip.is-active,
.feed-filter__chip.is-remembered {
width: auto !important;
padding: 0 8px 0 12px !important;
}
.feed-filter__chip.is-active .feed-filter__label,
.feed-filter__chip.is-remembered .feed-filter__label { display: inline !important; }
/* Remembered (saved but not currently applied) */
.feed-filter__chip.is-remembered { border-color: var(--ds-navy) !important; color: var(--ds-navy) !important; }
.feed-filter__chip.is-remembered > i.material-icons { color: var(--ds-navy) !important; }
/* Active (filter currently applied this session / via URL) */
.feed-filter__chip.is-active {
background: var(--ds-navy) !important;
border-color: var(--ds-navy) !important;
color: #fff !important;
}
.feed-filter__chip.is-active .feed-filter__label { color: #fff !important; }
.feed-filter__chip.is-active > i.material-icons,
.feed-filter__chip.is-active .feed-filter__caret { color: rgba(255,255,255,0.85) !important; }
.feed-filter__clear {
display: none;
width: 18px; height: 18px; line-height: 17px;
text-align: center; border-radius: 50%;
font-size: 15px; margin-left: 2px;
background: rgba(255,255,255,0.22); color: #fff;
}
.feed-filter__chip.is-active .feed-filter__clear { display: inline-block; }
.feed-filter__clear:hover { background: rgba(255,255,255,0.4); }
.feed-filter__chip.is-active .feed-filter__caret { display: none; }
/* Popover */
.feed-filter__popover {
display: none;
position: absolute !important;
top: calc(100% + 8px) !important;
right: 0 !important;
z-index: 200 !important;
width: 282px !important;
max-width: calc(100vw - 32px) !important;
background: var(--ds-surface) !important;
border: 1px solid var(--ds-border) !important;
border-radius: var(--r-md) !important;
box-shadow: var(--sh-lg) !important;
padding: 12px !important;
text-align: left !important;
}
.feed-filter__popover.open { display: block !important; }
.feed-filter__presets { display: flex !important; gap: 6px !important; margin-bottom: 10px !important; }
.feed-filter__preset {
flex: 1 1 0 !important;
padding: 6px 4px !important;
font-size: 11px !important;
font-weight: 500 !important;
border: 1px solid var(--ds-border) !important;
border-radius: var(--r-sm) !important;
background: var(--ds-surface) !important;
color: var(--ds-muted) !important;
cursor: pointer !important;
transition: all 120ms ease-out !important;
}
.feed-filter__preset:hover { border-color: var(--ds-navy) !important; color: var(--ds-navy) !important; }
.feed-filter__preset.selected { background: var(--ds-navy) !important; border-color: var(--ds-navy) !important; color: #fff !important; }
.feed-filter__fields { display: flex !important; gap: 8px !important; margin-bottom: 12px !important; }
.feed-filter__fields label { flex: 1 1 0 !important; display: block !important; margin: 0 !important; }
.feed-filter__fields label > span {
display: block !important;
font-size: 11px !important;
color: var(--ds-muted) !important;
margin-bottom: 3px !important;
font-weight: 500 !important;
}
.feed-filter__fields input.datepicker {
width: 100% !important;
height: 36px !important;
padding: 6px 10px !important;
border: 1px solid var(--ds-border) !important;
border-radius: var(--r-sm) !important;
background: var(--ds-surface) !important;
color: var(--ds-text) !important;
font-size: 12.5px !important;
box-shadow: none !important;
}
.feed-filter__fields input.datepicker:focus {
border-color: var(--ds-navy) !important;
box-shadow: 0 0 0 3px rgba(30,58,138,0.08) !important;
outline: none !important;
}
.feed-filter__actions-row { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.feed-filter__reset {
background: none !important;
border: none !important;
color: var(--ds-muted) !important;
font-size: 12px !important;
font-weight: 500 !important;
cursor: pointer !important;
padding: 4px 2px !important;
}
.feed-filter__reset:hover { color: var(--ds-red) !important; }
.feed-filter .filter_by_date { display: inline-block !important; margin: 0 !important; }
.feed-filter__apply.btn.btn-submit {
height: 34px !important;
min-height: 34px !important;
width: auto !important;
margin: 0 !important;
padding: 0 18px !important;
border-radius: var(--r-sm) !important;
font-size: 12.5px !important;
line-height: 32px !important;
}
/* Text nav + icon actions keep the zone compact, so no label-collapse is
needed. On phones just reposition the popover to stay on screen. */
@media (max-width: 640px) {
.feed-filter__popover {
right: 0 !important;
left: auto !important;
width: 264px !important;
max-width: calc(100vw - 24px) !important;
}
}
/* Post / content composer modals. Same fields and behaviour; layout only.
Goal: cut the long vertical scroll. */
.modal-body form label,
.modal-body form .control-label {
font-size: 12px !important;
font-weight: 600 !important;
color: var(--ds-muted) !important;
text-transform: none !important;
letter-spacing: 0 !important;
margin-bottom: 4px !important;
text-align: left !important;
}
/* Tighter rhythm */
.modal-body form .row.margin-15px--15px { margin: 0 0 8px !important; }
.modal-body form > .input-group { margin-bottom: 10px !important; }
.modal-body form hr { margin: 8px 0 !important; clear: both !important; }
.modal-body form::after { content: ""; display: table; clear: both; }
/* Two-up the metadata selects (domains / sections / topics / audience) so
they don't stack into a long scroll. They stay visible, so select2 keeps
its width. :has is progressively enhanced — unsupported browsers just get
the original full-width stack. */
.modal-body form .row:has(> .col-xs-12 > .domain_section_mapping_domain_select),
.modal-body form .row:has(> .col-xs-12 > .section_topic_mapping_section_select),
.modal-body form .row:has(> .col-xs-12 > #section_topic_mapping_topic_select) {
float: left !important;
width: 47% !important;
margin: 0 6% 8px 0 !important;
}
.modal-body form .row:has(> .col-xs-12 > .section_topic_mapping_section_select) { margin-right: 0 !important; }
/* left column starts a fresh line so a tall multiselect can't drop the next pair */
.modal-body form .row:has(> .col-xs-12 > .domain_section_mapping_domain_select),
.modal-body form .row:has(> .col-xs-12 > #section_topic_mapping_topic_select) { clear: left !important; }
.modal-body form .row.custom_share { clear: both !important; float: none !important; width: 100% !important; }
/* Details editor: the main field, roomy but not huge */
.modal-body .tinymce_editor.form-control,
.modal-body textarea.form-control { min-height: 104px !important; line-height: 1.6 !important; }
.modal-body .mce-tinymce { border-radius: var(--r-sm) !important; }
/* Attach file: branded button, no empty grey placeholder box */
.modal-body input[type="file"] { width: auto !important; font-size: 12px !important; }
.modal-body input[type="file"]::file-selector-button,
.modal-body input[type="file"]::-webkit-file-upload-button {
border: 1px solid var(--ds-navy) !important;
background: transparent !important;
color: var(--ds-navy) !important;
border-radius: var(--r-sm) !important;
padding: 6px 14px !important;
margin-right: 10px !important;
font-weight: 600 !important;
font-size: 12px !important;
cursor: pointer !important;
transition: background 150ms ease-out, color 150ms ease-out !important;
}
.modal-body input[type="file"]::file-selector-button:hover,
.modal-body input[type="file"]::-webkit-file-upload-button:hover {
background: var(--ds-navy) !important;
color: #fff !important;
}
.modal-body .file_upload_form .control-label { line-height: 32px !important; margin: 0 !important; }
.modal-body .file_uploaded_div.template,
.modal-body .file_uploaded_div.hidden { display: none !important; }
.modal-body .file_uploaded_div:not(.template):not(.hidden) {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
margin-bottom: 6px !important;
}
/* Composer feel: title reads like a heading, body like a writing canvas —
fewer boxes, more "write" than "fill a form". */
.modal-body form input[name="title"].form-control {
border: none !important;
border-bottom: 1px solid var(--ds-border) !important;
border-radius: 0 !important;
padding: 8px 2px !important;
font-size: 18px !important;
font-weight: 600 !important;
color: var(--ds-heading) !important;
background: transparent !important;
box-shadow: none !important;
}
.modal-body form input[name="title"].form-control:focus {
border-bottom: 2px solid var(--ds-navy) !important;
box-shadow: none !important;
}
.modal-body form input[name="title"].form-control::placeholder {
color: var(--ds-subtle) !important;
font-weight: 500 !important;
}
.modal-body .mce-tinymce.mce-container {
border: 1px solid var(--ds-border) !important;
box-shadow: none !important;
border-radius: var(--r-md) !important;
overflow: hidden !important;
}
.modal-body .mce-tinymce .mce-toolbar-grp,
.modal-body .mce-tinymce .mce-statusbar {
background: var(--ds-bg) !important;
border-color: var(--ds-border-lt) !important;
}
.modal-body .mce-btn { background: transparent !important; }
.modal-body form hr { border-top-color: var(--ds-border-lt) !important; }
/* Composer toolbar — chips that toggle the optional sections (default on) */
.composer-toolbar { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 4px 0 10px !important; }
.composer-tool {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
border: 1px solid var(--ds-border) !important;
background: var(--ds-surface) !important;
color: var(--ds-muted) !important;
border-radius: 18px !important;
padding: 6px 14px !important;
font-size: 12px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: background 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out !important;
}
.composer-tool .material-icons { font-size: 17px !important; color: inherit !important; }
.composer-tool:hover { border-color: var(--ds-navy) !important; color: var(--ds-navy) !important; }
.composer-tool.active { background: var(--primary-tint) !important; border-color: var(--ds-navy) !important; color: var(--ds-navy) !important; }
/* Collapsible sections. Height collapse (not display:none) so Select2 keeps
its width — it initialises while the section is open. */
.composer-section { max-height: 1200px; overflow: hidden; transition: max-height 250ms ease; }
.composer-section:not(.open) { max-height: 0; }
/* Audience pill toggle, layered over the (hidden) share_with select */
.pill-toggle { display: inline-flex !important; gap: 6px !important; margin-bottom: 4px !important; }
.pill-toggle .pill {
border: 1px solid var(--ds-border) !important;
background: var(--ds-surface) !important;
color: var(--ds-muted) !important;
border-radius: 16px !important;
padding: 6px 18px !important;
font-size: 12.5px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 150ms ease-out !important;
}
.pill-toggle .pill:hover { border-color: var(--ds-navy) !important; color: var(--ds-navy) !important; }
.pill-toggle .pill.active { background: var(--ds-navy) !important; border-color: var(--ds-navy) !important; color: #fff !important; }
.pill-toggle ~ .select2-container,
.pill-toggle ~ select.share_with { display: none !important; }
/* Login form social icons section */
.social-line .btn.btn-simple.btn-just-icon { font-size: 18px !important; }
/* Checkbox label in forms */
.checkbox label, .radio label { color: var(--ds-text) !important; font-size: 13px !important; }
/* Select2 selected tag visible */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
background: #EEF2FF !important;
border-color: #C7D2FE !important;
color: var(--ic-indigo) !important;
border-radius: 4px !important;
font-size: 12px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
color: var(--ic-indigo) !important;
}
/* Notification list items */
.dropdown-menu.notifications-lists li > a {
white-space: normal !important;
padding: 10px 16px !important;
border-bottom: 1px solid var(--ds-border-lt) !important;
font-size: 12px !important;
line-height: 1.5 !important;
}
.dropdown-menu.notifications-lists li:last-child > a { border-bottom: none !important; }
/* Navbar modal (mobile slide-in) */
.modal-dialog.navbar-modal {
background: var(--ds-surface) !important;
margin: 0 !important;
max-width: 80vw !important;
width: 80vw !important;
border-radius: 0 var(--r-lg) var(--r-lg) 0 !important;
overflow-y: auto !important;
box-shadow: var(--sh-lg) !important;
}
/* Navbar-modal overrides — let it handle its own scroll height */
.modal-dialog.navbar-modal .modal-body { max-height: none !important; overflow-y: visible !important; }
/* Post top bar card (share post / filter row) — compact vertical rhythm */
.articles-list-box.article-post.articles-post-top {
background: var(--ds-surface) !important;
border-radius: var(--r-lg) !important;
border: 1px solid var(--ds-border) !important;
padding: 6px 16px 4px !important;
margin-bottom: 10px !important;
}
/* ═══════════════════════════════════════════════════════════
COMPREHENSIVE ICON COLORS — GenZ palette
Covers every FA + Material Icon found across all templates.
Strategy: FA = class selector (always works).
Material Icons = context rules + class rules where
icon name is added as extra class in templates.
═══════════════════════════════════════════════════════════ */
/* ── Font Awesome: Navigation & Arrows ───────────────────── */
.fa-arrow-left, .fa-arrow-right,
.fa-long-arrow-left, .fa-long-arrow-right,
.fa-angle-double-right, .fa-arrow-circle-up,
.fas.fa-caret-right { color: var(--ic-blue) !important; }
.fa-chevron-down { color: var(--ic-gray) !important; }
/* ── Font Awesome: Edit / Create ─────────────────────────── */
.fa-pencil, .fas.fa-pencil-alt,
.far.fa-edit { color: var(--ic-blue) !important; }
.fa-external-link, .fa-link,
.fa-paste { color: var(--ic-blue) !important; }
/* ── Font Awesome: Delete / Close / Block ────────────────── */
.fa-trash, .far.fa-trash-alt { color: var(--ic-red) !important; }
.fa-times { color: var(--ic-gray) !important; }
.fa-times-circle { color: var(--ic-red) !important; }
.fas.fa-ban { color: var(--ic-red) !important; }
/* ── Font Awesome: Success / Check ──────────────────────── */
.fa-check, .fas.fa-check-circle,
.fa-check-circle, .fa-check-square,
.fa-check-square-o { color: var(--ic-green) !important; }
/* ── Font Awesome: Users / Profile ──────────────────────── */
.fa-users { color: var(--ic-blue) !important; }
.fas.fa-user { color: var(--ic-blue) !important; }
.fa-user-plus, .fas.fa-user-plus { color: var(--ic-green) !important; }
.fa-power-off { color: var(--ic-red) !important; }
/* ── Font Awesome: Media / Content ──────────────────────── */
.fa-camera { color: var(--ic-teal) !important; }
.fas.fa-play { color: var(--ic-red) !important; }
.fas.fa-tv { color: var(--ic-purple) !important; }
.fas.fa-laptop, .fa-laptop { color: var(--ic-indigo) !important; }
.fas.fa-eye, .fa-eye { color: var(--ic-teal) !important; }
.fa-th { color: var(--ic-purple) !important; }
.fa-list-ul, .fa-list-alt,
.fas.fa-list { color: var(--ic-gray) !important; }
.fa-file-alt { color: var(--ic-indigo) !important; }
/* ── Font Awesome: Communication ────────────────────────── */
.fas.fa-paper-plane, .fa-send { color: var(--ic-blue) !important; }
.fas.fa-reply { color: var(--ic-teal) !important; }
.far.fa-compass { color: var(--ic-teal) !important; }
.far.fa-share-square { color: var(--ic-teal) !important; }
.fa-envelope { color: var(--ic-cyan) !important; }
/* ── Font Awesome: Info / Help / Warning ─────────────────── */
.fa-info-circle, .fas.fa-info-circle { color: var(--ic-blue) !important; }
.fa-question-circle { color: var(--ic-blue) !important; }
.fa-warning, .fas.fa-exclamation-circle { color: var(--ic-orange) !important; }
.fa-dot-circle-o { color: var(--ic-indigo) !important; }
.fa-circle, .far.fa-circle { color: var(--ic-gray) !important; }
/* ── Font Awesome: Upload / Save / Filters ───────────────── */
.fas.fa-upload, .fa-upload { color: var(--ic-indigo) !important; }
.fa-save { color: var(--ic-green) !important; }
.fa-filter { color: var(--ic-indigo) !important; }
/* ── Font Awesome: Finance / Tags ────────────────────────── */
.fas.fa-rupee-sign { color: var(--ic-amber) !important; }
.fa-cart-plus { color: var(--ic-green) !important; }
.fa-tag { color: var(--ic-amber) !important; }
/* ── Font Awesome: Security ──────────────────────────────── */
.fas.fa-shield-alt { color: var(--ic-indigo) !important; }
.fa-lock { color: var(--ic-amber) !important; }
/* ── Font Awesome: Calendar / Time ──────────────────────── */
.fa-calendar { color: var(--ic-indigo) !important; }
/* ── Font Awesome: Education / Content ───────────────────── */
.fa-cubes { color: var(--ic-purple) !important; }
/* ── Font Awesome: Bell (generic) ───────────────────────── */
.fa-bell { color: var(--ic-amber) !important; }
/* ── Font Awesome: Phone ─────────────────────────────────── */
.fa-phone { color: var(--ic-green) !important; }
/* ── Font Awesome: Misc UI ───────────────────────────────── */
.fa-minus { color: var(--ic-gray) !important; }
.fa-spinner { color: var(--ic-gray) !important; }
/* ── Font Awesome: Social brands ────────────────────────── */
.fa-facebook, .fa-facebook-f,
.fa-facebook-square { color: #1877F2 !important; }
.fa-twitter, .fab.fa-twitter { color: #1DA1F2 !important; }
.fa-instagram { color: #E1306C !important; }
.fa-youtube, .fa-youtube-play { color: #FF0000 !important; }
.fa-google-plus { color: #EA4335 !important; }
.fab.fa-accusoft, .fab.fa-schlix { color: var(--ic-violet) !important; }
.fab.fa-audible { color: var(--ic-orange) !important; }
.fab.fa-quora { color: #B92B27 !important; }
/* ── Button icon overrides ───────────────────────────────── */
/* White buttons: keep icons readable in dark */
.btn-default .material-icons, .btn-default .fa,
.btn-default .fas, .btn-default .far { color: var(--ds-text) !important; }
/* Submit/primary buttons: icons white */
.btn-submit .material-icons, .btn-submit .fa, .btn-submit .fas,
.btn-primary .material-icons, .btn-primary .fa, .btn-primary .fas { color: #fff !important; }
/* ── Navbar-modal (mobile slide-in) ─────────────────────── */
.navbar-modal .material-icons,
.navbar-modal .fa, .navbar-modal .fas,
.navbar-modal .far { color: var(--ds-text) !important; }
.navbar-modal li > a > .material-icons { color: var(--ic-blue) !important; }
/* ── Spinner stays neutral ───────────────────────────────── */
.fa-spinner { color: var(--ic-gray) !important; }
/* ═══════════════════════════════════════════════════════════
PAGE LOADER — "Padho, Seekho, Badho... NiveshTak"
Learning icons morph into nivesh (investment) icons, left→right,
over a navy→green progress sweep. Overrides the old dark .overlay
swirl. Scoped to #spinner.suvi-loader so nothing else is touched.
═══════════════════════════════════════════════════════════ */
#spinner.suvi-loader {
background: var(--ds-bg, #F7F6F3);
display: flex;
align-items: center;
justify-content: center;
transition: opacity .45s ease, visibility .45s ease;
}
/* Smooth fade-out instead of an abrupt display:none from the JS */
#spinner.suvi-loader.is-hiding {
opacity: 0;
visibility: hidden;
}
.suvi-loader__stage {
width: 280px;
max-width: 80vw;
text-align: center;
font-family: 'Hanken Grotesk', sans-serif;
}
/* All icons stack in the same spot and crossfade in sequence */
.suvi-loader__icons {
position: relative;
height: 84px;
margin-bottom: 26px;
}
.suvi-ic {
position: absolute;
top: 0; left: 0; right: 0;
font-size: 60px;
line-height: 84px;
opacity: 0;
will-change: transform, opacity;
animation: suviMorph 4s ease-in-out infinite;
}
/* learning → nivesh, cool navy → brand green */
.suvi-ic--1 { color: var(--ds-navy, #1E3A8A); animation-delay: 0s; } /* graduation cap */
.suvi-ic--2 { color: var(--ic-teal, #0F766E); animation-delay: 1s; } /* book */
.suvi-ic--3 { color: var(--ds-green, #4E8A35); animation-delay: 2s; } /* growth chart */
.suvi-ic--4 { color: var(--ds-green-dk,#3A6B27); animation-delay: 3s; } /* rupee */
/* enter from the left, hold, exit to the right → the "transform" reads L→R */
@keyframes suviMorph {
0% { opacity: 0; transform: translateX(-30px) scale(.82) rotate(-6deg); }
8% { opacity: 1; transform: translateX(0) scale(1) rotate(0deg); }
22% { opacity: 1; transform: translateX(0) scale(1) rotate(0deg); }
30% { opacity: 0; transform: translateX(30px) scale(.82) rotate(6deg); }
100% { opacity: 0; transform: translateX(30px) scale(.82) rotate(6deg); }
}
/* navy→green sweep underneath, also moving left→right */
.suvi-loader__track {
height: 4px;
width: 100%;
background: var(--primary-tint, rgba(30,58,138,.1));
border-radius: 999px;
overflow: hidden;
}
.suvi-loader__fill {
display: block;
height: 100%;
width: 38%;
border-radius: 999px;
background: linear-gradient(90deg, var(--ds-navy,#1E3A8A), var(--ds-green,#4E8A35));
animation: suviSlide 1.4s ease-in-out infinite;
}
@keyframes suviSlide {
0% { transform: translateX(-130%); }
100% { transform: translateX(330%); }
}
.suvi-loader__brand {
margin-top: 22px;
font-size: 24px;
font-weight: 800;
letter-spacing: .02em;
color: var(--ds-navy, #1E3A8A);
}
.suvi-loader__tag {
margin-top: 6px;
font-size: 12px;
letter-spacing: .04em;
text-transform: none;
color: var(--ds-muted, #5B6573);
}
/* Respect reduced-motion: hold the first state, no animation */
@media (prefers-reduced-motion: reduce) {
.suvi-ic, .suvi-loader__fill { animation: none; }
.suvi-ic--1 { opacity: 1; transform: none; }
.suvi-loader__fill { width: 100%; }
}
/* ═══════════════════════════════════════════════════════════
UTILITY ICON COLOR CLASSES
Defined AFTER the global .material-icons rule so cascade wins.
Usage: icon_name
Works with both Material Icons and Font Awesome.
═══════════════════════════════════════════════════════════ */
.ic-blue { color: var(--ic-blue) !important; }
.ic-green { color: var(--ic-green) !important; }
.ic-amber { color: var(--ic-amber) !important; }
.ic-purple { color: var(--ic-purple) !important; }
.ic-teal { color: var(--ic-teal) !important; }
.ic-red { color: var(--ic-red) !important; }
.ic-orange { color: var(--ic-orange) !important; }
.ic-pink { color: var(--ic-pink) !important; }
.ic-indigo { color: var(--ic-indigo) !important; }
.ic-cyan { color: var(--ic-cyan) !important; }
.ic-gray { color: var(--ic-gray) !important; }
.ic-navy { color: var(--ds-navy) !important; }
.ic-white { color: #ffffff !important; }
/* ═══════════════════════════════════════════════════════════
LANDING PAGE STYLES
Self-contained — all rules scoped under .landing-* classes.
═══════════════════════════════════════════════════════════ */
/* ── Hero ────────────────────────────────────────────────── */
.landing-hero {
background: var(--ds-green-deep);
padding: 80px 0 60px;
position: relative;
overflow: hidden;
}
.landing-hero::before {
content: '';
position: absolute;
top: -80px; right: -80px;
width: 420px; height: 420px;
background: radial-gradient(circle, rgba(227,189,99,0.16) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.landing-hero::after {
content: '';
position: absolute;
bottom: -100px; left: 8%;
width: 320px; height: 320px;
background: radial-gradient(circle, rgba(168,198,106,0.16) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.landing-hero--about { padding: 60px 0 44px; }
.landing-hero-row { display: flex !important; align-items: center !important; flex-wrap: wrap !important; }
.landing-hero-left { position: relative; z-index: 1; }
.landing-hero-right { position: relative; z-index: 1; margin-top: 8px; }
.landing-badge {
display: inline-block;
background: rgba(227,189,99,0.15);
color: var(--ds-gold-lt);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.2px;
padding: 5px 14px;
border-radius: 20px;
border: 1px solid rgba(227,189,99,0.38);
margin-bottom: 20px;
}
.landing-headline {
font-size: 36px !important;
font-weight: 700 !important;
color: #fff !important;
line-height: 1.18 !important;
letter-spacing: -0.02em !important;
margin-bottom: 18px !important;
}
.landing-accent { color: var(--ds-gold-lt); }
.landing-sub {
font-size: 15px !important;
color: rgba(255,255,255,0.70) !important;
line-height: 1.68 !important;
margin-bottom: 30px !important;
max-width: 500px;
}
/* ── CTA buttons ─────────────────────────────────────────── */
.landing-cta-group {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 36px;
}
.landing-btn-primary {
background: #fff !important;
background-image: none !important;
color: var(--ds-navy) !important;
border: 1.5px solid var(--ds-navy) !important;
border-radius: 8px !important;
padding: 13px 22px !important;
font-size: 14px !important;
font-weight: 600 !important;
box-shadow: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
line-height: 1 !important;
transition: background 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out !important;
text-decoration: none !important;
}
.landing-btn-primary:hover {
background: var(--primary-tint) !important;
color: var(--ds-navy) !important;
border-color: var(--ds-navy-lt) !important;
text-decoration: none !important;
box-shadow: none !important;
}
.landing-btn-primary .material-icons { font-size: 17px !important; color: var(--ds-navy) !important; }
.landing-btn-outline {
background: transparent !important;
background-image: none !important;
color: rgba(255,255,255,0.82) !important;
border: 1px solid rgba(255,255,255,0.28) !important;
border-radius: 8px !important;
padding: 13px 22px !important;
font-size: 14px !important;
font-weight: 500 !important;
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
line-height: 1 !important;
transition: all 150ms ease-out !important;
text-decoration: none !important;
}
.landing-btn-outline:hover {
background: rgba(255,255,255,0.09) !important;
color: #fff !important;
border-color: rgba(255,255,255,0.48) !important;
text-decoration: none !important;
}
.landing-btn-outline .material-icons { font-size: 17px !important; color: rgba(255,255,255,0.82) !important; }
/* ── Stats strip ─────────────────────────────────────────── */
.landing-stats { display: flex; gap: 30px; padding-top: 4px; }
.landing-stat strong {
display: block;
font-size: 21px !important;
font-weight: 700 !important;
color: var(--ds-gold-lt) !important;
line-height: 1.2 !important;
}
.landing-stat span {
font-size: 12px !important;
color: rgba(255,255,255,0.50) !important;
font-weight: 400 !important;
}
/* ── Auth card on hero ────────────────────────────────────── */
.landing-auth-card {
border: 1px solid rgba(255,255,255,0.10) !important;
background: rgba(255,255,255,0.05) !important;
border-radius: 16px !important;
overflow: hidden !important;
box-shadow: 0 12px 48px rgba(0,0,0,0.28) !important;
}
.landing-auth-header {
padding: 22px 24px 14px;
border-bottom: 1px solid rgba(255,255,255,0.09);
}
.landing-auth-header h4 {
color: #fff !important;
font-size: 16px !important;
margin: 0 0 4px !important;
}
.landing-auth-header p {
color: rgba(255,255,255,0.50) !important;
font-size: 12px !important;
margin: 0 !important;
}
.landing-auth-body { padding: 18px 22px 22px; }
.landing-auth-btn {
display: flex !important;
align-items: center !important;
gap: 14px !important;
width: 100% !important;
padding: 13px 16px !important;
border-radius: 10px !important;
text-decoration: none !important;
transition: all 150ms ease-out !important;
text-align: left !important;
margin-bottom: 10px !important;
line-height: 1 !important;
box-shadow: none !important;
}
.landing-auth-btn--primary {
background: #fff !important;
border: 1px solid #fff !important;
color: var(--ds-navy) !important;
}
.landing-auth-btn--primary:hover {
background: rgba(255,255,255,0.90) !important;
color: var(--ds-navy) !important;
text-decoration: none !important;
}
.landing-auth-btn--secondary {
background: rgba(255,255,255,0.07) !important;
border: 1px solid rgba(255,255,255,0.13) !important;
color: rgba(255,255,255,0.82) !important;
}
.landing-auth-btn--secondary:hover {
background: rgba(255,255,255,0.13) !important;
color: #fff !important;
text-decoration: none !important;
}
.landing-auth-btn .material-icons { font-size: 22px !important; flex-shrink: 0; }
.landing-auth-btn--primary .material-icons { color: var(--ds-navy) !important; }
.landing-auth-btn--secondary .material-icons { color: rgba(255,255,255,0.65) !important; }
.landing-auth-btn strong {
display: block;
font-size: 13px !important;
font-weight: 600 !important;
color: inherit !important;
margin-bottom: 2px;
}
.landing-auth-btn span {
font-size: 11px !important;
color: rgba(255,255,255,0.50) !important;
font-weight: 400 !important;
}
.landing-auth-btn--primary span { color: var(--ds-muted) !important; }
.landing-auth-divider {
position: relative;
text-align: center;
margin: 10px 0;
}
.landing-auth-divider::before {
content: '';
position: absolute;
top: 50%; left: 0; right: 0;
height: 1px;
background: rgba(255,255,255,0.09);
}
.landing-auth-divider span {
position: relative;
z-index: 1;
font-size: 11px !important;
color: rgba(255,255,255,0.38) !important;
background: transparent;
padding: 0 8px;
}
/* ── Content sections ────────────────────────────────────── */
.landing-section { padding: 60px 0; }
.landing-section--alt { background: var(--ds-surface2); }
.landing-section-header { margin-bottom: 36px; }
.landing-section-header h2 {
color: var(--ds-text) !important;
font-size: 24px !important;
margin-bottom: 8px !important;
}
.landing-section-header p {
color: var(--ds-muted) !important;
font-size: 14px !important;
margin: 0 !important;
}
/* ── Feature cards ───────────────────────────────────────── */
.landing-feature-card {
background: var(--ds-surface);
border: 1px solid var(--ds-border);
border-radius: var(--r-lg);
padding: 22px;
margin-bottom: 22px;
height: calc(100% - 22px);
transition: box-shadow 200ms ease-out, transform 200ms ease-out;
}
.landing-feature-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.landing-feature-icon {
width: 46px; height: 46px;
border-radius: var(--r-md);
display: flex; align-items: center; justify-content: center;
margin-bottom: 14px;
}
.landing-feature-icon .material-icons { font-size: 23px !important; color: inherit !important; }
.landing-feature-card h4 {
font-size: 14px !important; font-weight: 600 !important;
margin-bottom: 6px !important; color: var(--ds-text) !important;
}
.landing-feature-card p {
font-size: 13px !important; color: var(--ds-muted) !important;
margin: 0 !important; line-height: 1.62 !important;
}
/* ── Topic list ──────────────────────────────────────────── */
.landing-topic-list { padding-right: 28px; }
.landing-topic-list h3 { font-size: 19px !important; margin-bottom: 20px !important; color: var(--ds-text) !important; }
.landing-topic-item {
display: flex; align-items: flex-start; gap: 13px;
padding: 13px 0;
border-bottom: 1px solid var(--ds-border-lt);
}
.landing-topic-item:last-child { border-bottom: none; }
.landing-topic-item .material-icons { font-size: 21px !important; flex-shrink: 0; margin-top: 1px; color: inherit !important; }
.landing-topic-item strong { display: block; font-size: 13px !important; font-weight: 600 !important; color: var(--ds-text) !important; margin-bottom: 2px; }
.landing-topic-item span { font-size: 12px !important; color: var(--ds-muted) !important; }
/* ── Earn card ───────────────────────────────────────────── */
.landing-earn-card {
background: var(--ds-navy) !important;
border: none !important; border-radius: var(--r-lg) !important;
padding: 26px !important;
}
.landing-earn-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.landing-earn-header .material-icons { font-size: 26px !important; color: var(--ds-green-lt) !important; }
.landing-earn-header h3 { color: #fff !important; font-size: 18px !important; margin: 0 !important; }
.landing-earn-card > p { font-size: 13px !important; color: rgba(255,255,255,0.62) !important; margin-bottom: 18px !important; line-height: 1.65 !important; }
.landing-earn-points { display: flex; flex-direction: column; gap: 9px; }
.landing-earn-point { display: flex; align-items: center; gap: 9px; }
.landing-earn-point .material-icons { font-size: 17px !important; flex-shrink: 0; }
.landing-earn-point span { font-size: 13px !important; color: var(--ds-text) !important; }
.landing-earn-card .landing-earn-point .material-icons { color: var(--ds-green-lt) !important; }
.landing-earn-card .landing-earn-point span { color: rgba(255,255,255,0.78) !important; }
/* ── How it works steps ──────────────────────────────────── */
.landing-step { text-align: center; padding: 0 16px; }
.landing-step-num {
width: 42px; height: 42px;
background: var(--ds-navy); color: #fff;
font-size: 17px; font-weight: 700;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 16px;
}
.landing-step h4 { font-size: 14px !important; font-weight: 600 !important; margin-bottom: 7px !important; color: var(--ds-text) !important; }
.landing-step p { font-size: 13px !important; color: var(--ds-muted) !important; line-height: 1.6 !important; }
/* ── Footer CTA band ─────────────────────────────────────── */
.landing-cta-section { background: var(--ds-green-deep); padding: 56px 0; }
.landing-cta-section h2 { color: #fff !important; font-size: 22px !important; margin-bottom: 9px !important; }
.landing-cta-section p { color: rgba(255,255,255,0.62) !important; font-size: 14px !important; margin-bottom: 26px !important; }
/* ── Offer items (about page) ────────────────────────────── */
.landing-offer-item { display: flex; align-items: flex-start; gap: 15px; padding: 16px 0; border-bottom: 1px solid var(--ds-border-lt); }
.landing-offer-item:last-child { border-bottom: none; }
.landing-offer-item .material-icons { font-size: 24px !important; flex-shrink: 0; margin-top: 2px; color: inherit !important; }
.landing-offer-item h4 { font-size: 14px !important; font-weight: 600 !important; margin-bottom: 3px !important; color: var(--ds-text) !important; }
.landing-offer-item p { font-size: 13px !important; color: var(--ds-muted) !important; margin: 0 !important; line-height: 1.6 !important; }
/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 767px) {
.landing-hero { padding: 56px 0 36px; }
.landing-headline { font-size: 24px !important; }
.landing-sub { font-size: 14px !important; }
.landing-stats { gap: 18px; }
.landing-stat strong { font-size: 18px !important; }
.landing-hero-right { margin-top: 28px; }
.landing-cta-group { flex-direction: column; }
.landing-btn-primary,
.landing-btn-outline { width: 100% !important; justify-content: center !important; }
.landing-section { padding: 36px 0; }
.landing-topic-list { padding-right: 0; margin-bottom: 28px; }
.landing-step { padding: 0 4px; margin-bottom: 28px; }
.landing-cta-section { padding: 36px 0; }
.landing-cta-section h2 { font-size: 19px !important; }
.landing-feature-card { height: auto; }
}
/* ═══════════════════════════════════════════════════════════
MARKETPLACE LANDING — extended component set
═══════════════════════════════════════════════════════════ */
/* ── Marketplace product grid (5 items) ──────────────────── */
.landing-marketplace-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
}
.landing-marketplace-item {
background: var(--ds-surface);
border: 1px solid var(--ds-border);
border-radius: var(--r-lg);
padding: 20px 14px;
text-align: center;
transition: box-shadow 200ms ease-out, transform 200ms ease-out;
}
.landing-marketplace-item:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.landing-marketplace-item-icon {
width: 44px; height: 44px;
border-radius: var(--r-md);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 10px;
}
.landing-marketplace-item-icon .material-icons { font-size: 22px !important; color: inherit !important; }
.landing-marketplace-item .creator-tag {
display: inline-block;
font-size: 10px !important;
font-weight: 600 !important;
text-transform: uppercase;
letter-spacing: 0.8px;
padding: 2px 8px;
border-radius: 10px;
margin-bottom: 8px;
}
.landing-marketplace-item h4 {
font-size: 13px !important; font-weight: 600 !important;
margin-bottom: 6px !important; color: var(--ds-text) !important;
}
.landing-marketplace-item p {
font-size: 11.5px !important; color: var(--ds-muted) !important;
margin: 0 !important; line-height: 1.55 !important;
}
/* ── Creator panel (dark navy full-width band) ───────────── */
.landing-creator-panel { background: var(--ds-navy); padding: 60px 0; }
.landing-creator-panel .landing-section-header h2 { color: #fff !important; }
.landing-creator-panel .landing-section-header p { color: rgba(255,255,255,0.58) !important; }
.landing-creator-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 28px;
}
/* Base creator-step = LIGHT section (e.g. the NISM ladder).
The dark-panel variant is scoped under .landing-creator-panel below. */
.landing-creator-step {
background: var(--ds-surface);
border: 1px solid var(--ds-border);
border-radius: var(--r-lg);
padding: 20px 16px;
text-align: center;
}
.landing-creator-step-icon {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--primary-tint);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 12px;
}
.landing-creator-step-icon .material-icons { font-size: 20px !important; color: var(--ds-navy) !important; }
.landing-creator-step h4 { color: var(--ds-text) !important; font-size: 13px !important; font-weight: 600 !important; margin-bottom: 5px !important; }
.landing-creator-step p { color: var(--ds-muted) !important; font-size: 12px !important; line-height: 1.55 !important; margin: 0 !important; }
/* Dark navy creator panel — white text on translucent fills */
.landing-creator-panel .landing-creator-step {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
}
.landing-creator-panel .landing-creator-step-icon { background: rgba(255,255,255,0.10); }
.landing-creator-panel .landing-creator-step-icon .material-icons { color: rgba(255,255,255,0.88) !important; }
.landing-creator-panel .landing-creator-step h4 { color: #fff !important; }
.landing-creator-panel .landing-creator-step p { color: rgba(255,255,255,0.55) !important; }
.landing-creator-trust {
display: flex; gap: 18px; flex-wrap: wrap;
justify-content: center; margin-bottom: 28px;
}
.landing-creator-trust-item {
display: flex; align-items: center; gap: 7px;
font-size: 13px !important; color: rgba(255,255,255,0.78) !important;
}
.landing-creator-trust-item .material-icons { font-size: 16px !important; color: var(--ds-green-lt) !important; }
/* ── Topic pills strip ───────────────────────────────────── */
.landing-topics-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.landing-topic-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 7px 13px;
background: var(--ds-surface);
border: 1px solid var(--ds-border);
border-radius: 20px;
font-size: 12px !important; font-weight: 500 !important;
color: var(--ds-text) !important;
transition: all 150ms ease-out;
text-decoration: none !important;
}
.landing-topic-pill:hover { border-color: var(--ds-green); color: var(--ds-green-dk) !important; text-decoration: none !important; }
.landing-topic-pill .material-icons { font-size: 14px !important; color: inherit !important; }
/* ── Community grid (3 cols) ─────────────────────────────── */
.landing-community-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.landing-community-item {
background: var(--ds-surface);
border: 1px solid var(--ds-border);
border-radius: var(--r-lg);
padding: 22px;
}
.landing-community-item > .material-icons { font-size: 26px !important; margin-bottom: 10px !important; display: block; }
.landing-community-item h4 { font-size: 14px !important; font-weight: 600 !important; margin-bottom: 6px !important; color: var(--ds-text) !important; }
.landing-community-item p { font-size: 12.5px !important; color: var(--ds-muted) !important; margin: 0 !important; line-height: 1.6 !important; }
/* ── Two-track how-it-works ──────────────────────────────── */
.landing-two-track { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.landing-track { border: 1px solid var(--ds-border); border-radius: var(--r-lg); overflow: hidden; }
.landing-track-header { padding: 16px 20px; display: flex; align-items: center; gap: 10px; }
.landing-track-header--creator { background: var(--ds-navy); }
.landing-track-header--learner { background: var(--ds-green); }
.landing-track-header .material-icons { font-size: 20px !important; color: #fff !important; }
.landing-track-header h3 { color: #fff !important; font-size: 15px !important; margin: 0 !important; }
.landing-track-body { padding: 14px 20px; background: var(--ds-surface); }
.landing-track-step {
display: flex; align-items: flex-start; gap: 12px;
padding: 11px 0;
border-bottom: 1px solid var(--ds-border-lt);
}
.landing-track-step:last-child { border-bottom: none; padding-bottom: 4px; }
.landing-track-step-num {
width: 22px; height: 22px; border-radius: 50%;
font-size: 11px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; color: #fff; margin-top: 1px;
}
.landing-track-step-num--creator { background: var(--ds-navy); }
.landing-track-step-num--learner { background: var(--ds-green); }
.landing-track-step strong { display: block; font-size: 13px !important; font-weight: 600 !important; color: var(--ds-text) !important; margin-bottom: 2px; }
.landing-track-step span { font-size: 12px !important; color: var(--ds-muted) !important; line-height: 1.5; }
/* ── Problem section (about page — 2 col contrast panels) ── */
.landing-problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.landing-problem-side { border-radius: var(--r-lg); padding: 28px; }
.landing-problem-side--creator { background: var(--ds-navy); }
.landing-problem-side--learner { background: #F0FDF4; border: 1px solid #BBF7D0; }
.landing-problem-side h3 { font-size: 16px !important; margin-bottom: 10px !important; }
.landing-problem-side--creator h3 { color: #fff !important; }
.landing-problem-side--learner h3 { color: var(--ds-text) !important; }
.landing-problem-side p { font-size: 13px !important; line-height: 1.65 !important; margin: 0 !important; }
.landing-problem-side--creator p { color: rgba(255,255,255,0.65) !important; }
.landing-problem-side--learner p { color: #3A6B27 !important; }
.landing-problem-side > .material-icons { font-size: 28px !important; margin-bottom: 12px !important; display: block; }
.landing-problem-side--creator > .material-icons { color: var(--ds-green-lt) !important; }
.landing-problem-side--learner > .material-icons { color: var(--ds-green) !important; }
/* ── Responsive: marketplace additions ───────────────────── */
@media (max-width: 767px) {
.landing-marketplace-grid { grid-template-columns: repeat(2, 1fr); }
.landing-marketplace-item:nth-child(5) { grid-column: 1 / -1; }
.landing-creator-steps { grid-template-columns: repeat(2, 1fr); }
.landing-creator-panel { padding: 40px 0; }
.landing-community-grid { grid-template-columns: 1fr; }
.landing-two-track { grid-template-columns: 1fr; }
.landing-problem-grid { grid-template-columns: 1fr; }
.landing-topic-pill { font-size: 11px !important; padding: 5px 10px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
.landing-marketplace-grid { grid-template-columns: repeat(3, 1fr); }
.landing-creator-steps { grid-template-columns: repeat(2, 1fr); }
}
/* ═══════════════════════════════════════════════════════════
LIVE TEST INTERFACE — brand chrome
online_test_base(.v2) now loads this file, so the test-taking
screen inherits the theme. The numbered question-palette
buttons are a sprite PNG (exam_button_sprite.png) and keep
their own colors; everything else around them is rebranded.
═══════════════════════════════════════════════════════════ */
/* Timer — navy, not slate-gray */
.countdown_timer,
.test_timer_box {
background: var(--ds-navy) !important;
color: #fff !important;
border-radius: var(--r-sm) !important;
}
.test_timer_box .countdown,
.test_timer_box .countdown li p,
.countdown_timer .countdown li p { color: rgba(255,255,255,0.85) !important; }
/* Right column (question palette panel) — warm surface */
.test_right_col { background: var(--ds-surface2) !important; }
/* Bottom action strip — surface with hairline, not flat gray */
.online_test_bottom_strip {
background: var(--ds-surface) !important;
border-top: 1px solid var(--ds-border) !important;
}
/* Option rows — brand hover + selected state */
.online_test .question_option:hover { background: var(--ds-surface2) !important; }
.online_test .question_option.selected,
.online_test .question_option.checked {
background: var(--primary-tint) !important;
border-color: var(--ds-navy) !important;
}
/* Section fieldset legend on the test page */
.online_test_section_fieldset legend {
color: var(--ds-heading) !important;
font-weight: 600 !important;
}
/* Palette legend swatches — keep semantic colors aligned to brand tokens */
.pie_chart_legend span.color_box { border-radius: 3px !important; }
/* Test-taking submit / nav buttons inherit .live_test_dark_btn /
.live_test_light_btn rules defined above. */
/* ═══════════════════════════════════════════════════════════
CONTRAST SAFETY NET
Bug: dark brand surfaces (navy #1E3A8A / legacy teal #022d33)
were showing BLACK text. Root cause: broad rules such as
`.articles-list-box p/span/li { color: var(--ds-text) }` and
legacy style.css text colors force dark text onto any element
inside them — including dark-coloured sub-sections — so text
on a blue background became invisible.
This block re-asserts light text on every known dark surface
and its text descendants. It is the LAST rule in the file, so
at equal specificity it wins the cascade. Buttons, labels,
badges and pills keep their own colours (excluded below).
═══════════════════════════════════════════════════════════ */
/* The dark surfaces themselves */
.header-primary,
.form-header,
.form-header-modal,
.profile-content,
.theme_background_color,
.theme-background-image,
.wrapper .top-navbar-height,
.countdown_timer,
.test_timer_box,
.theme-text-color {
color: #ffffff !important;
}
/* Text descendants of dark surfaces → light.
Specificity (0,0,1,1) matches `.articles-list-box span`; placed
later in the file, so it wins. Excludes interactive chrome that
carries its own colour. */
.header-primary :is(p, span, li, small, strong, b, label, h1, h2, h3, h4, h5, h6),
.form-header :is(p, span, li, small, strong, b, label, h1, h2, h3, h4, h5, h6),
.form-header-modal :is(p, span, li, small, strong, b, label, h1, h2, h3, h4, h5, h6),
.profile-content :is(p, span, li, small, strong, b, label, h1, h2, h3, h4, h5, h6),
.theme_background_color :is(p, span, li, small, strong, b, label, h1, h2, h3, h4, h5, h6),
.theme-background-image :is(p, span, li, small, strong, b, label, h1, h2, h3, h4, h5, h6) {
color: #ffffff !important;
}
/* Plain links on dark surfaces (not buttons / pills / CTAs) → light */
.header-primary a:not(.btn):not(.label):not([class*="-cta"]):not([class*="-pill"]),
.profile-content a:not(.btn):not(.label):not([class*="-cta"]):not([class*="-pill"]),
.theme_background_color a:not(.btn):not(.label):not([class*="-cta"]):not([class*="-pill"]),
.theme-background-image a:not(.btn):not(.label):not([class*="-cta"]):not([class*="-pill"]) {
color: rgba(255,255,255,0.88) !important;
}
/* Inverse guard: `.theme-background-color` is whitesmoke (LIGHT),
not blue — keep its text dark so it never inherits white. */
.theme-background-color,
.theme-background-color :is(p, span, li, small, strong, b, label) {
color: var(--ds-text) !important;
}
/* ── Interaction states that flip to a navy fill → white text ──
Bootstrap/Material legacy `.open`, `.active`, `:focus` states on
nav items and buttons could paint a blue background while the
text stayed dark. Force the foreground to follow the fill. */
.navbar .nav .open > a,
.navbar .nav .open > a:hover,
.navbar .nav .open > a:focus,
.nav .open > a.dropdown-toggle {
background: transparent !important;
color: var(--ds-navy) !important;
}
.btn-group .btn.active,
.btn-group .btn.active:focus,
.list-group-item.active,
.list-group-item.active:hover {
background: var(--ds-navy) !important;
border-color: var(--ds-navy) !important;
color: #ffffff !important;
}
.list-group-item.active :is(p, span, small, h1, h2, h3, h4, h5, h6) {
color: #ffffff !important;
}
/* ═══════════════════════════════════════════════════════════
DROPDOWN ICON SIZING & SPACING
Bug: Material Icons inherit the 24px base size, dwarfing the
13px dropdown text and breaking vertical rhythm. Normalise
every dropdown icon to a consistent box so menus read clean
and on-brand. */
.dropdown-menu li > a > .material-icons,
.notifications-lists li > a > .material-icons {
font-size: 18px !important;
width: 20px !important;
text-align: center !important;
vertical-align: -4px !important;
margin-right: 10px !important;
line-height: 1 !important;
}
.dropdown-menu li > a > .fa,
.dropdown-menu li > a > .fas,
.dropdown-menu li > a > .far,
.dropdown-menu li > a > .fab,
.notifications-lists li > a > .fa,
.notifications-lists li > a > .fas {
font-size: 14px !important;
width: 20px !important;
text-align: center !important;
margin-right: 10px !important;
}
/* Settings toggle gear / person icon in the navbar — size to match */
.navbar .dropdown > .dropdown-toggle > .material-icons {
font-size: 22px !important;
vertical-align: middle !important;
}
/* ═══════════════════════════════════════════════════════════
PROSPERITY REBRAND — platform-wide flip (2026)
The landing hero already flipped navy → deep prosperity green
with gold accents. This block carries that flip across the
logged-in platform so the app no longer reads all-navy:
• Big dark chrome (top navbar, card/form/modal headers,
footer) → deep prosperity green (--ds-green-deep)
• Primary action surfaces (primary buttons, add buttons,
active nav/list states, ribbons) → prosperity green
• Money / score figures → wealth gold (--ds-gold)
Navy is kept for headings, body text and links as the quiet
trust note. Placed LAST so at equal specificity it wins the
cascade; selectors mirror the originals exactly. Tweak the two
token values (--ds-green-deep / --ds-gold) to retune.
═══════════════════════════════════════════════════════════ */
/* Big dark chrome → deep prosperity green */
.theme-background-image { background-color: var(--ds-green-deep) !important; }
.theme_background_color { background-color: var(--ds-green-deep) !important; }
.wrapper .top-navbar-height { background-color: var(--ds-green-deep) !important; }
.theme-background-image,
.theme_background_color,
.card .header-primary,
.custom-card > .header-primary,
.header.header-primary.form-header,
.header.header-primary.form-header-modal,
.modal-header .header-primary,
.modal-header .form-header-modal,
.form-header-modal.header-primary,
footer.footer {
background: var(--ds-green-deep) !important;
}
/* Primary action surfaces → prosperity green (growth = action) */
.btn.btn-primary, .btn-primary {
background: var(--ds-green) !important;
border-color: var(--ds-green) !important;
}
.add-student-btn,
.add-student-btn:hover,
.add-student-btn:active,
.add-student-btn:focus { background: var(--ds-green) !important; }
.add_btn { border-color: var(--ds-green) !important; color: var(--ds-green) !important; }
.add_btn:hover { background: var(--ds-green) !important; color: #fff !important; }
.sp_ribbon_class { background: var(--ds-green) !important; }
/* Active / selected states → prosperity green */
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover { background: var(--ds-green) !important; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
color: var(--ds-green-dk) !important;
border-bottom: 2px solid var(--ds-green) !important;
}
.live_test_light_btn.active,
.add_test_section_tabs > li > a:hover {
background: var(--ds-green) !important;
border-color: var(--ds-green) !important;
}
.btn-group .btn.active,
.btn-group .btn.active:focus,
.list-group-item.active,
.list-group-item.active:hover {
background: var(--ds-green) !important;
border-color: var(--ds-green) !important;
}
/* Money / score figures → wealth gold */
.report_data { color: var(--ds-gold) !important; }
/* ── Completion sweep ──────────────────────────────────────────
Every remaining navy SURFACE / BUTTON / BANNER / TILE-accent /
SELECTED state flipped to prosperity green so nothing reads as
old-brand blue. Navy is intentionally retained only on TEXT —
headings, body links and in-text icons (the trust note). */
/* Primary / submit / test action buttons */
.btn.btn-submit, .form-btn .btn-submit,
.live_test_dark_btn {
background: var(--ds-green) !important;
border-color: var(--ds-green) !important;
}
.comment_reply_btn { border-color: var(--ds-green) !important; color: var(--ds-green-dk) !important; }
.comment_reply_btn:hover { background: var(--ds-green) !important; color: #fff !important; }
/* Dark banners with white text → deep prosperity green */
.article-user-info .profile-content,
.countdown_timer,
.test_timer_box { background: var(--ds-green-deep) !important; }
/* Chips / labels / badges */
.label-primary { background: var(--ds-green) !important; }
.badge { background: var(--ds-green) !important; }
/* Progress bars (growth) */
.progress-bar { background: var(--ds-green) !important; }
/* Tile / list accent stripes */
.feed-right-side-section .panel .panel-heading,
.institute_lists { border-left-color: var(--ds-green) !important; }
/* Tile hover borders */
.add_test_box:hover,
.live_test_light_btn:hover { border-color: var(--ds-green) !important; }
/* Selected form controls (checkbox / radio) → green */
.radio input[type=radio]:checked ~ .check { background-color: var(--ds-green) !important; }
.radio input[type=radio]:checked ~ .circle { border-color: var(--ds-green) !important; }
.checkbox input[type=checkbox]:checked + .checkbox-material .check { background: var(--ds-green) !important; }
/* Selected test option → green tint + green border */
.online_test .question_option.selected,
.online_test .question_option.checked {
background: rgba(78,138,53,0.08) !important;
border-color: var(--ds-green) !important;
}
/* Focus affordance → green ring across all inputs */
.input-group .form-control:focus,
.form-control:focus,
.input-lg.text-center:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.comment_text_area:focus,
.reply_text_area:focus {
border-color: var(--ds-green) !important;
box-shadow: 0 0 0 3px rgba(78,138,53,0.12) !important;
}
.form-group.is-focused .form-control {
background-image: linear-gradient(var(--ds-green), var(--ds-green)),
linear-gradient(var(--ds-border), var(--ds-border)) !important;
}
/* ════════════════════════════════════════════════════════════
FEED SIDEBARS — brand growth modules (NISM ladder, outcomes,
explore nav). Reinforces the project spine: the legible path
from beginner to a SEBI-regulated job.
════════════════════════════════════════════════════════════ */
/* Shared small note text in side panels */
.ds-side-note { font-size: 12px; color: var(--ds-muted); line-height: 1.5; margin: 0 0 12px; }
/* ── NISM ladder card ─────────────────────────────────────── */
.ds-ladder { list-style: none; margin: 0 0 14px; padding: 0; }
.ds-ladder > li {
display: flex; align-items: center; gap: 10px;
padding: 7px 0; font-size: 12.5px; color: var(--ds-text);
}
.ds-ladder > li + li { border-top: 1px dashed var(--ds-border); }
.ds-rung {
flex-shrink: 0; min-width: 44px; height: 26px; padding: 0 6px; border-radius: 6px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--primary-tint); color: var(--ds-navy);
font-weight: 700; font-size: 11px; letter-spacing: 0.2px;
}
.ds-ladder > li:first-child .ds-rung { background: var(--ds-green); color: #fff; }
.ds-rung-text { line-height: 1.35; }
.ds-rung-tag {
display: inline-block; margin-left: 4px; font-style: normal; font-weight: 600;
font-size: 10px; color: var(--ds-green-dk); background: #E8F2DF;
padding: 1px 6px; border-radius: 10px; vertical-align: 1px;
}
.ds-ladder-cta { margin-top: 2px !important; font-weight: 600 !important; }
/* Accent the ladder card so the growth module reads as the hero of the rail */
.ds-ladder-panel .panel-heading { border-left-color: var(--ds-green) !important; }
/* ── Outcomes card ────────────────────────────────────────── */
.ds-outcomes { font-size: 12.5px; }
.ds-outcome {
display: flex; align-items: baseline; justify-content: space-between;
gap: 8px; padding: 6px 0;
}
.ds-outcome + .ds-outcome { border-top: 1px solid var(--ds-border-lt); }
.ds-outcome-role { color: var(--ds-text); font-weight: 600; }
.ds-outcome-pay { color: var(--ds-gold); font-weight: 700; font-size: 11.5px; white-space: nowrap; }
.ds-side-link {
display: inline-flex; align-items: center; gap: 5px;
margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--ds-navy);
}
.ds-side-link:hover { color: var(--ds-navy-lt); text-decoration: underline; }
/* ── Announcements ────────────────────────────────────────── */
.ds-announcement { display: flex; gap: 8px; align-items: flex-start; padding: 7px 0; color: var(--ds-text); }
.ds-announcement .fa-bullhorn { color: var(--ds-gold) !important; margin-top: 2px; font-size: 12px; }
.ds-announcement small { font-size: 12px; line-height: 1.5; color: var(--ds-text); }
.ds-announcement:hover { text-decoration: none; }
.ds-announcement:hover small { color: var(--ds-navy); }
.ds-empty-note { font-size: 12px; color: var(--ds-muted); line-height: 1.5; margin: 0; }
.ds-panel-add, .ds-panel-add .fa-plus { color: var(--ds-green) !important; }
/* ── Left "Explore" learning nav ──────────────────────────── */
.ds-explore { padding: 4px 0 6px; }
.ds-explore-title {
display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.8px; color: var(--ds-muted); padding: 4px 14px 8px;
}
.ds-explore-link {
display: flex !important; align-items: center; gap: 12px;
padding: 9px 14px; color: var(--ds-text) !important; font-weight: 500; font-size: 13.5px;
border-left: 3px solid transparent;
transition: background 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
.ds-explore-link:hover {
background: var(--ds-surface2); color: var(--ds-navy) !important;
text-decoration: none; border-left-color: var(--ds-navy);
}
.ds-explore-ic { font-size: 20px !important; }
.ds-explore-ic.ic-study { color: var(--ic-amber) !important; }
.ds-explore-ic.ic-course { color: var(--ic-purple) !important; }
.ds-explore-ic.ic-test { color: var(--ic-green) !important; }
.ds-explore-ic.ic-discuss { color: var(--ic-pink) !important; }
/* ── Feed empty state (mid column) ────────────────────────── */
.ds-feed-empty { text-align: center; padding: 40px 24px !important; }
.ds-feed-empty-ic { font-size: 44px !important; color: var(--ds-green) !important; }
.ds-feed-empty-title { margin: 12px 0 6px !important; color: var(--ds-text) !important; }
.ds-feed-empty-note { font-size: 13px; color: var(--ds-muted); max-width: 360px; margin: 0 auto 16px; line-height: 1.55; }
.ds-feed-empty-cta { font-weight: 600 !important; padding: 10px 22px !important; }
/* ════════════════════════════════════════════════════════════
COMMENT / ANSWER / REPLY COMPOSER — keep avatar + input on one row.
Each composer form carries an inline `width: calc(100% - Npx) !important`
that a stylesheet cannot override. The avatar previously sat in inline
flow, where collapsed whitespace between the and the