/* Blog Website main design. This is the previous CDN-version styling moved to a local CSS file. */
html { scroll-behavior: smooth; }
/* Hide theme/plugin floating call and scroll buttons on Blog Website pages. */
a[href^="tel:"], .call-now-button, .call-now, .floating-call, .float-call, .sticky-call, .phone-call, .call-button, .whatsapp-call, .ht-ctc-chat, .ctc-analytics, #ast-scroll-top, .ast-scroll-top-icon, .scroll-to-top, .back-to-top, .hfe-scroll-to-top, .eael-ext-scroll-to-top-button { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
body { background: linear-gradient(135deg, #fff7ed 0%, #fdf2f8 50%, #eff6ff 100%); color: #1e293b; }
.bw-wrap, .bw-wrap * { box-sizing: border-box; }
.bw-wrap a { text-decoration: none; }
.bw-full-bleed { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; overflow-x: hidden; }
.site-main .bw-full-bleed, .entry-content .bw-full-bleed, .content-area .bw-full-bleed { max-width: 100vw !important; }
.bw-bg { background: radial-gradient(circle at 0% 0%, rgba(249,115,22,.18), transparent 28%), radial-gradient(circle at 100% 0%, rgba(99,102,241,.16), transparent 26%), linear-gradient(135deg, #fff7ed 0%, #fdf2f8 45%, #eef2ff 100%); }
.bw-page-inner { max-width: 1680px; margin: 0 auto; padding: 2rem 1.75rem 3rem; }
.bw-layout { display: grid; grid-template-columns: minmax(0, 80%) minmax(260px, 20%); gap: 2rem; align-items: start; }
.bw-home-main, .bw-sidebar { min-width: 0; }
.bw-hero { position: relative; background-size: cover; background-position: center center; min-height: 297px; border-radius: 0; box-shadow: none; }
.bw-hero::before { content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.10), transparent 32%); }
.bw-hero > * { position: relative; z-index: 1; }
.bw-hero-home { background-image: url("../image/loginHero.png"); }
.bw-hero-auth { background-image: linear-gradient(110deg, rgba(15,23,42,.90), rgba(67,56,202,.45), rgba(236,72,153,.26)), url("../image/login.png"); }
.bw-hero-write { background-image: linear-gradient(110deg, rgba(15,23,42,.88), rgba(249,115,22,.45), rgba(67,56,202,.40)), url("../image/Add.png"); }
.bw-hero-dashboard { background-image: linear-gradient(110deg, rgba(15,23,42,.92), rgba(30,64,175,.50), rgba(236,72,153,.28)), url("../image/dashboard.png"); background-position: center center; }
.bw-hero-profile { background-image: linear-gradient(110deg, rgba(15,23,42,.90), rgba(14,165,233,.40), rgba(99,102,241,.42)), url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1800&q=85"); }
.bw-hero-detail, .bw-hero-general { background-image: linear-gradient(110deg, rgba(15,23,42,.90), rgba(124,45,18,.48), rgba(67,56,202,.35)), url("https://images.unsplash.com/photo-1495020689067-958852a7765e?auto=format&fit=crop&w=1800&q=85"); }
.bw-hero-inner { max-width: 1680px; margin: 0 auto; padding: 1.25rem 1.5rem 2rem; }
.bw-glass { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.20); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.bw-btn { transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease; }
.bw-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(88,28,135,.20); }
.bw-auto-notice { transform-origin: top center; }
.bw-notice-hiding { opacity: 0 !important; transform: translateY(-8px) scale(.985); }
.bw-gradient-btn { background: linear-gradient(135deg, #f97316, #ec4899, #6366f1); color: #fff; }
.bw-dark-btn { background: linear-gradient(135deg, #0f172a, #4338ca); color: #fff; }
.bw-soft-card { background: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.88); box-shadow: 0 18px 50px rgba(67,56,202,.08); backdrop-filter: blur(10px); }
.bw-auth-shell { position: relative; max-width: 1050px; min-height: 500px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: 2rem; background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.92); box-shadow: 0 24px 70px rgba(15,23,42,.12); backdrop-filter: blur(14px); }
.bw-auth-forms { position: relative; grid-column: 1 / 2; grid-row: 1; min-height: 500px; padding: clamp(1.1rem, 2.4vw, 2.25rem); display: flex; align-items: center; background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,247,237,.86)); z-index: 2; transition: transform .75s cubic-bezier(.22,1,.36,1); }
.bw-auth-image { position: relative; grid-column: 2 / 3; grid-row: 1; min-height: 500px; background-image: linear-gradient(135deg, rgba(15,23,42,.68), rgba(124,45,18,.28)), url("../image/login.png"); background-size: cover; background-position: center; z-index: 1; transition: transform .75s cubic-bezier(.22,1,.36,1), background-image .2s ease; }
.bw-auth-shell.is-signup .bw-auth-forms { transform: translateX(100%); }
.bw-auth-shell.is-signup .bw-auth-image { transform: translateX(-100%); background-image: linear-gradient(135deg, rgba(49,46,129,.62), rgba(236,72,153,.26)), url("../image/create.png"); }
.bw-auth-pane { width: 100%; transition: opacity .42s ease, transform .42s ease; }
.bw-auth-signup-pane { position: absolute; inset: clamp(1.1rem, 2.4vw, 2.25rem); display: flex; align-items: center; opacity: 0; transform: translateY(18px); pointer-events: none; }
.bw-auth-login-pane { opacity: 1; transform: translateY(0); pointer-events: auto; }
.bw-auth-shell.is-signup .bw-auth-login-pane { opacity: 0; transform: translateY(-18px); pointer-events: none; }
.bw-auth-shell.is-signup .bw-auth-signup-pane { opacity: 1; transform: translateY(0); pointer-events: auto; }
.bw-auth-shell.has-otp { min-height: 560px; }
.bw-auth-shell.has-otp .bw-auth-forms, .bw-auth-shell.has-otp .bw-auth-image { min-height: 560px; }
.bw-auth-image-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.4rem, 3vw, 2.5rem); color: #fff; background: linear-gradient(180deg, transparent 15%, rgba(15,23,42,.68)); }
.bw-auth-kicker { display: inline-flex; width: fit-content; margin-bottom: .75rem; border-radius: 9999px; padding: .4rem .75rem; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.bw-auth-image-title { margin: 0 0 .6rem; color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.8rem); line-height: .98; font-weight: 950; letter-spacing: -.04em; text-shadow: 0 10px 30px rgba(0,0,0,.25); }
.bw-auth-image-text { margin: 0; max-width: 32rem; color: rgba(255,255,255,.9); font-size: .92rem; line-height: 1.55; font-weight: 700; }
.bw-auth-toggle { font-weight: 950; text-underline-offset: 4px; cursor: pointer; }
.bw-user-menu { position: relative; }
.bw-user-menu summary { list-style: none; }
.bw-user-menu summary::-webkit-details-marker { display: none; }
.bw-user-menu-trigger { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; min-width: 84px; cursor: pointer; user-select: none; }
.bw-user-menu-avatar-wrap { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 2px; background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(191,219,254,.88)); box-shadow: 0 12px 28px rgba(15,23,42,.18); }
.bw-user-menu-avatar { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; display: block; background: #e2e8f0; border: 2px solid rgba(15,23,42,.18); }
.bw-user-menu-name { max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; font-weight: 900; color: #ffffff; text-align: center; text-shadow: 0 2px 10px rgba(0,0,0,.28); }
.bw-user-menu-panel { position: absolute; top: calc(100% + 12px); right: 0; min-width: 190px; display: flex; flex-direction: column; gap: .45rem; padding: .8rem; border-radius: 18px; background: rgba(255,255,255,.96); border: 1px solid rgba(203,213,225,.92); box-shadow: 0 22px 48px rgba(15,23,42,.20); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 50; }
.bw-user-menu-link { display: block; border-radius: 12px; padding: .8rem .95rem; font-size: .94rem; font-weight: 900; color: #0f172a; background: #f8fafc; transition: background .18s ease, color .18s ease, transform .18s ease; }
.bw-user-menu-link:hover { background: #e0ecff; color: #1d4ed8; transform: translateY(-1px); }
.bw-user-menu-link.is-logout:hover { background: #fff1f2; color: #e11d48; }
.bw-avatar-upload-wrap { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 1rem; align-items: center; }
.bw-avatar-upload-wrap-profile { align-items: start; }
.bw-avatar-preview-wrap { width: 92px; height: 92px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 4px; background: linear-gradient(135deg, #dbeafe, #e2e8f0); box-shadow: 0 14px 32px rgba(15,23,42,.10); }
.bw-avatar-preview { width: 100%; height: 100%; display: block; border-radius: 999px; object-fit: cover; background: #e2e8f0; }
.bw-avatar-upload-copy { min-width: 0; }
.bw-auth-shell .bw-form-input { min-height: 42px; padding-top: .55rem !important; padding-bottom: .55rem !important; }
.bw-auth-shell label { margin-bottom: .35rem !important; font-size: .9rem; }
.bw-auth-shell form p { line-height: 1.5; }
.bw-form-input, .bw-wrap select, .bw-wrap textarea, .bw-wrap input[type="text"], .bw-wrap input[type="email"], .bw-wrap input[type="password"], .bw-wrap input[type="file"] { background: #ffffff !important; border: 2px solid #94a3b8 !important; color: #0f172a !important; box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.bw-form-input::placeholder, .bw-wrap textarea::placeholder, .bw-wrap input::placeholder { color: #64748b; opacity: 1; }
.bw-file-input::file-selector-button { border: 0; margin-right: 1rem; border-radius: 9999px; padding: .75rem 1rem; font-weight: 900; color: #fff; background: linear-gradient(135deg, #f97316, #ec4899, #6366f1); cursor: pointer; }
.bw-open-editor-file { background: linear-gradient(135deg, #fff7ed, #ffffff); }
#bw-inline-editor-image.bw-image-only-input { display: none !important; }
.bw-editor-box { border: 1px solid #cbd5e1; background: #ffffff; }
.bw-editor-box .wp-editor-wrap { border: 2px solid #94a3b8; background:#fff; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
.bw-editor-box .wp-editor-tools { background:#f8fafc; border-bottom:1px solid #cbd5e1; padding:.45rem .55rem 0; }
.bw-editor-box .wp-editor-container { border:0 !important; }
.bw-editor-box .mce-toolbar-grp, .bw-editor-box .quicktags-toolbar { background:#f8fafc !important; border-bottom:1px solid #e2e8f0 !important; }
.bw-editor-box .mce-btn button, .bw-editor-box .quicktags-toolbar input.button.button-small { color:#334155 !important; font-weight:800 !important; }
.bw-editor-box .mce-btn:hover, .bw-editor-box .quicktags-toolbar input.button.button-small:hover { border-color:#fb923c !important; box-shadow:0 0 0 1px rgba(251,146,60,.25) !important; }
.bw-editor-box iframe, .bw-editor-box textarea.wp-editor-area { min-height:430px !important; background:#fff !important; }
.bw-editor-box .wp-switch-editor { border-radius:.55rem .55rem 0 0 !important; font-weight:800 !important; }
.bw-post-row { position: relative; width: 100%; padding: 3rem 1.25rem 2.8rem 1.75rem; border-top: 1px solid rgba(148,163,184,.35); }
.bw-post-row:first-child { border-top: 0; padding-top: 1rem; }
.bw-post-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(249,115,22,.45), rgba(99,102,241,.35), transparent); }
.bw-post-row-inner { background: transparent; padding-left: .5rem; }
.bw-post-grid { display: grid; grid-template-columns: minmax(260px, 44%) minmax(0, 56%); gap: clamp(1.75rem, 3vw, 3rem); align-items: center; }
.bw-post-grid.bw-reverse { grid-template-columns: minmax(0, 56%) minmax(260px, 44%); }
.bw-post-grid > * { min-width: 0; }
.bw-post-image-wrap { overflow: hidden; display: flex; align-items: center; justify-content: center; background: #ffffff; min-height: 0; height: auto; align-self: center; border: 1px solid rgba(148,163,184,.45); box-shadow: 0 18px 45px rgba(15,23,42,.10); }
.bw-post-image { width: 100%; height: auto; max-height: none; object-fit: contain; object-position: center center; display: block; transition: transform .35s ease, filter .35s ease; }
.bw-post-image-wrap:hover .bw-post-image { transform: scale(1.015); filter: saturate(1.08); }
.bw-post-copy { min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: 1rem 1rem 1rem .75rem; }
.bw-post-copy.bw-post-copy--textonly { min-height: 0; padding-right: 1rem; }
.bw-content { color: #334155; font-size: 17px; line-height: 1.9; }
.bw-content h1, .bw-content h2, .bw-content h3, .bw-content h4 { color: #0f172a; font-weight: 900; line-height: 1.22; margin: 1.2em 0 .6em; }
.bw-content h1 { font-size: 2.2rem; }
.bw-content h2 { font-size: 1.7rem; }
.bw-content h3 { font-size: 1.35rem; }
.bw-content p { margin: 0 0 1rem; }
.bw-content strong, .bw-content b { font-weight: 950 !important; color: #020617; }
.bw-content em, .bw-content i { font-style: italic; }
.bw-content u { text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bw-content ul { list-style: disc; padding-left: 1.5rem; margin: 0 0 1rem; }
.bw-content ol { list-style: decimal; padding-left: 1.5rem; margin: 0 0 1rem; }
.bw-content a { color: #4338ca; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.bw-content figure { margin: 1.5rem 0; max-width: 100%; }
.bw-content img { max-width: 100%; margin: 1.25rem 0; box-shadow: 0 15px 35px rgba(15,23,42,.12); object-fit: contain; }
.bw-content figure img { margin: 0; }
.bw-content .alignleft, .bw-content img.alignleft, .bw-content figure.alignleft { float: left; margin: .35rem 1.25rem 1rem 0; }
.bw-content .alignright, .bw-content img.alignright, .bw-content figure.alignright { float: right; margin: .35rem 0 1rem 1.25rem; }
.bw-content .aligncenter, .bw-content img.aligncenter, .bw-content figure.aligncenter { display: block; margin-left: auto !important; margin-right: auto !important; text-align: center; }
.bw-content::after { content: ""; display: table; clear: both; }
.bw-content blockquote { border-left: 5px solid #f97316; padding: .75rem 1rem; background: #fff7ed; color: #475569; font-style: italic; }
.bw-archive details > summary { cursor: pointer; list-style: none; }
.bw-archive details > summary::-webkit-details-marker { display: none; }
.bw-archive summary .bw-chevron {
display: inline-block;
width: 0;
height: 0;
color: #00a9b7 !important;
border-top: .36rem solid transparent;
border-bottom: .36rem solid transparent;
border-left: .5rem solid currentColor;
font-size: 0;
line-height: 0;
transition: transform .2s ease;
}
.bw-archive details[open] > summary .bw-chevron { transform: rotate(90deg); }
.bw-month-active { background: linear-gradient(135deg, #fff7ed, #eef2ff); color: #1e1b4b; border-color: #fb923c; }
.bw-current-blog { background: #fff7ed; border-color: #f97316; }
.bw-comments-box, .bw-detail-box, .bw-filter-box { background: rgba(255,255,255,.58); border: 1px solid rgba(203,213,225,.8); }
.bw-detail-main-grid { display: grid; gap: 1.75rem; grid-template-columns: minmax(0, 60%) minmax(300px, 40%); align-items: center; }
.bw-detail-copy, .bw-detail-media { min-height: 0; }
.bw-detail-media { overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(148,163,184,.45); background: #ffffff; box-shadow: 0 18px 45px rgba(15,23,42,.10); }
.bw-detail-image { width: 100%; height: auto; min-height: 0; object-fit: contain; object-position: center center; display: block; }
.bw-hero-small { min-height: 135px; }
.bw-toast-wrap { position: fixed; top: 105px; right: 22px; z-index: 99999; width: min(420px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
.bw-toast { position: relative; overflow: hidden; pointer-events: auto; border-radius: 18px; background: rgba(255,255,255,.96); color: #0f172a; border: 1px solid rgba(249,115,22,.35); box-shadow: 0 18px 50px rgba(15,23,42,.16); padding: 16px 44px 16px 16px; font-weight: 800; transition: opacity .28s ease, transform .28s ease; }
.bw-toast.is-error { border-color: rgba(225,29,72,.45); }
.bw-toast-close { position:absolute; right: 12px; top: 10px; width: 28px; height: 28px; border: 0; border-radius: 999px; background: #f1f5f9; color:#0f172a; font-weight: 900; cursor:pointer; }
.bw-toast-progress { position:absolute; left:0; bottom:0; height:4px; width:100%; background: linear-gradient(135deg,#f97316,#ec4899,#6366f1); animation: bwToastBar 5s linear forwards; }
.bw-toast-hiding { opacity:0; transform: translateX(14px); }
@keyframes bwToastBar { from { width:100%; } to { width:0%; } }
.bw-modal-backdrop { position: fixed; inset: 0; z-index: 100000; display:none; align-items:center; justify-content:center; padding: 20px; background: rgba(15,23,42,.46); backdrop-filter: blur(8px); }
.bw-modal-backdrop.is-open { display:flex; }
.bw-modal-box { width:min(460px, 100%); border-radius: 26px; background: rgba(255,255,255,.98); box-shadow: 0 24px 80px rgba(15,23,42,.28); border: 1px solid rgba(255,255,255,.85); padding: 26px; text-align:center; }
.bw-tab-btn.is-active { background: linear-gradient(135deg,#f97316,#ec4899,#6366f1); color:#fff; box-shadow: 0 12px 30px rgba(88,28,135,.18); }
.bw-nav-dashboard, .bw-tab-btn { position: relative; }
.bw-count-badge { position:absolute; top:-8px; right:-8px; min-width:22px; height:22px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:#e11d48; color:#fff; font-size:11px; font-weight:950; line-height:1; box-shadow:0 8px 20px rgba(225,29,72,.35); border:2px solid #fff; }
.bw-field-error { display:none; margin-top:.55rem; color:#be123c; background:#fff1f2; border:1px solid #fecdd3; border-radius:12px; padding:.7rem .9rem; font-size:.9rem; font-weight:800; }
.bw-field-error.is-open { display:block; }
.bw-rejected-box { border:1px solid #fecdd3; background:#fff1f2; color:#9f1239; border-radius:18px; padding:14px 16px; font-weight:800; }
.bw-tab-panel { display:none; }
.bw-tab-panel.is-active { display:block; }
.bw-pass-wrap { position: relative; }
.bw-pass-toggle { position:absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display:inline-flex; align-items:center; justify-content:center; border:0; background:#f8fafc; border-radius: 999px; padding: 0; font-size: 18px; line-height:1; font-weight:900; color:#334155; cursor:pointer; box-shadow: inset 0 0 0 1px rgba(148,163,184,.35); }
.bw-pass-toggle:hover { background:#eef2ff; color:#312e81; }
.bw-otp-box { display:none; margin-top:1rem !important; width:100%; box-sizing:border-box; clear:both; border:1px solid rgba(99,102,241,.18) !important; background:rgba(238,242,255,.72) !important; border-radius:1.15rem !important; padding:1rem !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.75); }
.bw-otp-box.is-open { display:block; }
.bw-otp-box label { display:block; margin-bottom:.45rem !important; font-size:.88rem !important; }
.bw-otp-box .bw-form-input { display:block !important; width:100% !important; max-width:100% !important; box-sizing:border-box !important; min-height:48px !important; background:#fff !important; border:1px solid rgba(148,163,184,.82) !important; border-radius:.95rem !important; color:#0f172a !important; letter-spacing:.18em !important; }
.bw-otp-box .bw-btn { display:flex; align-items:center; justify-content:center; min-height:46px; }
.bw-auth-fields { transition: opacity .25s ease, transform .25s ease; }
.bw-login-ajax-form.is-verifying .bw-auth-fields, .bw-signup-ajax-form.is-verifying .bw-auth-fields, .bw-login-ajax-form.is-verifying > .bw-auth-main-btn, .bw-signup-ajax-form.is-verifying > .bw-auth-main-btn, .bw-login-ajax-form.is-verifying .bw-auth-switch-text, .bw-signup-ajax-form.is-verifying .bw-auth-switch-text { display:none !important; }
.bw-otp-back { display:inline-flex; align-items:center; justify-content:center; gap:.35rem; margin-bottom:.8rem; border:1px solid rgba(148,163,184,.55); border-radius:999px; background:#fff; color:#334155; font-weight:950; padding:.45rem .85rem; cursor:pointer; }
.bw-otp-back:hover { background:#fff7ed; border-color:#fb923c; color:#c2410c; }
.bw-site-footer { background: linear-gradient(135deg, rgba(15,23,42,.98), rgba(49,46,129,.96)); color:#e2e8f0; border-top:1px solid rgba(255,255,255,.10); }
.bw-site-footer a { color:#fff; text-decoration:none; font-weight:800; }
.bw-site-footer a:hover { color:#fed7aa; }
.bw-site-footer-grid { display:grid; grid-template-columns: minmax(240px, 1.55fr) minmax(105px, .75fr) minmax(125px, .85fr) minmax(300px, 1.35fr); align-items:start; }
.bw-site-footer-contact { min-width: 300px; justify-self:start; text-align:left; }
.bw-site-footer-email { display:flex; align-items:center; gap:.55rem; white-space:nowrap; }
.bw-site-footer-contact-icon { display:inline-flex; width:30px; height:30px; flex:0 0 20px; align-items:center; justify-content:center; color:#ffffff; }
.bw-site-footer-contact-icon svg { display:block; width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.bw-site-footer-email .bw-site-footer-contact-icon, .bw-site-footer-email a { color: rgb(255, 255, 255) !important; }
.bw-site-footer-email a { white-space:nowrap; font-weight:900; font-size: medium; }
.bw-site-footer-phone .bw-site-footer-contact-icon, .bw-site-footer-phone a { color: rgb(255, 255, 255) !important; }
.bw-site-footer-phone a { white-space:nowrap; font-weight:900; font-size: medium; }
.bw-site-footer-contact-icon img{ display:inline-flex; width:25px; height:25px; flex:0 0 20px; align-items:center; justify-content:center; color:#ffffff; }
.bw-site-footer-title { font-size:1.6rem; font-weight:950; color:#fff; letter-spacing:-.02em; }
.bw-site-footer-kicker { color:#fb923c; text-transform:uppercase; letter-spacing:.18em; font-size:.78rem; font-weight:950; }
.bw-resend { display:inline-flex; width:100%; justify-content:center; border:0; background:transparent; padding:.25rem 0; }
.bw-resend[disabled] { opacity:.55; cursor:not-allowed; }
.bw-category-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.bw-category-tile { min-height: 96px; border-radius: 22px; border: 1px solid rgba(203,213,225,.85); background: rgba(255,255,255,.86); padding: 18px; text-align:left; box-shadow: 0 12px 30px rgba(15,23,42,.05); }
.bw-category-tile:hover { border-color: #fb923c; background:#fff7ed; }
.bw-category-tile-title { display:block; font-size: 1rem; font-weight: 950; color:#0f172a; line-height:1.25; }
.bw-category-tile-count { display:inline-flex; margin-top: 12px; border-radius:999px; background:#eef2ff; color:#4338ca; padding: 4px 10px; font-size: 12px; font-weight: 900; }
.bw-category-modal-box { position:relative; width:min(560px,100%); text-align:left; }
/* footer css */
.bw-full-bleed{
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.bw-footer-logo{
height: 70px !important;
width: 70px !important;
margin-bottom: 1rem !important;
display: block !important;
object-fit: contain !important;
}
.bw-site-footer-contact .bw-site-footer-phone a[href^="tel:"] {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
color: #ffffff !important;
align-items: center;
}
.bw-site-footer-contact .bw-site-footer-phone a[href^="tel:"]:hover {
color: #fed7aa !important;
}
.bw-site-footer-phone{
display: flex;
gap: 10px;
}
.bw-footer-col-title{
color: rgb(255,193,7);
font-weight: 800;
}
.bw-site-footer-brand{
justify-items: center;
}
@media (max-width: 1023px) {
.bw-site-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bw-site-footer-brand { grid-column: 1 / -1; }
.bw-site-footer-contact { min-width: 0; }
.bw-page-inner { padding: 1.25rem 1rem 2rem; }
.bw-hero:not(.bw-hero-small) { min-height: 270px; }
.bw-hero-small { min-height: 131px; }
.bw-hero-inner { padding: 1rem 1rem 1.6rem; }
.bw-layout { grid-template-columns: 1fr; }
.bw-post-row { padding-left: 0; }
.bw-post-grid, .bw-post-grid.bw-reverse, .bw-detail-main-grid { grid-template-columns: 1fr; }
.bw-detail-copy, .bw-detail-media, .bw-post-copy, .bw-post-image-wrap { min-height: 0; }
}
@media (max-width: 782px) {
.bw-site-footer-grid { grid-template-columns: 1fr; }
.bw-site-footer-email { font-size: clamp(.78rem, 3.7vw, .875rem) !important; }
.bw-content { font-size: 16px; }
.bw-content h1 { font-size: 1.75rem; }
.bw-post-row { padding-left: 0; padding-right: 0; }
.bw-post-row-inner { padding-left: 0; }
.bw-post-image-wrap { min-height: 0; height: auto; aspect-ratio: auto; }
.bw-detail-image { min-height: 0; }
.bw-post-copy { padding: .25rem 0 0; }
.bw-user-menu-panel { right: auto; left: 50%; transform: translateX(-50%); }
.bw-avatar-upload-wrap { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
/* ---------------------------------------------------------
Blog Website lightweight interaction polish.
Scroll reveal animation removed to keep scrolling fast.
--------------------------------------------------------- */
.bw-hero > .bw-hero-inner {
animation: bwHeroEnter .52s ease both;
}
.bw-post-image-wrap,
.bw-detail-media {
transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.bw-post-image-wrap:hover,
.bw-detail-media:hover {
transform: translateY(-2px);
box-shadow: 0 18px 45px rgba(15,23,42,.14);
border-color: rgba(249,115,22,.45);
}
.bw-post-image-wrap img,
.bw-detail-image,
.bw-content img {
transition: transform .28s ease, filter .28s ease;
}
.bw-post-image-wrap:hover img,
.bw-detail-media:hover .bw-detail-image,
.bw-content img:hover {
transform: scale(1.015);
filter: saturate(1.04);
}
.bw-btn,
.bw-tab-btn,
.bw-reaction,
.bw-otp-back {
position: relative;
overflow: hidden;
isolation: isolate;
}
.bw-btn::after,
.bw-tab-btn::after,
.bw-reaction::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.24) 45%, transparent 70%);
transform: translateX(-120%);
transition: transform .42s ease;
pointer-events: none;
z-index: 0;
}
.bw-btn:hover::after,
.bw-tab-btn:hover::after,
.bw-reaction:hover::after {
transform: translateX(120%);
}
.bw-tab-panel.is-active {
animation: bwPanelIn .22s ease both;
}
.bw-modal-backdrop.is-open .bw-modal-box {
animation: bwModalIn .22s ease both;
}
.bw-toast {
animation: bwToastIn .28s ease both;
}
.bw-count-badge {
animation: bwBadgePulse 1.8s ease-in-out infinite;
}
.bw-form-input:focus,
.bw-editor-box:focus-within,
.bw-search-input:focus {
box-shadow: 0 0 0 4px rgba(249,115,22,.16), 0 8px 22px rgba(15,23,42,.07) !important;
transition: box-shadow .22s ease, border-color .22s ease;
}
/* From Uiverse.io by adamgiebl */
/* Style ONLY the Search Blogs submit button in the hero search form */
.bw-btn.bw-search-submit {
font-size: 18px;
letter-spacing: 2px;
text-transform: uppercase;
display: inline-block;
text-align: center;
font-weight: bold;
padding: 0.7em 2em;
border: 3px solid #000080;
border-radius: 10px;
position: relative;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
color: #000080;
text-decoration: none;
transition: 0.3s ease all;
z-index: 1;
font-weight: 1000;
}
.bw-btn.bw-search-submit:before {
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content: '';
background-color: #000080;
z-index: -1;
}
.bw-btn.bw-search-submit:hover,
.bw-btn.bw-search-submit:focus {
color: white;
}
.bw-btn.bw-search-submit:hover:before,
.bw-btn.bw-search-submit:focus:before {
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
.bw-btn.bw-search-submit:active {
transform: scale(0.9);
}
/* ==============================
Admin dashboard tab buttons (a.bw-tab-btn)
Apply refined 3D gradient style to the elements used as tabs.
============================== */
.bw-tab-btn {
--button_radius: 0.75em;
/* Darker Navy for the 'side' depth */
--button_outline_color: #000040;
font-size: 17px !important;
font-weight: bold !important;
border: none !important;
cursor: pointer;
border-radius: var(--button_radius) !important;
background: var(--button_outline_color) !important;
transition: all 0.3s ease !important;
padding: 0 !important;
height: auto !important;
}
/* The original Uiverse markup uses a nested .button_top element.
In our case, tab text is directly inside the , so we emulate a top layer
by styling the (or children) to look like .button_top. */
.bw-tab-btn > *,
.bw-tab-btn {
box-sizing: border-box;
}
.bw-tab-btn > .button_top,
.bw-tab-btn > span,
.bw-tab-btn > strong,
.bw-tab-btn > div {
display: block;
border: 2px solid var(--button_outline_color) !important;
border-radius: var(--button_radius);
padding: 0.75em 1.5em !important;
background: linear-gradient(135deg, #000080 0%, #BA0600 100%) !important;
color: #ffffff !important;
transform: translateY(-0.25em);
transition: transform 0.1s ease, filter 0.3s ease;
}
.bw-tab-btn:hover > .button_top,
.bw-tab-btn:hover > span,
.bw-tab-btn:hover > strong,
.bw-tab-btn:hover > div {
transform: translateY(-0.35em);
filter: brightness(1.1);
}
.bw-tab-btn:hover {
box-shadow: 0 8px 20px rgba(0, 0, 80, 0.2) !important;
}
.bw-tab-btn:active > .button_top,
.bw-tab-btn:active > span,
.bw-tab-btn:active > strong,
.bw-tab-btn:active > div {
transform: translateY(0) !important;
}
/* Keep active tab text white and preserve the same 3D feel. */
.bw-tab-btn.is-active {
box-shadow: 0 10px 24px rgba(0, 0, 80, 0.18) !important;
}
.bw-tab-btn.is-active > .button_top,
.bw-tab-btn.is-active > span,
.bw-tab-btn.is-active > strong,
.bw-tab-btn.is-active > div {
color: #ffffff !important;
}
@keyframes bwHeroEnter {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes bwPanelIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes bwModalIn {
from { opacity: 0; transform: translateY(12px) scale(.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bwToastIn {
from { opacity: 0; transform: translateX(18px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes bwBadgePulse {
0%, 100% { transform: scale(1); box-shadow:0 8px 20px rgba(225,29,72,.35); }
50% { transform: scale(1.05); box-shadow:0 9px 22px rgba(225,29,72,.45); }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto !important; }
.bw-wrap *,
.bw-wrap *::before,
.bw-wrap *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
/* v36 polish: notification badge sits half on / half outside the button,
and navbar dashboard/admin buttons keep the shine effect without leaking. */
.bw-nav-dashboard.bw-btn,
.bw-tab-btn.bw-btn {
overflow: visible !important;
isolation: isolate !important;
padding-right: 1.45rem !important;
}
/* Use background-position for navbar/dashboard shine so the shimmer stays inside
the button even while overflow is visible for the badge. */
.bw-nav-dashboard.bw-btn::after,
.bw-tab-btn.bw-btn::after {
display: block !important;
content: "" !important;
position: absolute !important;
inset: 0 !important;
border-radius: inherit !important;
background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.30) 45%, transparent 70%) !important;
background-size: 230% 100% !important;
background-position: 130% 0 !important;
transform: none !important;
transition: background-position .45s ease !important;
pointer-events: none !important;
z-index: 0 !important;
}
.bw-nav-dashboard.bw-btn:hover::after,
.bw-tab-btn.bw-btn:hover::after {
background-position: -130% 0 !important;
transform: none !important;
}
.bw-nav-dashboard .bw-count-badge,
.bw-tab-btn .bw-count-badge {
position: absolute !important;
top: -8px !important;
right: -8px !important;
z-index: 90 !important;
min-width: 22px !important;
height: 22px !important;
padding: 0 6px !important;
border-radius: 999px !important;
border: 2px solid rgba(255,255,255,.98) !important;
background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%) !important;
color: #fff !important;
font-size: 11px !important;
font-weight: 950 !important;
line-height: 1 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 8px 18px rgba(225,29,72,.42), 0 1px 0 rgba(255,255,255,.55) inset !important;
pointer-events: none !important;
}
/* Keep shine safely clipped on normal buttons. */
.bw-btn:not(.bw-nav-dashboard)::after,
.bw-reaction::after {
z-index: 0 !important;
}
@media (max-width: 640px) {
.bw-nav-dashboard .bw-count-badge,
.bw-tab-btn .bw-count-badge {
top: -7px !important;
right: -7px !important;
min-width: 20px !important;
height: 20px !important;
font-size: 10px !important;
}
}
/* v36 ensure button labels stay readable above the shine overlay. */
.bw-btn > *,
.bw-tab-btn > *,
.bw-reaction > * {
position: relative;
z-index: 1;
}
/* ---------------------------------------------------------
v37 color and layout refresh: white / yellow / red / navy
--------------------------------------------------------- */
body {
background: linear-gradient(135deg, #f8fafc 0%, #e5e7eb 45%, #cbd5e1 100%) !important;
}
.bw-bg {
background:
radial-gradient(circle at 0% 0%, rgba(250, 204, 21, .20), transparent 28%),
radial-gradient(circle at 100% 0%, rgba(220, 38, 38, .12), transparent 28%),
linear-gradient(135deg, #f8fafc 0%, #e5e7eb 48%, #cbd5e1 100%) !important;
}
.bw-hero {
background-size: cover !important;
background-position: center center !important;
background-attachment: fixed !important;
}
.bw-filter-box,
.bw-comments-box,
.bw-detail-box,
.bw-soft-card,
.bw-editor-box,
.bw-category-tile,
.bw-modal-box,
.bw-toast,
.bw-archive-year,
.bw-archive-month,
.bw-current-blog,
.bw-post-row,
.bw-post-row-inner,
.bw-auth-shell,
.bw-detail-media,
.bw-post-image-wrap,
.bw-content img,
.bw-wrap article {
border-radius: 22px !important;
}
.bw-post-image-wrap,
.bw-detail-media,
.bw-content img,
.bw-auth-image {
overflow: hidden !important;
}
.bw-post-image-wrap img,
.bw-detail-image,
.bw-content img,
.bw-auth-image {
border-radius: 18px !important;
}
.bw-gradient-btn,
.bw-tab-btn.is-active,
.bw-file-input::file-selector-button {
background: linear-gradient(135deg, #ffffff 0%, #facc15 22%, #dc2626 58%, #0f172a 100%) !important;
color: #ffffff !important;
text-shadow: 0 1px 2px rgba(15,23,42,.45) !important;
border: 0 !important;
}
.bw-dark-btn {
background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #dc2626 100%) !important;
color: #ffffff !important;
}
.bw-btn:hover {
box-shadow: 0 14px 34px rgba(15,23,42,.22), 0 0 0 1px rgba(250,204,21,.22) !important;
}
.bw-form-input:focus,
.bw-wrap select:focus,
.bw-wrap textarea:focus,
.bw-wrap input[type="text"]:focus,
.bw-wrap input[type="email"]:focus,
.bw-wrap input[type="password"]:focus {
border-color: #facc15 !important;
box-shadow: 0 0 0 4px rgba(250,204,21,.22) !important;
}
/* Dashboard/admin/user panels */
.bw-tab-panel > .bw-filter-box,
.bw-tab-panel > section.bw-filter-box,
.bw-tab-panel .bw-profile-panel,
#bw-tab-my-blogs > .bw-filter-box,
#bw-tab-approval > .bw-filter-box,
#bw-tab-all-blogs > .bw-filter-box,
#bw-tab-categories > .bw-filter-box,
#bw-tab-users > .bw-filter-box,
#bw-tab-profile > .bw-filter-box {
background: linear-gradient(135deg, rgba(15,23,42,.98), rgba(30,58,138,.96)) !important;
border: 1px solid rgba(255,255,255,.18) !important;
color: #f8fafc !important;
box-shadow: 0 22px 60px rgba(15,23,42,.18) !important;
}
.bw-tab-panel > .bw-filter-box h1,
.bw-tab-panel > .bw-filter-box h2,
.bw-tab-panel > .bw-filter-box h3,
.bw-tab-panel > section.bw-filter-box h1,
.bw-tab-panel > section.bw-filter-box h2,
.bw-tab-panel > section.bw-filter-box h3,
.bw-tab-panel .bw-filter-box .text-slate-900 {
color: #ffffff !important;
}
.bw-tab-panel > .bw-filter-box p,
.bw-tab-panel > section.bw-filter-box p,
.bw-tab-panel .bw-filter-box .text-slate-600,
.bw-tab-panel .bw-filter-box .text-slate-500,
.bw-tab-panel .bw-filter-box .text-slate-700 {
color: rgba(248,250,252,.78) !important;
}
.bw-tab-panel article,
.bw-tab-panel .bw-category-tile,
.bw-tab-panel .bw-rejected-box {
background: rgba(255,255,255,.12) !important;
border: 1px solid rgba(255,255,255,.22) !important;
color: #f8fafc !important;
box-shadow: 0 16px 42px rgba(0,0,0,.12) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.bw-tab-panel article h1,
.bw-tab-panel article h2,
.bw-tab-panel article h3,
.bw-tab-panel article .text-slate-900,
.bw-tab-panel .bw-category-tile-title {
color: #ffffff !important;
}
.bw-tab-panel article p,
.bw-tab-panel article .text-slate-600,
.bw-tab-panel article .text-slate-500,
.bw-tab-panel article .text-slate-700 {
color: rgba(248,250,252,.80) !important;
}
/* Better action buttons in dashboard cards */
.bw-tab-panel a.bg-indigo-50,
.bw-tab-panel button.bg-indigo-50 {
background: rgba(30,58,138,.92) !important;
color: #ffffff !important;
border: 1px solid rgba(250,204,21,.28) !important;
}
.bw-tab-panel a.bg-white,
.bw-tab-panel button.bg-white {
background: rgba(255,255,255,.92) !important;
color: #0f172a !important;
}
.bw-tab-panel button.bg-rose-50,
.bw-tab-panel a.bg-rose-50 {
background: rgba(220,38,38,.14) !important;
color: #fecaca !important;
border: 1px solid rgba(248,113,113,.35) !important;
}
.bw-tab-panel button.bg-emerald-50,
.bw-tab-panel a.bg-emerald-50 {
background: rgba(250,204,21,.18) !important;
color: #fef3c7 !important;
border: 1px solid rgba(250,204,21,.35) !important;
}
/* Highlight tags/status/date */
.bw-wrap span.rounded-full,
.bw-wrap .bw-category-tile-count {
border: 1px solid rgba(255,255,255,.42) !important;
box-shadow: 0 6px 16px rgba(15,23,42,.10) !important;
font-weight: 950 !important;
}
.bw-wrap .bg-orange-100 {
background: linear-gradient(135deg, #fef3c7, #facc15) !important;
color: #7f1d1d !important;
}
.bw-wrap .bg-emerald-100 {
background: linear-gradient(135deg, #ecfdf5, #86efac) !important;
color: #064e3b !important;
}
.bw-wrap .bg-rose-100 {
background: linear-gradient(135deg, #fff1f2, #f87171) !important;
color: #7f1d1d !important;
}
.bw-wrap .bg-slate-100,
.bw-wrap .bg-indigo-100 {
background: linear-gradient(135deg, #ffffff, #dbeafe) !important;
color: #0f172a !important;
}
.bw-wrap .text-xs.font-bold.text-slate-500,
.bw-wrap .text-sm.font-bold.text-slate-500 {
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: .28rem .72rem;
background: rgba(255,255,255,.90);
color: #0f172a !important;
box-shadow: 0 6px 16px rgba(15,23,42,.08);
}
/* Login/signup remember me and OTP styling */
.bw-login-ajax-form .bw-otp-box { display: none !important; }
.bw-signup-ajax-form .bw-otp-box.is-open { display: block !important; }
.bw-signup-ajax-form.is-verifying .bw-auth-fields,
.bw-signup-ajax-form.is-verifying > .bw-auth-main-btn,
.bw-signup-ajax-form.is-verifying .bw-auth-switch-text { display: none !important; }
.bw-login-ajax-form.is-verifying .bw-auth-fields,
.bw-login-ajax-form.is-verifying > .bw-auth-main-btn,
.bw-login-ajax-form.is-verifying .bw-auth-switch-text { display: block !important; }
@media (max-width: 1023px) {
.bw-hero { background-attachment: scroll !important; }
}
/* ---------------------------------------------------------
v38 soft modern palette refresh inspired by warm Dribbble-style UI
Colors: white, soft yellow, coral red, fresh green.
Goal: lighter, friendlier, readable, less harsh navy panels.
--------------------------------------------------------- */
:root {
--bw-ink: #122016;
--bw-deep: #17351f;
--bw-green: #2f7d4d;
--bw-mint: #dff7df;
--bw-yellow: #ffe58a;
--bw-cream: #fffaf0;
--bw-red: #ef4d4d;
--bw-coral: #ff8b70;
--bw-soft-red: #ffe1dd;
--bw-glass: rgba(255,255,255,.66);
--bw-border: rgba(47,125,77,.20);
--bw-shadow: 0 24px 70px rgba(23,53,31,.13);
}
body {
background:
linear-gradient(180deg, #dbe8d7 0%, #eef5e9 28%, #fff6df 68%, #fffdf8 100%) !important;
color: var(--bw-ink) !important;
}
.bw-bg {
background:
radial-gradient(circle at 8% 3%, rgba(255,229,138,.48), transparent 28%),
radial-gradient(circle at 95% 12%, rgba(239,77,77,.16), transparent 24%),
radial-gradient(circle at 50% 38%, rgba(47,125,77,.13), transparent 34%),
linear-gradient(180deg, #dbe8d7 0%, #edf7eb 34%, #fff6df 74%, #fffdf8 100%) !important;
}
/* Keep page surfaces soft and rounded instead of pasted flat rectangles. */
.bw-filter-box,
.bw-comments-box,
.bw-detail-box,
.bw-soft-card,
.bw-editor-box,
.bw-category-tile,
.bw-modal-box,
.bw-toast,
.bw-archive-year,
.bw-archive-month,
.bw-current-blog,
.bw-post-row,
.bw-post-row-inner,
.bw-auth-shell,
.bw-detail-media,
.bw-post-image-wrap,
.bw-wrap article {
border-radius: 26px !important;
}
.bw-filter-box,
.bw-comments-box,
.bw-detail-box,
.bw-soft-card,
.bw-editor-box,
.bw-auth-shell {
background: linear-gradient(145deg, rgba(255,255,255,.76), rgba(255,250,240,.58)) !important;
border: 1px solid rgba(47,125,77,.16) !important;
box-shadow: var(--bw-shadow) !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
/* Typography readability reset after the darker v37 theme. */
.bw-wrap h1,
.bw-wrap h2,
.bw-wrap h3,
.bw-wrap .text-slate-900,
.bw-category-tile-title {
color: var(--bw-ink) !important;
}
.bw-wrap p,
.bw-wrap .text-slate-600,
.bw-wrap .text-slate-500,
.bw-wrap .text-slate-700,
.bw-wrap label {
color: rgba(18,32,22,.78) !important;
}
.bw-wrap .text-orange-500,
.bw-wrap .text-indigo-500 {
color: #d9481e !important;
}
/* Friendly gradients for the main action buttons. */
.bw-gradient-btn,
.bw-tab-btn.is-active,
.bw-file-input::file-selector-button {
background: linear-gradient(135deg, #ffffff 0%, #ffe58a 23%, #ff8b70 56%, #2f7d4d 100%) !important;
color: #102015 !important;
text-shadow: 0 1px 0 rgba(255,255,255,.45) !important;
border: 1px solid rgba(255,255,255,.72) !important;
box-shadow: 0 14px 32px rgba(47,125,77,.20), inset 0 1px 0 rgba(255,255,255,.65) !important;
}
.bw-dark-btn,
.bw-wrap button[type="submit"].bw-dark-btn,
.bw-category-grid + .bw-dark-btn {
background: linear-gradient(135deg, #2f7d4d 0%, #ffe58a 48%, #ef4d4d 100%) !important;
color: #102015 !important;
text-shadow: 0 1px 0 rgba(255,255,255,.40) !important;
border: 1px solid rgba(255,255,255,.68) !important;
}
.bw-btn:hover {
box-shadow: 0 16px 34px rgba(47,125,77,.20), 0 0 0 1px rgba(255,229,138,.45) !important;
}
/* Glassy tab buttons, including My Blogs / Admin dashboard button. */
.bw-tab-btn,
.bw-nav-dashboard {
background: rgba(255,255,255,.54) !important;
border: 1px solid rgba(255,255,255,.80) !important;
color: var(--bw-ink) !important;
box-shadow: 0 12px 26px rgba(47,125,77,.10), inset 0 1px 0 rgba(255,255,255,.55) !important;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.bw-tab-btn:hover,
.bw-nav-dashboard:hover {
background: rgba(255,250,240,.74) !important;
transform: translateY(-2px);
}
.bw-tab-btn.is-active {
color: #102015 !important;
}
/* Admin / user dashboard panels: warm green/yellow glass, not hard navy. */
.bw-tab-panel > .bw-filter-box,
.bw-tab-panel > section.bw-filter-box,
.bw-tab-panel .bw-profile-panel,
#bw-tab-my-blogs > .bw-filter-box,
#bw-tab-approval > .bw-filter-box,
#bw-tab-all-blogs > .bw-filter-box,
#bw-tab-categories > .bw-filter-box,
#bw-tab-users > .bw-filter-box,
#bw-tab-profile > .bw-filter-box {
background:
radial-gradient(circle at 0% 0%, rgba(255,229,138,.38), transparent 32%),
radial-gradient(circle at 100% 0%, rgba(239,77,77,.14), transparent 30%),
linear-gradient(145deg, rgba(25,70,43,.94), rgba(47,125,77,.84)) !important;
border: 1px solid rgba(255,255,255,.24) !important;
color: #fffaf0 !important;
box-shadow: 0 26px 70px rgba(23,53,31,.24) !important;
}
.bw-tab-panel > .bw-filter-box h1,
.bw-tab-panel > .bw-filter-box h2,
.bw-tab-panel > .bw-filter-box h3,
.bw-tab-panel > section.bw-filter-box h1,
.bw-tab-panel > section.bw-filter-box h2,
.bw-tab-panel > section.bw-filter-box h3,
.bw-tab-panel .bw-filter-box .text-slate-900,
.bw-tab-panel .bw-filter-box .text-slate-700 {
color: #fffdf8 !important;
}
.bw-tab-panel > .bw-filter-box p,
.bw-tab-panel > section.bw-filter-box p,
.bw-tab-panel .bw-filter-box .text-slate-600,
.bw-tab-panel .bw-filter-box .text-slate-500 {
color: rgba(255,253,248,.82) !important;
}
/* But profile detail cards should be readable, light, and calm. */
#bw-tab-profile .bw-filter-box,
.bw-wrap .grid .bw-filter-box:has(form[action=""]),
.bw-wrap .grid > .bw-filter-box {
background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,250,240,.62)) !important;
border: 1px solid rgba(47,125,77,.18) !important;
color: var(--bw-ink) !important;
box-shadow: 0 18px 48px rgba(47,125,77,.12) !important;
}
#bw-tab-profile .bw-filter-box h1,
#bw-tab-profile .bw-filter-box h2,
#bw-tab-profile .bw-filter-box h3,
#bw-tab-profile .bw-filter-box label,
#bw-tab-profile .bw-filter-box .text-slate-900,
#bw-tab-profile .bw-filter-box .text-slate-700,
.bw-wrap .grid > .bw-filter-box h2,
.bw-wrap .grid > .bw-filter-box label {
color: var(--bw-ink) !important;
}
#bw-tab-profile .bw-filter-box p,
#bw-tab-profile .bw-filter-box .text-slate-600,
.bw-wrap .grid > .bw-filter-box p {
color: rgba(18,32,22,.72) !important;
}
/* Manage blogs / approval cards: soft glass cards with alternate baby colors. */
.bw-tab-panel article,
.bw-tab-panel .bw-category-tile,
.bw-tab-panel .bw-rejected-box {
background: linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,250,240,.11)) !important;
border: 1px solid rgba(255,255,255,.32) !important;
color: #fffdf8 !important;
box-shadow: 0 18px 44px rgba(23,53,31,.14), inset 0 1px 0 rgba(255,255,255,.20) !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.bw-tab-panel article:nth-child(3n+1) { background: linear-gradient(145deg, rgba(255,229,138,.24), rgba(255,255,255,.10)) !important; }
.bw-tab-panel article:nth-child(3n+2) { background: linear-gradient(145deg, rgba(154,230,180,.20), rgba(255,255,255,.10)) !important; }
.bw-tab-panel article:nth-child(3n+3) { background: linear-gradient(145deg, rgba(255,139,112,.18), rgba(255,255,255,.10)) !important; }
.bw-tab-panel article h1,
.bw-tab-panel article h2,
.bw-tab-panel article h3,
.bw-tab-panel article .text-slate-900,
.bw-tab-panel .bw-category-tile-title {
color: #fffdf8 !important;
}
.bw-tab-panel article p,
.bw-tab-panel article .text-slate-600,
.bw-tab-panel article .text-slate-500,
.bw-tab-panel article .text-slate-700 {
color: rgba(255,253,248,.82) !important;
}
/* Action buttons inside glass panels. */
.bw-tab-panel a.bg-indigo-50,
.bw-tab-panel button.bg-indigo-50 {
background: linear-gradient(135deg, #2f7d4d, #1f5f39) !important;
color: #ffffff !important;
border: 1px solid rgba(255,229,138,.54) !important;
}
.bw-tab-panel a.bg-white,
.bw-tab-panel button.bg-white {
background: linear-gradient(135deg, #fffdf8, #fff4c7) !important;
color: #122016 !important;
border: 1px solid rgba(255,255,255,.80) !important;
}
.bw-tab-panel button.bg-rose-50,
.bw-tab-panel a.bg-rose-50 {
background: rgba(239,77,77,.18) !important;
color: #ffe1dd !important;
border: 1px solid rgba(255,177,165,.50) !important;
}
.bw-tab-panel button.bg-emerald-600,
.bw-tab-panel button.bg-emerald-50,
.bw-tab-panel a.bg-emerald-50 {
background: linear-gradient(135deg, #2f7d4d, #49aa6e) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,.35) !important;
}
/* Category manager: bigger label and clean add button. */
#bw-tab-categories .bw-filter-box > div:first-child p,
.bw-filter-box .uppercase.tracking-\[\.25em\] {
font-size: .95rem !important;
letter-spacing: .22em !important;
color: #ffe58a !important;
}
#bw-tab-categories .bw-filter-box > div:first-child h2 {
font-size: clamp(2rem, 3vw, 3rem) !important;
line-height: 1.05 !important;
}
#bw-tab-categories form button[type="submit"],
#bw-tab-categories .bw-dark-btn {
background: linear-gradient(135deg, #fffdf8 0%, #ffe58a 28%, #ef4d4d 66%, #2f7d4d 100%) !important;
color: #122016 !important;
border: 1px solid rgba(255,255,255,.74) !important;
box-shadow: 0 14px 30px rgba(255,229,138,.16) !important;
}
.bw-category-grid {
gap: 18px !important;
}
.bw-category-tile {
min-height: 112px !important;
background: linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,229,138,.14)) !important;
border: 1px solid rgba(255,255,255,.32) !important;
box-shadow: 0 16px 40px rgba(23,53,31,.15) !important;
}
.bw-category-tile:hover {
background: linear-gradient(145deg, rgba(255,253,248,.36), rgba(255,229,138,.20)) !important;
border-color: rgba(255,229,138,.70) !important;
}
.bw-category-tile-count {
background: #fffdf8 !important;
color: #2f7d4d !important;
}
/* Category modal: visible and warm. */
.bw-category-modal .bw-modal-box,
.bw-modal-box.bw-category-modal-box {
background:
radial-gradient(circle at 0% 0%, rgba(255,229,138,.35), transparent 32%),
linear-gradient(145deg, rgba(255,253,248,.98), rgba(238,247,235,.96)) !important;
color: var(--bw-ink) !important;
border: 1px solid rgba(47,125,77,.20) !important;
box-shadow: 0 26px 90px rgba(23,53,31,.28) !important;
}
.bw-category-modal .bw-modal-box h3,
.bw-category-modal .bw-modal-box p,
.bw-category-modal .bw-modal-box label,
.bw-category-modal .bw-modal-box .text-slate-900,
.bw-category-modal .bw-modal-box .text-slate-600,
.bw-category-modal .bw-modal-box .text-slate-700 {
color: var(--bw-ink) !important;
}
.bw-category-modal .bw-cat-show-update {
background: linear-gradient(135deg, #2f7d4d, #55b778) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,.72) !important;
}
.bw-category-modal button.bg-rose-50 {
background: linear-gradient(135deg, #ffe1dd, #ffb2a5) !important;
color: #9a1f1f !important;
border: 1px solid rgba(239,77,77,.35) !important;
}
.bw-category-modal .bw-cat-close {
background: #fffdf8 !important;
color: var(--bw-ink) !important;
border: 1px solid rgba(47,125,77,.18) !important;
}
/* Tags: readable highlighted pills. */
.bw-wrap span.rounded-full,
.bw-wrap .bw-category-tile-count,
.bw-wrap .text-xs.font-bold.text-slate-500,
.bw-wrap .text-sm.font-bold.text-slate-500 {
border: 1px solid rgba(255,255,255,.60) !important;
box-shadow: 0 8px 18px rgba(23,53,31,.10), inset 0 1px 0 rgba(255,255,255,.70) !important;
}
.bw-wrap .bg-orange-100 {
background: linear-gradient(135deg, #fffdf8, #ffe58a) !important;
color: #8a2f12 !important;
}
.bw-wrap .bg-emerald-100 {
background: linear-gradient(135deg, #f2fff3, #8ee5a6) !important;
color: #155d35 !important;
}
.bw-wrap .bg-rose-100 {
background: linear-gradient(135deg, #fff3f0, #ff9b8d) !important;
color: #8f1d1d !important;
}
.bw-wrap .bg-slate-100,
.bw-wrap .bg-indigo-100 {
background: linear-gradient(135deg, #fffdf8, #e9f8e9) !important;
color: #122016 !important;
}
.bw-wrap .text-xs.font-bold.text-slate-500,
.bw-wrap .text-sm.font-bold.text-slate-500 {
background: linear-gradient(135deg, #fffdf8, #f2fff3) !important;
color: #17351f !important;
}
/* Blog detail page: make the title, image, and content feel designed. */
.bw-detail-box {
background:
radial-gradient(circle at 0% 0%, rgba(255,229,138,.30), transparent 30%),
linear-gradient(145deg, rgba(255,253,248,.88), rgba(238,247,235,.74)) !important;
padding: clamp(1.25rem, 3vw, 2.5rem) !important;
}
.bw-detail-main-grid {
gap: clamp(1.25rem, 3vw, 2.25rem) !important;
align-items: stretch !important;
}
.bw-detail-copy {
background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,250,240,.72)) !important;
border: 1px solid rgba(47,125,77,.14) !important;
border-radius: 28px !important;
box-shadow: 0 20px 52px rgba(47,125,77,.10) !important;
}
.bw-detail-media {
background: linear-gradient(145deg, rgba(255,255,255,.84), rgba(255,229,138,.18)) !important;
border: 1px solid rgba(47,125,77,.16) !important;
border-radius: 28px !important;
padding: 12px !important;
box-shadow: 0 22px 56px rgba(47,125,77,.14) !important;
}
.bw-detail-image {
border-radius: 22px !important;
box-shadow: 0 14px 32px rgba(23,53,31,.12) !important;
}
.bw-content {
background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,250,240,.68)) !important;
border: 1px solid rgba(47,125,77,.14) !important;
border-radius: 28px !important;
padding: clamp(1.1rem, 2.6vw, 2rem) !important;
box-shadow: 0 18px 48px rgba(47,125,77,.10) !important;
}
.bw-content img {
border-radius: 22px !important;
box-shadow: 0 18px 44px rgba(47,125,77,.14) !important;
}
/* Form fields: clean, visible, but softer. */
.bw-form-input,
.bw-wrap select,
.bw-wrap textarea,
.bw-wrap input[type="text"],
.bw-wrap input[type="email"],
.bw-wrap input[type="password"],
.bw-wrap input[type="file"] {
background: rgba(255,255,255,.94) !important;
border-color: rgba(47,125,77,.36) !important;
color: var(--bw-ink) !important;
}
.bw-form-input::placeholder,
.bw-wrap textarea::placeholder,
.bw-wrap input::placeholder {
color: rgba(18,32,22,.48) !important;
}
.bw-form-input:focus,
.bw-wrap select:focus,
.bw-wrap textarea:focus,
.bw-wrap input[type="text"]:focus,
.bw-wrap input[type="email"]:focus,
.bw-wrap input[type="password"]:focus,
.bw-search-input:focus {
border-color: #2f7d4d !important;
box-shadow: 0 0 0 4px rgba(255,229,138,.34), 0 8px 20px rgba(47,125,77,.10) !important;
}
/* Better hero fixed-image contrast without making pages too dark. */
.bw-hero-home,
.bw-hero-auth,
.bw-hero-write,
.bw-hero-dashboard,
.bw-hero-profile,
.bw-hero-detail,
.bw-hero-general {
background-blend-mode: normal !important;
}
.bw-hero::before {
background:
radial-gradient(circle at 50% 25%, rgba(255,229,138,.10), transparent 34%),
linear-gradient(180deg, rgba(23,53,31,.08), rgba(23,53,31,.18)) !important;
}
@media (max-width: 1023px) {
.bw-tab-panel > .bw-filter-box,
.bw-tab-panel > section.bw-filter-box {
border-radius: 22px !important;
}
.bw-detail-box,
.bw-content,
.bw-detail-copy,
.bw-detail-media {
border-radius: 22px !important;
}
}
/* ---------------------------------------------------------
v39 Dark cartoon navy palette refresh
Requested: keep hero design as before, use smooth navy-blue dark theme,
soft baby-book colors, visible profile text, better blog detail and category modal.
--------------------------------------------------------- */
:root {
--bw-navy-950: #071329;
--bw-navy-900: #0b1c3f;
--bw-navy-800: #132d63;
--bw-navy-700: #1d4283;
--bw-cream: #fffdf4;
--bw-white: #ffffff;
--bw-yellow: #ffe681;
--bw-yellow-soft: #fff2b8;
--bw-red: #ff6f61;
--bw-red-deep: #d93b42;
--bw-green: #8be2a4;
--bw-green-deep: #2f9d68;
--bw-text: #10203f;
--bw-muted: #60708f;
--bw-glass-dark: rgba(255,255,255,.13);
--bw-glass-line: rgba(255,255,255,.25);
--bw-soft-shadow: 0 24px 70px rgba(7,19,41,.20);
}
body {
background:
linear-gradient(180deg, #071329 0%, #0d214b 24%, #f4f7ff 72%, #fffdf4 100%) !important;
color: var(--bw-text) !important;
}
.bw-bg {
background:
radial-gradient(circle at 12% 0%, rgba(255,230,129,.26), transparent 28%),
radial-gradient(circle at 92% 8%, rgba(255,111,97,.18), transparent 26%),
radial-gradient(circle at 50% 34%, rgba(139,226,164,.12), transparent 32%),
linear-gradient(180deg, #071329 0%, #0d214b 32%, #e9f0ff 74%, #fffdf4 100%) !important;
}
/* Keep the hero visually like the older version: image unchanged, readable white text. */
.bw-hero {
background-size: cover !important;
background-position: center center !important;
background-attachment: fixed !important;
}
.bw-hero h1,
.bw-hero .text-white,
.bw-hero nav a:first-child {
color: #ffffff !important;
text-shadow: 0 3px 18px rgba(0,0,0,.38) !important;
}
.bw-hero p,
.bw-hero .text-orange-50,
.bw-hero .text-orange-100 {
color: #fff8e6 !important;
text-shadow: 0 2px 12px rgba(0,0,0,.28) !important;
}
.bw-hero .bw-glass {
background: rgba(255,255,255,.25) !important;
border: 1px solid rgba(255,255,255,.22) !important;
backdrop-filter: blur(18px) !important;
-webkit-backdrop-filter: blur(18px) !important;
}
.bw-hero input[type="text"] {
color: #0f172a !important;
background: rgba(255,255,255,.94) !important;
border: 1px solid rgba(255,255,255,.72) !important;
}
/* Soft rounded page surfaces. */
.bw-filter-box,
.bw-comments-box,
.bw-detail-box,
.bw-soft-card,
.bw-editor-box,
.bw-category-tile,
.bw-modal-box,
.bw-toast,
.bw-archive-year,
.bw-archive-month,
.bw-current-blog,
.bw-post-row,
.bw-post-row-inner,
.bw-auth-shell,
.bw-detail-media,
.bw-post-image-wrap,
.bw-wrap article {
border-radius: 26px !important;
}
.bw-filter-box,
.bw-comments-box,
.bw-detail-box,
.bw-soft-card,
.bw-editor-box,
.bw-auth-shell {
background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,253,244,.76)) !important;
border: 1px solid rgba(255,255,255,.68) !important;
box-shadow: var(--bw-soft-shadow) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
}
.bw-wrap h1,
.bw-wrap h2,
.bw-wrap h3,
.bw-wrap .text-slate-900,
.bw-category-tile-title {
color: var(--bw-navy-950) !important;
}
.bw-wrap p,
.bw-wrap label,
.bw-wrap .text-slate-600,
.bw-wrap .text-slate-500,
.bw-wrap .text-slate-700 {
color: #40506f !important;
}
.bw-wrap .text-orange-500,
.bw-wrap .text-indigo-500 {
color: var(--bw-red-deep) !important;
}
/* Buttons: use only the colors needed, in smoother combinations. */
.bw-gradient-btn,
.bw-tab-btn.is-active,
.bw-file-input::file-selector-button {
background: linear-gradient(135deg, var(--bw-yellow) 0%, var(--bw-red) 58%, var(--bw-navy-800) 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,.62) !important;
text-shadow: 0 1px 2px rgba(7,19,41,.28) !important;
box-shadow: 0 14px 30px rgba(255,111,97,.18) !important;
}
.bw-dark-btn {
background: linear-gradient(135deg, var(--bw-navy-900), var(--bw-navy-700)) !important;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,.18) !important;
}
.bw-btn:hover {
box-shadow: 0 16px 36px rgba(7,19,41,.22), 0 0 0 1px rgba(255,230,129,.34) !important;
}
/* Glass tab buttons. */
.bw-tab-btn,
.bw-nav-dashboard {
background: rgba(255,255,255,.80) !important;
border: 1px solid rgba(255,255,255,.74) !important;
color: var(--bw-navy-950) !important;
box-shadow: 0 12px 26px rgba(7,19,41,.12), inset 0 1px 0 rgba(255,255,255,.72) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
}
.bw-tab-btn:hover,
.bw-nav-dashboard:hover {
background: rgba(255,253,244,.92) !important;
transform: translateY(-2px);
}
.bw-tab-btn.is-active {
color: #ffffff !important;
}
/* User/admin dashboard: navy blue version of the previous green glass effect. */
.bw-tab-panel > .bw-filter-box,
.bw-tab-panel > section.bw-filter-box,
.bw-tab-panel .bw-profile-panel,
#bw-tab-my-blogs > .bw-filter-box,
#bw-tab-approval > .bw-filter-box,
#bw-tab-all-blogs > .bw-filter-box,
#bw-tab-categories > .bw-filter-box,
#bw-tab-users > .bw-filter-box,
#bw-tab-profile > .bw-filter-box {
background:
radial-gradient(circle at 0% 0%, rgba(255,230,129,.22), transparent 32%),
radial-gradient(circle at 100% 0%, rgba(255,111,97,.14), transparent 30%),
radial-gradient(circle at 50% 100%, rgba(139,226,164,.12), transparent 30%),
linear-gradient(145deg, rgba(7,19,41,.98), rgba(19,45,99,.95)) !important;
border: 1px solid rgba(255,255,255,.20) !important;
color: #fffdf4 !important;
box-shadow: 0 26px 76px rgba(7,19,41,.30) !important;
}
.bw-tab-panel > .bw-filter-box h1,
.bw-tab-panel > .bw-filter-box h2,
.bw-tab-panel > .bw-filter-box h3,
.bw-tab-panel > section.bw-filter-box h1,
.bw-tab-panel > section.bw-filter-box h2,
.bw-tab-panel > section.bw-filter-box h3,
.bw-tab-panel .bw-filter-box .text-slate-900,
.bw-tab-panel .bw-filter-box .text-slate-700 {
color: #fffdf4 !important;
}
.bw-tab-panel > .bw-filter-box p,
.bw-tab-panel > section.bw-filter-box p,
.bw-tab-panel .bw-filter-box .text-slate-600,
.bw-tab-panel .bw-filter-box .text-slate-500 {
color: rgba(255,253,244,.84) !important;
}
/* Profile must be readable, not washed out. */
#bw-tab-profile .bw-filter-box,
#bw-tab-profile .bw-profile-panel,
.bw-wrap .grid > .bw-filter-box {
background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,253,244,.86)) !important;
border: 1px solid rgba(19,45,99,.14) !important;
color: var(--bw-navy-950) !important;
box-shadow: 0 20px 56px rgba(7,19,41,.14) !important;
}
#bw-tab-profile .bw-filter-box h1,
#bw-tab-profile .bw-filter-box h2,
#bw-tab-profile .bw-filter-box h3,
#bw-tab-profile .bw-filter-box label,
#bw-tab-profile .bw-filter-box .text-slate-900,
#bw-tab-profile .bw-filter-box .text-slate-700,
.bw-wrap .grid > .bw-filter-box h2,
.bw-wrap .grid > .bw-filter-box label {
color: var(--bw-navy-950) !important;
text-shadow: none !important;
}
#bw-tab-profile .bw-filter-box p,
#bw-tab-profile .bw-filter-box .text-slate-600,
.bw-wrap .grid > .bw-filter-box p {
color: #40506f !important;
}
#bw-tab-profile input,
#bw-tab-profile .bw-form-input,
#bw-tab-profile input[disabled] {
background: #ffffff !important;
color: var(--bw-navy-950) !important;
-webkit-text-fill-color: var(--bw-navy-950) !important;
opacity: 1 !important;
border-color: rgba(19,45,99,.38) !important;
}
/* Manage blogs/cards: dark navy panels with soft colorful highlights. */
.bw-tab-panel article,
.bw-tab-panel .bw-category-tile,
.bw-tab-panel .bw-rejected-box {
background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.08)) !important;
border: 1px solid rgba(255,255,255,.24) !important;
color: #fffdf4 !important;
box-shadow: 0 18px 48px rgba(7,19,41,.20), inset 0 1px 0 rgba(255,255,255,.18) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
}
.bw-tab-panel article:nth-child(3n+1) {
background: linear-gradient(145deg, rgba(255,230,129,.18), rgba(255,255,255,.08)) !important;
}
.bw-tab-panel article:nth-child(3n+2) {
background: linear-gradient(145deg, rgba(139,226,164,.15), rgba(255,255,255,.08)) !important;
}
.bw-tab-panel article:nth-child(3n+3) {
background: linear-gradient(145deg, rgba(255,111,97,.15), rgba(255,255,255,.08)) !important;
}
.bw-tab-panel article h1,
.bw-tab-panel article h2,
.bw-tab-panel article h3,
.bw-tab-panel article .text-slate-900,
.bw-tab-panel .bw-category-tile-title {
color: #fffdf4 !important;
}
.bw-tab-panel article p,
.bw-tab-panel article .text-slate-600,
.bw-tab-panel article .text-slate-500,
.bw-tab-panel article .text-slate-700 {
color: rgba(255,253,244,.84) !important;
}
/* Action buttons inside panels. */
.bw-tab-panel a.bg-indigo-50,
.bw-tab-panel button.bg-indigo-50 {
background: linear-gradient(135deg, var(--bw-navy-700), #2459ad) !important;
color: #ffffff !important;
border: 1px solid rgba(255,230,129,.55) !important;
}
.bw-tab-panel a.bg-white,
.bw-tab-panel button.bg-white {
background: linear-gradient(135deg, #ffffff, #fff2b8) !important;
color: var(--bw-navy-950) !important;
border: 1px solid rgba(255,255,255,.82) !important;
}
.bw-tab-panel button.bg-rose-50,
.bw-tab-panel a.bg-rose-50 {
background: rgba(255,111,97,.18) !important;
color: #ffe8e4 !important;
border: 1px solid rgba(255,111,97,.50) !important;
}
.bw-tab-panel button.bg-emerald-600,
.bw-tab-panel button.bg-emerald-50,
.bw-tab-panel a.bg-emerald-50 {
background: linear-gradient(135deg, var(--bw-green-deep), var(--bw-green)) !important;
color: #062414 !important;
border: 1px solid rgba(255,255,255,.42) !important;
}
/* Category manager heading and add button. */
#bw-tab-categories .bw-filter-box > div:first-child p,
.bw-filter-box .uppercase.tracking-\[\.25em\] {
font-size: 1rem !important;
letter-spacing: .16em !important;
color: var(--bw-yellow) !important;
}
#bw-tab-categories .bw-filter-box > div:first-child h2 {
font-size: clamp(2.05rem, 3vw, 3.15rem) !important;
line-height: 1.05 !important;
}
#bw-tab-categories form button[type="submit"],
#bw-tab-categories .bw-dark-btn {
background: linear-gradient(135deg, var(--bw-yellow) 0%, var(--bw-red) 70%) !important;
color: #2b120f !important;
border: 1px solid rgba(255,255,255,.74) !important;
box-shadow: 0 14px 30px rgba(255,111,97,.20) !important;
}
.bw-category-grid { gap: 18px !important; }
.bw-category-tile {
min-height: 112px !important;
background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,230,129,.10)) !important;
border: 1px solid rgba(255,255,255,.26) !important;
}
.bw-category-tile:hover {
background: linear-gradient(145deg, rgba(255,255,255,.26), rgba(139,226,164,.14)) !important;
border-color: rgba(255,230,129,.70) !important;
}
.bw-category-tile-count {
background: #fffdf4 !important;
color: var(--bw-navy-800) !important;
}
/* Better category modal visibility with friendly colors. */
.bw-category-modal .bw-modal-box,
.bw-modal-box.bw-category-modal-box {
background:
radial-gradient(circle at 0% 0%, rgba(255,230,129,.38), transparent 32%),
radial-gradient(circle at 100% 0%, rgba(139,226,164,.22), transparent 28%),
linear-gradient(145deg, rgba(255,255,255,.98), rgba(243,247,255,.96)) !important;
color: var(--bw-navy-950) !important;
border: 1px solid rgba(19,45,99,.16) !important;
box-shadow: 0 26px 90px rgba(7,19,41,.30) !important;
}
.bw-category-modal .bw-modal-box h3,
.bw-category-modal .bw-modal-box p,
.bw-category-modal .bw-modal-box label,
.bw-category-modal .bw-modal-box .text-slate-900,
.bw-category-modal .bw-modal-box .text-slate-600,
.bw-category-modal .bw-modal-box .text-slate-700 {
color: var(--bw-navy-950) !important;
}
.bw-category-modal .bw-cat-show-update {
background: linear-gradient(135deg, var(--bw-navy-700), var(--bw-navy-900)) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,.72) !important;
}
.bw-category-modal button.bg-rose-50 {
background: linear-gradient(135deg, #fff1ed, #ffb6ad) !important;
color: #8c1717 !important;
border: 1px solid rgba(255,111,97,.36) !important;
}
.bw-category-modal .bw-cat-close {
background: #ffffff !important;
color: var(--bw-navy-950) !important;
border: 1px solid rgba(19,45,99,.18) !important;
}
/* Tags/status/date: highlighted but soft. */
.bw-wrap span.rounded-full,
.bw-wrap .bw-category-tile-count,
.bw-wrap .text-xs.font-bold.text-slate-500,
.bw-wrap .text-sm.font-bold.text-slate-500 {
border: 1px solid rgba(255,255,255,.70) !important;
box-shadow: 0 8px 18px rgba(7,19,41,.10), inset 0 1px 0 rgba(255,255,255,.76) !important;
font-weight: 950 !important;
}
.bw-wrap .bg-orange-100 {
background: linear-gradient(135deg, #fffdf4, var(--bw-yellow)) !important;
color: #7a2a0b !important;
}
.bw-wrap .bg-emerald-100 {
background: linear-gradient(135deg, #f1fff4, var(--bw-green)) !important;
color: #064d31 !important;
}
.bw-wrap .bg-rose-100 {
background: linear-gradient(135deg, #fff1ed, #ff9d94) !important;
color: #7f1d1d !important;
}
.bw-wrap .bg-slate-100,
.bw-wrap .bg-indigo-100 {
background: linear-gradient(135deg, #ffffff, #dce8ff) !important;
color: var(--bw-navy-950) !important;
}
.bw-wrap .text-xs.font-bold.text-slate-500,
.bw-wrap .text-sm.font-bold.text-slate-500 {
background: linear-gradient(135deg, #ffffff, #fff2b8) !important;
color: var(--bw-navy-950) !important;
}
/* Blog detail page: designed cards instead of pasted blocks. */
.bw-detail-box {
background:
radial-gradient(circle at 8% 0%, rgba(255,230,129,.20), transparent 30%),
radial-gradient(circle at 100% 15%, rgba(139,226,164,.12), transparent 26%),
linear-gradient(145deg, rgba(255,255,255,.90), rgba(247,250,255,.82)) !important;
border: 1px solid rgba(255,255,255,.70) !important;
padding: clamp(1.25rem, 3vw, 2.5rem) !important;
}
.bw-detail-main-grid {
gap: clamp(1.25rem, 3vw, 2.25rem) !important;
align-items: stretch !important;
}
.bw-detail-copy {
background: linear-gradient(145deg, #ffffff, #fffdf4) !important;
border: 1px solid rgba(19,45,99,.10) !important;
border-radius: 28px !important;
box-shadow: 0 20px 52px rgba(7,19,41,.08) !important;
padding: clamp(1.25rem, 3vw, 2rem) !important;
}
.bw-detail-media {
background: linear-gradient(145deg, #ffffff, #f2f7ff) !important;
border: 1px solid rgba(19,45,99,.12) !important;
border-radius: 28px !important;
box-shadow: 0 22px 58px rgba(7,19,41,.12) !important;
padding: .65rem !important;
}
.bw-detail-media img,
.bw-detail-image {
border-radius: 22px !important;
}
.bw-content {
background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,253,244,.72)) !important;
border: 1px solid rgba(19,45,99,.08) !important;
border-radius: 28px !important;
padding: clamp(1.25rem, 3vw, 2.2rem) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 20px 52px rgba(7,19,41,.06) !important;
}
.bw-content img {
border-radius: 22px !important;
box-shadow: 0 18px 44px rgba(7,19,41,.12) !important;
}
/* Toast/progress and notification badges. */
.bw-toast-progress {
background: linear-gradient(135deg, var(--bw-yellow), var(--bw-red), var(--bw-green)) !important;
}
.bw-count-badge {
background: linear-gradient(135deg, var(--bw-red), #ff3d68) !important;
color: #fff !important;
border: 2px solid #fffdf4 !important;
}
@media (max-width: 1023px) {
.bw-hero { background-attachment: scroll !important; }
}
/* ---------------------------------------------------------
v40 visibility + comfort refresh
Requested colors: White, Red, Green, Yellow with a calm blue admin shade.
This final block intentionally overrides earlier palette experiments.
--------------------------------------------------------- */
:root {
--bw-white: #ffffff;
--bw-page-gray: #f2f5f7;
--bw-page-gray-2: #e8edf2;
--bw-ink-soft: #122033;
--bw-blue-admin: #1f5fbf;
--bw-blue-admin-2: #0d3f91;
--bw-red-v40: #ef4444;
--bw-red-deep-v40: #b91c1c;
--bw-green-v40: #22c55e;
--bw-green-deep-v40: #15803d;
--bw-yellow-v40: #fde047;
--bw-yellow-soft-v40: #fff7bd;
--bw-glass-v40: rgba(255,255,255,.72);
--bw-line-v40: rgba(18,32,51,.12);
--bw-shadow-v40: 0 24px 70px rgba(18,32,51,.14);
}
body,
.bw-bg {
background:
radial-gradient(circle at 8% 0%, rgba(253,224,71,.34), transparent 26%),
radial-gradient(circle at 96% 7%, rgba(34,197,94,.15), transparent 24%),
radial-gradient(circle at 50% 0%, rgba(239,68,68,.10), transparent 32%),
linear-gradient(180deg, #f7fafc 0%, var(--bw-page-gray) 42%, var(--bw-page-gray-2) 100%) !important;
color: var(--bw-ink-soft) !important;
}
.bw-wrap h1,
.bw-wrap h2,
.bw-wrap h3,
.bw-wrap h4,
.bw-wrap label,
.bw-wrap .text-slate-900,
.bw-wrap .text-slate-800 {
color: var(--bw-ink-soft) !important;
text-shadow: none !important;
}
.bw-wrap p,
.bw-wrap .text-slate-700,
.bw-wrap .text-slate-600,
.bw-wrap .text-slate-500 {
color: #465569 !important;
}
.bw-filter-box,
.bw-comments-box,
.bw-detail-box,
.bw-soft-card,
.bw-editor-box,
.bw-auth-shell,
.bw-wrap article,
.bw-archive,
.bw-current-blog,
.bw-post-row,
.bw-post-row-inner {
background:
linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.66)) !important;
border: 1px solid rgba(255,255,255,.82) !important;
box-shadow: var(--bw-shadow-v40), inset 0 1px 0 rgba(255,255,255,.80) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
}
.bw-filter-box:hover,
.bw-soft-card:hover,
.bw-wrap article:hover {
border-color: rgba(34,197,94,.28) !important;
}
/* Navbar/admin button: restore a calm blue shade and keep hover readable. */
.bw-nav-dashboard,
a.bw-nav-dashboard.bw-btn {
background: linear-gradient(135deg, #2d72d9, var(--bw-blue-admin-2)) !important;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,.34) !important;
box-shadow: 0 16px 34px rgba(31,95,191,.24), inset 0 1px 0 rgba(255,255,255,.36) !important;
}
.bw-nav-dashboard:hover,
a.bw-nav-dashboard.bw-btn:hover {
background: linear-gradient(135deg, #2d72d9, var(--bw-blue-admin-2)) !important;
color: #ffffff !important;
}
.bw-nav-dashboard *,
.bw-nav-dashboard:hover * { color: #ffffff !important; }
/* Tab buttons: avoid white text on white hover for active user/admin buttons. */
.bw-tab-btn {
background: rgba(255,255,255,.82) !important;
color: var(--bw-ink-soft) !important;
border: 1px solid rgba(255,255,255,.86) !important;
box-shadow: 0 12px 26px rgba(18,32,51,.10), inset 0 1px 0 rgba(255,255,255,.84) !important;
}
.bw-tab-btn:hover:not(.is-active) {
background: rgba(255,255,255,.82) !important;
color: var(--bw-ink-soft) !important;
border: 1px solid rgba(255,255,255,.86) !important;
box-shadow: 0 12px 26px rgba(18,32,51,.10), inset 0 1px 0 rgba(255,255,255,.84) !important;
}
.bw-tab-btn.is-active,
.bw-tab-btn.is-active:hover,
.bw-tab-btn.is-active:focus {
background: linear-gradient(135deg, var(--bw-blue-admin), var(--bw-blue-admin-2)) !important;
color: #ffffff !important;
border-color: rgba(255,255,255,.45) !important;
box-shadow: 0 16px 34px rgba(31,95,191,.24), inset 0 1px 0 rgba(255,255,255,.32) !important;
}
.bw-tab-btn.is-active *,
.bw-tab-btn.is-active:hover * { color: #ffffff !important; }
/* Comfortable primary buttons using white/red/green/yellow. */
.bw-gradient-btn,
.bw-file-input::file-selector-button {
background: linear-gradient(135deg, var(--bw-yellow-v40) 0%, #ffffff 28%, var(--bw-green-v40) 64%, var(--bw-red-v40) 100%) !important;
color: #12301f !important;
border: 1px solid rgba(255,255,255,.76) !important;
text-shadow: 0 1px 0 rgba(255,255,255,.50) !important;
box-shadow: 0 15px 32px rgba(34,197,94,.20), inset 0 1px 0 rgba(255,255,255,.72) !important;
}
.bw-dark-btn,
.bw-wrap button[type="submit"].bw-dark-btn {
background: linear-gradient(135deg, var(--bw-green-deep-v40), var(--bw-green-v40)) !important;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,.40) !important;
text-shadow: 0 1px 2px rgba(0,0,0,.20) !important;
}
.bw-gradient-btn:hover,
.bw-dark-btn:hover {
filter: saturate(1.04) brightness(1.02);
}
/* Home category options: more visual, pill-card style. */
.bw-home-main .bw-filter-box .flex.flex-wrap.gap-3 > a.bw-btn {
position: relative;
overflow: hidden;
background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,247,189,.72)) !important;
color: var(--bw-ink-soft) !important;
border: 1px solid rgba(255,255,255,.92) !important;
box-shadow: 0 12px 26px rgba(18,32,51,.10), inset 0 1px 0 rgba(255,255,255,.86) !important;
padding-inline: 1.2rem !important;
}
.bw-home-main .bw-filter-box .flex.flex-wrap.gap-3 > a.bw-btn::before {
content: "";
width: .55rem;
height: .55rem;
border-radius: 999px;
background: var(--bw-green-v40);
display: inline-block;
margin-right: .5rem;
box-shadow: 0 0 0 4px rgba(34,197,94,.14);
vertical-align: middle;
}
.bw-home-main .bw-filter-box .flex.flex-wrap.gap-3 > a.bw-gradient-btn,
.bw-home-main .bw-filter-box .flex.flex-wrap.gap-3 > a.bw-gradient-btn:hover {
background: linear-gradient(135deg, var(--bw-red-v40), var(--bw-green-deep-v40)) !important;
color: #ffffff !important;
text-shadow: 0 1px 2px rgba(0,0,0,.20) !important;
}
.bw-home-main .bw-filter-box .flex.flex-wrap.gap-3 > a.bw-gradient-btn::before { background: var(--bw-yellow-v40); }
/* Blog view page: no more blending with background. */
.bw-detail-box {
background:
radial-gradient(circle at 0% 0%, rgba(253,224,71,.30), transparent 30%),
radial-gradient(circle at 100% 0%, rgba(34,197,94,.16), transparent 26%),
linear-gradient(145deg, rgba(255,255,255,.96), rgba(242,245,247,.82)) !important;
border: 1px solid rgba(255,255,255,.86) !important;
}
.bw-detail-copy,
.bw-detail-media,
.bw-content {
background: linear-gradient(145deg, #ffffff, #f8fafc) !important;
border: 1px solid rgba(18,32,51,.10) !important;
box-shadow: 0 22px 56px rgba(18,32,51,.10), inset 0 1px 0 rgba(255,255,255,.86) !important;
}
.bw-content {
color: var(--bw-ink-soft) !important;
}
.bw-content p,
.bw-content li,
.bw-content div,
.bw-content span { color: inherit; }
/* Update blog/form area: soft white card with clear fields. */
.bw-editor-box,
.bw-auth-forms,
.bw-open-editor-file,
.bw-wrap form .bw-form-input,
.bw-wrap form select,
.bw-wrap form textarea,
.bw-wrap form input[type="text"],
.bw-wrap form input[type="email"],
.bw-wrap form input[type="password"],
.bw-wrap form input[type="file"] {
background: rgba(255,255,255,.96) !important;
color: var(--bw-ink-soft) !important;
border-color: rgba(18,32,51,.18) !important;
}
.bw-editor-box {
background: linear-gradient(145deg, #ffffff, #f4f7fb) !important;
}
.bw-open-editor-file {
background: linear-gradient(145deg, #ffffff, var(--bw-yellow-soft-v40)) !important;
color: var(--bw-red-deep-v40) !important;
border-color: rgba(239,68,68,.26) !important;
}
/* Admin/user sections: smooth light-gray glass instead of harsh dark blending. */
.bw-tab-panel > .bw-filter-box,
.bw-tab-panel > section.bw-filter-box,
#bw-tab-my-blogs > .bw-filter-box,
#bw-tab-approval > .bw-filter-box,
#bw-tab-all-blogs > .bw-filter-box,
#bw-tab-categories > .bw-filter-box,
#bw-tab-users > .bw-filter-box,
#bw-tab-profile > .bw-filter-box {
background:
radial-gradient(circle at 0% 0%, rgba(253,224,71,.24), transparent 32%),
radial-gradient(circle at 100% 0%, rgba(34,197,94,.14), transparent 28%),
linear-gradient(145deg, rgba(255,255,255,.93), rgba(235,240,245,.78)) !important;
border: 1px solid rgba(255,255,255,.84) !important;
color: var(--bw-ink-soft) !important;
box-shadow: var(--bw-shadow-v40), inset 0 1px 0 rgba(255,255,255,.86) !important;
}
.bw-tab-panel > .bw-filter-box h1,
.bw-tab-panel > .bw-filter-box h2,
.bw-tab-panel > .bw-filter-box h3,
.bw-tab-panel > section.bw-filter-box h1,
.bw-tab-panel > section.bw-filter-box h2,
.bw-tab-panel > section.bw-filter-box h3,
.bw-tab-panel .bw-filter-box .text-slate-900,
.bw-tab-panel .bw-filter-box .text-slate-800,
.bw-tab-panel .bw-filter-box .text-slate-700 {
color: var(--bw-ink-soft) !important;
}
.bw-tab-panel > .bw-filter-box p,
.bw-tab-panel > section.bw-filter-box p,
.bw-tab-panel .bw-filter-box .text-slate-600,
.bw-tab-panel .bw-filter-box .text-slate-500 {
color: #465569 !important;
}
.bw-tab-panel article,
.bw-tab-panel .bw-category-tile,
.bw-tab-panel .bw-rejected-box {
background: linear-gradient(145deg, rgba(255,255,255,.90), rgba(255,255,255,.62)) !important;
border: 1px solid rgba(255,255,255,.84) !important;
color: var(--bw-ink-soft) !important;
box-shadow: 0 18px 48px rgba(18,32,51,.10), inset 0 1px 0 rgba(255,255,255,.86) !important;
}
.bw-tab-panel article h1,
.bw-tab-panel article h2,
.bw-tab-panel article h3,
.bw-tab-panel article .text-slate-900,
.bw-tab-panel .bw-category-tile-title { color: var(--bw-ink-soft) !important; }
.bw-tab-panel article p,
.bw-tab-panel article .text-slate-600,
.bw-tab-panel article .text-slate-500,
.bw-tab-panel article .text-slate-700 { color: #465569 !important; }
/* Category manager tiles and modal: bigger contrast, readable text. */
.bw-category-grid { gap: 20px !important; }
.bw-category-tile {
min-height: 118px !important;
background:
linear-gradient(145deg, #ffffff, #f1f8f3) !important;
border: 1px solid rgba(34,197,94,.20) !important;
}
.bw-category-tile:hover {
background: linear-gradient(145deg, #ffffff, #fff7bd) !important;
border-color: rgba(239,68,68,.30) !important;
}
.bw-category-tile-title { color: var(--bw-ink-soft) !important; }
.bw-category-tile-count {
background: linear-gradient(135deg, var(--bw-yellow-v40), #ffffff) !important;
color: var(--bw-green-deep-v40) !important;
}
.bw-category-modal .bw-modal-box,
.bw-modal-box.bw-category-modal-box,
#bw-confirm-modal .bw-modal-box {
background:
radial-gradient(circle at 0% 0%, rgba(253,224,71,.36), transparent 32%),
radial-gradient(circle at 100% 0%, rgba(34,197,94,.18), transparent 28%),
linear-gradient(145deg, #ffffff, #f5f7fa) !important;
color: var(--bw-ink-soft) !important;
border: 1px solid rgba(255,255,255,.90) !important;
box-shadow: 0 30px 90px rgba(18,32,51,.22), inset 0 1px 0 rgba(255,255,255,.90) !important;
}
.bw-category-modal .bw-modal-box h3,
.bw-category-modal .bw-modal-box p,
.bw-category-modal .bw-modal-box label,
.bw-category-modal .bw-modal-box .text-slate-900,
.bw-category-modal .bw-modal-box .text-slate-600,
.bw-category-modal .bw-modal-box .text-slate-700,
#bw-confirm-modal .bw-modal-box h3,
#bw-confirm-modal .bw-modal-box p {
color: var(--bw-ink-soft) !important;
}
.bw-category-modal .bw-cat-show-update {
background: linear-gradient(135deg, var(--bw-blue-admin), var(--bw-blue-admin-2)) !important;
color: #ffffff !important;
}
.bw-category-modal button.bg-rose-50,
#bw-confirm-modal .bw-modal-confirm {
background: linear-gradient(135deg, var(--bw-yellow-v40), var(--bw-red-v40)) !important;
color: #421010 !important;
}
.bw-category-modal .bw-cat-close,
#bw-confirm-modal .bw-modal-cancel {
background: #ffffff !important;
color: var(--bw-ink-soft) !important;
}
/* View / Update / Delete / Approve buttons: glass/neumorphic effect similar to the requested sample. */
.bw-tab-panel a.bg-indigo-50,
.bw-tab-panel button.bg-indigo-50,
.bw-tab-panel a.bg-white,
.bw-tab-panel button.bg-white,
.bw-tab-panel button.bg-rose-50,
.bw-tab-panel a.bg-rose-50,
.bw-tab-panel button.bg-emerald-600,
.bw-tab-panel button.bg-emerald-50,
.bw-tab-panel a.bg-emerald-50,
.bw-category-modal .bw-cat-show-update,
.bw-category-modal .bw-cat-close,
.bw-open-editor-file {
position: relative;
overflow: hidden;
transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
box-shadow:
0 15px 25px -4px rgba(18,32,51,.22),
inset 0 -3px 4px -1px rgba(18,32,51,.10),
0 -8px 15px -1px rgba(255,255,255,.76),
inset 0 3px 4px -1px rgba(255,255,255,.70),
inset 0 0 5px 1px rgba(255,255,255,.62) !important;
}
.bw-tab-panel a.bg-indigo-50,
.bw-tab-panel button.bg-indigo-50 {
background: linear-gradient(135deg, #ffffff, var(--bw-blue-admin)) !important;
color: #ffffff !important;
text-shadow: 0 1px 2px rgba(0,0,0,.25) !important;
}
.bw-tab-panel a.bg-white,
.bw-tab-panel button.bg-white {
background: linear-gradient(135deg, #ffffff, var(--bw-yellow-soft-v40)) !important;
color: var(--bw-ink-soft) !important;
}
.bw-tab-panel button.bg-rose-50,
.bw-tab-panel a.bg-rose-50 {
background: linear-gradient(135deg, #ffffff, #fecaca, var(--bw-red-v40)) !important;
color: #7f1d1d !important;
}
.bw-tab-panel button.bg-emerald-600,
.bw-tab-panel button.bg-emerald-50,
.bw-tab-panel a.bg-emerald-50 {
background: linear-gradient(135deg, #ffffff, var(--bw-green-v40)) !important;
color: #064e3b !important;
}
.bw-tab-panel a.bg-indigo-50:hover,
.bw-tab-panel button.bg-indigo-50:hover,
.bw-tab-panel a.bg-white:hover,
.bw-tab-panel button.bg-white:hover,
.bw-tab-panel button.bg-rose-50:hover,
.bw-tab-panel a.bg-rose-50:hover,
.bw-tab-panel button.bg-emerald-600:hover,
.bw-tab-panel button.bg-emerald-50:hover,
.bw-tab-panel a.bg-emerald-50:hover,
.bw-category-modal .bw-cat-show-update:hover,
.bw-category-modal .bw-cat-close:hover,
.bw-open-editor-file:hover {
transform: translateY(-2px) scale(1.01) !important;
filter: brightness(1.02) saturate(1.04);
}
.bw-tab-panel a.bg-indigo-50:active,
.bw-tab-panel button.bg-indigo-50:active,
.bw-tab-panel a.bg-white:active,
.bw-tab-panel button.bg-white:active,
.bw-tab-panel button.bg-rose-50:active,
.bw-tab-panel a.bg-rose-50:active,
.bw-tab-panel button.bg-emerald-600:active,
.bw-tab-panel button.bg-emerald-50:active,
.bw-tab-panel a.bg-emerald-50:active,
.bw-open-editor-file:active {
transform: translateY(1px) scale(.99) !important;
box-shadow:
0 10px 18px -6px rgba(18,32,51,.22),
inset 0 -8px 24px rgba(255,255,255,.82),
inset 0 8px 22px rgba(18,32,51,.14) !important;
}
/* Tags/status/date pills. */
.bw-wrap span.rounded-full,
.bw-wrap .bw-category-tile-count,
.bw-wrap .text-xs.font-bold.text-slate-500,
.bw-wrap .text-sm.font-bold.text-slate-500 {
border: 1px solid rgba(255,255,255,.78) !important;
box-shadow: 0 8px 18px rgba(18,32,51,.08), inset 0 1px 0 rgba(255,255,255,.86) !important;
}
.bw-wrap .bg-orange-100,
.bw-wrap .bg-indigo-100,
.bw-wrap .bg-slate-100 {
background: linear-gradient(135deg, #ffffff, var(--bw-yellow-soft-v40)) !important;
color: var(--bw-ink-soft) !important;
}
.bw-wrap .bg-emerald-100 { background: linear-gradient(135deg, #ffffff, #bbf7d0) !important; color: #064e3b !important; }
.bw-wrap .bg-rose-100 { background: linear-gradient(135deg, #ffffff, #fecaca) !important; color: #7f1d1d !important; }
/* Hamster loading overlay from the requested animation, adapted to plugin colors.
Visible ONLY on login + when a loading action starts, then removed after load/redirect.
*/
/* visible flag is controlled from JS: add/remove .is-visible */
.bw-loader-overlay {
position: fixed;
inset: 0;
z-index: 100002;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(242,245,247,.64);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0;
pointer-events: none;
transition: opacity .22s ease;
}
.bw-loader-overlay.is-visible { opacity: 1; pointer-events: auto; }
.bw-loader-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
border-radius: 30px;
padding: 26px 30px;
background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,247,189,.76));
border: 1px solid rgba(255,255,255,.88);
box-shadow: 0 28px 80px rgba(18,32,51,.20), inset 0 1px 0 rgba(255,255,255,.90);
}
.bw-loader-text {
margin: 0 !important;
font-weight: 950 !important;
color: var(--bw-ink-soft) !important;
}
.wheel-and-hamster {
--dur: 1s;
position: relative;
width: 12em;
height: 12em;
font-size: 14px;
}
.wheel,
.hamster,
.hamster div,
.spoke { position: absolute; }
.wheel,
.spoke {
border-radius: 50%;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.wheel {
background: radial-gradient(100% 100% at center,hsla(0,0%,60%,0) 47.8%,hsl(0,0%,72%) 48%);
z-index: 2;
}
.hamster {
animation: hamster var(--dur) ease-in-out infinite;
top: 50%;
left: calc(50% - 3.5em);
width: 7em;
height: 3.75em;
transform: rotate(4deg) translate(-0.8em,1.85em);
transform-origin: 50% 0;
z-index: 1;
}
.hamster__head {
animation: hamsterHead var(--dur) ease-in-out infinite;
background: var(--bw-red-v40);
border-radius: 70% 30% 0 100% / 40% 25% 25% 60%;
box-shadow: 0 -0.25em 0 var(--bw-yellow-v40) inset, 0.75em -1.55em 0 #ffffff inset;
top: 0;
left: -2em;
width: 2.75em;
height: 2.5em;
transform-origin: 100% 50%;
}
.hamster__ear {
animation: hamsterEar var(--dur) ease-in-out infinite;
background: #ffffff;
border-radius: 50%;
box-shadow: -0.25em 0 var(--bw-red-v40) inset;
top: -0.25em;
right: -0.25em;
width: 0.75em;
height: 0.75em;
transform-origin: 50% 75%;
}
.hamster__eye {
animation: hamsterEye var(--dur) linear infinite;
background-color: var(--bw-ink-soft);
border-radius: 50%;
top: 0.375em;
left: 1.25em;
width: 0.5em;
height: 0.5em;
}
.hamster__nose {
background: var(--bw-green-v40);
border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%;
top: 0.75em;
left: 0;
width: 0.2em;
height: 0.25em;
}
.hamster__body {
animation: hamsterBody var(--dur) ease-in-out infinite;
background: #ffffff;
border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%;
box-shadow: 0.1em 0.75em 0 var(--bw-red-v40) inset, 0.15em -0.5em 0 var(--bw-yellow-v40) inset;
top: 0.25em;
left: 2em;
width: 4.5em;
height: 3em;
transform-origin: 17% 50%;
transform-style: preserve-3d;
}
.hamster__limb--fr,
.hamster__limb--fl {
clip-path: polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%);
top: 2em;
left: 0.5em;
width: 1em;
height: 1.5em;
transform-origin: 50% 0;
}
.hamster__limb--fr {
animation: hamsterFRLimb var(--dur) linear infinite;
background: linear-gradient(var(--bw-yellow-v40) 80%,var(--bw-green-v40) 80%);
transform: rotate(15deg) translateZ(-1px);
}
.hamster__limb--fl {
animation: hamsterFLLimb var(--dur) linear infinite;
background: linear-gradient(#ffffff 80%,var(--bw-green-v40) 80%);
transform: rotate(15deg);
}
.hamster__limb--br,
.hamster__limb--bl {
border-radius: 0.75em 0.75em 0 0;
clip-path: polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%);
top: 1em;
left: 2.8em;
width: 1.5em;
height: 2.5em;
transform-origin: 50% 30%;
}
.hamster__limb--br {
animation: hamsterBRLimb var(--dur) linear infinite;
background: linear-gradient(var(--bw-yellow-v40) 90%,var(--bw-green-v40) 90%);
transform: rotate(-25deg) translateZ(-1px);
}
.hamster__limb--bl {
animation: hamsterBLLimb var(--dur) linear infinite;
background: linear-gradient(#ffffff 90%,var(--bw-green-v40) 90%);
transform: rotate(-25deg);
}
.hamster__tail {
animation: hamsterTail var(--dur) linear infinite;
background: var(--bw-green-v40);
border-radius: 0.25em 50% 50% 0.25em;
box-shadow: 0 -0.2em 0 var(--bw-red-v40) inset;
top: 1.5em;
right: -0.5em;
width: 1em;
height: 0.5em;
transform: rotate(30deg) translateZ(-1px);
transform-origin: 0.25em 0.25em;
}
.spoke {
animation: spoke var(--dur) linear infinite;
background: radial-gradient(100% 100% at center,hsl(0,0%,66%) 4.8%,hsla(0,0%,66%,0) 5%), linear-gradient(hsla(0,0%,65%,0) 46.9%,hsl(0,0%,72%) 47% 52.9%,hsla(0,0%,72%,0) 53%) 50% 50% / 99% 99% no-repeat;
}
@keyframes hamster { from, to { transform: rotate(4deg) translate(-0.8em,1.85em); } 50% { transform: rotate(0) translate(-0.8em,1.85em); } }
@keyframes hamsterHead { from, 25%, 50%, 75%, to { transform: rotate(0); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(8deg); } }
@keyframes hamsterEye { from, 90%, to { transform: scaleY(1); } 95% { transform: scaleY(0); } }
@keyframes hamsterEar { from, 25%, 50%, 75%, to { transform: rotate(0); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(12deg); } }
@keyframes hamsterBody { from, 25%, 50%, 75%, to { transform: rotate(0); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(-2deg); } }
@keyframes hamsterFRLimb { from, 25%, 50%, 75%, to { transform: rotate(50deg) translateZ(-1px); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(-30deg) translateZ(-1px); } }
@keyframes hamsterFLLimb { from, 25%, 50%, 75%, to { transform: rotate(-30deg); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(50deg); } }
@keyframes hamsterBRLimb { from, 25%, 50%, 75%, to { transform: rotate(-60deg) translateZ(-1px); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(20deg) translateZ(-1px); } }
@keyframes hamsterBLLimb { from, 25%, 50%, 75%, to { transform: rotate(20deg); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(-60deg); } }
@keyframes hamsterTail { from, 25%, 50%, 75%, to { transform: rotate(30deg) translateZ(-1px); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(10deg) translateZ(-1px); } }
@keyframes spoke { from { transform: rotate(0); } to { transform: rotate(-1turn); } }
@media (max-width: 768px) {
.wheel-and-hamster { font-size: 11px; }
.bw-loader-card { padding: 20px 22px; }
.bw-home-main .bw-filter-box .flex.flex-wrap.gap-3 > a.bw-btn { padding-inline: 1rem !important; }
}
/* ---------------------------------------------------------
Profile + avatar buttons: better dark attractive gradients
--------------------------------------------------------- */
#bw-tab-profile .bw-profile-save-btn,
.bw-avatar-upload-card .bw-avatar-upload-button,
#bw-tab-profile form[action] .bw-avatar-upload-button,
#bw-tab-profile .bw-dark-btn[type="submit"]:not(.bw-auth-main-btn):not(.bw-category-more-toggle),
#bw-tab-profile .bw-dark-btn {
background: linear-gradient(135deg, #0b1c3f 0%, #1f3a8a 45%, #0f172a 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,.28) !important;
box-shadow: 0 14px 28px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
#bw-tab-profile .bw-profile-save-btn:hover,
.bw-avatar-upload-card .bw-avatar-upload-button:hover,
#bw-tab-profile .bw-dark-btn[type="submit"]:not(.bw-auth-main-btn):not(.bw-category-more-toggle):hover,
#bw-tab-profile .bw-dark-btn:hover {
filter: brightness(1.08) saturate(1.05) !important;
}
/* ---------------------------------------------------------
v41 requested refinements
- Uiverse-style gradient border buttons
- Light gray vertical page background
- Navy admin/dashboard theme with readable glass cards
- Update form opens as centered modal
- Home posts sit directly on the page background
--------------------------------------------------------- */
:root {
--bw-v41-navy-950: #071329;
--bw-v41-navy-900: #0b1b3a;
--bw-v41-navy-800: #102a5c;
--bw-v41-navy-700: #1e4f9e;
--bw-v41-blue: #2f74ff;
--bw-v41-white: #ffffff;
--bw-v41-red: #ef4444;
--bw-v41-green: #22c55e;
--bw-v41-yellow: #fde047;
--bw-v41-gray-1: #f7f8fa;
--bw-v41-gray-2: #e8edf2;
--bw-v41-gray-3: #d9e1e8;
--bw-v41-ink: #0f1b2d;
}
html body,
body .bw-bg,
.bw-wrap.bw-bg {
background: linear-gradient(180deg, var(--bw-v41-gray-1) 0%, var(--bw-v41-gray-2) 52%, var(--bw-v41-gray-3) 100%) !important;
color: var(--bw-v41-ink) !important;
}
/* Requested gradient-border button style, adapted so existing WP buttons do not need extra span markup. */
.bw-gradient-btn,
.bw-auth-main-btn,
.bw-wrap button[type="submit"].bw-dark-btn,
#bw-tab-categories form button[type="submit"],
.bw-modal-confirm,
.bw-category-modal .bw-cat-show-update {
align-items: center !important;
background: linear-gradient(rgb(5, 6, 45), rgb(5, 6, 45)) padding-box,
linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb) border-box !important;
border: 3px solid transparent !important;
border-radius: 12px !important;
box-shadow: rgba(151, 65, 252, 0.20) 0 15px 30px -5px !important;
color: #ffffff !important;
display: inline-flex !important;
justify-content: center !important;
line-height: 1em !important;
min-width: 112px;
text-decoration: none !important;
user-select: none !important;
-webkit-user-select: none !important;
touch-action: manipulation !important;
white-space: nowrap !important;
cursor: pointer !important;
transition: transform .30s ease, box-shadow .30s ease, background .30s ease, filter .30s ease !important;
text-shadow: none !important;
}
.bw-gradient-btn:hover,
.bw-auth-main-btn:hover,
.bw-wrap button[type="submit"].bw-dark-btn:hover,
#bw-tab-categories form button[type="submit"]:hover,
.bw-modal-confirm:hover,
.bw-category-modal .bw-cat-show-update:hover {
background: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb) border-box !important;
color: #ffffff !important;
outline: 0 !important;
transform: translateY(-1px) !important;
}
.bw-gradient-btn:active,
.bw-auth-main-btn:active,
.bw-wrap button[type="submit"].bw-dark-btn:active,
#bw-tab-categories form button[type="submit"]:active,
.bw-modal-confirm:active,
.bw-category-modal .bw-cat-show-update:active {
transform: scale(.96) !important;
}
/* Admin navbar button: keep previous blue shade and readable on hover. */
.bw-nav-dashboard,
a.bw-nav-dashboard.bw-btn {
background: linear-gradient(135deg, #2563eb 0%, #0f3b86 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,.35) !important;
box-shadow: 0 12px 26px rgba(15,59,134,.24), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
.bw-nav-dashboard:hover,
a.bw-nav-dashboard.bw-btn:hover,
.bw-nav-dashboard:hover *,
a.bw-nav-dashboard.bw-btn:hover * {
background: linear-gradient(135deg, #3b82f6 0%, #164da5 100%) !important;
color: #ffffff !important;
}
.bw-nav-dashboard *, .bw-nav-dashboard:hover * { color: #ffffff !important; }
/* Dashboard tab buttons: active hover no longer becomes white-on-white. */
.bw-tab-btn {
background: rgba(255,255,255,.86) !important;
color: var(--bw-v41-navy-950) !important;
border: 1px solid rgba(255,255,255,.90) !important;
box-shadow: 0 10px 22px rgba(7,19,41,.10), inset 0 1px 0 rgba(255,255,255,.82) !important;
}
.bw-tab-btn:hover:not(.is-active) {
background: linear-gradient(135deg, #ffffff, #eef5ff) !important;
color: var(--bw-v41-navy-950) !important;
}
.bw-tab-btn.is-active,
.bw-tab-btn.is-active:hover,
.bw-tab-btn.is-active:focus {
background: linear-gradient(135deg, #2563eb, #0b1b3a) !important;
color: #ffffff !important;
border-color: rgba(255,255,255,.45) !important;
}
.bw-tab-btn.is-active *,
.bw-tab-btn.is-active:hover * { color: #ffffff !important; }
/* Admin/user panels: navy theme. */
.bw-tab-panel > .bw-filter-box,
.bw-tab-panel > section.bw-filter-box,
#bw-tab-my-blogs > .bw-filter-box,
#bw-tab-approval > .bw-filter-box,
#bw-tab-all-blogs > .bw-filter-box,
#bw-tab-categories > .bw-filter-box,
#bw-tab-users > .bw-filter-box,
#bw-tab-profile > .bw-filter-box {
background:
radial-gradient(circle at 0% 0%, rgba(253,224,71,.18), transparent 30%),
radial-gradient(circle at 100% 0%, rgba(34,197,94,.12), transparent 28%),
linear-gradient(145deg, var(--bw-v41-navy-950), var(--bw-v41-navy-800)) !important;
color: #f8fafc !important;
border: 1px solid rgba(255,255,255,.18) !important;
box-shadow: 0 24px 70px rgba(7,19,41,.28), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.bw-tab-panel > .bw-filter-box h1,
.bw-tab-panel > .bw-filter-box h2,
.bw-tab-panel > .bw-filter-box h3,
.bw-tab-panel > section.bw-filter-box h1,
.bw-tab-panel > section.bw-filter-box h2,
.bw-tab-panel > section.bw-filter-box h3,
.bw-tab-panel .bw-filter-box label,
.bw-tab-panel .bw-filter-box .text-slate-900,
.bw-tab-panel .bw-filter-box .text-slate-800,
.bw-tab-panel .bw-filter-box .text-slate-700 {
color: #ffffff !important;
}
.bw-tab-panel > .bw-filter-box p,
.bw-tab-panel > section.bw-filter-box p,
.bw-tab-panel .bw-filter-box .text-slate-600,
.bw-tab-panel .bw-filter-box .text-slate-500,
.bw-tab-panel .bw-filter-box td,
.bw-tab-panel .bw-filter-box th {
color: rgba(248,250,252,.82) !important;
}
/* Manage blogs/cards inside tabs: glass effect on navy. */
.bw-tab-panel article,
.bw-tab-panel .bw-category-tile,
.bw-tab-panel .bw-rejected-box,
.bw-tab-panel tbody tr {
background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.08)) !important;
border: 1px solid rgba(255,255,255,.22) !important;
color: #ffffff !important;
box-shadow: 0 14px 34px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.20) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
}
.bw-tab-panel article h1,
.bw-tab-panel article h2,
.bw-tab-panel article h3,
.bw-tab-panel article .text-slate-900,
.bw-tab-panel .bw-category-tile-title,
.bw-tab-panel tbody tr .text-slate-900 { color: #ffffff !important; }
.bw-tab-panel article p,
.bw-tab-panel article .text-slate-600,
.bw-tab-panel article .text-slate-500,
.bw-tab-panel article .text-slate-700,
.bw-tab-panel tbody tr .text-slate-600 { color: rgba(248,250,252,.82) !important; }
/* Flat glass action buttons for view/update/delete/approve, without jumping above page. */
.bw-tab-panel a.bg-indigo-50,
.bw-tab-panel button.bg-indigo-50,
.bw-tab-panel a.bg-white,
.bw-tab-panel button.bg-white,
.bw-tab-panel button.bg-rose-50,
.bw-tab-panel a.bg-rose-50,
.bw-tab-panel button.bg-emerald-600,
.bw-tab-panel button.bg-emerald-50,
.bw-tab-panel a.bg-emerald-50,
.bw-tab-panel button,
.bw-tab-panel a.bw-btn {
transform: none !important;
border-radius: 999px !important;
border: 1px solid rgba(255,255,255,.28) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 8px 18px rgba(0,0,0,.12) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
transition: filter .20s ease, box-shadow .20s ease, background .20s ease !important;
}
.bw-tab-panel a.bg-indigo-50,
.bw-tab-panel button.bg-indigo-50 {
background: rgba(59,130,246,.26) !important;
color: #dbeafe !important;
}
.bw-tab-panel a.bg-white,
.bw-tab-panel button.bg-white {
background: rgba(255,255,255,.18) !important;
color: #ffffff !important;
}
.bw-tab-panel button.bg-rose-50,
.bw-tab-panel a.bg-rose-50 {
background: rgba(239,68,68,.24) !important;
color: #ffe4e6 !important;
}
.bw-tab-panel button.bg-emerald-600,
.bw-tab-panel button.bg-emerald-50,
.bw-tab-panel a.bg-emerald-50 {
background: rgba(34,197,94,.28) !important;
color: #dcfce7 !important;
}
.bw-tab-panel a.bg-indigo-50:hover,
.bw-tab-panel button.bg-indigo-50:hover,
.bw-tab-panel a.bg-white:hover,
.bw-tab-panel button.bg-white:hover,
.bw-tab-panel button.bg-rose-50:hover,
.bw-tab-panel a.bg-rose-50:hover,
.bw-tab-panel button.bg-emerald-600:hover,
.bw-tab-panel button.bg-emerald-50:hover,
.bw-tab-panel a.bg-emerald-50:hover,
.bw-tab-panel button:hover,
.bw-tab-panel a.bw-btn:hover {
transform: none !important;
filter: brightness(1.12) saturate(1.05) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 10px 22px rgba(0,0,0,.15) !important;
}
/* Update blog in modal, not above the blog list. */
.bw-edit-modal {
z-index: 100001 !important;
align-items: flex-start !important;
overflow-y: auto !important;
padding: 34px 18px !important;
}
.bw-edit-modal-box {
width: min(980px, 96vw) !important;
max-height: none !important;
margin: auto !important;
text-align: left !important;
position: relative !important;
background: linear-gradient(145deg, #ffffff, #eef3f8) !important;
color: var(--bw-v41-ink) !important;
border-radius: 26px !important;
padding: 24px !important;
}
.bw-edit-modal-box .bw-filter-box {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
.bw-edit-modal-box h1,
.bw-edit-modal-box h2,
.bw-edit-modal-box h3,
.bw-edit-modal-box label,
.bw-edit-modal-box .text-slate-900,
.bw-edit-modal-box .text-slate-700 { color: var(--bw-v41-ink) !important; }
.bw-edit-modal-box p,
.bw-edit-modal-box .text-slate-600,
.bw-edit-modal-box .text-slate-500 { color: #465569 !important; }
.bw-edit-close,
.bw-category-modal .bw-cat-close {
position: absolute !important;
top: 18px !important;
right: 18px !important;
left: auto !important;
width: 38px !important;
height: 38px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
background: #ffffff !important;
color: var(--bw-v41-navy-950) !important;
border: 1px solid rgba(15,27,45,.14) !important;
box-shadow: 0 10px 24px rgba(15,27,45,.12), inset 0 1px 0 rgba(255,255,255,.86) !important;
text-decoration: none !important;
font-size: 22px !important;
font-weight: 950 !important;
line-height: 1 !important;
}
/* Category modal readability and close button fixed to the top-right. */
.bw-category-modal-box,
.bw-modal-box.bw-category-modal-box {
position: relative !important;
padding: 34px 28px 28px !important;
background: linear-gradient(145deg, #ffffff 0%, #f2f6fb 100%) !important;
color: var(--bw-v41-ink) !important;
}
.bw-category-modal-box h3,
.bw-category-modal-box p,
.bw-category-modal-box label,
.bw-category-modal-box .text-slate-900,
.bw-category-modal-box .text-slate-700,
.bw-category-modal-box .text-slate-600 {
color: var(--bw-v41-ink) !important;
}
.bw-category-modal .bw-cat-actions,
.bw-category-modal .bw-cat-update-box { padding-right: 12px !important; }
/* Home page: remove the extra blog container feel; posts sit directly on the smooth background. */
.bw-home-main .bw-filter-box:not(:has(.bw-post-row)) {
background: rgba(255,255,255,.80) !important;
}
.bw-home-main .bw-post-row,
.bw-home-main .bw-post-row-inner,
.bw-home-main article.bw-post-row,
.bw-home-main .bw-wrap article.bw-post-row {
background: transparent !important;
border-left: 0 !important;
border-right: 0 !important;
border-top: 1px solid rgba(15,27,45,.10) !important;
border-radius: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.bw-home-main .bw-post-row:first-child { border-top: 0 !important; }
.bw-home-main .bw-post-copy {
background: rgba(255,255,255,.58) !important;
border: 1px solid rgba(255,255,255,.72) !important;
border-radius: 26px !important;
box-shadow: 0 16px 42px rgba(15,27,45,.08) !important;
padding: clamp(1rem, 2vw, 1.6rem) !important;
}
.bw-home-main .bw-post-copy h2,
.bw-home-main .bw-post-copy .text-slate-900 { color: var(--bw-v41-ink) !important; }
.bw-home-main .bw-post-copy p,
.bw-home-main .bw-post-copy .text-slate-600,
.bw-home-main .bw-post-copy .text-slate-500 { color: #465569 !important; }
/* Home category options: visual pills matching white/red/green/yellow. */
.bw-home-main .bw-filter-box .flex.flex-wrap.gap-3 > a.bw-btn {
background: linear-gradient(135deg, #ffffff, #fff7b8) !important;
color: var(--bw-v41-ink) !important;
border: 1px solid rgba(255,255,255,.86) !important;
box-shadow: 0 10px 22px rgba(15,27,45,.08), inset 0 1px 0 rgba(255,255,255,.86) !important;
}
.bw-home-main .bw-filter-box .flex.flex-wrap.gap-3 > a.bw-btn:hover {
background: linear-gradient(135deg, #ffffff, #dcfce7) !important;
color: var(--bw-v41-ink) !important;
}
.bw-home-main .bw-filter-box .flex.flex-wrap.gap-3 > a.bw-gradient-btn {
background: linear-gradient(rgb(5, 6, 45), rgb(5, 6, 45)) padding-box,
linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb) border-box !important;
color: #ffffff !important;
}
.bw-home-main .bw-filter-box .flex.flex-wrap.gap-3 > a.bw-gradient-btn:hover {
background: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb) border-box !important;
color: #ffffff !important;
}
/* Blog view page: clean visible white panels over gray gradient. */
.bw-detail-box,
.bw-detail-copy,
.bw-detail-media,
.bw-content {
background: linear-gradient(145deg, #ffffff, #f4f7fb) !important;
color: var(--bw-v41-ink) !important;
border: 1px solid rgba(255,255,255,.86) !important;
box-shadow: 0 18px 50px rgba(15,27,45,.10), inset 0 1px 0 rgba(255,255,255,.86) !important;
}
.bw-content { color: #26364d !important; }
.bw-content p,
.bw-content li,
.bw-content span,
.bw-content div { color: inherit; }
@media (max-width: 782px) {
.bw-edit-modal { padding: 18px 10px !important; }
.bw-edit-modal-box { padding: 18px !important; border-radius: 22px !important; }
.bw-category-modal-box, .bw-modal-box.bw-category-modal-box { padding: 30px 20px 22px !important; }
}
/* ---------------------------------------------------------
v42 visibility, category reveal, flat blog listing, modal fixes
--------------------------------------------------------- */
:root {
--bw-v42-navy-950: #06172f;
--bw-v42-navy-900: #0b2140;
--bw-v42-navy-800: #12345f;
--bw-v42-ink: #0f172a;
--bw-v42-muted: #475569;
--bw-v42-offwhite: #f7f5ef;
--bw-v42-gray-bg: #eef1f4;
--bw-v42-red: #ef4444;
--bw-v42-green: #16a34a;
--bw-v42-yellow: #fde68a;
}
html { scroll-behavior: auto; }
body,
.bw-bg {
background: linear-gradient(180deg, #f7f8fa 0%, #eceff3 45%, #e3e7ec 100%) !important;
color: var(--bw-v42-ink) !important;
}
.bw-wrap { color: var(--bw-v42-ink) !important; }
/* Uiverse-style gradient buttons adapted for links/buttons without needing inner span markup. */
.bw-gradient-btn,
.bw-wrap .bw-gradient-btn,
.bw-file-input::file-selector-button,
.bw-open-editor-file,
.bw-auth-main-btn.bw-signup-send,
.bw-signup-submit {
background: linear-gradient(rgb(5, 6, 45), rgb(5, 6, 45)) padding-box,
linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb) border-box !important;
border: 3px solid transparent !important;
border-radius: 12px !important;
color: #ffffff !important;
box-shadow: rgba(91, 66, 243, 0.22) 0 15px 30px -5px !important;
box-sizing: border-box !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: .4rem !important;
transition: transform .2s ease, box-shadow .25s ease, background .3s ease, filter .25s ease !important;
}
.bw-gradient-btn:hover,
.bw-wrap .bw-gradient-btn:hover,
.bw-file-input::file-selector-button:hover,
.bw-open-editor-file:hover,
.bw-auth-main-btn.bw-signup-send:hover,
.bw-signup-submit:hover {
background: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb) border-box !important;
color: #ffffff !important;
outline: 0 !important;
transform: translateY(-1px) !important;
}
.bw-gradient-btn:active,
.bw-wrap .bw-gradient-btn:active,
.bw-file-input::file-selector-button:active,
.bw-open-editor-file:active,
.bw-auth-main-btn.bw-signup-send:active,
.bw-signup-submit:active { transform: scale(.96) !important; }
/* Home category area: no All pill, compact rounded corners, reveal more categories on click. */
.bw-category-pills-wrap { width: 100%; }
.bw-category-pills { align-items: center; }
.bw-category-pill {
border-radius: 12px !important;
min-height: 42px !important;
background: linear-gradient(135deg, #ffffff 0%, #fff6bf 100%) !important;
color: var(--bw-v42-ink) !important;
border: 1px solid rgba(22, 163, 74, .18) !important;
box-shadow: 0 8px 18px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.bw-category-pill .bw-pill-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #22c55e;
display: inline-block;
margin-right: .45rem;
box-shadow: 0 0 0 5px rgba(34, 197, 94, .14);
}
.bw-category-pill.bw-gradient-btn .bw-pill-dot { background: #fde047; box-shadow: 0 0 0 5px rgba(253,224,71,.16); }
.bw-category-extra { display: none !important; }
.bw-category-pills-wrap.is-expanded .bw-category-extra { display: inline-flex !important; }
.bw-category-more-toggle {
border-radius: 12px !important;
background: linear-gradient(135deg, #0b2140, #12345f) !important;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,.24) !important;
box-shadow: 0 12px 24px rgba(6,23,47,.16) !important;
}
/* Public blog list: make posts sit on the page, not inside raised cards. */
.bw-home-main .bw-post-row {
padding: 2.65rem .25rem 2.65rem !important;
border: 0 !important;
box-shadow: none !important;
}
.bw-home-main .bw-post-row::before {
content: "";
position: absolute;
top: 0;
left: 2.5%;
right: 2.5%;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(15,23,42,.16) 18%, rgba(22,163,74,.22) 50%, rgba(239,68,68,.16) 82%, transparent 100%);
}
.bw-home-main .bw-post-row:first-child::before { display: none !important; }
.bw-home-main .bw-post-row::after { display: none !important; }
.bw-home-main .bw-post-row-inner,
.bw-home-main .bw-post-copy,
.bw-home-main .bw-post-image-wrap {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.bw-home-main .bw-post-copy { padding: .5rem clamp(.25rem, 1.6vw, 1rem) !important; }
.bw-home-main .bw-post-image-wrap { justify-content: flex-start !important; }
.bw-home-main .bw-post-image {
max-width: 100% !important;
border-radius: 14px !important;
box-shadow: none !important;
border: 1px solid rgba(15,23,42,.10) !important;
}
.bw-home-main .bw-post-copy h2,
.bw-home-main .bw-post-copy .text-slate-900 { color: var(--bw-v42-ink) !important; }
.bw-home-main .bw-post-copy p,
.bw-home-main .bw-post-copy .text-slate-600,
.bw-home-main .bw-post-copy .text-slate-500 { color: var(--bw-v42-muted) !important; }
/* Reaction width stays stable when the count changes. */
.bw-reaction {
min-width: 58px !important;
height: 40px !important;
padding-left: 13px !important;
padding-right: 13px !important;
justify-content: center !important;
white-space: nowrap !important;
gap: 3px !important;
}
.bw-reaction[data-reaction="like"] { min-width: 76px !important; max-width: 92px !important; }
.bw-like-count { display: inline-block; min-width: 1.15em; text-align: left; }
/* Dashboard/admin navy panels and flat glassy action buttons. */
.bw-tab-panel > .bw-filter-box,
.bw-tab-panel > section.bw-filter-box,
#bw-tab-my-blogs > .bw-filter-box,
#bw-tab-approval > .bw-filter-box,
#bw-tab-all-blogs > .bw-filter-box,
#bw-tab-categories > .bw-filter-box,
#bw-tab-users > .bw-filter-box {
background: linear-gradient(135deg, rgba(6,23,47,.98), rgba(18,52,95,.95)) !important;
border: 1px solid rgba(255,255,255,.14) !important;
border-radius: 24px !important;
color: #f8fafc !important;
box-shadow: 0 18px 42px rgba(6,23,47,.16) !important;
}
.bw-tab-panel .bw-filter-box h1,
.bw-tab-panel .bw-filter-box h2,
.bw-tab-panel .bw-filter-box h3,
.bw-tab-panel .bw-filter-box label,
.bw-tab-panel .bw-filter-box .text-slate-900,
.bw-tab-panel .bw-filter-box .text-slate-700 { color: #ffffff !important; }
.bw-tab-panel .bw-filter-box p,
.bw-tab-panel .bw-filter-box .text-slate-600,
.bw-tab-panel .bw-filter-box .text-slate-500 { color: rgba(226,232,240,.86) !important; }
.bw-tab-panel article,
.bw-tab-panel table tbody tr {
background: rgba(255,255,255,.10) !important;
border: 1px solid rgba(255,255,255,.14) !important;
border-radius: 16px !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.bw-tab-panel table tbody tr td:first-child { padding-left: 1rem !important; }
.bw-tab-panel table thead th:first-child { padding-left: 1rem !important; }
.bw-tab-panel table td,
.bw-tab-panel table th { color: rgba(248,250,252,.88) !important; }
.bw-tab-panel table td.font-black { color: #ffffff !important; }
.bw-action-btn,
.bw-tab-panel .bw-action-btn,
.bw-tab-panel a.bw-btn,
.bw-tab-panel button.bw-btn {
transform: none !important;
border-radius: 12px !important;
border: 1px solid rgba(255,255,255,.22) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px rgba(0,0,0,.10) !important;
}
.bw-action-view { background: rgba(59,130,246,.20) !important; color: #dbeafe !important; }
.bw-action-update { background: rgba(253,224,71,.18) !important; color: #fef9c3 !important; }
.bw-action-delete { background: rgba(239,68,68,.20) !important; color: #fee2e2 !important; }
.bw-action-approve,
.bw-action-done { background: rgba(22,163,74,.25) !important; color: #dcfce7 !important; }
.bw-action-btn:hover,
.bw-tab-panel a.bw-btn:hover,
.bw-tab-panel button.bw-btn:hover {
transform: none !important;
filter: brightness(1.12) saturate(1.05) !important;
color: #ffffff !important;
}
.bw-tab-btn.is-active,
.bw-tab-btn.is-active:hover {
background: linear-gradient(135deg, #102a52, #1e40af) !important;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,.22) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 12px 28px rgba(30,64,175,.25) !important;
}
/* Update blog modal: readable, close button fixed, scrolling smooth. */
.bw-edit-modal {
align-items: flex-start !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
padding: 24px 14px !important;
background: rgba(15,23,42,.34) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
scroll-behavior: auto !important;
}
.bw-edit-modal-box {
width: min(1020px, 96vw) !important;
margin: 0 auto 28px !important;
text-align: left !important;
position: relative !important;
border-radius: 22px !important;
background: linear-gradient(180deg, #ffffff 0%, #f3f6f9 100%) !important;
color: var(--bw-v42-ink) !important;
border: 1px solid rgba(15,23,42,.10) !important;
box-shadow: 0 20px 60px rgba(15,23,42,.22) !important;
animation: none !important;
}
.bw-edit-modal-box .bw-filter-box {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: var(--bw-v42-ink) !important;
}
.bw-edit-modal-box h1,
.bw-edit-modal-box h2,
.bw-edit-modal-box h3,
.bw-edit-modal-box label,
.bw-edit-modal-box .text-slate-900,
.bw-edit-modal-box .text-slate-700 { color: var(--bw-v42-ink) !important; }
.bw-edit-modal-box p,
.bw-edit-modal-box .text-slate-600,
.bw-edit-modal-box .text-slate-500 { color: var(--bw-v42-muted) !important; }
.bw-edit-close,
.bw-category-modal .bw-cat-close {
position: absolute !important;
top: 16px !important;
right: 16px !important;
left: auto !important;
width: 38px !important;
height: 38px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 12px !important;
background: #ffffff !important;
color: var(--bw-v42-ink) !important;
border: 1px solid rgba(15,23,42,.14) !important;
box-shadow: 0 8px 20px rgba(15,23,42,.10) !important;
text-decoration: none !important;
font-size: 22px !important;
font-weight: 950 !important;
z-index: 5 !important;
}
/* Category modal text and close button visibility. */
.bw-category-modal .bw-modal-box,
.bw-modal-box.bw-category-modal-box {
position: relative !important;
padding: 34px 28px 28px !important;
background: linear-gradient(135deg, #fffdf5 0%, #f4f8f5 55%, #ffffff 100%) !important;
color: var(--bw-v42-ink) !important;
border: 1px solid rgba(15,23,42,.12) !important;
}
.bw-category-modal .bw-modal-box h1,
.bw-category-modal .bw-modal-box h2,
.bw-category-modal .bw-modal-box h3,
.bw-category-modal .bw-modal-box p,
.bw-category-modal .bw-modal-box label,
.bw-category-modal .bw-modal-box .text-slate-900,
.bw-category-modal .bw-modal-box .text-slate-700,
.bw-category-modal .bw-modal-box .text-slate-600,
.bw-category-modal .bw-modal-box .uppercase { color: var(--bw-v42-ink) !important; }
.bw-category-modal .bw-cat-actions { padding-top: 8px !important; }
/* Profile section should be calm/off-white rather than bright. */
#bw-tab-profile .bw-filter-box,
.bw-profile-section,
.bw-profile-card {
background: linear-gradient(180deg, #f7f5ef 0%, #efede7 100%) !important;
color: var(--bw-v42-ink) !important;
border: 1px solid rgba(15,23,42,.10) !important;
}
#bw-tab-profile .bw-filter-box h1,
#bw-tab-profile .bw-filter-box h2,
#bw-tab-profile .bw-filter-box h3,
#bw-tab-profile .bw-filter-box label,
#bw-tab-profile .bw-filter-box .text-slate-900,
#bw-tab-profile .bw-filter-box .text-slate-700 { color: var(--bw-v42-ink) !important; }
#bw-tab-profile .bw-filter-box p,
#bw-tab-profile .bw-filter-box .text-slate-600,
#bw-tab-profile .bw-filter-box .text-slate-500 { color: var(--bw-v42-muted) !important; }
@media (max-width: 782px) {
.bw-category-extra { display: none !important; }
.bw-category-pills-wrap.is-expanded .bw-category-extra { display: inline-flex !important; }
.bw-home-main .bw-post-row { padding: 2rem 0 !important; }
.bw-edit-modal { padding: 12px 8px !important; }
.bw-edit-modal-box { width: 98vw !important; border-radius: 18px !important; padding: 18px !important; }
}
/* === v43 visibility, modal, detail and action refinements === */
:root {
--bw-v43-navy: #092247;
--bw-v43-navy-2: #123c70;
--bw-v43-ink: #0f1b2d;
--bw-v43-muted: #3d4b61;
--bw-v43-white: #ffffff;
--bw-v43-red: #ff4757;
--bw-v43-green: #16c76a;
--bw-v43-yellow: #ffe66d;
}
/* Brighter, consistent action buttons with a flat glass feel. */
.bw-action-btn,
a.bw-action-btn,
button.bw-action-btn {
min-width: 82px !important;
justify-content: center !important;
border-radius: 12px !important;
border: 1px solid rgba(255,255,255,.24) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 18px rgba(5,16,37,.18) !important;
text-shadow: 0 1px 1px rgba(0,0,0,.18) !important;
transform: none !important;
}
.bw-action-view,
a.bw-action-view {
background: linear-gradient(144deg, #7c3cff, #2563eb 52%, #00ddeb) !important;
color: #ffffff !important;
}
.bw-action-update,
a.bw-action-update,
button.bw-action-update {
background: linear-gradient(144deg, #ffe66d, #22c55e 52%, #00ddeb) !important;
color: #061428 !important;
text-shadow: none !important;
}
.bw-action-delete,
button.bw-action-delete,
a.bw-action-delete {
background: linear-gradient(144deg, #ff9f1c, #ff4757 52%, #f43f5e) !important;
color: #ffffff !important;
}
.bw-action-approve,
button.bw-action-approve {
background: linear-gradient(144deg, #16c76a, #22c55e 52%, #84cc16) !important;
color: #ffffff !important;
}
.bw-action-btn:hover,
.bw-action-btn:focus-visible {
filter: brightness(1.13) saturate(1.16) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 12px 24px rgba(5,16,37,.22) !important;
color: #ffffff !important;
}
.bw-action-update:hover,
.bw-action-update:focus-visible { color: #061428 !important; }
/* Detail page: keep all blog content in one clean flow, no separate card-like boxes. */
.bw-detail-box {
background: rgba(255,255,255,.72) !important;
border: 1px solid rgba(203,213,225,.70) !important;
box-shadow: 0 14px 40px rgba(15,23,42,.08) !important;
}
.bw-detail-main-grid {
gap: 1.5rem !important;
padding: 0 !important;
margin-bottom: 1.5rem !important;
border: 0 !important;
}
.bw-detail-copy,
.bw-content,
.bw-detail-box .mb-10.border {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.bw-content {
margin-top: 1.5rem !important;
padding-top: 1.25rem !important;
border-top: 1px solid rgba(148,163,184,.28) !important;
}
.bw-detail-box .mb-10.border {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
border-top: 1px solid rgba(148,163,184,.28) !important;
border-bottom: 1px solid rgba(148,163,184,.20) !important;
}
.bw-detail-media {
border-radius: 18px !important;
background: transparent !important;
border: 1px solid rgba(148,163,184,.35) !important;
box-shadow: none !important;
padding: 0 !important;
}
.bw-detail-image { border-radius: 16px !important; }
/* Home/list blog rows: remove raised ends from separators. */
.bw-post-row { border-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
.bw-post-row::after {
left: 24px !important;
right: 24px !important;
width: auto !important;
height: 1px !important;
background: linear-gradient(90deg, transparent, rgba(15,34,71,.22) 12%, rgba(22,199,106,.22) 50%, rgba(255,230,109,.22) 88%, transparent) !important;
box-shadow: none !important;
}
.bw-post-row-inner { box-shadow: none !important; border: 0 !important; }
/* Category modal: close button stays top-right; cancel/back buttons remain in normal button row. */
.bw-category-modal .bw-modal-box,
.bw-modal-box.bw-category-modal-box {
width: min(560px, 92vw) !important;
padding: 34px 28px 28px !important;
background: linear-gradient(135deg, #fffbe8 0%, #f8fff8 48%, #ffffff 100%) !important;
color: var(--bw-v43-ink) !important;
border: 1px solid rgba(9,34,71,.16) !important;
box-shadow: 0 22px 70px rgba(9,34,71,.28) !important;
}
.bw-category-modal-box > button.bw-cat-close,
.bw-edit-close {
position: absolute !important;
top: 16px !important;
right: 16px !important;
left: auto !important;
width: 40px !important;
height: 40px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 12px !important;
background: #ffffff !important;
color: #0f1b2d !important;
border: 1px solid rgba(9,34,71,.14) !important;
box-shadow: 0 10px 22px rgba(9,34,71,.16) !important;
z-index: 20 !important;
font-size: 22px !important;
line-height: 1 !important;
text-decoration: none !important;
}
.bw-category-modal .bw-cat-cancel,
.bw-category-modal .bw-cat-update-back {
position: static !important;
width: auto !important;
height: auto !important;
min-width: 92px !important;
border-radius: 12px !important;
background: linear-gradient(144deg, #f8fafc, #ffffff 60%, #fff7d6) !important;
color: #0f1b2d !important;
border: 1px solid rgba(9,34,71,.12) !important;
box-shadow: 0 8px 18px rgba(9,34,71,.10) !important;
}
.bw-category-modal .bw-modal-box h1,
.bw-category-modal .bw-modal-box h2,
.bw-category-modal .bw-modal-box h3,
.bw-category-modal .bw-modal-box p,
.bw-category-modal .bw-modal-box label,
.bw-category-modal .bw-modal-box .uppercase,
.bw-category-modal .bw-modal-box .tracking-\[\.25em\],
.bw-category-modal .bw-modal-box .text-slate-900,
.bw-category-modal .bw-modal-box .text-slate-700,
.bw-category-modal .bw-modal-box .text-slate-600,
.bw-category-modal .bw-modal-box .text-white {
color: #0f1b2d !important;
opacity: 1 !important;
text-shadow: none !important;
}
.bw-category-modal .bw-cat-actions,
.bw-category-modal .bw-cat-update-box { color: #0f1b2d !important; }
.bw-category-modal input[name="bw_admin_category_name"] {
color: #0f1b2d !important;
background: #ffffff !important;
border-color: rgba(9,34,71,.24) !important;
}
.bw-category-modal .bw-cat-show-update,
.bw-category-modal button[type="submit"] {
background: linear-gradient(144deg, #7c3cff, #172554 54%, #00ddeb) !important;
color: #ffffff !important;
border-radius: 12px !important;
border: 0 !important;
box-shadow: 0 12px 24px rgba(37,99,235,.22) !important;
}
.bw-category-modal .bw-cat-update-box p { color: #334155 !important; }
/* Confirmation modal: stronger visible colors and balanced controls. */
.bw-confirm-backdrop { background: rgba(9,34,71,.58) !important; backdrop-filter: blur(6px) !important; }
.bw-confirm-box {
position: relative !important;
width: min(500px, 92vw) !important;
padding: 30px 30px 28px !important;
border-radius: 24px !important;
background: radial-gradient(circle at 0 0, rgba(255,230,109,.38), transparent 36%), radial-gradient(circle at 100% 0, rgba(22,199,106,.18), transparent 38%), linear-gradient(180deg, #ffffff, #f7fafc) !important;
border: 1px solid rgba(255,255,255,.88) !important;
box-shadow: 0 24px 80px rgba(9,34,71,.35) !important;
color: #0f1b2d !important;
}
.bw-confirm-x {
position: absolute !important;
right: 16px !important;
top: 16px !important;
width: 36px !important;
height: 36px !important;
border-radius: 12px !important;
border: 1px solid rgba(9,34,71,.12) !important;
background: #ffffff !important;
color: #0f1b2d !important;
font-size: 22px !important;
font-weight: 950 !important;
box-shadow: 0 8px 18px rgba(9,34,71,.12) !important;
}
.bw-confirm-kicker { margin: 0 0 .55rem !important; color: #e11d48 !important; font-size: .78rem !important; font-weight: 950 !important; letter-spacing: .22em !important; text-transform: uppercase !important; }
.bw-confirm-title { margin: 0 0 .75rem !important; color: #0f1b2d !important; font-size: 2rem !important; line-height: 1.05 !important; font-weight: 950 !important; }
.bw-confirm-message { margin: 0 0 1.5rem !important; color: #334155 !important; font-weight: 700 !important; }
.bw-confirm-actions { display: flex !important; justify-content: center !important; gap: 12px !important; flex-wrap: wrap !important; }
.bw-confirm-cancel {
min-width: 110px !important;
border: 1px solid rgba(9,34,71,.14) !important;
border-radius: 12px !important;
background: #ffffff !important;
color: #0f1b2d !important;
padding: 13px 20px !important;
font-weight: 950 !important;
box-shadow: 0 8px 18px rgba(9,34,71,.10) !important;
}
.bw-confirm-primary {
min-width: 150px !important;
border: 0 !important;
border-radius: 12px !important;
padding: 3px !important;
color: #ffffff !important;
font-weight: 950 !important;
background-image: linear-gradient(144deg, #ffe66d, #ff4757 52%, #16c76a) !important;
box-shadow: 0 14px 28px rgba(255,71,87,.20) !important;
}
.bw-confirm-primary span {
display: block !important;
border-radius: 10px !important;
padding: 13px 20px !important;
background: #111827 !important;
color: #ffffff !important;
transition: background .25s ease !important;
}
.bw-confirm-primary:hover span { background: transparent !important; }
/* Update modal: full viewport overlay, smooth page-level scroll, visible content/buttons. */
.bw-edit-modal {
position: fixed !important;
inset: 0 !important;
z-index: 100000 !important;
align-items: flex-start !important;
justify-content: center !important;
padding: 24px 12px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
scroll-behavior: smooth !important;
background: rgba(9,34,71,.56) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.bw-edit-modal-box {
width: min(1080px, 96vw) !important;
max-height: none !important;
margin: 0 auto 32px !important;
border-radius: 24px !important;
background: linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%) !important;
color: #0f1b2d !important;
border: 1px solid rgba(255,255,255,.88) !important;
box-shadow: 0 30px 90px rgba(0,0,0,.32) !important;
text-align: left !important;
}
.bw-edit-modal-box *,
.bw-edit-modal-box .text-slate-900,
.bw-edit-modal-box .text-slate-700,
.bw-edit-modal-box .text-slate-600,
.bw-edit-modal-box .text-slate-500 { color: inherit; }
.bw-edit-modal-box h1,
.bw-edit-modal-box h2,
.bw-edit-modal-box h3,
.bw-edit-modal-box label,
.bw-edit-modal-box strong { color: #0f1b2d !important; }
.bw-edit-modal-box p,
.bw-edit-modal-box small,
.bw-edit-modal-box .text-slate-600,
.bw-edit-modal-box .text-slate-500 { color: #334155 !important; }
.bw-edit-modal-box .bw-gradient-btn,
.bw-edit-modal-box button[type="submit"] {
background: linear-gradient(144deg, #7c3cff, #172554 54%, #00ddeb) !important;
color: #ffffff !important;
border-radius: 12px !important;
}
.bw-edit-modal-box .bw-file-input::file-selector-button,
.bw-file-input::file-selector-button {
border-radius: 12px !important;
background: linear-gradient(144deg, #7c3cff, #172554 54%, #00ddeb) !important;
color: #ffffff !important;
}
/* Users table: no radius on each row; add left spacing so highlight starts cleanly. */
#bw-tab-users table { border-collapse: collapse !important; border-spacing: 0 !important; }
#bw-tab-users tbody tr,
#bw-tab-users tbody td {
border-radius: 0 !important;
overflow: visible !important;
}
#bw-tab-users tbody td:first-child,
#bw-tab-users thead th:first-child { padding-left: 18px !important; }
#bw-tab-users tbody tr {
background: rgba(255,255,255,.07) !important;
border-bottom: 1px solid rgba(255,255,255,.12) !important;
}
#bw-tab-users tbody tr:hover { background: rgba(255,255,255,.12) !important; }
#bw-tab-users .bw-action-delete { min-width: 118px !important; }
/* Profile page off-white and softer. */
#bw-tab-profile .bw-filter-box,
.bw-profile-section,
.bw-profile-card {
background: linear-gradient(180deg, #f7f3ea 0%, #efede7 100%) !important;
border-color: rgba(9,34,71,.10) !important;
}
@media (max-width: 782px) {
.bw-detail-main-grid { grid-template-columns: 1fr !important; }
.bw-confirm-title { font-size: 1.65rem !important; }
.bw-edit-modal { padding: 10px 6px !important; }
.bw-edit-modal-box { width: 98vw !important; border-radius: 18px !important; }
}
/* === v44 requested polish: brighter actions, true page modal, clean categories === */
:root {
--bw-v44-navy: #071f42;
--bw-v44-navy-mid: #16457f;
--bw-v44-blue: #38bdf8;
--bw-v44-purple: #8b5cf6;
--bw-v44-red: #ff3158;
--bw-v44-green: #22c55e;
--bw-v44-yellow: #ffe45c;
--bw-v44-ink: #0f1b2d;
}
/* Brighter flat glass buttons for View / Update / Delete everywhere. */
.bw-action-btn,
a.bw-action-btn,
button.bw-action-btn {
min-width: 86px !important;
border-radius: 12px !important;
border: 1px solid rgba(255,255,255,.34) !important;
color: #ffffff !important;
font-weight: 950 !important;
text-shadow: 0 1px 2px rgba(0,0,0,.22) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 9px 20px rgba(3,12,28,.20) !important;
backdrop-filter: blur(10px) saturate(1.2) !important;
-webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
}
.bw-action-view,
a.bw-action-view {
background: linear-gradient(144deg, rgba(96,165,250,.95), rgba(37,99,235,.96) 52%, rgba(34,211,238,.98)) !important;
}
.bw-action-update,
a.bw-action-update,
button.bw-action-update {
background: linear-gradient(144deg, rgba(255,228,92,.98), rgba(34,197,94,.98) 48%, rgba(0,221,235,.98)) !important;
color: #04152f !important;
text-shadow: none !important;
}
.bw-action-delete,
a.bw-action-delete,
button.bw-action-delete {
background: linear-gradient(144deg, rgba(255,159,28,.98), rgba(255,49,88,.98) 52%, rgba(239,68,68,.98)) !important;
}
.bw-action-approve,
button.bw-action-approve,
.bw-action-done,
button.bw-action-done {
background: linear-gradient(144deg, rgba(52,211,153,.98), rgba(34,197,94,.98) 52%, rgba(132,204,22,.98)) !important;
}
.bw-action-btn:hover,
.bw-action-btn:focus-visible {
filter: brightness(1.2) saturate(1.25) !important;
color: #ffffff !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.40), 0 13px 26px rgba(3,12,28,.24) !important;
}
.bw-action-update:hover,
.bw-action-update:focus-visible { color: #04152f !important; }
/* Update modal must cover the whole viewport, not a scrolled dashboard container. */
body.bw-edit-open { overflow: hidden !important; }
body.bw-edit-open .bw-wrap:not(.bw-edit-modal) {
filter: blur(4px) saturate(.85) !important;
transition: filter .18s ease !important;
}
.bw-edit-modal {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100vh !important;
max-width: none !important;
z-index: 2147483000 !important;
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding: 34px 14px !important;
background: rgba(7,31,66,.62) !important;
backdrop-filter: blur(8px) saturate(.95) !important;
-webkit-backdrop-filter: blur(8px) saturate(.95) !important;
scroll-behavior: auto !important;
overscroll-behavior: contain !important;
}
.bw-edit-modal:not(.is-open) { display: none !important; }
.bw-edit-modal-box {
width: min(1120px, 96vw) !important;
max-height: none !important;
margin: 0 auto 36px !important;
padding: 28px !important;
border-radius: 24px !important;
background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%) !important;
color: var(--bw-v44-ink) !important;
border: 1px solid rgba(255,255,255,.9) !important;
box-shadow: 0 34px 100px rgba(0,0,0,.36) !important;
}
.bw-edit-modal-box .bw-filter-box,
.bw-edit-modal-box section,
.bw-edit-modal-box form {
background: transparent !important;
color: var(--bw-v44-ink) !important;
}
.bw-edit-modal-box h1,
.bw-edit-modal-box h2,
.bw-edit-modal-box h3,
.bw-edit-modal-box h4,
.bw-edit-modal-box label,
.bw-edit-modal-box .uppercase,
.bw-edit-modal-box .tracking-\[\.25em\],
.bw-edit-modal-box .text-slate-900,
.bw-edit-modal-box .text-slate-800,
.bw-edit-modal-box .text-slate-700,
.bw-edit-modal-box strong {
color: var(--bw-v44-ink) !important;
opacity: 1 !important;
text-shadow: none !important;
}
.bw-edit-modal-box p,
.bw-edit-modal-box small,
.bw-edit-modal-box .text-slate-600,
.bw-edit-modal-box .text-slate-500 {
color: #334155 !important;
opacity: 1 !important;
}
.bw-edit-close,
.bw-category-modal-box > button.bw-cat-close,
.bw-category-modal .bw-cat-close {
position: absolute !important;
top: 16px !important;
right: 16px !important;
left: auto !important;
width: 42px !important;
height: 42px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 12px !important;
background: #ffffff !important;
color: var(--bw-v44-ink) !important;
border: 1px solid rgba(7,31,66,.16) !important;
box-shadow: 0 12px 26px rgba(7,31,66,.16) !important;
font-size: 24px !important;
line-height: 1 !important;
font-weight: 950 !important;
z-index: 50 !important;
opacity: 1 !important;
}
.bw-edit-close:hover,
.bw-category-modal .bw-cat-close:hover { background: #fff7cc !important; color: var(--bw-v44-ink) !important; }
/* Make modal buttons and upload controls match the main gradient button family. */
.bw-edit-modal-box .bw-gradient-btn,
.bw-edit-modal-box button[type="submit"],
.bw-category-modal .bw-cat-show-update,
.bw-category-modal button[type="submit"],
.bw-open-editor-file,
.bw-file-input::file-selector-button,
.bw-wrap input[type="file"]::file-selector-button {
background: linear-gradient(rgb(5, 6, 45), rgb(5, 6, 45)) padding-box,
linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb) border-box !important;
border: 3px solid transparent !important;
border-radius: 12px !important;
color: #ffffff !important;
font-weight: 950 !important;
box-shadow: rgba(91,66,243,.24) 0 15px 30px -5px !important;
text-shadow: none !important;
}
.bw-edit-modal-box .bw-gradient-btn:hover,
.bw-edit-modal-box button[type="submit"]:hover,
.bw-category-modal .bw-cat-show-update:hover,
.bw-category-modal button[type="submit"]:hover,
.bw-open-editor-file:hover,
.bw-file-input::file-selector-button:hover,
.bw-wrap input[type="file"]::file-selector-button:hover {
background: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb) border-box !important;
color: #ffffff !important;
filter: brightness(1.08) saturate(1.08) !important;
}
/* Category modal: all text/buttons visible, no white-on-white hover. */
.bw-category-modal { z-index: 2147482999 !important; background: rgba(7,31,66,.56) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; }
.bw-category-modal .bw-modal-box,
.bw-modal-box.bw-category-modal-box {
background: radial-gradient(circle at 0 0, rgba(255,228,92,.32), transparent 35%), radial-gradient(circle at 100% 0, rgba(34,197,94,.18), transparent 36%), linear-gradient(180deg, #ffffff, #f7fafc) !important;
color: var(--bw-v44-ink) !important;
border: 1px solid rgba(7,31,66,.16) !important;
}
.bw-category-modal .bw-modal-box *,
.bw-category-modal .bw-modal-box .text-white,
.bw-category-modal .bw-modal-box .text-slate-900,
.bw-category-modal .bw-modal-box .text-slate-700,
.bw-category-modal .bw-modal-box .text-slate-600,
.bw-category-modal .bw-modal-box .uppercase {
color: var(--bw-v44-ink) !important;
opacity: 1 !important;
text-shadow: none !important;
}
.bw-category-modal .bw-cat-show-update,
.bw-category-modal button[type="submit"],
.bw-category-modal .bw-cat-show-update *,
.bw-category-modal button[type="submit"] * { color: #ffffff !important; }
.bw-category-modal .bw-cat-cancel,
.bw-category-modal .bw-cat-update-back,
.bw-category-modal button.bg-white,
.bw-category-modal button.bg-slate-100 {
background: linear-gradient(180deg, #ffffff, #f1f5f9) !important;
color: var(--bw-v44-ink) !important;
border: 1px solid rgba(7,31,66,.14) !important;
box-shadow: 0 8px 18px rgba(7,31,66,.10) !important;
}
.bw-category-modal .bw-cat-cancel:hover,
.bw-category-modal .bw-cat-update-back:hover,
.bw-category-modal button.bg-white:hover,
.bw-category-modal button.bg-slate-100:hover {
background: linear-gradient(180deg, #fffbe8, #ffffff) !important;
color: var(--bw-v44-ink) !important;
}
.bw-category-modal .bw-cat-close,
.bw-category-modal .bw-cat-close * { color: var(--bw-v44-ink) !important; }
/* Home category pills: include All, remove duplicate green dots, keep two-line reveal with inline ellipsis. */
.bw-category-pills-wrap { width: 100% !important; }
.bw-category-pills {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 12px !important;
}
.bw-category-pill {
border-radius: 12px !important;
min-height: 42px !important;
padding: .65rem 1.1rem !important;
background: linear-gradient(135deg, #ffffff 0%, #fff7c8 100%) !important;
color: var(--bw-v44-ink) !important;
border: 1px solid rgba(34,197,94,.16) !important;
box-shadow: 0 8px 18px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.bw-category-pill .bw-pill-dot { display: none !important; }
.bw-category-pill.bw-gradient-btn,
.bw-category-all.bw-gradient-btn {
background: linear-gradient(rgb(5, 6, 45), rgb(5, 6, 45)) padding-box,
linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb) border-box !important;
color: #ffffff !important;
}
.bw-category-pill:hover { background: linear-gradient(135deg, #ffffff 0%, #dcfce7 100%) !important; color: var(--bw-v44-ink) !important; }
.bw-category-pill.bw-gradient-btn:hover { background: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb) border-box !important; color: #ffffff !important; }
.bw-category-extra { display: none !important; }
.bw-category-pills-wrap.is-expanded .bw-category-extra { display: inline-flex !important; }
.bw-category-more-toggle {
margin: 0 !important;
min-width: 54px !important;
min-height: 42px !important;
padding: .55rem 1rem !important;
border-radius: 12px !important;
background: linear-gradient(rgb(5, 6, 45), rgb(5, 6, 45)) padding-box,
linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb) border-box !important;
border: 3px solid transparent !important;
color: #ffffff !important;
font-size: 1.15rem !important;
line-height: 1 !important;
box-shadow: rgba(91,66,243,.20) 0 12px 24px -6px !important;
}
.bw-category-pills-wrap.is-expanded .bw-category-more-toggle { font-size: .9rem !important; }
.bw-category-more-toggle:hover { background: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb) border-box !important; color: #ffffff !important; }
@media (max-width: 782px) {
.bw-edit-modal { padding: 14px 8px !important; }
.bw-edit-modal-box { width: 98vw !important; padding: 20px !important; border-radius: 18px !important; }
.bw-category-pills { gap: 10px !important; }
.bw-category-pill { padding: .6rem .9rem !important; }
}
/* =========================================================
v45 visibility + modal layering + brighter glass buttons
========================================================= */
:root {
--bw-v45-view: rgba(60, 72, 239, .81);
--bw-v45-update: rgb(203, 89, 130);
--bw-v45-delete: rgb(213, 79, 88);
--bw-v45-ink: #0f172a;
}
/* Make confirmation always appear above category/update modals */
#bw-confirm-modal.bw-confirm-backdrop,
.bw-confirm-backdrop.is-open {
z-index: 2147483000 !important;
position: fixed !important;
inset: 0 !important;
display: none;
align-items: center !important;
justify-content: center !important;
background: rgba(11, 23, 42, .62) !important;
backdrop-filter: blur(8px) saturate(1.05) !important;
-webkit-backdrop-filter: blur(8px) saturate(1.05) !important;
}
#bw-confirm-modal.is-open,
.bw-confirm-backdrop.is-open { display: flex !important; }
.bw-confirm-box {
background: radial-gradient(circle at 9% 7%, rgba(255,246,176,.92), transparent 34%),
radial-gradient(circle at 92% 8%, rgba(210,255,236,.9), transparent 32%),
linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%) !important;
border: 1px solid rgba(255,255,255,.9) !important;
box-shadow: 0 30px 70px rgba(2, 6, 23, .30), inset 0 1px 0 rgba(255,255,255,.9) !important;
color: var(--bw-v45-ink) !important;
}
.bw-confirm-kicker { color: #dc3545 !important; letter-spacing: .32em !important; }
.bw-confirm-title,
.bw-confirm-message { color: var(--bw-v45-ink) !important; }
.bw-confirm-primary {
color: #ffffff !important;
background: linear-gradient(144deg, #ffcc33, #ff5f57 50%, #d7263d) border-box !important;
border: 3px solid transparent !important;
box-shadow: 0 18px 32px rgba(213,79,88,.24), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.bw-confirm-primary span { color: #ffffff !important; background: rgba(5,6,45,.92) !important; }
.bw-confirm-primary:hover span { background: transparent !important; color: #ffffff !important; }
.bw-confirm-cancel,
.bw-confirm-x {
color: var(--bw-v45-ink) !important;
background: rgba(255,255,255,.88) !important;
border: 1px solid rgba(148,163,184,.26) !important;
box-shadow: 0 12px 24px rgba(15,23,42,.10) !important;
}
/* Brighter glass action buttons using requested shades */
.bw-action-btn,
a.bw-action-btn,
button.bw-action-btn {
min-width: 82px !important;
min-height: 38px !important;
border-radius: 12px !important;
border: 1px solid rgba(255,255,255,.28) !important;
color: #ffffff !important;
text-shadow: 0 1px 2px rgba(0,0,0,.28) !important;
box-shadow: 0 12px 26px rgba(2,6,23,.16), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -12px 26px rgba(255,255,255,.08) !important;
backdrop-filter: blur(10px) saturate(1.25) !important;
-webkit-backdrop-filter: blur(10px) saturate(1.25) !important;
}
.bw-action-view { background: linear-gradient(145deg, rgba(82,92,255,.96), var(--bw-v45-view)) !important; }
.bw-action-update { background: linear-gradient(145deg, rgba(227,112,158,.96), var(--bw-v45-update)) !important; }
.bw-action-delete { background: linear-gradient(145deg, rgba(242,96,105,.98), var(--bw-v45-delete)) !important; }
.bw-action-btn:hover,
.bw-action-btn:focus-visible {
color: #ffffff !important;
transform: translateY(-1px) !important;
filter: brightness(1.12) saturate(1.08) !important;
box-shadow: 0 16px 30px rgba(2,6,23,.22), inset 0 1px 0 rgba(255,255,255,.45) !important;
}
.bw-action-btn:active { transform: scale(.97) !important; }
/* Category modal text/buttons visibility */
.bw-category-modal { z-index: 999999 !important; }
.bw-category-modal-box,
.bw-category-modal .bw-modal-box {
color: var(--bw-v45-ink) !important;
background: radial-gradient(circle at 8% 8%, rgba(255,246,176,.90), transparent 31%),
radial-gradient(circle at 94% 6%, rgba(213,255,236,.88), transparent 31%),
linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}
.bw-category-modal h1,
.bw-category-modal h2,
.bw-category-modal h3,
.bw-category-modal p,
.bw-category-modal label,
.bw-category-modal .bw-confirm-message { color: var(--bw-v45-ink) !important; opacity: 1 !important; }
.bw-category-modal .bw-cat-show-update,
.bw-category-modal .bw-gradient-btn,
.bw-category-modal .bw-cat-update-box button[type="submit"] {
background: linear-gradient(rgb(5,6,45), rgb(5,6,45)) padding-box,
linear-gradient(144deg, #8b2fff, #3c48ef 52%, #00ddeb) border-box !important;
border: 3px solid transparent !important;
color: #ffffff !important;
text-shadow: 0 1px 2px rgba(0,0,0,.25) !important;
}
.bw-category-modal .bw-confirm-action button[type="submit"]:not(.bw-gradient-btn) {
background: linear-gradient(rgb(5,6,45), rgb(5,6,45)) padding-box,
linear-gradient(144deg, #ffcc33, #ff675f 55%, #d54f58) border-box !important;
border: 3px solid transparent !important;
color: #ffffff !important;
}
.bw-category-modal .bw-cat-cancel,
.bw-category-modal .bw-cat-update-back,
.bw-category-modal .bw-cat-close {
background: #ffffff !important;
color: var(--bw-v45-ink) !important;
border: 1px solid rgba(148,163,184,.32) !important;
}
.bw-category-modal button:hover { color: #ffffff !important; filter: brightness(1.08) !important; }
.bw-category-modal .bw-cat-cancel:hover,
.bw-category-modal .bw-cat-update-back:hover,
.bw-category-modal .bw-cat-close:hover { color: var(--bw-v45-ink) !important; background: #f8fafc !important; }
/* Home categories: All is present, single green dot only, ellipsis icon only */
.bw-category-pill {
position: relative !important;
border-radius: 12px !important;
padding-left: 2.05rem !important;
background: linear-gradient(135deg, #ffffff 0%, #fff6bf 100%) !important;
color: var(--bw-v45-ink) !important;
}
.bw-category-pill::before {
content: "" !important;
position: absolute !important;
left: .82rem !important;
top: 50% !important;
width: 10px !important;
height: 10px !important;
transform: translateY(-50%) !important;
border-radius: 999px !important;
background: #22c55e !important;
box-shadow: 0 0 0 5px rgba(34,197,94,.13) !important;
}
.bw-category-pill .bw-pill-dot { display: none !important; }
.bw-category-pill.bw-gradient-btn,
.bw-category-all.bw-gradient-btn {
background: linear-gradient(rgb(5,6,45), rgb(5,6,45)) padding-box,
linear-gradient(144deg, #8b2fff, #3c48ef 50%, #00ddeb) border-box !important;
border: 3px solid transparent !important;
color: #ffffff !important;
}
.bw-category-pill.bw-gradient-btn::before,
.bw-category-all.bw-gradient-btn::before { background: #facc15 !important; box-shadow: 0 0 0 5px rgba(250,204,21,.18) !important; }
.bw-category-more-toggle,
.bw-category-pills-wrap.is-expanded .bw-category-more-toggle {
min-width: 0 !important;
width: auto !important;
min-height: 0 !important;
padding: 0 .35rem !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: #102a4c !important;
box-shadow: none !important;
font-size: 2rem !important;
line-height: 1 !important;
letter-spacing: .08em !important;
}
.bw-category-more-toggle:hover { background: transparent !important; color: #3c48ef !important; transform: translateY(-1px) !important; }
.bw-category-more-text { color: inherit !important; }
/* Reaction buttons: fixed layout; selected state changes color only */
.bw-reaction,
button.bw-reaction {
width: 86px !important;
min-width: 86px !important;
height: 38px !important;
min-height: 38px !important;
padding: 0 .65rem !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: .35rem !important;
border-radius: 12px !important;
box-sizing: border-box !important;
transform: none !important;
}
.bw-reaction:hover { transform: none !important; }
.bw-reaction[data-reaction="like"].bw-gradient-btn,
.bw-reaction[data-reaction="like"].text-white {
background: linear-gradient(rgb(5,6,45), rgb(5,6,45)) padding-box,
linear-gradient(144deg, #8b2fff, #3c48ef 50%, #00ddeb) border-box !important;
border: 3px solid transparent !important;
color: #ffffff !important;
}
.bw-reaction[data-reaction="dislike"].bg-rose-600,
.bw-reaction[data-reaction="dislike"].text-white {
background: linear-gradient(rgb(5,6,45), rgb(5,6,45)) padding-box,
linear-gradient(144deg, #ffcc33, #ff675f 55%, #d54f58) border-box !important;
border: 3px solid transparent !important;
color: #ffffff !important;
}
.bw-like-count { min-width: 1.1em !important; text-align: center !important; }
/* Upload file button same premium gradient as other primary buttons */
.bw-file-input::file-selector-button,
input[type="file"].bw-file-input::file-selector-button,
.bw-open-editor-file,
.bw-file-input::-webkit-file-upload-button {
background: linear-gradient(rgb(5,6,45), rgb(5,6,45)) padding-box,
linear-gradient(144deg, #8b2fff, #3c48ef 50%, #00ddeb) border-box !important;
border: 3px solid transparent !important;
color: #ffffff !important;
border-radius: 10px !important;
font-weight: 900 !important;
box-shadow: 0 14px 24px rgba(60,72,239,.18) !important;
}
/* =========================================================
v46 requested refinements: compact update modal, visible modal buttons,
lighter glass action colors
========================================================= */
:root {
--bw-v46-view: rgba(105, 115, 255, .96);
--bw-v46-view-2: rgba(60, 72, 239, .90);
--bw-v46-update: rgba(229, 119, 166, .96);
--bw-v46-update-2: rgba(203, 89, 130, .92);
--bw-v46-delete: rgba(244, 105, 114, .97);
--bw-v46-delete-2: rgba(213, 79, 88, .94);
--bw-v46-approve: rgba(54, 190, 124, .96);
--bw-v46-approve-2: rgba(33, 153, 94, .92);
}
/* Update modal: remove repeated visual heading space and make the form compact */
.bw-edit-modal {
position: fixed !important;
inset: 0 !important;
z-index: 999998 !important;
align-items: flex-start !important;
justify-content: center !important;
padding: 28px 16px !important;
overflow-y: auto !important;
background: rgba(11, 23, 42, .60) !important;
backdrop-filter: blur(9px) saturate(1.05) !important;
-webkit-backdrop-filter: blur(9px) saturate(1.05) !important;
}
.bw-edit-modal.is-open { display: flex !important; }
.bw-edit-modal-box {
width: min(1080px, 96vw) !important;
max-height: none !important;
overflow: visible !important;
padding: 28px 30px !important;
border-radius: 24px !important;
color: #0f172a !important;
background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%) !important;
box-shadow: 0 32px 80px rgba(2, 6, 23, .32), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.bw-edit-modal-box > .mb-4.pr-12 { display: none !important; }
.bw-edit-modal-box .bw-filter-box {
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
.bw-edit-modal-box .bw-filter-box > .mb-8 { margin-bottom: 18px !important; }
.bw-edit-modal-box .bw-filter-box > .mb-8 p {
margin-bottom: 6px !important;
color: #dc3545 !important;
opacity: 1 !important;
letter-spacing: .22em !important;
}
.bw-edit-modal-box .bw-filter-box > .mb-8 h2 {
font-size: 2rem !important;
line-height: 1.1 !important;
color: #0f172a !important;
margin: 0 !important;
}
.bw-edit-modal-box label {
margin-bottom: 6px !important;
color: #0f172a !important;
font-size: .96rem !important;
}
.bw-edit-modal-box .bw-form-input,
.bw-edit-modal-box select.bw-form-input,
.bw-edit-modal-box textarea.bw-form-input,
.bw-edit-modal-box input.bw-form-input {
border-radius: 12px !important;
padding: 10px 14px !important;
font-size: 1rem !important;
line-height: 1.45 !important;
min-height: 46px !important;
color: #0f172a !important;
background: rgba(255,255,255,.94) !important;
border: 1px solid rgba(15, 23, 42, .18) !important;
}
.bw-edit-modal-box input[name="bw_title"].bw-form-input {
padding: 11px 14px !important;
font-size: 1.35rem !important;
min-height: 52px !important;
}
.bw-edit-modal-box textarea.bw-form-input { min-height: 118px !important; }
.bw-edit-modal-box .bw-editor-box { padding: 12px !important; margin-bottom: 18px !important; }
.bw-edit-modal-box .wp-editor-area { min-height: 240px !important; }
.bw-edit-modal-box .mb-6 { margin-bottom: 16px !important; }
.bw-edit-modal-box .mb-8 { margin-bottom: 18px !important; }
.bw-edit-modal-box .bw-btn,
.bw-edit-modal-box button,
.bw-edit-modal-box a.bw-btn {
min-height: 42px !important;
padding: 10px 20px !important;
border-radius: 12px !important;
font-size: .95rem !important;
}
.bw-edit-close,
.bw-edit-modal-box .bw-cat-close {
top: 18px !important;
right: 18px !important;
width: 40px !important;
height: 40px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: #0f172a !important;
background: rgba(255,255,255,.92) !important;
border: 1px solid rgba(148,163,184,.32) !important;
box-shadow: 0 12px 24px rgba(15,23,42,.14) !important;
}
/* File upload button should match the brighter primary action style, not black */
.bw-file-input::file-selector-button,
input[type="file"].bw-file-input::file-selector-button,
.bw-file-input::-webkit-file-upload-button,
.bw-open-editor-file {
background: linear-gradient(145deg, var(--bw-v46-view), var(--bw-v46-view-2)) !important;
border: 1px solid rgba(255,255,255,.34) !important;
color: #ffffff !important;
border-radius: 12px !important;
padding: 10px 18px !important;
font-weight: 950 !important;
box-shadow: 0 12px 24px rgba(60,72,239,.22), inset 0 1px 0 rgba(255,255,255,.34) !important;
}
/* Confirmation modal: make the confirm button colored, never black */
.bw-confirm-primary {
background: linear-gradient(145deg, #ffcf4d, var(--bw-v46-delete)) !important;
border: 1px solid rgba(255,255,255,.36) !important;
color: #ffffff !important;
padding: 0 !important;
overflow: hidden !important;
}
.bw-confirm-primary span {
background: linear-gradient(145deg, #ffcf4d 0%, #ff8a4d 38%, var(--bw-v46-delete) 100%) !important;
color: #ffffff !important;
text-shadow: 0 1px 2px rgba(0,0,0,.24) !important;
}
.bw-confirm-primary:hover span,
.bw-confirm-primary:focus-visible span {
background: linear-gradient(145deg, #ffd75f 0%, #ff9560 38%, #f15f6b 100%) !important;
color: #ffffff !important;
}
.bw-confirm-cancel {
color: #0f172a !important;
background: rgba(255,255,255,.92) !important;
border: 1px solid rgba(148,163,184,.28) !important;
}
.bw-confirm-cancel:hover { color: #0f172a !important; background: #f8fafc !important; }
/* Category modal buttons: visible colored fills matching borders, no black hover */
.bw-category-modal .bw-cat-show-update,
.bw-category-modal .bw-cat-update-box button[type="submit"] {
background: linear-gradient(145deg, var(--bw-v46-view), var(--bw-v46-view-2)) !important;
border: 1px solid rgba(255,255,255,.34) !important;
color: #ffffff !important;
text-shadow: 0 1px 2px rgba(0,0,0,.24) !important;
box-shadow: 0 12px 24px rgba(60,72,239,.20), inset 0 1px 0 rgba(255,255,255,.34) !important;
}
.bw-category-modal .bw-confirm-action button[type="submit"]:not(.bw-gradient-btn) {
background: linear-gradient(145deg, #ffcf4d 0%, #ff8a4d 38%, var(--bw-v46-delete) 100%) !important;
border: 1px solid rgba(255,255,255,.34) !important;
color: #ffffff !important;
text-shadow: 0 1px 2px rgba(0,0,0,.24) !important;
box-shadow: 0 12px 24px rgba(213,79,88,.20), inset 0 1px 0 rgba(255,255,255,.34) !important;
}
.bw-category-modal .bw-cat-show-update:hover,
.bw-category-modal .bw-cat-update-box button[type="submit"]:hover,
.bw-category-modal .bw-confirm-action button[type="submit"]:not(.bw-gradient-btn):hover {
color: #ffffff !important;
filter: brightness(1.08) saturate(1.05) !important;
}
.bw-category-modal .bw-cat-cancel,
.bw-category-modal .bw-cat-update-back {
background: rgba(255,255,255,.92) !important;
color: #0f172a !important;
border: 1px solid rgba(148,163,184,.28) !important;
text-shadow: none !important;
}
.bw-category-modal .bw-cat-cancel:hover,
.bw-category-modal .bw-cat-update-back:hover {
color: #0f172a !important;
background: #f8fafc !important;
}
/* Action buttons: lighter, brighter, less transparent glass */
.bw-action-btn,
a.bw-action-btn,
button.bw-action-btn {
opacity: 1 !important;
border: 1px solid rgba(255,255,255,.34) !important;
color: #ffffff !important;
text-shadow: 0 1px 2px rgba(0,0,0,.22) !important;
box-shadow: 0 10px 22px rgba(2,6,23,.13), inset 0 1px 0 rgba(255,255,255,.36), inset 0 -10px 18px rgba(255,255,255,.10) !important;
}
.bw-action-view { background: linear-gradient(145deg, var(--bw-v46-view), var(--bw-v46-view-2)) !important; }
.bw-action-update { background: linear-gradient(145deg, var(--bw-v46-update), var(--bw-v46-update-2)) !important; }
.bw-action-delete { background: linear-gradient(145deg, var(--bw-v46-delete), var(--bw-v46-delete-2)) !important; }
.bw-action-approve { background: linear-gradient(145deg, var(--bw-v46-approve), var(--bw-v46-approve-2)) !important; }
.bw-action-btn:hover,
.bw-action-btn:focus-visible {
color: #ffffff !important;
filter: brightness(1.08) saturate(1.04) !important;
box-shadow: 0 14px 26px rgba(2,6,23,.18), inset 0 1px 0 rgba(255,255,255,.44) !important;
}
@media (max-width: 782px) {
.bw-edit-modal { padding: 14px 8px !important; }
.bw-edit-modal-box { padding: 22px 18px !important; border-radius: 20px !important; }
.bw-edit-modal-box .bw-filter-box > .mb-8 h2 { font-size: 1.65rem !important; }
.bw-edit-modal-box input[name="bw_title"].bw-form-input { font-size: 1.15rem !important; }
}
/* =========================================================
v47 final requested fixes: compact media input, exact action colors,
icon-only category toggle, stable reaction buttons, non-black primary buttons
========================================================= */
:root {
--bw-v47-view: rgb(60 72 239 / 81%);
--bw-v47-update: rgb(203 89 130);
--bw-v47-delete: rgb(213 79 88);
--bw-v47-primary-a: #6759ff;
--bw-v47-primary-b: #3c48ef;
--bw-v47-primary-c: #00ddeb;
--bw-v47-ink: #0f172a;
}
/* Center text in every styled button/link. */
.bw-btn,
a.bw-btn,
button.bw-btn,
.bw-action-btn,
.bw-gradient-btn,
.bw-dark-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
vertical-align: middle !important;
line-height: 1.1 !important;
}
/* Main gradient buttons: remove black inner fill and keep bright visible text. */
.bw-gradient-btn,
.bw-wrap .bw-gradient-btn,
.bw-dark-btn,
.bw-wrap button[type="submit"].bw-dark-btn,
.bw-open-editor-file,
.bw-file-input::file-selector-button,
input[type="file"].bw-file-input::file-selector-button,
.bw-file-input::-webkit-file-upload-button,
.bw-auth-main-btn.bw-signup-send,
.bw-signup-submit {
background: linear-gradient(144deg, var(--bw-v47-primary-a), var(--bw-v47-primary-b) 50%, var(--bw-v47-primary-c)) !important;
border: 1px solid rgba(255,255,255,.38) !important;
color: #ffffff !important;
text-shadow: 0 1px 2px rgba(0,0,0,.24) !important;
box-shadow: 0 14px 28px rgba(60,72,239,.22), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
.bw-gradient-btn:hover,
.bw-wrap .bw-gradient-btn:hover,
.bw-dark-btn:hover,
.bw-open-editor-file:hover,
.bw-file-input::file-selector-button:hover,
input[type="file"].bw-file-input::file-selector-button:hover,
.bw-file-input::-webkit-file-upload-button:hover,
.bw-auth-main-btn.bw-signup-send:hover,
.bw-signup-submit:hover {
background: linear-gradient(144deg, #7c6cff, #4c57ff 50%, #08e4f0) !important;
color: #ffffff !important;
transform: none !important;
filter: brightness(1.04) !important;
}
/* Compact update modal fields and editor/media area. */
.bw-edit-modal-box {
width: min(1040px, 94vw) !important;
padding: 24px 28px !important;
}
.bw-edit-modal-box .bw-form-input,
.bw-edit-modal-box select.bw-form-input,
.bw-edit-modal-box input.bw-form-input,
.bw-edit-modal-box textarea.bw-form-input {
min-height: 42px !important;
padding: 9px 12px !important;
font-size: .96rem !important;
border-radius: 10px !important;
}
.bw-edit-modal-box input[name="bw_title"].bw-form-input {
min-height: 48px !important;
padding: 10px 13px !important;
font-size: 1.18rem !important;
}
.bw-edit-modal-box textarea.bw-form-input { min-height: 92px !important; }
.bw-edit-modal-box .bw-editor-box {
padding: 10px !important;
border-radius: 18px !important;
margin-bottom: 14px !important;
}
.bw-edit-modal-box .wp-editor-area,
.bw-edit-modal-box .bw-editor-box iframe,
.bw-edit-modal-box .bw-editor-box textarea.wp-editor-area {
min-height: 210px !important;
height: 210px !important;
}
.bw-edit-modal-box .bw-file-input,
.bw-edit-modal-box input[type="file"].bw-file-input {
width: min(520px, 100%) !important;
max-width: 100% !important;
min-height: 56px !important;
padding: 8px 10px !important;
display: block !important;
border-radius: 12px !important;
}
.bw-edit-modal-box .bw-file-input::file-selector-button,
.bw-edit-modal-box input[type="file"].bw-file-input::file-selector-button,
.bw-edit-modal-box .bw-file-input::-webkit-file-upload-button {
padding: 9px 16px !important;
min-height: 40px !important;
border-radius: 10px !important;
margin-right: 12px !important;
}
.bw-edit-modal-box .bw-btn,
.bw-edit-modal-box button,
.bw-edit-modal-box a.bw-btn {
min-height: 40px !important;
padding: 9px 18px !important;
font-size: .94rem !important;
}
/* Exact requested View / Update / Delete shades with brighter, less transparent glass. */
.bw-action-btn,
a.bw-action-btn,
button.bw-action-btn {
min-width: 82px !important;
min-height: 38px !important;
padding: 9px 16px !important;
border-radius: 11px !important;
border: 1px solid rgba(255,255,255,.42) !important;
color: #ffffff !important;
opacity: 1 !important;
text-shadow: 0 1px 2px rgba(0,0,0,.22) !important;
box-shadow: 0 10px 20px rgba(2,6,23,.14), inset 0 1px 0 rgba(255,255,255,.38), inset 0 -8px 16px rgba(255,255,255,.08) !important;
backdrop-filter: blur(9px) saturate(1.18) !important;
-webkit-backdrop-filter: blur(9px) saturate(1.18) !important;
}
.bw-action-view,
a.bw-action-view,
button.bw-action-view {
background: linear-gradient(145deg, rgba(255,255,255,.18), var(--bw-v47-view)) !important;
}
.bw-action-update,
a.bw-action-update,
button.bw-action-update {
background: linear-gradient(145deg, rgba(255,255,255,.18), var(--bw-v47-update)) !important;
color: #ffffff !important;
text-shadow: 0 1px 2px rgba(0,0,0,.22) !important;
}
.bw-action-delete,
a.bw-action-delete,
button.bw-action-delete {
background: linear-gradient(145deg, rgba(255,255,255,.18), var(--bw-v47-delete)) !important;
}
.bw-action-approve,
a.bw-action-approve,
button.bw-action-approve {
background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(29, 180, 112, .92)) !important;
}
.bw-action-btn:hover,
.bw-action-btn:focus-visible {
color: #ffffff !important;
transform: none !important;
filter: brightness(1.06) saturate(1.04) !important;
}
/* Category expand/collapse: icon only, no button fill/shadow; only color changes on hover. */
.bw-category-more-toggle,
.bw-category-pills-wrap.is-expanded .bw-category-more-toggle,
button.bw-category-more-toggle {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
min-width: 34px !important;
height: 34px !important;
min-height: 34px !important;
padding: 0 .15rem !important;
margin: 0 .25rem !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #3c48ef !important;
font-size: 2rem !important;
line-height: 1 !important;
letter-spacing: .06em !important;
text-shadow: none !important;
transform: none !important;
}
.bw-category-more-toggle:hover,
.bw-category-more-toggle:focus-visible {
background: transparent !important;
box-shadow: none !important;
color: #cb5982 !important;
filter: none !important;
transform: none !important;
}
.bw-category-more-text { color: inherit !important; }
/* Category pills: keep All, one green dot only, stable selected style. */
.bw-category-pill::before { display: block !important; }
.bw-category-pill .bw-pill-dot { display: none !important; }
.bw-category-pill.bw-gradient-btn,
.bw-category-all.bw-gradient-btn {
background: linear-gradient(135deg, #eef7ff 0%, #e8fff1 100%) !important;
border: 1px solid rgba(34,197,94,.22) !important;
color: var(--bw-v47-ink) !important;
box-shadow: 0 8px 18px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.85) !important;
text-shadow: none !important;
}
.bw-category-pill.bw-gradient-btn:hover,
.bw-category-all.bw-gradient-btn:hover {
background: linear-gradient(135deg, #e9f4ff 0%, #dcfce7 100%) !important;
color: var(--bw-v47-ink) !important;
}
.bw-category-pill.bw-gradient-btn::before,
.bw-category-all.bw-gradient-btn::before {
background: #22c55e !important;
box-shadow: 0 0 0 5px rgba(34,197,94,.13) !important;
}
/* Reactions: never change width, border thickness or layout when clicked; color only changes. */
.bw-reaction,
button.bw-reaction,
.bw-reaction.bw-gradient-btn,
.bw-reaction.text-white,
.bw-reaction.border-transparent,
.bw-reaction.bg-rose-600 {
width: 82px !important;
min-width: 82px !important;
max-width: 82px !important;
height: 38px !important;
min-height: 38px !important;
padding: 0 10px !important;
border: 1px solid rgba(245, 158, 11, .24) !important;
border-radius: 999px !important;
background: rgba(255,255,255,.92) !important;
color: #334155 !important;
box-shadow: 0 8px 18px rgba(15,23,42,.06) !important;
transform: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: .35rem !important;
box-sizing: border-box !important;
}
.bw-reaction[data-reaction="like"].bw-gradient-btn,
.bw-reaction[data-reaction="like"].text-white {
background: var(--bw-v47-view) !important;
color: #ffffff !important;
border: 1px solid rgba(245, 158, 11, .24) !important;
}
.bw-reaction[data-reaction="dislike"].bg-rose-600,
.bw-reaction[data-reaction="dislike"].text-white {
background: var(--bw-v47-delete) !important;
color: #ffffff !important;
border: 1px solid rgba(245, 158, 11, .24) !important;
}
.bw-reaction:hover,
.bw-reaction:focus-visible,
.bw-reaction:active {
width: 82px !important;
min-width: 82px !important;
max-width: 82px !important;
transform: none !important;
filter: none !important;
}
.bw-reaction svg,
.bw-reaction .bw-like-count { flex: 0 0 auto !important; }
.bw-like-count { min-width: 1.1em !important; text-align: center !important; }
/* Confirmation and category modal buttons: colored fills instead of black center. */
.bw-confirm-primary,
.bw-confirm-primary span,
.bw-category-modal .bw-cat-show-update,
.bw-category-modal .bw-cat-update-box button[type="submit"],
.bw-category-modal .bw-confirm-action button[type="submit"]:not(.bw-gradient-btn) {
background: linear-gradient(145deg, #ffcf4d 0%, #ff8a4d 40%, var(--bw-v47-delete) 100%) !important;
color: #ffffff !important;
border-color: rgba(255,255,255,.35) !important;
text-shadow: 0 1px 2px rgba(0,0,0,.24) !important;
}
.bw-category-modal .bw-cat-show-update,
.bw-category-modal .bw-cat-update-box button[type="submit"] {
background: linear-gradient(145deg, var(--bw-v47-primary-a), var(--bw-v47-primary-b) 50%, var(--bw-v47-primary-c)) !important;
}
.bw-confirm-primary:hover,
.bw-confirm-primary:hover span,
.bw-category-modal .bw-cat-show-update:hover,
.bw-category-modal .bw-cat-update-box button[type="submit"]:hover,
.bw-category-modal .bw-confirm-action button[type="submit"]:not(.bw-gradient-btn):hover {
color: #ffffff !important;
filter: brightness(1.05) !important;
}
/* =========================
v48 requested visual fixes
- cleaner category pills + icon-only ellipsis
- navy main buttons with shine hover
- round reaction buttons, no resize on click
- smaller update modal/editor controls
========================= */
:root {
--bw-v48-navy-a: #173c73;
--bw-v48-navy-b: #071b3d;
--bw-v48-navy-c: #00c8e8;
--bw-v48-view-light: rgba(118, 145, 235, .88);
--bw-v48-update-light: rgba(213, 112, 153, .88);
--bw-v48-delete-light: rgba(225, 104, 112, .90);
--bw-v48-approve-light: rgba(80, 183, 140, .88);
}
/* Main action buttons (Add Blog, Search, Add Category, profile/save/admin buttons): navy gradient base + shine only on hover. */
.bw-filter-box > .flex a.bw-gradient-btn:not(.bw-category-pill),
.bw-filter-box form button.bw-gradient-btn,
.bw-wrap button.bw-dark-btn,
.bw-wrap a.bw-gradient-btn:not(.bw-category-pill):not(.bw-reaction),
.bw-wrap button.bw-gradient-btn:not(.bw-category-more-toggle):not(.bw-reaction),
.bw-auth-main-btn.bw-login-send,
.bw-auth-main-btn.bw-signup-send,
.bw-signup-submit,
.bw-open-editor-file,
.bw-file-input::file-selector-button,
input[type="file"].bw-file-input::file-selector-button,
.bw-file-input::-webkit-file-upload-button {
position: relative !important;
overflow: hidden !important;
background: linear-gradient(135deg, var(--bw-v48-navy-a) 0%, var(--bw-v48-navy-b) 72%, #0b2a58 100%) !important;
border: 1px solid rgba(0, 216, 255, .62) !important;
color: #fff !important;
text-shadow: 0 1px 2px rgba(0,0,0,.32) !important;
box-shadow: 0 12px 28px rgba(7,27,61,.20), inset 0 1px 0 rgba(255,255,255,.22) !important;
transform: none !important;
filter: none !important;
}
.bw-filter-box > .flex a.bw-gradient-btn:not(.bw-category-pill)::after,
.bw-filter-box form button.bw-gradient-btn::after,
.bw-wrap button.bw-dark-btn::after,
.bw-wrap a.bw-gradient-btn:not(.bw-category-pill):not(.bw-reaction)::after,
.bw-wrap button.bw-gradient-btn:not(.bw-category-more-toggle):not(.bw-reaction)::after,
.bw-auth-main-btn.bw-login-send::after,
.bw-auth-main-btn.bw-signup-send::after,
.bw-signup-submit::after,
.bw-open-editor-file::after {
content: "";
position: absolute;
inset: -40% auto -40% -80%;
width: 45%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.46), transparent);
transform: skewX(-20deg);
opacity: 0;
pointer-events: none;
}
.bw-filter-box > .flex a.bw-gradient-btn:not(.bw-category-pill):hover,
.bw-filter-box form button.bw-gradient-btn:hover,
.bw-wrap button.bw-dark-btn:hover,
.bw-wrap a.bw-gradient-btn:not(.bw-category-pill):not(.bw-reaction):hover,
.bw-wrap button.bw-gradient-btn:not(.bw-category-more-toggle):not(.bw-reaction):hover,
.bw-auth-main-btn.bw-login-send:hover,
.bw-auth-main-btn.bw-signup-send:hover,
.bw-signup-submit:hover,
.bw-open-editor-file:hover,
.bw-file-input::file-selector-button:hover,
input[type="file"].bw-file-input::file-selector-button:hover,
.bw-file-input::-webkit-file-upload-button:hover {
background: linear-gradient(135deg, #1c4b8e 0%, #0a214a 70%, #053d64 100%) !important;
color: #fff !important;
transform: none !important;
filter: none !important;
}
.bw-filter-box > .flex a.bw-gradient-btn:not(.bw-category-pill):hover::after,
.bw-filter-box form button.bw-gradient-btn:hover::after,
.bw-wrap button.bw-dark-btn:hover::after,
.bw-wrap a.bw-gradient-btn:not(.bw-category-pill):not(.bw-reaction):hover::after,
.bw-wrap button.bw-gradient-btn:not(.bw-category-more-toggle):not(.bw-reaction):hover::after,
.bw-auth-main-btn.bw-login-send:hover::after,
.bw-auth-main-btn.bw-signup-send:hover::after,
.bw-signup-submit:hover::after,
.bw-open-editor-file:hover::after {
animation: bw-shine-v48 .75s ease-out 1;
opacity: 1;
}
@keyframes bw-shine-v48 {
0% { left: -80%; }
100% { left: 135%; }
}
/* Home category section: softer chips, one dot, improved spacing, no heavy raised style. */
.bw-category-pills-wrap {
position: relative !important;
width: 100% !important;
}
.bw-category-pills {
align-items: center !important;
gap: 12px 12px !important;
}
.bw-category-pill,
a.bw-category-pill,
button.bw-category-pill {
min-height: 40px !important;
padding: .62rem 1.05rem .62rem 1.35rem !important;
border-radius: 12px !important;
border: 1px solid rgba(226, 232, 240, .95) !important;
background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,250,211,.94)) !important;
color: #0f172a !important;
box-shadow: 0 8px 18px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.9) !important;
text-shadow: none !important;
position: relative !important;
overflow: visible !important;
line-height: 1 !important;
}
.bw-category-pill::before,
a.bw-category-pill::before {
content: "" !important;
display: block !important;
position: absolute !important;
left: .62rem !important;
top: 50% !important;
width: 9px !important;
height: 9px !important;
margin: 0 !important;
transform: translateY(-50%) !important;
border-radius: 999px !important;
background: #22c55e !important;
box-shadow: 0 0 0 5px rgba(34,197,94,.12) !important;
}
.bw-category-pill .bw-pill-dot { display: none !important; }
.bw-category-pill:hover,
a.bw-category-pill:hover {
background: linear-gradient(135deg, #ffffff, #fff7bf) !important;
color: #0f172a !important;
transform: none !important;
filter: none !important;
}
.bw-category-pill.bw-gradient-btn,
.bw-category-all.bw-gradient-btn {
background: linear-gradient(135deg, #e7f0ff 0%, #dffbea 100%) !important;
border-color: rgba(34, 197, 94, .32) !important;
color: #0f172a !important;
box-shadow: 0 8px 18px rgba(15,23,42,.065), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
/* Ellipsis expand/collapse: just an icon, no hover effect. */
.bw-category-more-toggle,
.bw-category-pills-wrap.is-expanded .bw-category-more-toggle,
button.bw-category-more-toggle {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 34px !important;
min-width: 34px !important;
height: 34px !important;
min-height: 34px !important;
padding: 0 !important;
margin: 0 .25rem !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #172554 !important;
font-size: 2rem !important;
font-weight: 900 !important;
line-height: 1 !important;
letter-spacing: .12em !important;
text-shadow: none !important;
transform: none !important;
filter: none !important;
}
.bw-category-more-toggle:hover,
.bw-category-more-toggle:focus,
.bw-category-more-toggle:focus-visible,
.bw-category-more-toggle:active {
background: transparent !important;
box-shadow: none !important;
color: #172554 !important;
outline: none !important;
transform: none !important;
filter: none !important;
}
.bw-category-more-text { color: inherit !important; }
/* Lighter action buttons, less transparent, centered text. */
.bw-action-btn,
a.bw-action-btn,
button.bw-action-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
min-width: 82px !important;
min-height: 38px !important;
padding: 8px 15px !important;
border-radius: 11px !important;
border: 1px solid rgba(255,255,255,.52) !important;
color: #fff !important;
opacity: 1 !important;
text-shadow: 0 1px 1px rgba(0,0,0,.18) !important;
box-shadow: 0 8px 16px rgba(2,6,23,.12), inset 0 1px 0 rgba(255,255,255,.32) !important;
backdrop-filter: blur(7px) saturate(1.12) !important;
-webkit-backdrop-filter: blur(7px) saturate(1.12) !important;
line-height: 1 !important;
}
.bw-action-view,
a.bw-action-view,
button.bw-action-view { background: var(--bw-v48-view-light) !important; }
.bw-action-update,
a.bw-action-update,
button.bw-action-update { background: var(--bw-v48-update-light) !important; }
.bw-action-delete,
a.bw-action-delete,
button.bw-action-delete { background: var(--bw-v48-delete-light) !important; }
.bw-action-approve,
a.bw-action-approve,
button.bw-action-approve { background: var(--bw-v48-approve-light) !important; }
.bw-action-btn:hover,
.bw-action-btn:focus-visible {
transform: none !important;
filter: brightness(1.05) !important;
color: #fff !important;
}
/* Like/dislike: rounded 50px, size locked; clicking changes color only. */
.bw-reaction,
button.bw-reaction,
.bw-reaction.bw-gradient-btn,
.bw-reaction.text-white,
.bw-reaction.border-transparent,
.bw-reaction.bg-rose-600 {
width: 82px !important;
min-width: 82px !important;
max-width: 82px !important;
height: 38px !important;
min-height: 38px !important;
padding: 0 10px !important;
border-radius: 50px !important;
border: 1px solid rgba(245, 158, 11, .26) !important;
background: rgba(255,255,255,.94) !important;
color: #334155 !important;
box-shadow: 0 8px 18px rgba(15,23,42,.06) !important;
transform: none !important;
filter: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: .35rem !important;
box-sizing: border-box !important;
}
.bw-reaction[data-reaction="like"].bw-gradient-btn,
.bw-reaction[data-reaction="like"].text-white {
background: rgba(60,72,239,.88) !important;
color: #ffd84d !important;
}
.bw-reaction[data-reaction="dislike"].bg-rose-600,
.bw-reaction[data-reaction="dislike"].text-white {
background: rgba(213,79,88,.88) !important;
color: #fff !important;
}
.bw-reaction:hover,
.bw-reaction:focus-visible,
.bw-reaction:active {
width: 82px !important;
min-width: 82px !important;
max-width: 82px !important;
height: 38px !important;
transform: none !important;
filter: none !important;
}
/* Update blog modal: smaller content and smaller editor toolbar controls. */
.bw-edit-modal-box {
width: min(980px, 94vw) !important;
padding: 26px 30px !important;
font-size: .94rem !important;
}
.bw-edit-modal-box h1,
.bw-edit-modal-box h2 { font-size: clamp(1.65rem, 2.2vw, 2.2rem) !important; line-height: 1.08 !important; margin-bottom: .8rem !important; }
.bw-edit-modal-box label,
.bw-edit-modal-box .font-black { font-size: .92rem !important; }
.bw-edit-modal-box .bw-form-input,
.bw-edit-modal-box input[type="text"],
.bw-edit-modal-box select,
.bw-edit-modal-box textarea {
min-height: 44px !important;
padding: 10px 14px !important;
font-size: .96rem !important;
border-radius: 10px !important;
}
.bw-edit-modal-box textarea { min-height: 118px !important; }
.bw-edit-modal-box .bw-editor-box .wp-editor-wrap { border-radius: 14px !important; }
.bw-edit-modal-box .bw-editor-box .wp-editor-tools { padding: .28rem .38rem 0 !important; }
.bw-edit-modal-box .mce-toolbar-grp,
.bw-edit-modal-box .quicktags-toolbar { padding: 4px 5px !important; }
.bw-edit-modal-box .mce-btn,
.bw-edit-modal-box .mce-btn button,
.bw-edit-modal-box .quicktags-toolbar input.button.button-small {
min-width: 28px !important;
min-height: 28px !important;
height: 28px !important;
padding: 2px 5px !important;
font-size: 12px !important;
line-height: 1 !important;
}
.bw-edit-modal-box .mce-listbox button { padding-right: 18px !important; }
.bw-edit-modal-box .mce-ico { font-size: 14px !important; line-height: 14px !important; }
.bw-edit-modal-box .wp-editor-tabs button {
min-height: 34px !important;
padding: 7px 12px !important;
font-size: .86rem !important;
}
.bw-edit-modal-box .bw-editor-box iframe,
.bw-edit-modal-box .bw-editor-box textarea.wp-editor-area,
.bw-edit-modal-box .wp-editor-area {
min-height: 210px !important;
height: 210px !important;
}
.bw-edit-modal-box .bw-open-editor-file,
.bw-edit-modal-box .bw-file-input::file-selector-button,
.bw-edit-modal-box input[type="file"].bw-file-input::file-selector-button,
.bw-edit-modal-box .bw-file-input::-webkit-file-upload-button {
min-height: 34px !important;
padding: 8px 14px !important;
font-size: .88rem !important;
border-radius: 10px !important;
}
.bw-edit-modal-box .bw-file-input,
.bw-edit-modal-box input[type="file"].bw-file-input {
width: min(460px, 100%) !important;
min-height: 50px !important;
padding: 7px 9px !important;
}
.bw-edit-modal-box .bw-btn,
.bw-edit-modal-box button,
.bw-edit-modal-box a.bw-btn {
min-height: 38px !important;
padding: 8px 16px !important;
font-size: .9rem !important;
}
/* ===== v49 visibility/layout fixes requested ===== */
/* Main buttons: navy gradient, readable text, shine-only hover */
.bw-main-cta,
.bw-wrap .bw-main-cta,
.bw-wrap a.bw-main-cta,
.bw-wrap button.bw-main-cta,
.bw-wrap input[type="submit"].bw-main-cta {
position: relative !important;
overflow: hidden !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: .45rem !important;
min-height: 46px !important;
border: 2px solid rgba(34, 211, 238, .95) !important;
background: linear-gradient(135deg, #102a5f 0%, #07173a 55%, #06122d 100%) !important;
color: #fff !important;
text-align: center !important;
box-shadow: 0 14px 30px rgba(15, 23, 42, .18), 0 0 0 1px rgba(139, 92, 246, .85) inset !important;
text-decoration: none !important;
transition: transform .18s ease, box-shadow .18s ease !important;
}
.bw-main-cta::after {
content: "";
position: absolute;
inset: -80% auto -80% -55%;
width: 40%;
transform: rotate(18deg);
background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
transition: left .55s ease;
}
.bw-main-cta:hover {
background: linear-gradient(135deg, #102a5f 0%, #07173a 55%, #06122d 100%) !important;
color: #fff !important;
transform: translateY(-1px) !important;
box-shadow: 0 18px 34px rgba(15,23,42,.22), 0 0 0 1px rgba(139, 92, 246, .95) inset !important;
}
.bw-main-cta:hover::after { left: 125%; }
.bw-main-cta:active { transform: translateY(0) scale(.98) !important; }
/* Home category section: clean pills, All active first, no green dots */
.bw-home-main .bw-filter-box .bw-category-pills-wrap {
position: relative !important;
padding-right: 46px !important;
}
.bw-home-main .bw-category-pills {
gap: 12px !important;
align-items: center !important;
max-height: 92px !important;
overflow: hidden !important;
transition: max-height .22s ease !important;
}
.bw-home-main .bw-category-pills-wrap.is-expanded .bw-category-pills {
max-height: 800px !important;
}
.bw-home-main .bw-category-extra { display: none !important; }
.bw-home-main .bw-category-pills-wrap.is-expanded .bw-category-extra { display: inline-flex !important; }
.bw-home-main .bw-category-pill,
.bw-home-main .bw-category-pills .bw-category-pill,
.bw-home-main .bw-filter-box .flex.flex-wrap.gap-3 > a.bw-category-pill {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 40px !important;
padding: 9px 18px !important;
border-radius: 12px !important;
border: 1px solid rgba(226, 232, 240, .95) !important;
background: linear-gradient(135deg, rgba(255,255,255,.96), rgb(245,229,118,.88)) !important;
color: #0f172a !important;
font-size: 14px !important;
font-weight: 900 !important;
line-height: 1.1 !important;
text-decoration: none !important;
box-shadow: 0 10px 22px rgba(15,23,42,.08) !important;
}
.bw-home-main .bw-category-pill::before,
.bw-home-main .bw-category-pill::after,
.bw-home-main .bw-filter-box .flex.flex-wrap.gap-3 > a.bw-btn::before,
.bw-home-main .bw-filter-box .flex.flex-wrap.gap-3 > a.bw-btn::after {
display: none !important;
content: none !important;
}
.bw-home-main .bw-category-pill.is-active,
.bw-home-main .bw-filter-box .flex.flex-wrap.gap-3 > a.bw-category-pill.is-active {
background: linear-gradient(135deg, #142d66, #08183a) !important;
border-color: rgba(34,211,238,.8) !important;
color: #fff !important;
box-shadow: 0 12px 26px rgba(15,23,42,.18) !important;
}
.bw-home-main .bw-category-pill:hover {
color: #0f172a !important;
transform: none !important;
box-shadow: 0 10px 22px rgba(15,23,42,.08) !important;
}
.bw-home-main .bw-category-pill.is-active:hover { color:#fff !important; }
.bw-category-more-toggle,
.bw-home-main .bw-category-more-toggle {
position: absolute !important;
right: 0 !important;
bottom: 0 !important;
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background: transparent !important;
color: #1d4ed8 !important;
box-shadow: none !important;
font-size: 24px !important;
font-weight: 950 !important;
line-height: 1 !important;
cursor: pointer !important;
}
.bw-category-more-toggle:hover,
.bw-home-main .bw-category-more-toggle:hover {
background: transparent !important;
color: #7c3aed !important;
transform: none !important;
box-shadow: none !important;
}
/* Admin category manager back to neat horizontal tile layout */
#bw-tab-categories .bw-filter-box { background: linear-gradient(135deg, #0b1f3f, #133d68) !important; }
#bw-tab-categories .bw-filter-box > div:first-child h2,
#bw-tab-categories .bw-filter-box > div:first-child p { color: #fff !important; }
#bw-tab-categories .bw-filter-box > div:first-child p:first-child { color: #ffe66d !important; }
#bw-tab-categories form.mb-8 { align-items: stretch !important; }
#bw-tab-categories .bw-category-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
gap: 18px !important;
}
#bw-tab-categories .bw-category-tile,
.bw-tab-panel .bw-category-tile {
min-height: 96px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
text-align: left !important;
padding: 20px 18px !important;
border-radius: 18px !important;
border: 1px solid rgba(226,232,240,.22) !important;
background: rgba(255,255,255,.10) !important;
color: #fff !important;
box-shadow: 0 12px 28px rgba(2,6,23,.18) inset, 0 8px 20px rgba(2,6,23,.12) !important;
}
#bw-tab-categories .bw-category-tile:hover {
background: rgba(255,255,255,.16) !important;
border-color: rgba(34,211,238,.45) !important;
transform: none !important;
}
#bw-tab-categories .bw-category-tile-title,
.bw-tab-panel .bw-category-tile-title {
flex: 1 !important;
color: #fff !important;
font-size: 1rem !important;
font-weight: 950 !important;
line-height: 1.2 !important;
text-align: left !important;
}
#bw-tab-categories .bw-category-tile-count,
.bw-wrap .bw-category-tile-count {
flex: 0 0 auto !important;
margin: 0 !important;
min-width: 58px !important;
justify-content: center !important;
border-radius: 999px !important;
background: #fff7b8 !important;
color: #008758 !important;
padding: 5px 10px !important;
font-size: 12px !important;
font-weight: 950 !important;
box-shadow: none !important;
}
/* Rich editor and update/add blog form: smaller, cleaner controls */
.bw-edit-modal-box { font-size: 14px !important; }
.bw-edit-modal-box h1,
.bw-edit-modal-box h2 { font-size: clamp(1.6rem, 3vw, 2.25rem) !important; }
.bw-edit-modal-box label { font-size: .95rem !important; }
.bw-edit-modal-box .bw-form-input,
.bw-edit-modal-box select,
.bw-edit-modal-box textarea {
font-size: 15px !important;
min-height: 44px !important;
padding: 10px 14px !important;
}
.bw-edit-modal-box input[name="bw_title"] { font-size: 1.25rem !important; padding: 12px 14px !important; }
.bw-edit-modal-box textarea[name="bw_short_description"] { min-height: 92px !important; }
.bw-edit-modal-box .bw-editor-box { padding: 12px !important; border-radius: 18px !important; }
.bw-editor-box .wp-editor-wrap { border-radius: 14px !important; overflow: hidden !important; border-color: #9aa9c1 !important; }
.bw-editor-box .wp-editor-tools { padding: .25rem .35rem 0 !important; }
.bw-editor-box .mce-toolbar-grp,
.bw-editor-box .quicktags-toolbar { padding: 4px 6px !important; }
.bw-editor-box .mce-btn button,
.bw-editor-box .quicktags-toolbar input.button.button-small {
min-height: 26px !important;
padding: 2px 6px !important;
font-size: 12px !important;
line-height: 1 !important;
}
.bw-editor-box .mce-btn { margin: 1px !important; }
.bw-editor-box .mce-listbox button { min-width: 86px !important; }
.bw-editor-box iframe,
.bw-editor-box textarea.wp-editor-area { min-height: 285px !important; }
.bw-edit-modal-box .mce-container,
.bw-edit-modal-box .mce-container-body { font-size: 12px !important; }
.bw-edit-modal-box .mce-toolbar .mce-ico { font-size: 14px !important; }
.bw-open-editor-file.bw-main-cta { min-height: 38px !important; padding: 8px 16px !important; border-radius: 10px !important; }
.bw-file-input,
.bw-image-field-wrap input[type="file"].bw-file-input {
max-width: 520px !important;
min-height: 44px !important;
padding: 10px 12px !important;
font-size: 14px !important;
}
.bw-image-field-wrap input[type="file"]::file-selector-button {
min-height: 38px !important;
padding: 8px 16px !important;
margin-right: 14px !important;
border: 2px solid rgba(34,211,238,.9) !important;
border-radius: 10px !important;
background: linear-gradient(135deg, #102a5f, #07173a) !important;
color: #fff !important;
font-weight: 900 !important;
}
/* Like/dislike buttons: 50% rounded, no layout/size changes on click */
.bw-reaction,
.bw-wrap .bw-reaction {
width: 54px !important;
min-width: 54px !important;
height: 42px !important;
min-height: 42px !important;
padding: 0 !important;
border-radius: 999px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
line-height: 1 !important;
box-sizing: border-box !important;
transform: none !important;
}
.bw-reaction:hover,
.bw-reaction:active { transform: none !important; }
.bw-reaction .bw-like-count { min-width: 12px !important; display:inline-block !important; text-align:center !important; }
.bw-reaction.bw-gradient-btn,
.bw-reaction.text-white {
width: 54px !important;
min-width: 54px !important;
border-radius: 999px !important;
background: rgba(60,72,239,.88) !important;
color: #fff !important;
border-color: rgba(139,92,246,.85) !important;
}
/* Make category/add/edit modal button text readable */
.bw-category-modal .bw-cat-show-update,
.bw-category-modal .bw-cat-update-box .bw-gradient-btn {
background: rgba(99, 102, 241, .16) !important;
border: 2px solid rgba(99,102,241,.65) !important;
color: #2733c9 !important;
box-shadow: 0 10px 24px rgba(99,102,241,.14) !important;
}
.bw-category-modal button.bg-rose-50,
.bw-category-modal .bw-confirm-action button,
.bw-confirm-modal .bw-confirm-yes {
background: rgba(213,79,88,.14) !important;
border: 2px solid rgba(213,79,88,.72) !important;
color: rgb(171, 38, 49) !important;
box-shadow: 0 10px 24px rgba(213,79,88,.12) !important;
}
.bw-category-modal .bw-cat-cancel,
.bw-category-modal .bw-cat-update-back,
.bw-confirm-modal .bw-confirm-cancel {
background: #fff !important;
color: #0f172a !important;
border: 1px solid rgba(148,163,184,.55) !important;
}
.bw-category-modal .bw-cat-show-update:hover,
.bw-category-modal .bw-cat-update-box .bw-gradient-btn:hover,
.bw-category-modal .bw-confirm-action button:hover,
.bw-category-modal .bw-cat-cancel:hover,
.bw-category-modal .bw-cat-update-back:hover {
color: inherit !important;
transform: none !important;
}
/* Action buttons lighter and centered */
.bw-action-btn,
.bw-wrap .bw-action-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
min-width: 82px !important;
min-height: 38px !important;
padding: 8px 16px !important;
line-height: 1 !important;
border-radius: 12px !important;
color: #fff !important;
opacity: 1 !important;
}
.bw-action-view { background: rgba(96,112,245,.74) !important; border: 1px solid rgba(166,176,255,.88) !important; }
.bw-action-update { background: rgba(220,110,150,.74) !important; border: 1px solid rgba(245,180,205,.88) !important; }
.bw-action-delete { background: rgba(235,100,108,.76) !important; border: 1px solid rgba(255,178,185,.88) !important; }
.bw-action-approve { background: rgba(92,190,145,.76) !important; border: 1px solid rgba(160,235,205,.88) !important; }
.bw-action-btn:hover { filter: brightness(1.06) !important; transform: none !important; color:#fff !important; }
/* v50: clean rich text editor inside Update Blog modal */
.bw-edit-modal-box .bw-editor-box {
background: linear-gradient(180deg, rgba(248,250,252,.98), rgba(241,245,249,.94)) !important;
border: 1px solid rgba(30, 64, 175, .22) !important;
box-shadow: 0 16px 40px rgba(15, 23, 42, .10) !important;
padding: 10px !important;
}
.bw-edit-modal-box .wp-editor-wrap,
.bw-edit-modal-box .wp-editor-container,
.bw-edit-modal-box .mce-tinymce,
.bw-edit-modal-box .mce-container,
.bw-edit-modal-box .mce-container-body {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.bw-edit-modal-box .wp-editor-wrap {
border: 1px solid rgba(30, 64, 175, .35) !important;
border-radius: 12px !important;
overflow: hidden !important;
background: #fff !important;
}
.bw-edit-modal-box .wp-editor-tools,
.bw-edit-modal-box .mce-toolbar-grp,
.bw-edit-modal-box .quicktags-toolbar {
background: #f8fafc !important;
border-color: rgba(148, 163, 184, .45) !important;
}
.bw-edit-modal-box .mce-toolbar-grp {
padding: 5px 7px !important;
}
.bw-edit-modal-box .mce-toolbar .mce-btn,
.bw-edit-modal-box .mce-toolbar .mce-btn button,
.bw-edit-modal-box .quicktags-toolbar input.button.button-small {
height: 30px !important;
min-height: 30px !important;
min-width: 30px !important;
padding: 3px 6px !important;
font-size: 12px !important;
color: #18233a !important;
background: transparent !important;
}
.bw-edit-modal-box .mce-toolbar .mce-btn:hover,
.bw-edit-modal-box .quicktags-toolbar input.button.button-small:hover {
background: rgba(60,72,239,.08) !important;
border-color: rgba(60,72,239,.35) !important;
box-shadow: none !important;
}
.bw-edit-modal-box .mce-listbox button {
min-width: 118px !important;
max-width: 150px !important;
padding: 3px 22px 3px 8px !important;
}
.bw-edit-modal-box .mce-ico {
font-size: 14px !important;
line-height: 14px !important;
}
.bw-edit-modal-box .wp-editor-tabs button {
min-height: 34px !important;
padding: 7px 13px !important;
font-size: .84rem !important;
color: #334155 !important;
background: #f8fafc !important;
border-color: rgba(148,163,184,.45) !important;
}
.bw-edit-modal-box .wp-editor-tabs button:hover,
.bw-edit-modal-box .wp-editor-tabs button:focus {
color: #0f172a !important;
background: #fff !important;
}
.bw-edit-modal-box .bw-editor-box iframe,
.bw-edit-modal-box .bw-editor-box textarea.wp-editor-area,
.bw-edit-modal-box .wp-editor-area {
min-height: 300px !important;
height: 300px !important;
background: #fff !important;
}
.bw-edit-modal-box .mce-statusbar { background: #f8fafc !important; border-top: 1px solid rgba(148,163,184,.35) !important; }
@media (max-width: 700px) {
.bw-edit-modal-box .mce-listbox button { min-width: 100px !important; max-width: 120px !important; }
.bw-edit-modal-box .mce-toolbar .mce-btn,
.bw-edit-modal-box .mce-toolbar .mce-btn button { min-width: 28px !important; height: 28px !important; }
}
/* v51: smoother home category expand/collapse with a clean chevron icon */
.bw-home-main .bw-filter-box .bw-category-pills-wrap {
position: relative !important;
padding-right: 48px !important;
}
.bw-home-main .bw-category-pills {
max-height: 92px !important;
overflow: hidden !important;
transition: max-height 420ms cubic-bezier(.22,1,.36,1), padding-bottom 420ms cubic-bezier(.22,1,.36,1) !important;
will-change: max-height !important;
}
.bw-home-main .bw-category-pills-wrap.is-expanded .bw-category-pills {
max-height: 520px !important;
padding-bottom: 4px !important;
}
.bw-home-main .bw-category-extra {
display: inline-flex !important;
opacity: 1 !important;
transform: none !important;
}
.bw-home-main .bw-category-more-toggle,
.bw-category-more-toggle,
button.bw-category-more-toggle {
position: absolute !important;
right: 4px !important;
bottom: 4px !important;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid rgba(59, 130, 246, .18) !important;
border-radius: 999px !important;
background: rgba(255,255,255,.72) !important;
color: #1d4ed8 !important;
box-shadow: 0 10px 24px rgba(15,23,42,.08) !important;
cursor: pointer !important;
transition: color 180ms ease, border-color 180ms ease !important;
}
.bw-home-main .bw-category-more-toggle:hover,
.bw-home-main .bw-category-more-toggle:focus,
.bw-home-main .bw-category-more-toggle:active,
.bw-category-more-toggle:hover,
.bw-category-more-toggle:focus,
.bw-category-more-toggle:active {
transform: none !important;
background: rgba(255,255,255,.72) !important;
color: #0f3ecb !important;
border-color: rgba(59, 130, 246, .32) !important;
box-shadow: 0 10px 24px rgba(15,23,42,.08) !important;
}
.bw-category-more-icon {
width: 20px !important;
height: 20px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: transform 320ms cubic-bezier(.22,1,.36,1) !important;
}
.bw-category-more-icon svg {
width: 20px !important;
height: 20px !important;
display: block !important;
fill: currentColor !important;
}
.bw-category-pills-wrap.is-expanded .bw-category-more-icon {
transform: rotate(180deg) !important;
}
@media (prefers-reduced-motion: reduce) {
.bw-home-main .bw-category-pills,
.bw-category-more-icon { transition: none !important; }
}
/* v52: make the Update Blog modal use the same rich formatting editor feel as Add Blog */
.bw-edit-modal-box .bw-editor-box {
padding: 14px !important;
border-radius: 18px !important;
}
.bw-edit-modal-box .wp-editor-wrap {
border: 1px solid rgba(30, 64, 175, .42) !important;
border-radius: 14px !important;
overflow: hidden !important;
}
.bw-edit-modal-box .wp-editor-tools {
min-height: 48px !important;
padding: .45rem .55rem 0 !important;
}
.bw-edit-modal-box .mce-toolbar-grp,
.bw-edit-modal-box .quicktags-toolbar {
padding: 8px 10px !important;
background: #f8fafc !important;
}
.bw-edit-modal-box .mce-toolbar,
.bw-edit-modal-box .mce-flow-layout {
white-space: normal !important;
display: block !important;
}
.bw-edit-modal-box .mce-toolbar .mce-btn,
.bw-edit-modal-box .mce-toolbar .mce-btn button,
.bw-edit-modal-box .quicktags-toolbar input.button.button-small {
height: 34px !important;
min-height: 34px !important;
min-width: 34px !important;
padding: 5px 8px !important;
font-size: 13px !important;
color: #1e293b !important;
background: transparent !important;
}
.bw-edit-modal-box .mce-toolbar .mce-btn:hover,
.bw-edit-modal-box .mce-toolbar .mce-btn:focus,
.bw-edit-modal-box .quicktags-toolbar input.button.button-small:hover {
background: rgba(37, 99, 235, .08) !important;
border-color: rgba(37, 99, 235, .32) !important;
box-shadow: none !important;
color: #0f172a !important;
}
.bw-edit-modal-box .mce-listbox button {
min-width: 118px !important;
max-width: 170px !important;
padding: 5px 26px 5px 9px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.bw-edit-modal-box .mce-ico {
font-size: 15px !important;
line-height: 15px !important;
}
.bw-edit-modal-box .wp-editor-tabs button {
min-height: 40px !important;
padding: 9px 16px !important;
font-size: .88rem !important;
font-weight: 900 !important;
color: #0f172a !important;
}
.bw-edit-modal-box .bw-editor-box iframe,
.bw-edit-modal-box .bw-editor-box textarea.wp-editor-area,
.bw-edit-modal-box .wp-editor-area {
min-height: 360px !important;
height: 360px !important;
}
@media (max-width: 760px) {
.bw-edit-modal-box .mce-toolbar .mce-btn,
.bw-edit-modal-box .mce-toolbar .mce-btn button {
min-width: 30px !important;
height: 30px !important;
padding: 4px 6px !important;
}
.bw-edit-modal-box .mce-listbox button {
min-width: 92px !important;
max-width: 118px !important;
}
}
/* v53: Full rich-text editor controls and dependable fullscreen editing for Add/Update Blog */
.bw-editor-actionbar {
position: relative;
z-index: 2;
}
.bw-editor-fullscreen-btn {
background: linear-gradient(135deg, #0f172a, #1d4ed8) !important;
color: #ffffff !important;
border: 0 !important;
}
.bw-editor-box .mce-toolbar,
.bw-editor-box .mce-flow-layout,
.bw-editor-box .quicktags-toolbar {
white-space: normal !important;
}
.bw-editor-box .mce-toolbar .mce-btn,
.bw-editor-box .mce-toolbar .mce-btn button,
.bw-editor-box .quicktags-toolbar input.button.button-small {
min-height: 32px !important;
}
.bw-editor-box .mce-listbox button {
min-width: 112px !important;
max-width: 190px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
body.bw-editor-fullscreen-open {
overflow: hidden !important;
}
.bw-editor-box.bw-editor-is-fullscreen {
position: fixed !important;
inset: 0 !important;
z-index: 999999 !important;
margin: 0 !important;
padding: 14px !important;
border-radius: 0 !important;
background: #ffffff !important;
display: flex !important;
flex-direction: column !important;
box-shadow: none !important;
}
.bw-editor-box.bw-editor-is-fullscreen .bw-editor-actionbar {
margin-bottom: 10px !important;
padding: 10px 12px !important;
border: 1px solid rgba(148, 163, 184, .35) !important;
border-radius: 14px !important;
background: #f8fafc !important;
}
.bw-editor-box.bw-editor-is-fullscreen .wp-editor-wrap,
.bw-editor-box.bw-editor-is-fullscreen .wp-editor-container,
.bw-editor-box.bw-editor-is-fullscreen .mce-tinymce,
.bw-editor-box.bw-editor-is-fullscreen .mce-container-body {
width: 100% !important;
max-width: none !important;
}
.bw-editor-box.bw-editor-is-fullscreen .wp-editor-wrap {
flex: 1 1 auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
border-radius: 16px !important;
}
.bw-editor-box.bw-editor-is-fullscreen .wp-editor-container {
flex: 1 1 auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
}
.bw-editor-box.bw-editor-is-fullscreen .mce-tinymce,
.bw-editor-box.bw-editor-is-fullscreen .mce-stack-layout,
.bw-editor-box.bw-editor-is-fullscreen .mce-edit-area,
.bw-editor-box.bw-editor-is-fullscreen iframe,
.bw-editor-box.bw-editor-is-fullscreen textarea.wp-editor-area {
flex: 1 1 auto !important;
min-height: 0 !important;
}
.bw-editor-box.bw-editor-is-fullscreen iframe,
.bw-editor-box.bw-editor-is-fullscreen textarea.wp-editor-area {
height: calc(100vh - 190px) !important;
min-height: calc(100vh - 190px) !important;
}
.bw-editor-box.bw-editor-is-fullscreen .mce-toolbar-grp,
.bw-editor-box.bw-editor-is-fullscreen .quicktags-toolbar {
max-height: 30vh !important;
overflow-y: auto !important;
}
@media (max-width: 760px) {
.bw-editor-box.bw-editor-is-fullscreen {
padding: 10px !important;
}
.bw-editor-box.bw-editor-is-fullscreen iframe,
.bw-editor-box.bw-editor-is-fullscreen textarea.wp-editor-area {
height: calc(100vh - 220px) !important;
min-height: calc(100vh - 220px) !important;
}
.bw-editor-box .mce-listbox button {
min-width: 86px !important;
max-width: 120px !important;
}
}
/* v54 requested fixes: native editor fullscreen only, readable auth image text, rounded category expand/hide button */
.bw-editor-fullscreen-btn { display: none !important; }
.bw-editor-box .mce-toolbar .mce-btn,
.bw-editor-box .mce-toolbar .mce-btn button,
.bw-editor-box .quicktags-toolbar input.button.button-small {
border-radius: 2px !important;
}
.bw-editor-box .mce-toolbar .mce-btn:hover,
.bw-editor-box .quicktags-toolbar input.button.button-small:hover {
box-shadow: none !important;
}
.bw-editor-box .mce-toolbar,
.bw-editor-box .mce-flow-layout,
.bw-editor-box .quicktags-toolbar {
white-space: normal !important;
}
.bw-editor-box .mce-listbox button { min-width: 96px !important; max-width: 160px !important; }
.bw-auth-image::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(90deg, rgba(15,23,42,.86), rgba(15,23,42,.66)), linear-gradient(180deg, rgba(15,23,42,.42), rgba(15,23,42,.78)) !important;
pointer-events: none;
}
.bw-auth-image-overlay { z-index: 1 !important; background: transparent !important; }
.bw-auth-kicker,
.bw-auth-image-title,
.bw-auth-image-text {
color: #ffffff !important;
text-shadow: 0 2px 12px rgba(0,0,0,.75), 0 10px 30px rgba(0,0,0,.42) !important;
}
.bw-auth-kicker {
background: rgba(15,23,42,.55) !important;
border-color: rgba(255,255,255,.55) !important;
}
.bw-auth-image-text { color: rgba(255,255,255,.96) !important; }
.bw-category-more-toggle,
.bw-category-pills-wrap.is-expanded .bw-category-more-toggle,
button.bw-category-more-toggle {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
border-radius: 9999px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
}
.bw-category-pills-wrap.is-expanded .bw-category-more-icon { transform: rotate(180deg) !important; }
/* v55 custom rich text editor for Add Blog / Update Blog */
.bw-custom-rich-editor-wrap {
border: 1px solid #cbd5e1;
background: #fff;
}
.bw-rich-toolbar {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
padding: 8px;
border-bottom: 1px solid #cbd5e1;
background: #f8fafc;
}
.bw-rich-toolbar button,
.bw-rich-toolbar select,
.bw-rich-toolbar label {
min-height: 34px;
border: 1px solid #cbd5e1;
background: #fff;
color: #1f2937;
padding: 5px 8px;
border-radius: 6px;
font-size: 13px;
font-weight: 700;
line-height: 1.2;
}
.bw-rich-toolbar label {
display: inline-flex;
align-items: center;
gap: 6px;
}
.bw-rich-toolbar input[type="color"] {
width: 28px;
height: 24px;
padding: 0;
border: 0;
background: transparent;
}
.bw-custom-rich-editor {
min-height: 430px;
padding: 16px;
background: #fff;
color: #111827;
outline: none;
overflow: auto;
line-height: 1.7;
}
.bw-custom-rich-editor:empty:before {
content: "Write the full blog description here...";
color: #94a3b8;
}
.bw-hidden-rich-field {
position: absolute !important;
left: -99999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
}
.bw-editor-box.bw-editor-is-fullscreen .bw-custom-rich-editor-wrap {
display: flex;
flex-direction: column;
height: 100%;
}
.bw-editor-box.bw-editor-is-fullscreen .bw-custom-rich-editor {
flex: 1 1 auto;
min-height: 0;
height: auto;
}
.bw-editor-box.bw-editor-is-fullscreen .bw-rich-toolbar {
flex: 0 0 auto;
}
/* ---------------------------------------------------------
v56 requested fixes
- Icon-only rich editor controls
- White visible auth image text
- Cleaner manage category cards and dark modal buttons
- Remove shine/backside effect from category cards
--------------------------------------------------------- */
.bw-auth-image-overlay,
.bw-auth-image-overlay *,
.bw-auth-kicker,
.bw-auth-image-title,
.bw-auth-image-text {
color: #ffffff !important;
text-shadow: 0 3px 14px rgba(0,0,0,.65) !important;
}
.bw-auth-image-overlay {
background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(8,13,26,.78) 48%, rgba(5,10,20,.92) 100%) !important;
}
.bw-auth-kicker {
background: rgba(0,0,0,.34) !important;
border-color: rgba(255,255,255,.65) !important;
}
.bw-rich-toolbar button,
.bw-rich-toolbar .bw-open-editor-file {
width: 36px !important;
min-width: 36px !important;
height: 34px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 16px !important;
line-height: 1 !important;
border-radius: 8px !important;
}
.bw-rich-toolbar button strong,
.bw-rich-toolbar button em,
.bw-rich-toolbar button u,
.bw-rich-toolbar button s { line-height: 1 !important; }
.bw-rich-toolbar label {
gap: 5px !important;
white-space: nowrap !important;
}
.bw-open-editor-file {
width: 46px !important;
min-width: 46px !important;
justify-content: center !important;
font-size: 18px !important;
}
#bw-tab-categories .bw-category-grid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
gap: 18px !important;
}
#bw-tab-categories .bw-category-tile,
.bw-tab-panel .bw-category-tile {
position: relative !important;
overflow: hidden !important;
isolation: auto !important;
min-height: 104px !important;
border-radius: 20px !important;
background: linear-gradient(145deg, #183553 0%, #254b71 100%) !important;
border: 1px solid rgba(148,191,231,.34) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 24px rgba(2,6,23,.16) !important;
transform: none !important;
transition: border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
}
#bw-tab-categories .bw-category-tile:hover,
.bw-tab-panel .bw-category-tile:hover {
background: linear-gradient(145deg, #1d4167 0%, #2c5a86 100%) !important;
border-color: rgba(34,211,238,.58) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 24px rgba(2,6,23,.16) !important;
transform: none !important;
filter: none !important;
}
#bw-tab-categories .bw-category-tile::before,
#bw-tab-categories .bw-category-tile::after,
.bw-tab-panel .bw-category-tile::before,
.bw-tab-panel .bw-category-tile::after {
content: none !important;
display: none !important;
animation: none !important;
transition: none !important;
transform: none !important;
}
#bw-tab-categories .bw-category-tile-title,
.bw-tab-panel .bw-category-tile-title { color: #ffffff !important; text-shadow: none !important; }
#bw-tab-categories .bw-category-tile-count,
.bw-wrap .bw-category-tile-count {
background: #fff8bc !important;
color: #00865a !important;
box-shadow: none !important;
}
.bw-category-modal .bw-modal-box,
.bw-modal-box.bw-category-modal-box {
background: #f8fafc !important;
border: 1px solid #dbe4ef !important;
box-shadow: 0 28px 80px rgba(2,6,23,.28) !important;
}
.bw-category-modal .bw-cat-show-update,
.bw-category-modal button[type="submit"],
.bw-category-modal button.bg-rose-50,
.bw-category-modal .bw-cat-close,
#bw-confirm-modal .bw-modal-confirm,
#bw-confirm-modal .bw-modal-cancel {
background: #071329 !important;
border: 2px solid #0f2a4d !important;
color: #ffffff !important;
box-shadow: none !important;
text-shadow: none !important;
overflow: hidden !important;
}
.bw-category-modal .bw-cat-show-update:hover,
.bw-category-modal button[type="submit"]:hover,
.bw-category-modal button.bg-rose-50:hover,
.bw-category-modal .bw-cat-close:hover,
#bw-confirm-modal .bw-modal-confirm:hover,
#bw-confirm-modal .bw-modal-cancel:hover {
background: #102a5c !important;
color: #ffffff !important;
transform: none !important;
filter: none !important;
box-shadow: none !important;
}
.bw-category-modal .bw-cat-show-update::after,
.bw-category-modal button[type="submit"]::after,
.bw-category-modal button.bg-rose-50::after,
.bw-category-modal .bw-cat-close::after,
#bw-confirm-modal .bw-modal-confirm::after,
#bw-confirm-modal .bw-modal-cancel::after {
display: none !important;
content: none !important;
}
/* ---------------------------------------------------------
v57 requested fixes
- Restore the image upload button as a normal text button.
- Use the native WordPress rich text editor toolbar, not the custom icon toolbar.
- Change only category list card styling, with no card shine.
- Keep category/confirmation modal hover effects confined to the buttons.
--------------------------------------------------------- */
.bw-custom-rich-editor-wrap,
.bw-rich-toolbar,
.bw-custom-rich-editor,
.bw-hidden-rich-field {
display: none !important;
}
.bw-editor-box .wp-editor-wrap {
border: 1px solid #cbd5e1 !important;
border-radius: 0 !important;
overflow: visible !important;
background: #ffffff !important;
box-shadow: none !important;
}
.bw-editor-box .wp-editor-tools,
.bw-editor-box .mce-toolbar-grp,
.bw-editor-box .quicktags-toolbar {
background: #f8fafc !important;
}
.bw-editor-box iframe,
.bw-editor-box textarea.wp-editor-area {
min-height: 430px !important;
}
.bw-open-editor-file,
.bw-open-editor-file:hover,
.bw-open-editor-file:active {
width: auto !important;
min-width: 110px !important;
height: auto !important;
padding: .75rem 1.1rem !important;
border-radius: 12px !important;
font-size: .9rem !important;
line-height: 1.2 !important;
background: linear-gradient(rgb(5, 6, 45), rgb(5, 6, 45)) padding-box,
linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb) border-box !important;
border: 3px solid transparent !important;
color: #ffffff !important;
box-shadow: rgba(151, 65, 252, 0.20) 0 15px 30px -5px !important;
transform: none !important;
filter: none !important;
}
.bw-open-editor-file::before,
.bw-open-editor-file::after { display: none !important; content: none !important; }
#bw-tab-categories .bw-category-grid {
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
gap: 18px !important;
}
#bw-tab-categories .bw-category-tile,
.bw-tab-panel #bw-tab-categories .bw-category-tile {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
min-height: 92px !important;
padding: 20px 18px !important;
border-radius: 18px !important;
background: linear-gradient(145deg, #173250, #244b72) !important;
border: 1px solid rgba(148, 191, 231, .34) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 24px rgba(2,6,23,.14) !important;
color: #ffffff !important;
overflow: hidden !important;
transform: none !important;
filter: none !important;
transition: border-color .18s ease, background .18s ease !important;
}
#bw-tab-categories .bw-category-tile:hover,
.bw-tab-panel #bw-tab-categories .bw-category-tile:hover {
background: linear-gradient(145deg, #1d4167, #2a5987) !important;
border-color: rgba(34, 211, 238, .58) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 24px rgba(2,6,23,.14) !important;
transform: none !important;
filter: none !important;
}
#bw-tab-categories .bw-category-tile::before,
#bw-tab-categories .bw-category-tile::after {
display: none !important;
content: none !important;
animation: none !important;
}
#bw-tab-categories .bw-category-tile-title {
color: #ffffff !important;
font-size: 1.02rem !important;
line-height: 1.2 !important;
text-shadow: none !important;
}
#bw-tab-categories .bw-category-tile-count {
margin-top: 0 !important;
flex: 0 0 auto !important;
background: #fff8bc !important;
color: #007f5c !important;
border: 0 !important;
box-shadow: none !important;
}
.bw-category-modal .bw-modal-box,
.bw-modal-box.bw-category-modal-box,
#bw-confirm-modal .bw-modal-box {
overflow: hidden !important;
}
.bw-category-modal .bw-modal-box::before,
.bw-category-modal .bw-modal-box::after,
.bw-modal-box.bw-category-modal-box::before,
.bw-modal-box.bw-category-modal-box::after,
#bw-confirm-modal .bw-modal-box::before,
#bw-confirm-modal .bw-modal-box::after {
display: none !important;
content: none !important;
animation: none !important;
}
.bw-category-modal .bw-cat-show-update,
.bw-category-modal .bw-cat-update-box button[type="submit"] {
background: linear-gradient(135deg, #06172f, #12345f 55%, #1e4f9e) !important;
border: none !important;
color: #ffffff !important;
box-shadow: 0 12px 24px rgba(6,23,47,.22) !important;
}
#bw-confirm-modal .bw-modal-confirm {
background: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb) !important;
border: none !important;
color: #ffffff !important;
box-shadow: 0 12px 24px rgba(91,66,243,.24) !important;
}
.bw-category-modal .bw-cat-close,
.bw-category-modal .bw-cat-cancel,
.bw-category-modal .bw-cat-update-back,
#bw-confirm-modal .bw-modal-cancel {
background: #ffffff !important;
border: 1px solid #cbd5e1 !important;
color: #0f172a !important;
box-shadow: none !important;
}
.bw-category-modal .bw-cat-show-update:hover,
.bw-category-modal .bw-cat-update-box button[type="submit"]:hover,
#bw-confirm-modal .bw-modal-confirm:hover {
transform: translateY(-1px) !important;
filter: brightness(1.04) !important;
}
.bw-category-modal .bw-cat-close:hover,
.bw-category-modal .bw-cat-cancel:hover,
.bw-category-modal .bw-cat-update-back:hover,
#bw-confirm-modal .bw-modal-cancel:hover {
background: #f8fafc !important;
color: #0f172a !important;
transform: none !important;
filter: none !important;
box-shadow: none !important;
}
.bw-category-modal .bw-cat-show-update::before,
.bw-category-modal .bw-cat-show-update::after,
.bw-category-modal .bw-cat-update-box button[type="submit"]::before,
.bw-category-modal .bw-cat-update-box button[type="submit"]::after,
#bw-confirm-modal .bw-modal-confirm::before,
#bw-confirm-modal .bw-modal-confirm::after,
.bw-category-modal .bw-cat-close::before,
.bw-category-modal .bw-cat-close::after,
.bw-category-modal .bw-cat-cancel::before,
.bw-category-modal .bw-cat-cancel::after,
.bw-category-modal .bw-cat-update-back::before,
.bw-category-modal .bw-cat-update-back::after,
#bw-confirm-modal .bw-modal-cancel::before,
#bw-confirm-modal .bw-modal-cancel::after {
display: none !important;
content: none !important;
}
/* ---------------------------------------------------------
v58 final requested fixes
- Auth image text forced bright white
- Confirm/category modal buttons have clean gradients with no border glow
- Add Image button restored as text button
- WordPress editor displayed as a full native rich editor
--------------------------------------------------------- */
.bw-auth-shell .bw-auth-image .bw-auth-image-overlay,
.bw-auth-shell .bw-auth-image .bw-auth-image-overlay *,
.bw-auth-shell .bw-auth-image .bw-auth-kicker,
.bw-auth-shell .bw-auth-image .bw-auth-image-title,
.bw-auth-shell .bw-auth-image .bw-auth-image-text {
color: #ffffff !important;
opacity: 1 !important;
text-shadow: 0 3px 14px rgba(0,0,0,.88), 0 12px 34px rgba(0,0,0,.72) !important;
}
.bw-auth-shell .bw-auth-image::before {
background: linear-gradient(90deg, rgba(3,7,18,.72), rgba(3,7,18,.82)), linear-gradient(180deg, rgba(3,7,18,.18), rgba(3,7,18,.74)) !important;
}
.bw-auth-shell .bw-auth-image .bw-auth-image-overlay {
background: linear-gradient(180deg, rgba(3,7,18,.10) 0%, rgba(3,7,18,.34) 36%, rgba(3,7,18,.76) 100%) !important;
}
.bw-open-editor-file,
.bw-editor-actionbar .bw-open-editor-file {
width: auto !important;
min-width: 0 !important;
height: auto !important;
padding: .75rem 1.1rem !important;
font-size: .9rem !important;
line-height: 1.2 !important;
border-radius: 12px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(rgb(5,6,45), rgb(5,6,45)) padding-box,
linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb) border-box !important;
border: 3px solid transparent !important;
color: #ffffff !important;
box-shadow: rgba(151,65,252,.20) 0 15px 30px -5px !important;
}
.bw-open-editor-file::before,
.bw-open-editor-file::after { display: none !important; content: none !important; }
.bw-editor-box .wp-editor-wrap,
.bw-editor-box .wp-editor-container {
width: 100% !important;
max-width: 100% !important;
}
.bw-editor-box .mce-toolbar,
.bw-editor-box .mce-flow-layout,
.bw-editor-box .quicktags-toolbar {
white-space: normal !important;
}
.bw-editor-box .mce-toolbar .mce-btn button {
min-width: 28px !important;
}
.bw-editor-box .mce-listbox button {
min-width: 105px !important;
max-width: 190px !important;
}
.bw-editor-box iframe,
.bw-editor-box textarea.wp-editor-area {
min-height: 500px !important;
background: #ffffff !important;
}
.bw-editor-box .mce-fullscreen iframe,
.bw-editor-box .mce-fullscreen textarea.wp-editor-area {
min-height: calc(100vh - 150px) !important;
}
#bw-confirm-modal .bw-modal-confirm,
#bw-confirm-modal button.bw-modal-confirm {
background: linear-gradient(135deg, #ffb347 0%, #ff6b4a 46%, #12c8c8 100%) !important;
background-clip: padding-box !important;
border: 0 !important;
outline: 0 !important;
color: #ffffff !important;
box-shadow: 0 12px 26px rgba(255,107,74,.22) !important;
text-shadow: none !important;
}
#bw-confirm-modal .bw-modal-confirm:hover,
#bw-confirm-modal button.bw-modal-confirm:hover {
background: linear-gradient(135deg, #ffb347 0%, #ff6b4a 46%, #12c8c8 100%) !important;
border: 0 !important;
outline: 0 !important;
color: #ffffff !important;
transform: translateY(-1px) !important;
filter: brightness(1.03) !important;
}
.bw-category-modal .bw-cat-show-update,
.bw-category-modal .bw-cat-update-box button[type="submit"] {
background: linear-gradient(135deg, #071329 0%, #12345f 58%, #1e4f9e 100%) !important;
border: 0 !important;
outline: 0 !important;
color: #ffffff !important;
box-shadow: 0 12px 26px rgba(15,42,77,.24) !important;
}
#bw-confirm-modal .bw-modal-cancel,
.bw-category-modal .bw-cat-close,
.bw-category-modal .bw-cat-cancel,
.bw-category-modal .bw-cat-update-back {
position: relative !important;
background: #ffffff !important;
border: 1px solid #cbd5e1 !important;
color: #0f172a !important;
box-shadow: none !important;
overflow: hidden !important;
}
#bw-confirm-modal .bw-modal-cancel:hover,
.bw-category-modal .bw-cat-close:hover,
.bw-category-modal .bw-cat-cancel:hover,
.bw-category-modal .bw-cat-update-back:hover {
background: #f8fafc !important;
color: #0f172a !important;
box-shadow: none !important;
transform: none !important;
filter: none !important;
}
#bw-confirm-modal .bw-modal-box::before,
#bw-confirm-modal .bw-modal-box::after,
.bw-category-modal .bw-modal-box::before,
.bw-category-modal .bw-modal-box::after,
.bw-modal-box.bw-category-modal-box::before,
.bw-modal-box.bw-category-modal-box::after,
#bw-confirm-modal .bw-modal-confirm::before,
#bw-confirm-modal .bw-modal-confirm::after,
#bw-confirm-modal .bw-modal-cancel::before,
#bw-confirm-modal .bw-modal-cancel::after,
.bw-category-modal .bw-cat-close::before,
.bw-category-modal .bw-cat-close::after,
.bw-category-modal .bw-cat-cancel::before,
.bw-category-modal .bw-cat-cancel::after,
.bw-category-modal .bw-cat-update-back::before,
.bw-category-modal .bw-cat-update-back::after,
.bw-category-modal .bw-cat-show-update::before,
.bw-category-modal .bw-cat-show-update::after,
.bw-category-modal .bw-cat-update-box button[type="submit"]::before,
.bw-category-modal .bw-cat-update-box button[type="submit"]::after {
display: none !important;
content: none !important;
animation: none !important;
}
/* ---------------------------------------------------------
v59 requested layout fixes
- Confirmation modal close button moved to true top-right corner
- Confirmation buttons aligned cleanly and evenly
- Auth/login image remains visible with transparent overlay
- Auth content sits above the image with readable contrast
--------------------------------------------------------- */
#bw-confirm-modal .bw-modal-box,
#bw-confirm-modal .bw-confirm-box {
position: relative !important;
overflow: visible !important;
padding: clamp(2rem, 5vw, 3.1rem) clamp(1.5rem, 5vw, 3rem) 2rem !important;
}
#bw-confirm-modal .bw-confirm-x,
#bw-confirm-modal button.bw-confirm-x,
#bw-confirm-modal .bw-modal-cancel.bw-confirm-x {
position: absolute !important;
top: 14px !important;
right: 14px !important;
left: auto !important;
bottom: auto !important;
transform: none !important;
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
min-height: 38px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 12px !important;
background: rgba(255,255,255,.92) !important;
border: 1px solid rgba(148,163,184,.55) !important;
color: #0f172a !important;
font-size: 1.55rem !important;
line-height: 1 !important;
font-weight: 950 !important;
box-shadow: 0 8px 22px rgba(15,23,42,.10) !important;
z-index: 20 !important;
}
#bw-confirm-modal .bw-confirm-x:hover,
#bw-confirm-modal button.bw-confirm-x:hover {
background: #ffffff !important;
color: #0f172a !important;
transform: none !important;
filter: none !important;
}
#bw-confirm-modal .bw-confirm-actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
width: min(100%, 310px) !important;
margin: 1.6rem auto 0 !important;
align-items: stretch !important;
}
#bw-confirm-modal .bw-confirm-actions .bw-modal-cancel,
#bw-confirm-modal .bw-confirm-actions .bw-modal-confirm {
width: 100% !important;
min-width: 0 !important;
min-height: 52px !important;
border-radius: 12px !important;
padding: .85rem 1rem !important;
font-size: 1rem !important;
font-weight: 950 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
#bw-confirm-modal .bw-confirm-actions .bw-modal-confirm span {
color: inherit !important;
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
@media (max-width: 480px) {
#bw-confirm-modal .bw-confirm-actions {
grid-template-columns: 1fr !important;
width: 100% !important;
}
}
.bw-auth-shell {
overflow: hidden !important;
}
.bw-auth-shell .bw-auth-image {
position: relative !important;
isolation: isolate !important;
background-image:
linear-gradient(135deg, rgba(7,19,41,.18), rgba(7,19,41,.08)),
url("../image/login.png") !important;
background-size: cover !important;
background-position: center !important;
}
.bw-auth-shell.is-signup .bw-auth-image {
background-image:
linear-gradient(135deg, rgba(49,46,129,.18), rgba(236,72,153,.08)),
url("../image/create.png") !important;
}
.bw-auth-shell .bw-auth-image::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
background:
linear-gradient(90deg, rgba(3,7,18,.42) 0%, rgba(3,7,18,.18) 48%, rgba(3,7,18,.38) 100%),
linear-gradient(180deg, rgba(3,7,18,.12) 0%, rgba(3,7,18,.18) 45%, rgba(3,7,18,.48) 100%) !important;
pointer-events: none !important;
}
.bw-auth-shell .bw-auth-image .bw-auth-image-overlay {
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
align-items: flex-start !important;
padding: clamp(1.5rem, 4vw, 2.6rem) !important;
background: rgba(3,7,18,.10) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.bw-auth-shell .bw-auth-image .bw-auth-kicker,
.bw-auth-shell .bw-auth-image .bw-auth-image-title,
.bw-auth-shell .bw-auth-image .bw-auth-image-text {
position: relative !important;
z-index: 3 !important;
color: #ffffff !important;
opacity: 1 !important;
text-shadow: 0 2px 10px rgba(0,0,0,.72), 0 10px 28px rgba(0,0,0,.45) !important;
}
.bw-auth-shell .bw-auth-image .bw-auth-kicker {
background: rgba(3,7,18,.40) !important;
border-color: rgba(255,255,255,.72) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
}
.bw-auth-shell .bw-auth-image .bw-auth-image-title {
max-width: 520px !important;
color: #ffffff !important;
}
.bw-auth-shell .bw-auth-image .bw-auth-image-text {
max-width: 520px !important;
color: rgba(255,255,255,.94) !important;
}
/* ---------------------------------------------------------
v59.2 rich editor formatting toolbar update
- Full formatting controls for Add Blog and Update Blog description editors
- Active/hover toolbar icons keep dark color; only background/border changes
--------------------------------------------------------- */
.bw-editor-box .mce-toolbar .mce-btn,
.bw-edit-modal-box .mce-toolbar .mce-btn,
.bw-editor-box .quicktags-toolbar input.button.button-small,
.bw-edit-modal-box .quicktags-toolbar input.button.button-small {
color: #1e293b !important;
background: transparent !important;
border: 1px solid transparent !important;
box-shadow: none !important;
}
.bw-editor-box .mce-toolbar .mce-btn button,
.bw-edit-modal-box .mce-toolbar .mce-btn button,
.bw-editor-box .mce-toolbar .mce-btn .mce-ico,
.bw-edit-modal-box .mce-toolbar .mce-btn .mce-ico,
.bw-editor-box .mce-toolbar .mce-btn .mce-txt,
.bw-edit-modal-box .mce-toolbar .mce-btn .mce-txt,
.bw-editor-box .quicktags-toolbar input.button.button-small,
.bw-edit-modal-box .quicktags-toolbar input.button.button-small {
color: #1e293b !important;
text-shadow: none !important;
}
.bw-editor-box .mce-toolbar .mce-btn:hover,
.bw-editor-box .mce-toolbar .mce-btn:focus,
.bw-editor-box .mce-toolbar .mce-btn:active,
.bw-editor-box .mce-toolbar .mce-btn.mce-active,
.bw-editor-box .mce-toolbar .mce-btn.mce-active:hover,
.bw-editor-box .mce-toolbar .mce-btn.mce-active:focus,
.bw-edit-modal-box .mce-toolbar .mce-btn:hover,
.bw-edit-modal-box .mce-toolbar .mce-btn:focus,
.bw-edit-modal-box .mce-toolbar .mce-btn:active,
.bw-edit-modal-box .mce-toolbar .mce-btn.mce-active,
.bw-edit-modal-box .mce-toolbar .mce-btn.mce-active:hover,
.bw-edit-modal-box .mce-toolbar .mce-btn.mce-active:focus,
.bw-editor-box .quicktags-toolbar input.button.button-small:hover,
.bw-editor-box .quicktags-toolbar input.button.button-small:focus,
.bw-editor-box .quicktags-toolbar input.button.button-small:active,
.bw-edit-modal-box .quicktags-toolbar input.button.button-small:hover,
.bw-edit-modal-box .quicktags-toolbar input.button.button-small:focus,
.bw-edit-modal-box .quicktags-toolbar input.button.button-small:active {
background: rgba(37, 99, 235, .08) !important;
border-color: rgba(37, 99, 235, .38) !important;
color: #1e293b !important;
box-shadow: 0 0 0 1px rgba(37, 99, 235, .10) !important;
filter: none !important;
transform: none !important;
}
.bw-editor-box .mce-toolbar .mce-btn:hover button,
.bw-editor-box .mce-toolbar .mce-btn:focus button,
.bw-editor-box .mce-toolbar .mce-btn:active button,
.bw-editor-box .mce-toolbar .mce-btn.mce-active button,
.bw-editor-box .mce-toolbar .mce-btn:hover .mce-ico,
.bw-editor-box .mce-toolbar .mce-btn:focus .mce-ico,
.bw-editor-box .mce-toolbar .mce-btn:active .mce-ico,
.bw-editor-box .mce-toolbar .mce-btn.mce-active .mce-ico,
.bw-editor-box .mce-toolbar .mce-btn:hover .mce-txt,
.bw-editor-box .mce-toolbar .mce-btn:focus .mce-txt,
.bw-editor-box .mce-toolbar .mce-btn:active .mce-txt,
.bw-editor-box .mce-toolbar .mce-btn.mce-active .mce-txt,
.bw-edit-modal-box .mce-toolbar .mce-btn:hover button,
.bw-edit-modal-box .mce-toolbar .mce-btn:focus button,
.bw-edit-modal-box .mce-toolbar .mce-btn:active button,
.bw-edit-modal-box .mce-toolbar .mce-btn.mce-active button,
.bw-edit-modal-box .mce-toolbar .mce-btn:hover .mce-ico,
.bw-edit-modal-box .mce-toolbar .mce-btn:focus .mce-ico,
.bw-edit-modal-box .mce-toolbar .mce-btn:active .mce-ico,
.bw-edit-modal-box .mce-toolbar .mce-btn.mce-active .mce-ico,
.bw-edit-modal-box .mce-toolbar .mce-btn:hover .mce-txt,
.bw-edit-modal-box .mce-toolbar .mce-btn:focus .mce-txt,
.bw-edit-modal-box .mce-toolbar .mce-btn:active .mce-txt,
.bw-edit-modal-box .mce-toolbar .mce-btn.mce-active .mce-txt {
color: #1e293b !important;
text-shadow: none !important;
}
.bw-editor-box .mce-toolbar .mce-btn button,
.bw-edit-modal-box .mce-toolbar .mce-btn button {
min-width: 30px !important;
height: 32px !important;
padding: 4px 7px !important;
}
.bw-editor-box .mce-listbox button,
.bw-edit-modal-box .mce-listbox button {
min-width: 118px !important;
max-width: 210px !important;
}
/* ---------------------------------------------------------
v59.3 editor toolbar polish
- Always-visible Show/Hide more formatting button outside TinyMCE
- Dropdown menus scroll when tall
- Clean single dropdown caret, no double arrow look
- Active/hover icons stay dark; only background/border changes
--------------------------------------------------------- */
.bw-toggle-formatting {
background: #ffffff !important;
color: #1e293b !important;
border: 1px solid rgba(148, 163, 184, .55) !important;
box-shadow: 0 8px 18px rgba(15, 23, 42, .06) !important;
}
.bw-toggle-formatting:hover,
.bw-toggle-formatting:focus,
.bw-toggle-formatting[aria-expanded="true"] {
color: #1e293b !important;
background: rgba(37, 99, 235, .08) !important;
border-color: rgba(37, 99, 235, .38) !important;
box-shadow: 0 0 0 1px rgba(37, 99, 235, .10) !important;
transform: none !important;
}
.bw-editor-box.bw-formatting-collapsed .mce-toolbar-grp > .mce-container-body > .mce-toolbar:nth-of-type(n+2),
.bw-editor-box.bw-formatting-collapsed .mce-toolbar-grp .mce-stack-layout > .mce-toolbar:nth-of-type(n+2),
.bw-editor-box.bw-formatting-collapsed .mce-toolbar-grp .mce-toolbar:nth-of-type(n+2) {
display: none !important;
}
.bw-editor-box.bw-formatting-expanded .mce-toolbar-grp > .mce-container-body > .mce-toolbar,
.bw-editor-box.bw-formatting-expanded .mce-toolbar-grp .mce-stack-layout > .mce-toolbar,
.bw-editor-box.bw-formatting-expanded .mce-toolbar-grp .mce-toolbar {
display: block !important;
}
.bw-editor-box .mce-toolbar-grp,
.bw-edit-modal-box .mce-toolbar-grp {
overflow: visible !important;
}
.mce-floatpanel.mce-menu,
.mce-menu,
.mce-menu.mce-in,
.mce-floatpanel[role="application"] {
max-height: 320px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
.mce-floatpanel.mce-menu .mce-container-body,
.mce-menu .mce-container-body {
max-height: 318px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
.mce-menu .mce-menu-item,
.mce-menu .mce-menu-item .mce-text {
white-space: nowrap !important;
}
.bw-editor-box .mce-listbox,
.bw-edit-modal-box .mce-listbox {
position: relative !important;
}
.bw-editor-box .mce-listbox button,
.bw-edit-modal-box .mce-listbox button {
position: relative !important;
padding-right: 24px !important;
background-image: none !important;
}
.bw-editor-box .mce-listbox .mce-caret,
.bw-edit-modal-box .mce-listbox .mce-caret {
position: absolute !important;
right: 9px !important;
top: 50% !important;
width: 0 !important;
height: 0 !important;
margin: -2px 0 0 0 !important;
border-top: 5px solid #475569 !important;
border-left: 4px solid transparent !important;
border-right: 4px solid transparent !important;
border-bottom: 0 !important;
background: transparent !important;
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
}
.bw-editor-box .mce-listbox .mce-caret::before,
.bw-editor-box .mce-listbox .mce-caret::after,
.bw-edit-modal-box .mce-listbox .mce-caret::before,
.bw-edit-modal-box .mce-listbox .mce-caret::after,
.bw-editor-box .mce-listbox button::before,
.bw-editor-box .mce-listbox button::after,
.bw-edit-modal-box .mce-listbox button::before,
.bw-edit-modal-box .mce-listbox button::after {
display: none !important;
content: none !important;
}
.bw-editor-box .mce-toolbar .mce-btn:hover button,
.bw-editor-box .mce-toolbar .mce-btn:focus button,
.bw-editor-box .mce-toolbar .mce-btn:active button,
.bw-editor-box .mce-toolbar .mce-btn.mce-active button,
.bw-editor-box .mce-toolbar .mce-btn:hover .mce-ico,
.bw-editor-box .mce-toolbar .mce-btn:focus .mce-ico,
.bw-editor-box .mce-toolbar .mce-btn:active .mce-ico,
.bw-editor-box .mce-toolbar .mce-btn.mce-active .mce-ico,
.bw-editor-box .mce-toolbar .mce-btn:hover .mce-txt,
.bw-editor-box .mce-toolbar .mce-btn:focus .mce-txt,
.bw-editor-box .mce-toolbar .mce-btn:active .mce-txt,
.bw-editor-box .mce-toolbar .mce-btn.mce-active .mce-txt,
.bw-edit-modal-box .mce-toolbar .mce-btn:hover button,
.bw-edit-modal-box .mce-toolbar .mce-btn:focus button,
.bw-edit-modal-box .mce-toolbar .mce-btn:active button,
.bw-edit-modal-box .mce-toolbar .mce-btn.mce-active button,
.bw-edit-modal-box .mce-toolbar .mce-btn:hover .mce-ico,
.bw-edit-modal-box .mce-toolbar .mce-btn:focus .mce-ico,
.bw-edit-modal-box .mce-toolbar .mce-btn:active .mce-ico,
.bw-edit-modal-box .mce-toolbar .mce-btn.mce-active .mce-ico,
.bw-edit-modal-box .mce-toolbar .mce-btn:hover .mce-txt,
.bw-edit-modal-box .mce-toolbar .mce-btn:focus .mce-txt,
.bw-edit-modal-box .mce-toolbar .mce-btn:active .mce-txt,
.bw-edit-modal-box .mce-toolbar .mce-btn.mce-active .mce-txt {
color: #1e293b !important;
text-shadow: none !important;
}
/* v59.4 editor dropdown and toggle placement polish */
.bw-editor-actionbar {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.bw-editor-actionbar .bw-toggle-formatting {
margin-left: auto !important;
flex: 0 0 auto !important;
}
.bw-editor-box .mce-listbox button,
.bw-edit-modal-box .mce-listbox button {
padding-right: 8px !important;
}
.bw-editor-box .mce-listbox .mce-caret,
.bw-edit-modal-box .mce-listbox .mce-caret,
.bw-editor-box .mce-caret,
.bw-edit-modal-box .mce-caret,
.mce-caret {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
color: transparent !important;
background: transparent !important;
}
.bw-editor-box .mce-listbox button::before,
.bw-editor-box .mce-listbox button::after,
.bw-edit-modal-box .mce-listbox button::before,
.bw-edit-modal-box .mce-listbox button::after,
.bw-editor-box .mce-btn button::before,
.bw-editor-box .mce-btn button::after,
.bw-edit-modal-box .mce-btn button::before,
.bw-edit-modal-box .mce-btn button::after {
display: none !important;
content: none !important;
}
.bw-editor-box .mce-listbox .mce-txt,
.bw-edit-modal-box .mce-listbox .mce-txt {
padding-right: 0 !important;
margin-right: 0 !important;
}
.mce-floatpanel.mce-menu,
.mce-menu,
.mce-menu.mce-in,
.mce-floatpanel[role="application"],
.mce-container.mce-panel.mce-floatpanel {
max-height: min(360px, 70vh) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
.mce-floatpanel.mce-menu .mce-container-body,
.mce-menu .mce-container-body,
.mce-floatpanel .mce-container-body {
max-height: min(358px, 70vh) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
.bw-editor-box .mce-listbox button,
.bw-edit-modal-box .mce-listbox button {
min-width: 92px !important;
max-width: 190px !important;
}
.bw-editor-box .mce-toolbar .mce-btn:hover button,
.bw-editor-box .mce-toolbar .mce-btn:focus button,
.bw-editor-box .mce-toolbar .mce-btn:active button,
.bw-editor-box .mce-toolbar .mce-btn.mce-active button,
.bw-edit-modal-box .mce-toolbar .mce-btn:hover button,
.bw-edit-modal-box .mce-toolbar .mce-btn:focus button,
.bw-edit-modal-box .mce-toolbar .mce-btn:active button,
.bw-edit-modal-box .mce-toolbar .mce-btn.mce-active button {
color: #1e293b !important;
}
/* v59.5 final rich editor polish
- All toolbar rows stay visible; show/hide formatting button removed from markup
- TinyMCE dropdown buttons use one clean down arrow only
- Long dropdown menus scroll inside the viewport
- Active image-edit toolbar icons remain black/dark
*/
.bw-editor-box.bw-formatting-expanded .mce-toolbar-grp .mce-toolbar,
.bw-editor-box .mce-toolbar-grp .mce-toolbar {
display: block !important;
}
.bw-toggle-formatting {
display: none !important;
}
.bw-editor-box .mce-listbox,
.bw-edit-modal-box .mce-listbox {
position: relative !important;
}
.bw-editor-box .mce-listbox button,
.bw-edit-modal-box .mce-listbox button {
position: relative !important;
min-width: 104px !important;
max-width: 220px !important;
padding-right: 24px !important;
background-image: none !important;
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
}
.bw-editor-box .mce-listbox .mce-caret,
.bw-edit-modal-box .mce-listbox .mce-caret,
.mce-listbox .mce-caret {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
border: 0 !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.bw-editor-box .mce-listbox button::before,
.bw-edit-modal-box .mce-listbox button::before,
.bw-editor-box .mce-btn button::before,
.bw-edit-modal-box .mce-btn button::before {
display: none !important;
content: none !important;
}
.bw-editor-box .mce-listbox button::after,
.bw-edit-modal-box .mce-listbox button::after {
content: "\25BE" !important;
display: block !important;
position: absolute !important;
right: 8px !important;
top: 50% !important;
transform: translateY(-50%) !important;
color: #334155 !important;
font-size: 12px !important;
line-height: 1 !important;
width: auto !important;
height: auto !important;
border: 0 !important;
background: transparent !important;
opacity: 1 !important;
}
.bw-editor-box .mce-listbox .mce-txt,
.bw-edit-modal-box .mce-listbox .mce-txt {
padding-right: 10px !important;
}
.mce-floatpanel.mce-menu,
.mce-menu,
.mce-menu.mce-in,
.mce-container.mce-panel.mce-floatpanel,
.mce-floatpanel[role="application"] {
max-height: min(380px, 72vh) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
.mce-floatpanel.mce-menu .mce-container-body,
.mce-menu .mce-container-body,
.mce-floatpanel .mce-container-body {
max-height: min(378px, 72vh) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
.mce-floatpanel .mce-menu-item,
.mce-menu .mce-menu-item,
.mce-menu .mce-menu-item .mce-text {
white-space: nowrap !important;
}
.mce-wpeditimage-toolbar .mce-btn,
.mce-wpeditimage-toolbar .mce-btn:hover,
.mce-wpeditimage-toolbar .mce-btn:focus,
.mce-wpeditimage-toolbar .mce-btn:active,
.mce-wpeditimage-toolbar .mce-btn.mce-active,
.mce-wpeditimage-toolbar .mce-btn.mce-active:hover,
.mce-wpeditimage-toolbar .mce-btn.mce-active:focus {
color: #111827 !important;
background: #ffffff !important;
border-color: #cbd5e1 !important;
box-shadow: none !important;
}
.mce-wpeditimage-toolbar .mce-btn button,
.mce-wpeditimage-toolbar .mce-btn .mce-ico,
.mce-wpeditimage-toolbar .mce-btn .mce-txt,
.mce-wpeditimage-toolbar .mce-btn:hover button,
.mce-wpeditimage-toolbar .mce-btn:hover .mce-ico,
.mce-wpeditimage-toolbar .mce-btn:hover .mce-txt,
.mce-wpeditimage-toolbar .mce-btn:active button,
.mce-wpeditimage-toolbar .mce-btn:active .mce-ico,
.mce-wpeditimage-toolbar .mce-btn:active .mce-txt,
.mce-wpeditimage-toolbar .mce-btn.mce-active button,
.mce-wpeditimage-toolbar .mce-btn.mce-active .mce-ico,
.mce-wpeditimage-toolbar .mce-btn.mce-active .mce-txt {
color: #111827 !important;
text-shadow: none !important;
filter: none !important;
}
.bw-editor-badge-red{background:#fee2e2;color:#991b1b;}
.bw-editor-badge-purple{background:#ede9fe;color:#5b21b6;}
.bw-editor-callout-block{border-left:6px solid #2563eb;background:#eff6ff;border-radius:14px;padding:1rem 1.2rem;margin:1rem 0;}
.bw-editor-dashed-block{border:2px dashed #94a3b8;border-radius:14px;padding:1rem;margin:1rem 0;background:#f8fafc;}
/* v59.6 requested visual updates: search gradient, admin action text, category heading copy, home shadows */
.bw-hero .bw-gradient-btn,
.bw-wrap .bw-hero .bw-gradient-btn,
.bw-hero form button.bw-gradient-btn {
background: linear-gradient(135deg, #e11d48 0%, #b91c1c 44%, #0b2447 100%) !important;
color: #ffffff !important;
border: 0 !important;
box-shadow: 0 15px 30px rgba(151, 65, 252, 0.20), 0 10px 24px rgba(11, 36, 71, 0.22) !important;
text-shadow: 0 1px 2px rgba(0,0,0,.24) !important;
}
.bw-hero .bw-gradient-btn:hover,
.bw-wrap .bw-hero .bw-gradient-btn:hover,
.bw-hero form button.bw-gradient-btn:hover {
background: linear-gradient(135deg, #f43f5e 0%, #dc2626 42%, #0f2f5f 100%) !important;
color: #ffffff !important;
box-shadow: 0 18px 38px rgba(151, 65, 252, 0.24), 0 12px 28px rgba(11, 36, 71, 0.26) !important;
}
.bw-dashboard .bw-action-btn,
.bw-dashboard .bw-action-btn:visited,
.bw-dashboard .bw-action-view,
.bw-dashboard .bw-action-update,
.bw-dashboard .bw-action-delete,
.bw-dashboard .bw-action-view:visited,
.bw-dashboard .bw-action-update:visited,
.bw-dashboard .bw-action-delete:visited,
.bw-admin-section .bw-action-btn,
.bw-admin-section .bw-action-btn:visited,
.bw-admin-section .bw-action-view,
.bw-admin-section .bw-action-update,
.bw-admin-section .bw-action-delete,
.bw-admin-section .bw-action-view:visited,
.bw-admin-section .bw-action-update:visited,
.bw-admin-section .bw-action-delete:visited {
color: #ffffff !important;
}
.bw-dashboard .bw-action-btn *,
.bw-admin-section .bw-action-btn * {
color: #ffffff !important;
}
.bw-dashboard .bw-action-view,
.bw-admin-section .bw-action-view { background: #1d4ed8 !important; border-color: #1d4ed8 !important; }
.bw-dashboard .bw-action-update,
.bw-admin-section .bw-action-update { background: #0f172a !important; border-color: #0f172a !important; }
.bw-dashboard .bw-action-delete,
.bw-admin-section .bw-action-delete { background: #e11d48 !important; border-color: #e11d48 !important; }
.bw-dashboard .bw-action-approve,
.bw-admin-section .bw-action-approve { color: #ffffff !important; }
.bw-filter-box p:has(+ h2),
.bw-filter-box h2 + p,
section.bw-filter-box > .mb-6 > h2 + p {
max-width: none !important;
}
section.bw-filter-box > .mb-6 > h2 + p {
white-space: nowrap !important;
}
@media (max-width: 768px) {
section.bw-filter-box > .mb-6 > h2 + p { white-space: normal !important; }
}
.bw-home-main .bw-filter-box,
.bw-home-main .bw-post-row,
.bw-home-main article,
.bw-home-main .bw-soft-card {
box-shadow: 0 15px 30px rgba(151, 65, 252, 0.20), 0 10px 24px rgba(11, 36, 71, 0.12) !important;
}
/* .bw-home-main .bw-post-row:hover,
.bw-home-main article:hover,
.bw-home-main .bw-soft-card:hover {
box-shadow: 0 18px 38px rgba(151, 65, 252, 0.24), 0 12px 28px rgba(11, 36, 71, 0.16) !important;
} */
/* v59.7 requested: fit category text, red-to-navy search button, image-only shadows, varied blog rows */
.bw-category-manager-desc {
max-width: 100% !important;
white-space: normal !important;
display: block !important;
font-size: clamp(11px, .9vw, 13px) !important;
line-height: 1.25 !important;
letter-spacing: .01em !important;
overflow-wrap: break-word !important;
}
.bw-admin-section section.bw-filter-box > .mb-6 h2 + p,
.bw-dashboard section.bw-filter-box > .mb-6 h2 + p,
section.bw-filter-box > .mb-6 h2 + p {
font-size: clamp(12px, 1.08vw, 16px) !important;
line-height: 1.55 !important;
letter-spacing: .12em !important;
max-width: none !important;
white-space: nowrap !important;
}
@media (max-width: 980px) {
.bw-admin-section section.bw-filter-box > .mb-6 h2 + p,
.bw-dashboard section.bw-filter-box > .mb-6 h2 + p,
section.bw-filter-box > .mb-6 h2 + p {
white-space: normal !important;
letter-spacing: .08em !important;
}
}
/* .bw-hero form button.bw-gradient-btn,
.bw-wrap .bw-hero form button.bw-gradient-btn,
.bw-home-main form button.bw-gradient-btn,
.bw-wrap form button.bw-gradient-btn[type="submit"]:not(.tox-tbtn):not(.bw-category-more-toggle) {
background: linear-gradient(135deg, #ef4444 0%, #b91c1c 42%, #071a38 100%) !important;
background-color: #071a38 !important;
color: #ffffff !important;
border: 0 !important;
box-shadow: 0 15px 30px rgba(239, 68, 68, .22), 0 12px 24px rgba(7, 26, 56, .26) !important;
text-shadow: 0 1px 2px rgba(0,0,0,.28) !important;
}
.bw-hero form button.bw-gradient-btn:hover,
.bw-wrap .bw-hero form button.bw-gradient-btn:hover,
.bw-home-main form button.bw-gradient-btn:hover,
.bw-wrap form button.bw-gradient-btn[type="submit"]:not(.tox-tbtn):not(.bw-category-more-toggle):hover {
background: linear-gradient(135deg, #f87171 0%, #dc2626 44%, #0b2447 100%) !important;
color: #ffffff !important;
box-shadow: 0 18px 38px rgba(239, 68, 68, .26), 0 14px 30px rgba(7, 26, 56, .30) !important;
} */
/* New Button style */
/* --- UPDATED BUTTON STYLE --- */
.bw-hero form button.bw-gradient-btn,
.bw-wrap .bw-hero form button.bw-gradient-btn,
.bw-home-main form button.bw-gradient-btn,
.bw-wrap form button.bw-gradient-btn[type="submit"]:not(.tox-tbtn):not(.bw-category-more-toggle) {
/* Layout & Typography */
font-size: 18px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
font-weight: 1000 !important;
padding: 0.7em 2em !important;
text-align: center !important;
display: inline-block !important;
position: relative !important;
z-index: 1 !important;
transition: 0.3s ease all !important;
cursor: pointer !important;
/* Colors (Red/Navy Theme) */
background: rgba(2, 0, 130, .12) !important;
color: #ffffff !important;
border: 4px solid #ffffff !important;
border-radius: 10px !important;
/* Shadow & Effects */
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255,255,255,.12) !important;
text-shadow: none !important;
backdrop-filter: blur(2px) !important;
text-decoration: none !important;
}
/* The Sliding Background Fill */
/* .bw-hero form button.bw-gradient-btn::before,
.bw-wrap .bw-hero form button.bw-gradient-btn::before,
.bw-home-main form button.bw-gradient-btn::before,
.bw-wrap form button.bw-gradient-btn[type="submit"]:not(.tox-tbtn):not(.bw-category-more-toggle)::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 50% !important;
right: 50% !important;
bottom: 0 !important;
opacity: 0 !important;
background-color: #020082 !important;
z-index: -1 !important;
transition: 0.5s all ease !important;
} */
/* Hover States */
/* .bw-hero form button.bw-gradient-btn:hover,
.bw-wrap .bw-hero form button.bw-gradient-btn:hover,
.bw-home-main form button.bw-gradient-btn:hover,
.bw-wrap form button.bw-gradient-btn[type="submit"]:not(.tox-tbtn):not(.bw-category-more-toggle):hover {
color: #ffffff !important;
border-color: #020082 !important;
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22), 0 6px 18px rgba(186, 6, 0, .18) !important;
} */
/* Trigger the fill animation */
/* .bw-hero form button.bw-gradient-btn:hover::before,
.bw-wrap .bw-hero form button.bw-gradient-btn:hover::before,
.bw-home-main form button.bw-gradient-btn:hover::before,
.bw-wrap form button.bw-gradient-btn[type="submit"]:not(.tox-tbtn):not(.bw-category-more-toggle):hover::before {
left: 0 !important;
right: 0 !important;
opacity: 1 !important;
} */
/* Click Animation */
.bw-hero form button.bw-gradient-btn:active,
.bw-wrap .bw-hero form button.bw-gradient-btn:active,
.bw-home-main form button.bw-gradient-btn:active,
.bw-wrap form button.bw-gradient-btn[type="submit"]:not(.tox-tbtn):not(.bw-category-more-toggle):active {
transform: scale(0.9) !important;
}
/* */
/* Home page cards: use one consistent soft shadow language across sections. */
.bw-home-main .bw-filter-box,
.bw-home-main + .bw-sidebar .bw-soft-card,
.bw-layout .bw-sidebar .bw-soft-card {
box-shadow: 0 22px 48px rgba(15, 23, 42, .12), 0 10px 28px rgba(99, 102, 241, .10) !important;
}
.bw-home-main .bw-post-row,
.bw-home-main article.bw-post-row {
box-shadow: none !important;
}
.bw-home-main .bw-post-image {
border-radius: 22px !important;
border: 1px solid rgba(255,255,255,.92) !important;
outline: 1px solid rgba(15, 23, 42, .05) !important;
outline-offset: -1px !important;
box-shadow: none !important;
transform: scale(1) translateY(0) !important;
transform-origin: center center !important;
display: block !important;
width: 100% !important;
transition: transform .34s cubic-bezier(.22, 1, .36, 1), filter .34s ease !important;
}
.bw-home-main .bw-post-image-wrap {
position: relative !important;
overflow: hidden !important;
background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(241,245,249,.88)) !important;
border: 1px solid rgba(255, 255, 255, .88) !important;
box-shadow: 0 22px 48px rgba(15, 23, 42, .20), 0 10px 26px rgba(59, 130, 246, .08) !important;
border-radius: 24px !important;
line-height: 0 !important;
isolation: isolate !important;
transition: box-shadow .34s cubic-bezier(.22, 1, .36, 1), border-color .34s ease !important;
}
.bw-home-main .bw-post-image-wrap::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
border-radius: inherit !important;
background: linear-gradient(135deg, rgba(255,255,255,.22), transparent 45%, rgba(99,102,241,.10) 100%) !important;
pointer-events: none !important;
z-index: 1 !important;
}
.bw-home-main .bw-post-image-wrap::after {
content: "" !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: -42% !important;
width: 32% !important;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.34) 50%, transparent 100%) !important;
transform: skewX(-18deg) !important;
opacity: 0 !important;
pointer-events: none !important;
z-index: 2 !important;
transition: left .5s cubic-bezier(.22, 1, .36, 1), opacity .3s ease !important;
}
.bw-home-main .bw-post-image-wrap:hover .bw-post-image {
transform: scale(1.05) translateY(0) !important;
filter: saturate(1.08) contrast(1.03) !important;
}
.bw-home-main .bw-post-image-wrap:hover {
border-color: rgba(191, 219, 254, .95) !important;
box-shadow: 0 26px 56px rgba(15, 23, 42, .24), 0 12px 30px rgba(59, 130, 246, .12) !important;
}
.bw-home-main .bw-post-image-wrap:hover::after {
left: 118% !important;
opacity: 1 !important;
}
/* Give every home blog a cleaner card shell with a subtle unique accent. */
.bw-home-main .bw-post-row {
position: relative !important;
overflow: visible !important;
margin-bottom: 2.4rem !important;
padding: 0 !important;
border-radius: 30px !important;
background: transparent !important;
}
.bw-home-main .bw-post-row::before,
.bw-home-main .bw-post-row::after {
display: none !important;
}
.bw-home-main .bw-post-row-inner {
position: relative !important;
overflow: visible !important;
padding: clamp(1.3rem, 2vw, 1.8rem) 0 clamp(1.3rem, 2vw, 1.8rem) 1.4rem !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.bw-home-main .bw-post-row-inner::before {
content: "" !important;
display: block !important;
position: absolute !important;
inset: 0 auto 0 0 !important;
width: 6px !important;
height: 100% !important;
border-radius: 999px !important;
pointer-events: none !important;
opacity: 1 !important;
}
.bw-home-main .bw-post-row:nth-of-type(4n+1) .bw-post-row-inner::before { background: linear-gradient(180deg, #fb7185, #f97316) !important; }
.bw-home-main .bw-post-row:nth-of-type(4n+2) .bw-post-row-inner::before { background: linear-gradient(180deg, #14b8a6, #22c55e) !important; }
.bw-home-main .bw-post-row:nth-of-type(4n+3) .bw-post-row-inner::before { background: linear-gradient(180deg, #6366f1, #8b5cf6) !important; }
.bw-home-main .bw-post-row:nth-of-type(4n+4) .bw-post-row-inner::before { background: linear-gradient(180deg, #f59e0b, #f97316) !important; }
.bw-home-main .bw-post-row:nth-of-type(4n+1) .bw-post-copy h2 { color: #0b2447 !important; }
.bw-home-main .bw-post-row:nth-of-type(4n+2) .bw-post-copy h2 { color: #14532d !important; }
.bw-home-main .bw-post-row:nth-of-type(4n+3) .bw-post-copy h2 { color: #312e81 !important; }
.bw-home-main .bw-post-row:nth-of-type(4n+4) .bw-post-copy h2 { color: #7c2d12 !important; }
.bw-home-main .bw-post-row:nth-of-type(even) .bw-post-copy .inline-flex { background: #dbeafe !important; color: #1e3a8a !important; }
.bw-home-main .bw-post-row:nth-of-type(odd) .bw-post-copy .inline-flex { background: #fee2e2 !important; color: #991b1b !important; }
.bw-home-main .bw-post-copy {
padding: 1rem 1.2rem !important;
}
.bw-home-main .bw-post-copy .whitespace-nowrap {
box-shadow: 0 10px 22px rgba(99, 102, 241, .10) !important;
}
/* v59.8 simple home category pills: dark outline, transparent base, soft hover */
.bw-home-main .bw-filter-box .bw-category-pills-wrap {
padding-right: 50px !important;
padding-bottom: 8px !important;
}
.bw-home-main .bw-category-pills {
gap: 12px !important;
max-height: 100px !important;
padding-bottom: 6px !important;
}
.bw-home-main .bw-category-pill,
.bw-home-main .bw-category-pills .bw-category-pill,
.bw-home-main .bw-filter-box .flex.flex-wrap.gap-3 > a.bw-category-pill {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
min-height: 42px !important;
padding: 10px 18px !important;
border: 1.5px solid #162033 !important;
border-radius: 14px !important;
background: rgba(255, 255, 255, .78) !important;
color: #162033 !important;
box-shadow: 4px 4px 10px rgba(197, 197, 197, .55), -4px -4px 10px rgba(255, 255, 255, .92) !important;
font-size: 14px !important;
font-weight: 800 !important;
line-height: 1.15 !important;
text-decoration: none !important;
transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease !important;
}
.bw-home-main .bw-category-pill:hover,
.bw-home-main .bw-category-pill:focus-visible,
.bw-home-main .bw-filter-box .flex.flex-wrap.gap-3 > a.bw-category-pill:hover,
.bw-home-main .bw-filter-box .flex.flex-wrap.gap-3 > a.bw-category-pill:focus-visible {
background: #e2e8f0 !important;
border-color: #314158 !important;
color: #0f172a !important;
transform: translateY(1px) !important;
box-shadow: inset 4px 4px 10px rgba(197, 197, 197, .55), inset -4px -4px 10px rgba(255, 255, 255, .92) !important;
}
.bw-home-main .bw-category-pill.is-active,
.bw-home-main .bw-filter-box .flex.flex-wrap.gap-3 > a.bw-category-pill.is-active {
background: #162033 !important;
border-color: #162033 !important;
color: #ffffff !important;
box-shadow: 0 8px 18px rgba(22, 32, 51, .14) !important;
}
.bw-home-main .bw-category-pill.is-active:hover,
.bw-home-main .bw-category-pill.is-active:focus-visible {
background: #22324f !important;
border-color: #22324f !important;
color: #ffffff !important;
transform: translateY(1px) !important;
box-shadow: inset 4px 4px 10px rgba(10, 17, 29, .32), inset -4px -4px 10px rgba(53, 74, 108, .24) !important;
}
.bw-home-main .bw-category-more-toggle,
.bw-category-pills-wrap.is-expanded .bw-category-more-toggle,
.bw-category-more-toggle,
button.bw-category-more-toggle {
right: 4px !important;
bottom: 4px !important;
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
overflow: hidden !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1.5px solid #162033 !important;
border-radius: 999px !important;
background: rgba(255, 255, 255, .78) !important;
color: #162033 !important;
box-shadow: 4px 4px 10px rgba(197, 197, 197, .55), -4px -4px 10px rgba(255, 255, 255, .92) !important;
transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease !important;
}
.bw-home-main .bw-category-more-toggle:hover,
.bw-category-pills-wrap.is-expanded .bw-category-more-toggle:hover,
.bw-home-main .bw-category-more-toggle:focus-visible,
.bw-category-pills-wrap.is-expanded .bw-category-more-toggle:focus-visible,
.bw-category-more-toggle:hover,
.bw-category-more-toggle:focus-visible,
button.bw-category-more-toggle:hover,
button.bw-category-more-toggle:focus-visible {
background: rgba(255, 255, 255, .78) !important;
border-color: #314158 !important;
color: #0f172a !important;
box-shadow: 4px 4px 10px rgba(197, 197, 197, .55), -4px -4px 10px rgba(255, 255, 255, .92) !important;
}
.bw-home-main .bw-category-more-toggle:active,
.bw-category-pills-wrap.is-expanded .bw-category-more-toggle:active,
.bw-category-more-toggle:active,
button.bw-category-more-toggle:active {
color: #666666 !important;
box-shadow: inset 4px 4px 12px rgba(197, 197, 197, .85), inset -4px -4px 12px rgba(255, 255, 255, .95) !important;
}
.bw-home-main .bw-category-pill:active,
.bw-home-main .bw-filter-box .flex.flex-wrap.gap-3 > a.bw-category-pill:active {
transform: translateY(1px) !important;
box-shadow: inset 4px 4px 10px rgba(197, 197, 197, .58), inset -4px -4px 10px rgba(255, 255, 255, .92) !important;
}
@media (prefers-reduced-motion: reduce) {
.bw-home-main .bw-category-pill,
.bw-home-main .bw-category-more-toggle,
.bw-category-more-toggle,
button.bw-category-more-toggle {
transition: none !important;
}
}
/* Home Read More: darker attractable button + keep the existing shine animation. */
.bw-home-main .bw-dark-btn,
.bw-home-main a.bw-dark-btn,
.bw-home-main .bw-post-copy .bw-dark-btn {
/* Home Read More CTA: navy -> indigo -> teal gradient */
background: linear-gradient(135deg, #071329 0%, #173c73 45%, #00c8e8 110%) !important;
color: #ffffff !important;
border: 1px solid rgba(0, 200, 232, .55) !important;
border-radius: 12px !important;
box-shadow: 0 14px 30px rgba(2, 6, 23, .18), inset 0 1px 0 rgba(255,255,255,.25) !important;
position: relative !important;
overflow: hidden !important;
transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
}
.bw-home-main .bw-dark-btn::before,
.bw-home-main a.bw-dark-btn::before,
.bw-home-main .bw-post-copy .bw-dark-btn::before {
content: "" !important;
position: absolute !important;
top: -25% !important;
bottom: -25% !important;
left: -70% !important;
width: 38% !important;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent) !important;
transform: skewX(-18deg) !important;
opacity: 0 !important;
pointer-events: none !important;
}
.bw-home-main .bw-dark-btn:hover,
.bw-home-main a.bw-dark-btn:hover,
.bw-home-main .bw-post-copy .bw-dark-btn:hover {
transform: translateY(-1px) !important;
filter: saturate(1.04) brightness(1.02) !important;
}
.bw-home-main .bw-dark-btn:hover::before,
.bw-home-main a.bw-dark-btn:hover::before,
.bw-home-main .bw-post-copy .bw-dark-btn:hover::before {
animation: none !important;
opacity: 1 !important;
}
.bw-home-main .bw-dark-btn:active,
.bw-home-main a.bw-dark-btn:active,
.bw-home-main .bw-post-copy .bw-dark-btn:active {
transform: translateY(1px) scale(.985) !important;
}
@keyframes bw-home-readmore-shine {
0% { left: -70%; } /* kept for backwards compatibility */
100% { left: 130%; }
}
/* Dashboard action buttons: brighter glass effect with stronger visibility on dark cards. */
.bw-dashboard-titlebar {
position: relative !important;
overflow: hidden !important;
border: 1px solid rgba(203, 213, 225, .92) !important;
border-radius: 1.9rem !important;
background: linear-gradient(135deg, #f8f6f1 0%, #fcfaf6 52%, #f5f2eb 100%) !important;
box-shadow: 0 22px 48px rgba(15, 23, 42, .12), inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}
.bw-dashboard-titlebar::before {
content: none !important;
}
.bw-dashboard-titlebar > * {
position: relative !important;
z-index: 1 !important;
}
.bw-dashboard-titlebar .bw-tab-btn,
.bw-dashboard-titlebar a.bw-tab-btn {
min-width: 150px !important;
min-height: 50px !important;
padding: 0 1.35rem !important;
transform: translate(0, -3px) !important;
border-bottom-width: 4px !important;
transition: transform .2s linear, border-bottom-width .2s linear !important;
}
.bw-dashboard-titlebar .bw-tab-btn *,
.bw-dashboard-titlebar a.bw-tab-btn * {
color: inherit !important;
}
.bw-dashboard-titlebar .bw-tab-btn:focus,
.bw-dashboard-titlebar .bw-tab-btn:focus-visible,
.bw-dashboard-titlebar a.bw-tab-btn:focus,
.bw-dashboard-titlebar a.bw-tab-btn:focus-visible {
outline: none !important;
transform: translate(0, -3px) !important;
}
.bw-dashboard-titlebar .bw-tab-btn:active,
.bw-dashboard-titlebar a.bw-tab-btn:active {
transform: translate(0, 0) !important;
border-bottom-width: 1px !important;
}
.bw-action-view,
.bw-action-update,
.bw-action-delete,
a.bw-action-view,
a.bw-action-update,
a.bw-action-delete,
button.bw-action-view,
button.bw-action-update,
button.bw-action-delete,
.bw-dashboard .bw-action-view,
.bw-dashboard .bw-action-update,
.bw-dashboard .bw-action-delete,
.bw-dashboard .bw-action-view:visited,
.bw-dashboard .bw-action-update:visited,
.bw-dashboard .bw-action-delete:visited {
position: relative !important;
overflow: hidden !important;
min-height: 38px !important;
padding: .55rem 1.15rem !important;
border: 1px solid rgba(255, 255, 255, .18) !important;
border-radius: 11px !important;
color: #ffffff !important;
font-weight: 950 !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, .36) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 22px rgba(15, 23, 42, .22) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease !important;
}
.bw-action-view::before,
.bw-action-update::before,
.bw-action-delete::before,
a.bw-action-view::before,
a.bw-action-update::before,
a.bw-action-delete::before,
button.bw-action-view::before,
button.bw-action-update::before,
button.bw-action-delete::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: -115% !important;
width: 56% !important;
height: 100% !important;
border-radius: inherit !important;
background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .18) 36%, rgba(255, 255, 255, .42) 50%, rgba(255, 255, 255, .16) 64%, transparent 100%) !important;
transform: skewX(-18deg) !important;
transition: left .55s ease !important;
pointer-events: none !important;
opacity: 1 !important;
}
.bw-action-view:hover,
.bw-action-update:hover,
.bw-action-delete:hover,
a.bw-action-view:hover,
a.bw-action-update:hover,
a.bw-action-delete:hover,
button.bw-action-view:hover,
button.bw-action-update:hover,
button.bw-action-delete:hover,
.bw-action-view:focus-visible,
.bw-action-update:focus-visible,
.bw-action-delete:focus-visible,
a.bw-action-view:focus-visible,
a.bw-action-update:focus-visible,
a.bw-action-delete:focus-visible,
button.bw-action-view:focus-visible,
button.bw-action-update:focus-visible,
button.bw-action-delete:focus-visible {
color: #ffffff !important;
transform: translateY(-2px) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 14px 28px rgba(15, 23, 42, .28) !important;
filter: saturate(1.06) brightness(1.04) !important;
outline: none !important;
}
.bw-action-view:hover::before,
.bw-action-update:hover::before,
.bw-action-delete:hover::before,
a.bw-action-view:hover::before,
a.bw-action-update:hover::before,
a.bw-action-delete:hover::before,
button.bw-action-view:hover::before,
button.bw-action-update:hover::before,
button.bw-action-delete:hover::before,
.bw-action-view:focus-visible::before,
.bw-action-update:focus-visible::before,
.bw-action-delete:focus-visible::before,
a.bw-action-view:focus-visible::before,
a.bw-action-update:focus-visible::before,
a.bw-action-delete:focus-visible::before,
button.bw-action-view:focus-visible::before,
button.bw-action-update:focus-visible::before,
button.bw-action-delete:focus-visible::before {
left: 130% !important;
}
.bw-action-view:active,
.bw-action-update:active,
.bw-action-delete:active,
a.bw-action-view:active,
a.bw-action-update:active,
a.bw-action-delete:active,
button.bw-action-view:active,
button.bw-action-update:active,
button.bw-action-delete:active {
transform: translateY(0) scale(.985) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 7px 16px rgba(15, 23, 42, .22) !important;
}
.bw-action-view,
a.bw-action-view,
button.bw-action-view,
.bw-dashboard .bw-action-view {
background: linear-gradient(135deg, #1e3a8a 0%, #0f2f5f 100%) !important;
border-color: rgba(147, 197, 253, .38) !important;
}
.bw-action-update,
a.bw-action-update,
button.bw-action-update,
.bw-dashboard .bw-action-update {
background: linear-gradient(135deg, #334155 0%, #0f172a 100%) !important;
border-color: rgba(203, 213, 225, .28) !important;
}
.bw-action-delete,
a.bw-action-delete,
button.bw-action-delete,
.bw-dashboard .bw-action-delete {
background: linear-gradient(135deg, #881337 0%, #4c0519 100%) !important;
border-color: rgba(251, 113, 133, .38) !important;
}
/* =========================================================
Account Navbar Avatar Menu + Optional Profile Upload UI
Scoped to Blog Website plugin only
========================================================= */
.bw-wrap .bw-nav-account,
.bw-hero .bw-nav-account {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 80 !important;
}
.bw-wrap .bw-user-menu summary,
.bw-hero .bw-user-menu summary {
list-style: none !important;
}
.bw-wrap .bw-user-menu summary::-webkit-details-marker,
.bw-hero .bw-user-menu summary::-webkit-details-marker {
display: none !important;
}
.bw-wrap .bw-user-menu-trigger,
.bw-hero .bw-user-menu-trigger {
position: relative !important;
display: inline-flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
min-width: 78px !important;
padding: 2px 8px 0 !important;
border: 0 !important;
background: transparent !important;
cursor: pointer !important;
user-select: none !important;
outline: none !important;
}
.bw-wrap .bw-user-menu-trigger:focus-visible .bw-user-menu-avatar-wrap,
.bw-hero .bw-user-menu-trigger:focus-visible .bw-user-menu-avatar-wrap {
box-shadow:
0 0 0 4px rgba(255, 255, 255, .35),
0 0 0 7px rgba(99, 102, 241, .55),
0 18px 36px rgba(15, 23, 42, .32) !important;
}
.bw-wrap .bw-user-menu-avatar-wrap,
.bw-hero .bw-user-menu-avatar-wrap {
width: 54px !important;
height: 54px !important;
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 3px !important;
border-radius: 999px !important;
background:
linear-gradient(135deg, #38bdf8 0%, #6366f1 42%, #ec4899 72%, #f97316 100%) !important;
box-shadow:
0 18px 36px rgba(15, 23, 42, .30),
0 0 0 1px rgba(255, 255, 255, .35),
inset 0 1px 0 rgba(255, 255, 255, .45) !important;
transition: transform .24s ease, box-shadow .24s ease, filter .24s ease !important;
isolation: isolate !important;
overflow: hidden !important;
}
.bw-wrap .bw-user-menu-avatar-wrap::after,
.bw-hero .bw-user-menu-avatar-wrap::after {
content: "" !important;
position: absolute !important;
inset: -5px !important;
border-radius: inherit !important;
background: radial-gradient(circle, rgba(99, 102, 241, .35), transparent 62%) !important;
filter: blur(8px) !important;
opacity: 0 !important;
transition: opacity .24s ease !important;
z-index: -1 !important;
}
.bw-wrap .bw-user-menu-trigger:hover .bw-user-menu-avatar-wrap,
.bw-hero .bw-user-menu-trigger:hover .bw-user-menu-avatar-wrap,
.bw-wrap .bw-user-menu[open] .bw-user-menu-avatar-wrap,
.bw-hero .bw-user-menu[open] .bw-user-menu-avatar-wrap {
transform: translateY(-2px) scale(1.04) !important;
filter: saturate(1.08) brightness(1.04) !important;
box-shadow:
0 22px 44px rgba(15, 23, 42, .36),
0 0 0 1px rgba(255, 255, 255, .48),
inset 0 1px 0 rgba(255, 255, 255, .52) !important;
}
.bw-wrap .bw-user-menu-trigger:hover .bw-user-menu-avatar-wrap::after,
.bw-hero .bw-user-menu-trigger:hover .bw-user-menu-avatar-wrap::after,
.bw-wrap .bw-user-menu[open] .bw-user-menu-avatar-wrap::after,
.bw-hero .bw-user-menu[open] .bw-user-menu-avatar-wrap::after {
opacity: 1 !important;
}
.bw-wrap .bw-user-menu-avatar,
.bw-hero .bw-user-menu-avatar {
width: calc(100% - 6px) !important;
height: calc(100% - 6px) !important;
display: block !important;
border-radius: 999px !important;
object-fit: contain !important;
object-position: center !important;
aspect-ratio: 1 / 1 !important;
background: #e2e8f0 !important;
border: 2px solid rgba(255, 255, 255, .88) !important;
box-shadow: inset 0 1px 5px rgba(15, 23, 42, .16) !important;
}
.bw-wrap .bw-user-menu-avatar.is-custom-avatar,
.bw-hero .bw-user-menu-avatar.is-custom-avatar {
object-fit: cover !important;
}
.bw-wrap .bw-user-menu-name,
.bw-hero .bw-user-menu-name {
max-width: 118px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
font-size: .76rem !important;
line-height: 1.05 !important;
font-weight: 950 !important;
letter-spacing: .01em !important;
color: #ffffff !important;
text-align: center !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, .42) !important;
}
.bw-wrap .bw-user-menu-caret,
.bw-hero .bw-user-menu-caret {
position: absolute !important;
top: 39px !important;
right: 5px !important;
width: 22px !important;
height: 22px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
background: #ffffff !important;
border: 1px solid rgba(226, 232, 240, .95) !important;
box-shadow: 0 8px 18px rgba(15, 23, 42, .20) !important;
transition: transform .24s ease !important;
}
.bw-wrap .bw-user-menu-caret svg,
.bw-hero .bw-user-menu-caret svg {
width: 15px !important;
height: 15px !important;
fill: #0f172a !important;
}
.bw-wrap .bw-user-menu[open] .bw-user-menu-caret,
.bw-hero .bw-user-menu[open] .bw-user-menu-caret {
transform: rotate(180deg) !important;
}
.bw-wrap .bw-user-menu-panel,
.bw-hero .bw-user-menu-panel {
position: absolute !important;
top: calc(100% + 14px) !important;
right: 0 !important;
min-width: 250px !important;
display: grid !important;
gap: 10px !important;
padding: 12px !important;
border-radius: 24px !important;
background:
linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .93)) !important;
border: 1px solid rgba(255, 255, 255, .85) !important;
box-shadow:
0 28px 70px rgba(15, 23, 42, .28),
inset 0 1px 0 rgba(255, 255, 255, .9) !important;
backdrop-filter: blur(18px) saturate(160%) !important;
-webkit-backdrop-filter: blur(18px) saturate(160%) !important;
z-index: 999 !important;
transform-origin: top right !important;
animation: bwAccountMenuIn .18s ease both !important;
}
@keyframes bwAccountMenuIn {
from { opacity: 0; transform: translateY(-8px) scale(.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.bw-wrap .bw-user-menu-panel::before,
.bw-hero .bw-user-menu-panel::before {
content: "" !important;
position: absolute !important;
top: -7px !important;
right: 27px !important;
width: 16px !important;
height: 16px !important;
border-radius: 4px !important;
background: rgba(255, 255, 255, .98) !important;
transform: rotate(45deg) !important;
border-left: 1px solid rgba(255, 255, 255, .85) !important;
border-top: 1px solid rgba(255, 255, 255, .85) !important;
}
.bw-wrap .bw-user-menu-link,
.bw-hero .bw-user-menu-link {
position: relative !important;
display: grid !important;
grid-template-columns: 40px minmax(0, 1fr) !important;
align-items: center !important;
gap: 12px !important;
padding: 12px !important;
border-radius: 18px !important;
color: #0f172a !important;
text-decoration: none !important;
background: linear-gradient(135deg, #f8fafc, #ffffff) !important;
border: 1px solid rgba(226, 232, 240, .92) !important;
box-shadow: 0 8px 20px rgba(15, 23, 42, .06) !important;
transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease !important;
}
.bw-wrap .bw-user-menu-link strong,
.bw-hero .bw-user-menu-link strong {
display: block !important;
font-size: .95rem !important;
line-height: 1.1 !important;
font-weight: 950 !important;
color: inherit !important;
}
.bw-wrap .bw-user-menu-link small,
.bw-hero .bw-user-menu-link small {
display: block !important;
margin-top: 3px !important;
font-size: .72rem !important;
line-height: 1.2 !important;
font-weight: 800 !important;
color: #64748b !important;
}
.bw-wrap .bw-user-menu-link-icon,
.bw-hero .bw-user-menu-link-icon {
width: 40px !important;
height: 40px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 14px !important;
background: linear-gradient(135deg, #dbeafe, #eef2ff) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8) !important;
font-size: 1.1rem !important;
}
.bw-wrap .bw-user-menu-link:hover,
.bw-hero .bw-user-menu-link:hover,
.bw-wrap .bw-user-menu-link:focus-visible,
.bw-hero .bw-user-menu-link:focus-visible {
transform: translateY(-2px) !important;
border-color: rgba(99, 102, 241, .35) !important;
background: linear-gradient(135deg, #eef2ff, #ffffff) !important;
box-shadow: 0 14px 28px rgba(99, 102, 241, .14) !important;
outline: none !important;
}
.bw-wrap .bw-user-menu-link.is-logout .bw-user-menu-link-icon,
.bw-hero .bw-user-menu-link.is-logout .bw-user-menu-link-icon {
background: linear-gradient(135deg, #fff1f2, #ffedd5) !important;
}
.bw-wrap .bw-user-menu-link.is-logout:hover,
.bw-hero .bw-user-menu-link.is-logout:hover,
.bw-wrap .bw-user-menu-link.is-logout:focus-visible,
.bw-hero .bw-user-menu-link.is-logout:focus-visible {
color: #be123c !important;
border-color: rgba(244, 63, 94, .25) !important;
background: linear-gradient(135deg, #fff1f2, #ffffff) !important;
box-shadow: 0 14px 28px rgba(244, 63, 94, .14) !important;
}
/* Optional image upload cards used on Create Account and Profile tab */
.bw-wrap .bw-avatar-upload-card {
position: relative !important;
grid-template-columns: 100px minmax(0, 1fr) !important;
gap: 18px !important;
align-items: center !important;
padding: 16px !important;
border-radius: 24px !important;
background:
radial-gradient(circle at top left, rgba(99, 102, 241, .10), transparent 45%),
linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .95)) !important;
border: 1px solid rgba(226, 232, 240, .92) !important;
box-shadow:
0 18px 40px rgba(15, 23, 42, .08),
inset 0 1px 0 rgba(255, 255, 255, .86) !important;
}
.bw-wrap .bw-avatar-preview-wrap {
width: 96px !important;
height: 96px !important;
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 4px !important;
border-radius: 999px !important;
background: linear-gradient(135deg, #38bdf8, #6366f1 48%, #ec4899 76%, #f97316) !important;
box-shadow:
0 18px 36px rgba(15, 23, 42, .16),
inset 0 1px 0 rgba(255, 255, 255, .42) !important;
overflow: visible !important;
}
.bw-wrap .bw-avatar-preview {
width: 84px !important;
height: 84px !important;
display: block !important;
border-radius: 999px !important;
object-fit: contain !important;
object-position: center !important;
aspect-ratio: 1 / 1 !important;
border: 3px solid #ffffff !important;
background: #e2e8f0 !important;
overflow: hidden !important;
}
.bw-wrap .bw-avatar-preview.is-custom-avatar {
object-fit: cover !important;
object-position: center 35% !important;
}
.bw-wrap .bw-avatar-remove-btn {
position: absolute !important;
right: 4px !important;
bottom: 4px !important;
width: 26px !important;
height: 26px !important;
min-width: 0 !important;
min-height: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
border: 2px solid #ffffff !important;
border-radius: 999px !important;
background: #e11d48 !important;
color: #ffffff !important;
box-shadow: 0 8px 18px rgba(225, 29, 72, .28) !important;
cursor: pointer !important;
transform: none !important;
z-index: 20 !important;
}
.bw-wrap .bw-avatar-remove-btn[hidden] {
display: none !important;
}
.bw-wrap .bw-avatar-remove-btn svg {
width: 14px !important;
height: 14px !important;
display: block !important;
fill: currentColor !important;
}
.bw-wrap .bw-avatar-remove-btn:hover,
.bw-wrap .bw-avatar-remove-btn:focus-visible {
background: #be123c !important;
color: #ffffff !important;
box-shadow: 0 10px 22px rgba(190, 18, 60, .30) !important;
transform: translateY(-1px) !important;
outline: none !important;
}
.bw-wrap .bw-avatar-upload-heading {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
margin-bottom: 10px !important;
}
.bw-wrap .bw-avatar-upload-title {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
color: #0f172a !important;
font-size: .98rem !important;
font-weight: 950 !important;
}
.bw-wrap .bw-avatar-upload-optional {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
padding: 5px 9px !important;
background: #eef2ff !important;
color: #4f46e5 !important;
font-size: .68rem !important;
line-height: 1 !important;
font-weight: 950 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
}
.bw-wrap .bw-avatar-hidden-input {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.bw-wrap .bw-avatar-upload-button {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
width: 100% !important;
min-height: 48px !important;
padding: 12px 16px !important;
border-radius: 16px !important;
color: #ffffff !important;
font-weight: 950 !important;
cursor: pointer !important;
overflow: hidden !important;
background: linear-gradient(135deg, #0f172a 0%, #312e81 52%, #ec4899 100%) !important;
border: 1px solid rgba(255, 255, 255, .18) !important;
box-shadow:
0 16px 30px rgba(49, 46, 129, .24),
inset 0 1px 0 rgba(255, 255, 255, .22) !important;
transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
}
.bw-wrap .bw-avatar-upload-button,
.bw-wrap .bw-avatar-upload-button span {
color: #ffffff !important;
}
.bw-wrap .bw-avatar-upload-button::after {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: -120% !important;
width: 60% !important;
height: 100% !important;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent) !important;
transform: skewX(-18deg) !important;
transition: left .7s ease !important;
}
.bw-wrap .bw-avatar-upload-button:hover,
.bw-wrap .bw-avatar-upload-button:focus-within {
transform: translateY(-2px) !important;
filter: saturate(1.08) brightness(1.04) !important;
box-shadow:
0 20px 38px rgba(49, 46, 129, .30),
inset 0 1px 0 rgba(255, 255, 255, .26) !important;
}
.bw-wrap .bw-avatar-upload-button:hover::after,
.bw-wrap .bw-avatar-upload-button:focus-within::after {
left: 145% !important;
}
.bw-wrap .bw-avatar-upload-button-icon {
width: 28px !important;
height: 28px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
background: rgba(255, 255, 255, .18) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22) !important;
font-size: 1rem !important;
}
.bw-wrap .bw-avatar-file-name {
margin: 9px 0 0 !important;
color: #334155 !important;
font-size: .84rem !important;
font-weight: 900 !important;
overflow-wrap: anywhere !important;
}
.bw-wrap .bw-avatar-upload-help {
margin: 6px 0 0 !important;
color: #64748b !important;
font-size: .82rem !important;
line-height: 1.45 !important;
font-weight: 700 !important;
}
.bw-wrap .bw-avatar-upload-card .bw-field-error {
display: none !important;
margin-top: 8px !important;
color: #be123c !important;
font-size: .82rem !important;
font-weight: 900 !important;
}
.bw-wrap .bw-avatar-upload-card .bw-field-error.is-open {
display: block !important;
}
@media (max-width: 768px) {
.bw-wrap .bw-user-menu-panel,
.bw-hero .bw-user-menu-panel {
right: auto !important;
left: 50% !important;
transform: translateX(-50%) !important;
min-width: min(280px, 88vw) !important;
}
.bw-wrap .bw-user-menu-panel::before,
.bw-hero .bw-user-menu-panel::before {
right: auto !important;
left: 50% !important;
transform: translateX(-50%) rotate(45deg) !important;
}
.bw-wrap .bw-avatar-upload-card {
grid-template-columns: 1fr !important;
justify-items: center !important;
text-align: center !important;
}
.bw-wrap .bw-avatar-upload-copy {
width: 100% !important;
}
.bw-wrap .bw-avatar-upload-heading {
justify-content: center !important;
flex-wrap: wrap !important;
}
}
/* Account menu icon-only trigger and readable dropdown text. */
.bw-wrap .bw-user-menu-trigger,
.bw-hero .bw-user-menu-trigger {
flex-direction: row !important;
gap: 0 !important;
min-width: 0 !important;
width: 60px !important;
height: 60px !important;
padding: 0 !important;
}
.bw-wrap .bw-user-menu-name,
.bw-hero .bw-user-menu-name,
.bw-wrap .bw-user-menu-caret,
.bw-hero .bw-user-menu-caret {
display: none !important;
}
.bw-wrap .bw-user-menu-panel,
.bw-hero .bw-user-menu-panel {
min-width: 210px !important;
}
.bw-wrap .bw-user-menu-link,
.bw-hero .bw-user-menu-link,
.bw-wrap .bw-user-menu-link:visited,
.bw-hero .bw-user-menu-link:visited {
color: #0f172a !important;
}
.bw-wrap .bw-user-menu-link strong,
.bw-hero .bw-user-menu-link strong {
color: #0f172a !important;
}
.bw-wrap .bw-user-menu-link:hover strong,
.bw-hero .bw-user-menu-link:hover strong,
.bw-wrap .bw-user-menu-link:focus-visible strong,
.bw-hero .bw-user-menu-link:focus-visible strong {
color: #1d4ed8 !important;
}
.bw-wrap .bw-user-menu-link.is-logout strong,
.bw-hero .bw-user-menu-link.is-logout strong,
.bw-wrap .bw-user-menu-link.is-logout:visited strong,
.bw-hero .bw-user-menu-link.is-logout:visited strong {
color: #be123c !important;
}
/* Scoped designs for profile save and post comment buttons only. */
.bw-wrap .bw-profile-save-btn,
.bw-wrap .bw-comment-submit-btn {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
min-height: 48px !important;
padding: 13px 26px !important;
border: 0 !important;
border-radius: 14px !important;
overflow: hidden !important;
isolation: isolate !important;
color: #ffffff !important;
font-size: 14px !important;
font-weight: 950 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
text-shadow: 0 1px 2px rgba(15, 23, 42, .26) !important;
box-shadow: 0 16px 32px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255, 255, 255, .20) !important;
transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}
.bw-wrap .bw-profile-save-btn {
background: linear-gradient(135deg, #0f766e 0%, #0f172a 58%, #2563eb 100%) !important;
}
.bw-wrap .bw-comment-submit-btn {
background: linear-gradient(135deg, #b91c1c 0%, #be185d 48%, #0f172a 100%) !important;
}
.bw-wrap .bw-profile-save-btn::before,
.bw-wrap .bw-comment-submit-btn::before,
.bw-wrap .bw-profile-save-btn::after,
.bw-wrap .bw-comment-submit-btn::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
border-radius: inherit !important;
pointer-events: none !important;
}
.bw-wrap .bw-profile-save-btn::before,
.bw-wrap .bw-comment-submit-btn::before {
background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .32) 44%, transparent 68%) !important;
transform: translateX(-125%) !important;
transition: transform .55s ease !important;
z-index: -1 !important;
}
.bw-wrap .bw-profile-save-btn::after,
.bw-wrap .bw-comment-submit-btn::after {
border: 1px solid rgba(255, 255, 255, .24) !important;
z-index: 0 !important;
}
.bw-wrap .bw-profile-save-btn:hover,
.bw-wrap .bw-comment-submit-btn:hover,
.bw-wrap .bw-profile-save-btn:focus-visible,
.bw-wrap .bw-comment-submit-btn:focus-visible {
color: #ffffff !important;
transform: translateY(-2px) !important;
filter: saturate(1.06) brightness(1.03) !important;
box-shadow: 0 20px 40px rgba(15, 23, 42, .22), inset 0 1px 0 rgba(255, 255, 255, .24) !important;
outline: none !important;
}
.bw-wrap .bw-profile-save-btn:hover::before,
.bw-wrap .bw-comment-submit-btn:hover::before,
.bw-wrap .bw-profile-save-btn:focus-visible::before,
.bw-wrap .bw-comment-submit-btn:focus-visible::before {
transform: translateX(125%) !important;
}
.bw-wrap .bw-profile-save-btn:active,
.bw-wrap .bw-comment-submit-btn:active {
transform: translateY(0) scale(.98) !important;
}
/* Final navbar/account and dashboard tab polish. */
.bw-hero > .bw-hero-inner {
padding-top: .75rem !important;
}
.bw-hero > .bw-hero-inner > nav.bw-glass {
padding: .6rem 1rem !important;
gap: .75rem !important;
min-height: 0 !important;
height: 75px;
margin-bottom: 5px;
}
.bw-hero > .bw-hero-inner > nav.bw-glass > a:first-child {
font-size: 1.35rem !important;
line-height: 1.1 !important;
}
.bw-navbar-logo-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
line-height: 0 !important;
text-decoration: none !important;
}
.bw-navbar-logo {
display: block !important;
width: clamp(140px, 16vw, 220px) !important;
height: 44px !important;
object-fit: contain !important;
filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .24)) !important;
}
.bw-hero > .bw-hero-inner > nav.bw-glass .bw-btn:not(.bw-nav-dashboard) {
padding-top: .55rem !important;
padding-bottom: .55rem !important;
}
.bw-nav-dashboard.bw-btn,
a.bw-nav-dashboard.bw-btn {
overflow: visible !important;
}
.bw-nav-dashboard.bw-btn:hover,
a.bw-nav-dashboard.bw-btn:hover,
.bw-nav-dashboard.bw-btn:focus-visible,
a.bw-nav-dashboard.bw-btn:focus-visible {
background: linear-gradient(135deg, #2d72d9, var(--bw-blue-admin-2)) !important;
color: #ffffff !important;
}
.bw-dashboard-titlebar .bw-tab-btn:hover:not(.is-active),
.bw-dashboard-titlebar a.bw-tab-btn:hover:not(.is-active),
.bw-dashboard-titlebar .bw-tab-btn:focus-visible:not(.is-active),
.bw-dashboard-titlebar a.bw-tab-btn:focus-visible:not(.is-active) {
background: rgba(255,255,255,.82) !important;
color: var(--bw-ink-soft) !important;
border-color: rgba(255,255,255,.86) !important;
box-shadow: 0 12px 26px rgba(18,32,51,.10), inset 0 1px 0 rgba(255,255,255,.84) !important;
}
.bw-dashboard-titlebar .bw-tab-btn.is-active:hover,
.bw-dashboard-titlebar a.bw-tab-btn.is-active:hover,
.bw-dashboard-titlebar .bw-tab-btn.is-active:focus-visible,
.bw-dashboard-titlebar a.bw-tab-btn.is-active:focus-visible {
color: #ffffff !important;
}
.bw-dashboard-titlebar .bw-tab-btn:hover,
.bw-dashboard-titlebar a.bw-tab-btn:hover,
.bw-dashboard-titlebar .bw-tab-btn:focus-visible,
.bw-dashboard-titlebar a.bw-tab-btn:focus-visible {
transform: translate(0, -3px) !important;
filter: none !important;
}
.bw-dashboard-titlebar .bw-tab-btn::after,
.bw-dashboard-titlebar a.bw-tab-btn::after,
.bw-nav-dashboard.bw-btn::after,
a.bw-nav-dashboard.bw-btn::after {
display: block !important;
content: "" !important;
position: absolute !important;
inset: 0 !important;
border-radius: inherit !important;
background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.32) 45%, transparent 70%) !important;
background-size: 230% 100% !important;
background-position: 130% 0 !important;
transform: none !important;
transition: background-position .45s ease !important;
pointer-events: none !important;
z-index: 0 !important;
}
.bw-dashboard-titlebar .bw-tab-btn:hover::after,
.bw-dashboard-titlebar a.bw-tab-btn:hover::after,
.bw-dashboard-titlebar .bw-tab-btn:focus-visible::after,
.bw-dashboard-titlebar a.bw-tab-btn:focus-visible::after {
background-position: 130% 0 !important;
}
.bw-nav-dashboard.bw-btn:hover::after,
a.bw-nav-dashboard.bw-btn:hover::after,
.bw-nav-dashboard.bw-btn:focus-visible::after,
a.bw-nav-dashboard.bw-btn:focus-visible::after {
background-position: -130% 0 !important;
}
.bw-wrap .bw-user-menu-trigger,
.bw-hero .bw-user-menu-trigger {
flex-direction: column !important;
gap: .22rem !important;
min-width: 64px !important;
width: auto !important;
height: auto !important;
padding: 0 .25rem !important;
}
.bw-wrap .bw-user-menu-avatar-wrap,
.bw-hero .bw-user-menu-avatar-wrap {
width: 44px !important;
height: 44px !important;
padding: 2px !important;
}
.bw-wrap .bw-user-menu-name,
.bw-hero .bw-user-menu-name {
display: block !important;
max-width: 76px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
color: #ffffff !important;
font-size: .68rem !important;
line-height: 1 !important;
font-weight: 950 !important;
text-align: center !important;
text-shadow: 0 2px 8px rgba(0,0,0,.38) !important;
}
.bw-wrap .bw-user-menu-caret,
.bw-hero .bw-user-menu-caret {
display: none !important;
}
/* =====================================================
FINAL FIX: Admin dashboard tab hover vs click effect
Hover is now only a light lift. The selected/clicked
effect appears only on the active tab after click.
===================================================== */
.bw-dashboard-titlebar .bw-tab-btn,
.bw-dashboard-titlebar a.bw-tab-btn {
position: relative !important;
overflow: hidden !important;
isolation: isolate !important;
transition:
transform .18s ease,
background .18s ease,
color .18s ease,
border-color .18s ease,
box-shadow .18s ease !important;
}
.bw-dashboard-titlebar .bw-tab-btn:not(.is-active),
.bw-dashboard-titlebar a.bw-tab-btn:not(.is-active) {
background: rgba(255,255,255,.84) !important;
color: #1f2937 !important;
border: 1px solid rgba(226,232,240,.92) !important;
box-shadow: 0 10px 22px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.86) !important;
transform: none !important;
filter: none !important;
}
.bw-dashboard-titlebar .bw-tab-btn:not(.is-active):hover,
.bw-dashboard-titlebar a.bw-tab-btn:not(.is-active):hover,
.bw-dashboard-titlebar .bw-tab-btn:not(.is-active):focus-visible,
.bw-dashboard-titlebar a.bw-tab-btn:not(.is-active):focus-visible {
background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,246,255,.92)) !important;
color: #0f172a !important;
border-color: rgba(45,114,217,.30) !important;
box-shadow: 0 13px 26px rgba(31,95,191,.12), inset 0 1px 0 rgba(255,255,255,.9) !important;
transform: translateY(-1px) !important;
filter: none !important;
}
/* Disable the previous click/shine animation on hover. */
.bw-dashboard-titlebar .bw-tab-btn:not(.is-active)::after,
.bw-dashboard-titlebar a.bw-tab-btn:not(.is-active)::after,
.bw-dashboard-titlebar .bw-tab-btn:not(.is-active):hover::after,
.bw-dashboard-titlebar a.bw-tab-btn:not(.is-active):hover::after,
.bw-dashboard-titlebar .bw-tab-btn:not(.is-active):focus-visible::after,
.bw-dashboard-titlebar a.bw-tab-btn:not(.is-active):focus-visible::after {
opacity: 0 !important;
transform: none !important;
background-position: 130% 0 !important;
animation: none !important;
}
/* Real click/press feedback while the pointer is down. */
.bw-dashboard-titlebar .bw-tab-btn:not(.is-active):active,
.bw-dashboard-titlebar a.bw-tab-btn:not(.is-active):active {
transform: translateY(1px) scale(.985) !important;
box-shadow: inset 0 4px 10px rgba(15,23,42,.12), inset 0 -1px 0 rgba(255,255,255,.82) !important;
}
/* Selected/clicked tab state. */
.bw-dashboard-titlebar .bw-tab-btn.is-active,
.bw-dashboard-titlebar a.bw-tab-btn.is-active,
.bw-dashboard-titlebar .bw-tab-btn.is-active:hover,
.bw-dashboard-titlebar a.bw-tab-btn.is-active:hover,
.bw-dashboard-titlebar .bw-tab-btn.is-active:focus-visible,
.bw-dashboard-titlebar a.bw-tab-btn.is-active:focus-visible {
background: linear-gradient(135deg, #2d72d9 0%, #0d3f91 100%) !important;
color: #ffffff !important;
border-color: rgba(255,255,255,.42) !important;
box-shadow: 0 16px 34px rgba(31,95,191,.24), inset 0 1px 0 rgba(255,255,255,.32) !important;
transform: none !important;
filter: none !important;
}
.bw-dashboard-titlebar .bw-tab-btn.is-active *,
.bw-dashboard-titlebar a.bw-tab-btn.is-active *,
.bw-dashboard-titlebar .bw-tab-btn.is-active:hover *,
.bw-dashboard-titlebar a.bw-tab-btn.is-active:hover * {
color: #ffffff !important;
}
.bw-dashboard-titlebar .bw-tab-btn.is-active::after,
.bw-dashboard-titlebar a.bw-tab-btn.is-active::after {
opacity: 1 !important;
background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.36) 45%, transparent 70%) !important;
background-size: 230% 100% !important;
background-position: 130% 0 !important;
transform: none !important;
animation: bwAdminTabClickFlash .55s ease both !important;
}
@keyframes bwAdminTabClickFlash {
0% { background-position: 130% 0; }
100% { background-position: -130% 0; }
}
/* =========================================================
Create Account form structured layout polish
Scoped to the signup form only; no other plugin section changed.
========================================================= */
.bw-wrap .bw-auth-shell.is-signup {
max-width: 1180px !important;
min-height: 660px !important;
}
.bw-wrap .bw-auth-shell.is-signup .bw-auth-forms,
.bw-wrap .bw-auth-shell.is-signup .bw-auth-image {
min-height: 660px !important;
}
.bw-wrap .bw-auth-shell.is-signup .bw-auth-forms {
align-items: stretch !important;
padding: clamp(1rem, 2vw, 1.75rem) !important;
}
.bw-wrap .bw-auth-shell.is-signup .bw-auth-signup-pane {
inset: clamp(1rem, 2vw, 1.75rem) !important;
align-items: flex-start !important;
justify-content: center !important;
overflow: visible !important;
}
.bw-wrap .bw-signup-form-polished {
width: 100% !important;
max-width: 500px !important;
margin: 0 auto !important;
display: flex !important;
flex-direction: column !important;
}
.bw-wrap .bw-signup-form-card {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
padding: 0 !important;
}
.bw-wrap .bw-signup-form-header {
position: relative !important;
padding: 18px 18px 16px !important;
border-radius: 24px !important;
background:
radial-gradient(circle at 12% 0%, rgba(99, 102, 241, .12), transparent 36%),
linear-gradient(145deg, rgba(255,255,255,.96), rgba(248,250,252,.90)) !important;
border: 1px solid rgba(226,232,240,.95) !important;
box-shadow:
0 14px 30px rgba(15,23,42,.07),
inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.bw-wrap .bw-signup-eyebrow {
display: inline-flex !important;
width: fit-content !important;
margin-bottom: 8px !important;
padding: 6px 10px !important;
border-radius: 999px !important;
background: linear-gradient(135deg, #eef2ff, #fff7ed) !important;
color: #4f46e5 !important;
border: 1px solid rgba(99,102,241,.16) !important;
font-size: .68rem !important;
font-weight: 950 !important;
letter-spacing: .16em !important;
line-height: 1 !important;
text-transform: uppercase !important;
}
.bw-wrap .bw-signup-form-header h2 {
margin: 0 0 6px !important;
color: #0f172a !important;
font-size: clamp(1.9rem, 3vw, 2.45rem) !important;
line-height: .98 !important;
font-weight: 950 !important;
letter-spacing: -.055em !important;
}
.bw-wrap .bw-signup-form-header p {
margin: 0 !important;
max-width: 420px !important;
color: #64748b !important;
font-size: .92rem !important;
line-height: 1.55 !important;
font-weight: 700 !important;
}
.bw-wrap .bw-signup-fields {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
margin: 0 !important;
}
.bw-wrap .bw-signup-field {
display: block !important;
padding: 0 !important;
margin: 0 !important;
}
.bw-wrap .bw-signup-field label {
display: block !important;
margin: 0 0 7px !important;
color: #334155 !important;
font-size: .88rem !important;
font-weight: 950 !important;
line-height: 1.15 !important;
}
.bw-wrap .bw-signup-input-wrap {
position: relative !important;
display: flex !important;
align-items: center !important;
min-height: 52px !important;
border-radius: 18px !important;
background: rgba(255,255,255,.98) !important;
border: 1px solid rgba(203,213,225,.92) !important;
box-shadow:
0 10px 22px rgba(15,23,42,.055),
inset 0 1px 0 rgba(255,255,255,.92) !important;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
overflow: hidden !important;
}
.bw-wrap .bw-signup-input-wrap:focus-within {
border-color: rgba(99,102,241,.56) !important;
box-shadow:
0 14px 28px rgba(99,102,241,.13),
0 0 0 4px rgba(99,102,241,.10),
inset 0 1px 0 rgba(255,255,255,.95) !important;
transform: translateY(-1px) !important;
}
.bw-wrap .bw-signup-input-icon {
flex: 0 0 auto !important;
width: 40px !important;
height: 40px !important;
margin-left: 7px !important;
border-radius: 14px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(135deg, #eef2ff, #fff7ed) !important;
color: #4f46e5 !important;
}
.bw-wrap .bw-signup-input-icon svg {
width: 18px !important;
height: 18px !important;
display: block !important;
fill: currentColor !important;
}
.bw-wrap .bw-signup-input-wrap .bw-form-input {
width: 100% !important;
min-height: 52px !important;
height: 52px !important;
margin: 0 !important;
padding: 0 14px !important;
border: 0 !important;
outline: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: #0f172a !important;
box-shadow: none !important;
font-size: .95rem !important;
font-weight: 800 !important;
}
.bw-wrap .bw-signup-input-wrap .bw-form-input::placeholder {
color: #94a3b8 !important;
font-weight: 700 !important;
}
.bw-wrap .bw-signup-input-wrap .bw-pass-toggle {
position: absolute !important;
top: 50% !important;
right: 8px !important;
transform: translateY(-50%) !important;
min-width: 44px !important;
height: 38px !important;
padding: 0 10px !important;
border-radius: 14px !important;
border: 1px solid rgba(226,232,240,.9) !important;
background: rgba(248,250,252,.95) !important;
color: #475569 !important;
box-shadow: none !important;
}
.bw-wrap .bw-signup-input-wrap .bw-pass-toggle:hover,
.bw-wrap .bw-signup-input-wrap .bw-pass-toggle:focus-visible {
background: #eef2ff !important;
color: #4f46e5 !important;
outline: none !important;
}
.bw-wrap .bw-signup-input-wrap input[type="password"].bw-form-input {
padding-right: 60px !important;
}
.bw-wrap .bw-signup-avatar-card {
margin: 2px 0 0 !important;
grid-template-columns: 88px minmax(0, 1fr) !important;
gap: 14px !important;
padding: 14px !important;
border-radius: 24px !important;
}
.bw-wrap .bw-signup-avatar-card .bw-avatar-preview-wrap {
width: 86px !important;
height: 86px !important;
}
.bw-wrap .bw-signup-avatar-card .bw-avatar-preview {
width: 76px !important;
height: 76px !important;
}
.bw-wrap .bw-signup-avatar-card .bw-avatar-upload-heading {
margin-bottom: 8px !important;
}
.bw-wrap .bw-signup-avatar-card .bw-avatar-upload-button {
min-height: 44px !important;
padding: 10px 14px !important;
border-radius: 15px !important;
}
.bw-wrap .bw-signup-avatar-card .bw-avatar-upload-help,
.bw-wrap .bw-signup-avatar-card .bw-avatar-file-name {
font-size: .78rem !important;
}
.bw-wrap .bw-signup-form-polished .bw-auth-main-btn.bw-signup-send {
width: 100% !important;
min-height: 52px !important;
margin: 2px 0 0 !important;
border-radius: 18px !important;
background: linear-gradient(135deg, #0f172a 0%, #312e81 52%, #ec4899 100%) !important;
box-shadow:
0 18px 34px rgba(49,46,129,.26),
inset 0 1px 0 rgba(255,255,255,.24) !important;
}
.bw-wrap .bw-signup-form-polished .bw-auth-switch-text {
margin-top: 4px !important;
}
.bw-wrap .bw-signup-form-polished .bw-otp-box {
border-radius: 22px !important;
background: linear-gradient(145deg, rgba(238,242,255,.96), rgba(255,255,255,.92)) !important;
border: 1px solid rgba(199,210,254,.9) !important;
box-shadow: 0 14px 32px rgba(99,102,241,.10) !important;
}
@media (max-width: 1024px) {
.bw-wrap .bw-auth-shell.is-signup {
min-height: auto !important;
}
.bw-wrap .bw-auth-shell.is-signup .bw-auth-forms,
.bw-wrap .bw-auth-shell.is-signup .bw-auth-image {
min-height: 620px !important;
}
}
@media (max-width: 768px) {
.bw-wrap .bw-auth-shell.is-signup .bw-auth-forms,
.bw-wrap .bw-auth-shell.is-signup .bw-auth-image {
min-height: auto !important;
}
.bw-wrap .bw-auth-shell.is-signup .bw-auth-signup-pane {
inset: 1rem !important;
}
.bw-wrap .bw-signup-form-header {
padding: 16px !important;
text-align: left !important;
}
.bw-wrap .bw-signup-avatar-card {
grid-template-columns: 1fr !important;
justify-items: center !important;
text-align: center !important;
padding: 16px !important;
}
.bw-wrap .bw-signup-avatar-card .bw-avatar-upload-copy {
width: 100% !important;
}
}
/* =========================================================
Create Account form: match Login form structure and fit layout
Scoped only to the auth/signup panel.
========================================================= */
.bw-wrap .bw-auth-shell.is-signup {
max-width: 1050px !important;
min-height: 560px !important;
}
.bw-wrap .bw-auth-shell.is-signup .bw-auth-forms,
.bw-wrap .bw-auth-shell.is-signup .bw-auth-image {
min-height: 560px !important;
}
.bw-wrap .bw-auth-shell.is-signup .bw-auth-forms {
align-items: center !important;
padding: clamp(1.1rem, 2.4vw, 2.25rem) !important;
}
.bw-wrap .bw-auth-shell.is-signup .bw-auth-signup-pane {
inset: clamp(1.1rem, 2.4vw, 2.25rem) !important;
align-items: center !important;
justify-content: center !important;
overflow: visible !important;
}
.bw-wrap .bw-signup-login-match {
width: 100% !important;
max-width: 430px !important;
margin: 0 auto !important;
}
.bw-wrap .bw-signup-login-match > p:first-child {
margin-bottom: .375rem !important;
}
.bw-wrap .bw-signup-login-match h2 {
margin-bottom: .5rem !important;
}
.bw-wrap .bw-signup-login-match > p:nth-of-type(2) {
margin-bottom: 1rem !important;
line-height: 1.45 !important;
}
.bw-wrap .bw-signup-login-match .bw-auth-fields {
display: block !important;
margin: 0 !important;
}
.bw-wrap .bw-signup-login-match label {
margin-bottom: .35rem !important;
color: #334155 !important;
font-size: .9rem !important;
font-weight: 950 !important;
line-height: 1.15 !important;
}
.bw-wrap .bw-signup-login-match .bw-form-input {
min-height: 42px !important;
height: 42px !important;
margin-bottom: .85rem !important;
padding-top: .55rem !important;
padding-bottom: .55rem !important;
background: rgba(255,255,255,.96) !important;
box-shadow: 0 8px 22px rgba(15,23,42,.045) !important;
}
.bw-wrap .bw-signup-login-match .bw-pass-wrap {
margin-bottom: .9rem !important;
}
.bw-wrap .bw-signup-login-match .bw-pass-wrap .bw-form-input {
margin-bottom: 0 !important;
padding-right: 4.5rem !important;
}
.bw-wrap .bw-signup-login-match .bw-pass-toggle {
top: 50% !important;
right: .45rem !important;
transform: translateY(-50%) !important;
}
.bw-wrap .bw-signup-avatar-inline {
grid-template-columns: 58px minmax(0, 1fr) !important;
gap: .8rem !important;
align-items: center !important;
margin: 0 0 1rem !important;
padding: .85rem !important;
border-radius: 1.25rem !important;
background:
radial-gradient(circle at 0% 0%, rgba(99,102,241,.08), transparent 45%),
rgba(255,255,255,.78) !important;
border: 1px solid rgba(226,232,240,.92) !important;
box-shadow: 0 12px 28px rgba(15,23,42,.055) !important;
}
.bw-wrap .bw-signup-avatar-inline .bw-avatar-preview-wrap {
width: 58px !important;
height: 58px !important;
min-width: 58px !important;
padding: 3px !important;
}
.bw-wrap .bw-signup-avatar-inline .bw-avatar-preview {
width: 50px !important;
height: 50px !important;
}
.bw-wrap .bw-signup-avatar-inline .bw-avatar-upload-copy {
min-width: 0 !important;
}
.bw-wrap .bw-signup-avatar-inline .bw-avatar-upload-heading {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: .5rem !important;
margin-bottom: .45rem !important;
}
.bw-wrap .bw-signup-avatar-inline .bw-avatar-upload-title {
font-size: .85rem !important;
font-weight: 950 !important;
color: #0f172a !important;
}
.bw-wrap .bw-signup-avatar-inline .bw-avatar-upload-optional {
flex: 0 0 auto !important;
padding: .18rem .45rem !important;
border-radius: 999px !important;
background: #eef2ff !important;
color: #4f46e5 !important;
font-size: .58rem !important;
font-weight: 950 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
}
.bw-wrap .bw-signup-avatar-inline .bw-avatar-upload-button {
width: 100% !important;
min-height: 38px !important;
padding: .55rem .75rem !important;
border-radius: .9rem !important;
font-size: .82rem !important;
font-weight: 950 !important;
line-height: 1.1 !important;
}
.bw-wrap .bw-signup-avatar-inline .bw-avatar-upload-button-icon {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
}
.bw-wrap .bw-signup-avatar-inline .bw-avatar-file-name {
margin-top: .45rem !important;
margin-bottom: 0 !important;
color: #475569 !important;
font-size: .75rem !important;
font-weight: 900 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.bw-wrap .bw-signup-avatar-inline .bw-avatar-upload-help {
margin-top: .18rem !important;
margin-bottom: 0 !important;
color: #64748b !important;
font-size: .72rem !important;
line-height: 1.35 !important;
font-weight: 700 !important;
}
.bw-wrap .bw-signup-login-match .bw-auth-main-btn.bw-signup-send {
min-height: 42px !important;
margin-top: 0 !important;
border-radius: .75rem !important;
background: linear-gradient(135deg, #f97316, #ec4899, #6366f1) !important;
color: #fff !important;
}
.bw-wrap .bw-signup-login-match .bw-auth-switch-text {
margin-top: 1rem !important;
}
.bw-wrap .bw-signup-login-match .bw-otp-box {
margin-top: 1rem !important;
}
.bw-wrap .bw-signup-login-match.is-verifying .bw-auth-fields,
.bw-wrap .bw-signup-login-match.is-verifying > .bw-auth-main-btn,
.bw-wrap .bw-signup-login-match.is-verifying .bw-auth-switch-text {
display: none !important;
}
@media (max-width: 1024px) {
.bw-wrap .bw-auth-shell.is-signup,
.bw-wrap .bw-auth-shell.is-signup .bw-auth-forms,
.bw-wrap .bw-auth-shell.is-signup .bw-auth-image {
min-height: 560px !important;
}
}
@media (max-width: 768px) {
.bw-wrap .bw-auth-shell.is-signup,
.bw-wrap .bw-auth-shell.is-signup .bw-auth-forms,
.bw-wrap .bw-auth-shell.is-signup .bw-auth-image {
min-height: auto !important;
}
.bw-wrap .bw-auth-shell.is-signup .bw-auth-signup-pane {
inset: 1rem !important;
}
.bw-wrap .bw-signup-login-match {
max-width: 100% !important;
}
.bw-wrap .bw-signup-avatar-inline {
grid-template-columns: 52px minmax(0, 1fr) !important;
gap: .7rem !important;
padding: .75rem !important;
}
.bw-wrap .bw-signup-avatar-inline .bw-avatar-preview-wrap {
width: 52px !important;
height: 52px !important;
min-width: 52px !important;
}
.bw-wrap .bw-signup-avatar-inline .bw-avatar-preview {
width: 44px !important;
height: 44px !important;
}
}
/* =========================================================
Create Account form fit fix
- Keeps the signup form visually aligned with the login form
- Makes all fields, optional profile image upload, button, and switch link fit cleanly
- Scoped only to the auth signup panel
========================================================= */
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup {
max-width: 1080px !important;
min-height: 630px !important;
overflow: hidden !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-auth-forms,
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-auth-image {
min-height: 630px !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-auth-forms {
align-items: center !important;
padding: 22px 30px !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-auth-signup-pane {
inset: 22px 30px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: visible !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-login-match {
width: 100% !important;
max-width: 420px !important;
margin: 0 auto !important;
display: flex !important;
flex-direction: column !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-login-match > p:first-child {
display: block !important;
margin: 0 0 5px !important;
font-size: .66rem !important;
line-height: 1.1 !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-login-match h2 {
display: block !important;
margin: 0 0 6px !important;
font-size: clamp(1.9rem, 2.8vw, 2.25rem) !important;
line-height: 1.02 !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-login-match > p:nth-of-type(2) {
margin: 0 0 12px !important;
font-size: .86rem !important;
line-height: 1.42 !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-login-match .bw-auth-fields {
display: block !important;
margin: 0 !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-login-match label {
margin: 0 0 4px !important;
font-size: .84rem !important;
line-height: 1.1 !important;
font-weight: 950 !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-login-match .bw-form-input {
width: 100% !important;
min-height: 40px !important;
height: 40px !important;
margin-bottom: 10px !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
border-radius: 13px !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-login-match .bw-pass-wrap {
margin-bottom: 11px !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-login-match .bw-pass-wrap .bw-form-input {
margin-bottom: 0 !important;
padding-right: 4.25rem !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-login-match .bw-pass-toggle {
top: 50% !important;
right: 6px !important;
min-width: 40px !important;
height: 32px !important;
padding: 0 8px !important;
border-radius: 999px !important;
transform: translateY(-50%) !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-avatar-inline {
display: grid !important;
grid-template-columns: 54px minmax(0, 1fr) !important;
align-items: center !important;
gap: 11px !important;
margin: 0 0 12px !important;
padding: 11px !important;
border-radius: 18px !important;
background:
radial-gradient(circle at 0% 0%, rgba(99,102,241,.08), transparent 45%),
rgba(255,255,255,.82) !important;
border: 1px solid rgba(226,232,240,.95) !important;
box-shadow: 0 10px 24px rgba(15,23,42,.055) !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-avatar-inline .bw-avatar-preview-wrap {
width: 54px !important;
height: 54px !important;
min-width: 54px !important;
padding: 3px !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-avatar-inline .bw-avatar-preview {
width: 46px !important;
height: 46px !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-avatar-inline .bw-avatar-upload-copy {
min-width: 0 !important;
width: 100% !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-avatar-inline .bw-avatar-upload-heading {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
margin: 0 0 6px !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-avatar-inline .bw-avatar-upload-title {
font-size: .82rem !important;
line-height: 1.1 !important;
font-weight: 950 !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-avatar-inline .bw-avatar-upload-optional {
flex: 0 0 auto !important;
padding: 2px 6px !important;
border-radius: 999px !important;
font-size: .56rem !important;
line-height: 1.05 !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-avatar-inline .bw-avatar-upload-button {
width: 100% !important;
min-height: 36px !important;
padding: 8px 10px !important;
border-radius: 13px !important;
font-size: .78rem !important;
line-height: 1.1 !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-avatar-inline .bw-avatar-upload-button-icon {
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-avatar-inline .bw-avatar-file-name {
margin: 5px 0 0 !important;
font-size: .72rem !important;
line-height: 1.18 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-avatar-inline .bw-avatar-upload-help {
margin: 2px 0 0 !important;
font-size: .68rem !important;
line-height: 1.25 !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-login-match .bw-auth-main-btn.bw-signup-send {
min-height: 42px !important;
margin: 0 !important;
border-radius: 13px !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-login-match .bw-auth-switch-text {
display: block !important;
margin-top: 10px !important;
font-size: .82rem !important;
line-height: 1.35 !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-login-match .bw-otp-box {
margin-top: 12px !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-login-match.is-verifying .bw-auth-fields,
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-login-match.is-verifying > .bw-auth-main-btn,
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-login-match.is-verifying .bw-auth-switch-text {
display: none !important;
}
@media (max-width: 1024px) {
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup,
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-auth-forms,
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-auth-image {
min-height: 620px !important;
}
}
@media (max-width: 768px) {
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup,
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-auth-forms,
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-auth-image {
min-height: auto !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-auth-forms {
padding: 18px !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-auth-signup-pane {
inset: 18px !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-login-match {
max-width: 100% !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-avatar-inline {
grid-template-columns: 48px minmax(0, 1fr) !important;
gap: 9px !important;
padding: 10px !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-avatar-inline .bw-avatar-preview-wrap {
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-avatar-inline .bw-avatar-preview {
width: 40px !important;
height: 40px !important;
}
}
/* Signup form compact fit: profile upload remains commented, match login height. */
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup,
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-auth-forms,
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-auth-image {
min-height: 500px !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-auth-forms {
padding: clamp(1.1rem, 2.4vw, 2.25rem) !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-auth-signup-pane {
inset: clamp(1.1rem, 2.4vw, 2.25rem) !important;
align-items: center !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-login-match {
max-width: 430px !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-login-match h2 {
margin-bottom: .5rem !important;
font-size: clamp(2rem, 3vw, 2.35rem) !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-login-match > p:nth-of-type(2) {
margin-bottom: 1rem !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-login-match .bw-form-input {
min-height: 42px !important;
height: 42px !important;
margin-bottom: .85rem !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-login-match .bw-pass-wrap {
margin-bottom: 1rem !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-login-match .bw-auth-main-btn.bw-signup-send {
min-height: 42px !important;
}
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-signup-login-match .bw-auth-switch-text {
margin-top: 1rem !important;
}
@media (max-width: 1024px) {
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup,
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-auth-forms,
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-auth-image {
min-height: 540px !important;
}
}
@media (max-width: 768px) {
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup,
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-auth-forms,
.bw-wrap #bw-auth-panel.bw-auth-shell.is-signup .bw-auth-image {
min-height: auto !important;
}
}
/* Archive detail-page highlight: only the opened blog gets the active border. */
.bw-archive .bw-month-active {
background: rgba(255,255,255,.82) !important;
border-color: rgba(203,213,225,.85) !important;
color: #334155 !important;
box-shadow: none !important;
}
.bw-archive a.bw-current-blog,
.bw-archive a.bw-current-blog:hover,
.bw-archive a.bw-current-blog:focus-visible {
background: linear-gradient(135deg, #ffffff 0%, #eefcff 58%, #fff8df 100%) !important;
border: 2px solid #00a9b7 !important;
color: #0f172a !important;
box-shadow: 0 14px 30px rgba(0,142,155,.18), inset 4px 0 0 #ffd447 !important;
outline: none !important;
}
.bw-archive a.bw-current-blog span:first-child {
color: #07152d !important;
}
.bw-archive a.bw-current-blog span:last-child {
background: linear-gradient(135deg, #00a9b7, #123b68) !important;
color: #ffffff !important;
}
/* Hero animation + hourglass loader update. */
.bw-hero::before {
background:
radial-gradient(circle at 76% 22%, rgba(255,255,255,.08), transparent 24%),
radial-gradient(circle at 14% 20%, rgba(0,169,183,.10), transparent 30%),
linear-gradient(180deg, rgba(7,21,45,.02), rgba(7,21,45,.12)) !important;
}
.bw-hero-home {
background-image:
linear-gradient(112deg, rgba(7,21,45,.54), rgba(18,59,104,.30) 52%, rgba(0,142,155,.16)),
url("../image/loginHero.png") !important;
}
.bw-hero-heading-animated .bw-heading-word {
display: inline-block !important;
white-space: nowrap !important;
}
.bw-hero-heading-animated .bw-heading-space {
display: inline !important;
}
.bw-hero-heading-animated .bw-heading-char {
display: inline-block !important;
opacity: 0 !important;
transform: translateY(.85em) scale(.96) rotateX(24deg) !important;
filter: blur(8px) !important;
transition:
opacity .55s cubic-bezier(.22, 1, .36, 1),
transform .65s cubic-bezier(.22, 1, .36, 1),
filter .65s cubic-bezier(.22, 1, .36, 1) !important;
transform-origin: 50% 100% !important;
}
.bw-hero-heading-animated .bw-heading-char.is-visible {
opacity: 1 !important;
transform: translateY(0) scale(1) rotateX(0deg) !important;
filter: blur(0) !important;
}
.bw-hero-heading-animated.is-heading-complete {
background: linear-gradient(100deg, #ffffff 0%, #ffffff 38%, #ffe987 50%, #ffffff 62%, #ffffff 100%) !important;
background-size: 240% 100% !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
animation: bwHeroHeadingGlow 2.8s ease .2s 1 both !important;
}
@keyframes bwHeroHeadingGlow {
0% { background-position: 120% 0; text-shadow: 0 10px 30px rgba(0,0,0,.24); }
100% { background-position: -120% 0; text-shadow: 0 16px 36px rgba(0,0,0,.30); }
}
.bw-hero-description-animate {
min-height: 3.6em !important;
font-size: clamp(1.12rem, 1.35vw, 1.35rem) !important;
line-height: 1.65 !important;
}
.bw-hero-desc-typewrite .bw-desc-wrap {
border-right: .08em solid currentColor !important;
padding-right: .06em !important;
animation: bwHeroCursorBlink .85s steps(1, end) infinite !important;
}
@keyframes bwHeroCursorBlink {
0%, 46% { border-color: currentColor; }
47%, 100% { border-color: transparent; }
}
.bw-loader-card {
background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(223,251,251,.9)) !important;
}
.hourglassBackground {
position: relative;
background-color: rgb(71, 60, 60);
height: 130px;
width: 130px;
border-radius: 50%;
margin: 0 auto 6px;
}
.hourglassContainer {
position: absolute;
top: 30px;
left: 40px;
width: 50px;
height: 70px;
animation: hourglassRotate 2s ease-in 0s infinite;
transform-style: preserve-3d;
perspective: 1000px;
}
.hourglassContainer div,
.hourglassContainer div:before,
.hourglassContainer div:after {
transform-style: preserve-3d;
}
@keyframes hourglassRotate {
0% { transform: rotateX(0deg); }
50% { transform: rotateX(180deg); }
100% { transform: rotateX(180deg); }
}
.hourglassCapTop,
.hourglassCapBottom {
position: absolute;
left: 0;
width: 50px;
height: 5px;
background: #333;
border-radius: 50%;
}
.hourglassCapTop { top: 0; }
.hourglassCapBottom { bottom: 0; }
.hourglassCapTop:before,
.hourglassCapTop:after,
.hourglassCapBottom:before,
.hourglassCapBottom:after {
content: "";
display: block;
position: absolute;
left: 0;
width: 50px;
height: 5px;
background: #333;
border-radius: 50%;
}
.hourglassCapTop:before { top: -25px; }
.hourglassCapTop:after { top: -20px; }
.hourglassCapBottom:before { bottom: -25px; }
.hourglassCapBottom:after { bottom: -20px; }
.hourglassGlassTop {
transform: rotateX(90deg);
position: absolute;
top: -16px;
left: 3px;
border-radius: 50%;
width: 44px;
height: 44px;
background-color: #999999;
}
.hourglassGlass {
perspective: 100px;
position: absolute;
top: 32px;
left: 20px;
width: 10px;
height: 6px;
background-color: #999999;
opacity: .5;
}
.hourglassGlass:before,
.hourglassGlass:after {
content: "";
display: block;
position: absolute;
background-color: #999999;
left: -17px;
width: 44px;
height: 28px;
}
.hourglassGlass:before {
top: -27px;
border-radius: 0 0 25px 25px;
}
.hourglassGlass:after {
bottom: -27px;
border-radius: 25px 25px 0 0;
}
.hourglassCurves:before,
.hourglassCurves:after {
content: "";
display: block;
position: absolute;
top: 32px;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #333;
animation: hideCurves 2s ease-in 0s infinite;
}
.hourglassCurves:before { left: 15px; }
.hourglassCurves:after { left: 29px; }
@keyframes hideCurves {
0% { opacity: 1; }
25%, 30% { opacity: 0; }
40%, 100% { opacity: 1; }
}
.hourglassSandStream:before {
content: "";
display: block;
position: absolute;
left: 24px;
width: 3px;
background-color: white;
animation: sandStream1 2s ease-in 0s infinite;
}
.hourglassSandStream:after {
content: "";
display: block;
position: absolute;
top: 36px;
left: 19px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
animation: sandStream2 2s ease-in 0s infinite;
}
@keyframes sandStream1 {
0% { height: 0; top: 35px; }
50% { height: 0; top: 45px; }
60%, 85% { height: 35px; top: 8px; }
100% { height: 0; top: 8px; }
}
@keyframes sandStream2 {
0%, 50% { opacity: 0; }
51%, 90% { opacity: 1; }
91%, 100% { opacity: 0; }
}
.hourglassSand:before,
.hourglassSand:after {
content: "";
display: block;
position: absolute;
left: 6px;
background-color: white;
perspective: 500px;
}
.hourglassSand:before {
top: 8px;
width: 39px;
border-radius: 3px 3px 30px 30px;
animation: sandFillup 2s ease-in 0s infinite;
}
.hourglassSand:after {
border-radius: 30px 30px 3px 3px;
animation: sandDeplete 2s ease-in 0s infinite;
}
@keyframes sandFillup {
0% { opacity: 0; height: 0; }
60% { opacity: 1; height: 0; }
100% { opacity: 1; height: 17px; }
}
@keyframes sandDeplete {
0% { opacity: 0; top: 45px; height: 17px; width: 38px; left: 6px; }
1%, 24% { opacity: 1; top: 45px; height: 17px; width: 38px; left: 6px; }
25%, 50% { opacity: 1; top: 41px; height: 17px; width: 38px; left: 6px; }
90% { opacity: 1; top: 41px; height: 0; width: 10px; left: 20px; }
}
@media (prefers-reduced-motion: reduce) {
.bw-hero-heading-animated .bw-heading-char,
.bw-hero-heading-animated .bw-heading-char.is-visible {
opacity: 1 !important;
transform: none !important;
filter: none !important;
transition: none !important;
}
.bw-hero-desc-typewrite .bw-desc-wrap {
animation: none !important;
border-right-color: transparent !important;
}
.hourglassContainer,
.hourglassCurves:before,
.hourglassCurves:after,
.hourglassSandStream:before,
.hourglassSandStream:after,
.hourglassSand:before,
.hourglassSand:after {
animation: none !important;
}
}
/* Final hero animation and button badge corrections. */
.bw-hero-heading-animated.is-heading-removing {
animation: none !important;
-webkit-text-fill-color: currentColor !important;
}
.bw-hero-desc-typewrite.is-desc-complete .bw-desc-wrap {
animation: none !important;
border-right-color: transparent !important;
}
.bw-dashboard-titlebar .bw-tab-btn,
.bw-dashboard-titlebar a.bw-tab-btn,
.bw-nav-dashboard.bw-btn,
a.bw-nav-dashboard.bw-btn {
overflow: visible !important;
}
.bw-dashboard-titlebar .bw-tab-btn .bw-count-badge,
.bw-dashboard-titlebar a.bw-tab-btn .bw-count-badge,
.bw-nav-dashboard.bw-btn .bw-count-badge,
a.bw-nav-dashboard.bw-btn .bw-count-badge {
top: -10px !important;
right: -10px !important;
z-index: 5 !important;
transform: none !important;
clip-path: none !important;
}
.bw-count-badge {
z-index: 5 !important;
}
/* Old character hero animation reset; the current smooth hero entrance is defined below. */
.bw-hero-heading-animated,
.bw-hero-desc-reveal,
.bw-hero-desc-reveal.is-desc-visible {
opacity: 1 !important;
transform: none !important;
filter: none !important;
animation: none !important;
transition: none !important;
}
.bw-hero-heading-animated,
.bw-hero-heading-animated.is-heading-complete,
.bw-hero-heading-animated.is-heading-complete.is-heading-pulse,
.bw-hero-heading-animated.is-heading-pulse {
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
-webkit-text-fill-color: currentColor !important;
}
.bw-hero-heading-animated .bw-heading-word,
.bw-hero-heading-animated .bw-heading-word.is-visible,
.bw-hero-heading-animated .bw-heading-char,
.bw-hero-heading-animated .bw-heading-char.is-visible {
opacity: 1 !important;
transform: none !important;
filter: none !important;
animation: none !important;
transition: none !important;
}
/* Hide page scrollbars while preserving normal scrolling. */
html,
body {
max-width: 100vw !important;
overflow-x: hidden !important;
-ms-overflow-style: none !important;
scrollbar-width: none !important;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none !important;
}
.bw-wrap,
.bw-full-bleed {
max-width: 100vw !important;
overflow-x: hidden !important;
}
/* Final Search Blogs button visibility and hover effect. */
.bw-hero .bw-btn.bw-search-submit {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 52px !important;
padding: .82rem 2.05rem !important;
border: 2px solid #000080 !important;
border-radius: 10px !important;
background: rgba(255,255,255,.18) !important;
color: #000080 !important;
font-size: 1rem !important;
font-weight: 700 !important;
letter-spacing: .13em !important;
line-height: 1.1 !important;
text-transform: uppercase !important;
text-shadow: 0 1px 0 rgba(255,255,255,.35) !important;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.18),
0 12px 28px rgba(0,0,0,.20),
0 0 0 8px rgba(255,255,255,.08) !important;
backdrop-filter: blur(10px) saturate(1.15) !important;
-webkit-backdrop-filter: blur(10px) saturate(1.15) !important;
overflow: hidden !important;
isolation: isolate !important;
}
.bw-hero .bw-btn.bw-search-submit::before {
content: "" !important;
position: absolute !important;
inset: 0 50% !important;
border-radius: inherit !important;
background: #000080 !important;
opacity: 0 !important;
z-index: -1 !important;
transition: inset .48s ease, opacity .28s ease !important;
}
.bw-hero .bw-btn.bw-search-submit:hover,
.bw-hero .bw-btn.bw-search-submit:focus-visible {
color: #ffffff !important;
border-color: #000080 !important;
background: rgba(255,255,255,.20) !important;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.16),
0 16px 34px rgba(0,0,128,.28),
0 0 0 8px rgba(255,255,255,.10) !important;
transform: translateY(-2px) !important;
}
.bw-hero .bw-btn.bw-search-submit:hover::before,
.bw-hero .bw-btn.bw-search-submit:focus-visible::before {
inset: 0 !important;
opacity: 1 !important;
}
.bw-hero .bw-btn.bw-search-submit:active {
transform: translateY(0) scale(.98) !important;
}
/* Fill Search Blogs hover corners completely. */
.bw-hero .bw-btn.bw-search-submit::before {
inset: -2px 50% !important;
}
.bw-hero .bw-btn.bw-search-submit:hover,
.bw-hero .bw-btn.bw-search-submit:focus-visible {
background: #000080 !important;
background-clip: border-box !important;
}
.bw-hero .bw-btn.bw-search-submit:hover::before,
.bw-hero .bw-btn.bw-search-submit:focus-visible::before {
inset: -2px !important;
}
/* Final TinyMCE dropdown arrow and font menu fix. */
.bw-editor-box .mce-listbox button,
.bw-edit-modal-box .mce-listbox button {
padding-right: 26px !important;
}
.bw-editor-box .mce-fontselect button,
.bw-edit-modal-box .mce-fontselect button {
min-width: 142px !important;
max-width: 260px !important;
}
.bw-editor-box .mce-listbox button::after,
.bw-edit-modal-box .mce-listbox button::after {
content: "\25BE" !important;
display: block !important;
position: absolute !important;
right: 9px !important;
top: 50% !important;
width: auto !important;
height: auto !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
color: #334155 !important;
font-family: Arial, "Segoe UI Symbol", sans-serif !important;
font-size: 12px !important;
font-weight: 900 !important;
line-height: 1 !important;
opacity: 1 !important;
transform: translateY(-50%) !important;
visibility: visible !important;
}
.mce-fontselect .mce-menu,
.mce-fontselect.mce-menu,
.mce-menu .mce-menu-item {
min-width: 210px !important;
}
/* Final editor color dropdown caret visibility. */
.bw-editor-box .mce-colorbutton .mce-open,
.bw-edit-modal-box .mce-colorbutton .mce-open,
.bw-editor-box .mce-splitbtn .mce-open,
.bw-edit-modal-box .mce-splitbtn .mce-open {
background: transparent !important;
color: #334155 !important;
border-left-color: rgba(148,163,184,.45) !important;
min-width: 18px !important;
}
.bw-editor-box .mce-colorbutton .mce-open .mce-caret,
.bw-edit-modal-box .mce-colorbutton .mce-open .mce-caret,
.bw-editor-box .mce-splitbtn .mce-open .mce-caret,
.bw-edit-modal-box .mce-splitbtn .mce-open .mce-caret {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
width: 0 !important;
height: 0 !important;
margin: 0 0 0 4px !important;
padding: 0 !important;
border-top: 5px solid #334155 !important;
border-left: 4px solid transparent !important;
border-right: 4px solid transparent !important;
border-bottom: 0 !important;
background: transparent !important;
color: transparent !important;
}
.bw-editor-box .mce-colorbutton:hover .mce-open .mce-caret,
.bw-edit-modal-box .mce-colorbutton:hover .mce-open .mce-caret,
.bw-editor-box .mce-splitbtn:hover .mce-open .mce-caret,
.bw-edit-modal-box .mce-splitbtn:hover .mce-open .mce-caret {
border-top-color: #0f172a !important;
}
/* Public blog content styles for editor Blocks and Labels formats. */
.bw-content .bw-editor-lead {
font-size: 1.18em !important;
line-height: 1.75 !important;
color: #475569 !important;
}
.bw-content .bw-editor-section-title {
border-bottom: 2px solid #e2e8f0 !important;
padding-bottom: .35rem !important;
}
.bw-content .bw-editor-sub-title {
color: #1e40af !important;
}
.bw-content .bw-editor-info-block,
.bw-content .bw-editor-note-block,
.bw-content .bw-editor-warning-block,
.bw-content .bw-editor-border-block,
.bw-content .bw-editor-card-block,
.bw-content .bw-editor-callout-block,
.bw-content .bw-editor-dashed-block {
display: block !important;
margin: 1.1rem 0 !important;
padding: 1rem 1.2rem !important;
border-radius: 14px !important;
}
.bw-content .bw-editor-info-block {
border: 1px solid #bfdbfe !important;
background: #eff6ff !important;
color: #1e3a8a !important;
}
.bw-content .bw-editor-note-block {
border: 1px solid #fde68a !important;
background: #fffbeb !important;
color: #78350f !important;
}
.bw-content .bw-editor-warning-block {
border: 1px solid #fecaca !important;
background: #fef2f2 !important;
color: #7f1d1d !important;
}
.bw-content .bw-editor-border-block {
border: 2px solid #cbd5e1 !important;
background: rgba(248,250,252,.76) !important;
color: #334155 !important;
}
.bw-content .bw-editor-card-block {
border: 1px solid #e2e8f0 !important;
background: #ffffff !important;
color: #334155 !important;
border-radius: 18px !important;
padding: 1.2rem !important;
box-shadow: 0 12px 30px rgba(15,23,42,.08) !important;
}
.bw-content .bw-editor-callout-block {
border: 0 !important;
border-left: 6px solid #2563eb !important;
background: #eff6ff !important;
color: #1e3a8a !important;
}
.bw-content .bw-editor-dashed-block {
border: 2px dashed #94a3b8 !important;
background: #f8fafc !important;
color: #334155 !important;
}
.bw-content .bw-editor-badge-blue,
.bw-content .bw-editor-badge-green,
.bw-content .bw-editor-badge-orange,
.bw-content .bw-editor-badge-red,
.bw-content .bw-editor-badge-purple {
display: inline-flex !important;
align-items: center !important;
width: fit-content !important;
border-radius: 999px !important;
padding: .15rem .58rem !important;
font-size: .85em !important;
font-weight: 800 !important;
line-height: 1.35 !important;
text-decoration: none !important;
}
.bw-content .bw-editor-badge-blue {
background: #dbeafe !important;
color: #1e3a8a !important;
}
.bw-content .bw-editor-badge-green {
background: #dcfce7 !important;
color: #14532d !important;
}
.bw-content .bw-editor-badge-orange {
background: #ffedd5 !important;
color: #9a3412 !important;
}
.bw-content .bw-editor-badge-red {
background: #fee2e2 !important;
color: #991b1b !important;
}
.bw-content .bw-editor-badge-purple {
background: #ede9fe !important;
color: #5b21b6 !important;
}
.bw-content kbd {
display: inline-block !important;
background: #0f172a !important;
color: #ffffff !important;
border-radius: 6px !important;
padding: .12rem .38rem !important;
font-size: .9em !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
line-height: 1.4 !important;
}
/* Public blog code block and inline code formatting. */
.bw-content pre,
.bw-content .bw-editor-code-block {
display: block !important;
margin: 1.2rem 0 !important;
padding: 1rem 1.15rem !important;
border: 1px solid rgba(15,23,42,.88) !important;
border-radius: 14px !important;
background: #0f172a !important;
color: #e2e8f0 !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace !important;
font-size: .95rem !important;
line-height: 1.72 !important;
white-space: pre-wrap !important;
word-break: break-word !important;
overflow-x: auto !important;
box-shadow: 0 16px 34px rgba(15,23,42,.16) !important;
}
.bw-content pre code,
.bw-content .bw-editor-code-block code {
display: inline !important;
padding: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
white-space: inherit !important;
}
.bw-content code:not(pre code),
.bw-content :not(pre) > code {
display: inline !important;
padding: .12rem .38rem !important;
border-radius: 6px !important;
background: #f1f5f9 !important;
color: #be123c !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace !important;
font-size: .9em !important;
line-height: 1.45 !important;
}
/* Keep Search Blogs button color unchanged on hover. */
.bw-hero .bw-btn.bw-search-submit,
.bw-hero .bw-btn.bw-search-submit:hover,
.bw-hero .bw-btn.bw-search-submit:focus-visible {
background: rgba(255,255,255,.18) !important;
border-color: rgba(255,255,255,.95) !important;
color: #ffffff !important;
text-shadow: 0 2px 10px rgba(0,0,0,.35) !important;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.22),
0 12px 28px rgba(0,0,0,.20),
0 0 0 8px rgba(255,255,255,.08) !important;
}
.bw-hero .bw-btn.bw-search-submit::before,
.bw-hero .bw-btn.bw-search-submit:hover::before,
.bw-hero .bw-btn.bw-search-submit:focus-visible::before {
opacity: 0 !important;
inset: -2px 50% !important;
}
/* Scale the whole image card on hover, not the image inside it. */
.bw-post-image-wrap,
.bw-detail-media,
.bw-content figure {
transform-origin: center center !important;
transition:
transform .28s cubic-bezier(.22, 1, .36, 1),
box-shadow .28s ease,
border-color .28s ease,
filter .28s ease !important;
will-change: transform !important;
}
.bw-post-image-wrap:hover,
.bw-detail-media:hover,
.bw-content figure:hover {
transform: translateY(-3px) scale(1.025) !important;
box-shadow: 0 24px 54px rgba(15,23,42,.18) !important;
border-color: rgba(59,130,246,.32) !important;
}
.bw-post-image,
.bw-post-image-wrap img,
.bw-detail-image,
.bw-detail-media img,
.bw-content figure img,
.bw-content img {
transform: none !important;
transform-origin: center center !important;
}
.bw-post-image-wrap:hover .bw-post-image,
.bw-post-image-wrap:hover img,
.bw-home-main .bw-post-image-wrap:hover .bw-post-image,
.bw-detail-media:hover .bw-detail-image,
.bw-detail-media:hover img,
.bw-content figure:hover img,
.bw-content img:hover {
transform: none !important;
filter: saturate(1.04) contrast(1.02) !important;
}
.bw-home-main .bw-post-image-wrap:hover {
transform: translateY(-3px) scale(1.025) !important;
}
/* Final category modal update hover fix: keep the Update button dark, never white. */
.bw-category-modal .bw-cat-show-update,
.bw-category-modal .bw-cat-show-update:hover,
.bw-category-modal .bw-cat-show-update:focus,
.bw-category-modal .bw-cat-show-update:focus-visible,
.bw-category-modal .bw-cat-show-update:active,
.bw-category-modal .bw-cat-update-box button[type="submit"],
.bw-category-modal .bw-cat-update-box button[type="submit"]:hover,
.bw-category-modal .bw-cat-update-box button[type="submit"]:focus,
.bw-category-modal .bw-cat-update-box button[type="submit"]:focus-visible,
.bw-category-modal .bw-cat-update-box button[type="submit"]:active {
background: linear-gradient(135deg, #071329 0%, #12345f 58%, #1e4f9e 100%) !important;
color: #ffffff !important;
border: 0 !important;
outline: 0 !important;
box-shadow: 0 12px 26px rgba(15,42,77,.24) !important;
filter: none !important;
}
.bw-category-modal .bw-cat-show-update *,
.bw-category-modal .bw-cat-show-update:hover *,
.bw-category-modal .bw-cat-update-box button[type="submit"] *,
.bw-category-modal .bw-cat-update-box button[type="submit"]:hover * {
color: #ffffff !important;
}
.bw-category-modal .bw-cat-show-update::before,
.bw-category-modal .bw-cat-show-update::after,
.bw-category-modal .bw-cat-update-box button[type="submit"]::before,
.bw-category-modal .bw-cat-update-box button[type="submit"]::after {
display: none !important;
content: none !important;
animation: none !important;
}
/* Final lightweight motion override: keep reload fast and scrolling smooth. */
.bw-wrap {
--bw-motion-ease: cubic-bezier(.2, .8, .2, 1);
}
.bw-hero {
animation: none !important;
background-size: cover !important;
will-change: auto !important;
}
.bw-hero::before {
animation: none !important;
transform: none !important;
}
.bw-hero::after {
display: none !important;
content: none !important;
animation: none !important;
}
.bw-hero > .bw-hero-inner {
animation: bwHeroSimpleIn .55s var(--bw-motion-ease) both !important;
}
.bw-hero > .bw-hero-inner > nav.bw-glass {
animation: none !important;
}
.bw-hero .bw-hero-heading-animate {
animation: bwHeroSimpleTitle .58s .08s var(--bw-motion-ease) both !important;
text-shadow: 0 14px 30px rgba(0,0,0,.28) !important;
}
.bw-hero .bw-hero-description-animate,
.bw-hero form.bw-glass {
animation: bwHeroSimpleText .52s .14s var(--bw-motion-ease) both !important;
}
.bw-motion-ready .bw-wrap .bw-reveal,
.bw-motion-ready .bw-wrap .bw-reveal-up,
.bw-motion-ready .bw-wrap .bw-reveal-left,
.bw-motion-ready .bw-wrap .bw-reveal-right {
opacity: 0 !important;
filter: none !important;
backface-visibility: hidden !important;
will-change: opacity, transform !important;
transition:
opacity .5s var(--bw-motion-ease),
transform .5s var(--bw-motion-ease) !important;
transition-delay: 0ms !important;
}
.bw-motion-ready .bw-wrap .bw-reveal,
.bw-motion-ready .bw-wrap .bw-reveal-up {
transform: translate3d(0, 22px, 0) !important;
}
.bw-motion-ready .bw-wrap .bw-reveal-left {
transform: translate3d(-24px, 16px, 0) !important;
}
.bw-motion-ready .bw-wrap .bw-reveal-right {
transform: translate3d(24px, 16px, 0) !important;
}
.bw-motion-ready .bw-wrap .bw-reveal.is-visible {
opacity: 1 !important;
transform: translate3d(0, 0, 0) !important;
filter: none !important;
will-change: auto !important;
transition-delay: var(--bw-reveal-delay, 0ms) !important;
}
.bw-post-image-wrap,
.bw-detail-media,
.bw-content figure {
transition:
transform .24s var(--bw-motion-ease),
box-shadow .24s ease,
border-color .24s ease !important;
will-change: auto !important;
}
.bw-post-image-wrap:hover,
.bw-detail-media:hover,
.bw-content figure:hover {
transform: translateY(-3px) scale(1.015) !important;
}
@media (max-width: 768px) {
.bw-motion-ready .bw-wrap .bw-reveal-left,
.bw-motion-ready .bw-wrap .bw-reveal-right {
transform: translate3d(0, 20px, 0) !important;
}
}
@media (prefers-reduced-motion: reduce) {
.bw-hero > .bw-hero-inner,
.bw-hero .bw-hero-heading-animate,
.bw-hero .bw-hero-description-animate,
.bw-hero form.bw-glass,
.bw-motion-ready .bw-wrap .bw-reveal,
.bw-motion-ready .bw-wrap .bw-reveal-up,
.bw-motion-ready .bw-wrap .bw-reveal-left,
.bw-motion-ready .bw-wrap .bw-reveal-right {
animation: none !important;
opacity: 1 !important;
transform: none !important;
transition: none !important;
filter: none !important;
}
}
/* Add Blog hero: slightly clearer image with a lighter overlay. */
.bw-hero-write {
background-image:
linear-gradient(110deg, rgba(15,23,42,.48), rgba(249,115,22,.14), rgba(67,56,202,.12)),
url("../image/Add.png") !important;
background-color: #0f172a !important;
background-position: center center, center center !important;
background-repeat: no-repeat, no-repeat !important;
background-size: cover, cover !important;
}
.bw-hero-write::before {
background:
radial-gradient(circle at 50% 25%, rgba(255,229,138,.03), transparent 34%),
linear-gradient(180deg, rgba(23,53,31,.01), rgba(23,53,31,.04)) !important;
}
/* No fade animations on Add Blog and Blog Detail pages. */
.bw-hero-write > .bw-hero-inner,
.bw-hero-detail > .bw-hero-inner,
.bw-hero-write .bw-hero-heading-animate,
.bw-hero-detail .bw-hero-heading-animate,
.bw-hero-write .bw-hero-description-animate,
.bw-hero-detail .bw-hero-description-animate,
.bw-hero-write form.bw-glass,
.bw-hero-detail form.bw-glass {
animation: none !important;
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* Host/theme table reset: keep Manage Users rows readable after upload. */
.bw-wrap #bw-tab-users table {
width: 100% !important;
border-collapse: collapse !important;
background: transparent !important;
color: #f8fafc !important;
}
.bw-wrap #bw-tab-users table,
.bw-wrap #bw-tab-users thead,
.bw-wrap #bw-tab-users tbody,
.bw-wrap #bw-tab-users tr,
.bw-wrap #bw-tab-users th,
.bw-wrap #bw-tab-users td {
border-color: rgba(226, 232, 240, .28) !important;
}
.bw-wrap #bw-tab-users thead tr,
.bw-wrap #bw-tab-users thead th {
background: rgba(15, 23, 42, .74) !important;
color: #ffffff !important;
}
.bw-wrap #bw-tab-users tbody tr {
background: rgba(15, 23, 42, .42) !important;
border-bottom: 1px solid rgba(226, 232, 240, .2) !important;
}
.bw-wrap #bw-tab-users tbody tr:nth-child(even) {
background: rgba(30, 64, 175, .25) !important;
}
.bw-wrap #bw-tab-users tbody tr:hover {
background: rgba(59, 130, 246, .32) !important;
}
.bw-wrap #bw-tab-users thead th {
padding: .9rem 1rem !important;
vertical-align: middle !important;
}
.bw-wrap #bw-tab-users tbody td {
background: transparent !important;
padding: .9rem 1rem !important;
vertical-align: middle !important;
}
.bw-wrap #bw-tab-users tbody td,
.bw-wrap #bw-tab-users tbody .text-slate-900,
.bw-wrap #bw-tab-users tbody .text-slate-700,
.bw-wrap #bw-tab-users tbody .text-slate-600,
.bw-wrap #bw-tab-users tbody .text-slate-500,
.bw-wrap #bw-tab-users tbody .text-slate-400 {
color: rgba(248, 250, 252, .94) !important;
}
.bw-wrap #bw-tab-users tbody td:first-child,
.bw-wrap #bw-tab-users tbody td:first-child .text-slate-900,
.bw-wrap #bw-tab-users tbody td:first-child .text-slate-700,
.bw-wrap #bw-tab-users tbody td:first-child .text-slate-600,
.bw-wrap #bw-tab-users tbody td:first-child .text-slate-500,
.bw-wrap #bw-tab-users tbody td:first-child .text-slate-400 {
color: #ffffff !important;
}
/* Hostinger/theme hardening: keep dashboard cards, notices, and password fields stable. */
.bw-wrap .bw-dashboard-titlebar,
.bw-wrap #bw-tab-profile .bw-filter-box,
.bw-wrap .grid > .bw-filter-box {
background:
radial-gradient(circle at 0% 0%, rgba(255, 255, 255, .72), transparent 34%),
linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(255, 252, 246, .88)) !important;
border-color: rgba(203, 213, 225, .72) !important;
color: #0f172a !important;
box-shadow: 0 24px 70px rgba(15, 23, 42, .11), inset 0 1px 0 rgba(255, 255, 255, .96) !important;
}
.bw-wrap .bw-dashboard-titlebar h1,
.bw-wrap .bw-dashboard-titlebar h2,
.bw-wrap #bw-tab-profile .bw-filter-box h1,
.bw-wrap #bw-tab-profile .bw-filter-box h2,
.bw-wrap #bw-tab-profile .bw-filter-box h3,
.bw-wrap #bw-tab-profile .bw-filter-box label,
.bw-wrap #bw-tab-profile .bw-filter-box .text-slate-900,
.bw-wrap #bw-tab-profile .bw-filter-box .text-slate-800,
.bw-wrap #bw-tab-profile .bw-filter-box .text-slate-700,
.bw-wrap .grid > .bw-filter-box h1,
.bw-wrap .grid > .bw-filter-box h2,
.bw-wrap .grid > .bw-filter-box h3,
.bw-wrap .grid > .bw-filter-box label,
.bw-wrap .grid > .bw-filter-box .text-slate-900,
.bw-wrap .grid > .bw-filter-box .text-slate-800,
.bw-wrap .grid > .bw-filter-box .text-slate-700 {
color: #0f172a !important;
}
.bw-wrap .bw-dashboard-titlebar p,
.bw-wrap #bw-tab-profile .bw-filter-box p,
.bw-wrap #bw-tab-profile .bw-filter-box .text-slate-600,
.bw-wrap #bw-tab-profile .bw-filter-box .text-slate-500,
.bw-wrap .grid > .bw-filter-box p,
.bw-wrap .grid > .bw-filter-box .text-slate-600,
.bw-wrap .grid > .bw-filter-box .text-slate-500 {
color: #475569 !important;
}
.bw-toast-wrap,
.bw-toast-wrap *,
.bw-wrap .bw-pass-wrap,
.bw-wrap .bw-pass-wrap * {
box-sizing: border-box !important;
}
.bw-toast-wrap .bw-toast {
isolation: isolate !important;
min-height: 58px !important;
padding: 17px 58px 17px 18px !important;
}
.bw-toast-wrap .bw-toast-close,
.bw-wrap .bw-pass-toggle {
-webkit-appearance: none !important;
appearance: none !important;
position: absolute !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 999px !important;
border: 1px solid rgba(203, 213, 225, .72) !important;
background: #eef2ff !important;
color: #0f172a !important;
font-family: inherit !important;
font-weight: 950 !important;
text-align: center !important;
text-decoration: none !important;
text-shadow: none !important;
line-height: 1 !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 16px rgba(15, 23, 42, .08) !important;
cursor: pointer !important;
overflow: hidden !important;
z-index: 3 !important;
}
.bw-toast-wrap .bw-toast-close::before,
.bw-toast-wrap .bw-toast-close::after,
.bw-wrap .bw-pass-toggle::before,
.bw-wrap .bw-pass-toggle::after {
content: none !important;
display: none !important;
}
.bw-toast-wrap .bw-toast-close {
top: 50% !important;
right: 14px !important;
width: 32px !important;
min-width: 32px !important;
max-width: 32px !important;
height: 32px !important;
min-height: 32px !important;
max-height: 32px !important;
transform: translateY(-50%) !important;
font-size: 20px !important;
}
.bw-toast-wrap .bw-toast-close:hover,
.bw-toast-wrap .bw-toast-close:focus-visible {
background: #dbe4ff !important;
color: #111827 !important;
outline: none !important;
}
.bw-wrap .bw-pass-wrap {
position: relative !important;
display: block !important;
width: 100% !important;
}
.bw-wrap .bw-pass-wrap .bw-form-input,
.bw-wrap .bw-pass-wrap input[type="password"],
.bw-wrap .bw-pass-wrap input[type="text"] {
width: 100% !important;
min-height: 50px !important;
padding-right: 66px !important;
}
/* Hide the browser-native password reveal/clear controls; keep only .bw-pass-toggle. */
.bw-wrap .bw-pass-wrap input[type="password"]::-ms-reveal,
.bw-wrap .bw-pass-wrap input[type="password"]::-ms-clear {
display: none !important;
width: 0 !important;
height: 0 !important;
}
.bw-wrap .bw-pass-wrap input[type="password"]::-webkit-credentials-auto-fill-button,
.bw-wrap .bw-pass-wrap input[type="password"]::-webkit-contacts-auto-fill-button {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
position: absolute !important;
right: 0 !important;
}
.bw-wrap .bw-pass-toggle {
top: 50% !important;
right: 10px !important;
width: 40px !important;
min-width: 40px !important;
max-width: 40px !important;
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
transform: translateY(-50%) !important;
font-size: 18px !important;
}
.bw-wrap .bw-pass-toggle:hover,
.bw-wrap .bw-pass-toggle:focus-visible {
background: #e0e7ff !important;
color: #312e81 !important;
outline: none !important;
}
.bw-wrap .bw-form-input,
.bw-wrap input.bw-form-input,
.bw-wrap select.bw-form-input,
.bw-wrap textarea.bw-form-input {
-webkit-appearance: none !important;
appearance: none !important;
display: block !important;
border-style: solid !important;
box-sizing: border-box !important;
line-height: 1.4 !important;
}
/* Floating Add Blog action and smoother hero load animation. */
.bw-floating-add-btn.Btn {
--black: #000000;
--ch-black: #141414;
--eer-black: #1b1b1b;
--night-rider: #010280;
--white: #ffffff;
--af-white: #f8fafc;
--ch-white: #e1e1e1;
position: fixed !important;
right: max(22px, env(safe-area-inset-right)) !important;
bottom: max(22px, env(safe-area-inset-bottom)) !important;
z-index: 99990 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
border-radius: 8px !important;
cursor: pointer !important;
overflow: hidden !important;
text-decoration: none !important;
transition-duration: .3s !important;
background: #dd1515;
/* linear-gradient(135deg, #010280 0%, #061993 24%, #0C3BAA 52%, #135CC5 78%, #1973D1 100%) !important; */
/* box-shadow:
0 18px 38px rgba(1, 2, 128, .32),
0 0 0 6px rgba(25, 115, 209, .12),
inset 0 1px 0 rgba(255, 255, 255, .18) !important; */
isolation: isolate !important;
}
.bw-floating-add-btn.Btn .sign {
width: 100% !important;
transition-duration: .3s !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.bw-floating-add-btn.Btn .sign svg {
width: 18px !important;
height: 18px !important;
display: block !important;
}
.bw-floating-add-btn.Btn .sign svg path {
fill: var(--af-white) !important;
}
.bw-floating-add-btn.Btn .text {
position: absolute !important;
right: 0 !important;
width: 0 !important;
opacity: 0 !important;
color: var(--af-white) !important;
font-size: 1rem !important;
font-weight: 800 !important;
line-height: 1 !important;
white-space: nowrap !important;
transition-duration: .3s !important;
}
.bw-floating-add-btn.Btn:hover,
.bw-floating-add-btn.Btn:focus-visible {
width: 145px !important;
border-radius: 8px !important;
background: #dd1515;
/* linear-gradient(135deg, #010280 0%, #0C3BAA 36%, #135CC5 68%, #1973D1 100%) !important; */
/* box-shadow:
0 22px 44px rgba(1, 2, 128, .38),
0 0 0 7px rgba(25, 115, 209, .18),
inset 0 1px 0 rgba(255, 255, 255, .24) !important; */
outline: none !important;
}
.bw-floating-add-btn.Btn:hover .sign,
.bw-floating-add-btn.Btn:focus-visible .sign {
width: 34% !important;
padding-left: 16px !important;
padding-right: 5px !important;
}
.bw-floating-add-btn.Btn:hover .text,
.bw-floating-add-btn.Btn:focus-visible .text {
opacity: 1 !important;
width: 66% !important;
padding-left: 1px !important;
padding-right: 14px !important;
}
.bw-floating-add-btn.Btn:active {
transform: translate(2px, 2px) !important;
}
.bw-hero .bw-hero-heading-animate {
animation: bwHeroHeadingLoad .95s .12s cubic-bezier(.16, 1, .3, 1) both !important;
transform-origin: 50% 70% !important;
}
.bw-hero .bw-hero-description-animate {
animation: bwHeroDescriptionLoad .86s .28s cubic-bezier(.16, 1, .3, 1) both !important;
}
.bw-hero .bw-hero-description-animate::after {
content: "" !important;
display: block !important;
width: min(440px, 74%) !important;
height: 3px !important;
margin: .9rem auto 0 !important;
border-radius: 999px !important;
background: linear-gradient(90deg, transparent, rgba(255, 212, 71, .92), rgba(0, 213, 232, .9), transparent) !important;
opacity: 0;
transform: scaleX(.24);
animation: bwHeroAccentLineLoad .72s .58s cubic-bezier(.16, 1, .3, 1) both !important;
}
@keyframes bwHeroHeadingLoad {
0% {
opacity: 0;
transform: translate3d(0, 24px, 0) scale(.97);
filter: blur(12px);
}
62% {
opacity: 1;
transform: translate3d(0, -3px, 0) scale(1.012);
filter: blur(0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
filter: blur(0);
}
}
@keyframes bwHeroDescriptionLoad {
0% {
opacity: 0;
transform: translate3d(0, 18px, 0);
filter: blur(9px);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
filter: blur(0);
}
}
@keyframes bwHeroAccentLineLoad {
0% {
opacity: 0;
transform: scaleX(.24);
}
100% {
opacity: 1;
transform: scaleX(1);
}
}
@media (max-width: 640px) {
.bw-floating-add-btn.Btn {
right: max(16px, env(safe-area-inset-right)) !important;
bottom: max(16px, env(safe-area-inset-bottom)) !important;
}
}
@media (prefers-reduced-motion: reduce) {
.bw-floating-add-btn.Btn,
.bw-floating-add-btn.Btn .sign,
.bw-floating-add-btn.Btn .text,
.bw-hero .bw-hero-heading-animate,
.bw-hero .bw-hero-description-animate,
.bw-hero .bw-hero-description-animate::after {
animation: none !important;
transition: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
}
/* Inner-page scrollbar, hero quick links, and smoother scroll reveal. */
html.bw-scrollbar-page,
html.bw-scrollbar-page body {
-ms-overflow-style: auto !important;
scrollbar-width: thin !important;
scrollbar-color: #00a9b7 #eef6f8 !important;
}
html.bw-scrollbar-page::-webkit-scrollbar,
html.bw-scrollbar-page body::-webkit-scrollbar {
display: block !important;
width: 12px !important;
height: 12px !important;
}
html.bw-scrollbar-page::-webkit-scrollbar-track,
html.bw-scrollbar-page body::-webkit-scrollbar-track {
background: linear-gradient(180deg, #ffffff 0%, #eef6f8 100%) !important;
border-left: 1px solid rgba(0, 169, 183, .18) !important;
}
html.bw-scrollbar-page::-webkit-scrollbar-thumb,
html.bw-scrollbar-page body::-webkit-scrollbar-thumb {
min-height: 56px !important;
border: 3px solid #eef6f8 !important;
border-radius: 999px !important;
background: linear-gradient(180deg, #00d5e8 0%, #00a9b7 46%, #123b68 100%) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 16px rgba(0, 169, 183, .22) !important;
}
html.bw-scrollbar-page::-webkit-scrollbar-thumb:hover,
html.bw-scrollbar-page body::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #ffd447 0%, #00a9b7 44%, #07152d 100%) !important;
}
.bw-hero-options {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: .75rem !important;
margin-top: 1rem !important;
}
.bw-hero-option {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 44px !important;
border-radius: 999px !important;
padding: .72rem 1.18rem !important;
border: 1px solid rgba(255, 255, 255, .32) !important;
color: #ffffff !important;
background: rgba(255, 255, 255, .14) !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
font-size: .9rem !important;
font-weight: 950 !important;
line-height: 1 !important;
text-decoration: none !important;
text-shadow: 0 2px 12px rgba(0, 0, 0, .22) !important;
backdrop-filter: blur(12px) saturate(1.15) !important;
-webkit-backdrop-filter: blur(12px) saturate(1.15) !important;
transition: transform .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease !important;
}
.bw-hero-option.is-primary {
background: linear-gradient(135deg, rgba(0, 169, 183, .9), rgba(18, 59, 104, .84)) !important;
border-color: rgba(255, 255, 255, .42) !important;
}
.bw-hero-option.is-light {
background: rgba(255, 255, 255, .92) !important;
color: #07152d !important;
text-shadow: none !important;
}
.bw-hero-option.is-strong {
background: linear-gradient(135deg, rgba(255, 212, 71, .96), rgba(249, 115, 22, .9)) !important;
color: #07152d !important;
text-shadow: none !important;
}
.bw-hero-option:hover,
.bw-hero-option:focus-visible {
transform: translateY(-3px) !important;
border-color: rgba(255, 255, 255, .62) !important;
box-shadow: 0 18px 38px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .28) !important;
outline: none !important;
}
.bw-hero.bw-hero-small .bw-hero-inner > div {
min-height: 97px !important;
padding-top: .75rem !important;
padding-bottom: .75rem !important;
}
.bw-hero-write .bw-hero-options {
display: none !important;
}
.bw-motion-ready .bw-wrap .bw-reveal,
.bw-motion-ready .bw-wrap .bw-reveal-up,
.bw-motion-ready .bw-wrap .bw-reveal-left,
.bw-motion-ready .bw-wrap .bw-reveal-right {
transition:
opacity .92s var(--bw-motion-ease),
transform .98s var(--bw-motion-ease),
filter .98s var(--bw-motion-ease) !important;
}
.bw-motion-ready .bw-wrap .bw-reveal,
.bw-motion-ready .bw-wrap .bw-reveal-up {
transform: translate3d(0, 28px, 0) !important;
}
.bw-motion-ready .bw-wrap .bw-reveal-left {
transform: translate3d(-30px, 20px, 0) !important;
}
.bw-motion-ready .bw-wrap .bw-reveal-right {
transform: translate3d(30px, 20px, 0) !important;
}
.bw-motion-ready .bw-wrap .bw-reveal.is-visible {
transform: translate3d(0, 0, 0) !important;
}
@media (max-width: 768px) {
.bw-hero-options {
gap: .55rem !important;
margin-top: .85rem !important;
}
.bw-hero-option {
min-height: 40px !important;
padding: .65rem .95rem !important;
font-size: .82rem !important;
}
.bw-motion-ready .bw-wrap .bw-reveal-left,
.bw-motion-ready .bw-wrap .bw-reveal-right {
transform: translate3d(0, 26px, 0) !important;
}
}
/* Voia-inspired hero text choreography: wave title, typewriter subtitle, search fade-up. */
.bw-hero .bw-hero-wave-heading {
animation: none !important;
overflow: visible !important;
text-wrap: balance;
perspective: 900px !important;
}
.bw-hero .bw-wave-word {
display: inline-block !important;
white-space: nowrap !important;
font-size: smaller;
}
.bw-hero .bw-wave-space {
display: inline !important;
white-space: pre !important;
}
.bw-hero .bw-wave-char {
display: inline-block !important;
opacity: 0;
transform: translate3d(0, .38em, 0);
transform-origin: 50% 100% !important;
filter: none;
animation: bwHeroWaveCharIn .58s var(--bw-wave-delay, 0ms) cubic-bezier(.2, .8, .2, 1) both !important;
will-change: opacity, transform !important;
}
.bw-hero .bw-hero-typewriter {
animation: none !important;
min-height: 3.6em !important;
overflow: visible !important;
}
.bw-hero .bw-typewriter-text {
display: inline-block !important;
max-width: 100% !important;
overflow: hidden !important;
padding-right: .08em !important;
border-right: .08em solid currentColor;
opacity: 0;
clip-path: inset(0 100% 0 0);
animation:
bwHeroTypewriter var(--bw-subtitle-duration, 1800ms) steps(var(--bw-typewriter-steps, 52), end) var(--bw-subtitle-delay, 1100ms) both,
bwHeroTypewriterCaret .8s steps(1, end) var(--bw-subtitle-delay, 1100ms) infinite !important;
will-change: clip-path, opacity !important;
}
.bw-hero .bw-hero-description-animate::after {
animation-delay: calc(var(--bw-subtitle-delay, 1100ms) + var(--bw-subtitle-duration, 1800ms) + 90ms) !important;
}
.bw-hero form.bw-search-form {
opacity: 0;
transform: translate3d(0, 28px, 0) scale(.985);
filter: blur(8px);
animation: bwHeroSearchFadeUp .82s var(--bw-search-delay, 2600ms) cubic-bezier(.16, 1, .3, 1) both !important;
will-change: opacity, transform, filter !important;
}
@keyframes bwHeroWaveCharIn {
0% {
opacity: 0;
transform: translate3d(0, .38em, 0);
}
58% {
opacity: 1;
transform: translate3d(0, -.08em, 0);
}
78% {
opacity: 1;
transform: translate3d(0, .025em, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes bwHeroTypewriter {
0% {
opacity: 1;
clip-path: inset(0 100% 0 0);
}
100% {
opacity: 1;
clip-path: inset(0 0 0 0);
}
}
@keyframes bwHeroTypewriterCaret {
0%, 45% { border-right-color: currentColor; }
46%, 100% { border-right-color: transparent; }
}
@keyframes bwHeroSearchFadeUp {
0% {
opacity: 0;
transform: translate3d(0, 28px, 0) scale(.985);
filter: blur(8px);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
filter: blur(0);
}
}
@media (max-width: 768px) {
.bw-hero .bw-wave-char {
animation-duration: .78s !important;
}
.bw-hero .bw-hero-typewriter {
min-height: 4.8em !important;
}
}
@media (prefers-reduced-motion: reduce) {
.bw-hero .bw-wave-char,
.bw-hero .bw-typewriter-text,
.bw-hero form.bw-search-form {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
clip-path: none !important;
}
.bw-hero .bw-typewriter-text {
border-right-color: transparent !important;
}
}
/* Detail description images: keep the hover container and image corners together. */
.bw-content figure {
max-width: 100% !important;
width: fit-content !important;
overflow: hidden !important;
border-radius: 22px !important;
background: transparent !important;
line-height: 0 !important;
}
.bw-content figure.aligncenter {
display: table !important;
margin-left: auto !important;
margin-right: auto !important;
}
.bw-content figure img {
display: block !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
border-radius: inherit !important;
box-shadow: none !important;
}
.bw-content figure figcaption {
line-height: 1.55 !important;
padding: .65rem .85rem !important;
background: rgba(255,255,255,.92) !important;
}
/* Footer headings: cleaner display typography and a polished accent. */
.bw-site-footer-title,
.bw-site-footer .bw-footer-col-title {
font-family: "Poppins", "Montserrat", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
letter-spacing: 0 !important;
line-height: 1.15 !important;
}
.bw-site-footer-title {
font-size: clamp(1.45rem, 2vw, 1.85rem) !important;
font-weight: 900 !important;
color: #ffffff !important;
text-shadow: 0 10px 24px rgba(0,0,0,.22) !important;
}
.bw-site-footer .bw-footer-col-title {
position: relative !important;
display: inline-block !important;
margin-bottom: 1rem !important;
padding-bottom: .45rem !important;
font-size: 1.08rem !important;
font-weight: 900 !important;
color: #ffd66b !important;
text-transform: uppercase !important;
}
.bw-site-footer .bw-footer-col-title::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
bottom: 0 !important;
width: 42px !important;
height: 3px !important;
border-radius: 999px !important;
background: linear-gradient(90deg, #ffd66b, #38d9c8) !important;
box-shadow: 0 0 18px rgba(56,217,200,.35) !important;
}
/* Add Blog hero: fill the whole hero with the full 1366x312 banner artwork. */
.bw-hero-write,
.bw-hero-write.bw-hero-small {
min-height: clamp(180px, calc(100vw * 312 / 1366), 312px) !important;
height: auto !important;
aspect-ratio: 1366 / 312 !important;
background-image:
linear-gradient(110deg, rgba(15,23,42,.48), rgba(249,115,22,.14), rgba(67,56,202,.12)),
url("../image/Add.png") !important;
background-size: 100% 100%, 100% 100% !important;
background-position: center center, center center !important;
background-repeat: no-repeat, no-repeat !important;
}
/* Admin/dashboard hero: use dashboard.png's real 1466x550 ratio so it is not clipped. */
.bw-hero-dashboard,
.bw-hero-dashboard.bw-hero-small {
min-height: clamp(260px, calc(100vw * 550 / 1466), 550px) !important;
height: auto !important;
aspect-ratio: 1466 / 550 !important;
background-image:
linear-gradient(110deg, rgba(15,23,42,.25), rgba(30,64,175,.24), rgba(236,72,153,.14)),
url("../image/dashboard.png") !important;
background-size: 100% 100%, 100% 100% !important;
background-position: center center, center center !important;
background-repeat: no-repeat, no-repeat !important;
}
/* Login/signup hero and form images: fill their areas with the full local artwork. */
.bw-hero-auth,
.bw-hero-auth.bw-hero-small {
min-height: clamp(180px, calc(100vw * 312 / 1366), 312px) !important;
height: auto !important;
aspect-ratio: 1366 / 312 !important;
background-image:
linear-gradient(110deg, rgba(15,23,42,.62), rgba(67,56,202,.24), rgba(236,72,153,.14)),
url("../image/login.png") !important;
background-size: 100% 100%, 100% 100% !important;
background-position: center center, center center !important;
background-repeat: no-repeat, no-repeat !important;
}
.bw-auth-shell .bw-auth-image {
background-image:
linear-gradient(135deg, rgba(7,19,41,.18), rgba(7,19,41,.08)),
url("../image/login.png") !important;
background-size: 100% 100%, 100% 100% !important;
background-position: center center, center center !important;
background-repeat: no-repeat, no-repeat !important;
}
.bw-auth-shell.is-signup .bw-auth-image {
background-image:
linear-gradient(135deg, rgba(49,46,129,.18), rgba(236,72,153,.08)),
url("../image/create.png") !important;
background-size: 100% 100%, 100% 100% !important;
background-position: center center, center center !important;
background-repeat: no-repeat, no-repeat !important;
}
/* Inner pages only: keep the hero compact and end just below the description line. */
.bw-hero:not(.bw-hero-home),
.bw-hero:not(.bw-hero-home).bw-hero-small {
min-height: 0 !important;
height: auto !important;
max-height: none !important;
aspect-ratio: auto !important;
}
.bw-hero:not(.bw-hero-home) > .bw-hero-inner {
padding-bottom: .85rem !important;
}
.bw-hero:not(.bw-hero-home) > .bw-hero-inner > div {
min-height: 0 !important;
padding-top: .25rem !important;
padding-bottom: .35rem !important;
}
.bw-hero:not(.bw-hero-home) .bw-hero-description-animate::after {
margin-top: .72rem !important;
margin-bottom: 0 !important;
}
/* Home hero: slightly smaller section and text while keeping the home layout intact. */
.bw-hero-home > .bw-hero-inner {
padding-bottom: 1.1rem !important;
}
.bw-hero-home > .bw-hero-inner > div {
min-height: 190px !important;
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
.bw-hero-home .bw-hero-wave-heading {
font-size: clamp(2.35rem, 5vw, 3.65rem) !important;
line-height: 1.05 !important;
margin-bottom: .65rem !important;
}
.bw-hero-home .bw-hero-typewriter {
min-height: 2.9em !important;
margin-bottom: 1.15rem !important;
font-size: clamp(.96rem, 1.5vw, 1.08rem) !important;
line-height: 1.55 !important;
}
.bw-hero-home .bw-hero-description-animate::after {
margin-top: .65rem !important;
}
.bw-hero-home .bw-hero-inner > div > span:first-child {
margin-bottom: .65rem !important;
padding: .38rem .85rem !important;
font-size: .68rem !important;
}
.bw-hero-home .bw-search-form {
max-width: 780px !important;
padding: .65rem !important;
}
.bw-hero-home .bw-search-form input,
.bw-hero-home .bw-search-form button {
min-height: 50px !important;
}
/* =========================================================
Final requested update: full-width hero images without clipping
(Home page image is intentionally left unchanged.)
========================================================= */
.bw-hero-auth,
.bw-hero-auth.bw-hero-small {
background-image:
linear-gradient(110deg, rgba(7,21,45,.36), rgba(7,21,45,.16)),
url("../image/AuthHero.png") !important;
background-size: 100% 100%, 100% 100% !important;
background-position: center center, center center !important;
background-repeat: no-repeat, no-repeat !important;
}
.bw-hero-write,
.bw-hero-write.bw-hero-small {
background-image:
linear-gradient(110deg, rgba(7,21,45,.44), rgba(124,45,18,.18)),
url("../image/AddHero.png") !important;
background-size: 100% 100%, 100% 100% !important;
background-position: center center, center center !important;
background-repeat: no-repeat, no-repeat !important;
}
.bw-hero-dashboard,
.bw-hero-dashboard.bw-hero-small {
background-image:
linear-gradient(110deg, rgba(7,21,45,.46), rgba(30,64,175,.18)),
url("../image/DashboardHero.png") !important;
background-size: 100% 100%, 100% 100% !important;
background-position: center center, center center !important;
background-repeat: no-repeat, no-repeat !important;
min-height: 135px !important;
height: auto !important;
aspect-ratio: auto !important;
}
.bw-hero-detail,
.bw-hero-detail.bw-hero-small {
background-image:
linear-gradient(110deg, rgba(7,21,45,.48), rgba(15,23,42,.16)),
url("../image/GeneralHero.png") !important;
background-size: 100% 100%, 100% 100% !important;
background-position: center center, center center !important;
background-repeat: no-repeat, no-repeat !important;
}
.bw-hero-general,
.bw-hero-profile,
.bw-hero-general.bw-hero-small,
.bw-hero-profile.bw-hero-small {
background-image:
linear-gradient(110deg, rgba(7,21,45,.44), rgba(14,165,233,.14)),
url("../image/GeneralHero.png") !important;
background-size: 100% 100%, 100% 100% !important;
background-position: center center, center center !important;
background-repeat: no-repeat, no-repeat !important;
}
/* Keep original hero sizes; only change how background images are drawn. */
.bw-hero:not(.bw-hero-home),
.bw-hero:not(.bw-hero-home).bw-hero-small {
min-height: 135px !important;
height: auto !important;
aspect-ratio: auto !important;
max-height: none !important;
}
.bw-hero:not(.bw-hero-home):not(.bw-hero-small) {
min-height: 297px !important;
}
.bw-auth-shell .bw-auth-image {
background-image:
linear-gradient(135deg, rgba(7,19,41,.24), rgba(7,19,41,.10)),
url("../image/LoginSide.png") !important;
background-size: 100% 100%, 100% 100% !important;
background-position: center center, center center !important;
background-repeat: no-repeat, no-repeat !important;
}
.bw-auth-shell.is-signup .bw-auth-image {
background-image:
linear-gradient(135deg, rgba(7,19,41,.24), rgba(49,46,129,.12)),
url("../image/CreateSide.png") !important;
background-size: 100% 100%, 100% 100% !important;
background-position: center center, center center !important;
background-repeat: no-repeat, no-repeat !important;
}
/* Contact info hover effect now matches the other footer link columns. */
.bw-site-footer-pages a,
.bw-site-footer-links a,
.bw-site-footer-contact a {
display: inline-flex !important;
align-items: center !important;
width: max-content !important;
max-width: 100% !important;
transition: color .22s ease, transform .22s ease, opacity .22s ease !important;
}
.bw-site-footer-pages a:hover,
.bw-site-footer-links a:hover,
.bw-site-footer-contact a:hover,
.bw-site-footer-pages a:focus-visible,
.bw-site-footer-links a:focus-visible,
.bw-site-footer-contact a:focus-visible {
color: #fed7aa !important;
opacity: 1 !important;
outline: none !important;
}
/* .bw-site-footer-email .bw-site-footer-contact-icon,
.bw-site-footer-phone .bw-site-footer-contact-icon {
transition: transform .22s ease, color .22s ease !important;
} */
.bw-site-footer-email:hover .bw-site-footer-contact-icon,
.bw-site-footer-phone:hover .bw-site-footer-contact-icon {
color: #fed7aa !important;
}
/* More glassy + stronger blur effect for the Blogs navbar button only. */
.bw-hero .bw-nav-blogs {
position: relative !important;
isolation: isolate !important;
overflow: hidden !important;
background: rgba(255,255,255,.20) !important;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,.38) !important;
-webkit-backdrop-filter: blur(18px) saturate(165%) !important;
backdrop-filter: blur(18px) saturate(165%) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.52),
inset 0 -1px 0 rgba(255,255,255,.12),
0 12px 30px rgba(7,21,45,.22) !important;
}
.bw-hero .bw-nav-blogs::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: -1 !important;
border-radius: inherit !important;
background:
radial-gradient(circle at 20% 0%, rgba(255,255,255,.60), transparent 34%),
linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.07)) !important;
opacity: .95 !important;
}
.bw-hero .bw-nav-blogs:hover,
.bw-hero .bw-nav-blogs:focus-visible {
background: rgba(255,255,255,.28) !important;
border-color: rgba(255,255,255,.58) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.72),
0 16px 38px rgba(7,21,45,.30) !important;
transform: translateY(-1px) !important;
}
/* =========================================================
Final correction: horizontal hero images and contact hover
- Home hero stays unchanged.
- Other hero images use new wide 1366x312 assets.
- Hero layout/height stays as before.
- Contact info only changes color on hover, no movement/scale.
========================================================= */
.bw-hero-auth,
.bw-hero-auth.bw-hero-small {
background-image:
linear-gradient(110deg, rgba(7, 21, 45, .10), rgba(7, 21, 45, .18)),
url("../image/HomeHero.png") !important;
/* background-size: cover, cover !important; */
background-position: center center, center center !important;
background-repeat: no-repeat, no-repeat !important;
}
.bw-hero-write,
.bw-hero-write.bw-hero-small {
background-image:
linear-gradient(110deg, rgba(7, 21, 45, .56), rgba(124, 45, 18, .20)),
url("../image/AddHero.png") !important;
background-size: cover, cover !important;
background-position: center center, center center !important;
background-repeat: no-repeat, no-repeat !important;
}
.bw-hero-dashboard,
.bw-hero-dashboard.bw-hero-small {
background-image:
linear-gradient(110deg, rgba(7, 21, 45, .45), rgba(30, 64, 175, .20)),
url("../image/DashboardHero.png") !important;
background-size: cover, cover !important;
background-position: center center, center center !important;
background-repeat: no-repeat, no-repeat !important;
}
.bw-hero-detail,
.bw-hero-detail.bw-hero-small {
background-image:
linear-gradient(110deg, rgba(7, 21, 45, .55), rgba(15, 23, 42, .18)),
url("../image/GeneralHero.png") !important;
background-size: cover, cover !important;
background-position: center center, center center !important;
background-repeat: no-repeat, no-repeat !important;
}
.bw-hero-general,
.bw-hero-profile,
.bw-hero-general.bw-hero-small,
.bw-hero-profile.bw-hero-small {
background-image:
linear-gradient(110deg, rgba(7, 21, 45, .55), rgba(14, 165, 233, .15)),
url("../image/GeneralHero.png") !important;
background-size: cover, cover !important;
background-position: center center, center center !important;
background-repeat: no-repeat, no-repeat !important;
}
/* Keep hero section size exactly as before; only pin non-home hero images during page scroll. */
.bw-hero:not(.bw-hero-home) {
background-attachment: fixed !important;
}
/* Contact info hover: color only, no text movement/scale. */
.bw-site-footer-contact a,
.bw-site-footer-contact .bw-site-footer-contact-icon {
transform: none !important;
transition: color .22s ease, opacity .22s ease !important;
}
.bw-site-footer-contact a:hover,
.bw-site-footer-contact a:focus-visible {
color: #fed7aa !important;
transform: none !important;
opacity: 1 !important;
outline: none !important;
}
/* Final field rounding: match login inputs to create account and round home search. */
.bw-wrap .bw-login-ajax-form .bw-form-input,
.bw-wrap .bw-login-ajax-form .bw-pass-wrap .bw-form-input {
border-radius: 13px !important;
}
.bw-hero-home .bw-search-form input[name="search"] {
border-radius: 16px !important;
}
/* v60 final TinyMCE toolbar dropdown fix
Removes the extra tiny second arrow column from Paragraph, Font and Font Size
dropdowns and keeps one clean arrow inside the main button. */
.bw-editor-box .mce-listbox,
.bw-edit-modal-box .mce-listbox {
display: inline-flex !important;
align-items: center !important;
overflow: hidden !important;
border-radius: 4px !important;
}
/* Delete the separate arrow column after the dropdown title. */
.bw-editor-box .mce-listbox > .mce-open,
.bw-edit-modal-box .mce-listbox > .mce-open,
.bw-editor-box .mce-listbox button.mce-open,
.bw-edit-modal-box .mce-listbox button.mce-open,
.bw-editor-box .mce-listbox .mce-open,
.bw-edit-modal-box .mce-listbox .mce-open {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
}
.bw-editor-box .mce-listbox .mce-caret,
.bw-edit-modal-box .mce-listbox .mce-caret,
.bw-editor-box .mce-listbox i.mce-caret,
.bw-edit-modal-box .mce-listbox i.mce-caret {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
.bw-editor-box .mce-listbox button,
.bw-edit-modal-box .mce-listbox button {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 6px !important;
min-width: 104px !important;
padding: 7px 26px 7px 10px !important;
background-image: none !important;
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
}
.bw-editor-box .mce-fontselect button,
.bw-edit-modal-box .mce-fontselect button {
min-width: 130px !important;
}
.bw-editor-box .mce-fontsizeselect button,
.bw-edit-modal-box .mce-fontsizeselect button {
min-width: 82px !important;
}
/* Remove any old generated arrows and use only this one span. */
.bw-editor-box .mce-listbox button::before,
.bw-editor-box .mce-listbox button::after,
.bw-edit-modal-box .mce-listbox button::before,
.bw-edit-modal-box .mce-listbox button::after {
display: none !important;
content: none !important;
}
.bw-editor-box .mce-listbox .bw-single-caret,
.bw-edit-modal-box .mce-listbox .bw-single-caret {
position: absolute !important;
right: 9px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 0 !important;
height: 0 !important;
border-left: 4px solid transparent !important;
border-right: 4px solid transparent !important;
border-top: 5px solid #0891b2 !important;
pointer-events: none !important;
}
/* v61 editor dropdown arrow: bigger single caret that covers TinyMCE's built-in double caret. */
.bw-editor-box .mce-listbox,
.bw-edit-modal-box .mce-listbox {
position: relative !important;
}
.bw-editor-box .mce-listbox button,
.bw-edit-modal-box .mce-listbox button {
padding-right: 34px !important;
}
.bw-editor-box .mce-listbox .bw-single-caret,
.bw-edit-modal-box .mce-listbox .bw-single-caret {
position: absolute !important;
right: 4px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 24px !important;
height: 24px !important;
border: 0 !important;
background: #f6f9fc !important;
border-radius: 4px !important;
pointer-events: none !important;
z-index: 9999 !important;
}
.bw-editor-box .mce-listbox .bw-single-caret::after,
.bw-edit-modal-box .mce-listbox .bw-single-caret::after {
content: "" !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -35%) !important;
width: 0 !important;
height: 0 !important;
border-left: 6px solid transparent !important;
border-right: 6px solid transparent !important;
border-top: 8px solid #0891b2 !important;
}
.bw-editor-box .mce-listbox .mce-caret,
.bw-edit-modal-box .mce-listbox .mce-caret,
.bw-editor-box .mce-listbox i.mce-caret,
.bw-edit-modal-box .mce-listbox i.mce-caret {
opacity: 0 !important;
visibility: hidden !important;
}
.bw-field-hint { margin-top: -0.25rem; }
/* Final rich-content color fix: allow TinyMCE/user text colors to display on blog details. */
.bw-content [style*="color"] {
color: unset;
}
.bw-content span,
.bw-content p,
.bw-content li,
.bw-content div {
color: inherit;
}
.bw-content span[style*="color"],
.bw-content p[style*="color"],
.bw-content li[style*="color"],
.bw-content div[style*="color"],
.bw-content strong[style*="color"],
.bw-content b[style*="color"],
.bw-content em[style*="color"],
.bw-content i[style*="color"] {
/* No !important here so the inline TinyMCE color remains visible. */
}
.bw-content pre,
.bw-content .bw-editor-code-block {
background: #0f172a !important;
color: #e2e8f0 !important;
}
.bw-content pre *,
.bw-content .bw-editor-code-block * {
color: inherit !important;
background: transparent !important;
}
.bw-content code:not(pre code),
.bw-content :not(pre) > code {
color: #be123c !important;
background: #f1f5f9 !important;
}
/* v72 FINAL HERO IMAGE FIT UPDATE
Keep every hero image fixed while page content scrolls over the section. */
.bw-hero-home,
.bw-hero-home.bw-hero-small {
background-attachment: fixed !important;
background-color: #07152d !important;
background-size: auto !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
.bw-hero:not(.bw-hero-home),
.bw-hero:not(.bw-hero-home).bw-hero-small {
background-attachment: fixed !important;
background-color: #07152d !important;
background-size: 100% 100%, auto !important;
background-position: top left !important;
background-repeat: no-repeat !important;
}
.bw-hero-auth,
.bw-hero-auth.bw-hero-small {
background-image:
linear-gradient(110deg, rgba(15,23,42,.0), rgba(30,64,175,.18), rgba(236,72,153,.0)),
url("../image/LoginSignup.png") !important;
}
.bw-hero-write,
.bw-hero-write.bw-hero-small {
background-image:
linear-gradient(110deg, rgba(15,23,42,.48), rgba(249,115,22,.12), rgba(67,56,202,.10)),
url("../image/AddHero.png") !important;
}
.bw-hero-dashboard,
.bw-hero-dashboard.bw-hero-small {
background-image:
linear-gradient(110deg, rgba(7,21,45,.10), rgba(30,64,175,.25), rgba(15,23,42,.10)),
url("../image/dashboard1.png") !important;
}
.bw-hero-detail,
.bw-hero-detail.bw-hero-small {
background-image:
linear-gradient(110deg, rgba(15,23,42,.25), rgba(124,45,18,.14), rgba(15,23,42,.10)),
url("../image/GeneralHero.png") !important;
}
.bw-hero-general,
.bw-hero-profile,
.bw-hero-general.bw-hero-small,
.bw-hero-profile.bw-hero-small {
background-image:
linear-gradient(110deg, rgba(7,21,45,.52), rgba(14,165,233,.12), rgba(15,23,42,.10)),
url("../image/GeneralHero.png") !important;
}
/* Final TinyMCE Add Blog toolbar dropdown polish.
Cover TinyMCE's native double-arrow area and draw one small down arrow. */
.bw-editor-box .mce-toolbar .mce-btn,
.bw-edit-modal-box .mce-toolbar .mce-btn {
border: 1px solid rgba(148, 163, 184, .48) !important;
border-radius: 4px !important;
background: #f8fafc !important;
box-shadow: none !important;
margin: 1px 3px 3px 0 !important;
}
.bw-editor-box .mce-toolbar .mce-btn button,
.bw-edit-modal-box .mce-toolbar .mce-btn button {
min-height: 28px !important;
padding: 4px 7px !important;
}
.bw-editor-box .mce-listbox,
.bw-edit-modal-box .mce-listbox {
position: relative !important;
display: inline-flex !important;
align-items: stretch !important;
overflow: hidden !important;
background: #f8fafc !important;
}
.bw-editor-box .mce-styleselect button:not(.mce-open),
.bw-edit-modal-box .mce-styleselect button:not(.mce-open),
.bw-editor-box .mce-formatselect button:not(.mce-open),
.bw-edit-modal-box .mce-formatselect button:not(.mce-open) {
width: 86px !important;
min-width: 86px !important;
max-width: 86px !important;
}
.bw-editor-box .mce-fontselect button:not(.mce-open),
.bw-edit-modal-box .mce-fontselect button:not(.mce-open) {
width: 92px !important;
min-width: 92px !important;
max-width: 92px !important;
}
.bw-editor-box .mce-fontsizeselect button:not(.mce-open),
.bw-edit-modal-box .mce-fontsizeselect button:not(.mce-open) {
width: 58px !important;
min-width: 58px !important;
max-width: 58px !important;
}
.bw-editor-box .mce-listbox button:not(.mce-open),
.bw-edit-modal-box .mce-listbox button:not(.mce-open) {
position: relative !important;
margin: 0 !important;
padding: 4px 6px !important;
background: #f8fafc !important;
border: 0 !important;
box-shadow: none !important;
}
.bw-editor-box .mce-listbox .mce-txt,
.bw-edit-modal-box .mce-listbox .mce-txt {
display: block !important;
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.bw-editor-box .mce-listbox .mce-open,
.bw-edit-modal-box .mce-listbox .mce-open,
.bw-editor-box .mce-listbox button.mce-open,
.bw-edit-modal-box .mce-listbox button.mce-open {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 22px !important;
min-width: 22px !important;
max-width: 22px !important;
min-height: 28px !important;
height: 28px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-left: 1px solid rgba(148, 163, 184, .42) !important;
background: #f8fafc !important;
color: #0891b2 !important;
box-shadow: none !important;
overflow: hidden !important;
cursor: pointer !important;
}
.bw-editor-box .mce-listbox .mce-open::before,
.bw-edit-modal-box .mce-listbox .mce-open::before,
.bw-editor-box .mce-listbox button.mce-open::before,
.bw-edit-modal-box .mce-listbox button.mce-open::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
display: block !important;
background: #f8fafc !important;
z-index: 1 !important;
}
.bw-editor-box .mce-listbox .mce-open::after,
.bw-edit-modal-box .mce-listbox .mce-open::after,
.bw-editor-box .mce-listbox button.mce-open::after,
.bw-edit-modal-box .mce-listbox button.mce-open::after {
content: "" !important;
position: relative !important;
z-index: 2 !important;
display: block !important;
width: 0 !important;
height: 0 !important;
margin-top: 2px !important;
border-left: 4px solid transparent !important;
border-right: 4px solid transparent !important;
border-top: 5px solid currentColor !important;
border-bottom: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.bw-editor-box .mce-listbox .mce-caret,
.bw-edit-modal-box .mce-listbox .mce-caret,
.bw-editor-box .mce-listbox i.mce-caret,
.bw-edit-modal-box .mce-listbox i.mce-caret,
.bw-editor-box .mce-listbox .bw-single-caret,
.bw-edit-modal-box .mce-listbox .bw-single-caret {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
pointer-events: none !important;
}
.bw-editor-box .mce-toolbar .mce-btn:hover,
.bw-editor-box .mce-toolbar .mce-btn:focus,
.bw-editor-box .mce-toolbar .mce-btn.mce-active,
.bw-edit-modal-box .mce-toolbar .mce-btn:hover,
.bw-edit-modal-box .mce-toolbar .mce-btn:focus,
.bw-edit-modal-box .mce-toolbar .mce-btn.mce-active {
border-color: rgba(8, 145, 178, .52) !important;
background: #f8fafc !important;
box-shadow: inset 0 0 0 1px rgba(8, 145, 178, .16) !important;
}
/* TinyMCE does not provide visible glyphs for these two toolbar commands. */
.bw-editor-box .mce-toolbar .mce-i-selectall,
.bw-editor-box .mce-toolbar .mce-i-visualaid,
.bw-edit-modal-box .mce-toolbar .mce-i-selectall,
.bw-edit-modal-box .mce-toolbar .mce-i-visualaid {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 16px !important;
height: 16px !important;
color: #0891b2 !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 13px !important;
font-style: normal !important;
font-weight: 900 !important;
line-height: 1 !important;
opacity: 1 !important;
visibility: visible !important;
}
.bw-editor-box .mce-toolbar .mce-i-selectall::before,
.bw-edit-modal-box .mce-toolbar .mce-i-selectall::before {
content: "A" !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 14px !important;
height: 14px !important;
border: 1px dashed currentColor !important;
border-radius: 2px !important;
color: #0891b2 !important;
background: transparent !important;
}
.bw-editor-box .mce-toolbar .mce-i-visualaid::before,
.bw-edit-modal-box .mce-toolbar .mce-i-visualaid::before {
content: "P" !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 14px !important;
height: 14px !important;
border: 1px dotted currentColor !important;
border-radius: 2px !important;
color: #0f766e !important;
background: transparent !important;
}
.bw-editor-box .mce-toolbar .mce-btn:hover .mce-i-selectall,
.bw-editor-box .mce-toolbar .mce-btn:focus .mce-i-selectall,
.bw-editor-box .mce-toolbar .mce-btn:hover .mce-i-visualaid,
.bw-editor-box .mce-toolbar .mce-btn:focus .mce-i-visualaid,
.bw-edit-modal-box .mce-toolbar .mce-btn:hover .mce-i-selectall,
.bw-edit-modal-box .mce-toolbar .mce-btn:focus .mce-i-selectall,
.bw-edit-modal-box .mce-toolbar .mce-btn:hover .mce-i-visualaid,
.bw-edit-modal-box .mce-toolbar .mce-btn:focus .mce-i-visualaid {
color: #0369a1 !important;
}
/* Preserve pasted editor tables and horizontal rules in public blog content. */
.bw-content hr:not([style]) {
display: block !important;
clear: both !important;
height: 0 !important;
margin: 1.5rem 0 !important;
border: 0 !important;
border-top: 1px solid #94a3b8 !important;
}
.bw-content table {
max-width: 100%;
margin: 1rem 0;
border-collapse: collapse;
border-spacing: 0;
}
.bw-content th,
.bw-content td {
vertical-align: top;
}
.bw-content th:not([style*="padding"]),
.bw-content td:not([style*="padding"]) {
padding: .45rem .6rem;
}
.bw-content table:not([style*="border"]) {
border: 1px solid #cbd5e1;
}
.bw-content th:not([style*="border"]),
.bw-content td:not([style*="border"]) {
border: 1px solid #cbd5e1;
}
.bw-content thead th:not([style*="background"]),
.bw-content thead td:not([style*="background"]) {
background: #f8fafc;
}
/* Stop pasted justified list text from stretching words in the public blog view. */
.bw-content [style*="text-align: justify" i],
.bw-content [style*="text-align:justify" i],
.bw-content [align="justify" i],
.bw-content [style*="text-align: justify" i] li,
.bw-content [style*="text-align:justify" i] li,
.bw-content [align="justify" i] li,
.bw-content ul,
.bw-content ol,
.bw-content li {
text-align: left !important;
text-align-last: auto !important;
word-spacing: normal !important;
}
.bw-content li,
.bw-content li * {
max-width: 100% !important;
text-align: left !important;
text-align-last: auto !important;
word-spacing: normal !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
hyphens: manual !important;
}
.bw-content li span,
.bw-content li a,
.bw-content li mark,
.bw-content li strong,
.bw-content li b,
.bw-content li em,
.bw-content li i,
.bw-content li u,
.bw-content li [style*="background" i],
.bw-content li [style*="border-radius" i],
.bw-content li .bw-editor-badge-blue,
.bw-content li .bw-editor-badge-green,
.bw-content li .bw-editor-badge-orange,
.bw-content li .bw-editor-badge-red,
.bw-content li .bw-editor-badge-purple {
display: inline !important;
width: auto !important;
min-width: 0 !important;
max-width: 100% !important;
vertical-align: baseline !important;
}
.bw-content ul > li,
.bw-content ol > li {
display: list-item !important;
}
.bw-content li pre,
.bw-content li pre *,
.bw-content li .bw-editor-code-block,
.bw-content li .bw-editor-code-block * {
white-space: pre-wrap !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
}
/* Fit the home hero image into the hero section like the other hero images. */
.bw-hero-home,
.bw-hero-home.bw-hero-small {
background-size: 100% 100%, 100% 100% !important;
background-position: center center, center center !important;
background-repeat: no-repeat, no-repeat !important;
}
/* Final hero image normalization: every hero image covers its section cleanly. */
.bw-hero,
.bw-hero.bw-hero-small {
background-color: #07152d !important;
background-size: cover, cover !important;
background-position: center center, center center !important;
background-repeat: no-repeat, no-repeat !important;
}
.bw-hero-home,
.bw-hero-home.bw-hero-small {
background-image:
linear-gradient(112deg, rgba(7,21,45,.30), rgba(18,59,104,.40) 52%, rgba(0,142,155,.20)),
url("../image/HomeHero.png") !important;
}
.bw-hero-auth,
.bw-hero-auth.bw-hero-small {
background-image:
linear-gradient(110deg, rgba(15,23,42,.0), rgba(30,64,175,.18), rgba(236,72,153,.0)),
url("../image/LoginSignup.png") !important;
}
.bw-hero-write,
.bw-hero-write.bw-hero-small {
background-image:
linear-gradient(110deg, rgba(15,23,42,.48), rgba(249,115,22,.12), rgba(67,56,202,.10)),
url("../image/AddHero.png") !important;
}
.bw-hero-dashboard,
.bw-hero-dashboard.bw-hero-small {
background-image:
linear-gradient(110deg, rgba(7,21,45,.10), rgba(30,64,175,.25), rgba(15,23,42,.10)),
url("../image/dashboard1.png") !important;
}
.bw-hero-detail,
.bw-hero-detail.bw-hero-small {
background-image:
linear-gradient(110deg, rgba(15,23,42,.25), rgba(124,45,18,.14), rgba(15,23,42,.10)),
url("../image/DetailHero.png") !important;
}
.bw-hero-general,
.bw-hero-profile,
.bw-hero-general.bw-hero-small,
.bw-hero-profile.bw-hero-small {
background-image:
linear-gradient(110deg, rgba(7,21,45,.52), rgba(14,165,233,.12), rgba(15,23,42,.10)),
url("../image/GeneralHero.png") !important;
}
/* v59.8.3: Home page hero image fit fix only.
Uses the dedicated HomeHero image and keeps other page hero images untouched. */
.bw-hero-home {
background-image: linear-gradient(112deg, rgba(7,21,45,.07), rgba(18,59,104,.10) 52%, rgba(0,142,155,.20)), url("../image/HomeHero.png") !important;
/* background-size: cover !important; */
background-position: center center !important;
background-repeat: no-repeat !important;
min-height: 420px !important;
}
.bw-hero-home .bw-hero-inner {
min-height: 420px !important;
}
@media (max-width: 1023px) {
.bw-hero-home,
.bw-hero-home .bw-hero-inner {
min-height: 360px !important;
}
}
@media (max-width: 640px) {
.bw-hero-home,
.bw-hero-home .bw-hero-inner {
min-height: 330px !important;
}
}
/* =========================================================
v59.8.5 - Restore requested hero/image behavior
---------------------------------------------------------
These final rules intentionally stay at the bottom so they
win over older experimental hero rules above.
========================================================= */
/* Keep the Home page hero at the larger fitted height and preserve the faster hero animation CSS already defined above. */
.bw-hero-home,
.bw-hero-home .bw-hero-inner {
min-height: 420px !important;
}
@media (max-width: 1023px) {
.bw-hero-home,
.bw-hero-home .bw-hero-inner {
min-height: 360px !important;
}
}
@media (max-width: 640px) {
.bw-hero-home,
.bw-hero-home .bw-hero-inner {
min-height: 330px !important;
}
}
/* Add Blog and Blog Detail heroes: keep these sections compact so the image is visible and the blue overlay does not dominate. */
.bw-hero-write,
.bw-hero-write.bw-hero-small,
.bw-hero-detail,
.bw-hero-detail.bw-hero-small {
min-height: 135px !important;
height: auto !important;
aspect-ratio: auto !important;
max-height: none !important;
background-size: cover, cover !important;
background-position: center center, center center !important;
background-repeat: no-repeat, no-repeat !important;
}
/* Add Blog page uses the original AddHero artwork with a light readable overlay. */
.bw-hero-write,
.bw-hero-write.bw-hero-small {
background-image:
linear-gradient(110deg, rgba(7,21,45,.28), rgba(249,115,22,.10), rgba(67,56,202,.08)),
url("../image/AddHero.png") !important;
}
/* Blog Detail page must use the GeneralHero image that was provided earlier. */
.bw-hero-detail,
.bw-hero-detail.bw-hero-small {
background-image:
linear-gradient(110deg, rgba(7,21,45,.30), rgba(15,23,42,.10)),
url("../image/GeneralHero.png") !important;
}
/* Login and Signup form side images restored to the separate better-style images. */
.bw-auth-shell .bw-auth-image {
background-image:
linear-gradient(135deg, rgba(7,19,41,.24), rgba(7,19,41,.10)),
url("../image/LoginSide.png") !important;
background-size: 100% 100%, 100% 100% !important;
background-position: center center, center center !important;
background-repeat: no-repeat, no-repeat !important;
}
.bw-auth-shell.is-signup .bw-auth-image {
background-image:
linear-gradient(135deg, rgba(7,19,41,.24), rgba(49,46,129,.12)),
url("../image/CreateSide.png") !important;
background-size: 100% 100%, 100% 100% !important;
background-position: center center, center center !important;
background-repeat: no-repeat, no-repeat !important;
}
/* ---------------------------------------------------------
Final detail page fixes
---------------------------------------------------------
- Blog description content must sit directly on the detail page background.
- Hover animation should scale only the actual image, not the whole card.
- Small main images should use a natural-width wrapper so no large empty
white card appears behind or below the image.
--------------------------------------------------------- */
.bw-detail-box .bw-content {
background: transparent !important;
padding: 0 !important;
box-shadow: none !important;
border: 0 !important;
}
.bw-detail-box .bw-content [style*="background"],
.bw-detail-box .bw-content [style*="background-color"] {
background: transparent !important;
background-color: transparent !important;
}
.bw-detail-media,
.bw-detail-media:hover {
transform: none !important;
}
.bw-detail-media:hover .bw-detail-image,
.bw-detail-media:hover img {
transform: scale(1.015) !important;
filter: saturate(1.04) contrast(1.02) !important;
}
.bw-detail-media--natural {
width: fit-content !important;
max-width: 100% !important;
justify-self: center !important;
align-self: center !important;
background: transparent !important;
}
.bw-detail-media--natural .bw-detail-image,
.bw-detail-media--natural img {
width: auto !important;
max-width: 100% !important;
height: auto !important;
display: block !important;
}
/* ---------------------------------------------------------
Final blog detail image/content correction - v59.8.7
---------------------------------------------------------
Keeps the main blog image at the original detail-page size,
removes only the visible card/background behind that image,
and lets the image scale on hover without being clipped.
--------------------------------------------------------- */
.bw-detail-box .bw-content {
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
.bw-detail-box .bw-content *:not(img):not(video):not(iframe) {
background: transparent !important;
background-color: transparent !important;
}
.bw-detail-box .bw-detail-main-grid {
align-items: center !important;
}
.bw-detail-box .bw-detail-media,
.bw-detail-box .bw-detail-media.bw-detail-media--natural {
width: 100% !important;
max-width: none !important;
justify-self: stretch !important;
align-self: center !important;
overflow: visible !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
transform: none !important;
}
.bw-detail-box .bw-detail-media:hover {
transform: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.bw-detail-box .bw-detail-image,
.bw-detail-box .bw-detail-media img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
object-fit: contain !important;
border: 1px solid rgba(18,32,51,.12) !important;
border-radius: 22px !important;
box-shadow: 0 22px 58px rgba(7,19,41,.12) !important;
transition: transform .28s ease, filter .28s ease, box-shadow .28s ease !important;
transform-origin: center center !important;
}
.bw-detail-box .bw-detail-media:hover .bw-detail-image,
.bw-detail-box .bw-detail-media:hover img {
transform: scale(1.015) !important;
filter: saturate(1.04) contrast(1.02) !important;
box-shadow: 0 26px 68px rgba(7,19,41,.16) !important;
}
/* ---------------------------------------------------------
Final code block restore - v59.8.8
---------------------------------------------------------
The detail-page content cleanup keeps pasted text backgrounds transparent,
but code blocks must keep their own dark readable block styling.
--------------------------------------------------------- */
.bw-detail-box .bw-content pre,
.bw-detail-box .bw-content .bw-editor-code-block,
.bw-content pre,
.bw-content .bw-editor-code-block {
display: block !important;
margin: 1.2rem 0 !important;
padding: 1rem 1.15rem !important;
border: 1px solid rgba(15, 23, 42, .88) !important;
border-radius: 14px !important;
background: #0f172a !important;
background-color: #0f172a !important;
background-image: none !important;
color: #e2e8f0 !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace !important;
font-size: .95rem !important;
line-height: 1.72 !important;
white-space: pre-wrap !important;
word-break: break-word !important;
overflow-x: auto !important;
box-shadow: 0 16px 34px rgba(15, 23, 42, .16) !important;
}
.bw-detail-box .bw-content pre *,
.bw-detail-box .bw-content .bw-editor-code-block *,
.bw-content pre *,
.bw-content .bw-editor-code-block * {
background: transparent !important;
background-color: transparent !important;
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
white-space: inherit !important;
text-shadow: none !important;
}
.bw-detail-box .bw-content pre code,
.bw-detail-box .bw-content .bw-editor-code-block code,
.bw-content pre code,
.bw-content .bw-editor-code-block code {
display: inline !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: inherit !important;
}
.bw-detail-box .bw-content code:not(pre code),
.bw-detail-box .bw-content :not(pre) > code,
.bw-content code:not(pre code),
.bw-content :not(pre) > code {
display: inline !important;
padding: .12rem .38rem !important;
border-radius: 6px !important;
background: #f1f5f9 !important;
background-color: #f1f5f9 !important;
color: #be123c !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace !important;
font-size: .9em !important;
line-height: 1.45 !important;
}