/* ========================================================= BBAC COMMUNITYSPACES PREMIUM COMMUNITY DASHBOARD ================================================ BRAND PALETTE Deep Plum #241126 Dark Plum #160B19 Royal Plum #3A1B3D Fire Orange #F4511E Bright Orange #FF6A2A White #FFFFFF Soft Gray #F5F3F6 Dark Text #29212B ========================================================= */ /* ========================================================= BBAC BRAND VARIABLES ========================================================= */ body.zc-connectCommunity1 { --linkPrimary: #F4511E; --primaryThemeColor: #F4511E; /* LEFT APP BAR */ --leftAppsContColor: #160B19; --leftAppsIconColor: #FFFFFF; --leftAppsIconHoverColor: #FF6A2A; --leftAppsSelectedIconColor: #F4511E; --leftnavOptionHoverColor: #FFFFFF; --leftAppsSelectedBG: #FFFFFF; --leftAppsContFooterColor: rgba(255,255,255,0.10); /* LEFT NAVIGATION */ --leftNavContColor: #241126; --leftNavListItemColor: #F4511E; --leftNavListItemHoverColor: #F4511E; --leftNavListItemSelected: #F4511E; --leftContNewOption: #FFFFFF; --leftContNewOptionTxt: #241126; /* NAV ICONS */ --leftNavListHeadingIconBg: rgba(244,81,30,0.12); --leftNavListHeadingIconColor: #F4511E; --leftNavListHeadingIconHoverBg: #FFFFFF; --leftNavListHeadingIconhoverColor: #F4511E; /* BUTTONS */ --submitButtonColor: #F4511E; --submitButtonDarkColor: #D63F13; --submitButtonColorRBG5: #FDE0D7; /* MENUS */ --menuHoverColor: #FFFFFF; --menuHoverColorDark: #F7E6E0; } /* ========================================================= GLOBAL PAGE ========================================================= */ body.zc-connectCommunity1 { background-color: #F5F3F6 !important; color: #29212B; } /* ========================================================= LEFT APP BAR ========================================================= */ body.zc-connectCommunity1 .zc-leftContainer { background-color: #241126 !important; color: #FFFFFF !important; } /* ========================================================= LEFT NAVIGATION NORMAL = ORANGE HOVER = WHITE TAB / ORANGE TEXT SELECTED = WHITE TAB / ORANGE TEXT ========================================================= */ /* Navigation container */ body.zc-connectCommunity1 .zc-leftContainer .zc-navigation { background-color: #241126 !important; } /* NORMAL NAVIGATION TAB */ body.zc-connectCommunity1 .zc-leftContainer .zc-navigation a { color: #F4511E !important; background-color: transparent !important; font-weight: 600 !important; border-radius: 8px; transition: background-color 0.2s ease, color 0.2s ease; } /* Normal tab text */ body.zc-connectCommunity1 .zc-leftContainer .zc-navigation a span { color: #F4511E !important; } /* ========================================================= HOVER WHITE BACKGROUND ORANGE TEXT ========================================================= */ body.zc-connectCommunity1 .zc-leftContainer .zc-navigation a:hover { background-color: #FFFFFF !important; color: #F4511E !important; font-weight: 700 !important; } body.zc-connectCommunity1 .zc-leftContainer .zc-navigation a:hover span { color: #F4511E !important; } /* Hover icons */ body.zc-connectCommunity1 .zc-leftContainer .zc-navigation a:hover svg { color: #F4511E !important; fill: #F4511E !important; } /* ========================================================= SELECTED TAB WHITE BACKGROUND ORANGE TEXT ========================================================= */ body.zc-connectCommunity1 .zc-leftContainer .zc-navigation .active, body.zc-connectCommunity1 .zc-leftContainer .zc-navigation .selected { background-color: #FFFFFF !important; color: #F4511E !important; font-weight: 700 !important; border-left: 4px solid #F4511E !important; border-radius: 8px !important; } /* Selected text */ body.zc-connectCommunity1 .zc-leftContainer .zc-navigation .active span, body.zc-connectCommunity1 .zc-leftContainer .zc-navigation .selected span, body.zc-connectCommunity1 .zc-leftContainer .zc-navigation .active a, body.zc-connectCommunity1 .zc-leftContainer .zc-navigation .selected a { color: #F4511E !important; } /* Selected icons */ body.zc-connectCommunity1 .zc-leftContainer .zc-navigation .active svg, body.zc-connectCommunity1 .zc-leftContainer .zc-navigation .selected svg { color: #F4511E !important; fill: #F4511E !important; } /* ========================================================= NAVIGATION HEADINGS ========================================================= */ body.zc-connectCommunity1 .zc-leftContainer .zc-navigation h1, body.zc-connectCommunity1 .zc-leftContainer .zc-navigation h2, body.zc-connectCommunity1 .zc-leftContainer .zc-navigation h3, body.zc-connectCommunity1 .zc-leftContainer .zc-navigation h4, body.zc-connectCommunity1 .zc-leftContainer .zc-navigation h5 { color: #FFFFFF !important; } /* Secondary navigation text */ body.zc-connectCommunity1 .zc-leftContainer .zc-navigation small, body.zc-connectCommunity1 .zc-leftContainer .zc-navigation label { color: #EDE6EF !important; } /* ========================================================= LEFT NAVIGATION ICONS ========================================================= */ body.zc-connectCommunity1 .zc-leftContainer .zc-navigation svg { color: #F4511E !important; fill: #F4511E !important; } /* ========================================================= NEW SPACE / NEW OPTION ========================================================= */ body.zc-connectCommunity1 .zc-leftContainer .zc-navigation .zc-taskImportBoard .zc-newBoard, body.zc-connectCommunity1 .zc-leftContainer .zc-navigation .zc-taskImportBoard .zc-MoreImport { background-color: #F4511E !important; color: #FFFFFF !important; border-radius: 8px; font-weight: 700; } body.zc-connectCommunity1 .zc-leftContainer .zc-navigation .zc-taskImportBoard .zc-newBoard:hover, body.zc-connectCommunity1 .zc-leftContainer .zc-navigation .zc-taskImportBoard .zc-MoreImport:hover { background-color: #FFFFFF !important; color: #F4511E !important; } /* ========================================================= INITIAL BBAC DASHBOARD STYLE ========================================================= */ .viewContainer, .zc-manualContainer.zc-mDashboardwrapper { background: radial-gradient( circle at top right, rgba(244,81,30,0.10), transparent 30% ), linear-gradient( 135deg, #F6F3F7 0%, #FFFFFF 55%, #F3EDF5 100% ); } /* Keep feed transparent */ .viewContainer .feed-content-area { background: transparent; } /* ========================================================= DASHBOARD CONTENT ========================================================= */ .zc-dashboard { border-radius: 16px; background: transparent; } /* ========================================================= COMMUNITY CARDS ========================================================= */ .widget-wrapper, .gridItem { border-radius: 14px; } /* ========================================================= SPACE TILES ========================================================= */ .gridView .gridItem { background: #FFFFFF !important; border: 1px solid #E5DDE7 !important; border-radius: 14px !important; box-shadow: 0 4px 16px rgba(36,17,38,0.08) !important; transition: transform 0.2s ease, box-shadow 0.2s ease; } .gridView .gridItem:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(36,17,38,0.14) !important; border-color: #F4511E !important; } /* ========================================================= RESOURCE / MANUAL TILES ========================================================= */ .zc-manualContainer.zc-mDashboardwrapper .zc-mWrapper .zc-mList .gridView .gridItem .zc-MmiddleContent { background-color: #FFFFFF !important; border-radius: 14px; } /* ========================================================= LINK WIDGETS ========================================================= */ .widget-wrapper.zc-dashLinkWidget.zc-buttonView ul.widget-inner-list li a { background-color: #FFFFFF !important; color: #241126 !important; border: 1px solid #E5DDE7 !important; border-radius: 10px !important; box-shadow: 0 3px 12px rgba(36,17,38,0.06); transition: all 0.2s ease; } .widget-wrapper.zc-dashLinkWidget.zc-buttonView ul.widget-inner-list li a:hover { background-color: #241126 !important; color: #FFFFFF !important; border-color: #F4511E !important; transform: translateY(-2px); } /* ========================================================= SEARCH BAR ========================================================= */ .zc-rightContainer .zc-topBar .zc-mainSearch .zc-searchInput { background-color: #FFFFFF !important; color: #29212B !important; border: 2px solid #E5DDE7 !important; border-radius: 10px !important; padding: 7px 14px; font-size: 1rem; outline: none; transition: all 0.2s ease; } .zc-rightContainer .zc-topBar .zc-mainSearch .zc-searchInput:focus { border-color: #F4511E !important; box-shadow: 0 0 0 3px rgba(244,81,30,0.12); } /* ========================================================= TOP BAR ========================================================= */ .zc-rightContainer .zc-topBar { border-bottom: 3px solid #F4511E; } /* ========================================================= BUTTONS ========================================================= */ body.zc-connectCommunity1 button, body.zc-connectCommunity1 .btn, body.zc-connectCommunity1 .button, body.zc-connectCommunity1 input[type="submit"], body.zc-connectCommunity1 input[type="button"] { background-color: #F4511E !important; border-color: #F4511E !important; color: #FFFFFF !important; border-radius: 8px !important; font-weight: 700 !important; transition: all 0.2s ease; } body.zc-connectCommunity1 button:hover, body.zc-connectCommunity1 .btn:hover, body.zc-connectCommunity1 .button:hover, body.zc-connectCommunity1 input[type="submit"]:hover, body.zc-connectCommunity1 input[type="button"]:hover { background-color: #FF6A2A !important; border-color: #FF6A2A !important; color: #FFFFFF !important; transform: translateY(-1px); } /* ========================================================= SECONDARY BUTTONS ========================================================= */ body.zc-connectCommunity1 .btn-secondary, body.zc-connectCommunity1 .button-secondary { background-color: #241126 !important; border-color: #241126 !important; color: #FFFFFF !important; } body.zc-connectCommunity1 .btn-secondary:hover, body.zc-connectCommunity1 .button-secondary:hover { background-color: #3A1B3D !important; color: #FFFFFF !important; } /* ========================================================= LINKS ========================================================= */ body.zc-connectCommunity1 a { color: #F4511E; } body.zc-connectCommunity1 a:hover { color: #FF6A2A; } /* ========================================================= INPUTS ========================================================= */ body.zc-connectCommunity1 input, body.zc-connectCommunity1 textarea, body.zc-connectCommunity1 select { background-color: #FFFFFF !important; color: #29212B !important; border: 1px solid #E5DDE7 !important; border-radius: 8px !important; padding: 10px !important; } body.zc-connectCommunity1 input:focus, body.zc-connectCommunity1 textarea:focus, body.zc-connectCommunity1 select:focus { border-color: #F4511E !important; outline: none !important; box-shadow: 0 0 0 3px rgba(244,81,30,0.15) !important; } /* ========================================================= BADGES ========================================================= */ body.zc-connectCommunity1 .badge, body.zc-connectCommunity1 .tag, body.zc-connectCommunity1 .label { background-color: #F4511E !important; color: #FFFFFF !important; border-radius: 20px !important; font-weight: 700; } /* ========================================================= PROGRESS BAR ========================================================= */ body.zc-connectCommunity1 .progress { background-color: #E8E2EA !important; border-radius: 20px !important; } body.zc-connectCommunity1 .progress-bar { background: linear-gradient( 90deg, #241126, #F4511E ) !important; } /* ========================================================= ALERTS ========================================================= */ body.zc-connectCommunity1 .alert, body.zc-connectCommunity1 .notification { border-radius: 10px !important; border-left: 5px solid #F4511E !important; } /* ========================================================= FOOTER ========================================================= */ body.zc-connectCommunity1 footer { background-color: #160B19 !important; color: #FFFFFF !important; padding: 30px; } body.zc-connectCommunity1 footer a { color: #FF6A2A !important; } /* ========================================================= DIVIDERS ========================================================= */ body.zc-connectCommunity1 hr { border: 0; border-top: 1px solid #E5DDE7; } /* ========================================================= SCROLLBAR ========================================================= */ body.zc-connectCommunity1 ::-webkit-scrollbar { width: 8px; } body.zc-connectCommunity1 ::-webkit-scrollbar-track { background: #F5F3F6; } body.zc-connectCommunity1 ::-webkit-scrollbar-thumb { background: #241126; border-radius: 10px; } body.zc-connectCommunity1 ::-webkit-scrollbar-thumb:hover { background: #F4511E; } /* ========================================================= NIGHT MODE ========================================================= */ body.nightMode { --leftAppsContColor: #0D080F; --leftAppsIconColor: #FFFFFF; --leftAppsIconHoverColor: #F4511E; --leftAppsSelectedIconColor: #F4511E; --leftnavOptionHoverColor: #FFFFFF; --leftAppsSelectedBG: #FFFFFF; --leftNavContColor: #160B19; --leftNavListItemColor: #F4511E; --leftNavListItemHoverColor: #F4511E; --leftNavListItemSelected: #F4511E; } /* ========================================================= NIGHT MODE NAVIGATION ========================================================= */ body.nightMode .zc-leftContainer { background-color: #160B19 !important; } body.nightMode .zc-leftContainer .zc-navigation a { color: #F4511E !important; background-color: transparent !important; } body.nightMode .zc-leftContainer .zc-navigation a span { color: #F4511E !important; } /* Night hover */ body.nightMode .zc-leftContainer .zc-navigation a:hover { background-color: #FFFFFF !important; color: #F4511E !important; } body.nightMode .zc-leftContainer .zc-navigation a:hover span { color: #F4511E !important; } /* Night selected */ body.nightMode .zc-leftContainer .zc-navigation .active, body.nightMode .zc-leftContainer .zc-navigation .selected { background-color: #FFFFFF !important; color: #F4511E !important; border-left: 4px solid #F4511E !important; } body.nightMode .zc-leftContainer .zc-navigation .active span, body.nightMode .zc-leftContainer .zc-navigation .selected span { color: #F4511E !important; } /* ========================================================= NIGHT MODE BACKGROUND ========================================================= */ body.nightMode .viewContainer, body.nightMode .zc-manualContainer.zc-mDashboardwrapper { background: radial-gradient( circle at top right, rgba(244,81,30,0.14), transparent 30% ), linear-gradient( 135deg, #0D080F 0%, #160B19 55%, #241126 100% ); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 768px) { .viewContainer, .zc-manualContainer.zc-mDashboardwrapper { background: linear-gradient( 135deg, #F5F3F6, #FFFFFF ) !important; } .gridView .gridItem { border-radius: 11px !important; box-shadow: 0 3px 12px rgba(36,17,38,0.07) !important; } body.zc-connectCommunity1 .zc-leftContainer .zc-navigation a { color: #F4511E !important; } body.zc-connectCommunity1 .zc-leftContainer .zc-navigation .active { background-color: #FFFFFF !important; color: #F4511E !important; } }