/* ================================================================ DUBAI MALL ONLINE — Help Center theme (Zoho Desk, Classic theme) Paste into: Customize > CSS (v2) ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&display=swap'); :root { --dm-bg: #F4F4F6; /* page background */ --dm-card: #FFFFFF; /* card / panel background */ --dm-ink: #16161A; /* primary text */ --dm-sub: #606066; /* card subtitles (spec) */ --dm-meta: #86868B; /* "10 Articles", footer text */ --dm-line: #ECECEE; /* card borders */ --dm-divider: #EFEFF1; /* article-row dividers */ --dm-hairline: #3A3B3B; /* header separator (spec) */ --dm-radius-card: 24px; /* section tiles (spec) */ --dm-radius-search: 16px; /* search bar (spec) */ --dm-font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ---------------------------------------------------------------- 1. GLOBAL ---------------------------------------------------------------- */ body, .portalContainer, #layoutContainer { background: var(--dm-bg) !important; font-family: var(--dm-font) !important; } .portalContainer a, .portalContainer input, .portalContainer button, .portalContainer h1, .portalContainer h2, .portalContainer h3, .portalContainer h4, .portalContainer h5, .portalContainer h6, .portalContainer li, .portalContainer p, .portalContainer span { font-family: var(--dm-font); } /* ---------------------------------------------------------------- 2. HEADER SHELL — solid #000 edge to edge ---------------------------------------------------------------- */ .Header__header { background: #000000 !important; } /* Zoho's banner/background layer (carries the Appearance image and a fixed height) — removed so the header is one flat black block */ .Header__headerBg { display: none !important; } /* ---------------------------------------------------------------- 3. TOP BAR (logo left, language right, 1.5px hairline below) ---------------------------------------------------------------- */ .Header__menuWrapper { background: #000000; border-bottom: 1.5px solid var(--dm-hairline); } .Header__menuBox { max-width: 1360px; margin: 0 auto; padding: 24px 40px 22px; /* extra room below the logo */ display: flex; align-items: center; justify-content: space-between; } /* small stacked logo, top-left */ .Header__logo { max-height: 42px; width: auto; display: block; } /* hide the "Dubai Mall" text next to the logo (the logo carries the wordmark) */ .Header__logotxt { display: none; } /* Hide the nav tabs to match the design. To restore a tab, delete its line below. */ #portal_tabHome, #portal_tabSolutions, #portal_tabCommunity { display: none !important; } /* Hide Sign In (top right shows the language switcher only). Customers can still sign in at /portal/signin if ever needed. */ .LoginDetail__loginContainer, .LoginDetail__signin, .LoginDetail__tabLink, .signinLink { display: none !important; } /* My Requests (only renders for signed-in users) */ .Header__nav .Header__menuList a { color: #FFFFFF !important; font-size: 13px; font-weight: 400; letter-spacing: 0.01em; } /* Zoho's own locale element only renders in multilingual mode, and the User Preference (accessibility) button is not in the design — hide both; the custom .dm-lang dropdown in the header replaces them */ #localePopup, .Header__localeTab, #userPreference, .Header__userPreference, .Header__userPreference_mobile, .CustomizeContainer__CustomizeOption { display: none !important; } @media (min-width: 769px) { .Header__nav { display: flex !important; align-items: center; justify-content: flex-end; } } /* custom language switcher (top right) */ .dm-lang { position: relative; display: inline-flex; align-items: center; gap: 6px; color: #FFFFFF; font-size: 13px; cursor: pointer; padding: 6px 2px; list-style: none; } .dm-lang::before { content: ""; width: 15px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 4c4-2 6 2 10 0v8c-4 2-6-2-10 0'/%3E%3C/svg%3E") no-repeat center / contain; } .dm-lang::after { content: ""; width: 11px; height: 11px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain; } .dm-lang__current { color: #FFFFFF; font-family: var(--dm-font); font-size: 13px; letter-spacing: 0.01em; } /* the label tracks the page locale via Zoho's own locale class on the portal root (e.g. "en" / "ar") — no scripts involved */ .dm-lang__current--ar { display: none; } .portalContainer.ar .dm-lang__current--en { display: none; } .portalContainer.ar .dm-lang__current--ar { display: inline; } .dm-lang__menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 168px; margin: 0; padding: 6px 0; list-style: none; background: #FFFFFF; border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; z-index: 1000; } .dm-lang:hover .dm-lang__menu, .dm-lang:focus-within .dm-lang__menu { opacity: 1; visibility: visible; transform: translateY(0); } .dm-lang__menu li { list-style: none; } .dm-lang__menu a { display: block; padding: 10px 16px; color: var(--dm-ink) !important; font-family: var(--dm-font); font-size: 13px; text-decoration: none !important; } .dm-lang__menu a:hover { background: #F5F5F7; } /* ---------------------------------------------------------------- 4. HERO (flat black: eyebrow, wordmark, search) ---------------------------------------------------------------- */ .Header__titleSearchWrapper { background: #000000; padding: 48px 24px 64px; } .home .Header__titleSearchWrapper { padding: 101px 24px 101px; } .Header__titleSearchWrapper, .Header__titleSearchBox, .Header__banneralt { min-height: 0 !important; height: auto !important; } .Header__titleSearchBox, .Header__banneralt { background: transparent; max-width: 1232px; margin: 0 auto; } .Header__titleDescription { text-align: center; } /* Zoho's welcome text — hidden (the hero below is rendered by CSS) */ .Header__welcomeTitle { display: none !important; } /* if an older header version with these elements is still pasted, hide them so the hero never doubles up */ .dm-eyebrow, .dm-heroLogo { display: none !important; } /* the hero is drawn entirely from CSS so the HTML editor cannot strip it: ::before = "WELCOME TO", ::after = wordmark image */ .Header__titleDescription { min-height: 0; } .Header__titleDescription::before { content: "WELCOME TO"; display: block; color: #FFFFFF; font-family: var(--dm-font); font-size: 21.52px; font-weight: 300; letter-spacing: 0.32em; text-indent: 0.32em; /* optically recentres spaced-out caps */ line-height: 1.2; margin: 0 0 48px; } .Header__titleDescription::after { content: ""; display: block; width: min(553px, 86vw); aspect-ratio: 1106 / 65; margin: 0 auto 6px; background: url("data:image/png;base64,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") no-repeat center / contain; } /* welcome description — clear its text in Appearance if unused */ .Header__welcomeDescription { color: rgba(255, 255, 255, 0.72) !important; font-size: 15px; margin: -28px 0 32px; } .Header__welcomeDescription:empty { display: none; } /* ---------------------------------------------------------------- 5. SEARCH BAR (white, 16px radius, custom icon) ---------------------------------------------------------------- */ .Header__searchSubCont, .Header__searchalt { max-width: 878px; /* 846px + 16px on each side */ margin: 0 auto; } /* Zoho serves a page-type-specific stylesheet on category/article pages (e.g. "articleList") that can set its own width on the search wrapper with higher specificity than a plain class rule. These ID-anchored, !important rules always win, so the bar stays 878px wide and centred on every page, not just the home page. */ #bannerContainer, #searchBtnContainer, #searchContainer { max-width: 878px !important; width: 100% !important; margin: 0 auto !important; left: auto !important; right: auto !important; float: none !important; } /* Zoho's outer search wrappers add their own white box, padding and large radius — flatten them all so only the 16px pill remains */ .Header__banneralt, .Header__searchSubCont, .Header__searchalt, .Header__searchLink, .Header__searchBox, .SearchCon__searchCon, .SearchBox__searchpart { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; min-height: 0 !important; height: auto !important; } .SearchCon__searchCon, .SearchBox__searchpart { width: 100%; } .SearchBox__searchTextbox { position: relative; background: #FFFFFF; border-radius: var(--dm-radius-search) !important; overflow: hidden; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); } /* magnifier icon */ .SearchBox__searchTextbox::before { content: ""; position: absolute; left: 24px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2316161A' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7.25'/%3E%3Cpath d='M16.6 16.6 21 21'/%3E%3C/svg%3E") no-repeat center / contain; } .SearchBox__searchTextbox input, #autoSearchContainer { width: 100% !important; height: 64px !important; padding: 0 24px 0 62px !important; border: none !important; border-radius: var(--dm-radius-search) !important; background: transparent !important; font-family: var(--dm-font) !important; font-size: 16px !important; color: var(--dm-ink) !important; box-shadow: none !important; outline: none; } #autoSearchContainer::placeholder { color: var(--dm-meta); opacity: 1; } .SearchBox__searchTextbox:focus-within { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18), 0 0 0 3px rgba(255, 255, 255, 0.22); } /* hide the unused "+" quick-action button next to search */ .Header__panelbtns { display: none !important; } /* Zoho docks the search bar to the top of the viewport on scroll and draws an accent gradient line under it. ID selectors outweigh the class Zoho toggles for the docked state, so the bar stays in the hero on all pages; the pseudo-element/background rules kill the coloured line in either state */ #searchContainer, #searchBtnContainer, #bannerContainer, .Header__searchLink, .Header__searchalt, .Header__searchSubCont { position: static !important; top: auto !important; left: auto !important; right: auto !important; z-index: auto !important; } #searchContainer::before, #searchContainer::after, #searchBtnContainer::before, #searchBtnContainer::after, .Header__searchLink::before, .Header__searchLink::after, .Header__searchalt::before, .Header__searchalt::after { display: none !important; border: none !important; background: none !important; } #searchContainer, #searchBtnContainer { border: none !important; background-image: none !important; box-shadow: none !important; } /* ---------------------------------------------------------------- 6. CATEGORY TILES (KB Categories widget) ---------------------------------------------------------------- */ .AppContainer__homeWidget { max-width: 1232px; margin: 0 auto; padding: 0 24px; } .WidgetsContainer__widgetCont { list-style: none; margin: 0; padding: 0; } .WidgetsContainer__lftWd { width: 100% !important; display: block; margin: 0 0 56px; } /* hide the "Knowledge Base" pill button and the grid/list view toggle */ .ModuleCategoryContainer__tabs, .ModuleCategoryContainer__viewpanel { display: none !important; } .ModuleCategoryContainer__hometabs { margin: 0; padding: 0; min-height: 0; } /* 3-column grid, 60px below the hero */ .ModuleCategoryContainer__gridView { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 60px; } /* the tile — 24px radius, 24px (--3xl) padding width resolves to 394.667px at the 1232px container (3 cols, 24px gaps) */ .TitleContainer__container { width: auto !important; max-width: none !important; margin: 0 !important; display: flex; background: var(--dm-card); border: none; border-radius: var(--dm-radius-card); padding: 24px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.02); transition: box-shadow 0.18s ease, transform 0.18s ease; } /* no strokes or separator lines anywhere inside the tiles (also kills the divider lines Zoho draws between stacked categories in its mobile list layout) */ .home [class*="TitleContainer"] { border: none !important; box-shadow: none !important; } .home .TitleContainer__container { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.02) !important; } .home .TitleContainer__container hr, .home .ModuleCategoryContainer__gridView hr { display: none !important; } .TitleContainer__container:hover { box-shadow: 0 10px 28px rgba(16, 24, 40, 0.08); transform: translateY(-2px); } .TitleContainer__gridView { display: flex !important; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; width: 100%; height: 100%; } /* icon + title row */ .TitleContainer__header { display: flex; align-items: center; gap: 16px; margin: 0; } .TitleContainer__headerIcon, .TitleContainer__headerIcon .Avatar__square { width: 44px !important; height: 44px !important; background: none !important; border: none !important; border-radius: 0 !important; flex: 0 0 auto; } .TitleContainer__headerIcon .Avatar__img { width: 44px !important; height: 44px !important; object-fit: contain; } /* tile heading — Figtree 18px, 135% line height, -0.25px letter spacing */ .TitleContainer__title, .TitleContainer__title a { font-family: var(--dm-font) !important; font-size: 18px !important; font-weight: 600 !important; line-height: 135% !important; letter-spacing: -0.25px !important; color: var(--dm-ink) !important; text-decoration: none !important; } /* tile subtitle — #606066, 20px line height, -0.16px letter spacing */ .TitleContainer__body { margin: 0; width: 100%; } .TitleContainer__description { font-family: var(--dm-font) !important; font-size: 14px !important; line-height: 20px !important; letter-spacing: -0.16px !important; color: var(--dm-sub) !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; text-overflow: ellipsis; word-break: break-word; } /* "10 Articles" meta (the column's 20px gap provides the spacing) */ .TitleContainer__content { list-style: none; margin: 0 !important; padding: 0 !important; } .TitleContainer__progressText { font-size: 12px !important; color: var(--dm-meta) !important; letter-spacing: -0.1px; } .TitleContainer__progressText + .TitleContainer__progressText::before { content: "\00B7"; margin: 0 6px; color: var(--dm-meta); } /* ---------------------------------------------------------------- 7. POPULAR / RECENT ARTICLES (list widgets) Generic on purpose — if a part doesn't pick up the style after adding the widgets, inspect the element and swap the class here. ---------------------------------------------------------------- */ /* "Popular Articles" / "Recent Articles" heading */ .ArticlesContainer__title { font-family: var(--dm-font) !important; font-size: 18px !important; /* same as category tile titles */ font-weight: 600 !important; line-height: 135% !important; letter-spacing: -0.25px !important; color: var(--dm-ink) !important; margin: 0 0 16px; background: none; } /* the white card wrapping the list */ .ArticlesContainer__articleListWidget { background: var(--dm-card) !important; border: none !important; border-radius: var(--dm-radius-card) !important; box-shadow: none !important; overflow: hidden; padding: 0 !important; margin: 0 0 40px; } /* each row — padding lives here only, so it can't stack with the link's own padding below */ .ModuleItem__moduleListItem { border: none !important; border-bottom: 1px solid var(--dm-divider) !important; margin: 0 !important; padding: 14px 18px !important; } .ModuleItem__moduleListItem:last-child { border-bottom: none !important; } .ModuleItem__moduleListItem .ModuleItem__artList, .ModuleItem__moduleListItem .ModuleItem__artList a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; text-overflow: ellipsis; width: 100%; padding: 0 !important; margin: 0 !important; font-family: var(--dm-font) !important; font-size: 15px !important; letter-spacing: -0.1px; color: #1C1C1E !important; text-decoration: none !important; line-height: 1.4; word-break: break-word; } .ModuleItem__moduleListItem:hover { background: #FAFAFB; } /* ---------------------------------------------------------------- ARTICLE DETAILS PAGE (portal root carries .articleDetail) The real

(.ArticleDetailLeftContainer__kbTitle) already exists inside the content box; the box goes transparent so the title sits on the page background, and the article body gets its own white card — matching the category page. ---------------------------------------------------------------- */ .articleDetail #layoutContainer { display: grid !important; grid-template-columns: minmax(0, 1fr) 336px; column-gap: 24px; align-items: start; } .articleDetail .Layout__layout1 { grid-column: 1; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important; } .articleDetail .Layout__layout2 { grid-column: 2; width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; } /* outer box transparent — the title row sits directly on the page */ .articleDetail .ArticleDetailLeftContainer__wrapper, .articleDetail .ArticleDetailLeftContainer__box { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* title row: big title left, PDF/print/reader icons right */ .articleDetail .ArticleDetailLeftContainer__partHead { display: flex; align-items: flex-start; gap: 16px; margin: 0 0 24px; } .articleDetail .ArticleDetailLeftContainer__kbTitle { font-family: var(--dm-font) !important; font-size: 32px !important; font-weight: 700 !important; letter-spacing: -0.5px; line-height: 1.25 !important; color: var(--dm-ink) !important; margin: 0 !important; } /* the article body card */ .articleDetail .ArticleDetailLeftContainer__contents { background: var(--dm-card) !important; border: none !important; border-radius: var(--dm-radius-card) !important; padding: 32px !important; } /* body typography */ .articleDetail .ArticleDetailLeftContainer__contents, .articleDetail .ArticleDetailLeftContainer__contents p, .articleDetail .ArticleDetailLeftContainer__contents li { font-family: var(--dm-font) !important; font-size: 15px; line-height: 1.65; color: #3A3A3F; } .articleDetail .ArticleDetailLeftContainer__contents h2, .articleDetail .ArticleDetailLeftContainer__contents h3, .articleDetail .ArticleDetailLeftContainer__contents h4, .articleDetail .ArticleDetailLeftContainer__contents b, .articleDetail .ArticleDetailLeftContainer__contents strong { color: var(--dm-ink); } /* tables inside article content (e.g. order-status tables) */ .articleDetail .ArticleDetailLeftContainer__contents table { width: 100%; border-collapse: collapse; margin: 20px 0; border: 1px solid var(--dm-divider) !important; border-radius: 8px; overflow: hidden; } .articleDetail .ArticleDetailLeftContainer__contents th, .articleDetail .ArticleDetailLeftContainer__contents td { border: 1px solid var(--dm-divider) !important; padding: 12px 16px; text-align: left; vertical-align: top; } .articleDetail .ArticleDetailLeftContainer__contents th, .articleDetail .ArticleDetailLeftContainer__contents tr:first-child td { background: #F7F7F8; font-weight: 600; color: var(--dm-ink); } /* Zoho renders a stray, empty widget slot below the article body (.ArticleDetailLeftContainer__widget) — hide it so the feedback strip is the last block on the page. This was also being styled as a card by an earlier rule, which is why an extra empty card appeared below the strip. */ .articleDetail .ArticleDetailLeftContainer__widget { display: none !important; } /* Helpful? / likes / Updated / Share strip — full-width card in the same design language as the article body. Real DOM (from your inspector): .ArticleCmd__articleLike — OUTER row wrapper .ArticleCmd__articleDetail — "Helpful?" label + thumbs group .ArticleCmd__posttime — "Updated: 1 day ago" .ArticleCmd__socialShareLt — "Share:" + icons Earlier rounds mis-identified .ArticleCmd__articleDetail as the outer wrapper — it's actually a child, which is why the card and its radius kept landing on the wrong box */ .articleDetail .ArticleCmd__articleLike { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 12px 18px !important; width: 100% !important; max-width: none !important; box-sizing: border-box !important; background: var(--dm-card) !important; border: none !important; border-radius: var(--dm-radius-card) !important; box-shadow: none !important; padding: 18px 28px !important; margin: 16px 0 0 !important; font-family: var(--dm-font) !important; } /* the Helpful label + thumbs group */ .articleDetail .ArticleCmd__articleDetail { display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 14px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } .articleDetail .ArticleCmd__socialShareLt { display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; margin: 0 !important; font-family: var(--dm-font) !important; font-size: 13px; color: var(--dm-sub); } .articleDetail .ArticleCmd__helptxt { font-family: var(--dm-font) !important; font-size: 15px !important; font-weight: 600 !important; color: var(--dm-ink) !important; margin: 0 !important; } .articleDetail .ArticleCmd__posttime { font-family: var(--dm-font) !important; font-size: 13px !important; color: var(--dm-meta) !important; margin: 0 0 0 auto !important; /* pushes Updated + Share right */ } .articleDetail .ArticleCmd__Like, .articleDetail .ArticleCmd__disLike { display: inline-flex; align-items: center; gap: 5px; } .articleDetail .ArticleCmd__mgr15 { margin: 0 !important; } /* sidebar: wrapper layers transparent; the widget cards style themselves via .WidgetsContainer__rightWd */ .articleDetail .ArticleDetailRightContainer__wrapper, .articleDetail #kbDetailRightContainer { background: transparent !important; border: none !important; box-shadow: none !important; } .articleDetail .ArticleDetailRightContainer__widgetLt { list-style: none; margin: 0; padding: 0; } /* ---------------------------------------------------------------- SEARCH RESULTS PAGE (all viewports) ---------------------------------------------------------------- */ .search__wrapper { background: transparent !important; border: none !important; box-shadow: none !important; } .search__searchTitleHeader { font-family: var(--dm-font) !important; font-size: 20px !important; font-weight: 700 !important; letter-spacing: -0.3px; color: var(--dm-ink) !important; margin: 0 0 20px !important; padding: 0 !important; background: none !important; border: none !important; } .search__searchPanel { background: var(--dm-card) !important; border: none !important; border-radius: var(--dm-radius-card) !important; box-shadow: none !important; overflow: hidden; padding: 4px 0 !important; } /* result rows — scoped to the search panel so these don't leak into the home-page Popular/Recent widgets, which share this class */ .search__searchPanel .ModuleItem__moduleListItem { background: transparent !important; border: none !important; border-bottom: 1px solid var(--dm-divider) !important; border-radius: 0 !important; padding: 18px 24px !important; margin: 0 !important; } .search__searchPanel .ModuleItem__moduleListItem:last-child { border-bottom: none !important; } /* ---------------------------------------------------------------- 8. FOOTER ---------------------------------------------------------------- */ .Footer__footer { background: var(--dm-bg) !important; border: none; } .dm-footer { max-width: 1232px; margin: 0 auto; padding: 32px 24px 40px; text-align: center; } .dm-footer__copy { font-family: var(--dm-font); font-size: 12px; color: var(--dm-meta); letter-spacing: -0.05px; margin: 0; } /* ---------------------------------------------------------------- 9. BREADCRUMBS & INNER PAGES ---------------------------------------------------------------- */ /* on the home page the breadcrumb (if any) stays inside the hero */ .home .Header__titleSearchWrapper .BreadCrumbs__breadcrumbList, .home .Header__titleSearchWrapper .BreadCrumbs__breadcrumbList a, .home .Header__titleSearchWrapper .BreadCrumbs__breadcrumbList li { color: rgba(255, 255, 255, 0.75) !important; font-family: var(--dm-font); font-size: 13px; } /* on inner pages Zoho renders the breadcrumb inside the black hero only; visually relocate it just below the hero, aligned with the content column (pure CSS, the element itself stays where Zoho put it) */ .portalContainer:not(.home) .Header__titleSearchWrapper { position: relative; } .portalContainer:not(.home) #breadCrumbsContainer { position: absolute; top: calc(100% + 28px); left: 50%; transform: translateX(-50%); width: 100%; max-width: 1232px; padding: 0 24px; } .portalContainer:not(.home) #breadCrumbsContainer .BreadCrumbs__breadcrumbList, .portalContainer:not(.home) #breadCrumbsContainer .BreadCrumbs__breadcrumbList li, .portalContainer:not(.home) #breadCrumbsContainer .BreadCrumbs__breadcrumbList a { color: var(--dm-meta) !important; font-family: var(--dm-font); font-size: 14px; text-decoration: none; } .portalContainer:not(.home) #breadCrumbsContainer .BreadCrumbs__breadcrumbList li:last-child, .portalContainer:not(.home) #breadCrumbsContainer .BreadCrumbs__breadcrumbList li:last-child span { color: var(--dm-sub) !important; } /* inner pages: shared layout container */ .portalContainer:not(.home) #layoutContainer { max-width: 1232px; margin: 0 auto !important; padding: 76px 24px 64px !important; /* top clears the relocated breadcrumb */ width: auto !important; min-height: 0 !important; } /* white 24px-radius panel for the main article list. Exact selector only — the old fuzzy net-selector this replaced was also matching .ArticleListRightContainer__wrapper (the sidebar's outer wrapper), wrapping the whole sidebar in one unpadded card whose corners cut across the icon/title and the bottom of the article list */ /* unify every divider hairline on inner pages */ .portalContainer:not(.home) #layoutContainer * { border-color: var(--dm-divider); } /* list rows read as dark text, not link-blue */ .portalContainer:not(.home) #layoutContainer a { color: #1C1C1E; font-family: var(--dm-font); text-decoration: none; } /* the sidebar's outer wrapper stays transparent — its children (.treeView, .WidgetsContainer__rightWd) each carry their own card */ .ArticleListRightContainer__wrapper, .ArticleListRightContainer__WidgetConListLeft { background: transparent !important; border: none !important; box-shadow: none !important; } /* sidebar box headings ("KB Sections", "Popular Articles") */ .portalContainer:not(.home) #layoutContainer .WidgetsContainer__rtWd h2, .portalContainer:not(.home) #layoutContainer .WidgetsContainer__rtWd h3, .portalContainer:not(.home) #layoutContainer [class*="sideBar" i] :is(h2, h3, [class*="head" i]):not(li *) { font-family: var(--dm-font) !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: -0.2px; color: var(--dm-ink) !important; } /* ---------------------------------------------------------------- CATEGORY PAGE (portal root carries .articleList) Zoho renders the category name only inside the sidebar block (.SubscribeDepart__subs). display:contents flattens the sidebar wrappers into the layout grid so that real element can be placed at the top as the page title — no scripts, no hardcoded text. ---------------------------------------------------------------- */ .articleList #layoutContainer { display: grid !important; grid-template-columns: minmax(0, 1fr) 336px; column-gap: 24px; align-items: start; } .articleList .Layout__layout1 { grid-column: 1; grid-row: 2; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important; } .articleList .Layout__layout2, .articleList .ArticleListRightContainer__wrapper { display: contents !important; } /* the category-name block, placed across the top as the title */ .articleList .SubscribeDepart__subs { grid-column: 1 / -1; grid-row: 1; background: transparent !important; border: none !important; padding: 0 !important; margin: 0 0 24px !important; } .articleList .SubscribeDepart__logosubscribe, .articleList .SubscribeDepart__depdec { display: none !important; } .articleList .SubscribeDepart__depname { display: block; font-family: var(--dm-font) !important; font-size: 32px !important; font-weight: 700 !important; letter-spacing: -0.5px; color: var(--dm-ink) !important; } /* sidebar widgets column */ .articleList .ArticleListRightContainer__WidgetConListLeft { grid-column: 2; grid-row: 2; width: 100%; margin: 0 !important; padding: 0 !important; } /* both grid-row-2 items start flush under the title — Zoho's own top margins/paddings on these wrappers created the oversized gap under the title and the vertical misalignment between the list and the Popular Articles card */ .articleList .ArticleListContainer__wrapper { margin: 0 !important; padding: 0 !important; } .articleList .ArticleListContainer__widget:empty { display: none; } .articleList .WidgetsContainer__rightWd:first-child { margin-top: 0 !important; } /* main article list panel (left column) on category/article-list pages */ .ArticleListContainer__boxView { display: block; background: var(--dm-card); border-radius: var(--dm-radius-card); overflow: hidden; padding: 0; } .ArticleListContainer__boxView .ModuleItem__moduleListItem { padding: 20px 28px !important; } /* ---------------------------------------------------------------- INNER PAGE SIDEBAR — KB Sections (category tree) and the Popular/Recent Articles widgets, matched to the real DOM: .treeView (KB Sections) and .WidgetsContainer__rightWd (each widget) are siblings inside .ArticleListRightContainer__wrapper ---------------------------------------------------------------- */ /* removed per design: the KB Sections tree and every Follow block */ .treeView, .SubscribeDepart__followContent, .DepFollow__depFollow, .ArticleDetailRightContainer__followContentLow { display: none !important; } /* Popular Articles / Recent Articles — each its own white card */ .WidgetsContainer__rightWd { display: block !important; background: var(--dm-card) !important; border-radius: var(--dm-radius-card) !important; padding: 24px !important; margin: 0 0 16px !important; } .WidgetsContainer__rightWd:last-child { margin-bottom: 0; } .CustomWidgets__widgetTitle { font-family: var(--dm-font) !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: -0.2px; color: var(--dm-ink) !important; margin: 0 0 12px; } /* each row: icon + link. Zoho nests a second .CustomWidgets__widgets inside the first to wrap the link — style the row on the outer one only, and neutralise the inner one so padding/borders don't double up */ .CustomWidgets__widgets { display: flex !important; align-items: flex-start !important; gap: 10px; border-bottom: 1px solid var(--dm-divider); padding: 10px 0; } .CustomWidgets__widgets:last-child { border-bottom: none; } .CustomWidgets__widgets .CustomWidgets__widgets { border: none !important; padding: 0 !important; min-width: 0; flex: 1 1 auto !important; align-items: flex-start !important; } .CustomWidgets__widgetIcon { flex: 0 0 auto !important; margin-top: 2px !important; /* aligns the icon with the first text line's cap-height */ opacity: 0.45; display: inline-flex; align-items: center; line-height: 1; } /* Titles wrap up to 3 lines, then ellipsis-truncate — never invisibly clipped and never forced onto a single line */ .CustomWidgets__widgetContents { font-family: var(--dm-font) !important; font-size: 14px !important; line-height: 1.4 !important; color: #1C1C1E !important; text-decoration: none !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; line-clamp: 3 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: normal !important; word-break: break-word; min-width: 0; flex: 1 1 auto; } /* Titles wrap up to 3 lines, then ellipsis-truncate — same rule applied everywhere Zoho's own commonStyle__overflowDotted utility (nowrap + hard clip) would otherwise cut text off invisibly: the category-page sidebar, the article-detail-page sidebar ("Related Articles"), and the KB Sections tree */ .ArticleListRightContainer__wrapper .commonStyle__overflowDotted, .ArticleDetailRightContainer__wrapper .commonStyle__overflowDotted, .Tree__labelTree { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; line-clamp: 3 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: normal !important; word-break: break-word; } /* slightly smaller hero wordmark on inner pages */ .portalContainer:not(.home) .Header__titleDescription::after { width: min(400px, 76vw); } /* ---------------------------------------------------------------- 10. RESPONSIVE ---------------------------------------------------------------- */ /* ---- inner pages on tablet/mobile: stack to a single column ---- The 336px sidebar column can't safely coexist with content below ~1024px viewports (Zoho's own container padding chews into it), so both inner grids collapse to one column here. The overflow safeguards on the content wrappers protect against wide images or long unbreakable words that were spilling past the viewport on phone widths. */ @media (max-width: 1024px) { .articleList #layoutContainer, .articleDetail #layoutContainer { grid-template-columns: 1fr !important; } .articleList .Layout__layout1, .articleList .SubscribeDepart__subs, .articleList .ArticleListRightContainer__WidgetConListLeft, .articleDetail .Layout__layout1, .articleDetail .Layout__layout2 { grid-column: 1; } /* stacking order: title, then the article list, then widgets (with grid-row:auto the DOM order would put the title after the list, since Zoho renders it inside the second column) */ .articleList .SubscribeDepart__subs { grid-row: 1; } .articleList .Layout__layout1 { grid-row: 2; } .articleList .ArticleListRightContainer__WidgetConListLeft { grid-row: 3; } .articleDetail .Layout__layout1 { grid-row: 1; } .articleDetail .Layout__layout2 { grid-row: 2; } .articleList .ArticleListRightContainer__WidgetConListLeft, .articleDetail .Layout__layout2 { margin-top: 24px !important; } /* NUCLEAR width containment for article and category pages on tablet/mobile — DevTools showed the whole Layout__layout1 measuring 476.71px inside a 390px viewport, because Zoho's widget content (nested