@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@500;700&display=swap');
:root {
--cw-purple:        #6366F1;
--cw-purple-dark:   #4F46E5;
--cw-purple-deep:   #4338CA;
--cw-purple-soft:   #EEF2FF;
--cw-purple-tint:   #E0E7FF;
--cw-violet:        #8B5CF6;
--cw-teal:          #14B8A6;
--cw-teal-soft:     #ECFDF5;
--cw-ink:           #0F172A;
--cw-body:          #334155;
--cw-muted:         #64748B;
--cw-faint:         #94A3B8;
--cw-bg:            #FFFFFF;
--cw-bg-soft:       #F8FAFC;
--cw-border:        #E2E8F0;
--cw-border-strong: #CBD5E1;
--cw-grad-start:    #F5F3FF;
--cw-grad-mid:      #EEF2FF;
--cw-grad-end:      #ECFEFF;
--cw-radius-sm: 6px;
--cw-radius:    8px;
--cw-radius-md: 12px;
--cw-radius-lg: 16px;
--cw-pill:      9999px;
--cw-font-sans:    'Inter', system-ui, -apple-system, sans-serif;
--cw-font-display: 'Outfit', 'Inter', system-ui, sans-serif;
--cw-font:         'Inter', system-ui, -apple-system, sans-serif;
}
:root,
html,
body,
portal,
.html,
.html.home,
[class*="ac_theme"],
.body.scrollSpaceDefault {
--color-brand:             #6366F1 !important;
--color-brand-hover:       #4F46E5 !important;
--color-brand-active:      #4338CA !important;
--color-brand-bg:          #EEF2FF !important;
--color-overDue:           #6366F1 !important;
--color-unFollow:          #64748B !important;
--reading-guide-line-bg:   #6366F1 !important;
}
html, body {
background: linear-gradient(135deg,
var(--cw-grad-start) 0%,
var(--cw-grad-mid)   50%,
var(--cw-grad-end)   100%
) !important;
background-attachment: fixed !important;
background-size: cover !important;
min-height: 100vh !important;
}
body {
padding-top: 111px !important;
}
body::before {
content: "" !important;
position: fixed !important;
inset: 0 !important;
background:
radial-gradient(circle at 15% 20%, rgba(139, 92, 246, 0.10), transparent 55%),
radial-gradient(circle at 85% 80%, rgba(20, 184, 166, 0.08), transparent 55%),
radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.04), transparent 70%) !important;
pointer-events: none !important;
z-index: 0 !important;
}
portal,
.zd-prtl-body,
.zd-prtl-app,
.zd-prtl-layout,
#container,
#container > div,
#mainContainer,
#layoutContainer,
.AppContainer__appContainer,
.AppContainer__mainContainer,
[class*="AppContainer__"],
.Header__home,
.Header__homeContainer,
.Header__homeContent,
.Header__homeWrapper,
[class*="Header__home"],
[class*="Home__"],
.Home__homeContainer,
.Home__homeWrapper,
.Widget__widgetCont,
[class*="Widget__"]:not([class*="ArticleBody"]),
[class*="ModuleCont__"],
.commonStyle__marginAuto,
.Layout__oneColumn,
.Layout__twoColumn,
.Layout__layout1,
section,
article,
main,
.mainContent,
#content,
.content,
[class*="__container"]:not(.Header__searchSection):not([class*="ArticleBody"]):not(.SearchContainer__searchFilter) {
background-color: transparent !important;
background-image: none !important;
}
html,
body,
portal,
.zd-prtl-body,
.zd-prtl-app,
.zd-prtl-layout,
.AppContainer__appContainer,
[class*="AppContainer__"] {
overflow-x: clip !important;
overflow-y: visible !important;
}
body, html, portal,
.zd-prtl-body, .zd-prtl-app, .zd-prtl-layout {
font-family: var(--cw-font-sans) !important;
color: var(--cw-body) !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
p, span, div, li, td, a, button, input, textarea, select,
nav, label, small, .Header__navbar {
font-family: var(--cw-font-sans) !important;
}
h1, h2, h3, h4, h5, h6,
.Header__searchTitle,
.ContentBox__headerMid,
.Footer__footerInfo h1,
.Footer__footerInfo h2,
.Footer__footerInfo h3,
.Footer__footerInfo h4,
[class*="Footer"] h1,
[class*="Footer"] h2,
[class*="Footer"] h3,
[class*="articleTitle"],
[class*="ArticleTitle"],
[class*="__title"]:not([class*="searchTitle"]):not(input):not(textarea),
.communityTitle,
.topictitle {
font-family: var(--cw-font-display) !important;
color: var(--cw-ink) !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
}
.Header__navbar,
#navBar {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: 1px solid transparent;
box-shadow: none;
transition:
background 0.25s ease,
backdrop-filter 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease;
padding: 12px 24px !important;
min-height: 88px !important;
display: flex !important;
align-items: center !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 999 !important;
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
}
body .Header__navbar,
body #navBar,
.body .Header__navbar,
.body.scrollSpaceDefault .Header__navbar,
html body #navBar {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom-color: transparent;
box-shadow: none;
}
header#headerContainer,
#headerContainer.Header__homeNavbarFixed,
#headerContainer.globalfixednav,
#headerContainer.Header__homeContent,
header.Header__header,
#headerContent,
.Header__searchSection,
.Header__home,
.Header__homeContainer,
.Header__homeContent,
.Header__homeWrapper,
.Header__homeNavbarFixed,
.globalfixednav,
.Header__homeNavbarFixed #headerContent,
.Header__homeNavbarFixed .Header__searchSection,
.globalfixednav #headerContent,
.globalfixednav .Header__searchSection,
.AppContainer__appContainer,
.AppContainer__mainContainer,
[class*="AppContainer__"] {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
filter: none !important;
perspective: none !important;
will-change: auto !important;
contain: none !important;
}
.Header__homeNavbarFixed .Header__navbar,
.globalfixednav .Header__navbar,
.Header__homeNavbarFixed #navBar,
.globalfixednav #navBar {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
}
.ScrollSticky__type1,
[class*="ScrollSticky__"],
[class*="ScrollSticky"],
div[class*="ScrollSticky"],
.AppContainer__breadCrumbs {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
div[style*="padding-top: 59"]:empty,
div[style*="padding-top: 60"]:empty,
div[style*="padding-top:59"]:empty,
div[style*="padding-top:60"]:empty {
padding-top: 0 !important;
height: 0 !important;
display: none !important;
}
.Header__name,
[data-id="portal_name"],
[class*="Header__name"],
[class*="portalName"],
[class*="PortalName"],
.Header__homeNavbarFixed .Header__name,
.Header__homeNavbarFixed [class*="Header__name"],
.globalfixednav .Header__name,
.globalfixednav [class*="Header__name"],
header .Header__name,
#navBar .Header__name,
.Header__navbar .Header__name,
.Header__container .Header__name,
#headerContainer .Header__name,
#headerContainer.Header__homeNavbarFixed .Header__name,
html body .Header__name,
html body #navBar .Header__name,
html body #navBarContainer .Header__name,
html body #headerContainer .Header__homeNavbarFixed .Header__name,
.AppContainer__welcomeHeading,
.Header__globalSearchAlt,
#searchContainer2,
[id^="searchContainer"][class*="globalSearchAlt"],
.Header__navbar .Header__globalSearchAlt,
.Header__homeNavbarFixed .Header__globalSearchAlt,
.Header__homeNavbarFixed .Header__navbar .Header__globalSearchAlt,
.globalfixednav .Header__globalSearchAlt,
.globalfixednav .Header__navbar .Header__globalSearchAlt,
#headerContainer .Header__globalSearchAlt,
#headerContainer.Header__homeNavbarFixed .Header__globalSearchAlt,
#headerContainer.Header__homeNavbarFixed #searchContainer2,
html body .Header__globalSearchAlt,
html body #searchContainer2 {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
max-width: 0 !important;
height: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
font-size: 0 !important;
line-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
position: absolute !important;
left: -99999px !important;
top: -99999px !important;
pointer-events: none !important;
transform: scale(0) !important;
z-index: -9999 !important;
}
#navBar h1, #navBar h2, #navBar h3, #navBar h4, #navBar h5, #navBar h6,
.Header__navbar h1, .Header__navbar h2, .Header__navbar h3,
.Header__navbar h4, .Header__navbar h5, .Header__navbar h6,
.Header__navbar [role="heading"],
#navBar [role="heading"],
#navBarContainer > h1, #navBarContainer > h2, #navBarContainer > h3,
#navBarContainer > h4, #navBarContainer > h5, #navBarContainer > h6,
#headerContainer > h1:not(.Header__searchTitle),
#headerContainer > h2:not(.Header__searchTitle),
#headerContainer > h3:not(.Header__searchTitle),
.Header__homeNavbarFixed h1:not(.Header__searchTitle),
.Header__homeNavbarFixed h2:not(.Header__searchTitle),
.Header__homeNavbarFixed h3:not(.Header__searchTitle),
.globalfixednav h1:not(.Header__searchTitle),
.globalfixednav h2:not(.Header__searchTitle),
.globalfixednav h3:not(.Header__searchTitle) {
display: none !important;
visibility: hidden !important;
}
@media (min-width: 900px) {
.Header__menuTab,
.Header__menuList,
.Header__logo,
.Header__homeNavbarFixed .Header__menuTab,
.Header__homeNavbarFixed .Header__menuList,
.Header__homeNavbarFixed .Header__logo,
.globalfixednav .Header__menuTab,
.globalfixednav .Header__menuList,
.globalfixednav .Header__logo {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
.Header__menuicon,
.Header__homeNavbarFixed .Header__menuicon,
.globalfixednav .Header__menuicon,
#menuIconContainer,
#menuBox {
display: none !important;
}
.Header__navbar .SearchContainer__globalSearch,
.Header__navbar [class*="SearchContainer__"],
.Header__homeNavbarFixed .Header__navbar .SearchContainer__globalSearch,
.globalfixednav .Header__navbar .SearchContainer__globalSearch {
display: none !important;
}
}
@supports not (animation-timeline: scroll()) {
body.cw-scrolled .Header__navbar,
body.cw-scrolled #navBar,
html.cw-scrolled .Header__navbar,
html.cw-scrolled #navBar {
background: rgba(255, 255, 255, 0.92) !important;
backdrop-filter: blur(14px) saturate(180%) !important;
-webkit-backdrop-filter: blur(14px) saturate(180%) !important;
border-bottom-color: rgba(226, 232, 240, 0.5) !important;
box-shadow:
0 1px 3px rgba(15, 23, 42, 0.04),
0 4px 16px rgba(15, 23, 42, 0.04) !important;
}
}
@supports (animation-timeline: scroll()) {
.Header__navbar,
#navBar {
animation: cwNavOnScroll linear both !important;
animation-timeline: scroll(root) !important;
animation-range: 0 80px !important;
}
@keyframes cwNavOnScroll {
from {
background: transparent;
backdrop-filter: blur(0px) saturate(100%);
-webkit-backdrop-filter: blur(0px) saturate(100%);
border-bottom-color: transparent;
box-shadow: 0 0 0 0 rgba(15, 23, 42, 0);
}
to {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(14px) saturate(180%);
-webkit-backdrop-filter: blur(14px) saturate(180%);
border-bottom-color: rgba(226, 232, 240, 0.5);
box-shadow:
0 1px 3px rgba(15, 23, 42, 0.04),
0 4px 16px rgba(15, 23, 42, 0.04);
}
}
}
#navBarContainer,
.Header__navbar .Header__container,
.Header__homeNavbarFixed #navBarContainer,
.Header__homeNavbarFixed .Header__navbar .Header__container,
.globalfixednav #navBarContainer,
.globalfixednav .Header__navbar .Header__container {
width: 100% !important;
max-width: 1400px !important;
margin: 0 auto !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 24px !important;
position: relative !important;
}
.Header__logo,
.Header__navbar .Header__logo,
.Header__homeNavbarFixed .Header__navbar .Header__logo,
.globalfixednav .Header__navbar .Header__logo {
flex: 0 0 auto !important;
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
margin: 0 !important;
transform: none !important;
}
.Header__menuTab,
.Header__navbar .Header__menuTab,
.Header__homeNavbarFixed .Header__navbar .Header__menuTab,
.globalfixednav .Header__navbar .Header__menuTab {
flex: 0 0 auto !important;
margin-left: auto !important;
margin-right: 0 !important;
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
transform: none !important;
}
.Header__menuList {
display: flex !important;
align-items: center !important;
gap: 32px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.Header__tabsTab,
.Header__menuList > li,
.Header__navbar a,
.Header__menuList a,
.Header__tabsTab a,
.Header__menuList > li > a,
.Header__tabsTab span,
.Header__menuList li span {
color: var(--cw-ink) !important;
font-family: var(--cw-font-display) !important;
font-weight: 700 !important;
font-size: 16px !important;
letter-spacing: -0.005em !important;
padding: 6px 2px !important;
border-radius: 0 !important;
white-space: nowrap !important;
text-decoration: none !important;
text-overflow: clip !important;
overflow: visible !important;
transition: color 0.2s ease !important;
display: inline-flex !important;
align-items: center !important;
cursor: pointer !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
position: relative !important;
}
.Header__tabsTab::after,
.Header__menuList > li::after {
content: "" !important;
position: absolute !important;
left: 2px !important;
right: 2px !important;
bottom: -4px !important;
height: 3px !important;
background: var(--cw-purple) !important;
border-radius: 2px !important;
transform: scaleX(0) !important;
transform-origin: left center !important;
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
pointer-events: none !important;
border: none !important;
}
.Header__tabsTab::before,
.Header__menuList > li::before {
display: none !important;
content: none !important;
}
.Header__tabsTab:hover,
.Header__menuList > li:hover,
.Header__navbar a:hover,
.Header__menuList a:hover,
.Header__tabsTab a:hover,
.Header__tabsTab:hover span,
.Header__menuList li:hover span {
color: var(--cw-purple) !important;
background: transparent !important;
text-decoration: none !important;
border: none !important;
box-shadow: none !important;
}
.Header__tabsTab:hover::after,
.Header__menuList > li:hover::after {
transform: scaleX(1) !important;
}
.Header__tabsTab.active,
.Header__tabsTab.selected,
.Header__tabsTab.tabsActive,
.Header__tabsTab.Header__active,
li.Header__active,
.Header__menuList > li.active,
.Header__menuList > li.selected,
.Header__menuList > li.Header__active,
.Header__navbar a.active,
.Header__tabsTab[class*="active" i],
.Header__tabsTab[class*="selected" i],
.Header__tabs__link {
color: var(--cw-ink) !important;
background: transparent !important;
border: none !important;
border-bottom: none !important;
box-shadow: none !important;
text-decoration: none !important;
}
.Header__tabsTab.active::after,
.Header__tabsTab.selected::after,
.Header__tabsTab.Header__active::after,
li.Header__active::after,
.Header__tabsTab[class*="active" i]::after,
.Header__tabsTab[class*="selected" i]::after,
.Header__menuList > li.active::after,
.Header__menuList > li.selected::after,
.Header__menuList > li.Header__active::after {
transform: scaleX(0) !important;
background: transparent !important;
}
.Header__tabsTab.Header__active::before,
li.Header__active::before,
.Header__menuList > li.Header__active::before {
display: none !important;
content: none !important;
}
.Header__name,
[data-id="portal_name"] {
display: none !important;
}
@media (max-width: 1100px) {
.Header__menuList { gap: 20px !important; }
.Header__tabsTab,
.Header__menuList > li,
.Header__navbar a,
.Header__menuList a {
font-size: 15px !important;
}
}
@media (max-width: 900px) {
.Header__menuList { gap: 14px !important; }
.Header__tabsTab,
.Header__menuList > li,
.Header__navbar a,
.Header__menuList a {
font-size: 14px !important;
}
}
.Header__logo {
cursor: pointer !important;
display: flex !important;
align-items: center !important;
height: auto !important;
flex-shrink: 0 !important;
}
.Header__logo a {
display: flex !important;
align-items: center !important;
text-decoration: none !important;
height: auto !important;
cursor: pointer !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
}
.Header__logo a:hover {
background: transparent !important;
}
.Header__logo a::after,
.Header__logo::after {
display: none !important;
content: none !important;
}
.Header__logo img,
.Header__logo svg {
height: 80px !important;
max-height: 80px !important;
width: auto !important;
max-width: 320px !important;
object-fit: contain !important;
transition: opacity 0.15s ease, transform 0.2s ease !important;
}
.Header__logo:hover img,
.Header__logo:hover svg {
opacity: 0.85 !important;
transform: scale(1.02) !important;
}
@media (max-width: 1100px) {
.Header__logo img,
.Header__logo svg {
height: 64px !important;
max-height: 64px !important;
}
}
.Header__searchSection,
#headerContent.Header__searchSection {
background: transparent !important;
padding: 48px 24px 64px !important;
position: relative !important;
overflow: visible !important;
border: none !important;
z-index: 1 !important;
}
.Header__searchSection::before {
display: none !important;
content: none !important;
}
.Header__searchSection > .Header__container,
#headerContent.Header__searchSection > .Header__container {
display: block !important;
text-align: center !important;
max-width: 820px !important;
margin: 0 auto !important;
position: relative !important;
z-index: 1 !important;
width: 100% !important;
}
.Header__searchTitle {
color: var(--cw-ink) !important;
font-family: var(--cw-font-display) !important;
font-size: 2.75rem !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
margin-bottom: 14px !important;
text-align: center !important;
}
.Header__description {
color: var(--cw-muted) !important;
font-family: var(--cw-font-sans) !important;
font-size: 17px !important;
font-weight: 400 !important;
margin-bottom: 32px !important;
text-align: center !important;
}
.SearchContainer__globalSearch {
position: relative !important;
background: #fff !important;
border-radius: var(--cw-radius-lg) !important;
border: 1.5px solid rgba(99, 102, 241, 0.25) !important;
max-width: 720px !important;
margin: 0 auto !important;
overflow: visible !important;
padding: 4px !important;
box-shadow:
0 0 0 4px rgba(99, 102, 241, 0.06),
0 0 24px rgba(99, 102, 241, 0.12),
0 0 48px rgba(139, 92, 246, 0.08),
0 8px 24px rgba(15, 23, 42, 0.06) !important;
transition:
border-color 0.3s ease,
box-shadow 0.4s ease,
transform 0.2s ease !important;
animation: cwAmbientGlow 4s ease-in-out infinite !important;
}
.SearchContainer__globalSearch:hover {
border-color: rgba(99, 102, 241, 0.45) !important;
box-shadow:
0 0 0 5px rgba(99, 102, 241, 0.10),
0 0 32px rgba(99, 102, 241, 0.20),
0 0 64px rgba(139, 92, 246, 0.12),
0 10px 28px rgba(15, 23, 42, 0.08) !important;
transform: translateY(-1px) !important;
}
.SearchContainer__globalSearch:focus-within {
border-color: var(--cw-purple) !important;
box-shadow:
0 0 0 6px rgba(99, 102, 241, 0.18),
0 0 40px rgba(99, 102, 241, 0.40),
0 0 80px rgba(139, 92, 246, 0.30),
0 0 120px rgba(168, 85, 247, 0.15),
0 12px 32px rgba(15, 23, 42, 0.10) !important;
animation: none !important;
transform: translateY(-1px) !important;
}
@keyframes cwAmbientGlow {
0%, 100% {
box-shadow:
0 0 0 4px rgba(99, 102, 241, 0.06),
0 0 24px rgba(99, 102, 241, 0.12),
0 0 48px rgba(139, 92, 246, 0.08),
0 8px 24px rgba(15, 23, 42, 0.06);
}
50% {
box-shadow:
0 0 0 5px rgba(99, 102, 241, 0.10),
0 0 32px rgba(99, 102, 241, 0.18),
0 0 64px rgba(139, 92, 246, 0.14),
0 8px 24px rgba(15, 23, 42, 0.06);
}
}
.SearchContainer__formGroup {
border-radius: var(--cw-radius-md) !important;
border: none !important;
background: transparent !important;
}
.Input__headerSearch,
input.Input__inputCommon[type="search"],
.Header__globalSearch input[role="search"],
.Header__homeContent .Header__globalSearch input[role="search"] {
background: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
font-family: var(--cw-font-sans) !important;
font-size: 16px !important;
color: var(--cw-ink) !important;
padding: 14px 18px !important;
width: 100% !important;
border-radius: var(--cw-radius-md) !important;
}
.Input__headerSearch::placeholder,
input.Input__inputCommon[type="search"]::placeholder {
color: var(--cw-faint) !important;
font-weight: 400 !important;
}
.SearchContainer__searchIcon,
span.SearchContainer__searchIcon[role="button"],
[data-id="searchButton"].SearchContainer__searchIcon,
.SearchContainer__searchIcon.commonStyle__zt3BrandBg {
background-color: var(--cw-purple) !important;
background: var(--cw-purple) !important;
background-image: none !important;
color: #fff !important;
border: none !important;
border-radius: var(--cw-radius-md) !important;
padding: 11px 18px !important;
transition: all 0.2s ease !important;
}
.SearchContainer__searchIcon:hover,
[data-id="searchButton"]:hover {
background-color: var(--cw-purple-dark) !important;
background: var(--cw-purple-dark) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35) !important;
}
.SearchContainer__searchIcon svg,
.SearchContainer__searchIcon svg *,
.SearchContainer__searchIcon i,
.SearchContainer__searchIcon::before,
.SearchContainer__searchIcon use {
color: #fff !important;
fill: #fff !important;
stroke: #fff !important;
}
.SearchContainer__moduleChangePopup {
color: var(--cw-muted) !important;
background: transparent !important;
border: none !important;
}
.SearchContainer__moduleChangePopup svg,
.SearchContainer__moduleChangePopup svg *,
.SearchContainer__moduleChangePopup i {
color: var(--cw-muted) !important;
fill: var(--cw-muted) !important;
}
.SearchContainer__downArrow {
border-top-color: var(--cw-purple) !important;
}
.SearchContainer__moduleChangePopup:hover .SearchContainer__downArrow {
border-top-color: var(--cw-purple-dark) !important;
}
.SearchContainer__searchFilter,
.SearchContainer__searchListOpen + .SearchContainer__searchFilter {
background: #fff !important;
border: 1px solid var(--cw-border) !important;
border-radius: var(--cw-radius-md) !important;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12) !important;
padding: 6px !important;
margin-top: 8px !important;
}
.SearchContainer__searchFilter li {
padding: 10px 14px !important;
border-radius: var(--cw-radius-sm) !important;
color: var(--cw-body) !important;
font-family: var(--cw-font-sans) !important;
transition: all 0.15s ease !important;
}
.SearchContainer__searchFilter li:hover {
background: var(--cw-purple-soft) !important;
color: var(--cw-purple-dark) !important;
}
.Icon__greyShade70 {
color: var(--cw-muted) !important;
}
.Icon__icon {
fill: currentColor !important;
}
.ContentBox__indexIcon svg [fill="#F06000"],
.ContentBox__indexIcon svg [fill="#f06000"],
.ContentBox__indexIcon svg [fill="#FF6E00"],
.ContentBox__indexIcon svg [fill="#ff6e00"],
.ContentBox__indexIcon svg [fill="#E47911"],
.ContentBox__indexIcon svg [stroke="#F06000"],
.ContentBox__indexIcon svg [stroke="#FF6E00"] {
fill: var(--cw-purple) !important;
stroke: var(--cw-purple) !important;
}
.ContentBox__contentBox,
.ContentBox__column,
.ContentBox__threeColumns,
.ContentBox__row,
.ContentBox__container,
.ContentBox__alignCenter,
.Layout__layout1,
.Layout__layout2,
.Layout__oneColumn,
.Layout__twoColumn,
.Layout__threeColumn,
.Layout__widget,
[class*="ContentBox__contentBox"],
[class*="ContentBox__threeColumns"],
[class*="ContentBox__column"]:not(.ContentBox__boxThree):not(.ContentBox__boxInnerHome):not(.ContentBox__indexIcon):not(.ContentBox__headerMid),
[class*="Layout__"]:not(.Layout__hero),
[data-id="column1"],
[data-id="column2"],
[data-id="column3"] {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
border: none !important;
border-radius: 0 !important;
}
.ContentBox__column,
.ContentBox__alignCenter {
padding-left: 12px !important;
padding-right: 12px !important;
box-sizing: border-box !important;
}
.ContentBox__boxThree {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.ContentBox__boxThree::before {
display: none !important;
content: none !important;
}
.ContentBox__boxThree:hover {
transform: none !important;
box-shadow: none !important;
border: none !important;
background: transparent !important;
}
.ContentBox__boxInnerHome {
position: relative !important;
padding: 44px 32px 36px !important;
border-radius: 20px !important;
background: rgba(255, 255, 255, 0.92) !important;
backdrop-filter: blur(24px) saturate(140%) !important;
-webkit-backdrop-filter: blur(24px) saturate(140%) !important;
border: 1px solid rgba(99, 102, 241, 0.1) !important;
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.04),
0 8px 24px rgba(15, 23, 42, 0.04) !important;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.25s ease !important;
overflow: hidden !important;
max-width: 320px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
min-height: 240px !important;
}
.ContentBox__boxInnerHome::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 3px !important;
background: linear-gradient(90deg,
var(--cw-purple) 0%,
var(--cw-violet) 50%,
var(--cw-teal) 100%
) !important;
opacity: 0.85 !important;
transition: opacity 0.3s ease, height 0.3s ease !important;
}
.ContentBox__boxInnerHome:hover,
.ContentBox__boxThree:hover .ContentBox__boxInnerHome {
transform: translateY(-6px) !important;
border-color: rgba(99, 102, 241, 0.2) !important;
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.04),
0 24px 48px rgba(99, 102, 241, 0.18) !important;
}
.ContentBox__boxInnerHome:hover::before,
.ContentBox__boxThree:hover .ContentBox__boxInnerHome::before {
opacity: 1 !important;
height: 4px !important;
}
.ContentBox__indexIcon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 64px !important;
height: 64px !important;
margin-bottom: 20px !important;
border-radius: 16px !important;
background: linear-gradient(135deg,
rgba(99, 102, 241, 0.1) 0%,
rgba(139, 92, 246, 0.08) 50%,
rgba(20, 184, 166, 0.1) 100%
) !important;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
background 0.3s ease !important;
}
.ContentBox__boxThree:hover .ContentBox__indexIcon,
.ContentBox__boxInnerHome:hover .ContentBox__indexIcon {
transform: scale(1.08) rotate(-3deg) !important;
background: linear-gradient(135deg,
rgba(99, 102, 241, 0.18) 0%,
rgba(139, 92, 246, 0.15) 50%,
rgba(20, 184, 166, 0.18) 100%
) !important;
}
.ContentBox__headerMid {
color: var(--cw-ink) !important;
font-family: var(--cw-font-display) !important;
font-weight: 700 !important;
font-size: 1.375rem !important;
margin: 0 0 10px 0 !important;
letter-spacing: -0.01em !important;
transition: color 0.2s ease !important;
}
.ContentBox__boxThree:hover .ContentBox__headerMid,
.ContentBox__boxInnerHome:hover .ContentBox__headerMid {
color: var(--cw-purple) !important;
}
.ContentBox__alignCenter p,
.ContentBox__boxInnerHome p {
color: var(--cw-muted) !important;
font-family: var(--cw-font-sans) !important;
font-size: 14px !important;
line-height: 1.6 !important;
margin: 0 !important;
}
.WidgetContainer__contentList {
margin-bottom: 48px !important;
background: transparent !important;
}
.ModuleCont__moduleCont {
padding: 16px 0 !important;
background: transparent !important;
}
@media (min-width: 900px) {
.home main#mainContainer,
.home #mainContainer,
.home .AppContainer__mainContainer {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 32px !important;
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 24px !important;
padding-right: 24px !important;
box-sizing: border-box !important;
align-items: start !important;
}
.home main#mainContainer > :first-child,
.home #mainContainer > :first-child,
.home .AppContainer__mainContainer > :first-child {
grid-column: 1 / -1 !important;
}
.home .WidgetContainer__contentList {
margin-bottom: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
}
a, a:link, a:visited {
color: var(--cw-purple) !important;
text-decoration: none !important;
transition: color 0.15s ease !important;
}
a:hover, a:focus {
color: var(--cw-purple-dark) !important;
text-decoration: none !important;
}
.AppContainer__backToTop {
background-color: var(--cw-purple) !important;
border-radius: var(--cw-pill) !important;
box-shadow: 0 8px 24px rgba(99, 102, 241, 0.30) !important;
transition: all 0.15s ease !important;
}
.AppContainer__backToTop:hover {
background-color: var(--cw-purple-dark) !important;
transform: translateY(-2px) !important;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
textarea,
select,
.zd-prtl-input,
.formField input,
.formField textarea {
background: #fff !important;
border: 1px solid var(--cw-border) !important;
border-radius: var(--cw-radius) !important;
padding: 10px 14px !important;
font-family: var(--cw-font-sans) !important;
font-size: 14px !important;
color: var(--cw-ink) !important;
transition: all 0.15s ease !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
border-color: var(--cw-purple) !important;
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12) !important;
outline: none !important;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--cw-border-strong);
border-radius: var(--cw-pill);
border: 2px solid transparent;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--cw-purple); }
::selection {
background: var(--cw-purple-tint);
color: var(--cw-purple-deep);
}
*:focus-visible {
outline: 2px solid var(--cw-purple) !important;
outline-offset: 2px !important;
}
#layoutContainer,
#mainContainer > div,
.Layout__oneColumn,
.Layout__twoColumn,
.commonStyle__marginAuto {
max-width: 1400px !important;
width: 94% !important;
margin-left: auto !important;
margin-right: auto !important;
background: transparent !important;
}
@media (min-width: 1280px) {
#layoutContainer,
#mainContainer > div,
.Layout__oneColumn,
.Layout__twoColumn,
.commonStyle__marginAuto {
max-width: 1600px !important;
width: 94% !important;
}
}
@media (min-width: 1600px) {
#layoutContainer,
#mainContainer > div,
.Layout__oneColumn,
.Layout__twoColumn,
.commonStyle__marginAuto {
max-width: 1840px !important;
width: 94% !important;
}
}
.Layout__twoColumn,
.articleDetail .Layout__oneColumn,
.articleDetail #layoutContainer > div,
.articleDetail .Layout__layout1 {
display: flex !important;
flex-wrap: wrap !important;
gap: 48px !important;
align-items: flex-start !important;
}
.articleDetail .Layout__layout1 > *:first-child,
.articleDetail [class*="Layout__layout"]:not([class*="Layout__layout2"]),
.articleDetail [class*="MainColumn"],
.articleDetail [class*="leftCol"] {
flex: 1 1 0 !important;
min-width: 0 !important;
max-width: none !important;
}
.articleDetail .Layout__layout2,
.articleDetail [class*="rightPanel"],
.articleDetail [class*="rightCol"],
.articleDetail [class*="sidebar"],
.articleDetail [class*="aside"],
.articleDetail [class*="RelatedArticles"],
.articleDetail aside {
flex: 0 0 320px !important;
width: 320px !important;
max-width: 320px !important;
position: sticky !important;
top: 128px !important;
}
.articleDetail .ArticleContent,
.articleDetail .articleContent,
.articleDetail [class*="ArticleBody"],
.articleDetail [class*="articleBody"] {
width: 100% !important;
max-width: none !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-radius: 0 !important;
box-shadow: none !important;
border: none !important;
}
.articleDetail .ArticleContent p,
.articleDetail .articleContent p,
.articleDetail [class*="ArticleBody"] p,
.articleDetail [class*="ArticleBody"] li,
.articleDetail [class*="ArticleBody"] ul,
.articleDetail [class*="ArticleBody"] ol,
.articleDetail [class*="ArticleBody"] h1,
.articleDetail [class*="ArticleBody"] h2,
.articleDetail [class*="ArticleBody"] h3,
.articleDetail [class*="ArticleBody"] h4,
.articleDetail [class*="ArticleBody"] h5,
.articleDetail [class*="ArticleBody"] h6 {
max-width: 880px !important;
}
.articleDetail [class*="ArticleBody"] img,
.articleDetail [class*="ArticleBody"] video,
.articleDetail [class*="ArticleBody"] iframe,
.articleDetail [class*="ArticleBody"] pre,
.articleDetail [class*="ArticleBody"] table,
.articleDetail [class*="ArticleBody"] .callout,
.articleDetail [class*="ArticleBody"] [class*="callout"],
.articleDetail [class*="ArticleBody"] blockquote {
max-width: 100% !important;
}
.articleDetail .ArticleContent p,
.articleDetail .articleContent p,
.articleDetail [class*="ArticleBody"] p,
.articleDetail [class*="ArticleBody"] li {
font-family: var(--cw-font-sans) !important;
font-size: 16px !important;
line-height: 1.75 !important;
color: var(--cw-body) !important;
}
@media (max-width: 900px) {
.Layout__twoColumn,
.articleDetail .Layout__oneColumn,
.articleDetail #layoutContainer > div,
.articleDetail .Layout__layout1 {
flex-direction: column !important;
gap: 32px !important;
}
.articleDetail .Layout__layout2,
.articleDetail [class*="rightPanel"],
.articleDetail [class*="rightCol"],
.articleDetail [class*="sidebar"],
.articleDetail [class*="aside"] {
flex: 1 1 auto !important;
width: 100% !important;
max-width: none !important;
position: static !important;
}
.articleDetail .ArticleContent,
.articleDetail .articleContent,
.articleDetail [class*="ArticleBody"] {
padding: 24px !important;
}
}
.Readingprogress__progressBarLine {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
border: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.Readingprogress__progressBarTransition,
.Readingprogress__progressContainer {
position: fixed !important;
top: 108px !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1000 !important;
background: rgba(99, 102, 241, 0.08) !important;
height: 3px !important;
transform: none !important;
}
.Readingprogress__progressBar {
background: linear-gradient(90deg,
var(--cw-purple) 0%,
var(--cw-violet) 50%,
var(--cw-teal) 100%
) !important;
box-shadow: 0 0 4px rgba(99, 102, 241, 0.4) !important;
height: 3px !important;
z-index: 1001 !important;
}
main [class*="Readingprogress"],
#mainContainer [class*="Readingprogress"],
[class*="ArticleBody"] [class*="Readingprogress"],
[class*="ArticleContent"] [class*="Readingprogress"] {
display: none !important;
}
@media (max-width: 640px) {
.Readingprogress__progressBarTransition,
.Readingprogress__progressContainer {
top: 72px !important;
}
}
hr,
.articleDetail hr,
[class*="ArticleBody"] hr,
[class*="articleBody"] hr,
[class*="ArticleContent"] hr,
[class*="articleContent"] hr,
.articleDetail .ArticleContent hr,
main hr,
#mainContainer hr {
border: none !important;
border-top: 1px solid var(--cw-border) !important;
background: transparent !important;
background-image: none !important;
height: 0 !important;
margin: 32px 0 !important;
padding: 0 !important;
box-shadow: none !important;
}
.Footer__footerBg,
#footerContainer {
background: transparent !important;
padding: 0 !important;
border-top: 1px solid rgba(226, 232, 240, 0.5) !important;
position: relative !important;
z-index: 1 !important;
}
.Footer__footerBg::before,
#footerContainer::before {
display: none !important;
content: none !important;
}
.Footer__container,
.Footer__container1,
.Footer__footerContent,
.Footer__footerCopyrigt {
position: relative !important;
z-index: 1 !important;
background: transparent !important;
}
.Footer__container,
.Footer__container1 {
max-width: 1200px !important;
margin: 0 auto !important;
}
.Footer__footerContent {
padding: 48px 24px 32px !important;
}
.Footer__footerInfo {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 20px !important;
padding: 32px 24px !important;
text-align: center !important;
}
.Footer__footerInfo h1,
.Footer__footerInfo h2,
.Footer__footerInfo h3,
.Footer__footerInfo h4,
[class*="Footer"] h1,
[class*="Footer"] h2,
[class*="Footer"] h3 {
color: var(--cw-ink) !important;
font-family: var(--cw-font-display) !important;
font-size: 1.875rem !important;
font-weight: 700 !important;
margin-bottom: 8px !important;
letter-spacing: -0.01em !important;
}
.Footer__footerInfo p,
[class*="Footer"] p {
color: var(--cw-muted) !important;
font-family: var(--cw-font-sans) !important;
font-size: 15px !important;
margin-bottom: 4px !important;
}
.Footer__footerCopyrigt,
[class*="footerCopyrigt"] {
background: transparent !important;
color: var(--cw-faint) !important;
font-family: var(--cw-font-sans) !important;
font-size: 13px !important;
padding: 20px 24px 28px !important;
border-top: 1px solid rgba(99, 102, 241, 0.12) !important;
text-align: center !important;
}
.Footer__footerCopyrigt a,
[class*="footerCopyrigt"] a {
color: var(--cw-muted) !important;
transition: color 0.15s ease !important;
}
.Footer__footerCopyrigt a:hover,
[class*="footerCopyrigt"] a:hover {
color: var(--cw-purple) !important;
}
.Footer__footerInfo button,
.Footer__footerInfo a[role="button"],
.Footer__footerInfo .submitBtn,
.Footer__footerInfo input[type="submit"],
.Footer__footerInfo > a,
.Footer__footerContent button[class*="submit" i],
.Footer__footerContent a[class*="submit" i],
[data-id="addTopic"] button,
a[data-id="addTopic"] button,
.Button__primary.commonStyle__zt3buttonPrimaryBg,
button.commonStyle__zt3buttonPrimaryBg,
[class*="Footer__"] button,
[class*="Footer__"] [class*="submit" i] {
background: linear-gradient(135deg,
var(--cw-purple) 0%,
var(--cw-violet) 35%,
var(--cw-teal) 100%
) !important;
background-size: 200% 200% !important;
color: #fff !important;
border: none !important;
border-radius: var(--cw-pill) !important;
padding: 12px 28px !important;
font-family: var(--cw-font-sans) !important;
font-weight: 600 !important;
font-size: 14px !important;
letter-spacing: 0.01em !important;
line-height: 1 !important;
box-shadow:
0 6px 18px rgba(99, 102, 241, 0.30),
0 2px 8px rgba(139, 92, 246, 0.18) !important;
animation: cwGradientShift 4s ease infinite !important;
cursor: pointer !important;
transition: transform 0.2s ease, box-shadow 0.3s ease, animation-duration 0.3s ease !important;
text-decoration: none !important;
display: inline-block !important;
position: relative !important;
overflow: hidden !important;
}
.Footer__footerInfo button,
.Footer__footerInfo a[role="button"],
.Footer__footerInfo .submitBtn,
.Footer__footerInfo > a {
padding: 14px 32px !important;
font-size: 15px !important;
box-shadow:
0 8px 24px rgba(99, 102, 241, 0.35),
0 4px 12px rgba(139, 92, 246, 0.20) !important;
}
.Footer__footerInfo button:hover,
.Footer__footerInfo a[role="button"]:hover,
.Footer__footerInfo .submitBtn:hover,
.Footer__footerInfo > a:hover,
[data-id="addTopic"] button:hover,
a[data-id="addTopic"] button:hover,
.Button__primary.commonStyle__zt3buttonPrimaryBg:hover,
button.commonStyle__zt3buttonPrimaryBg:hover,
[class*="Footer__"] button:hover {
transform: translateY(-2px) scale(1.02) !important;
box-shadow:
0 12px 32px rgba(99, 102, 241, 0.50),
0 0 40px rgba(139, 92, 246, 0.35),
0 0 60px rgba(20, 184, 166, 0.20) !important;
animation-duration: 2s !important;
}
.Footer__footerInfo button:active,
.Footer__footerInfo a[role="button"]:active,
[data-id="addTopic"] button:active,
.Button__primary.commonStyle__zt3buttonPrimaryBg:active {
transform: translateY(0) scale(1) !important;
}
@keyframes cwGradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
button.primary:not([class*="zt3buttonPrimary"]),
.btn-primary:not([class*="zt3buttonPrimary"]),
.submitBtn:not([class*="zt3buttonPrimary"]),
input[type="submit"]:not([class*="zt3buttonPrimary"]) {
background: var(--cw-ink) !important;
border: 1px solid var(--cw-ink) !important;
color: #fff !important;
border-radius: var(--cw-pill) !important;
padding: 10px 22px !important;
font-family: var(--cw-font-sans) !important;
font-weight: 600 !important;
font-size: 14px !important;
transition: all 0.15s ease !important;
cursor: pointer !important;
animation: none !important;
}
button.primary:not([class*="zt3buttonPrimary"]):hover,
.btn-primary:not([class*="zt3buttonPrimary"]):hover,
.submitBtn:not([class*="zt3buttonPrimary"]):hover,
input[type="submit"]:not([class*="zt3buttonPrimary"]):hover {
background: #1E293B !important;
transform: translateY(-1px) !important;
}
.Badge__announcement,
span[data-id="_announcement"] {
color: var(--cw-purple) !important;
background-color: var(--cw-purple-soft) !important;
border-radius: var(--cw-pill) !important;
padding: 3px 10px !important;
font-family: var(--cw-font-sans) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
}
.Badge__question,
span[data-id="_question"] {
color: #0F766E !important;
background-color: var(--cw-teal-soft) !important;
border-radius: var(--cw-pill) !important;
padding: 3px 10px !important;
font-family: var(--cw-font-sans) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
}
.Badge__idea,
span[data-id="_idea"] {
color: #92400E !important;
background-color: #FEF3C7 !important;
border-radius: var(--cw-pill) !important;
font-family: var(--cw-font-sans) !important;
padding: 3px 10px !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
}
.Badge__problem,
span[data-id="_problem"] {
color: #991B1B !important;
background-color: #FEE2E2 !important;
border-radius: var(--cw-pill) !important;
font-family: var(--cw-font-sans) !important;
padding: 3px 10px !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
}
@media (max-width: 640px) {
body { padding-top: 75px !important; }
.Header__searchSection { padding: 80px 16px 80px !important; }
.Header__searchTitle { font-size: 1.875rem !important; }
.Header__description { font-size: 14px !important; }
.Header__navbar { padding: 10px 16px !important; min-height: 72px !important; }
.Header__logo img { height: 44px !important; max-height: 44px !important; }
.ContentBox__boxThree { padding: 20px 16px !important; }
.SearchContainer__globalSearch { max-width: 100% !important; }
.Footer__footerContent { padding: 32px 16px 24px !important; }
.Footer__footerInfo h2 { font-size: 1.5rem !important; }
}
.KbDetailLtContainer__column,
.KbDetailLtContainer__review,
.KbDetailLtContainer__userSocialIcon,
.KbDetailLtContainer__articelDetail,
.KbDetailLtContainer__articleContent,
.KbDetailLtContainer__updateTime,
.KbDetailLtContainer__posRel,
.KbDetailLtContainer__widget,
[data-id="vote_enabled"],
.KbDetailLtContainer__column [class*="commonStyle__flex"] {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
border: none !important;
}
.ArticleCmd__likeArticle,
.TopicDetailLeftContainer__socialContent,
.TopicDetailLeftContainer__articleTitle,
.TopicDetailLeftContainer__widget,
.ArticleCmd__likeArticle.commonStyle__flex {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
border: none !important;
}
.articleDetail [class*="KbDetailLtContainer__"]:not([class*="articleContent"]):not([class*="ArticleDetail"]),
.communityDetail [class*="TopicDetailLeftContainer__"]:not([class*="articleContent"]):not([class*="ArticleDetail"]),
.communityDetail [class*="ArticleCmd__"] {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
#cw-status-badge {
position: fixed !important;
bottom: 24px !important;
right: 24px !important;
z-index: 9998 !important;
display: block !important;
width: 210px !important;
height: 30px !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 9999px !important;
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(12px) saturate(150%) !important;
-webkit-backdrop-filter: blur(12px) saturate(150%) !important;
border: 1px solid rgba(99, 102, 241, 0.15) !important;
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.04),
0 8px 24px rgba(15, 23, 42, 0.08),
0 0 0 0 rgba(99, 102, 241, 0) !important;
overflow: hidden !important;
text-decoration: none !important;
cursor: pointer !important;
transition:
transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.3s ease,
border-color 0.25s ease !important;
animation: cwStatusBadgeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards !important;
}
#cw-status-badge:hover {
transform: translateY(-2px) !important;
border-color: rgba(99, 102, 241, 0.35) !important;
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.04),
0 12px 32px rgba(99, 102, 241, 0.18),
0 0 0 4px rgba(99, 102, 241, 0.08) !important;
}
#cw-status-badge iframe {
display: block !important;
width: 250px !important;
height: 100% !important;
border: 0 !important;
margin-left: 10px !important;
pointer-events: none !important;
}
@keyframes cwStatusBadgeIn {
from { opacity: 0; transform: translateY(20px) scale(0.95); }
to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 640px) {
#cw-status-badge { display: none !important; }
}
@media (min-width: 900px) {
.articleDetail main#mainContainer,
.articleDetail #mainContainer,
html .articleDetail main#mainContainer,
html .articleDetail #mainContainer {
display: block !important;
grid-template-columns: none !important;
max-width: 1400px !important;
width: 94% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 24px !important;
padding-right: 24px !important;
box-sizing: border-box !important;
}
}
@media (min-width: 1280px) {
.articleDetail main#mainContainer,
.articleDetail #mainContainer,
html .articleDetail main#mainContainer,
html .articleDetail #mainContainer {
max-width: 1600px !important;
}
}
@media (min-width: 1600px) {
.articleDetail main#mainContainer,
.articleDetail #mainContainer,
html .articleDetail main#mainContainer,
html .articleDetail #mainContainer {
max-width: 1840px !important;
}
}
.communityDetail [data-id="column2"] {
display: none !important;
}
.communityDetail .Layout__layout2 {
display: none !important;
}
.communityDetail [data-id="column1"] {
flex: 1 1 100% !important;
width: 100% !important;
max-width: 100% !important;
}
.communityDetail .Layout__layout1 {
flex: 1 1 100% !important;
width: 100% !important;
max-width: 100% !important;
}