diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 37548c3acfb..48122288744 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -379,8 +379,11 @@ const config: Config = { ], }, prism: { + // Both modes use the same dark token palette since code blocks + // always render on a pure-black background (see design-style.scss). theme: prismThemes.nightOwl, - darkTheme: prismThemes.okaidia, + darkTheme: prismThemes.nightOwl, + additionalLanguages: ["bash", "sql", "python", "yaml", "json"], }, // Change website analytics from Google Analytics to Matomo matomo: { diff --git a/src/components/bootcamp/Card/index.tsx b/src/components/bootcamp/Card/index.tsx deleted file mode 100644 index c29f31deb90..00000000000 --- a/src/components/bootcamp/Card/index.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import clsx from "clsx"; -import LinkWithBaseUrl from "../../common/LinkWithBaseUrl"; -import styles from "./styles.module.scss"; -import GreaterThan from "/img/greater_than.svg"; - -interface IProps { - style?: React.CSSProperties; - title?: string; - content?: string; - link: { - text: string; - href: string; - }; -} -export default function Card(props: IProps) { - return ( -
- -
{props.title}
-
{props.content}
-
- {props.link.text} - -
- -
- ); -} diff --git a/src/components/bootcamp/Card/styles.module.scss b/src/components/bootcamp/Card/styles.module.scss deleted file mode 100644 index 7fcbdce8ad7..00000000000 --- a/src/components/bootcamp/Card/styles.module.scss +++ /dev/null @@ -1,37 +0,0 @@ -.card { - border: 1px solid var(--box-border-color); - border-radius: var(--normal-box-radius); - padding: 0 21px; - padding-top: 14px; - cursor: pointer; - &:hover { - background-color: var(--active-color); - color: var(--hover-full-bg-text-color); - .link, - a { - color: var(--hover-full-bg-text-color); - } - .content { - color: var(--sub-text-color-3); - } - svg { - fill: var(--hover-full-bg-text-color) !important; - } - } - .content { - line-height: 26px; - padding-bottom: 22px; - } - .link { - padding-bottom: 25px; - font-size: 14px; - color: var(--active-color); - svg { - fill: var(--active-color); - vertical-align: middle; - } - } - @media screen and (max-width: 1440px) { - width: auto !important; - } -} diff --git a/src/components/bootcamp/MainContent/CardLine.tsx b/src/components/bootcamp/MainContent/CardLine.tsx deleted file mode 100644 index 2e514b50eea..00000000000 --- a/src/components/bootcamp/MainContent/CardLine.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import Card from "../Card"; -interface IProps { - cardLine: { - link: { - text: string; - href: string; - }; - content?: string; - title?: string; - style?: React.CSSProperties; - }[]; - itemWidth?: number | string; -} -export default function CardLine({ cardLine, itemWidth }: IProps) { - return cardLine.map((card, i) => { - return ; - }); -} diff --git a/src/components/bootcamp/MainContent/index.tsx b/src/components/bootcamp/MainContent/index.tsx deleted file mode 100644 index 267233a22f0..00000000000 --- a/src/components/bootcamp/MainContent/index.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import { - BOOTCAMP_PAGE_CONFIG, - LINK_NAV_CONFIG, -} from "@site/src/consts/bootcamp"; -import Card from "../Card"; -import CardLine from "./CardLine"; -import styles from "./styles.module.scss"; - -export default function MainContent() { - const { DATA_0, DATA_101, DATA_102, DATA_103, DATA_104, GET_SOURCE } = - BOOTCAMP_PAGE_CONFIG; - - return ( -
-
- {DATA_0.title} -
-
- {DATA_0.subTitle} -
- - - -
- {DATA_101.title} -
-
{DATA_101.subText}
- -
- -
- -
- -
- - {/* 102 before */} -
- {DATA_102.title} -
- - - {/* 103 before */} -
- {DATA_103.title} -
-
{DATA_103.subText}
-
- -
- - {/* 104 before */} -
- {DATA_104.title} -
-
- -
- - {/* Get the Source */} -
- {GET_SOURCE.title} -
-
- {GET_SOURCE.content} -
-
- ); -} diff --git a/src/components/bootcamp/MainContent/styles.module.scss b/src/components/bootcamp/MainContent/styles.module.scss deleted file mode 100644 index 7cd91bf1f86..00000000000 --- a/src/components/bootcamp/MainContent/styles.module.scss +++ /dev/null @@ -1,18 +0,0 @@ -.mainContent { - .cardLine { - display: flex; - justify-content: space-between; - } - @media screen and (max-width: 1440px) { - .cardLine { - display: grid; - gap: 32px; - } - - } - @media screen and (max-width: 768px) { - .cardLine { - grid-template-columns: 1fr !important; - } - } -} diff --git a/src/components/bootcamp/TextPic/index.tsx b/src/components/bootcamp/TextPic/index.tsx deleted file mode 100644 index 939a7bf5a86..00000000000 --- a/src/components/bootcamp/TextPic/index.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import useBaseUrl from "@docusaurus/useBaseUrl"; -import clsx from "clsx"; -import styles from "./styles.module.scss"; - -export default function TextPic() { - return ( -
-
- These tutorials showcase how Apache Cloudberry can address day-to-day - tasks performed in typical DW, BI and data science environments. It is - designed to be used with the Apache Cloudberry Sandbox, which is based - on the Docker with the CentOS 7.9 OS. -
-
- -
-
- ); -} diff --git a/src/components/bootcamp/TextPic/styles.module.scss b/src/components/bootcamp/TextPic/styles.module.scss deleted file mode 100644 index a7ac802542b..00000000000 --- a/src/components/bootcamp/TextPic/styles.module.scss +++ /dev/null @@ -1,13 +0,0 @@ -.wrap { - margin: auto; - margin-top: 78px; - - .picture { - margin: 0 -54px; - } - @media screen and (max-width: 1024px) { - .picture { - margin: 0; - } - } -} diff --git a/src/components/common/Breadcrumbs/styles.module.scss b/src/components/common/Breadcrumbs/styles.module.scss index e98301daf60..d518749b6b7 100644 --- a/src/components/common/Breadcrumbs/styles.module.scss +++ b/src/components/common/Breadcrumbs/styles.module.scss @@ -1,58 +1,83 @@ .breadcrumbs { display: flex; - align-items: self-start; - height: 21px; - font-size: 13px; - color: var(--sub-text-color-2); - &.mdxPage { - .backPath { - color: #fff !important; - } - } + align-items: center; + font-size: 0.8125rem; + color: var(--color-text-muted); + gap: 4px; .backLogoA { - position: relative; - top: 1px; + display: inline-flex; + align-items: center; + width: 16px; + height: 16px; + color: var(--color-text-muted); + transition: color var(--motion-fast); + &:hover { + color: var(--color-text); + } .backLogoSvg { display: inline-block; - fill: var(--back-home-logo-color); + fill: var(--color-text-muted); } .backLogoLightSvg { display: none; + fill: currentColor; } } + .line { - fill: #4c4c4c; + fill: var(--color-border-strong); vertical-align: middle; + width: 12px; + height: 12px; + opacity: 0.6; } .path { - span.leafPath { - color: var(--active-color); - vertical-align: middle; - } + display: inline-flex; + align-items: center; + gap: 4px; + .backPath { text-decoration: none; + color: var(--color-text-muted); + padding: 4px 6px; + border-radius: var(--radius-sm); + transition: background-color var(--motion-fast), + color var(--motion-fast); + &:hover { + background-color: var(--color-bg-muted); + color: var(--color-text); + } + } + span.leafPath { + color: var(--color-accent); + vertical-align: middle; + padding: 4px 6px; + font-weight: 600; } } } html[data-theme="light"] { - .breadcrumbs:not(.mdxPage) { - color: #000; - } - .breadcrumbs:not(.mdxPage) svg { - fill: #000; - } - .breadcrumbs:not(.mdxPage) .line { - opacity: 1; - } - .breadcrumbs:not(.mdxPage) { + .breadcrumbs { + color: var(--color-text-muted); + .backLogoSvg { + display: none !important; + } .backLogoLightSvg { display: inline-block !important; } + } +} + +html[data-theme="dark"] { + .breadcrumbs { .backLogoSvg { - display: none !important; + display: inline-block; + } + .backLogoLightSvg { + display: none; } } } diff --git a/src/components/common/ColorCard/styles.module.scss b/src/components/common/ColorCard/styles.module.scss index 614ac989032..6bd54dad26d 100644 --- a/src/components/common/ColorCard/styles.module.scss +++ b/src/components/common/ColorCard/styles.module.scss @@ -1,37 +1,40 @@ +.main { + width: 100%; + max-width: var(--global-main-width); + margin: 0 auto; + position: relative; + + .content { + max-width: 880px; + .bigText { + font-family: var(--font-family-display); + font-weight: 800; + font-size: clamp(2rem, 4vw, 2.75rem); + line-height: 1.1; + letter-spacing: -0.02em; + color: var(--color-text); + margin-top: 16px; + } + .smallText { + font-size: 1.0625rem; + line-height: 1.65; + color: var(--color-text-muted); + margin-top: 16px; + } + } +} + html[data-theme="light"] { .main { &.mdxCard { .content { .bigText { - color: #fff; + color: var(--color-text); } .smallText { - color: rgba(255, 255, 255, 0.6); + color: var(--color-text-muted); } } } } } -.main { - width: var(--global-main-width); - margin: 0 auto; - position: relative; - - .content { - max-width: 949px; - .bigText { - max-width: 847px; - font-weight: 700; - margin-top: 12px; - font-size: 32px; - line-height: 40px; - color: var(--title-text-color); - } - .smallText { - font-size: 16px; - line-height: 24px; - color: var(--sub-text-color-2); - margin-top: 20px; - } - } -} diff --git a/src/components/common/ColorHeader/styles.module.scss b/src/components/common/ColorHeader/styles.module.scss index 1e84283bcf3..795ecd02d47 100644 --- a/src/components/common/ColorHeader/styles.module.scss +++ b/src/components/common/ColorHeader/styles.module.scss @@ -1,330 +1,45 @@ -@keyframes light { - 0% { - transform: translate(0) scale(1); - } - - 33% { - transform: translate(30px, -20px) scale(1); - } - - 66% { - transform: translate(-20px, 20px) scale(0.9); - } - - to { - transform: translate(0, 0) scale(1); - } -} -@keyframes light2 { - 0% { - transform: translate(0) scale(1) rotate(45deg); - } - - 33% { - transform: translate(-20px, 20px) scale(1.1) rotate(45deg); - } - - 66% { - transform: translate(20px, -20px) scale(0.9) rotate(45deg); - } - - to { - transform: translate(0, 0) scale(1) rotate(45deg); - } -} -@keyframes light3 { - 0% { - transform: translate(0) scale(1); - } - - 33% { - transform: translate(0, 100px) scale(1.1); - } - - 66% { - transform: translate(0, -100px) scale(0.9); - } - - to { - transform: translate(0, 0) scale(1); - } -} -@keyframes light4 { - 0% { - transform: translate(0) scale(1); - } - - 33% { - transform: translate(0, 10px) scale(1); - } - - 66% { - transform: translate(0, -10px) scale(1); - } - - to { - transform: translate(0, 0) scale(1); - } -} -@keyframes smallTYKeyframe { - 0% { - transform: translate(0) scale(1); - } - - 33% { - transform: translate(0, 10px) scale(1.1); - } - - 66% { - transform: translate(0, -10px) scale(0.9); - } - - to { - transform: translate(0, 0) scale(1); - } -} -@keyframes scaleKeyframe { - 0% { - transform: scale(0.8); - } - - 50% { - transform: scale(1.2); - } - - to { - transform: scale(0.8); - } -} - -.leftBox { - position: absolute; - left: -180px; - bottom: -180px; - width: 200px; - height: 200px; - border-radius: 30% 70% 0% 33% / 64% 70% 0% 36%; - background-color: #ef9364; - animation: 5s infinite light linear; - box-shadow: 90px 90px 50px 90px #ef9364, 90px -90px 190px 90px #ef9364, - -90px 90px 90px 190px #ef9364, -90px -90px 90px 100px #ef9364; -} - -.rightBox { - position: absolute; - right: -220px; - top: 100px; - width: 200px; - height: 200px; - background-color: #8b7bcf; - border-radius: 30% 70% 67% 13% / 47% 30% 70% 66%; - animation: 5s infinite light2 linear; - box-shadow: 0 0px 1150px 250px #8b7bcf, -100px 40px 180px 200px #8b7bcf; -} +/** + * Page header band — clean, soft brand-tinted background. + */ .wrap { position: relative; overflow: hidden; - padding-bottom: 158px; - background-color: var(--ifm-navbar-background-color); - background-image: url("/img/rectangle.png"); - background-size: 72.6px 66.6px; - .darkModeBox { - display: block; - } - .lightModeBox { - display: none; - } + padding: 32px 0 64px; + background: + radial-gradient(800px 320px at 12% 0%, rgba(255, 89, 0, 0.10), transparent 65%), + radial-gradient(700px 320px at 95% 10%, rgba(254, 163, 21, 0.10), transparent 65%), + var(--color-bg); + border-bottom: 1px solid var(--color-border); + .content { - margin-top: 38px; + margin-top: 24px; } - .back { - display: flex; - align-items: center; - height: 21px; - line-height: 21px; - width: var(--global-main-width); - margin: 0 auto; - position: relative; - .main { - position: absolute; - top: 14px; - display: flex; - justify-content: center; - a { - height: 18px; - width: 18px; - overflow: hidden; - } - - .backLogo { - height: 18px; - cursor: pointer; - position: relative; - top: 1px; - } - - .line { - display: inline-block; - margin: 0 6px; - opacity: 0.4; - width: 12px; - height: 12px; - line-height: 21px; - position: relative; - top: 4px; - } - .curText { - color: var(--active-color); - font-size: 13px; - } - } + /* Hide legacy decorative blobs */ + .darkModeBox, + .lightModeBox, + .leftBox, + .rightBox, + .lbBox, + .rbBox, + .sBox, + .xBox { + display: none !important; } } -html[data-theme="light"] { - .wrap { - // left box - background: #fffafa; - .lbBox { - position: absolute; - width: 150px; - height: 150px; - background-color: #ffa800; - opacity: 0.3; - bottom: 8%; - left: 5%; - border-radius: 50%; - animation: scaleKeyframe 5s infinite linear; - } - .rbBox { - position: absolute; - right: 500px; - - .sBox { - position: absolute; - width: 250px; - height: 250px; - background-color: #ffa800; - opacity: 0.3; - border-radius: 50%; - z-index: 2; - left: -350px; - bottom: -300px; - animation: 5s infinite light4 linear; - } - .xBox { - position: absolute; - width: 100px; - height: 300px; - background-color: rgb(255, 209, 126); - border-radius: 50%; - bottom: -500px; - z-index: 1; - box-shadow: 50px 40px 120px 250px rgb(255, 209, 126); - animation: 5s infinite light3 linear; - } - } - @media screen and (max-width: 1200px) { - .lbBox { - width: 100px; - height: 100px; - } - .rbBox { - .sBox { - width: 180px; - height: 180px; - bottom: -270px; - left: -300px; - } - .xBox { - width: 60px; - height: 300px; - } - } - } - @media screen and (max-width: 996px) { - .lbBox { - width: 50px; - height: 50px; - left: 160px; - bottom: 100px; - } - .rbBox { - bottom: 42px; - right: 200px; - .sBox { - width: 100px; - height: 100px; - left: -150px; - bottom: -110px; - } - .xBox { - width: 50px; - height: 50px; - bottom: -100px; - box-shadow: 10px 10px 50px 100px rgb(255, 209, 126); - animation-name: smallTYKeyframe; - } - } - } - @media screen and (max-width: 768px) { - .lbBox { - width: 50px; - height: 50px; - left: 30px; - bottom: 100px; - } - .rbBox { - bottom: 42px; - right: 200px; - .sBox { - width: 100px; - height: 100px; - left: -150px; - bottom: -110px; - } - .xBox { - width: 50px; - height: 50px; - bottom: -100px; - box-shadow: 10px 10px 50px 100px rgb(255, 209, 126); - animation-name: smallTYKeyframe; - } - } - } - } - .darkModeBox { - display: none; - } - .lightModeBox { - display: block; - } -} -@media screen and (max-width: 1440px) { - .leftBox { - width: 100px; - height: 100px; - } - .rightBox { - width: 80px; - height: 80px; - top: 0; - right: -250px; +[data-theme="dark"] { + .wrap { + background: + radial-gradient(800px 320px at 12% 0%, rgba(255, 89, 0, 0.18), transparent 65%), + radial-gradient(700px 320px at 95% 10%, rgba(254, 163, 21, 0.14), transparent 65%), + var(--color-bg); } } + @media screen and (max-width: 768px) { - .leftBox { - width: 60px; - height: 60px; - box-shadow: 90px -90px 190px 90px #ef9364; - left: -150px; - bottom: -150px; - } - .rightBox { - width: 60px; - height: 60px; - box-shadow: -100px 60px 80px 180px #8b7bcf; + .wrap { + padding: 24px 0 48px; } } diff --git a/src/components/common/LinkNav/styles.module.scss b/src/components/common/LinkNav/styles.module.scss index 86dc6d72dd6..0eea2841658 100644 --- a/src/components/common/LinkNav/styles.module.scss +++ b/src/components/common/LinkNav/styles.module.scss @@ -1,56 +1,31 @@ .nav { list-style: none; + margin: 0; + padding: 0; + border-left: 1px solid var(--color-border); + .item { - font-size: 12px; - line-height: 16px; - margin-top: 19px; - position: relative; - margin-top: 0px; - height: 40px; + font-size: 0.875rem; + line-height: 1.4; + color: var(--color-text-muted); + margin-left: -1px; + border-left: 2px solid transparent; + padding: 8px 0 8px 16px; + transition: color var(--motion-fast), + border-color var(--motion-fast); + &.active { - color: var(--right-sidebar-active-color); - a { - &::after { - background-color: var(--right-sidebar-active-color); - } - } + color: var(--color-accent); + border-left-color: var(--color-accent); + font-weight: 600; } - &:hover { - color: var(--ifm-color-primary); - // a { - // &::after { - // background-color: var(--active-color); - // } - // } + color: var(--color-text); } + a { text-decoration: none; color: inherit; - &::after { - content: ""; - width: 8px; - height: 8px; - display: inline-block; - position: absolute; - background-color: var(--right-sidebar-circle-bg-color); - border-radius: 50%; - left: -19px; - top: 6px; - } - } - &:not(:last-child) { - a { - &::before { - content: ""; - background-color: var(--right-sidebar-circle-bg-color); - width: 2px; - height: 32px; - position: absolute; - left: -16px; - top: 14px; - } - } } } } diff --git a/src/components/common/Table/index.tsx b/src/components/common/Table/index.tsx index 84e32419445..8cbed580b2e 100644 --- a/src/components/common/Table/index.tsx +++ b/src/components/common/Table/index.tsx @@ -1,34 +1,39 @@ interface IProps { tableColumns: { label: string; prop: string; width?: string | number }[]; - data: any[]; + data: Record[]; className?: string; style?: React.CSSProperties; bodyStyle?: React.CSSProperties; headerStyle?: React.CSSProperties; } + +/** + * Lightweight, semantic table. Renders a real with no wrapper + *
so it inherits the shared markdown table styling (fit-content + * width, centered, brand-aligned headers) from design-style.scss when + * rendered inside
. + */ export default function Table(props: IProps) { return ( -
-
- - +
+ + + {props.tableColumns.map((column) => ( + + ))} + + + + {props.data.map((row, i) => ( + {props.tableColumns.map((column) => ( - + ))} - - - {props.data.map((row, i) => ( - - {props.tableColumns.map((column) => ( - - ))} - - ))} - -
+ {column.label} +
- {column.label} - {row[column.prop]}
{row[column.prop]}
- + ))} + + ); } diff --git a/src/components/community/Card/styles.module.scss b/src/components/community/Card/styles.module.scss index a97ef82fe85..1c6c8d2c623 100644 --- a/src/components/community/Card/styles.module.scss +++ b/src/components/community/Card/styles.module.scss @@ -1,65 +1,56 @@ -html[data-theme="light"] { - .card { - .icon { - svg { - fill: #000 !important; - } - } - } -} .card { - width: 305px; - border: 1px solid var(--box-border-color); - min-height: 100px; - border-radius: var(--normal-box-radius); - padding: 0 22px; display: flex; flex-direction: column; justify-content: space-between; + background-color: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: 24px; cursor: pointer; - @media screen and (max-width: 1440px) { - width: auto !important; - } - &:hover { - border: 1px solid var(--box-hover-border-color); - background: var(--active-color); - .header { - .title { - color: var(--normal-text-color-1); - } - svg { - fill: var(--normal-text-color-1); - } - } + text-decoration: none; + box-shadow: var(--shadow-xs); + transition: border-color var(--motion-fast), + box-shadow var(--motion-fast), + transform var(--motion-fast); + min-height: 168px; - .content { - color: var(--sub-text-color-3); + &:hover { + border-color: var(--color-accent); + box-shadow: var(--shadow-md); + transform: translateY(-2px); + .header .title { + color: var(--color-accent); } .link { - color: var(--normal-text-color-1); + color: var(--color-accent); svg { - fill: var(--normal-text-color-1); + fill: var(--color-accent); + transform: translateX(2px); } } } + .header { display: flex; align-items: center; - margin-top: 19px; - // margin-bottom: 7px; + gap: 10px; + margin-bottom: 8px; .title { - font-size: 20px; - line-height: 20px; - color: var(--title-text-color); + font-family: var(--font-family-display); + font-size: 1.0625rem; font-weight: 700; + line-height: 1.3; + color: var(--color-text); + transition: color var(--motion-fast); } .icon { - margin-right: 9px; - display: inline-block; - width: 30px; - height: 30px; + display: inline-flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; flex-shrink: 0; svg { width: 100%; @@ -67,16 +58,37 @@ html[data-theme="light"] { } } } + .content { - line-height: 20px; - font-size: 14px; - color: var(--sub-text-color-2); - letter-spacing: -0.55px; + flex: 1; + line-height: 1.55; + font-size: 0.9375rem; + color: var(--color-text-muted); + margin-bottom: 16px; } + .link { - color: var(--active-color); - margin-bottom: 26px; - display: flex; + display: inline-flex; align-items: center; + gap: 6px; + color: var(--color-accent); + font-size: 0.875rem; + font-weight: 600; + transition: color var(--motion-fast); + svg { + transition: transform var(--motion-fast); + width: 12px; + height: 12px; + } + } +} + +html[data-theme="light"] { + .card { + .icon { + svg { + fill: var(--color-text) !important; + } + } } } diff --git a/src/components/community/CardWrap/styles.module.scss b/src/components/community/CardWrap/styles.module.scss index 61cbe15b232..e7bc11ee58c 100644 --- a/src/components/community/CardWrap/styles.module.scss +++ b/src/components/community/CardWrap/styles.module.scss @@ -1,15 +1,14 @@ .cardWrap { - width: 980px; - @media screen and (max-width: 1440px) { - width: auto; - } + width: 100%; + padding-bottom: 56px; + .title { - font-size: 30px; + font-family: var(--font-family-display); + font-size: 1.625rem; font-weight: 700; - line-height: 56px; - // margin-top: 69px; - margin-bottom: 32px; + line-height: 1.25; + letter-spacing: -0.01em; + color: var(--color-text); + margin-bottom: 24px; } - // padding-bottom: 90px; - padding-bottom: 129px; } diff --git a/src/components/contribute/Card/styles.module.scss b/src/components/contribute/Card/styles.module.scss index a1dd6270323..3e9bfc7c8c7 100644 --- a/src/components/contribute/Card/styles.module.scss +++ b/src/components/contribute/Card/styles.module.scss @@ -1,78 +1,81 @@ -html[data-theme="light"] { - .wrap { - &:nth-of-type(1) { - .tIcon { - background-image: url(/img/home/feature/mef-light.svg); - } - &:hover { - .tIcon { - background-image: url(/img/home/feature/mef-light-hover.svg); - } - } - } - &:nth-of-type(2) { - .tIcon { - background-image: url(/img/home/feature/muc-light.svg); - } - &:hover { - .tIcon { - background-image: url(/img/home/feature/muc-light-hover.svg); - } - } - } - } -} .wrap { - border: 1px solid var(--box-border-color); - padding: 20px; - width: 474px; + border: 1px solid var(--color-border); + background-color: var(--color-surface); + border-radius: var(--radius-lg); + padding: 24px; + width: 100%; cursor: pointer; + display: flex; + flex-direction: column; + gap: 12px; + box-shadow: var(--shadow-xs); + transition: border-color var(--motion-fast), + box-shadow var(--motion-fast), + transform var(--motion-fast); + &:nth-of-type(1) { .tIcon { - background-image: url(/img/home/feature/mef.svg); + background-image: url(/img/home/feature/mef-light.svg); } } &:nth-of-type(2) { .tIcon { - background-image: url(/img/home/feature/muc.svg); + background-image: url(/img/home/feature/muc-light.svg); } } - .content { - margin: 10px 0; - } + .tIcon { display: inline-block; - width: 48px; - height: 48px; + width: 44px; + height: 44px; + background-repeat: no-repeat; + background-size: contain; } + + .content { + color: var(--color-text-muted); + line-height: 1.6; + font-size: 0.9375rem; + } + .link { - color: var(--active-color); - display: flex; + display: inline-flex; align-items: center; + gap: 6px; + color: var(--color-accent); + font-weight: 600; + font-size: 0.875rem; .icon { - fill: var(--active-color); + fill: var(--color-accent); + transition: transform var(--motion-fast); + width: 12px; + height: 12px; } a { color: inherit; - display: flex; + display: inline-flex; align-items: center; - cursor: pointer; + gap: 6px; } } + &:hover { - background-color: var(--active-color); - .content { - color: var(--sub-text-color-3); + border-color: var(--color-accent); + box-shadow: var(--shadow-md); + transform: translateY(-2px); + .link .icon { + transform: translateX(2px); } - .link { - color: var(--normal-text-color-1); + } +} - .icon { - fill: var(--normal-text-color-1); - } +html[data-theme="dark"] { + .wrap { + &:nth-of-type(1) .tIcon { + background-image: url(/img/home/feature/mef.svg); + } + &:nth-of-type(2) .tIcon { + background-image: url(/img/home/feature/muc.svg); } - } - @media screen and (max-width: 768px) { - width: 100%; } } diff --git a/src/components/contribute/TextListItem/styles.module.scss b/src/components/contribute/TextListItem/styles.module.scss index 51550bad29a..4d116bec448 100644 --- a/src/components/contribute/TextListItem/styles.module.scss +++ b/src/components/contribute/TextListItem/styles.module.scss @@ -1,26 +1,58 @@ .wrap { - padding: 68px 0 57px 0; + padding: 48px 0 32px; box-sizing: border-box; + border-bottom: 1px solid var(--color-border); + + &:first-of-type { + padding-top: 32px; + } + &:last-of-type { + border-bottom: none; + } + .title { - font-size: 30px; + font-family: var(--font-family-display); + font-size: 1.625rem; font-weight: 700; - line-height: 56px; + line-height: 1.25; + letter-spacing: -0.01em; + color: var(--color-text); + margin-bottom: 16px; } + .content { - color: var(--sub-text-color-2); - line-height: 24px; - margin: 15px 0; + color: var(--color-text-muted); + line-height: 1.7; + font-size: 1rem; + margin-bottom: 16px; + + p { + margin: 0 0 12px 0; + &:last-child { + margin-bottom: 0; + } + } } + .link { - color: var(--active-color); + color: var(--color-accent); + font-weight: 600; + font-size: 0.9375rem; .icon { - fill: var(--active-color); + fill: var(--color-accent); + transition: transform var(--motion-fast); + width: 12px; + height: 12px; } a { color: inherit; - display: flex; + display: inline-flex; align-items: center; + gap: 6px; cursor: pointer; + &:hover .icon { + transform: translateX(2px); + } } } } diff --git a/src/components/home/FrequentlyAskedQuestions/index.module.scss b/src/components/home/FrequentlyAskedQuestions/index.module.scss index 8b4d7f98b3b..856788e022f 100644 --- a/src/components/home/FrequentlyAskedQuestions/index.module.scss +++ b/src/components/home/FrequentlyAskedQuestions/index.module.scss @@ -1,41 +1,47 @@ .frequentlyAskedQuestions { - width: 832px; - margin: auto; + max-width: 880px; + margin: 0 auto; + padding: 64px var(--mobile-padding-width) 96px; + .highTitle { - margin-top: 86px; - margin-bottom: 61px; - font-size: 64px; - background-image: linear-gradient( - to left, - #9ee8ee 1%, - #f78013 55%, - #9f8ced 97% - ); - background-clip: text; - -webkit-text-fill-color: transparent; - font-weight: 700; - line-height: 66px; + font-family: var(--font-family-display); + font-size: clamp(2rem, 4vw, 3rem); + font-weight: 800; + line-height: 1.15; + letter-spacing: -0.02em; + color: var(--color-text); + margin-bottom: 32px; + text-align: left; } + .contentList { - color: #fff; + display: flex; + flex-direction: column; + gap: 0; + border-top: 1px solid var(--color-border); + .item { - margin-top: 35px; + padding: 24px 0; + border-bottom: 1px solid var(--color-border); + .title { - font-size: 20px; + font-family: var(--font-family-display); + font-size: 1.125rem; + font-weight: 600; + color: var(--color-text); + line-height: 1.4; + margin-bottom: 8px; } + .content { - margin-top: 3px; - color: #728095; + font-size: 0.9375rem; + line-height: 1.7; + color: var(--color-text-muted); } + .bottomLine { - margin-top: 12px; - height: 2px; - background-color: rgb(48, 54, 61); + display: none; } } } - @media screen and (max-width: 1024px) { - width: 100%; - padding: 0 var(--mobile-padding-width); - } } diff --git a/src/components/home/HCard/styles.module.scss b/src/components/home/HCard/styles.module.scss index fd1683d1ffd..88e085a2366 100644 --- a/src/components/home/HCard/styles.module.scss +++ b/src/components/home/HCard/styles.module.scss @@ -1,332 +1,222 @@ -.leftBox { - position: absolute; - left: -100px; - bottom: -100px; - width: 200px; - height: 200px; - border-radius: 30% 70% 0% 33% / 64% 70% 0% 36%; - background-color: #ef9364; - animation: 5s infinite light linear; - box-shadow: 90px 90px 90px 90px #ef9364, 90px -90px 190px 90px #ef9364, - -90px 90px 90px 190px #ef9364, -90px -90px 90px 100px #ef9364; +/** + * Home hero — clean, modern, brand-driven (Mintlify-inspired). + * - Soft gradient background with subtle dotted texture + * - Large display typeface (Montserrat) + * - Pill primary CTA + ghost CTAs + */ + +.bannerContainer { + position: relative; + overflow: hidden; + margin-top: calc(var(--ifm-navbar-height) * -1); + padding-top: calc(var(--ifm-navbar-height) + 96px); + padding-bottom: 96px; + color: #fff; + background: + radial-gradient(1100px 520px at 80% -10%, rgba(255, 89, 0, 0.45), transparent 60%), + radial-gradient(900px 480px at 0% 0%, rgba(254, 163, 21, 0.32), transparent 60%), + linear-gradient(180deg, #000000 0%, #0a0a0a 100%); } -.rightBox { - @keyframes light { - 0% { - transform: translate(0) scale(1); - } +.bannerContainer::before { + content: ""; + position: absolute; + inset: 0; + background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px); + background-size: 24px 24px; + pointer-events: none; + mask-image: radial-gradient(ellipse at 50% 35%, #000 50%, transparent 90%); + -webkit-mask-image: radial-gradient(ellipse at 50% 35%, #000 50%, transparent 90%); +} - 33% { - transform: translate(30px, -20px) scale(1); - } +.content { + max-width: var(--global-main-width); + margin: 0 auto; + width: 100%; + position: relative; + z-index: 1; + padding: 0 var(--mobile-padding-width); - 66% { - transform: translate(-20px, 20px) scale(0.9); - } + .left { + position: relative; + z-index: 2; + width: 100%; + text-align: center; + } - to { - transform: translate(0, 0) scale(1); - } + .right { + display: none; } - @keyframes light2 { - 0% { - transform: translate(0) scale(1); - } - 33% { - transform: translate(-20px, 20px) scale(1.1); - } + .bline { + display: none; + } +} - 66% { - transform: translate(20px, -20px) scale(0.9); - } +.textWrap { + text-align: center; + padding-top: 24px; + + .highText, + h1 { + font-family: var(--font-family-display); + font-size: clamp(2.25rem, 5vw, 3.75rem); + font-weight: 800; + line-height: 1.08; + letter-spacing: -0.02em; + color: #ffffff; + margin: 0; + max-width: 920px; + margin-left: auto; + margin-right: auto; + } - to { - transform: translate(0, 0) scale(1); + .description { + max-width: 760px; + margin: 24px auto 0; + font-size: 1.0625rem; + line-height: 1.7; + color: rgba(255, 255, 255, 0.78); + + @media screen and (max-width: 768px) { + font-size: 1rem; + padding: 0 4px; + margin-top: 18px; } } - position: absolute; - right: -120px; - top: -150px; - width: 200px; - height: 200px; - background-color: #8b7bcf; - border-radius: 30% 70% 67% 13% / 44% 30% 70% 66%; - animation: 5s infinite light2 linear; - box-shadow: 90px 90px 90px 90px #8b7bcf, 90px -90px 90px 190px #8b7bcf, - -90px 90px 90px 90px #8b7bcf, -90px -90px 90px 190px #8b7bcf; } -.bannerContainer { - position: relative; - overflow: hidden; - height: 867px; - margin-top: -98px; - background-color: black; - position: relative; - background-image: url("/img/rectangle.png"); - background-size: 66.6px; - color: #fff; - - .bottomTips { - position: absolute; - bottom: 0; - left: 0; - right: 0; - z-index: 5; - .tipsContent { - background: linear-gradient(90deg, #000000 0%, #292929 35.48%); - height: 37px; - text-align: center; - line-height: 37px; - font-size: 14px; - .text { - .blogTextIcon { - margin-right: 10px; - position: relative; - top: 5px; - } - } - } +.btnWrap { + margin-top: 36px; + font-size: 0.9375rem; + display: flex; + justify-content: center; + gap: 12px; + flex-wrap: wrap; + + a { + text-decoration: none; + display: inline-flex; } - .content { - max-width: var(--global-main-width); - margin: 0 auto; - width: 100%; - position: relative; - display: flex; - position: relative; - .left { - position: relative; - z-index: 2; - width: 100%; - - .centerContent { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin-top: 400px; - } - - .textWrap { - text-align: center; - padding-top: 240px; - h1 { - font-size: 55px; - font-weight: bold; - color: #fff; - margin: 0; - line-height: 1.2; - - @media screen and (max-width: 768px) { - font-size: 32px; - } - } - - .description { - max-width: 900px; - margin: 20px auto 0; - font-size: 16px; - line-height: 1.6; - color: #fff; - opacity: 0.9; - - @media screen and (max-width: 768px) { - font-size: 14px; - padding: 0 20px; - margin-top: 15px; - } - } - } - - .btnWrap { - margin-top: 31px; - font-size: 14px; - color: #fff; - display: flex; - justify-content: center; - gap: 20px; - span { - border-radius: 36px; - padding: 10px; - height: 44px; - line-height: 24px; - font-weight: 700; - color: #fff; - cursor: pointer; + span { + display: inline-flex; + align-items: center; + justify-content: center; + height: 44px; + padding: 0 22px; + border-radius: var(--radius-pill); + font-weight: 600; + cursor: pointer; + transition: transform var(--motion-fast), + box-shadow var(--motion-fast), + background-color var(--motion-fast), + border-color var(--motion-fast), + color var(--motion-fast); + line-height: 1; + } - &.more, &.hub { - background-color: var(--home-btn-bg); - } - } - a { - text-decoration: none; - } - } + /* primary — uses brand "Berry Orange" deep tone for max contrast on dark hero */ + .more { + background-color: var(--brand-orange-deep); + color: #ffffff; + border: 1px solid var(--brand-orange-deep); + box-shadow: 0 8px 20px rgba(255, 89, 0, 0.32); + &:hover { + transform: translateY(-1px); + background-color: #d94a00; + border-color: #d94a00; } - .right { - .loopRun { - @keyframes jump { - 0% { - transform: translate(-50%, -50%) scale(1); - } - 40% { - transform: translate(-50%, -60%) scale(1); - } - 80% { - transform: translate(-50%, -40%) scale(1); - } - 100% { - transform: translate(-50%, -50%) scale(1); - } - } - - @keyframes animX { - 0% { - left: -4%; - } - - 100% { - left: 96%; - } - } - - @keyframes animY { - 0% { - top: -4%; - } - - 100% { - top: 96%; - } - } - @keyframes scale { - 0% { - transform: scale(0.5); - } - - 50% { - transform: scale(1); - } - - 100% { - transform: scale(0.5); - } - } + } - width: 400px; - height: 300px; - position: absolute; - border-radius: 50%; - top: 200px; - right: 100px; - .circle { - border-radius: 50%; - position: absolute; - text-align: center; - z-index: 2; - color: #fff; - &.circle1 { - width: 94px; - height: 94px; - background: linear-gradient(180deg, #dbfdff 0%, #52d1d9 100%); - line-height: 94px; - animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -3.1s infinite alternate, - animY 6s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate, - scale 12s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate; - } - &.circle3 { - width: 88px; - height: 88px; - background: linear-gradient(180deg, #ffca80 0%, #f18433 100%); + /* ghost */ + .hub { + background-color: rgba(255, 255, 255, 0.06); + color: #fff; + border: 1px solid rgba(255, 255, 255, 0.18); + &:hover { + background-color: rgba(255, 255, 255, 0.12); + border-color: rgba(255, 255, 255, 0.32); + } + } - line-height: 88px; - animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -7.8s infinite alternate, - animY 6s cubic-bezier(0.36, 0, 0.64, 1) -4.8s infinite alternate, - scale 12s cubic-bezier(0.36, 0, 0.64, 1) -4.8s infinite alternate; - } - &.circle5 { - width: 80px; - height: 80px; - background: linear-gradient(180deg, #dfd8ff 0%, #8c7cd0 100%); - line-height: 80px; - animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -12.6s infinite alternate, - animY 6s cubic-bezier(0.36, 0, 0.64, 1) -9.6s infinite alternate, - scale 12s cubic-bezier(0.36, 0, 0.64, 1) -9.6s infinite alternate; - } - } + /* For each subsequent button (Slack, Docs), make them ghost too. */ + a:not(:first-child):not(:last-child) span { + background-color: rgba(255, 255, 255, 0.06); + color: #fff; + border: 1px solid rgba(255, 255, 255, 0.18); + box-shadow: none; + &:hover { + background-color: rgba(255, 255, 255, 0.12); + border-color: rgba(255, 255, 255, 0.32); + } + } +} - .centerCircle { - width: 185px; - height: 185px; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - z-index: 3; - animation: jump 10s ease infinite alternate; +/* Bottom thin tip (latest blog) */ +.bottomTips { + position: absolute; + bottom: 0; + left: 0; + right: 0; + z-index: 5; + + .tipsContent { + background: linear-gradient( + 90deg, + rgba(0, 0, 0, 0.9) 0%, + rgba(255, 89, 0, 0.18) 100% + ); + border-top: 1px solid rgba(255, 89, 0, 0.25); + height: 40px; + text-align: center; + line-height: 40px; + font-size: 0.875rem; + color: rgba(255, 255, 255, 0.92); + + .text { + display: inline-flex; + align-items: center; + gap: 10px; + .blogTextIcon { + position: relative; + } + a { + color: inherit; + &:hover { + color: var(--color-accent); + text-decoration: none; } } } - .bline { - width: 1323px; - height: 399px; - position: absolute; - top: 257px; - right: -160px; - background-image: url("/img/home/hcard/bline.png"); - z-index: 1; - } } } +/* Hide legacy decorative blobs */ +.leftBox, +.rightBox { + display: none; +} + @media screen and (max-width: 1024px) { - .leftBox { - left: -150px; - bottom: -150px; - width: 80px; - height: 80px; - box-shadow: 90px -90px 120px 90px #ef9364, -90px 90px 120px 90px #ef9364; - } - .rightBox { - right: -120px; - top: -150px; - width: 80px; - height: 80px; - background-color: #8b7bcf; - border-radius: 30% 70% 67% 13% / 44% 30% 70% 66%; - animation: 5s infinite light2 linear; - box-shadow: -90px 90px 90px 90px #8b7bcf, -90px -90px 90px 190px #8b7bcf; - } .bannerContainer { - min-width: 100vw; - height: auto; - padding-bottom: 170px; - .content { - .left { - .highText, .btnWrap { - margin-left: 0; - } - } - } + padding-top: calc(var(--ifm-navbar-height) + 64px); + padding-bottom: 80px; } } @media screen and (max-width: 768px) { .bannerContainer { - .content { - .left { - .highText, .btnWrap { - margin-left: 0; - } - } - } - .bline { - width: 100% !important; - right: 0 !important; + padding-top: calc(var(--ifm-navbar-height) + 48px); + padding-bottom: 72px; + } + .btnWrap { + margin-top: 28px; + gap: 8px; + span { + height: 40px; + padding: 0 18px; + font-size: 0.875rem; } } } diff --git a/src/components/home/MeetTheCommunity/index.module.scss b/src/components/home/MeetTheCommunity/index.module.scss index f56db7ff976..c1c95fa8904 100644 --- a/src/components/home/MeetTheCommunity/index.module.scss +++ b/src/components/home/MeetTheCommunity/index.module.scss @@ -1,106 +1,24 @@ .meetTheCommunity { position: relative; - height: 309px; - padding-top: 70px; - margin-bottom: -62px; - background-color: rgb(17, 15, 15); + padding: 96px 0 24px; + background-color: var(--color-bg); + .highTitle { - position: absolute; - top: 150px; - left: 50%; text-align: center; - transform: translateX(-50%); - font-size: 64px; - font-weight: 700; - line-height: 66px; - background-image: linear-gradient( - to left, - #9ee8ee 1%, - #f78013 55%, - #9f8ced 97% - ); - background-clip: text; - -webkit-text-fill-color: transparent; - } - - /* Progressive responsive adjustments for better spacing */ - @media screen and (max-width: 1600px) { - height: 280px; - padding-top: 60px; - .highTitle { - top: 130px; - font-size: 60px; - } - } - - @media screen and (max-width: 1440px) { - padding-inline: var(--mobile-padding-width); - height: 350px; - padding-top: 50px; - margin-bottom: -40px; - .highTitle { - top: 140px; - font-size: 56px; - } - .contributorList { - gap: 15px; - width: auto; - } - .bgImg { - height: 350px; - } - } - - @media screen and (max-width: 1200px) { - height: 320px; - padding-top: 40px; - margin-bottom: -30px; - .highTitle { - top: 120px; - font-size: 52px; - } - } - - @media screen and (max-width: 1024px) { - height: 280px; - padding-top: 30px; - margin-bottom: -20px; - .highTitle { - top: 100px; - font-size: 48px; - line-height: 52px; - } - .bgImg { - height: 280px; - width: 100%; - background-size: contain; - } - .contributorList { - width: auto; - grid-template-columns: repeat(12, 1fr); - gap: 15px; - } - } - - @media screen and (max-width: 768px) { - height: 240px; - padding-top: 20px; - margin-bottom: -10px; - .highTitle { - top: 80px; - font-size: 40px; - line-height: 44px; - } + font-family: var(--font-family-display); + font-size: clamp(2rem, 4vw, 3rem); + font-weight: 800; + line-height: 1.15; + letter-spacing: -0.02em; + color: var(--color-text); + max-width: var(--global-main-width); + margin: 0 auto; + padding: 0 var(--mobile-padding-width); } +} - @media screen and (max-width: 480px) { - height: 200px; - padding-top: 15px; - margin-bottom: 0; - .highTitle { - top: 60px; - font-size: 32px; - line-height: 36px; - } +@media screen and (max-width: 768px) { + .meetTheCommunity { + padding: 64px 0 16px; } } diff --git a/src/components/home/SlackWechatTwitterYoutube/index.module.scss b/src/components/home/SlackWechatTwitterYoutube/index.module.scss index 37e2216ca4c..60ddd5b4651 100644 --- a/src/components/home/SlackWechatTwitterYoutube/index.module.scss +++ b/src/components/home/SlackWechatTwitterYoutube/index.module.scss @@ -1,92 +1,79 @@ -.title { - font-size: 28px; - width: 895px; - text-align: center; - margin: 80px auto 100px; - - /* Progressive responsive margin adjustments */ - @media screen and (max-width: 1440px) { - margin: 60px auto 80px; - width: auto; - max-width: 895px; - padding: 0 var(--mobile-padding-width); - } - - @media screen and (max-width: 1200px) { - margin: 50px auto 70px; - font-size: 26px; - } - - @media screen and (max-width: 1024px) { - margin: 40px auto 60px; - font-size: 24px; - } - - @media screen and (max-width: 768px) { - margin: 30px auto 50px; - font-size: 22px; - } - - @media screen and (max-width: 480px) { - margin: 25px auto 40px; - font-size: 20px; - } -} .content { position: relative; - height: 508px; - color: #fff; - background-color: rgb(17, 15, 15); + background-color: var(--color-bg); + padding: 24px 0 96px; + .listWrap { - width: 1070px; - margin: auto; - display: flex; - justify-content: space-between; - position: absolute; - z-index: 2; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + max-width: var(--global-main-width); + margin: 0 auto; + padding: 0 var(--mobile-padding-width); + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; .item { - width: 188px; - text-align: center; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 12px; + padding: 24px; + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + background-color: var(--color-surface); + box-shadow: var(--shadow-xs); + transition: border-color var(--motion-fast), + box-shadow var(--motion-fast), + transform var(--motion-fast); + text-decoration: none; + cursor: pointer; + + img { + width: 44px; + height: 44px; + border-radius: var(--radius-md); + } .itemTitle { - font-size: 24px; - color: #fff; + font-family: var(--font-family-display); + font-size: 1.125rem; + font-weight: 700; + color: var(--color-text); + line-height: 1.3; } .itemDesc { - font-size: 14px; - color: rgba(114, 128, 149, 1); + font-size: 0.9375rem; + line-height: 1.55; + color: var(--color-text-muted); + } + + &:hover { + border-color: var(--color-accent); + box-shadow: var(--shadow-md); + transform: translateY(-2px); + .itemTitle { + color: var(--color-accent); + } } } } + .bg { - background-image: url("/img/home/grid-left-bottom.svg"); - background-repeat: no-repeat; - height: 100%; - position: absolute; - width: 925px; - top: 0; - left: 0; - } - @media screen and (max-width: 1440px) { + display: none; } + @media screen and (max-width: 1024px) { .listWrap { - width: 100%; - padding: 0 var(--mobile-padding-width); - } - .bg { - width: 800px; - background-size: contain; - background-position: left bottom; + grid-template-columns: repeat(2, 1fr); } } - @media screen and (max-width: 768px) { - .bg { - width: 90%; + @media screen and (max-width: 600px) { + padding: 24px 0 64px; + .listWrap { + grid-template-columns: 1fr; } } } + +.title { + display: none; +} diff --git a/src/components/home/TipsBar/styles.module.scss b/src/components/home/TipsBar/styles.module.scss index 9c272deb176..e53795fcf30 100644 --- a/src/components/home/TipsBar/styles.module.scss +++ b/src/components/home/TipsBar/styles.module.scss @@ -1,30 +1,53 @@ .tipsWrap { - margin: 0 auto; - color: #fff; width: 100%; z-index: 10; + background: linear-gradient( + 90deg, + var(--brand-orange-deep) 0%, + var(--brand-orange) 100% + ); + color: var(--brand-black); + .tipsContent { - background: linear-gradient(90deg, #ffa800 0%, #fb750b 35.48%); - // height: 37px; + max-width: var(--global-main-width); + margin: 0 auto; width: 100%; - // line-height: 37px; - padding-block: 5px; + padding: 8px var(--mobile-padding-width); position: relative; text-align: center; - .text { - padding-right: 20px; + font-size: 0.875rem; + font-weight: 500; + display: flex; + align-items: center; + justify-content: center; + .text { + padding-right: 32px; + a { + color: var(--brand-black); + text-decoration: none; + &:hover { + text-decoration: underline; + color: var(--brand-black); + } + } img { position: relative; top: 3px; + margin-left: 6px; } } .close { position: absolute; - right: 10px; + right: var(--mobile-padding-width); top: 50%; - transform: translateY(-47%); + transform: translateY(-50%); cursor: pointer; + opacity: 0.7; + transition: opacity var(--motion-fast); + &:hover { + opacity: 1; + } } } } diff --git a/src/components/home/WantToContribute/index.module.scss b/src/components/home/WantToContribute/index.module.scss index 2c4db0b6eb9..85da01f1301 100644 --- a/src/components/home/WantToContribute/index.module.scss +++ b/src/components/home/WantToContribute/index.module.scss @@ -1,20 +1,73 @@ .WantToContribute { - display: flex; - justify-content: center; - padding: 128px 0; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 24px; + padding: 64px var(--mobile-padding-width); + max-width: var(--global-main-width); + margin: 0 auto; + .item { - width: 550px; - background-color: #1a1a1a; - padding: 58px; - color: #fff; + border-radius: var(--radius-xl); + padding: 40px; + color: var(--color-text); + background-color: var(--color-surface); + border: 1px solid var(--color-border); + box-shadow: var(--shadow-xs); + transition: box-shadow var(--motion-fast), + transform var(--motion-fast), + border-color var(--motion-fast); + + &:hover { + box-shadow: var(--shadow-md); + transform: translateY(-2px); + } + + /* First card uses brand orange as filled CTA card */ &:first-of-type { - background-color: #ffb219; + background: linear-gradient(135deg, var(--brand-orange-deep) 0%, var(--brand-orange) 100%); + border-color: transparent; + color: var(--brand-black); + .title { + color: var(--brand-black); + } + .content { + color: rgba(0, 0, 0, 0.78); + } + :global(.light-active-color) { + color: var(--brand-black); + text-decoration: underline; + } } + .title { - font-size: 35px; + font-family: var(--font-family-display); + font-size: 1.75rem; + font-weight: 700; + letter-spacing: -0.01em; + line-height: 1.25; + color: var(--color-text); + margin-bottom: 12px; + } + + .content { + font-size: 1rem; + line-height: 1.7; + color: var(--color-text-muted); + + a { + font-weight: 600; + } } } - @media (max-width: 1024px) { - padding: 128px var(--mobile-padding-width); + + @media (max-width: 768px) { + grid-template-columns: 1fr; + padding: 48px var(--mobile-padding-width); + .item { + padding: 32px; + .title { + font-size: 1.5rem; + } + } } } diff --git a/src/components/home/WhyCloudberry/index.module.scss b/src/components/home/WhyCloudberry/index.module.scss new file mode 100644 index 00000000000..074e80193b0 --- /dev/null +++ b/src/components/home/WhyCloudberry/index.module.scss @@ -0,0 +1,104 @@ +.whyCloudberry { + padding: 80px var(--mobile-padding-width); + max-width: var(--global-main-width); + margin: 0 auto; + + @media screen and (max-width: 768px) { + padding: 56px var(--mobile-padding-width); + } +} + +.sectionTitle { + font-family: var(--font-family-display); + font-size: clamp(2rem, 4vw, 3rem); + font-weight: 800; + letter-spacing: -0.02em; + line-height: 1.15; + color: var(--color-text); + text-align: center; + margin: 0 0 48px; + + @media screen and (max-width: 768px) { + margin-bottom: 36px; + } +} + +.cardGrid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; + + @media screen and (max-width: 1024px) { + grid-template-columns: repeat(2, 1fr); + } + @media screen and (max-width: 640px) { + grid-template-columns: 1fr; + } +} + +.card { + border-radius: var(--radius-lg); + border: 1px solid var(--color-border); + background-color: var(--color-surface); + box-shadow: var(--shadow-xs); + padding: 28px 28px 24px; + transition: border-color var(--motion-fast), + box-shadow var(--motion-fast), + transform var(--motion-fast); + + &:hover { + border-color: var(--color-accent); + box-shadow: var(--shadow-md); + transform: translateY(-2px); + } +} + +.cardIcon { + display: flex; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; + border-radius: var(--radius-md); + background-color: var(--brand-orange-soft); + color: var(--brand-orange-deep); + margin-bottom: 18px; + + svg { + stroke: var(--brand-orange-deep); + } +} + +html[data-theme="dark"] .cardIcon { + color: var(--brand-orange); + + svg { + stroke: var(--brand-orange); + } +} + +.cardTitle { + font-family: var(--font-family-display); + font-size: 1.125rem; + font-weight: 700; + letter-spacing: -0.01em; + line-height: 1.3; + color: var(--color-text); + margin: 0 0 8px; +} + +.cardDesc { + font-size: 0.9375rem; + line-height: 1.65; + color: var(--color-text-muted); + margin: 0; +} + +.disclaimer { + margin: 32px auto 0; + max-width: 760px; + text-align: center; + font-size: 0.75rem; + line-height: 1.6; + color: var(--color-text-soft); +} diff --git a/src/components/home/WhyCloudberry/index.tsx b/src/components/home/WhyCloudberry/index.tsx new file mode 100644 index 00000000000..2b95d4c5ac3 --- /dev/null +++ b/src/components/home/WhyCloudberry/index.tsx @@ -0,0 +1,61 @@ +import { WHY_CLOUDBERRY } from "@site/src/consts/homeContent"; +import styles from "./index.module.scss"; + +const iconMap: Record = { + kernel: ( + + + + + + ), + compat: ( + + + + + + ), + governance: ( + + + + + ), + performance: ( + + + + ), + workloads: ( + + + + + + ), + security: ( + + + + + ), +}; + +export default function WhyCloudberry() { + return ( +
+

{WHY_CLOUDBERRY.title}

+
+ {WHY_CLOUDBERRY.list.map((item, index) => ( +
+
{iconMap[item.icon]}
+

{item.title}

+

{item.content}

+
+ ))} +
+

{WHY_CLOUDBERRY.disclaimer}

+
+ ); +} diff --git a/src/consts/homeContent.tsx b/src/consts/homeContent.tsx index 1a58e34e07b..fc2a8db6adb 100644 --- a/src/consts/homeContent.tsx +++ b/src/consts/homeContent.tsx @@ -1,5 +1,49 @@ import LinkWithBaseUrl from "../components/common/LinkWithBaseUrl"; +let WHY_CLOUDBERRY = { + title: "Why Apache Cloudberry", + list: [ + { + icon: "kernel", + title: "Modern PostgreSQL Kernel", + content: + "Built on a modern and stable PostgreSQL kernel, Cloudberry leverages upstream features, performance improvements, and the rich PostgreSQL ecosystem — giving you access to a vast landscape of extensions and modern tooling.", + }, + { + icon: "compat", + title: "Greenplum\u00AE Compatible", + content: + "Derived from Greenplum\u00AE Database, Cloudberry maintains operational and behavioral compatibility — making migration straightforward for existing open-source Greenplum users with support for familiar workflows and migration tooling.", + }, + { + icon: "governance", + title: "Vendor-Neutral & Apache-Governed", + content: + "Developed under the Apache Software Foundation's governance model, ensuring a truly open, vendor-neutral community with transparent, merit-based decision-making.", + }, + { + icon: "performance", + title: "Built for Performance", + content: + "Parallel query execution and incremental materialized views deliver fast, scalable analytics — from terabytes to petabytes — on commodity hardware, virtual machines, or in the cloud.", + }, + { + icon: "workloads", + title: "Multi-Workload Ready", + content: + "Handle diverse workloads out of the box — spatial analysis with PostGIS and in-database machine learning with Apache MADlib, all within a single MPP engine.", + }, + { + icon: "security", + title: "Enterprise-Grade Security & Modern Features", + content: + "Transparent data encryption, password policies, a hybrid PAX storage engine, and dynamic tables for near-real-time data — all built for production-critical environments.", + }, + ], + disclaimer: + "Greenplum\u00AE is a registered trademark of Broadcom Inc. Apache Cloudberry is not affiliated with, endorsed by, or sponsored by Broadcom Inc. Any references to Greenplum are for comparative, educational, and interoperability purposes only.", +}; + let TIPS_CONTENT = ( If you like Apache Cloudberry (Incubating), give it a star on GitHub! @@ -172,4 +216,5 @@ export { SLACK_TWITTER_TWITTER_WECHAT, TIPS_CONTENT, WANT_TO_CONTRIBUTE, + WHY_CLOUDBERRY, }; diff --git a/src/css/custom.scss b/src/css/custom.scss index 3bc4a344e81..f1319ac2b8a 100644 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -1,161 +1,382 @@ /** - * Any CSS included here will be global. The classic template - * bundles Infima by default. Infima is a CSS framework designed to - * work well for content-centric websites. + * Apache Cloudberry — Global design system + * + * Inspired by Mintlify for a clean, modern, unified feel. + * Brand palette per Apache Cloudberry Brand Guidelines: + * - #FF5900 Berry Orange (deep) + * - #FEA315 Berry Orange (light / amber) + * - #000000 Black + * - #FFFFFF White + * + * Typography note: per ASF policy we do NOT load fonts from third-party + * CDNs (e.g. Google Fonts) at runtime. The font-family stack lists + * "Montserrat" first so users who have it installed locally (or any + * future self-hosted bundle) see the brand typeface; otherwise the + * system stack is used as a graceful fallback. */ -/* You can override the default Infima variables here. */ :root { - font-family: -apple-system, BlinkMacSystemFont, "Noto Sans", "Open Sans", - "Source Sans", Helvetica, Arial, Inter, Ubuntu, Roboto, sans-serif; - font-size: 16px; - --ifm-color-primary: #2e8555; - --ifm-color-primary-dark: #29784c; - --ifm-color-primary-darker: #277148; - --ifm-color-primary-darkest: #205d3b; - --ifm-color-primary-light: #33925d; - --ifm-color-primary-lighter: #359962; - --ifm-color-primary-lightest: #3cad6e; - --ifm-code-font-size: 95%; - --docusaurus-highlighted-code-line-bg: rgba(17, 15, 15); - - // background color - --normal-bg-1: rgba(17, 15, 15); - --navbar-bg-color: rgb(7, 7, 7); - --active-color: rgba(255, 168, 0, 1); - --hover-fill-color: rgba(255, 61, 0, 1); - --docs-detail-bg: rgba(22, 27, 34, 1); - --ordered-list-bg-color: rgb(51, 34, 0); - --ordered-list-text-color: #fff; - --tags-bg-color: rgba(255, 168, 0, 0.15); - --menu-bg-color: rgb(76, 50, 0); - --hover-full-bg-text-color: rgb(0, 0, 0); - --code-bg-color: rgb(51, 51, 51); - --right-sidebar-circle-bg-color: rgba(48, 54, 61, 1); - --right-sidebar-active-color: var(--active-color); - --portrait-border-hover-color: rgb(254, 177, 25); - - // text color - --normal-text-color: rgba(12, 14, 20, 1); - --normal-text-color-1: rgb(0, 0, 0); - --sub-text-color: rgba(161, 174, 191); - --sub-text-color-1: rgba(114, 128, 149); - --sub-text-color-2: rgba(255, 255, 255, 0.6); - --sub-text-color-3: rgba(0, 0, 0, 0.6); - --sub-text-color-4: rgba(0, 194, 255, 1); - --sub-text-color-5: rgba(242, 242, 242); - --sub-text-color-6: #212529; - --blog-border-color: rgba(48, 54, 61, 1); - --back-home-logo-color: rgba(76, 76, 76); - --title-text-color: rgb(255, 255, 255); + /* === Typography ============================================ */ + /* GitHub-style body stack */ + --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", + Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; + /* Montserrat for headings & display */ + --font-family-display: "Montserrat", -apple-system, BlinkMacSystemFont, + "Segoe UI", Helvetica, Arial, sans-serif; + --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, + Consolas, "Liberation Mono", monospace; + + /* === Brand palette ========================================== + * Apache Cloudberry Brand Guidelines — Primary palette: + * - #FF5900 Berry Orange (deep) + * - #FEA315 Berry Orange (light / amber) + * - #000000 Black + * - #FFFFFF White + * + * Contrast (WCAG 2.1): + * #FF5900 on #fff ≈ 3.16:1 (AA Large / 1.4.11 UI ✓) + * #FEA315 on #fff ≈ 2.27:1 (decorative only) + * #FF5900 on #000 ≈ 6.65:1 (AAA ✓) + * #FEA315 on #000 ≈ 9.27:1 (AAA ✓) + * #000 on #fff = 21:1 (AAA ✓) + * + * To satisfy WCAG 1.4.1 (color is not the sole signal), inline body + * links using --color-accent are always underlined. + */ + --brand-orange-deep: #ff5900; + --brand-orange: #fea315; + --brand-orange-soft: rgba(254, 163, 21, 0.16); + --brand-black: #000000; + --brand-white: #ffffff; + + /* Legacy aliases (kept so existing rules keep working) */ + --brand-orange-dark: var(--brand-orange-deep); + --brand-orange-accent: var(--brand-orange-deep); + --brand-yellow: var(--brand-orange); + --brand-yellow-soft: var(--brand-orange-soft); + + /* === Neutral scale (derived from brand black/white) ========= */ + --color-bg: #ffffff; + --color-bg-subtle: #fafafa; + --color-bg-muted: #f5f6f8; + --color-surface: #ffffff; + --color-border: #e6e8ec; + --color-border-strong: #d0d4dc; + --color-text: #18181b; /* near-black for body text, AAA on white */ + --color-text-muted: #4a5160; /* secondary text, ~7.8:1 on white */ + --color-text-soft: #6b7280; + + /* === Radii, shadows, motion ================================ */ + --radius-sm: 6px; + --radius-md: 10px; + --radius-lg: 14px; + --radius-xl: 20px; + --radius-pill: 999px; + --shadow-xs: 0 1px 2px rgba(15, 17, 22, 0.04); + --shadow-sm: 0 1px 3px rgba(15, 17, 22, 0.06), + 0 1px 2px rgba(15, 17, 22, 0.04); + --shadow-md: 0 6px 16px rgba(15, 17, 22, 0.06), + 0 2px 4px rgba(15, 17, 22, 0.04); + --shadow-lg: 0 18px 40px rgba(15, 17, 22, 0.08), + 0 4px 12px rgba(15, 17, 22, 0.04); + --motion-fast: 150ms ease; + --motion-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); + + /* === Layout tokens ========================================= */ + --global-main-width: 1200px; + --mobile-padding-width: 32px; + --normal-box-radius: 10px; + --doc-sidebar-width: 280px; + --docs-nav-margin: 60px; + + /* === Docusaurus / Infima overrides ========================== */ + --ifm-color-primary: var(--brand-orange-deep); + --ifm-color-primary-dark: #e54e00; + --ifm-color-primary-darker: #cc4600; + --ifm-color-primary-darkest: #a83a00; + --ifm-color-primary-light: var(--brand-orange); + --ifm-color-primary-lighter: #fec246; + --ifm-color-primary-lightest: #fed276; + + --ifm-font-family-base: var(--font-family-base); + --ifm-heading-font-family: var(--font-family-display); + --ifm-font-family-monospace: var(--font-family-mono); + --ifm-font-size-base: 16px; + --ifm-line-height-base: 1.65; + + --ifm-h1-font-size: 2.25rem; + --ifm-h2-font-size: 1.625rem; + --ifm-h3-font-size: 1.25rem; + --ifm-heading-font-weight: 700; + --ifm-heading-line-height: 1.25; + + --ifm-code-font-size: 92%; + --ifm-code-background: #f5f6f8; + --ifm-code-border-radius: 4px; + + --ifm-navbar-height: 68px; + --ifm-navbar-padding-vertical: 0; + --ifm-navbar-padding-horizontal: 0; + --ifm-menu-link-padding-horizontal: 16px; + --ifm-menu-link-padding-vertical: 8px; + --ifm-breadcrumb-spacing: 0; --ifm-breadcrumb-item-background-active: transparent; --ifm-breadcrumb-separator: url("/img/line.svg"); - // shape - --ifm-menu-link-padding-horizontal: 21px !important; - --ifm-h1-font-size: 32px !important; - --ifm-font-family-base: -apple-system, Montserrat, BlinkMacSystemFont, "Noto Sans", - "Open Sans", "Source Sans", Helvetica, Arial, Inter, Ubuntu, Roboto, - sans-serif; - --ifm-alert-foreground-color: red; --ifm-container-width-xl: var(--global-main-width); - --ifm-global-spacing: 10px; - --ifm-navbar-height: 98px; - --ifm-menu-link-padding-horizontal: 25px; - --ifm-breadcrumb-spacing: 0; + --ifm-global-spacing: 12px; + --ifm-tabs-padding-vertical: 8px; + --ifm-tabs-padding-horizontal: 16px; - --global-main-width: 1440px; - --normal-box-radius: 4px; - --doc-sidebar-width: 301px; - --home-btn-bg: rgba(255, 168, 0, 1); - --home-btn-color: rgb(0, 0, 0); - --footer-bg-color: #212529; - --mobile-padding-width: 70px; - --docs-nav-margin: 60px; - --ifm-tabs-padding-vertical: 5px; - --ifm-tabs-padding-horizontal: 14px; + --docusaurus-highlighted-code-line-bg: rgba(254, 163, 21, 0.14); + + /* === Semantic accent === */ + /* Used for inline links / accent text. Defaults to brand "Berry Orange" + * deep tone on light backgrounds; dark mode uses the lighter brand + * orange (#FEA315) for AAA contrast. */ + --color-accent: var(--brand-orange-deep); + --color-accent-hover: #d94a00; + + /* === Legacy compat aliases (kept so existing components still work) === */ + --normal-bg-1: var(--color-bg); + --navbar-bg-color: var(--color-bg); + --active-color: var(--color-accent); + --hover-fill-color: var(--color-accent); + --docs-detail-bg: #fff8e6; + --ordered-list-bg-color: var(--brand-orange-soft); + --ordered-list-text-color: var(--color-text); + --tags-bg-color: rgba(254, 163, 21, 0.14); + --menu-bg-color: var(--brand-orange-soft); + --hover-full-bg-text-color: var(--color-text); + --code-bg-color: var(--ifm-code-background); + --right-sidebar-circle-bg-color: #e6e8ec; + --right-sidebar-active-color: var(--color-accent); + --portrait-border-hover-color: var(--color-accent); + + --normal-text-color: var(--color-text); + --normal-text-color-1: var(--color-text); + --sub-text-color: var(--color-text-muted); + --sub-text-color-1: var(--color-text-muted); + --sub-text-color-2: var(--color-text-muted); + --sub-text-color-3: rgba(0, 0, 0, 0.7); + --sub-text-color-4: #2563eb; + --sub-text-color-5: var(--color-text); + --sub-text-color-6: var(--brand-white); + --blog-border-color: var(--color-border); + --back-home-logo-color: var(--color-text-muted); + --title-text-color: var(--color-text); + + --home-btn-bg: var(--brand-orange); + --home-btn-color: var(--color-text); + --footer-bg-color: var(--brand-black); + + --box-border-color: var(--color-border); + --box-hover-border-color: var(--color-accent); + --code-border-color: transparent; + --portrait-border-color: var(--color-border); + --nav-link-line-normal-color: var(--color-border); + --popper-bg-color: var(--brand-black); + --popper-text-color: var(--brand-white); } -@media screen and (max-width: 1024px) { +/* Responsive layout tokens */ +@media screen and (max-width: 1280px) { :root { --global-main-width: 100%; } } -@media screen and (max-width: 768px) { +@media screen and (max-width: 1024px) { :root { - --mobile-padding-width: 37px; + --mobile-padding-width: 24px; } } - -/* For readability concerns, you should choose a lighter palette in dark mode. */ -[data-theme="dark"] { - --ifm-color-primary: #25c2a0; - --ifm-color-primary-dark: #21af90; - --ifm-color-primary-darker: #1fa588; - --ifm-color-primary-darkest: #1a8870; - --ifm-color-primary-light: #29d5b0; - --ifm-color-primary-lighter: #32d8b4; - --ifm-color-primary-lightest: #4fddbf; - --ifm-background-color: #212529 !important; - --ifm-breadcrumb-color-active: rgba(255, 168, 0, 1); - --ifm-hover-overlay: rgba(255, 168, 0, 0.3) !important; - --ifm-menu-color-active: rgba(255, 168, 0, 1) !important; - --ifm-menu-color: rgb(153, 153, 153) !important; - --ifm-navbar-link-hover-color: var(--active-color); - --ifm-color-primary: var(--active-color); - --ifm-navbar-background-color: rgba(15, 15, 15, 0.4); - --ifm-font-weight-semibold: 400; - --ifm-code-background: rgb(51, 51, 51) !important; - - --code-border-color: rgb(153, 109, 26); - --portrait-border-color: rgb(37, 38, 39); - --box-border-color: var(--sub-text-color); - --box-hover-border-color: var(--title-text-color); - --sub-text-color-2: rgba(255, 255, 255, 0.6); - --nav-link-line-normal-color: rgba(48, 54, 61, 1); - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); - --popper-bg-color: rgb(255, 168, 0); - --popper-text-color: #3a3f63; +@media screen and (max-width: 768px) { + :root { + --mobile-padding-width: 20px; + --ifm-navbar-height: 56px; + --ifm-h1-font-size: 1.875rem; + --ifm-h2-font-size: 1.5rem; + } } +/* Light mode (default) */ [data-theme="light"] { - --ifm-font-color-base: #212529; - --normal-bg-1: #fff; - --title-text-color: #212529; - --sub-text-color-2: #546e7a; - --sub-text-color: #525665; - --sub-text-color-1: #525665; - --sub-text-color-6: #fff; - - --home-btn-bg: #212529; - --home-btn-color: #212529; - - --box-border-color: #e0e0e0; - --box-hover-border-color: #e0e0e0; - - --right-sidebar-circle-bg-color: #f2f2f2; - --sub-text-color-5: #212529; - --blog-border-color: #e0e0e0; - --docs-detail-bg: #eef9fd; - --ordered-list-bg-color: #ffeecc; - --ordered-list-text-color: #212529; - --ifm-menu-color-background-active: #ffe5b3; - --right-sidebar-active-color: #212529; - - --ifm-menu-color-active: #212529; - --ifm-menu-color: #212529; - --ifm-breadcrumb-color-active: var(--active-color); - --ifm-pagination-nav-color-hover: #e0e0e0; - --portrait-border-color: #eef9fd; - --ifm-navbar-link-hover-color: var(--active-color); - --popper-bg-color: #212529; - --popper-text-color: #ffffff; - --ifm-color-primary: #212529; - --navbar-bg-color: rgb(255, 255, 255); + --ifm-background-color: var(--color-bg); + --ifm-font-color-base: var(--color-text); + --ifm-color-content: var(--color-text); + --ifm-color-content-secondary: var(--color-text-muted); + + --ifm-navbar-background-color: #ffffff; + --ifm-navbar-link-color: var(--color-text); + --ifm-navbar-link-hover-color: var(--color-accent); + + --ifm-menu-color: var(--color-text-muted); + --ifm-menu-color-active: var(--color-text); + --ifm-menu-color-background-active: var(--brand-orange-soft); + --ifm-menu-color-background-hover: var(--color-bg-muted); + --ifm-breadcrumb-color-active: var(--color-accent); + + --ifm-pagination-nav-color-hover: var(--color-border); + + /* Accent: use original #ffa800 on light backgrounds for warmth and brand + * continuity. #e69500 is ~10 % darker for hover/active states. */ + --color-accent: #ffa800; + --color-accent-hover: #e69500; + + /* Primary button shade family based on #ffa800 */ + --ifm-color-primary: #ffa800; + --ifm-color-primary-dark: #e69500; + --ifm-color-primary-darker: #cc8400; + --ifm-color-primary-darkest: #a86c00; + --ifm-color-primary-light: #ffb933; + --ifm-color-primary-lighter: #ffca66; + --ifm-color-primary-lightest: #ffdb99; + + --normal-bg-1: var(--color-bg); + --navbar-bg-color: var(--color-bg); + --title-text-color: var(--color-text); + --sub-text-color-2: var(--color-text-muted); + --sub-text-color-5: var(--color-text); + --sub-text-color-6: var(--brand-white); + --blog-border-color: var(--color-border); + --right-sidebar-circle-bg-color: #e6e8ec; + --right-sidebar-active-color: var(--color-accent); + --docs-detail-bg: #fff8e6; + --portrait-border-color: var(--color-border); + --popper-bg-color: var(--brand-black); + --popper-text-color: var(--brand-white); + + --code-border-color: transparent; + --box-border-color: var(--color-border); + --box-hover-border-color: var(--color-accent); + + /* Force pure-black background for code blocks in light mode too, + * matching the dark-mode "terminal" look (see design-style.scss). */ + div[class*="theme-code-block"] > div > pre { + background-color: #000000 !important; + } + + /* Opaque dark navbar over the home hero */ .navbar-home-lighting { - --ifm-navbar-background-color: rgba(15, 15, 15, 0.4) !important; + --ifm-navbar-background-color: #0a0a0a; --ifm-navbar-link-color: #fff; - --home-btn-bg: rgba(255, 168, 0, 1) !important; - --navbar-bg-color: rgb(7, 7, 7); + --home-btn-bg: var(--brand-orange-deep); + --navbar-bg-color: #0a0a0a; } } + +/* Dark mode */ +[data-theme="dark"] { + --color-bg: #000000; /* brand black (page background) */ + /* Elevated surfaces are deliberately lifted well above pure black + * so cards, code chips, table headers etc. are clearly separated + * from the page background. */ + --color-bg-subtle: #161616; + --color-bg-muted: #202020; + --color-surface: #141414; + --color-border: #2e2e2e; + --color-border-strong: #3d3d3d; + --color-text: #d8d8d8; + --color-text-muted: #9a9a9a; + --color-text-soft: #707070; + + --ifm-background-color: var(--color-bg) !important; + --ifm-font-color-base: var(--color-text); + --ifm-color-content: var(--color-text); + --ifm-color-content-secondary: var(--color-text-muted); + + --ifm-navbar-background-color: #000000; + --ifm-navbar-link-color: var(--color-text); + --ifm-navbar-link-hover-color: var(--color-accent); + + --ifm-menu-color: var(--color-text-muted) !important; + --ifm-menu-color-active: var(--color-accent) !important; + --ifm-menu-color-background-active: rgba(254, 163, 21, 0.16); + --ifm-menu-color-background-hover: var(--color-bg-muted); + --ifm-breadcrumb-color-active: var(--color-accent); + --ifm-hover-overlay: rgba(254, 163, 21, 0.18) !important; + + /* Inline code chip — clearly lighter than the black page so the + * monospace text stands out. */ + --ifm-code-background: #2a2a2a !important; + /* Warm, brand-tinted border + text so inline code pops on black */ + --inline-code-border: rgba(254, 163, 21, 0.45); + --inline-code-color: #ffce7a; + --ifm-pre-background: #000000; + --docusaurus-highlighted-code-line-bg: rgba(254, 163, 21, 0.18); + + --normal-bg-1: var(--color-bg); + --navbar-bg-color: var(--color-bg); + --title-text-color: var(--color-text); + --sub-text-color: var(--color-text-muted); + --sub-text-color-1: var(--color-text-muted); + --sub-text-color-2: var(--color-text-muted); + --sub-text-color-3: rgba(255, 255, 255, 0.7); + --sub-text-color-5: var(--color-text); + --sub-text-color-6: var(--brand-white); + + --blog-border-color: var(--color-border); + --right-sidebar-circle-bg-color: var(--color-border); + --right-sidebar-active-color: var(--color-accent); + --docs-detail-bg: #1c1c1c; + --ordered-list-bg-color: rgba(254, 163, 21, 0.18); + --ordered-list-text-color: var(--color-text); + --portrait-border-color: var(--color-border); + --popper-bg-color: var(--color-accent); + --popper-text-color: var(--brand-black); + + --box-border-color: var(--color-border); + --box-hover-border-color: var(--color-accent); + --code-border-color: transparent; + --nav-link-line-normal-color: var(--color-border); + + --footer-bg-color: #000000; + + /* AA-compliant link color on dark background. + * #FEA315 (brand light orange) on #000 ≈ 9.27:1 (AAA). */ + --color-accent: var(--brand-orange); + --color-accent-hover: #ffba47; + + --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), + 0 1px 2px rgba(0, 0, 0, 0.35); + --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5), + 0 2px 4px rgba(0, 0, 0, 0.3); + --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.6), + 0 4px 12px rgba(0, 0, 0, 0.3); +} + +/* Base body */ +html, +body { + font-family: var(--font-family-base); + background-color: var(--color-bg); + color: var(--color-text); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Global focus-visible ring for keyboard accessibility */ +:focus-visible { + outline: 2px solid var(--color-accent); + outline-offset: 2px; + border-radius: var(--radius-sm); +} + +/* Headings always use Montserrat */ +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: var(--font-family-display); + letter-spacing: -0.01em; +} + +code, +kbd, +pre, +samp { + font-family: var(--font-family-mono); +} diff --git a/src/css/design-class.scss b/src/css/design-class.scss index 4ce8f6c5d7d..2c24612bbf8 100644 --- a/src/css/design-class.scss +++ b/src/css/design-class.scss @@ -1,20 +1,29 @@ +/** + * Atomic utility classes used by page components. + */ + .sub-text { - line-height: 24px; - letter-spacing: 0.02em; + line-height: 1.6; + letter-spacing: 0.01em; text-align: left; - color: var(--sub-text-color-2); + color: var(--color-text-muted); } .main-title { - font-size: 30px; + font-family: var(--font-family-display); + font-size: 1.875rem; font-weight: 700; - line-height: 56px; + line-height: 1.25; + letter-spacing: -0.01em; + color: var(--color-text); } + .sub-title { - font-size: 24px; - font-weight: 700; - line-height: 20px; - color: var(--sub-text-color-5); + font-family: var(--font-family-display); + font-size: 1.25rem; + font-weight: 600; + line-height: 1.4; + color: var(--color-text); } .flex { @@ -25,13 +34,16 @@ } .active-color { - color: var(--active-color); + color: var(--color-accent); cursor: pointer; + &:hover { + text-decoration: underline; + } } .light-active-color { color: #fff; cursor: pointer; - font-weight: 700; + font-weight: 600; &:hover { text-decoration: underline; color: inherit; @@ -41,10 +53,11 @@ .two-lines-ellipsis { display: -webkit-box; line-clamp: 2; + -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; - font-size: 14px; + font-size: 0.875rem; } .single-line-overflow { white-space: nowrap; @@ -70,7 +83,6 @@ } } -// set up an external container and remove the underline of other labels in label a .link-wrap { &:hover { * { @@ -80,6 +92,9 @@ } .code-block { - background-color: rgba(217, 217, 217, 0.2); - padding: 3px 5px; -} \ No newline at end of file + background-color: var(--color-bg-muted); + padding: 0.125em 0.375em; + border-radius: 4px; + font-family: var(--font-family-mono); + font-size: 0.875em; +} diff --git a/src/css/design-style.scss b/src/css/design-style.scss index 628ff3eaf02..b1e623c63b3 100644 --- a/src/css/design-style.scss +++ b/src/css/design-style.scss @@ -1,36 +1,57 @@ +/** + * Global element/atomic style overrides. + * Designed to feel like Mintlify: clean, airy, generous whitespace, + * subtle borders + shadows, and Berry Orange accents. + */ + a { text-decoration: none; color: inherit; + transition: color var(--motion-fast); &:hover { - color: var(--active-color); + color: var(--color-accent); text-decoration: underline; } } -// navbar header +/* ------------------------------------------------------------------ */ +/* Navbar */ +/* ------------------------------------------------------------------ */ .navbar { - background-color: var(--navbar-bg-color); + background-color: var(--ifm-navbar-background-color); + transition: background-color var(--motion-base); + border-bottom: 1px solid var(--color-border); padding: 0; + box-shadow: none; + .navbar__inner { + max-width: var(--global-main-width); + margin: 0 auto; box-sizing: border-box; - padding: 0 70px; + padding: 0 var(--mobile-padding-width); display: flex; + flex-wrap: nowrap; justify-content: space-between; align-items: center; + height: var(--ifm-navbar-height); - // mobile hide right menu .navbar__item { display: inline-block; + padding: 8px 12px; + font-size: 0.9375rem; + font-weight: 500; } } + .navbar__items { display: flex; align-items: center; - + gap: 4px; + flex-wrap: nowrap; + &:not(.navbar__items--right) { flex: 0 0 auto; } - &.navbar__items--right { margin-left: auto; flex-shrink: 0; @@ -38,130 +59,219 @@ a { } .navbar__items--right { a { - font-weight: 700; + font-weight: 500; } } - .navbar__link--active { - color: var(--active-color); - // specify the active link color + .navbar__link { + font-weight: 500; + transition: color var(--motion-fast); + &:hover { + color: var(--color-accent); + } + } + .navbar__link--active { + color: var(--color-accent); &[href="/releases"] { color: var(--ifm-navbar-link-color); } } + + .dropdown__menu { + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + box-shadow: var(--shadow-md); + padding: 6px; + background-color: var(--color-surface); + .dropdown__link { + border-radius: var(--radius-sm); + font-size: 0.9375rem; + padding: 8px 12px; + &:hover { + background-color: var(--brand-orange-soft); + color: var(--color-text); + } + } + } + .navbar-sidebar { - background-color: var(--normal-bg-1); + background-color: var(--color-bg); } + @media screen and (max-width: 1024px) { & { width: 100%; min-width: 100%; } - --ifm-navbar-background-color: rgba(15, 15, 15); - --ifm-navbar-height: 47px; - + --ifm-navbar-height: 56px; .navbar__items--right { display: none; } .navbar__logo { - width: 107px; + width: 132px; } } @media screen and (max-width: 768px) { .navbar__inner { - padding: 0 35px; + padding: 0 var(--mobile-padding-width); } } } -[data-theme="light"] { - .navbar { - --ifm-navbar-background-color: #fff; + +/* Pinned to home hero — dark overlay on hero, opaque when scrolled */ +.navbar-home-lighting { + border-bottom: 1px solid rgba(255, 255, 255, 0.06); + .clean-btn { + color: #fff; + } + .navbar__toggle, + .navbar__toggle:hover { + color: #fff; } } -// markdown style -article { - code { - border: 1px solid var(--code-border-color); - font-size: 14px; +/* When the mobile sidebar is open, ensure it always has a solid surface + * background and readable text — even on the home page where the navbar + * itself is translucent over the dark hero. + * + * The home navbar has .navbar-home-lighting which sets text/logo to + * white (looks great over the dark hero). Inside the sidebar we revert + * those to the regular theme tokens so menu items don't render + * white-on-white. */ +.navbar-sidebar { + background-color: var(--color-bg) !important; + color: var(--color-text); + box-shadow: var(--shadow-lg); + + /* Reset any white-on-white inheritance from .navbar-home-lighting */ + --ifm-navbar-link-color: var(--color-text); + --ifm-navbar-background-color: var(--color-bg); + + .navbar__brand, + .navbar__title, + .menu__link, + .clean-btn { + color: var(--color-text); + } + .menu__link:hover { + background-color: var(--color-bg-muted); + color: var(--color-text); + } + .menu__link--active, + .menu__link--active:hover { + color: var(--color-text); + background-color: var(--brand-orange-soft); + } + .navbar-sidebar__brand { + background-color: var(--color-bg); + border-bottom: 1px solid var(--color-border); + box-shadow: none; + } + .navbar-sidebar__back { + background: var(--color-bg-muted); + color: var(--color-text); + border-radius: var(--radius-sm); + } + .navbar-sidebar__close svg { + fill: var(--color-text); + } +} +.navbar-sidebar__backdrop { + background-color: rgba(0, 0, 0, 0.55) !important; +} + +@media (max-width: 1024px) { + .navbar__toggle { + display: inherit; } - .anchor { - color: var(--active-color); + .navbar__search-input { + width: calc(100vw - 160px); } +} - .hash-link { - &::before { - color: var(--active-color); - } +.nav-left-logo { + display: flex; + align-items: center; + flex-shrink: 0; + margin-right: 16px; +} + +/* ------------------------------------------------------------------ */ +/* Markdown article */ +/* ------------------------------------------------------------------ */ +article { + /* Inline code only — exclude code inside 
 code blocks */
+  :not(pre) > code {
+    border: 1px solid var(--inline-code-border, var(--color-border));
+    background-color: var(--ifm-code-background);
+    color: var(--inline-code-color, var(--color-text));
+    padding: 0.125em 0.375em;
+    font-size: 0.875em;
+    border-radius: 4px;
+  }
+  /* Reset any inline-code styling that may leak into code blocks */
+  pre code {
+    border: none;
+    background-color: transparent;
+    padding: 0;
+    font-size: inherit;
+    border-radius: 0;
+  }
+
+  .anchor,
+  .hash-link::before {
+    color: var(--color-accent);
   }
+
   a {
-    color: var(--active-color);
+    color: var(--color-accent);
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 2px;
     &:hover {
-      text-decoration: underline;
+      color: var(--color-accent-hover);
+      text-decoration-thickness: 2px;
     }
   }
+
   li::marker {
-    color: var(--active-color);
+    color: var(--color-accent);
   }
   li > ul {
-    list-style: disc;
+    list-style: square;
     > li::marker {
-      color: rgb(201, 209, 217);
+      color: var(--color-text-soft);
       font-size: 12px;
     }
   }
 
-  // ul, ol style
-.markdown ul {
-  list-style-type: square; /* Options: circle, square */
-}
-
-.markdown ul, .markdown ol {
-  font-size: 15px;
-}
-
-.markdown blockquote {
-  border-left: 4px solid rgba(255, 168, 0, 1);
-  background-color: rgba(255, 168, 0, 0.1);
-  font-style: italic;
-}
-
-.markdown img {
-  max-width: 100%;
-  height: auto;
-  border-radius: 8px;
-  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
-  display: block;
-  margin: 16px auto;
-}
-
-  // 1,2,3
+  /* Numbered lists with subtle pill counters */
   ol {
     counter-reset: list;
     list-style: none;
+    padding-left: 1.75rem;
 
     > li {
       position: relative;
       &::before {
         counter-increment: list;
         content: counter(list);
-        background-color: var(--ordered-list-bg-color);
+        background-color: var(--brand-orange-soft);
+        color: var(--color-text);
         display: inline-block;
         position: absolute;
         width: 22px;
         height: 22px;
         line-height: 22px;
         text-align: center;
-        left: -30px;
+        left: -28px;
         top: 1px;
         border-radius: 50%;
-        font-size: 14px;
-        color: var(--ordered-list-text-color);
+        font-size: 12px;
+        font-weight: 600;
       }
     }
   }
-
-  // a,b,c
   li > ol {
     list-style: lower-alpha;
     > li {
@@ -171,122 +281,303 @@ article {
     }
   }
 
-  // icon
+  /* Admonitions — per-type overrides; base .theme-admonition
+   * (border, radius, accent stripe) is defined globally below. */
   .theme-admonition {
     a {
-      text-decoration-color: var(--active-color);
+      text-decoration-color: var(--color-accent);
+    }
+    &.alert--warning,
+    &.alert--danger,
+    &.alert--success,
+    &.alert--secondary,
+    &.alert--info {
+      font-size: 0.875rem; /* 14px */
     }
     &.alert--warning {
-      font-size: 14px;
       span::before {
         content: "";
         display: inline-block;
-        width: 23px;
-        height: 23px;
-        font-size: 14px;
+        width: 22px;
+        height: 22px;
         background-image: url("/img/docs/warning.svg");
         background-size: contain;
+        background-repeat: no-repeat;
+        margin-right: 6px;
+        vertical-align: middle;
       }
       svg {
         display: none;
       }
     }
     &.alert--danger {
-      font-size: 14px;
       span::before {
         content: "";
         display: inline-block;
-        width: 24px;
-        height: 24px;
+        width: 22px;
+        height: 22px;
         background-image: url("/img/docs/danger.svg");
         background-size: contain;
+        background-repeat: no-repeat;
+        margin-right: 6px;
+        vertical-align: middle;
       }
       svg {
         display: none;
       }
     }
-    &.alert--success {
-      font-size: 14px;
+  }
+}
+
+pre code .token {
+  font-size: 0.8125rem;
+}
+
+/* ------------------------------------------------------------------ */
+/* Shared markdown content typography                                 */
+/* Applies identically to Docs, Blog and MDX sub-pages                */
+/* (Community / Contribute / Team / Resources / Download).            */
+/* The .markdown class is present on all three:                       */
+/*   - Docs:  
                         */
+/*   - Blog:  
                                  */
+/*   - MDX :  
                              */
+/* ------------------------------------------------------------------ */
+.markdown {
+  ul {
+    list-style-type: square;
+  }
+  ul,
+  ol {
+    font-size: 0.9375rem; /* 15px — one notch smaller than 16px body for clear hierarchy */
+    line-height: 1.65;
+    margin: 12px 0 16px;
+  }
+  ul {
+    padding-left: 1.5rem;
+  }
+  ol {
+    padding-left: 1.75rem;
+  }
+  li {
+    margin: 4px 0;
+  }
+  li > p {
+    margin: 0;
+  }
+  /* Nested lists step down once more for visual depth */
+  li ul,
+  li ol {
+    font-size: 0.875rem; /* 14px */
+    margin: 4px 0;
+  }
+
+  blockquote {
+    border-left: 3px solid var(--brand-orange);
+    background-color: rgba(254, 163, 21, 0.1);
+    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+    color: var(--color-text-muted);
+    font-style: normal;
+    padding: 12px 18px;
+    margin: 16px 0;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-sm);
+    display: block;
+    margin: 20px auto;
+    border: 1px solid var(--color-border);
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Tables — tighten typography and improve hierarchy                 */
+/* ------------------------------------------------------------------ */
+.markdown table,
+article table {
+  font-size: 0.875rem;        /* 14px — clearly smaller than 16px body */
+  line-height: 1.55;
+  border-collapse: separate;
+  border-spacing: 0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  margin: 16px auto 24px;
+  /* Block + fit-content so narrow tables don't stretch full-width
+   * (no trailing empty border) while wide ones still get
+   * horizontal scrolling. Auto margins center the table. */
+  display: block;
+  width: fit-content;
+  max-width: 100%;
+  overflow-x: auto;
+
+  thead {
+    background-color: var(--color-bg-muted);
+    th {
+      font-family: var(--font-family-display);
+      font-size: 0.8125rem;    /* 13px header label */
+      font-weight: 700;
+      letter-spacing: 0;
+      color: var(--color-text);
+      border-bottom: 1px solid var(--color-border);
+      padding: 10px 14px;
+      text-align: left;
+    }
+  }
+
+  tbody {
+    tr {
+      border-bottom: 1px solid var(--color-border);
+      &:last-child {
+        border-bottom: none;
+      }
+      &:nth-child(2n) {
+        background-color: var(--color-bg-subtle);
+      }
     }
-    &.alert--secondary {
-      font-size: 14px;
+    td {
+      padding: 10px 14px;
+      color: var(--color-text);
+      vertical-align: top;
+      border: none;
     }
   }
+
+  /* Inline code inside tables stays slightly smaller than table text */
+  code {
+    font-size: 0.8125rem;
+  }
 }
 
-pre code .token {
-  font-size: 12px;
+/* ------------------------------------------------------------------ */
+/* Code blocks — pure black "terminal" background                     */
+/* ------------------------------------------------------------------ */
+/* The Prism theme (nightOwl / okaidia) supplies light-colored syntax  */
+/* tokens, so they stay readable on black. The background comes from    */
+/* several places, so we override each one:                             */
+/*   1) the container CSS variable (--prism-background-color)           */
+/*   2) the 
 inline background from prism-react-renderer           */
+/*      (needs !important to beat the inline style)                     */
+/*   3) the content wrapper, title bar and line-number gutter           */
+.theme-code-block,
+[class*="codeBlockContainer"] {
+  --prism-background-color: #000000 !important;
+  --prism-color: #f5f6f8;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md) !important;
+  box-shadow: var(--shadow-xs) !important;
+  background-color: #000000 !important;
+}
+
+[class*="codeBlockContent"] {
+  background-color: #000000 !important;
 }
 
+.theme-code-block pre,
+[class*="codeBlockContent"] > pre,
+pre[class*="codeBlock"],
+pre[class*="language-"] {
+  background-color: #000000 !important;
+  color: #f5f6f8;
+}
+
+[class*="codeBlockTitle"] {
+  background-color: #0a0a0a;
+  border-bottom: 1px solid #1f1f1f;
+  color: #f5f6f8;
+  font-family: var(--font-family-mono);
+  font-weight: 500;
+}
+
+/* Line-number gutter — dark background, readable colour */
+[class*="codeLineNumber"] {
+  background-color: #000000 !important;
+  color: var(--color-text-soft);
+}
+[class*="codeLineNumber"]::before {
+  color: var(--color-text-soft);
+}
+
+/* ------------------------------------------------------------------ */
+/* Main content layout                                                */
+/* ------------------------------------------------------------------ */
 .main-wrapper {
-  // docs left menu released
   .container {
     a {
       text-decoration: none;
     }
     article {
-      --ifm-color-primary: var(--active-color);
+      --ifm-color-primary: var(--brand-orange);
     }
   }
-  @media screen and (min-width: 1440px) {
+
+  @media screen and (min-width: 1280px) {
     > div {
       width: var(--global-main-width);
     }
   }
-  // docs layout
   > div {
     max-width: var(--global-main-width);
     margin: 0 auto;
   }
+
   h1:first-child {
-    font-size: 30px;
+    font-size: 2.25rem;
+    font-weight: 700;
+    letter-spacing: -0.02em;
   }
   h2 {
-    font-size: 24px;
+    font-size: 1.625rem;
+    font-weight: 700;
+    margin-top: 2rem;
   }
-
   h3 {
-    font-size: 20px;
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-top: 1.5rem;
+  }
+  p {
+    color: var(--color-text);
+    line-height: 1.75;
   }
-  p,
   li {
-    color: var(--sub-text-color-2);
+    color: var(--color-text);
+    line-height: 1.65;
   }
   strong {
-    color: var(--title-text-color);
+    color: var(--color-text);
+    font-weight: 600;
   }
 
   .alert--info {
-    border: none;
-    font-size: 14px;
     background-color: var(--docs-detail-bg);
     &[open] summary {
       &::after {
         transform: rotate(90deg);
-        transition: transform 0.3s ease-in-out;
+        transition: transform var(--motion-base);
       }
     }
     summary {
       padding-left: 0;
-      color: var(--active-color);
-
+      color: var(--color-accent);
       &::before {
         display: none;
       }
       &::after {
-        // content: "▶";
         content: "";
         position: relative;
-        left: 10px;
-        top: 5px;
-        width: 20px;
-        height: 20px;
+        left: 8px;
+        top: 4px;
+        width: 18px;
+        height: 18px;
         display: inline-block;
         background-image: url(@site/static/img/greater_than.png);
         background-repeat: no-repeat;
-        transition: transform 0.3s ease-in-out;
+        background-size: contain;
+        transition: transform var(--motion-base);
       }
-      // click to see detail inner line
       & + div {
         > div {
           border-top: none;
@@ -297,82 +588,85 @@ pre code .token {
   }
 }
 
-// md right sidebar
+/* ------------------------------------------------------------------ */
+/* Admonitions (global — applies to docs, blog, all pages)           */
+/* ------------------------------------------------------------------ */
+.theme-admonition {
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border);
+  border-left: 3px solid var(--color-accent);
+}
+
+/* ------------------------------------------------------------------ */
+/* Right TOC sidebar                                                  */
+/* ------------------------------------------------------------------ */
 .table-of-contents {
-  border-left: none;
+  border-left: 1px solid var(--color-border);
+  padding-left: 1rem;
+  font-size: 0.8125rem;      /* 13px — compact but legible */
+  line-height: 1.4;
+
+  .table-of-contents__link {
+    display: block;
+    transition: color var(--motion-fast);
+    /* Allow long headings to wrap to max 2 lines */
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    &:hover {
+      color: var(--color-accent);
+    }
+  }
   .table-of-contents__link--active {
-    color: var(--right-sidebar-active-color);
+    color: var(--color-accent);
+    font-weight: 600;
   }
 
   li {
     position: relative;
-    margin-top: 19px;
-    height: 21px;
-    line-height: 16px;
+    margin-top: 7px;
+    line-height: 1.35;
     &:not(:last-child) {
       &::after {
-        content: "";
-        display: inline-block;
-        position: absolute;
-        width: 2px;
-        background-color: var(--right-sidebar-circle-bg-color);
-        height: 33px;
-        left: -17px;
-        top: 14px;
-      }
-    }
-    a {
-      &.table-of-contents__link--active {
-        &::before {
-          background-color: var(--right-sidebar-active-color);
-        }
-      }
-      &::before {
-        content: "";
-        display: inline-block;
-        position: absolute;
-        width: 8px;
-        height: 8px;
-        background-color: var(--right-sidebar-circle-bg-color);
-        border-radius: 50%;
-        left: -20px;
-        top: 6px;
+        display: none;
       }
     }
-  }
-  li > ul {
     a {
       &::before {
-        // left: -36px;
         display: none;
       }
     }
   }
-  @media screen and (max-width: 996px) {
-    li {
-      &::after {
-        display: none !important;
-      }
-      a {
-        &::before {
-          display: none !important;
-        }
-      }
-    }
-  }
 }
 
+.theme-doc-toc-desktop {
+  overflow-y: visible !important;
+}
+
+/* ------------------------------------------------------------------ */
+/* Breadcrumbs                                                        */
+/* ------------------------------------------------------------------ */
 .theme-doc-breadcrumbs {
   .breadcrumbs {
     display: flex;
     align-items: center;
+    font-size: 0.8125rem;
+    color: var(--color-text-muted);
 
     .breadcrumbs__item {
       display: inline-flex;
       align-items: center;
 
       .breadcrumbs__link {
-        padding: 0 6px;
+        padding: 4px 8px;
+        border-radius: var(--radius-sm);
+        transition: background-color var(--motion-fast),
+          color var(--motion-fast);
+        &:hover {
+          background-color: var(--color-bg-muted);
+          color: var(--color-text);
+        }
       }
       a.breadcrumbs__link {
         width: 18px;
@@ -381,16 +675,16 @@ pre code .token {
         background-image: url("/img/back_home.svg");
         background-repeat: no-repeat;
         background-size: cover;
-        margin-right: 4px;
-        margin-bottom: 3px;
-
+        margin-right: 6px;
+        margin-bottom: 2px;
+        padding: 0;
         svg {
           display: none;
         }
       }
       &:not(:last-child) {
         &::after {
-          opacity: 1;
+          opacity: 0.6;
           width: 12px;
           height: 12px;
           background-repeat: no-repeat;
@@ -401,184 +695,137 @@ pre code .token {
     }
     .breadcrumbs__item--active {
       .breadcrumbs__link {
-        font-size: 13px;
+        font-size: 0.8125rem;
         background-color: transparent;
+        color: var(--color-accent);
       }
     }
   }
 }
 
-// docs right nav
-.theme-doc-toc-desktop {
-  overflow-y: visible !important;
-}
-
-// docs left nav  ul > li > div > a/ul
+/* ------------------------------------------------------------------ */
+/* Doc left sidebar                                                   */
+/* ------------------------------------------------------------------ */
 .theme-doc-sidebar-container {
-  border-right: none !important;
-  margin-right: 60px;
-  font-size: 14px;
+  border-right: 1px solid var(--color-border) !important;
+  margin-right: 40px;
+  font-size: 0.9375rem;
+
+  .menu {
+    padding: 1rem 0.5rem;
+  }
+
+  .menu__link {
+    border-radius: var(--radius-sm);
+    padding: 6px 12px;
+    font-size: 0.9375rem;
+    font-weight: 400;
+    transition: background-color var(--motion-fast),
+      color var(--motion-fast);
+    &:hover {
+      background-color: var(--color-bg-muted);
+    }
+    &.menu__link--active {
+      font-weight: 600;
+      background-color: var(--brand-orange-soft);
+      color: var(--color-text);
+    }
+  }
+
+  .menu__list-item-collapsible {
+    border-radius: var(--radius-sm);
+    .menu__link {
+      flex: 1;
+    }
+    &:hover {
+      background-color: var(--color-bg-muted);
+    }
+  }
+
   .theme-doc-sidebar-menu {
-    margin-right: 0px;
-    // li
-    .theme-doc-sidebar-item-category {
-      position: relative;
-      a {
+    /* level-1 categories: section labels */
+    .theme-doc-sidebar-item-category-level-1 {
+      > .menu__list-item-collapsible > .menu__link {
+        font-weight: 700;
+        text-transform: none;
+        font-family: var(--font-family-display);
+        letter-spacing: -0.01em;
+        color: var(--color-text);
+      }
+      > ul.menu__list {
+        padding-left: 8px;
         position: relative;
-        &::after {
-          display: none;
-        }
         &::before {
           content: "";
-          position: absolute;
-          left: -1.5px;
           display: inline-block;
-          width: 16px;
-          height: 16px;
-          background-image: url("/img/docs/sub-no-active.svg");
-          top: 8px;
-          transition: all 0.1s;
-        }
-      }
-      // button {
-      // display: none !important;
-      // }
-
-      // no active add (div)
-      &.menu__list-item--collapsed {
-        a {
-          &::before {
-            transition: all 0.1s;
-            background-image: url("/img/docs/add-no-active.svg");
-          }
-        }
-      }
-      // first level(li)
-      &.theme-doc-sidebar-item-category-level-1 {
-        position: relative;
-        > ul.menu__list {
-          padding-left: 0;
-          &::before {
-            content: "";
-            display: inline-block;
-            width: 1px;
-            height: calc(100% - 34px);
-            position: absolute;
-            background-color: var(--ifm-hover-overlay);
-            left: 4px;
-          }
-        }
-        &.menu__list-item {
-          > .menu__list-item-collapsible {
-            background: transparent;
-            a {
-              color: var(--title-text-color);
-              &::before {
-                background-image: url("/img/docs/sub.svg");
-              }
-            }
-            &:hover {
-              a {
-                color: var(--active-color);
-                &::before {
-                  background-image: url("/img/docs/hover-sub-active.svg");
-                }
-              }
-            }
-          }
-        }
-        &.menu__list-item--collapsed {
-          > .menu__list-item-collapsible {
-            &:hover {
-              a {
-                &::before {
-                  background-image: url("/img/docs/hover-add-active.svg") !important;
-                }
-              }
-            }
-          }
-          a {
-            &::before {
-              background-image: url("/img/docs/add.svg") !important;
-            }
-          }
-        }
-      }
-
-      // li
-      &:not(.theme-doc-sidebar-item-category-level-1) {
-        // foldable (div)
-        .menu__list-item-collapsible {
-          padding-left: var(--ifm-menu-link-padding-horizontal);
-        }
-        &.menu__list-item {
-          .menu__link--active {
-            &::before {
-              background-image: url("/img/docs/hover-sub-active.svg");
-            }
-          }
-        }
-      }
-      // leaf node (li)
-      .theme-doc-sidebar-item-link {
-        &.theme-doc-sidebar-item-link-level-3 {
-          a {
-            &::after {
-              left: -14px;
-            }
-          }
-        }
-        a {
-          &::before {
-            display: none !important;
-          }
+          width: 1px;
+          height: calc(100% - 8px);
+          position: absolute;
+          background-color: var(--color-border);
+          left: 4px;
+          top: 4px;
         }
       }
     }
   }
 }
 
-// download
+/* Disable old icon-based menu indicators */
+.theme-doc-sidebar-menu .theme-doc-sidebar-item-category a::before {
+  display: none !important;
+}
+
 .thin-scrollbar {
   overflow-y: visible !important;
 }
 
-// blog detail bottom
+/* ------------------------------------------------------------------ */
+/* Pagination at bottom of docs/blog                                  */
+/* ------------------------------------------------------------------ */
 .pagination-nav {
-  margin-top: 25px;
-  display: flex;
-  justify-content: space-between;
+  margin-top: 2rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
 
   .pagination-nav__link {
-    width: 298px;
-    height: 60px;
-    font-size: 14px;
-    @media screen and (max-width: 768px) {
-      width: 150px;
-    }
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    padding: 14px 16px;
+    height: auto;
+    width: auto;
+    transition: border-color var(--motion-fast),
+      box-shadow var(--motion-fast), transform var(--motion-fast);
 
     .pagination-nav__label {
-      font-size: 14px;
-      color: var(--active-color);
-      font-weight: 400;
+      font-size: 0.8125rem;
+      color: var(--color-accent);
+      font-weight: 600;
     }
     .pagination-nav__sublabel {
-      color: var(--sub-text-color-2);
+      color: var(--color-text-muted);
+      font-size: 0.75rem;
+      margin-bottom: 4px;
     }
     &:hover {
-      background-color: var(--active-color);
+      border-color: var(--color-accent);
+      box-shadow: var(--shadow-sm);
+      background-color: transparent;
       .pagination-nav__sublabel {
-        color: var(--hover-full-bg-text-color);
+        color: var(--color-text-muted);
       }
       .pagination-nav__label {
-        color: var(--hover-full-bg-text-color);
+        color: var(--color-accent);
       }
     }
   }
+  @media screen and (max-width: 768px) {
+    grid-template-columns: 1fr;
+  }
 }
 
-// hide table of content
-@media screen and (max-width: 1440px) {
+/* Hide TOC on smaller screens */
+@media screen and (max-width: 1280px) {
   .container {
     .row {
       > .col--3 {
@@ -588,191 +835,126 @@ pre code .token {
   }
 }
 
+/* Tabs */
 ul[role="tablist"] {
-  border-bottom: 1px solid #383b3f;
+  border-bottom: 1px solid var(--color-border);
   .tabs__item {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
+    font-weight: 500;
   }
   .tabs__item--active {
-    background-color: #333333;
-    color: #fff;
-    border-bottom: none;
+    background-color: transparent;
+    color: var(--color-accent);
+    border-bottom: 2px solid var(--color-accent);
   }
 }
 
+/* ------------------------------------------------------------------ */
+/* DocCard / DocCardList — used on docs index pages via             */
+/* . Default Docusaurus styling renders the title as */
+/* 
, which inherits our large heading sizing. Override to a     */
+/* compact, scannable card list (similar to Mintlify's card grid).  */
+/* ------------------------------------------------------------------ */
+article a[class*="cardContainer"] {
+  /* Override the inline-link underline that we set on article a's */
+  text-decoration: none;
+  display: block;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
+  background-color: var(--color-surface);
+  box-shadow: var(--shadow-xs);
+  padding: 1.125rem 1.25rem;
+  transition: border-color var(--motion-fast),
+    box-shadow var(--motion-fast),
+    transform var(--motion-fast);
+
+  /* Title: tame to body-sized text, not heading-scale */
+  > h2,
+  > [class*="cardTitle"] {
+    font-family: var(--font-family-display);
+    font-size: 0.9375rem !important;
+    font-weight: 600 !important;
+    line-height: 1.4 !important;
+    color: var(--color-text) !important;
+    letter-spacing: 0;
+    margin: 0 0 0.25rem 0 !important;
+    /* No hash-link / anchor link decorations on cards */
+    &::before,
+    .hash-link {
+      display: none;
+    }
+  }
+
+  /* Description */
+  > p,
+  > [class*="cardDescription"] {
+    font-size: 0.8125rem !important;
+    line-height: 1.5 !important;
+    color: var(--color-text-muted) !important;
+    margin: 0 !important;
+  }
+
+  &:hover {
+    border-color: var(--color-accent);
+    box-shadow: var(--shadow-sm);
+    transform: translateY(-1px);
+    text-decoration: none;
+  }
+}
+
+/* Light-mode specific overrides */
 html[data-theme="light"] {
   .theme-doc-breadcrumbs {
     a.breadcrumbs__link {
       background-image: url("/img/back_home-light.svg") !important;
-      color: auto !important;
     }
   }
   .theme-admonition {
-    &.alert--warning {
-      span::before {
-        background-image: url("/img/docs/warning-light.svg");
-      }
+    &.alert--warning span::before {
+      background-image: url("/img/docs/warning-light.svg");
     }
-    &.alert--danger {
-      span::before {
-        background-image: url("/img/docs/danger-light.svg");
-      }
-    }
-  }
-  ul[role="tablist"] {
-    border-bottom: 1px solid #d6d9dd;
-    .tabs__item--active {
-      background-color: #ffeecc;
-      color: #000;
-    }
-  }
-
-  // docs left nav
-  .theme-doc-sidebar-container {
-    .theme-doc-sidebar-menu {
-      // li
-      .theme-doc-sidebar-item-category {
-        a {
-          &::before {
-            background-image: url("/img/docs/sub-light.svg");
-          }
-        }
-
-        // no active add (div)
-        &.menu__list-item--collapsed {
-          a {
-            &::before {
-              // inner
-              background-image: url("/img/docs/add-light.svg");
-            }
-          }
-        }
-        // first level(li)
-        &.theme-doc-sidebar-item-category-level-1 {
-          > ul.menu__list {
-            &::before {
-              background-color: #ffe5b3;
-            }
-          }
-          &.menu__list-item {
-            > .menu__list-item-collapsible {
-              a {
-                &::before {
-                  background-image: url("/img/docs/sub-light.svg");
-                }
-              }
-              &:hover {
-                a {
-                  color: var(--active-color);
-                  &::before {
-                    background-image: url("/img/docs/hover-sub-active.svg");
-                  }
-                }
-              }
-            }
-          }
-          &.menu__list-item--collapsed {
-            > .menu__list-item-collapsible {
-              &:hover {
-                a {
-                  &::before {
-                    background-image: url("/img/docs/hover-add-active.svg") !important;
-                  }
-                }
-              }
-            }
-            a {
-              &::before {
-                background-image: url("/img/docs/add-light.svg") !important;
-              }
-            }
-          }
-        }
-
-        // li
-        &:not(.theme-doc-sidebar-item-category-level-1) {
-          &.menu__list-item {
-            .menu__link--active {
-              &::before {
-                background-image: url("/img/docs/sub-light.svg");
-              }
-            }
-          }
-        }
-      }
+    &.alert--danger span::before {
+      background-image: url("/img/docs/danger-light.svg");
     }
   }
 }
 
-.navbar-home-lighting {
-  background: #000;
-  .clean-btn {
-    color: #fff;
-  }
-  .check-theme-switch {
-    display: none !important;
-  }
-}
-
-@media (max-width: 1024px) {
-  .navbar__toggle {
-    display: inherit;
-  }
-}
-
-.nav-left-logo {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  margin-right: 20px;
-}
-
-/* Progressive responsive adjustments for navbar spacing */
+/* Progressive responsive nav */
 @media (max-width: 1200px) {
-  .navbar {
-    .navbar__inner {
-      padding: 0 40px;
-    }
-  }
   .nav-left-logo {
-    margin-right: 15px;
+    margin-right: 12px;
   }
 }
-
 @media (max-width: 1100px) {
-  .navbar {
-    .navbar__inner {
-      padding: 0 30px;
-    }
-  }
   .nav-left-logo {
-    margin-right: 10px;
+    margin-right: 8px;
   }
   .navbar__logo {
     max-width: 140px;
     height: auto;
   }
+  .navbar .navbar__inner .navbar__item {
+    padding: 8px 8px;
+    font-size: 0.875rem;
+  }
 }
-
 @media (max-width: 1050px) {
   .navbar__items {
-    gap: 10px;
-  }
-  .nav-left-logo {
-    margin-right: 8px;
+    gap: 6px;
   }
   .navbar__logo {
-    max-width: 120px;
+    max-width: 130px;
+  }
+  .navbar .navbar__inner .navbar__item {
+    padding: 8px 6px;
   }
 }
-
 @media (max-width: 997px) {
-  /* Docusaurus mobile breakpoint */
   .navbar__items {
-    gap: 5px;
+    gap: 4px;
   }
   .nav-left-logo {
-    margin-right: 5px;
+    margin-right: 4px;
   }
 }
diff --git a/src/css/pages/community.module.scss b/src/css/pages/community.module.scss
index ae2cf52ebb1..f18f8e7ad49 100644
--- a/src/css/pages/community.module.scss
+++ b/src/css/pages/community.module.scss
@@ -3,59 +3,48 @@
   margin: 0 auto;
   padding: 0 var(--mobile-padding-width);
   display: flex;
+  gap: 56px;
   width: 100%;
 
   .leftContent {
-    padding-top: 68px;
+    flex: 1;
+    min-width: 0;
+    padding-top: 48px;
+
     .cardLine {
       display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
-      justify-content: space-between;
-      gap: 40px;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 20px;
     }
   }
+
   .rightContent {
-    // flex: 1;
-    width: 80%;
+    width: 220px;
+    flex-shrink: 0;
     position: relative;
+
     .navLinkWrap {
       position: sticky;
-      width: 196px;
-      height: 203px;
-      margin-left: 108px;
-      margin-top: 51px;
-      top: 130px;
+      top: 96px;
+      width: 100%;
     }
   }
 
-  @media screen and (max-width: 1440px) {
-    .leftContent {
-      .cardLine {
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
-        grid-gap: 32px;
-        height: auto !important;
-      }
-    }
-
-    .rightContent {
-      .navLinkWrap {
-        margin-left: 40px;
-      }
+  @media screen and (max-width: 1280px) {
+    .leftContent .cardLine {
+      grid-template-columns: repeat(2, 1fr);
+      gap: 16px;
     }
   }
   @media screen and (max-width: 1024px) {
+    gap: 0;
     .rightContent {
       display: none;
     }
   }
   @media screen and (max-width: 768px) {
-    .leftContent {
-      .cardLine {
-        &.getInvolved {
-          grid-template-columns: 1fr !important;
-        }
-      }
+    .leftContent .cardLine {
+      grid-template-columns: 1fr !important;
     }
   }
 }
diff --git a/src/css/pages/contribute.module.scss b/src/css/pages/contribute.module.scss
index 3f2ea78d956..842809f69a5 100644
--- a/src/css/pages/contribute.module.scss
+++ b/src/css/pages/contribute.module.scss
@@ -2,63 +2,57 @@
   max-width: var(--global-main-width);
   margin: 0 auto;
   padding: 0 var(--mobile-padding-width);
+
   .mainContent {
     display: flex;
+    gap: 56px;
+
     .leftContent {
-      max-width: 1050px;
-      flex-basis: 1050px;
+      flex: 1;
+      min-width: 0;
     }
     .rightContent {
-      flex: 1;
+      width: 220px;
+      flex-shrink: 0;
       position: relative;
       .navLinkWrap {
         position: sticky;
-        width: 196px;
-        height: 203px;
-        margin-left: 108px;
-        margin-top: 51px;
-        top: 130px;
+        top: 96px;
+        width: 100%;
+        margin-top: 64px;
       }
     }
   }
-  @media screen and (max-width: 1440px) {
+
+  @media screen and (max-width: 1024px) {
     .mainContent {
-      .leftContent {
-        width: 70%;
-      }
+      gap: 0;
       .rightContent {
-        .navLinkWrap {
-          margin-left: 40px;
-        }
+        display: none;
       }
     }
   }
-  @media screen and (max-width: 1024px) {
-    .rightContent {
-      display: none;
-    }
-    @media screen and (max-width: 768px) {
-      .leftContent {
-        .codeContribution {
-          display: grid;
-          grid-template-columns: 1fr;
-          gap: 32px;
-        }
+  @media screen and (max-width: 768px) {
+    .mainContent {
+      .leftContent .codeContribution {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 20px;
       }
     }
   }
 }
 
 .codeContribution {
-  display: flex;
-  margin-top: 32px;
-  .firstPosition {
-    margin-right: 20px;
-  }
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  margin-top: 16px;
+  margin-bottom: 24px;
 }
 
 .highLight {
-  color: var(--active-color);
+  color: var(--color-accent);
   a {
     color: inherit;
   }
diff --git a/src/css/pages/home.module.scss b/src/css/pages/home.module.scss
index e9238a16aed..533a080e1ef 100644
--- a/src/css/pages/home.module.scss
+++ b/src/css/pages/home.module.scss
@@ -1,5 +1,4 @@
 .homeContentContainer {
-  max-width: var(--global-main-width);
-  margin: auto;
-  padding-bottom: 127px;
+  background-color: var(--color-bg);
+  padding-bottom: 64px;
 }
diff --git a/src/css/pages/support.module.scss b/src/css/pages/support.module.scss
index 47f7db78879..28ce0a97f60 100644
--- a/src/css/pages/support.module.scss
+++ b/src/css/pages/support.module.scss
@@ -1,49 +1,11 @@
+/**
+ * Support page — uses 
 for body content,
+ * so all element styling (tables, h2, p, lists) comes from the
+ * shared markdown rules in design-style.scss. We only own the
+ * outer page width / padding here.
+ */
 .mainContent {
   max-width: var(--global-main-width);
   margin: 0 auto;
-  position: relative;
-  min-height: 1365px;
-  .content {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    top: 33px;
-
-    .title {
-      font-size: 30px;
-      line-height: 40px;
-    }
-    .subText {
-      line-height: 25px;
-      color: var(--sub-text-color-2);
-      margin-top: 17px;
-    }
-    .typeDesc {
-      margin-top: 46px;
-    }
-  }
-  @media screen and (max-width: 1024px) {
-    padding-bottom: 100px;
-    .content {
-      width: 100%;
-      padding: 0 var(--mobile-padding-width);
-      position: static;
-      transform: translateX(0);
-
-      .table {
-        width: 100% !important;
-      }
-    }
-  }
-  @media screen and (max-width: 768px) {
-    .table {
-      width: auto !important;
-    }
-  }
-}
-
-.subTitleText {
-  line-height: 50px;
-  font-size: 20px;
-  font-weight: bold;
+  padding: 32px var(--mobile-padding-width) 96px;
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 1e83fd2dc27..4605c9a77b5 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -4,6 +4,7 @@ import HCard from "../components/home/HCard";
 import MeetTheCommunity from "../components/home/MeetTheCommunity";
 import SlackWechatTwitterYoutube from "../components/home/SlackWechatTwitterYoutube";
 import WantToContribute from "../components/home/WantToContribute";
+import WhyCloudberry from "../components/home/WhyCloudberry";
 import styles from "../css/pages/home.module.scss";
 export default function Home(): JSX.Element {
   return (
@@ -11,6 +12,7 @@ export default function Home(): JSX.Element {
       

         
         

+          
           
           
           
diff --git a/src/pages/support.tsx b/src/pages/support.tsx
index 2649f0a4d39..6ae00c42c1d 100644
--- a/src/pages/support.tsx
+++ b/src/pages/support.tsx
@@ -1,4 +1,3 @@
-import clsx from "clsx";
 import ColorCard from "../components/common/ColorCard";
 import CommonLayout from "../components/common/Layout";
 import Table from "../components/common/Table";
@@ -14,30 +13,32 @@ const {
   commercialDesc,
   commercialSupportText,
 } = configData;
+
 export default function Support() {
   return (
     
       
       

-        

-          
{contentTextDesc}

-          

-            
{communitySupportText}

-            
-          
-          
{commercialSupportText}

-          
{commercialDesc}

-        
+        {/*
+         * Use the shared "markdown" article shell so the table, lists,
+         * blockquotes etc. inherit the exact same styling as Docs and
+         * MDX sub-pages (Community / Contribute / Team).
+         */}
+        

+          
{contentTextDesc}

+
+          
{communitySupportText}

+          

+
+          
{commercialSupportText}

+          
{commercialDesc}

+        
   );
diff --git a/src/theme/BlogLayout/styles.module.scss b/src/theme/BlogLayout/styles.module.scss
index 04e559c70a7..b4e6877476d 100644
--- a/src/theme/BlogLayout/styles.module.scss
+++ b/src/theme/BlogLayout/styles.module.scss
@@ -1,52 +1,36 @@
 .contentLayout {
-  padding: 0 var(--mobile-padding-width);
+  max-width: var(--global-main-width);
+  margin: 0 auto;
+  padding: 24px var(--mobile-padding-width) 48px;
 }
+
 .main {
-  // max-width: 896px;
   width: 100%;
+
   &.blogList {
-    max-width: 1056px;
     margin: 0 auto;
-  }
-  &.blogDetail {
-    max-width: 650px;
-  }
 
-  &.blogList {
-    .breadcrumbs {
-      margin-bottom: 10px;
-      margin-top: 10px;
-    }
     .listWrap {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
-      grid-column-gap: 2rem;
-      grid-row-gap: 3rem;
+      gap: 24px;
     }
   }
+
   &.blogDetail {
+    max-width: 760px;
     margin: 0 auto;
-    .breadcrumbs {
-      margin-top: 20px;
-      display: flex;
-      align-items: self-start;
-    }
-  }
-  @media screen and (max-width: 1056px) {
-    &.blogList {
-      .listWrap {
-        gap: 15px;
-      }
-    }
   }
+
   @media screen and (max-width: 1024px) {
     &.blogList {
       .listWrap {
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: repeat(2, 1fr);
+        gap: 20px;
       }
     }
   }
-  @media screen and (max-width: 768px) {
+  @media screen and (max-width: 640px) {
     &.blogList {
       .listWrap {
         grid-template-columns: 1fr;
@@ -54,8 +38,3 @@
     }
   }
 }
-@media screen and (max-width: 1440px) {
-  .contentLayout {
-    width: calc(100vw);
-  }
-}
diff --git a/src/theme/BlogPostItem/components/Authors/index.tsx b/src/theme/BlogPostItem/components/Authors/index.tsx
index 894cb89b994..b21a31c7123 100644
--- a/src/theme/BlogPostItem/components/Authors/index.tsx
+++ b/src/theme/BlogPostItem/components/Authors/index.tsx
@@ -6,64 +6,51 @@ export default function BlogPostItemHeaderAuthors({
 }): JSX.Element {
   const {
     metadata: { authors, formattedDate },
-    assets,
   } = useBlogPost();
   const authorsCount = authors.length;
   if (authorsCount === 0) {
     return null;
   }
-  // const authorsDom = authors.map((author) => {
-  //   return (
-  //     
-  //       {/* 
-  //         
-  //        */}
-  //       {author.name}
-  //     
-  //   );
-  // });
   return (
     

       
         {authors.map((author, index) => {
-          return {author.name};
+          return (
+            
+              {author.name}
+              {index < authors.length - 1 ? ", " : ""}
+            
+          );
         })}
       
+      
       {formattedDate}
     

   );
diff --git a/src/theme/BlogPostItem/components/Cover/index.tsx b/src/theme/BlogPostItem/components/Cover/index.tsx
index 7259a2ca8de..4960735764d 100644
--- a/src/theme/BlogPostItem/components/Cover/index.tsx
+++ b/src/theme/BlogPostItem/components/Cover/index.tsx
@@ -1,21 +1,43 @@
 import { useBlogPost } from "@docusaurus/theme-common/internal";
 import useBaseUrl from "@docusaurus/useBaseUrl";
+
 interface IProps {
   style?: React.CSSProperties;
   onClick?: () => void;
 }
+
 export default function Cover(props: IProps) {
   const { metadata } = useBlogPost();
+  const imgUrl = useBaseUrl(metadata.frontMatter.image);
+
+  if (!metadata.frontMatter.image) {
+    // Render a soft brand-tinted placeholder for posts without a cover
+    return (
+      

+    );
+  }
 
   return (
     
   );
diff --git a/src/theme/BlogPostItem/components/Desc/index.tsx b/src/theme/BlogPostItem/components/Desc/index.tsx
index 0bb0fe4135d..6daf5c82b9d 100644
--- a/src/theme/BlogPostItem/components/Desc/index.tsx
+++ b/src/theme/BlogPostItem/components/Desc/index.tsx
@@ -3,8 +3,13 @@ export default function Desc({ style }: { style?: React.CSSProperties }) {
   const { metadata } = useBlogPost();
   return (
     

       {metadata.description}
     

diff --git a/src/theme/BlogPostItem/components/Tags/index.tsx b/src/theme/BlogPostItem/components/Tags/index.tsx
index 249366b02c6..eba884656e6 100644
--- a/src/theme/BlogPostItem/components/Tags/index.tsx
+++ b/src/theme/BlogPostItem/components/Tags/index.tsx
@@ -9,13 +9,16 @@ export default function Tags({ style }: { style?: React.CSSProperties }) {
       
         {text.toString()}
diff --git a/src/theme/BlogPostItem/components/Title/styles.module.scss b/src/theme/BlogPostItem/components/Title/styles.module.scss
index 4e8f700384e..fc918bd09c2 100644
--- a/src/theme/BlogPostItem/components/Title/styles.module.scss
+++ b/src/theme/BlogPostItem/components/Title/styles.module.scss
@@ -1,20 +1,23 @@
 .title {
-  font-size: 20px;
-  font-weight: 500;
-  line-height: 1.4;
-  color: var(--title-text-color);
+  font-family: var(--font-family-display);
+  font-size: 1.125rem;
+  font-weight: 700;
+  line-height: 1.35;
+  color: var(--color-text);
+
   .detailTitle {
-    font-size: 30px;
-    font-weight: 600;
-    line-height: 1.2;
-    margin-top: 55px;
+    font-size: clamp(1.875rem, 3.5vw, 2.5rem);
+    font-weight: 800;
+    line-height: 1.15;
+    letter-spacing: -0.02em;
+    margin-top: 32px;
     display: inline-block;
   }
   a {
     color: inherit;
     text-decoration: none;
     &:hover {
-      color: var(--active-color);
+      color: var(--color-accent);
     }
   }
 }
diff --git a/src/theme/BlogPostItem/index.tsx b/src/theme/BlogPostItem/index.tsx
index 53fc16e661d..b0a2e1dd225 100644
--- a/src/theme/BlogPostItem/index.tsx
+++ b/src/theme/BlogPostItem/index.tsx
@@ -22,9 +22,9 @@ const BlogListItem = () => {
       

         
           
-          

+          

             

-              
+              
               
               
             

diff --git a/src/theme/BlogPostItem/styles.module.scss b/src/theme/BlogPostItem/styles.module.scss
index 40c18762511..6a242161403 100644
--- a/src/theme/BlogPostItem/styles.module.scss
+++ b/src/theme/BlogPostItem/styles.module.scss
@@ -1,10 +1,36 @@
 .blogList {
-  border: 1px solid var(--blog-border-color);
   position: relative;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background-color: var(--color-surface);
+  box-shadow: var(--shadow-xs);
+  transition: border-color var(--motion-fast),
+    box-shadow var(--motion-fast),
+    transform var(--motion-fast);
+
   &:hover {
-    border: 1px solid var(--active-color);
+    border-color: var(--color-accent);
+    box-shadow: var(--shadow-md);
+    transform: translateY(-2px);
+  }
+
+  header {
+    a {
+      text-decoration: none;
+      color: inherit;
+    }
+  }
+
+  /* Cover image fits header without rounded corners overlap */
+  img {
+    border-radius: 0;
+    border: none;
+    margin: 0;
+    box-shadow: none;
   }
 }
+
 .blogDetail {
   header {
     margin-bottom: 32px;
@@ -12,19 +38,17 @@
   .tags {
     display: flex;
     align-items: center;
-    margin-top: 35px;
+    margin-top: 24px;
     .text {
-      margin-right: 15px;
-      color: var(--sub-text-color-2);
+      margin-right: 12px;
+      color: var(--color-text-muted);
     }
   }
 }
+
 article[itemProp="blogPost"] {
-  border-radius: 6px;
-  // last column no margin
-  &:nth-last-of-type(1) {
-    margin-bottom: 0;
-  }
+  border-radius: var(--radius-lg);
+  &:nth-last-of-type(1),
   &:nth-last-of-type(2) {
     margin-bottom: 0;
   }
diff --git a/src/theme/BlogSidebar/Desktop/styles.module.scss b/src/theme/BlogSidebar/Desktop/styles.module.scss
index 2d45a40cb58..f87605589f5 100644
--- a/src/theme/BlogSidebar/Desktop/styles.module.scss
+++ b/src/theme/BlogSidebar/Desktop/styles.module.scss
@@ -2,67 +2,88 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 10px;
+  margin: 16px 0 24px;
+  flex-wrap: wrap;
+  gap: 16px;
+
   .rightSearch {
     position: relative;
     .searchIcon {
       position: absolute;
       left: 12px;
-      top: 60px;
+      top: 10px;
     }
     input {
-      width: 312px;
-      height: 37px;
-      margin-top: 55px;
-      border-radius: 500px;
-      border: 1px solid rgba(222, 226, 230, 1);
-      padding-left: 52px;
-      font-size: .875rem;
+      width: 280px;
+      max-width: 100%;
+      height: 38px;
+      border-radius: var(--radius-pill);
+      border: 1px solid var(--color-border);
+      padding-left: 40px;
+      padding-right: 16px;
+      font-size: 0.875rem;
+      background-color: var(--color-bg-subtle);
+      color: var(--color-text);
+      transition: border-color var(--motion-fast),
+        background-color var(--motion-fast);
       &::placeholder {
-        text-indent: 52px;
-        font-size: 16px;
+        color: var(--color-text-soft);
+      }
+      &:focus {
+        outline: none;
+        border-color: var(--color-accent);
+        background-color: var(--color-surface);
       }
     }
   }
+
   .sidebar {
     max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
     overflow-y: auto;
     position: sticky;
-    padding-top: 7px;
+    padding-top: 4px;
   }
+
   .sidebarItemTitle {
     display: none;
   }
+
   .sidebarItemList {
     display: flex;
     flex-wrap: wrap;
-    gap: 10px;
-  }
-  .sidebarItemList {
-    display: flex;
+    gap: 8px;
   }
+
   .sidebarItem {
     cursor: pointer;
-    margin-top: 55px;
-    color: var(--sub-text-color-5);
-    padding: 0 20px;
-    height: 40px;
-    line-height: 40px;
-    border-radius: 4px;
+    color: var(--color-text-muted);
+    padding: 6px 14px;
+    height: auto;
+    line-height: 1.4;
+    border-radius: var(--radius-pill);
+    border: 1px solid var(--color-border);
+    background-color: var(--color-bg-subtle);
+    font-size: 0.875rem;
+    transition: background-color var(--motion-fast),
+      color var(--motion-fast),
+      border-color var(--motion-fast);
 
     &:hover,
     &.active {
-      // background-color: var(--ifm-menu-color-background-active);
-      background-color: var(--title-text-color);
-      color: var(--sub-text-color-6);
+      background-color: var(--color-accent);
+      color: var(--brand-black);
+      border-color: var(--color-accent);
     }
   }
 }
+
 html[data-theme="dark"] {
   .sidebarItem {
     &:hover,
     &.active {
-      color: var(--active-color);
+      background-color: var(--color-accent);
+      color: var(--brand-black);
+      border-color: var(--color-accent);
     }
   }
 }
diff --git a/src/theme/Footer/styles.module.scss b/src/theme/Footer/styles.module.scss
index 6cb5966ab01..1daa5557fe6 100644
--- a/src/theme/Footer/styles.module.scss
+++ b/src/theme/Footer/styles.module.scss
@@ -1,137 +1,113 @@
 .wrap {
-  height: 548px;
   position: relative;
-  color: rgba(255, 255, 255, 0.6);
   width: 100%;
   margin: 0 auto;
   background-color: var(--footer-bg-color);
+  color: rgba(255, 255, 255, 0.7);
+  /* Separates the footer from page content — important in dark mode
+   * where both the footer and page background are pure black. */
+  border-top: 1px solid var(--color-border);
 
   .mainWrap {
-    display: flex;
-    justify-content: space-between;
-    padding: 0 168px;
-    margin: 80px auto 0;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    column-gap: 32px;
+    row-gap: 48px;
     max-width: var(--global-main-width);
+    margin: 0 auto;
+    padding: 64px var(--mobile-padding-width);
+    align-items: start;
+
     .linksWrap {
-      display: flex;
-      width: 637px;
-      height: 328px;
-      flex-shrink: 0;
-      justify-content: space-between;
-      .footerLinkTitle {
-        color: #fff;
-        font-weight: 700;
-        line-height: 20px;
-      }
-      .footerLinkItem {
-        line-height: 20px;
-        margin-top: 24px;
-        a {
-          text-decoration: none;
+      display: contents;
+
+      .footerLink {
+        .footerLinkTitle {
+          color: #fff;
+          font-family: var(--font-family-display);
+          font-weight: 700;
+          font-size: 0.9375rem;
+          letter-spacing: 0.02em;
+          margin-bottom: 18px;
         }
-        &:hover {
+        .footerLinkItem {
+          font-size: 0.875rem;
+          line-height: 1.5;
+          margin-bottom: 12px;
           a {
-            text-decoration: underline;
-            color: var(--active-color);
+            color: rgba(255, 255, 255, 0.7);
+            text-decoration: none;
+            transition: color var(--motion-fast);
+            &:hover {
+              color: var(--color-accent);
+              text-decoration: none;
+            }
           }
         }
       }
     }
+
     .logoLinkWrap {
-      margin-left: 212px;
-      width: 214px;
-      height: 108px;
-      flex-shrink: 0;
       .logoWrap {
-        height: 60px;
-        display: flex;
         display: flex;
         align-items: center;
-        justify-content: space-between;
+        margin-bottom: 16px;
         .logo {
-          width: 164px;
-        }
-        .swap {
-          width: 26px;
-          height: 26px;
-          cursor: pointer;
+          width: 160px;
+          height: auto;
         }
       }
       .links {
-        margin-top: 12px;
         display: flex;
-        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: 12px;
         align-items: center;
         .item {
-          fill: #fff;
+          width: 22px;
+          height: 22px;
+          fill: rgba(255, 255, 255, 0.7);
+          transition: fill var(--motion-fast),
+            transform var(--motion-fast);
           &:hover {
-            fill: var(--active-color);
+            fill: var(--color-accent);
+            transform: translateY(-1px);
           }
         }
       }
     }
   }
+
   .copyrightWrap {
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    background-color: rgba(0, 0, 0, 0.25);
     text-align: center;
     width: 100%;
-    background-color: #000;
-    font-size: 12px;
+    font-size: 0.75rem;
+    color: rgba(255, 255, 255, 0.55);
+    padding: 24px var(--mobile-padding-width);
     .copyright {
+      max-width: var(--global-main-width);
       margin: 0 auto;
+      line-height: 1.6;
+      p {
+        margin: 0 0 10px 0;
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
     }
   }
-  
-  @media screen and (max-width: 1440px) {
-    .linksWrap {
-      width: 520px !important;
-    }
 
-    .mainWrap {
-      padding: 0 var(--mobile-padding-width);
-    }
-  }
   @media screen and (max-width: 1024px) {
-    height: auto;
-    display: flex;
-    flex-direction: column;
     .mainWrap {
-      flex-direction: column;
-      margin: 0;
-      .linksWrap {
-        position: static;
-        margin-top: 46px;
-        height: auto;
-        width: auto;
-        display: flex;
-        justify-content: space-between;
-        > div {
-          margin-bottom: 60px;
-        }
-      }
-      .logoLinkWrap {
-        position: static;
-        margin-bottom: 78px;
-        margin-left: 0 !important;
-        .logoWrap {
-          .logo {
-            width: 127px;
-          }
-        }
-      }
-    }
-
-    .copyright {
-      position: static;
-      text-align: center;
-      font-size: 12px;
-      width: 100%;
+      grid-template-columns: 1fr 1fr;
+      row-gap: 40px;
     }
   }
-  @media screen and (max-width: 768px) {
+  @media screen and (max-width: 600px) {
     .mainWrap {
-      .linksWrap {
-        display: none !important;
-      }
+      grid-template-columns: 1fr;
+      padding: 48px var(--mobile-padding-width);
     }
   }
 }
diff --git a/src/theme/MDXPage/index.tsx b/src/theme/MDXPage/index.tsx
index 6200fd44d78..e2b3175e907 100644
--- a/src/theme/MDXPage/index.tsx
+++ b/src/theme/MDXPage/index.tsx
@@ -1,11 +1,8 @@
-import { useLocation } from "@docusaurus/router";
 import {
   HtmlClassNameProvider,
   ThemeClassNames,
 } from "@docusaurus/theme-common";
-import useBaseUrl from "@docusaurus/useBaseUrl";
 import ColorCard from "@site/src/components/common/ColorCard";
-import ColorCardStyle from "@site/src/components/common/ColorCard/styles.module.scss";
 import CommonLayout from "@site/src/components/common/Layout";
 import MDXContent from "@theme/MDXContent";
 import type { Props } from "@theme/MDXPage";
@@ -16,10 +13,6 @@ import styles from "./styles.module.css";
 
 export default function MDXPage(props: Props): JSX.Element {
   const { content: MDXPageContent } = props;
-  const location = useLocation();
-  const pathLen = location.pathname.split("/").filter((item) => {
-    return item != "";
-  }).length;
 
   const {
     metadata: { frontMatter, unlisted, description, title },
@@ -28,6 +21,9 @@ export default function MDXPage(props: Props): JSX.Element {
   const { wrapperClassName, hide_table_of_contents: hideTableOfContents } =
     frontMatter;
 
+  const showTOC =
+    !hideTableOfContents && MDXPageContent.toc && MDXPageContent.toc.length > 0;
+
   return (
     
       
-        
+        
 
         

-          

+          

             {unlisted && }
-            

+            

               
                 
               
             

           

 
-          {!hideTableOfContents && MDXPageContent.toc.length > 0 && (
-            

+          {showTOC && (
+            

                item.type === "search");
@@ -63,7 +61,7 @@ export default function NavbarContent(): JSX.Element {
         // TODO stop hardcoding items?
         <>
           

-            {isMobile && }
+            
             
           

           
diff --git a/static/img/back_home-light.png b/static/img/back_home-light.png
deleted file mode 100644
index 5dd91f1c4e8..00000000000
Binary files a/static/img/back_home-light.png and /dev/null differ
diff --git a/static/img/back_home-light.svg b/static/img/back_home-light.svg
index c63fa6719c8..ba8831a3aba 100644
--- a/static/img/back_home-light.svg
+++ b/static/img/back_home-light.svg
@@ -1,3 +1,3 @@
 
-
+
 
diff --git a/static/img/bootcamp/cbdb-sandbox.png b/static/img/bootcamp/cbdb-sandbox.png
deleted file mode 100644
index 492e818a0a1..00000000000
Binary files a/static/img/bootcamp/cbdb-sandbox.png and /dev/null differ
diff --git a/static/img/bootcamp/cloudberrydb_logo.png b/static/img/bootcamp/cloudberrydb_logo.png
deleted file mode 100644
index a874b602aa7..00000000000
Binary files a/static/img/bootcamp/cloudberrydb_logo.png and /dev/null differ
diff --git a/static/img/cbdb-sandbox.png b/static/img/cbdb-sandbox.png
deleted file mode 100644
index 492e818a0a1..00000000000
Binary files a/static/img/cbdb-sandbox.png and /dev/null differ
diff --git a/static/img/celebrate.png b/static/img/celebrate.png
deleted file mode 100644
index 0c265b7d1ae..00000000000
Binary files a/static/img/celebrate.png and /dev/null differ
diff --git a/static/img/docs/add-light.svg b/static/img/docs/add-light.svg
deleted file mode 100644
index d4037c1d305..00000000000
--- a/static/img/docs/add-light.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/static/img/docs/add-no-active.svg b/static/img/docs/add-no-active.svg
deleted file mode 100644
index 0ce6651bcbd..00000000000
--- a/static/img/docs/add-no-active.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
diff --git a/static/img/docs/add.svg b/static/img/docs/add.svg
deleted file mode 100644
index 1f4d9503abb..00000000000
--- a/static/img/docs/add.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
diff --git a/static/img/docs/hover-add-active.svg b/static/img/docs/hover-add-active.svg
deleted file mode 100644
index 3a317c29d26..00000000000
--- a/static/img/docs/hover-add-active.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/static/img/docs/hover-sub-active.svg b/static/img/docs/hover-sub-active.svg
deleted file mode 100644
index 655e19d3510..00000000000
--- a/static/img/docs/hover-sub-active.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
diff --git a/static/img/docs/sub-light.svg b/static/img/docs/sub-light.svg
deleted file mode 100644
index b937ec7ff2a..00000000000
--- a/static/img/docs/sub-light.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
diff --git a/static/img/docs/sub-no-active.svg b/static/img/docs/sub-no-active.svg
deleted file mode 100644
index f4f2783f9ed..00000000000
--- a/static/img/docs/sub-no-active.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
diff --git a/static/img/docs/sub.svg b/static/img/docs/sub.svg
deleted file mode 100644
index d04409c419d..00000000000
--- a/static/img/docs/sub.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
diff --git a/static/img/en_zh.png b/static/img/en_zh.png
deleted file mode 100644
index 31f5229bb38..00000000000
Binary files a/static/img/en_zh.png and /dev/null differ
diff --git a/static/img/home/cbdb-circle.png b/static/img/home/cbdb-circle.png
deleted file mode 100644
index 16eaa68697f..00000000000
Binary files a/static/img/home/cbdb-circle.png and /dev/null differ
diff --git a/static/img/home/feature/cuwmt-light.png b/static/img/home/feature/cuwmt-light.png
deleted file mode 100644
index 40d057801ab..00000000000
Binary files a/static/img/home/feature/cuwmt-light.png and /dev/null differ
diff --git a/static/img/home/feature/cuwmt-light.svg b/static/img/home/feature/cuwmt-light.svg
deleted file mode 100644
index ec98a589f19..00000000000
--- a/static/img/home/feature/cuwmt-light.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/static/img/home/feature/cuwmt.svg b/static/img/home/feature/cuwmt.svg
deleted file mode 100644
index be7db20393a..00000000000
--- a/static/img/home/feature/cuwmt.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/static/img/home/feature/hesc-light.png b/static/img/home/feature/hesc-light.png
deleted file mode 100644
index 362615976b0..00000000000
Binary files a/static/img/home/feature/hesc-light.png and /dev/null differ
diff --git a/static/img/home/feature/hesc-light.svg b/static/img/home/feature/hesc-light.svg
deleted file mode 100644
index d78e056a975..00000000000
--- a/static/img/home/feature/hesc-light.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-
-
-
-
-
-
-
-
diff --git a/static/img/home/feature/hesc.svg b/static/img/home/feature/hesc.svg
deleted file mode 100644
index c9c90bcf40c..00000000000
--- a/static/img/home/feature/hesc.svg
+++ /dev/null
@@ -1,24 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/static/img/home/feature/mef-light-hover.svg b/static/img/home/feature/mef-light-hover.svg
deleted file mode 100644
index 3e5db633aa4..00000000000
--- a/static/img/home/feature/mef-light-hover.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/static/img/home/feature/mef-light.png b/static/img/home/feature/mef-light.png
deleted file mode 100644
index 049577563eb..00000000000
Binary files a/static/img/home/feature/mef-light.png and /dev/null differ
diff --git a/static/img/home/feature/muc-light-hover.svg b/static/img/home/feature/muc-light-hover.svg
deleted file mode 100644
index 1a369cdfaec..00000000000
--- a/static/img/home/feature/muc-light-hover.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/static/img/home/feature/muc-light.png b/static/img/home/feature/muc-light.png
deleted file mode 100644
index f02a3b28e05..00000000000
Binary files a/static/img/home/feature/muc-light.png and /dev/null differ
diff --git a/static/img/home/feature/p14i-light.png b/static/img/home/feature/p14i-light.png
deleted file mode 100644
index 1cb6ccfe2a5..00000000000
Binary files a/static/img/home/feature/p14i-light.png and /dev/null differ
diff --git a/static/img/home/feature/p14i-light.svg b/static/img/home/feature/p14i-light.svg
deleted file mode 100644
index bb9d813264f..00000000000
--- a/static/img/home/feature/p14i-light.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
-
-
-
-
diff --git a/static/img/home/feature/p14i.svg b/static/img/home/feature/p14i.svg
deleted file mode 100644
index 6e07ae7ee9d..00000000000
--- a/static/img/home/feature/p14i.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/static/img/home/feature/sac-light.png b/static/img/home/feature/sac-light.png
deleted file mode 100644
index 6046d7b2c8f..00000000000
Binary files a/static/img/home/feature/sac-light.png and /dev/null differ
diff --git a/static/img/home/feature/sac-light.svg b/static/img/home/feature/sac-light.svg
deleted file mode 100644
index afd66804037..00000000000
--- a/static/img/home/feature/sac-light.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/static/img/home/feature/sac.svg b/static/img/home/feature/sac.svg
deleted file mode 100644
index 488b4101d2b..00000000000
--- a/static/img/home/feature/sac.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/static/img/home/grid-left-bottom.svg b/static/img/home/grid-left-bottom.svg
deleted file mode 100644
index 010b754c6b3..00000000000
--- a/static/img/home/grid-left-bottom.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-
-
-
-
-
-
-
diff --git a/static/img/home/grid-right-bottom.png b/static/img/home/grid-right-bottom.png
deleted file mode 100644
index 55d821d6728..00000000000
Binary files a/static/img/home/grid-right-bottom.png and /dev/null differ
diff --git a/static/img/home/hcard/bline.png b/static/img/home/hcard/bline.png
deleted file mode 100644
index 73b0be3d09e..00000000000
Binary files a/static/img/home/hcard/bline.png and /dev/null differ
diff --git a/static/img/home/light-mode.png b/static/img/home/light-mode.png
deleted file mode 100644
index 49546cb7299..00000000000
Binary files a/static/img/home/light-mode.png and /dev/null differ
diff --git a/static/img/home/links/discord.svg b/static/img/home/links/discord.svg
index 193ba7abdf8..0570000a7a7 100644
--- a/static/img/home/links/discord.svg
+++ b/static/img/home/links/discord.svg
@@ -1,10 +1,4 @@
-
-
-
-
-
-
-
-
-
+
+  
+  
 
diff --git a/static/img/home/links/linked.svg b/static/img/home/links/linked.svg
index ee65fb11ab1..d56a9eb9997 100644
--- a/static/img/home/links/linked.svg
+++ b/static/img/home/links/linked.svg
@@ -1,33 +1,4 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+  
+  
 
diff --git a/static/img/home/links/slack.svg b/static/img/home/links/slack.svg
index 87232565797..8e7a0d2e049 100644
--- a/static/img/home/links/slack.svg
+++ b/static/img/home/links/slack.svg
@@ -1,18 +1,7 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+  
+  
+  
+  
+  
 
diff --git a/static/img/home/links/twitter.svg b/static/img/home/links/twitter.svg
index 6bdc1e1ee60..5c76618fe4f 100644
--- a/static/img/home/links/twitter.svg
+++ b/static/img/home/links/twitter.svg
@@ -1,10 +1,4 @@
-
-
-
-
-
-
-
-
-
+
+  
+  
 
diff --git a/static/img/home/links/wechat.svg b/static/img/home/links/wechat.svg
index a2a0a6f32bb..77726b378ed 100644
--- a/static/img/home/links/wechat.svg
+++ b/static/img/home/links/wechat.svg
@@ -1,20 +1,5 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+  
+  
+  
 
diff --git a/static/img/home/links/youtube.svg b/static/img/home/links/youtube.svg
index 657904de604..43b1a969c53 100644
--- a/static/img/home/links/youtube.svg
+++ b/static/img/home/links/youtube.svg
@@ -1,15 +1,4 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+  
+  
 
diff --git a/static/img/home/os.png b/static/img/home/os.png
deleted file mode 100644
index f7255a68612..00000000000
Binary files a/static/img/home/os.png and /dev/null differ
diff --git a/static/img/home/our-roadmap/dot-arrow.svg b/static/img/home/our-roadmap/dot-arrow.svg
deleted file mode 100644
index 8aae90c8550..00000000000
--- a/static/img/home/our-roadmap/dot-arrow.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
diff --git a/static/img/home/pc.png b/static/img/home/pc.png
deleted file mode 100644
index 7133679de6a..00000000000
Binary files a/static/img/home/pc.png and /dev/null differ
diff --git a/static/img/home/pr.png b/static/img/home/pr.png
deleted file mode 100644
index 8943b455994..00000000000
Binary files a/static/img/home/pr.png and /dev/null differ
diff --git a/static/img/home/try-it-out/circle.svg b/static/img/home/try-it-out/circle.svg
deleted file mode 100644
index c247bf5fd1b..00000000000
--- a/static/img/home/try-it-out/circle.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
diff --git a/static/img/home/try-it-out/docker.svg b/static/img/home/try-it-out/docker.svg
deleted file mode 100644
index 9887f0e6cb6..00000000000
--- a/static/img/home/try-it-out/docker.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
diff --git a/static/img/home/try-it-out/line-l.svg b/static/img/home/try-it-out/line-l.svg
deleted file mode 100644
index df989d23850..00000000000
--- a/static/img/home/try-it-out/line-l.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
diff --git a/static/img/home/try-it-out/line-r.svg b/static/img/home/try-it-out/line-r.svg
deleted file mode 100644
index e4fab45d4e9..00000000000
--- a/static/img/home/try-it-out/line-r.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
diff --git a/static/img/home/try-it-out/system.svg b/static/img/home/try-it-out/system.svg
deleted file mode 100644
index 4d9a5db1575..00000000000
--- a/static/img/home/try-it-out/system.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
diff --git a/static/img/home/wcd.png b/static/img/home/wcd.png
deleted file mode 100644
index 83c60c9ccad..00000000000
Binary files a/static/img/home/wcd.png and /dev/null differ
diff --git a/static/img/home/why-cbdb.png b/static/img/home/why-cbdb.png
deleted file mode 100644
index 1233e5b90f1..00000000000
Binary files a/static/img/home/why-cbdb.png and /dev/null differ
diff --git a/static/img/home_back-light.png b/static/img/home_back-light.png
deleted file mode 100644
index 5dd91f1c4e8..00000000000
Binary files a/static/img/home_back-light.png and /dev/null differ
diff --git a/static/img/line-light.svg b/static/img/line-light.svg
deleted file mode 100644
index b3b48ae3e41..00000000000
--- a/static/img/line-light.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
-
-
-
-
diff --git a/static/img/logo.svg b/static/img/logo.svg
deleted file mode 100644
index ad44e80d115..00000000000
--- a/static/img/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/static/img/mdx-page/header-bg.png b/static/img/mdx-page/header-bg.png
deleted file mode 100644
index c188f021e46..00000000000
Binary files a/static/img/mdx-page/header-bg.png and /dev/null differ
diff --git a/static/img/proposal-life.png b/static/img/proposal-life.png
deleted file mode 100644
index 2345338b24c..00000000000
Binary files a/static/img/proposal-life.png and /dev/null differ
diff --git a/static/img/rectangle.png b/static/img/rectangle.png
deleted file mode 100644
index c8ffb8e0f70..00000000000
Binary files a/static/img/rectangle.png and /dev/null differ
diff --git a/static/img/vertical-line.png b/static/img/vertical-line.png
deleted file mode 100644
index 375f0c41f54..00000000000
Binary files a/static/img/vertical-line.png and /dev/null differ