From 8eadbe1ba24744b1c7d9a886f0c257aab011e037 Mon Sep 17 00:00:00 2001 From: punkwalker Date: Wed, 30 Jul 2025 16:46:03 -0700 Subject: [PATCH 1/3] Homepage revamp Signed-off-by: punkwalker --- docusaurus.config.js | 7 +- src/components/CNOENews/index.js | 166 +- src/components/CNOENews/styles.module.css | 364 +- src/components/InformationCNOE/index.js | 21 - .../InformationCNOE/styles.module.css | 31 - src/components/MissionVision/index.js | 70 +- .../MissionVision/styles.module.css | 301 +- src/components/ValueProposition/index.js | 76 +- .../ValueProposition/styles.module.css | 253 +- src/css/custom.css | 3314 ++++++++++++++++- src/css/dark-mode-fixes.css | 679 ++++ src/css/homepage-fix.css | 106 + src/pages/index.js | 341 +- src/pages/index.module.css | 528 ++- src/theme/ColorModeToggle/index.js | 113 + src/theme/ColorModeToggle/styles.module.css | 105 + src/utils/scrollAnimations.js | 121 + static/img/kubernetes.svg | 1 + static/img/logo-dark-no-name.png | Bin 0 -> 35658 bytes static/img/logo-no-name.png | Bin 0 -> 31805 bytes 20 files changed, 6220 insertions(+), 377 deletions(-) delete mode 100644 src/components/InformationCNOE/index.js delete mode 100644 src/components/InformationCNOE/styles.module.css create mode 100644 src/css/dark-mode-fixes.css create mode 100644 src/css/homepage-fix.css create mode 100644 src/theme/ColorModeToggle/index.js create mode 100644 src/theme/ColorModeToggle/styles.module.css create mode 100644 src/utils/scrollAnimations.js create mode 100644 static/img/kubernetes.svg create mode 100644 static/img/logo-dark-no-name.png create mode 100644 static/img/logo-no-name.png diff --git a/docusaurus.config.js b/docusaurus.config.js index 9551d8239..7dc6470bc 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -90,11 +90,16 @@ const config = { themeConfig: /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ ({ + colorMode: { + defaultMode: 'light', + disableSwitch: false, + respectPrefersColorScheme: true, + }, navbar: { title: '', logo: { alt: 'CNOE Logo', - src: 'img/logo.png', + src: 'img/logo-no-name.png', }, items: [ { diff --git a/src/components/CNOENews/index.js b/src/components/CNOENews/index.js index d1b8addfa..d2c0e2d46 100644 --- a/src/components/CNOENews/index.js +++ b/src/components/CNOENews/index.js @@ -5,23 +5,48 @@ import yaml from 'js-yaml'; import React from 'react'; import AliceCarousel from 'react-alice-carousel'; import 'react-alice-carousel/lib/alice-carousel.css'; +import clsx from 'clsx'; import styles from './styles.module.css'; -const { useState, useEffect } = React; +const { useState, useEffect, useRef } = React; function News({title, description, imageSrc, linkTo, date, presentationLink}){ return( -
- - - -

- {title}
- {date && {date}} -

-

{description}
- {presentationLink && Presentation Link}

- +
+ +
+ {title} +
+
+ +
+
+

{title}

+ {date && ( + {date} + )} +
+ +

{description}

+ + {presentationLink && ( + + )} +
+
); } @@ -31,12 +56,14 @@ function News({title, description, imageSrc, linkTo, date, presentationLink}){ export default function CNOENews() { const { siteConfig } = useDocusaurusContext(); const [newsList, setNewsList] = useState([]); + const [isVisible, setIsVisible] = useState(false); + const containerRef = useRef(null); useEffect(() => { // Function to fetch and parse YAML data const fetchYAMLData = async () => { try { - const response = await axios.get('/news/data.yaml'); // Adjust the path to your YAML file + const response = await axios.get('/news/data.yaml'); const yamlData = response.data; const parsedData = yaml.load(yamlData); setNewsList(parsedData); @@ -45,48 +72,97 @@ export default function CNOENews() { } }; - // Call the function to fetch YAML data fetchYAMLData(); }, []); - const items = newsList.map((news, index) => ( - + useEffect(() => { + // Initialize scroll animation + if (typeof window !== 'undefined' && containerRef.current) { + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + setIsVisible(true); + observer.unobserve(entry.target); + } + }); + }, + { threshold: 0.2 } + ); + + observer.observe(containerRef.current); + + return () => { + if (containerRef.current) { + observer.unobserve(containerRef.current); + } + }; + } + }, []); + + // Randomize the news items + const shuffleArray = (array) => { + const shuffled = [...array]; + for (let i = shuffled.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]; + } + return shuffled; + }; + + const items = shuffleArray(newsList).map((news, index) => ( + )); const responsive = { - 0: { items: 3 }, - 568: { items: 3 }, + 0: { items: 1 }, + 568: { items: 2 }, 1024: { items: 3 }, }; return ( -
-

In the News

- ► Add your talk! - - - - - - - -
+
+
+
+

In the News

+

+ Stay updated with the latest CNOE community talks, presentations, and insights +

+ + ► Add your talk! + +
+ +
+ +
+
+
); } diff --git a/src/components/CNOENews/styles.module.css b/src/components/CNOENews/styles.module.css index 29b0847d4..157ba81b9 100644 --- a/src/components/CNOENews/styles.module.css +++ b/src/components/CNOENews/styles.module.css @@ -1,33 +1,345 @@ -.news { - display: flex; - align-items: center; - padding: 2rem 0; - width: 100%; - margin-bottom: 24px; -} -.NewsCard { - display: flex; - flex-direction: column; - width: "120px"; - height: "500px"; - padding: 16px; - border-radius: 5px; - border-color: var(--ifm-color-neutral-lightest); - margin-right: 24px; - /* box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.25); */ - color: var(--ifm-color-neutral-darker); +/* Modern CNOENews Component Styles */ +.newsSection { + padding: 5rem 0; + background: linear-gradient(135deg, + var(--ifm-primary-50) 0%, + var(--ifm-primary-100) 25%, + var(--ifm-neutral-50) 50%, + var(--ifm-primary-100) 75%, + var(--ifm-primary-50) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; + position: relative; + overflow: hidden; + opacity: 0; + transform: translateY(30px); + transition: all 0.8s var(--ifm-easing-ease); +} + +[data-theme="dark"] .newsSection { + background: linear-gradient(135deg, + var(--ifm-neutral-900) 0%, + var(--ifm-primary-900) 25%, + var(--ifm-neutral-800) 50%, + var(--ifm-primary-800) 75%, + var(--ifm-neutral-900) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; +} + +.newsSection.newsSectionVisible { + opacity: 1; + transform: translateY(0); +} + +.newsSection::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, transparent 0%, var(--ifm-primary-50) 30%, transparent 70%); + opacity: 0.3; +} + +[data-theme="dark"] .newsSection::before { + background: linear-gradient(135deg, transparent 0%, var(--ifm-primary-900) 30%, transparent 70%); + opacity: 0.2; +} + +/* News Header */ +.newsHeader { + text-align: center; + margin-bottom: 3rem; + position: relative; + z-index: 2; +} + +.newsTitle { + font-size: var(--ifm-font-size-3xl); + font-weight: 700; + color: var(--ifm-neutral-900); + margin-bottom: 1rem; + letter-spacing: -0.02em; +} + +[data-theme="dark"] .newsTitle { + color: var(--ifm-neutral-100) !important; +} + +.newsSubtitle { + font-size: var(--ifm-font-size-lg); + color: var(--ifm-neutral-600); + max-width: 600px; + margin: 0 auto 1.5rem; + line-height: 1.6; +} + +[data-theme="dark"] .newsSubtitle { + color: var(--ifm-neutral-400) !important; } .addTalkLink { - display: block; - align: center; - text-align: center; - margin-top: -45px; /* Adjust this value as needed for less space */ - margin-bottom: 20px; /* Adjust this value as needed for less space */ - color: var(--ifm-color-primary); /* Adjust this to your preferred color */ - text-decoration: none; /* Remove underline if preferred */ + display: inline-flex; + align-items: center; + color: var(--ifm-primary); + text-decoration: none; + font-weight: 600; + font-size: var(--ifm-font-size-base); + padding: 0.5rem 1rem; + border-radius: 6px; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); + background: rgba(0, 86, 140, 0.05); + border: 1px solid rgba(0, 86, 140, 0.1); +} + +[data-theme="dark"] .addTalkLink { + color: var(--ifm-primary-300) !important; + background: rgba(77, 166, 255, 0.05) !important; + border: 1px solid rgba(77, 166, 255, 0.1) !important; } .addTalkLink:hover { - text-decoration: underline; /* Add underline on hover if preferred */ + background: rgba(0, 86, 140, 0.1); + border-color: var(--ifm-primary); + transform: translateY(-2px); + box-shadow: var(--ifm-shadow-md); +} + +[data-theme="dark"] .addTalkLink:hover { + background: rgba(77, 166, 255, 0.1) !important; + border-color: var(--ifm-primary-300) !important; +} + +/* News Carousel */ +.newsCarousel { + position: relative; + z-index: 2; +} + +/* News Cards */ +.newsCard { + margin: 0 0.5rem; + height: 100%; +} + +.newsCardLink { + display: block; + height: 100%; + text-decoration: none; + color: inherit; + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 16px; + overflow: hidden; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); + box-shadow: var(--ifm-shadow-lg); + position: relative; +} + +[data-theme="dark"] .newsCardLink { + background: rgba(30, 41, 59, 0.9) !important; + border: 1px solid rgba(71, 85, 105, 0.3) !important; +} + +.newsCardLink:hover { + transform: translateY(-8px); + box-shadow: var(--ifm-shadow-2xl); + border-color: var(--ifm-primary-200); + text-decoration: none; + color: inherit; +} + +[data-theme="dark"] .newsCardLink:hover { + border-color: var(--ifm-primary-600) !important; +} + +/* News Image */ +.newsImageContainer { + position: relative; + height: 200px; + overflow: hidden; +} + +.newsImage { + width: 100%; + height: 100%; + object-fit: cover; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); +} + +.newsImageOverlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.1) 100%); + opacity: 0; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); +} + +.newsCardLink:hover .newsImage { + transform: scale(1.05); +} + +.newsCardLink:hover .newsImageOverlay { + opacity: 1; +} + +/* News Content */ +.newsContent { + padding: 1.5rem; + height: calc(100% - 200px); + display: flex; + flex-direction: column; +} + +.newsHeader { + margin-bottom: 1rem; +} + +.newsTitle { + font-size: var(--ifm-font-size-lg); + font-weight: 600; + color: var(--ifm-neutral-900); + margin-bottom: 0.5rem; + line-height: 1.4; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +[data-theme="dark"] .newsTitle { + color: var(--ifm-neutral-100) !important; +} + +.newsDate { + font-size: var(--ifm-font-size-sm); + color: var(--ifm-neutral-500); + font-weight: 500; +} + +[data-theme="dark"] .newsDate { + color: var(--ifm-neutral-400) !important; +} + +.newsDescription { + font-size: var(--ifm-font-size-sm); + line-height: 1.6; + color: var(--ifm-neutral-700); + margin-bottom: 1rem; + flex-grow: 1; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +[data-theme="dark"] .newsDescription { + color: var(--ifm-neutral-300) !important; +} + +/* News Links */ +.newsLinks { + margin-top: auto; +} + +.presentationLink { + color: var(--ifm-primary); + text-decoration: none; + font-weight: 600; + font-size: var(--ifm-font-size-sm); + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); +} + +[data-theme="dark"] .presentationLink { + color: var(--ifm-primary-300) !important; +} + +.presentationLink:hover { + color: var(--ifm-primary-600); + text-decoration: underline; +} + +[data-theme="dark"] .presentationLink:hover { + color: var(--ifm-primary-200) !important; +} + +/* Alice Carousel Customization */ +.newsCarousel .alice-carousel { + padding: 1rem 0; +} + +.newsCarousel .alice-carousel__stage { + padding: 0 1rem; +} + +.newsCarousel .alice-carousel__prev-btn, +.newsCarousel .alice-carousel__next-btn { + background: var(--ifm-primary); + border-radius: 50%; + width: 40px; + height: 40px; + color: white; + border: none; + box-shadow: var(--ifm-shadow-lg); + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); +} + +.newsCarousel .alice-carousel__prev-btn:hover, +.newsCarousel .alice-carousel__next-btn:hover { + background: var(--ifm-primary-600); + transform: scale(1.1); + box-shadow: var(--ifm-shadow-xl); +} + +/* Mobile Responsive */ +@media (max-width: 996px) { + .newsSection { + padding: 3rem 0; + } + + .newsTitle { + font-size: var(--ifm-font-size-2xl); + } + + .newsSubtitle { + font-size: var(--ifm-font-size-base); + } + + .newsImageContainer { + height: 160px; + } + + .newsContent { + padding: 1rem; + height: calc(100% - 160px); + } +} + +@media (max-width: 576px) { + .newsHeader { + margin-bottom: 2rem; + } + + .newsTitle { + font-size: var(--ifm-font-size-xl); + } + + .newsCard { + margin: 0 0.25rem; + } + + .newsImageContainer { + height: 140px; + } + + .newsContent { + height: calc(100% - 140px); + } } diff --git a/src/components/InformationCNOE/index.js b/src/components/InformationCNOE/index.js deleted file mode 100644 index 708542d92..000000000 --- a/src/components/InformationCNOE/index.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import clsx from 'clsx'; -import styles from './styles.module.css'; -import Link from "@docusaurus/Link"; -import HelpIcon from '@mui/icons-material/Help'; - -const CNOESection = () => { - return ( -
-
-
-

- CNOE is an open community collaboration with the goal of helping facilitate platform engineering through the sharing of guidance, tooling, and internal developer platform (IDP) reference architectures. -

-
-
-
- ); -}; - -export default CNOESection; \ No newline at end of file diff --git a/src/components/InformationCNOE/styles.module.css b/src/components/InformationCNOE/styles.module.css deleted file mode 100644 index dffcdc70f..000000000 --- a/src/components/InformationCNOE/styles.module.css +++ /dev/null @@ -1,31 +0,0 @@ -.cnoeSection { - padding: 2rem 0; -} - -.container { - max-width: 1200px; - margin: 0 auto; - padding: 2rem 0; -} - -.content { - text-align: center; -} - -.title { - font-size: 38px; - text-align: left; -} - -.description { - font-size: 30px; - text-align: left; -} - -/* index.module.css */ -.learnMoreButton { - background-color: var(--ifm-color-neutral-lighter); - padding: 10px 20px; - border: none; - border-radius: 4px; -} diff --git a/src/components/MissionVision/index.js b/src/components/MissionVision/index.js index b9ea61d31..a78143499 100644 --- a/src/components/MissionVision/index.js +++ b/src/components/MissionVision/index.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useRef } from 'react'; import clsx from 'clsx'; import styles from './styles.module.css'; @@ -8,7 +8,7 @@ const FeatureList = [ Svg: require('@site/static/img/mission.svg').default, description: ( <> - CNOE aims at helping platform engineers build their IDPs faster and in a more secure way with best practices built in + CNOE aims at helping platform engineers build their IDPs faster and in a more secure way with best practices built in ), }, @@ -17,34 +17,72 @@ const FeatureList = [ Svg: require('@site/static/img/vision.svg').default, description: ( <> - CNOE strives to be the goto framework for leading software companies - to build their cloud-native internal developer platform + CNOE strives to be the goto framework for leading software companies + to build their cloud-native internal developer platform ), }, ]; -function Feature({Svg, title, description}) { +function Feature({Svg, title, description, index, isVisible}) { return ( -
-
- -
-
-

{title}

-

{description}

-
+
+
+
+
+ +
+
+
+
+

{title}

+

{description}

+
+
); } export default function MissionVision() { + const containerRef = useRef(null); + const [isVisible, setIsVisible] = React.useState(false); + + useEffect(() => { + if (typeof window !== 'undefined' && containerRef.current) { + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + setIsVisible(true); + observer.unobserve(entry.target); + } + }); + }, + { threshold: 0.2 } + ); + + observer.observe(containerRef.current); + + return () => { + if (containerRef.current) { + observer.unobserve(containerRef.current); + } + }; + } + }, []); + return (
-
-
+
+
+

Our Purpose

+

+ Driving the future of internal developer platforms through community collaboration +

+
+
{FeatureList.map((props, idx) => ( - + ))}
diff --git a/src/components/MissionVision/styles.module.css b/src/components/MissionVision/styles.module.css index d4d819a9e..585706860 100644 --- a/src/components/MissionVision/styles.module.css +++ b/src/components/MissionVision/styles.module.css @@ -1,19 +1,300 @@ +/* Modern MissionVision Component Styles */ .features { + padding: 5rem 0; + background: linear-gradient(135deg, + var(--ifm-primary-50) 0%, + var(--ifm-primary-100) 25%, + var(--ifm-neutral-50) 50%, + var(--ifm-primary-100) 75%, + var(--ifm-primary-50) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; + position: relative; + overflow: hidden; +} + +[data-theme="dark"] .features { + background: linear-gradient(135deg, + var(--ifm-neutral-900) 0%, + var(--ifm-primary-900) 25%, + var(--ifm-neutral-800) 50%, + var(--ifm-primary-800) 75%, + var(--ifm-neutral-900) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; +} + +.features::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, transparent 0%, var(--ifm-primary-50) 50%, transparent 100%); + opacity: 0.3; +} + +[data-theme="dark"] .features::before { + background: linear-gradient(135deg, transparent 0%, var(--ifm-primary-900) 50%, transparent 100%); + opacity: 0.2; +} + +/* Section Header */ +.sectionHeader { + text-align: center; + margin-bottom: 4rem; + position: relative; + z-index: 2; +} + +.sectionTitle { + font-size: var(--ifm-font-size-4xl); + font-weight: 700; + color: var(--ifm-neutral-900); + margin-bottom: 1rem; + letter-spacing: -0.02em; +} + +[data-theme="dark"] .sectionTitle { + color: var(--ifm-neutral-100) !important; +} + +.sectionSubtitle { + font-size: var(--ifm-font-size-xl); + color: var(--ifm-neutral-600); + max-width: 600px; + margin: 0 auto; + line-height: 1.6; +} + +[data-theme="dark"] .sectionSubtitle { + color: var(--ifm-neutral-400) !important; +} + +/* Mission Vision Grid */ +.missionVisionGrid { + display: grid; + grid-template-columns: 1fr; + gap: 3rem; + max-width: 1000px; + margin: 0 auto; + position: relative; + z-index: 2; +} + +@media (min-width: 768px) { + .missionVisionGrid { + grid-template-columns: 1fr 1fr; + gap: 4rem; + } +} + +/* Mission Vision Items */ +.missionVisionItem { + opacity: 0; + transform: translateY(40px); + transition: all 0.8s var(--ifm-easing-ease); +} + +.missionVisionItem:nth-child(1) { + transition-delay: 0.2s; +} + +.missionVisionItem:nth-child(2) { + transition-delay: 0.4s; +} + +.missionVisionItem.visible { + opacity: 1; + transform: translateY(0); +} + +.missionVisionCard { + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 20px; + padding: 3rem 2.5rem; + height: 100%; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); + box-shadow: var(--ifm-shadow-lg); + position: relative; + overflow: hidden; +} + +[data-theme="dark"] .missionVisionCard { + background: rgba(30, 41, 59, 0.9) !important; + border: 1px solid rgba(71, 85, 105, 0.3) !important; +} + +.missionVisionCard:hover { + transform: translateY(-8px); + box-shadow: var(--ifm-shadow-2xl); + border-color: var(--ifm-primary-200); +} + +[data-theme="dark"] .missionVisionCard:hover { + border-color: var(--ifm-primary-600) !important; +} + +.missionVisionCard::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 6px; + background: linear-gradient(90deg, var(--ifm-primary) 0%, var(--ifm-accent) 100%); + opacity: 0; + transition: opacity var(--ifm-duration-normal) var(--ifm-easing-ease); +} + +.missionVisionCard:hover::before { + opacity: 1; +} + +/* Icon Section */ +.iconSection { + margin-bottom: 2rem; display: flex; - align-items: center; - padding: 4rem 0; - width: 100%; - margin-top: 60px; + justify-content: center; +} + +.iconContainer { + position: relative; + display: inline-block; } .featureSvg { - /* color: var(--ifm-color-primary); */ - height: 96px; - width: 96px; + height: 80px; + width: 80px; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); + filter: drop-shadow(0 4px 8px rgba(0, 86, 140, 0.1)); +} + +.iconGlow { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 120px; + height: 120px; + background: radial-gradient(circle, rgba(0, 86, 140, 0.1) 0%, transparent 70%); + border-radius: 50%; + opacity: 0; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); +} + +.missionVisionCard:hover .featureSvg { + transform: scale(1.1); + filter: drop-shadow(0 8px 16px rgba(0, 86, 140, 0.2)); } -.missionBg { - padding: 24px; + +.missionVisionCard:hover .iconGlow { + opacity: 1; + transform: translate(-50%, -50%) scale(1.2); +} + +/* Content Section */ +.contentSection { + text-align: center; +} + +.missionVisionTitle { + font-size: var(--ifm-font-size-2xl); + font-weight: 700; + color: var(--ifm-neutral-900); + margin-bottom: 1.5rem; + letter-spacing: 0.05em; + text-transform: uppercase; + position: relative; +} + +[data-theme="dark"] .missionVisionTitle { + color: var(--ifm-neutral-100) !important; +} + +.missionVisionTitle::after { + content: ''; + position: absolute; + bottom: -0.5rem; + left: 50%; + transform: translateX(-50%); + width: 60px; + height: 3px; + background: linear-gradient(90deg, var(--ifm-primary) 0%, var(--ifm-accent) 100%); + border-radius: 2px; } -.missionDesc { + +.missionVisionDescription { + font-size: var(--ifm-font-size-lg); + line-height: 1.7; + color: var(--ifm-neutral-700); + margin: 0; max-width: 400px; + margin: 0 auto; +} + +[data-theme="dark"] .missionVisionDescription { + color: var(--ifm-neutral-300) !important; +} + +/* Mobile Responsive */ +@media (max-width: 996px) { + .features { + padding: 3rem 0; + } + + .sectionTitle { + font-size: var(--ifm-font-size-3xl); + } + + .sectionSubtitle { + font-size: var(--ifm-font-size-lg); + } + + .missionVisionGrid { + gap: 2rem; + } + + .missionVisionCard { + padding: 2rem 1.5rem; + } + + .featureSvg { + height: 64px; + width: 64px; + } + + .missionVisionTitle { + font-size: var(--ifm-font-size-xl); + } + + .missionVisionDescription { + font-size: var(--ifm-font-size-base); + } +} + +@media (max-width: 576px) { + .sectionHeader { + margin-bottom: 2rem; + } + + .sectionTitle { + font-size: var(--ifm-font-size-2xl); + } + + .missionVisionCard { + padding: 1.5rem 1rem; + } + + .missionVisionTitle { + font-size: var(--ifm-font-size-lg); + } + + .missionVisionDescription { + font-size: var(--ifm-font-size-sm); + } } \ No newline at end of file diff --git a/src/components/ValueProposition/index.js b/src/components/ValueProposition/index.js index 427984a99..c0ddf6ff0 100644 --- a/src/components/ValueProposition/index.js +++ b/src/components/ValueProposition/index.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useRef } from 'react'; import clsx from 'clsx'; import styles from './styles.module.css'; @@ -9,7 +9,7 @@ const FeatureList = [ description: ( <> CNOE is developed around open source cloud native projects that are deemed - to be useful in helping companies build their internal developer tooling. + to be useful in helping companies build their internal developer tooling. ), }, @@ -19,7 +19,7 @@ const FeatureList = [ description: ( <> CNOE relies on community consensus on selecting and configuring - open source cloud native projects as part of the internal developer platform recommendations. + open source cloud native projects as part of the internal developer platform recommendations. ), }, @@ -28,34 +28,78 @@ const FeatureList = [ Svg: require('@site/static/img/modular.svg').default, description: ( <> - CNOE aims to allow its users to pick and choose what core technologies they want to - choose for their internal developer platform. + CNOE aims to allow its users to pick and choose what core technologies they want to + choose for their internal developer platform. ), }, ]; -function Feature({Svg, title, description}) { +function Feature({ Svg, title, description, index }) { return ( -
-
- -
-
-

{title}

-

{description}

+
+
+
+ +
+
+
+

{title}

+

{description}

+
); } -export default function HomepageFeatures() { +export default function ValueProposition() { + const containerRef = useRef(null); + + useEffect(() => { + // Initialize staggered animations for feature cards + if (typeof window !== 'undefined' && containerRef.current) { + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + const cards = entry.target.querySelectorAll('.cnoe-stagger-item'); + cards.forEach((card, index) => { + setTimeout(() => { + card.classList.add('cnoe-animate-visible'); + }, index * 150); + }); + observer.unobserve(entry.target); + } + }); + }, + { threshold: 0.1 } + ); + + observer.observe(containerRef.current); + + return () => { + if (containerRef.current) { + observer.unobserve(containerRef.current); + } + }; + } + }, []); + return (
-
+
+

Why Choose CNOE?

+

+ Built on proven principles for modern internal developer platforms +

+
+
{FeatureList.map((props, idx) => ( - + ))}
diff --git a/src/components/ValueProposition/styles.module.css b/src/components/ValueProposition/styles.module.css index 5cfe40a4f..e3ed6fa2f 100644 --- a/src/components/ValueProposition/styles.module.css +++ b/src/components/ValueProposition/styles.module.css @@ -1,13 +1,250 @@ +/* Modern ValueProposition Component Styles */ .features { - display: flex; - align-items: center; - width: 100%; - margin-bottom: 24px; - background-color: var(--ifm-color-neutral-lighter); + padding: 5rem 0; + background: linear-gradient(135deg, + var(--ifm-primary-50) 0%, + var(--ifm-primary-100) 25%, + var(--ifm-neutral-50) 50%, + var(--ifm-primary-100) 75%, + var(--ifm-primary-50) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; + position: relative; + overflow: hidden; +} + +[data-theme="dark"] .features { + background: linear-gradient(135deg, + var(--ifm-neutral-900) 0%, + var(--ifm-primary-900) 25%, + var(--ifm-neutral-800) 50%, + var(--ifm-primary-800) 75%, + var(--ifm-neutral-900) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; +} + +.features::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: url('data:image/svg+xml,') repeat; + opacity: 0.5; +} + +[data-theme="dark"] .features::before { + background: url('data:image/svg+xml,') repeat; +} + +/* Section Header */ +.sectionHeader { + text-align: center; + margin-bottom: 4rem; + position: relative; + z-index: 2; +} + +.sectionTitle { + font-size: var(--ifm-font-size-4xl); + font-weight: 700; + color: var(--ifm-neutral-900); + margin-bottom: 1rem; + letter-spacing: -0.02em; +} + +[data-theme="dark"] .sectionTitle { + color: var(--ifm-neutral-100) !important; +} + +.sectionSubtitle { + font-size: var(--ifm-font-size-xl); + color: var(--ifm-neutral-600); + max-width: 600px; + margin: 0 auto; + line-height: 1.6; +} + +[data-theme="dark"] .sectionSubtitle { + color: var(--ifm-neutral-400) !important; +} + +/* Features Grid */ +.featuresGrid { + position: relative; + z-index: 2; +} + +/* Feature Cards */ +.featureCard { + margin-bottom: 2rem; + opacity: 0; + transform: translateY(30px); + transition: all 0.6s var(--ifm-easing-ease); +} + +.featureCard.cnoe-animate-visible { + opacity: 1; + transform: translateY(0); +} + +.featureCardInner { + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 16px; + padding: 2.5rem 2rem; + height: 100%; + text-align: center; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); + box-shadow: var(--ifm-shadow-lg); + position: relative; + overflow: hidden; +} + +[data-theme="dark"] .featureCardInner { + background: rgba(30, 41, 59, 0.8) !important; + border: 1px solid rgba(71, 85, 105, 0.3) !important; +} + +.featureCardInner:hover { + transform: translateY(-8px); + box-shadow: var(--ifm-shadow-2xl); + border-color: var(--ifm-primary-200); +} + +[data-theme="dark"] .featureCardInner:hover { + border-color: var(--ifm-primary-600) !important; +} + +.featureCardInner::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient(90deg, var(--ifm-primary) 0%, var(--ifm-primary-600) 100%); + opacity: 0; + transition: opacity var(--ifm-duration-normal) var(--ifm-easing-ease); +} + +.featureCardInner:hover::before { + opacity: 1; +} + +/* Feature Icon */ +.featureIconContainer { + position: relative; + display: inline-block; + margin-bottom: 2rem; } .featureSvg { - height: 96px; - width: 96px; - margin-bottom: 24px; + height: 80px; + width: 80px; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); + filter: drop-shadow(0 4px 8px rgba(0, 86, 140, 0.1)); +} + +.featureIconOverlay { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100px; + height: 100px; + background: radial-gradient(circle, rgba(0, 86, 140, 0.1) 0%, transparent 70%); + border-radius: 50%; + opacity: 0; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); +} + +.featureCardInner:hover .featureSvg { + transform: scale(1.1); + filter: drop-shadow(0 8px 16px rgba(0, 86, 140, 0.2)); +} + +.featureCardInner:hover .featureIconOverlay { + opacity: 1; + transform: translate(-50%, -50%) scale(1.2); +} + +/* Feature Content */ +.featureContent { + position: relative; + z-index: 2; +} + +.featureTitle { + font-size: var(--ifm-font-size-lg); + font-weight: 700; + color: var(--ifm-neutral-900); + margin-bottom: 1rem; + letter-spacing: 0.05em; + text-transform: uppercase; +} + +[data-theme="dark"] .featureTitle { + color: var(--ifm-neutral-100) !important; +} + +.featureDescription { + font-size: var(--ifm-font-size-base); + line-height: 1.6; + color: var(--ifm-neutral-700); + margin: 0; +} + +[data-theme="dark"] .featureDescription { + color: var(--ifm-neutral-300) !important; +} + +/* Mobile Responsive */ +@media (max-width: 996px) { + .features { + padding: 3rem 0; + } + + .sectionTitle { + font-size: var(--ifm-font-size-3xl); + } + + .sectionSubtitle { + font-size: var(--ifm-font-size-lg); + } + + .featureCardInner { + padding: 2rem 1.5rem; + } + + .featureSvg { + height: 64px; + width: 64px; + } +} + +@media (max-width: 576px) { + .sectionHeader { + margin-bottom: 2rem; + } + + .sectionTitle { + font-size: var(--ifm-font-size-2xl); + } + + .featureCardInner { + padding: 1.5rem 1rem; + } + + .featureTitle { + font-size: var(--ifm-font-size-base); + } + + .featureDescription { + font-size: var(--ifm-font-size-sm); + } } diff --git a/src/css/custom.css b/src/css/custom.css index eec7701d8..5d0a4d7ef 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -4,34 +4,142 @@ * work well for content-centric websites. */ -/* You can override the default Infima variables here. */ +/* Import Inter font family for modern typography */ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); + +/* Import dark mode fixes */ +@import './dark-mode-fixes.css'; + +/* Import homepage gap fix */ +@import './homepage-fix.css'; + +/* CNOE Modern Design System - CNOE Brand Color Palette */ :root { - --ifm-color-primary: #00568c; - --ifm-color-primary-dark: #004d7e; - --ifm-color-primary-darker: #004169; - --ifm-color-primary-darkest: #003454; - --ifm-color-primary-light: #005f9a; - --ifm-color-primary-lighter: #006caf; - --ifm-color-primary-lightest: #0078c4; - - --ifm-color-neutral: #7b7b7b; - --ifm-color-neutral-dark: #555555; - --ifm-color-neutral-darker: #434343; - --ifm-color-neutral-darkest: #262626; - --ifm-color-neutral-light: #c4c4c4; - --ifm-color-neutral-lighter: #dfdfdf; - --ifm-color-neutral-lightest: #f9f9f9; + /* Primary Blue Palette - Based on CNOE Logo */ + --ifm-primary: #00568c; + /* Primary Color - CNOE Logo Blue */ + --ifm-primary-dark: #004a7a; + /* Dark Primary Color */ + --ifm-primary-light: #4da6ff; + /* Light Primary Color */ + --ifm-primary-50: #e6f2ff; + --ifm-primary-100: #b3d9ff; + --ifm-primary-200: #80c0ff; + --ifm-primary-300: #4da6ff; + --ifm-primary-400: #1a8dff; + --ifm-primary-500: #00568c; + --ifm-primary-600: #004a7a; + --ifm-primary-700: #003d68; + --ifm-primary-800: #003156; + --ifm-primary-900: #002444; + + /* Accent Orange Palette */ + --ifm-accent: #FF9800; + /* Accent Color */ + --ifm-accent-light: #FFB74D; + --ifm-accent-dark: #F57C00; + --ifm-accent-50: #FFF3E0; + --ifm-accent-100: #FFE0B2; + --ifm-accent-200: #FFCC80; + --ifm-accent-300: #FFB74D; + --ifm-accent-400: #FFA726; + --ifm-accent-500: #FF9800; + --ifm-accent-600: #FB8C00; + --ifm-accent-700: #F57C00; + --ifm-accent-800: #EF6C00; + --ifm-accent-900: #E65100; + + /* Neutral Palette */ + --ifm-neutral-white: #FFFFFF; + /* Text/Icons */ + --ifm-neutral-50: #FAFAFA; + --ifm-neutral-100: #F5F5F5; + --ifm-neutral-200: #EEEEEE; + --ifm-neutral-300: #E0E0E0; + --ifm-neutral-400: #BDBDBD; + /* Divider Color */ + --ifm-neutral-500: #9E9E9E; + --ifm-neutral-600: #757575; + /* Secondary Text */ + --ifm-neutral-700: #616161; + --ifm-neutral-800: #424242; + --ifm-neutral-900: #212121; + /* Primary Text */ + + /* Semantic Colors */ + --ifm-success: #4CAF50; + --ifm-warning: #FF9800; + --ifm-error: #F44336; + --ifm-info: #2196F3; + + /* Typography Scale */ + --ifm-font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; + --ifm-font-size-xs: 0.75rem; + --ifm-font-size-sm: 0.875rem; + --ifm-font-size-base: 1rem; + --ifm-font-size-lg: 1.125rem; + --ifm-font-size-xl: 1.25rem; + --ifm-font-size-2xl: 1.5rem; + --ifm-font-size-3xl: 1.875rem; + --ifm-font-size-4xl: 2.25rem; + --ifm-font-size-5xl: 3rem; + + /* Animation System */ + --ifm-duration-fast: 0.2s; + --ifm-duration-normal: 0.3s; + --ifm-duration-slow: 0.5s; + --ifm-duration-slower: 0.8s; + --ifm-duration-slowest: 1.4s; + + --ifm-easing-ease: cubic-bezier(0.4, 0, 0.2, 1); + --ifm-easing-ease-in: cubic-bezier(0.4, 0, 1, 1); + --ifm-easing-ease-out: cubic-bezier(0, 0, 0.2, 1); + --ifm-easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); + + /* Synchronized Gradient Animation */ + --cnoe-gradient-animation: cnoe-gradient-shift 15s ease infinite; + + /* Shadow System */ + --ifm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + --ifm-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); + --ifm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --ifm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + --ifm-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); + --ifm-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); + --ifm-shadow-primary: 0 10px 25px rgba(0, 86, 140, 0.15); + --ifm-shadow-primary-lg: 0 20px 40px rgba(0, 86, 140, 0.2); + + /* Docusaurus Integration - Map CNOE colors to Infima variables */ + --ifm-color-primary: var(--ifm-primary); + --ifm-color-primary-dark: var(--ifm-primary-600); + --ifm-color-primary-darker: var(--ifm-primary-700); + --ifm-color-primary-darkest: var(--ifm-primary-800); + --ifm-color-primary-light: var(--ifm-primary-400); + --ifm-color-primary-lighter: var(--ifm-primary-300); + --ifm-color-primary-lightest: var(--ifm-primary-200); + + --ifm-color-neutral: var(--ifm-neutral-500); + --ifm-color-neutral-dark: var(--ifm-neutral-600); + --ifm-color-neutral-darker: var(--ifm-neutral-700); + --ifm-color-neutral-darkest: var(--ifm-neutral-800); + --ifm-color-neutral-light: var(--ifm-neutral-400); + --ifm-color-neutral-lighter: var(--ifm-neutral-100); + --ifm-color-neutral-lightest: var(--ifm-neutral-50); /* Hex codes for rgba opacity with variables */ - --ifm-color-neutral-light-rgb: 196, 196, 196; + --ifm-color-neutral-light-rgb: 189, 189, 189; --ifm-color-black: #000000; --ifm-color-white: #fff; + /* Typography Updates */ + --ifm-font-family-base: var(--ifm-font-family); + --ifm-font-family-monospace: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', monospace; --ifm-code-font-size: 95%; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); + /* Radar Colors */ --ifm-color-radar-opeartion: #3c6ead; --ifm-color-radar-application: #2e7d32; --ifm-color-radar-security: #d32f2f; @@ -43,40 +151,73 @@ --ifm-image-portal: url("../../static/img/logo.png"); } -/* For readability concerns, you should choose a lighter palette in dark mode. */ +/* Dark Theme - Enhanced with CNOE Color System */ [data-theme="dark"] { - /* --ifm-color-primary: #35b4e6; - --ifm-color-primary-dark: #1cabe3; - --ifm-color-primary-darker: #178ebd; - --ifm-color-primary-darkest: #137297; - --ifm-color-primary-light: #4ebde9; - --ifm-color-primary-lighter: #74cbee; - --ifm-color-primary-lightest: #9ad9f2; */ - - --ifm-color-primary-lightest: #00568c; - --ifm-color-primary-lighter: #004d7e; - --ifm-color-primary-light: #004169; - --ifm-color-primary-darkest: #003454; - --ifm-color-primary-darker: #005f9a; - --ifm-color-primary-dark: #006caf; - --ifm-color-primary: #0078c4; - - --ifm-color-neutral: #7b7b7b; - --ifm-color-neutral-dark: #c4c4c4; - --ifm-color-neutral-darker: #d9d9d9; - --ifm-color-neutral-darkest: #e9e9e9; - --ifm-color-neutral-light: #555555; - --ifm-color-neutral-lighter: #222222; - --ifm-color-neutral-lightest: #0c0c0c; + /* Dark theme primary colors - lighter variants of CNOE blue for better contrast */ + --ifm-primary: #4da6ff; + /* Lighter blue for dark theme */ + --ifm-primary-dark: #1a8dff; + /* Dark Primary Color */ + --ifm-primary-light: #80c0ff; + /* Light Primary Color */ + --ifm-primary-50: #002444; + --ifm-primary-100: #003156; + --ifm-primary-200: #003d68; + --ifm-primary-300: #004a7a; + --ifm-primary-400: #00568c; + --ifm-primary-500: #1a8dff; + --ifm-primary-600: #4da6ff; + --ifm-primary-700: #80c0ff; + --ifm-primary-800: #b3d9ff; + --ifm-primary-900: #e6f2ff; + + /* Dark theme accent colors */ + --ifm-accent: #FFB74D; + /* Lighter orange for dark theme */ + --ifm-accent-light: #FFCC80; + --ifm-accent-dark: #FFA726; + + /* Dark theme neutrals - Better balanced for readability */ + --ifm-neutral-white: #FFFFFF; + --ifm-neutral-50: #121212; + /* Dark background */ + --ifm-neutral-100: #1E1E1E; + --ifm-neutral-200: #2D2D2D; + --ifm-neutral-300: #404040; + --ifm-neutral-400: #6D6D6D; + /* Divider Color */ + --ifm-neutral-500: #9E9E9E; + --ifm-neutral-600: #BDBDBD; + /* Secondary Text */ + --ifm-neutral-700: #E0E0E0; + --ifm-neutral-800: #F5F5F5; + --ifm-neutral-900: #FFFFFF; + /* Primary Text */ + + /* Update Infima variables for dark theme */ + --ifm-color-primary: var(--ifm-primary); + --ifm-color-primary-dark: var(--ifm-primary-400); + --ifm-color-primary-darker: var(--ifm-primary-300); + --ifm-color-primary-darkest: var(--ifm-primary-200); + --ifm-color-primary-light: var(--ifm-primary-700); + --ifm-color-primary-lighter: var(--ifm-primary-800); + --ifm-color-primary-lightest: var(--ifm-primary-900); + + --ifm-color-neutral: var(--ifm-neutral-500); + --ifm-color-neutral-dark: var(--ifm-neutral-600); + --ifm-color-neutral-darker: var(--ifm-neutral-700); + --ifm-color-neutral-darkest: var(--ifm-neutral-800); + --ifm-color-neutral-light: var(--ifm-neutral-400); + --ifm-color-neutral-lighter: var(--ifm-neutral-200); + --ifm-color-neutral-lightest: var(--ifm-neutral-100); /* Hex codes for rgba opacity with variables */ - --ifm-color-neutral-light-rgb: 85, 85, 85; + --ifm-color-neutral-light-rgb: 100, 116, 139; --ifm-code-font-size: 95%; - /* --ifm-heading-color: #25a0c2; */ - - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); + --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.1); + /* Dark theme radar colors */ --ifm-color-radar-opeartion: #25a0c2; --ifm-color-radar-application: #55b55a; --ifm-color-radar-security: #cf6969; @@ -88,8 +229,183 @@ --ifm-image-portal: url("../../static/img/logo.png"); } +/* Base Animation Utilities */ +.cnoe-animate-fade-in { + animation: cnoe-fade-in var(--ifm-duration-slower) var(--ifm-easing-ease) forwards; + opacity: 0; +} + +.cnoe-animate-fade-in-up { + animation: cnoe-fade-in-up var(--ifm-duration-slower) var(--ifm-easing-ease) forwards; + opacity: 0; + transform: translateY(30px); +} + +.cnoe-animate-float { + animation: cnoe-float 8s var(--ifm-easing-ease-in-out) infinite; +} + +.cnoe-animate-gradient { + animation: cnoe-gradient-shift 15s ease infinite; +} + +/* Scroll-based Animation Classes */ +.cnoe-scroll-animate { + opacity: 0; + transform: translateY(30px); + transition: all var(--ifm-duration-slower) var(--ifm-easing-ease); +} + +.cnoe-scroll-animate.cnoe-animate-visible { + opacity: 1; + transform: translateY(0); +} + +.cnoe-scroll-animate-fade { + opacity: 0; + transition: opacity var(--ifm-duration-slower) var(--ifm-easing-ease); +} + +.cnoe-scroll-animate-fade.cnoe-animate-visible { + opacity: 1; +} + +.cnoe-scroll-animate-slide-left { + opacity: 0; + transform: translateX(-30px); + transition: all var(--ifm-duration-slower) var(--ifm-easing-ease); +} + +.cnoe-scroll-animate-slide-left.cnoe-animate-visible { + opacity: 1; + transform: translateX(0); +} + +.cnoe-scroll-animate-slide-right { + opacity: 0; + transform: translateX(30px); + transition: all var(--ifm-duration-slower) var(--ifm-easing-ease); +} + +.cnoe-scroll-animate-slide-right.cnoe-animate-visible { + opacity: 1; + transform: translateX(0); +} + +.cnoe-scroll-animate-scale { + opacity: 0; + transform: scale(0.9); + transition: all var(--ifm-duration-slower) var(--ifm-easing-ease); +} + +.cnoe-scroll-animate-scale.cnoe-animate-visible { + opacity: 1; + transform: scale(1); +} + +/* Staggered Animation Support */ +.cnoe-stagger-container .cnoe-stagger-item { + opacity: 0; + transform: translateY(20px); + transition: all 0.6s var(--ifm-easing-ease); +} + +.cnoe-stagger-container .cnoe-stagger-item.cnoe-animate-visible { + opacity: 1; + transform: translateY(0); +} + +/* Animation delays for staggered effects */ +.cnoe-stagger-item:nth-child(1) { + transition-delay: 0.1s; +} + +.cnoe-stagger-item:nth-child(2) { + transition-delay: 0.2s; +} + +.cnoe-stagger-item:nth-child(3) { + transition-delay: 0.3s; +} + +.cnoe-stagger-item:nth-child(4) { + transition-delay: 0.4s; +} + +.cnoe-stagger-item:nth-child(5) { + transition-delay: 0.5s; +} + +.cnoe-stagger-item:nth-child(6) { + transition-delay: 0.6s; +} + +/* Keyframe Definitions */ +@keyframes cnoe-fade-in { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +@keyframes cnoe-fade-in-up { + from { + opacity: 0; + transform: translateY(30px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes cnoe-float { + + 0%, + 100% { + transform: translateY(0px); + } + + 50% { + transform: translateY(-15px); + } +} + +@keyframes cnoe-gradient-shift { + + 0%, + 100% { + background-position: 0% 50%; + } + + 50% { + background-position: 100% 50%; + } +} + +/* Reduced Motion Support */ +@media (prefers-reduced-motion: reduce) { + + .cnoe-animate-fade-in, + .cnoe-animate-fade-in-up, + .cnoe-animate-float, + .cnoe-animate-gradient { + animation: none; + } + + .cnoe-animate-fade-in, + .cnoe-animate-fade-in-up { + opacity: 1; + transform: none; + } +} + .hero { - background-color: var(--ifm-color-neutral-lighter); + background: var(--ifm-primary-50) !important; } .hero .hero__subtitle { @@ -120,7 +436,8 @@ font-size: 35px; font-style: normal; font-weight: 700; - line-height: 149.523%; /* 52.333px */ + line-height: 149.523%; + /* 52.333px */ } .heading-center { @@ -143,17 +460,9 @@ color: #c4c4c4; } -.button--primary { - color: white; - background-color: #2984bd; -} -.button--primary:hover { - color: white; - background-color: #00568c; -} html[data-theme="dark"] .navbar .navbar__logo { - content: url(/img/logo-dark.png); + content: url(/img/logo-dark-no-name.png); } .sliderStyle { @@ -170,30 +479,22 @@ html[data-theme="dark"] .navbar .navbar__logo { text-align: center; } -p > img { +p>img { border-radius: 8px; } @media only screen and (max-width: 768px) { + /* For mobile phones: */ .hero .hero__subtitle { font-size: 18px; max-width: 100px; } + .tagline { width: 100px; } - .hero .button--primary { - width: 175px; - font-size: 12px; - height: 35px; - } - .hero .button--secondary { - width: 175px; - font-size: 12px; - height: 35px; - margin-top: -40px; - } + .hero .bgimg { background-position: center; } @@ -201,82 +502,2877 @@ p > img { /* navbar */ .navbar--calendar-link { - width: 32px; - height: 32px; - padding: 6px; - margin-right: 6px; - margin-left: 6px; - border-radius: 50%; - transition: background var(--ifm-transition-fast); + width: 32px; + height: 32px; + padding: 6px; + margin-right: 6px; + margin-left: 6px; + border-radius: 50%; + transition: background var(--ifm-transition-fast); } .navbar--calendar-link:hover { - background: var(--ifm-color-emphasis-200); + background: var(--ifm-color-emphasis-200); } .navbar--calendar-link:before { - content: ''; - height: 100%; - display: block; + content: ''; + height: 100%; + display: block; background: url('data:image/svg+xml,'); } html[data-theme='dark'] .navbar--calendar-link:before { - background: url('data:image/svg+xml,'); + background: url('data:image/svg+xml,'); } + /* navbar */ .navbar--slack-link { - width: 32px; - height: 32px; - padding: 6px; - margin-right: 6px; - margin-left: 6px; - border-radius: 50%; - transition: background var(--ifm-transition-fast); + width: 32px; + height: 32px; + padding: 6px; + margin-right: 6px; + margin-left: 6px; + border-radius: 50%; + transition: background var(--ifm-transition-fast); } .navbar--slack-link:hover { - background: var(--ifm-color-emphasis-200); + background: var(--ifm-color-emphasis-200); } .navbar--slack-link:before { - content: ''; - height: 100%; - display: block; + content: ''; + height: 100%; + display: block; background: url('data:image/svg+xml,'); } html[data-theme='dark'] .navbar--slack-link:before { - background: url('data:image/svg+xml,'); + background: url('data:image/svg+xml,'); } .navbar--github-link { - width: 32px; - height: 32px; - padding: 6px; - margin-right: 20px; - margin-left: 6px; - border-radius: 50%; - transition: background var(--ifm-transition-fast); + width: 32px; + height: 32px; + padding: 6px; + margin-right: 20px; + margin-left: 6px; + border-radius: 50%; + transition: background var(--ifm-transition-fast); } .navbar--github-link:hover { - background: var(--ifm-color-emphasis-200); + background: var(--ifm-color-emphasis-200); } .navbar--github-link:before { - content: ''; - height: 100%; - display: block; - background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") - no-repeat; + content: ''; + height: 100%; + display: block; + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat; } html[data-theme='dark'] .navbar--github-link:before { - background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") - no-repeat; + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat; } -.hidden-sidebar-item { - display: none !important; +/* Global Typography Improvements */ +body { + font-family: var(--ifm-font-family); + font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; + font-variation-settings: normal; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: var(--ifm-font-family); + font-weight: 600; + letter-spacing: -0.025em; +} + +h1 { + font-size: var(--ifm-font-size-4xl); + font-weight: 700; +} + +h2 { + font-size: var(--ifm-font-size-3xl); + font-weight: 600; +} + +h3 { + font-size: var(--ifm-font-size-2xl); + font-weight: 600; +} + +/* Enhanced Button Styles */ +.button { + font-family: var(--ifm-font-family); + font-weight: 500; + border-radius: 8px; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); + border: none; + box-shadow: var(--ifm-shadow-sm); +} + +.button:hover { + transform: translateY(-2px); + box-shadow: var(--ifm-shadow-lg); +} + +/* Enhanced Card Styles */ +.card { + border-radius: 12px; + border: 1px solid var(--ifm-neutral-200); + box-shadow: var(--ifm-shadow-sm); + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); +} + +.card:hover { + transform: translateY(-4px); + box-shadow: var(--ifm-shadow-xl); + border-color: var(--ifm-primary-200); +} + +[data-theme="dark"] .card { + border-color: var(--ifm-neutral-700); + background: var(--ifm-neutral-800); +} + +[data-theme="dark"] .card:hover { + border-color: var(--ifm-primary-400); +} + +/* Hero Section Animated Background Elements */ +.hero-background { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; + z-index: 0; +} + +.hero-gradient-bg { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, + var(--ifm-primary-50) 0%, + var(--ifm-primary-100) 25%, + var(--ifm-neutral-50) 50%, + var(--ifm-primary-100) 75%, + var(--ifm-primary-50) 100%); + background-size: 400% 400%; + animation: cnoe-gradient-shift 15s ease infinite; +} + +[data-theme="dark"] .hero-gradient-bg { + background: linear-gradient(135deg, + var(--ifm-neutral-900) 0%, + var(--ifm-primary-900) 25%, + var(--ifm-neutral-800) 50%, + var(--ifm-primary-800) 75%, + var(--ifm-neutral-900) 100%); + background-size: 400% 400%; +} + +.floating-shape { + position: absolute; + border-radius: 50%; + background: linear-gradient(135deg, var(--ifm-primary-200), var(--ifm-primary-300)); + opacity: 0.1; + animation: cnoe-float-shapes 20s ease-in-out infinite; +} + +[data-theme="dark"] .floating-shape { + background: linear-gradient(135deg, var(--ifm-primary-600), var(--ifm-primary-700)); + opacity: 0.05; +} + +.floating-shape:nth-child(1) { + width: 80px; + height: 80px; + top: 20%; + left: 10%; + animation-delay: 0s; + animation-duration: 25s; +} + +.floating-shape:nth-child(2) { + width: 120px; + height: 120px; + top: 60%; + right: 15%; + animation-delay: -5s; + animation-duration: 30s; +} + +.floating-shape:nth-child(3) { + width: 60px; + height: 60px; + top: 40%; + left: 70%; + animation-delay: -10s; + animation-duration: 20s; +} + +.floating-shape:nth-child(4) { + width: 100px; + height: 100px; + top: 80%; + left: 20%; + animation-delay: -15s; + animation-duration: 35s; +} + +.floating-shape:nth-child(5) { + width: 40px; + height: 40px; + top: 15%; + right: 30%; + animation-delay: -8s; + animation-duration: 22s; +} + +/* Cloud-Native Themed Shapes */ +.floating-shape.container { + border-radius: 8px; + background: linear-gradient(135deg, var(--ifm-primary-200), var(--ifm-primary-300)); + position: relative; +} + +.floating-shape.container::before { + content: '📦'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 24px; + opacity: 0.6; +} + +.floating-shape.kubernetes { + border-radius: 50%; + background: linear-gradient(135deg, var(--ifm-info), #326ce5); + position: relative; +} + +.floating-shape.kubernetes::before { + content: '☸️'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 20px; + opacity: 0.7; +} + +.floating-shape.cloud { + border-radius: 20px; + background: linear-gradient(135deg, var(--ifm-neutral-300), var(--ifm-neutral-400)); + position: relative; +} + +.floating-shape.cloud::before { + content: '☁️'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 22px; + opacity: 0.6; +} + +.floating-shape.platform { + border-radius: 12px; + background: linear-gradient(135deg, var(--ifm-accent), var(--ifm-accent-dark)); + position: relative; + transform: rotate(15deg); +} + +.floating-shape.platform::before { + content: '🚀'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) rotate(-15deg); + font-size: 20px; + opacity: 0.7; +} + +[data-theme="dark"] .floating-shape.container { + background: linear-gradient(135deg, var(--ifm-primary-600), var(--ifm-primary-700)); +} + +[data-theme="dark"] .floating-shape.kubernetes { + background: linear-gradient(135deg, var(--ifm-info), #4da6ff); +} + +[data-theme="dark"] .floating-shape.cloud { + background: linear-gradient(135deg, var(--ifm-neutral-600), var(--ifm-neutral-700)); +} + +[data-theme="dark"] .floating-shape.platform { + background: linear-gradient(135deg, var(--ifm-accent-light), var(--ifm-accent)); +} + +@keyframes cnoe-float-shapes { + + 0%, + 100% { + transform: translateY(0px) translateX(0px) rotate(0deg); + } + + 25% { + transform: translateY(-20px) translateX(10px) rotate(90deg); + } + + 50% { + transform: translateY(-40px) translateX(-5px) rotate(180deg); + } + + 75% { + transform: translateY(-20px) translateX(-10px) rotate(270deg); + } +} + +/* Performance optimizations for mobile */ +@media (max-width: 768px) { + .floating-shape { + animation-duration: 15s; + will-change: transform; + } + + .hero-gradient-bg { + animation-duration: 20s; + } +} + +/* Reduced motion support for background elements */ +@media (prefers-reduced-motion: reduce) { + + .floating-shape, + .hero-gradient-bg { + animation: none; + } + + .floating-shape { + opacity: 0.05; + } + + [data-theme="dark"] .floating-shape { + opacity: 0.02; + } +} + +/* Synchronized Gradient Animation for Body - Global Sync Point */ +body { + background: linear-gradient(135deg, + var(--ifm-primary-50) 0%, + var(--ifm-primary-100) 25%, + var(--ifm-neutral-50) 50%, + var(--ifm-primary-100) 75%, + var(--ifm-primary-50) 100%); + background-size: 400% 400%; + animation: var(--cnoe-gradient-animation); +} + +[data-theme="dark"] body { + background: linear-gradient(135deg, + var(--ifm-neutral-900) 0%, + var(--ifm-primary-900) 25%, + var(--ifm-neutral-800) 50%, + var(--ifm-primary-800) 75%, + var(--ifm-neutral-900) 100%); + background-size: 400% 400%; + animation: cnoe-gradient-shift 15s ease infinite; +} + +/* Immersive Glassmorphism Navbar Enhancement - Synced with Hero */ +.navbar { + background: linear-gradient(135deg, + var(--ifm-primary-50) 0%, + var(--ifm-primary-100) 25%, + var(--ifm-neutral-50) 50%, + var(--ifm-primary-100) 75%, + var(--ifm-primary-50) 100%); + background-size: 400% 400%; + animation: cnoe-gradient-shift 15s ease infinite; + backdrop-filter: blur(25px) saturate(1.2); + -webkit-backdrop-filter: blur(25px) saturate(1.2); + border-bottom: 1px solid rgba(0, 86, 140, 0.08); + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); + box-shadow: + 0 8px 32px rgba(0, 86, 140, 0.08), + 0 2px 8px rgba(0, 86, 140, 0.04), + 0 4px 12px rgba(0, 86, 140, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.3); + position: sticky; + top: 0; + z-index: 1000; +} + +/* Navbar scroll effect - Maintain gradient background sync */ +.navbar--fixed-top { + backdrop-filter: blur(30px) saturate(1.3); + -webkit-backdrop-filter: blur(30px) saturate(1.3); + background: linear-gradient(135deg, + var(--ifm-primary-50) 0%, + var(--ifm-primary-100) 25%, + var(--ifm-neutral-50) 50%, + var(--ifm-primary-100) 75%, + var(--ifm-primary-50) 100%); + background-size: 400% 400%; + animation: cnoe-gradient-shift 15s ease infinite; + box-shadow: + 0 12px 40px rgba(0, 86, 140, 0.12), + 0 4px 12px rgba(0, 86, 140, 0.06), + 0 4px 12px rgba(0, 86, 140, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.4); +} + +[data-theme="dark"] .navbar { + background: linear-gradient(135deg, + var(--ifm-neutral-900) 0%, + var(--ifm-primary-900) 25%, + var(--ifm-neutral-800) 50%, + var(--ifm-primary-800) 75%, + var(--ifm-neutral-900) 100%); + background-size: 400% 400%; + animation: cnoe-gradient-shift 15s ease infinite; + border-bottom: 1px solid rgba(77, 166, 255, 0.12); + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.3), + 0 2px 8px rgba(77, 166, 255, 0.08), + 0 4px 12px rgba(77, 166, 255, 0.15), + inset 0 1px 0 rgba(77, 166, 255, 0.1); +} + +[data-theme="dark"] .navbar--fixed-top { + background: linear-gradient(135deg, + var(--ifm-neutral-900) 0%, + var(--ifm-primary-900) 25%, + var(--ifm-neutral-800) 50%, + var(--ifm-primary-800) 75%, + var(--ifm-neutral-900) 100%); + background-size: 400% 400%; + animation: cnoe-gradient-shift 15s ease infinite; + box-shadow: + 0 12px 40px rgba(0, 0, 0, 0.4), + 0 4px 12px rgba(77, 166, 255, 0.12), + 0 4px 12px rgba(77, 166, 255, 0.15), + inset 0 1px 0 rgba(77, 166, 255, 0.15); +} + +.navbar--fixed-top { + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); +} + +/* Enhanced Navbar Items */ +.navbar__item { + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); +} + +.navbar__link { + font-weight: 500; + color: var(--ifm-neutral-700); + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); + border-radius: 6px; + padding: 0.5rem 1rem; + position: relative; + overflow: hidden; +} + +[data-theme="dark"] .navbar__link { + color: var(--ifm-neutral-300); +} + +.navbar__link:hover { + color: var(--ifm-primary); + background: rgba(0, 86, 140, 0.1); + transform: translateY(-1px); +} + +[data-theme="dark"] .navbar__link:hover { + color: var(--ifm-primary-300); + background: rgba(77, 166, 255, 0.1); +} + +.navbar__link--active { + color: var(--ifm-primary); + background: linear-gradient(135deg, rgba(0, 86, 140, 0.1) 0%, rgba(0, 86, 140, 0.05) 100%); + font-weight: 600; +} + +[data-theme="dark"] .navbar__link--active { + color: var(--ifm-primary-300); + background: linear-gradient(135deg, rgba(77, 166, 255, 0.1) 0%, rgba(77, 166, 255, 0.05) 100%); +} + +/* Enhanced Logo */ +.navbar__logo { + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); +} + +.navbar__logo:hover { + transform: scale(2); +} + +/* Enhanced Navbar Links with Bold Text and Accent Bar */ +.navbar__link { + font-weight: 600 !important; +} + +.navbar__link::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + width: 0; + height: 3px; + background: var(--ifm-accent); + border-radius: 2px; + transform: translateX(-50%); + transition: width var(--ifm-duration-normal) var(--ifm-easing-ease); +} + +.navbar__link:hover::after { + width: 80%; +} + +.navbar__link--active { + font-weight: 700 !important; +} + +.navbar__link--active::after { + width: 80%; +} + +/* Mobile Navbar Enhancements */ +.navbar-sidebar { + background: rgba(248, 250, 252, 0.95); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); +} + +[data-theme="dark"] .navbar-sidebar { + background: rgba(30, 41, 59, 0.95); +} + +.navbar-sidebar__item { + padding: 0.5rem 1rem; +} + +.navbar-sidebar__link { + border-radius: 8px; + padding: 0.75rem 1rem; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); + font-weight: 500; +} + +.navbar-sidebar__link:hover { + background: rgba(0, 86, 140, 0.1); + color: var(--ifm-primary); + transform: translateX(4px); +} + +[data-theme="dark"] .navbar-sidebar__link:hover { + background: rgba(77, 166, 255, 0.1); + color: var(--ifm-primary-300); +} + +/* Enhanced Social Icons */ +.navbar--calendar-link, +.navbar--slack-link, +.navbar--github-link { + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); + border-radius: 8px; } + +.navbar--calendar-link:hover, +.navbar--slack-link:hover, +.navbar--github-link:hover { + background: rgba(0, 86, 140, 0.1); + transform: translateY(-2px) scale(1.1); +} + +[data-theme="dark"] .navbar--calendar-link:hover, +[data-theme="dark"] .navbar--slack-link:hover, +[data-theme="dark"] .navbar--github-link:hover { + background: rgba(77, 166, 255, 0.1); +} + +/* Navbar Social Links - Aligned and Menu-style Hover */ +.navbar--calendar-link, +.navbar--slack-link, +.navbar--github-link { + width: auto !important; + height: auto !important; + padding: 0.5rem 1rem !important; + margin: 0 0.25rem !important; + border-radius: 8px !important; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease) !important; + display: inline-flex !important; + align-items: center !important; + justify-content: flex-start !important; + font-weight: 500 !important; + color: var(--ifm-neutral-700) !important; + text-decoration: none !important; + position: relative !important; + background: transparent !important; +} + +[data-theme="dark"] .navbar--calendar-link, +[data-theme="dark"] .navbar--slack-link, +[data-theme="dark"] .navbar--github-link { + color: var(--ifm-neutral-300) !important; +} + +.navbar--calendar-link:hover, +.navbar--slack-link:hover, +.navbar--github-link:hover { + background: rgba(0, 86, 140, 0.08) !important; + color: var(--ifm-primary) !important; + transform: translateX(4px) !important; + box-shadow: var(--ifm-shadow-sm) !important; +} + +[data-theme="dark"] .navbar--calendar-link:hover, +[data-theme="dark"] .navbar--slack-link:hover, +[data-theme="dark"] .navbar--github-link:hover { + background: rgba(77, 166, 255, 0.08) !important; + color: var(--ifm-primary-300) !important; +} + +/* Icon styling for navbar links */ +.navbar--calendar-link:before, +.navbar--slack-link:before, +.navbar--github-link:before { + width: 20px !important; + height: 20px !important; + margin-right: 0.5rem !important; + display: inline-block !important; + flex-shrink: 0 !important; +} + +/* Add text labels for better alignment and visibility */ +.navbar--calendar-link:after { + content: 'Calendar'; + font-size: var(--ifm-font-size-sm); + font-weight: 500; +} + +.navbar--slack-link:after { + content: 'Slack'; + font-size: var(--ifm-font-size-sm); + font-weight: 500; +} + +.navbar--github-link:after { + content: 'GitHub'; + font-size: var(--ifm-font-size-sm); + font-weight: 500; +} + +/* Modern Sidebar Navigation */ +.theme-doc-sidebar-container { + background: var(--ifm-neutral-50); + border-right: 1px solid var(--ifm-neutral-200); + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); +} + +[data-theme="dark"] .theme-doc-sidebar-container { + background: var(--ifm-neutral-900); + border-right: 1px solid var(--ifm-neutral-700); +} + +.theme-doc-sidebar-menu { + padding: 1rem; +} + +/* Sidebar Menu Items */ +.menu__link { + font-weight: 500; + color: var(--ifm-neutral-700); + border-radius: 8px; + padding: 0.75rem 1rem; + margin: 0.25rem 0; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); + position: relative; + font-size: var(--ifm-font-size-sm); +} + +[data-theme="dark"] .menu__link { + color: var(--ifm-neutral-300); +} + +.menu__link:hover { + background: rgba(0, 86, 140, 0.08); + color: var(--ifm-primary); + transform: translateX(4px); + box-shadow: var(--ifm-shadow-sm); +} + +[data-theme="dark"] .menu__link:hover { + background: rgba(77, 166, 255, 0.08); + color: var(--ifm-primary-300); +} + +.menu__link--active { + background: linear-gradient(135deg, var(--ifm-primary) 0%, var(--ifm-primary-600) 100%); + color: white; + font-weight: 600; + box-shadow: var(--ifm-shadow-md); + position: relative; +} + +.menu__link--active::before { + content: ''; + position: absolute; + left: -1rem; + top: 50%; + transform: translateY(-50%); + width: 4px; + height: 20px; + background: var(--ifm-accent); + border-radius: 2px; +} + +/* Sidebar Categories */ +.menu__list-item-collapsible { + margin: 0.5rem 0; +} + +.menu__list-item-collapsible .menu__link { + font-weight: 600; + color: var(--ifm-neutral-800); + font-size: var(--ifm-font-size-base); + text-transform: uppercase; + letter-spacing: 0.05em; + padding: 1rem; +} + +[data-theme="dark"] .menu__list-item-collapsible .menu__link { + color: var(--ifm-neutral-200); +} + +.menu__list-item-collapsible .menu__link:hover { + background: rgba(0, 86, 140, 0.05); + transform: none; +} + +/* Nested Menu Items */ +.menu__list .menu__list { + padding-left: 1rem; + border-left: 2px solid var(--ifm-neutral-200); + margin-left: 1rem; +} + +[data-theme="dark"] .menu__list .menu__list { + border-left-color: var(--ifm-neutral-700); +} + +.menu__list .menu__list .menu__link { + font-size: var(--ifm-font-size-sm); + padding: 0.5rem 1rem; + color: var(--ifm-neutral-600); +} + +[data-theme="dark"] .menu__list .menu__list .menu__link { + color: var(--ifm-neutral-400); +} + +/* Mobile Sidebar */ +@media (max-width: 996px) { + .theme-doc-sidebar-container { + background: rgba(248, 250, 252, 0.95); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + } + + [data-theme="dark"] .theme-doc-sidebar-container { + background: rgba(30, 41, 59, 0.95); + } + + .menu__link { + padding: 1rem; + font-size: var(--ifm-font-size-base); + } + + .menu__link:hover { + transform: translateX(8px); + } +} + +/* Touch-friendly enhancements for mobile */ +@media (max-width: 768px) { + .menu__link { + min-height: 44px; + display: flex; + align-items: center; + } +} + +/* Enhanced Code Block Styling */ +.prism-code { + background: var(--ifm-neutral-900) !important; + border-radius: 12px !important; + border: 1px solid var(--ifm-neutral-700); + box-shadow: var(--ifm-shadow-xl); + font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', monospace !important; + font-size: 14px !important; + line-height: 1.6 !important; + overflow: hidden; +} + +[data-theme="light"] .prism-code { + background: var(--ifm-neutral-50) !important; + border: 1px solid var(--ifm-neutral-200); + color: var(--ifm-neutral-800) !important; +} + +/* Code Block Header */ +.codeBlockContainer { + position: relative; + margin: 2rem 0; +} + +.codeBlockTitle { + background: linear-gradient(135deg, var(--ifm-primary) 0%, var(--ifm-primary-600) 100%); + color: white; + padding: 0.75rem 1.5rem; + font-size: var(--ifm-font-size-sm); + font-weight: 600; + border-radius: 12px 12px 0 0; + margin: 0; + font-family: var(--ifm-font-family); + letter-spacing: 0.025em; +} + +.codeBlockTitle+.prism-code { + border-radius: 0 0 12px 12px !important; + border-top: none; +} + +/* Language Badge */ +.codeBlockContainer::before { + content: attr(data-language); + position: absolute; + top: 0.75rem; + right: 1rem; + background: linear-gradient(135deg, var(--ifm-accent) 0%, var(--ifm-accent-dark) 100%); + color: white; + padding: 0.25rem 0.75rem; + border-radius: 6px; + font-size: var(--ifm-font-size-xs); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + z-index: 10; + font-family: var(--ifm-font-family); +} + +/* Copy Button Enhancement */ +.clean-btn { + background: rgba(0, 86, 140, 0.1) !important; + border: 1px solid rgba(0, 86, 140, 0.2) !important; + color: var(--ifm-primary) !important; + border-radius: 8px !important; + padding: 0.5rem 1rem !important; + font-weight: 600 !important; + font-size: var(--ifm-font-size-sm) !important; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease) !important; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); +} + +[data-theme="dark"] .clean-btn { + background: rgba(77, 166, 255, 0.1) !important; + border: 1px solid rgba(77, 166, 255, 0.2) !important; + color: var(--ifm-primary-300) !important; +} + +.clean-btn:hover { + background: var(--ifm-primary) !important; + color: white !important; + border-color: var(--ifm-primary) !important; + transform: translateY(-2px) !important; + box-shadow: var(--ifm-shadow-lg) !important; +} + +[data-theme="dark"] .clean-btn:hover { + background: var(--ifm-primary-300) !important; + color: var(--ifm-neutral-900) !important; + border-color: var(--ifm-primary-300) !important; +} + +/* Copy Button Success State */ +.clean-btn[data-copy-state="copied"] { + background: var(--ifm-success) !important; + color: white !important; + border-color: var(--ifm-success) !important; +} + +.clean-btn[data-copy-state="copied"]::after { + content: " ✓"; +} + +/* Line Numbers */ +.prism-code .token-line::before { + content: attr(data-line-number); + color: var(--ifm-neutral-500); + display: inline-block; + width: 3rem; + text-align: right; + margin-right: 1rem; + font-size: var(--ifm-font-size-xs); + user-select: none; +} + +[data-theme="light"] .prism-code .token-line::before { + color: var(--ifm-neutral-400); +} + +/* Highlighted Lines */ +.docusaurus-highlight-code-line { + background-color: rgba(0, 86, 140, 0.1) !important; + display: block; + margin: 0 -1.5rem; + padding: 0 1.5rem; + border-left: 4px solid var(--ifm-primary); +} + +[data-theme="dark"] .docusaurus-highlight-code-line { + background-color: rgba(77, 166, 255, 0.1) !important; + border-left-color: var(--ifm-primary-300); +} + +/* Syntax Highlighting with CNOE Colors */ +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: var(--ifm-neutral-500) !important; + font-style: italic; +} + +.token.punctuation { + color: var(--ifm-neutral-400) !important; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: var(--ifm-accent) !important; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: var(--ifm-success) !important; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: var(--ifm-primary-300) !important; +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: var(--ifm-primary) !important; + font-weight: 600; +} + +[data-theme="dark"] .token.atrule, +[data-theme="dark"] .token.attr-value, +[data-theme="dark"] .token.keyword { + color: var(--ifm-primary-300) !important; +} + +.token.function, +.token.class-name { + color: var(--ifm-info) !important; + font-weight: 600; +} + +.token.regex, +.token.important, +.token.variable { + color: var(--ifm-warning) !important; +} + +/* Inline Code */ +code:not([class*="language-"]) { + background: rgba(0, 86, 140, 0.1) !important; + color: var(--ifm-primary) !important; + border: 1px solid rgba(0, 86, 140, 0.2) !important; + border-radius: 6px !important; + padding: 0.2rem 0.4rem !important; + font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', monospace !important; + font-size: 0.9em !important; + font-weight: 600 !important; +} + +[data-theme="dark"] code:not([class*="language-"]) { + background: rgba(77, 166, 255, 0.1) !important; + color: var(--ifm-primary-300) !important; + border: 1px solid rgba(77, 166, 255, 0.2) !important; +} + +/* Code Block Scrollbar */ +.prism-code::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +.prism-code::-webkit-scrollbar-track { + background: var(--ifm-neutral-800); + border-radius: 4px; +} + +[data-theme="light"] .prism-code::-webkit-scrollbar-track { + background: var(--ifm-neutral-200); +} + +.prism-code::-webkit-scrollbar-thumb { + background: var(--ifm-primary); + border-radius: 4px; +} + +.prism-code::-webkit-scrollbar-thumb:hover { + background: var(--ifm-primary-600); +} + +.hidden-sidebar-item { + display: none !important; +} + +/* Final Integration Styles */ + +/* Ensure smooth scrolling */ +html { + scroll-behavior: smooth; +} + +/* Global focus styles for accessibility */ +*:focus { + outline: 2px solid var(--ifm-primary); + outline-offset: 2px; +} + +/* Skip to content link for accessibility */ +.skip-to-content { + position: absolute; + top: -40px; + left: 6px; + background: var(--ifm-primary); + color: white; + padding: 8px; + text-decoration: none; + border-radius: 4px; + z-index: 1000; + transition: top 0.3s; +} + +.skip-to-content:focus { + top: 6px; +} + +/* Ensure consistent spacing between sections */ +main>div:not(:last-child) { + margin-bottom: 2rem; +} + +/* Loading states for better UX */ +.loading-skeleton { + background: linear-gradient(90deg, var(--ifm-neutral-200) 25%, var(--ifm-neutral-100) 50%, var(--ifm-neutral-200) 75%); + background-size: 200% 100%; + animation: loading-shimmer 2s infinite; +} + +[data-theme="dark"] .loading-skeleton { + background: linear-gradient(90deg, var(--ifm-neutral-700) 25%, var(--ifm-neutral-600) 50%, var(--ifm-neutral-700) 75%); + background-size: 200% 100%; +} + +@keyframes loading-shimmer { + 0% { + background-position: -200% 0; + } + + 100% { + background-position: 200% 0; + } +} + +/* Print styles */ +@media print { + + .navbar, + .footer, + .floating-shape, + .hero-background { + display: none !important; + } + + .hero { + background: white !important; + color: black !important; + } + + * { + animation: none !important; + transition: none !important; + } +} + +/* High contrast mode support */ +@media (prefers-contrast: high) { + :root { + --ifm-primary: #000080; + --ifm-neutral-600: #000000; + --ifm-neutral-400: #666666; + } + + [data-theme="dark"] { + --ifm-primary: #4da6ff; + --ifm-neutral-600: #ffffff; + --ifm-neutral-400: #cccccc; + } +} + +/* Ensure all interactive elements are accessible */ +button, +.button, +a[role="button"], +input, +select, +textarea { + min-height: 44px; + min-width: 44px; +} + +/* Final cleanup */ +.hidden-sidebar-item { + display: none !important; +} + +/* +Global Background Consistency */ +html { + background: var(--ifm-neutral-50); +} + +[data-theme="dark"] html { + background: var(--ifm-neutral-900); +} + +/* Fix body background for all pages */ +body { + background: var(--ifm-neutral-50); +} + +[data-theme="dark"] body { + background: var(--ifm-neutral-900); +} + +/* Main content area background */ +main { + background: var(--ifm-neutral-50); +} + +[data-theme="dark"] main { + background: var(--ifm-neutral-900); +} + +/* Fix search plugin styling */ +.navbar__search { + margin-right: 1rem; +} + +.navbar__search-input { + background: rgba(255, 255, 255, 0.1); + border: 1px solid var(--ifm-neutral-300); + border-radius: 6px; + color: var(--ifm-neutral-700); + padding: 0.5rem 1rem; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); +} + +[data-theme="dark"] .navbar__search-input { + background: rgba(0, 0, 0, 0.2); + border-color: var(--ifm-neutral-600); + color: var(--ifm-neutral-300); +} + +.navbar__search-input:focus { + border-color: var(--ifm-primary); + box-shadow: 0 0 0 2px rgba(0, 86, 140, 0.2); +} + +/* Fix white sections between homepage components */ +.cnoe-section-spacing { + margin: 0; + padding: 0; +} + +/* Docs and Blog page backgrounds */ +.theme-doc-root, +.theme-blog-wrapper { + background: var(--ifm-neutral-50); +} + +[data-theme="dark"] .theme-doc-root, +[data-theme="dark"] .theme-blog-wrapper { + background: var(--ifm-neutral-900); +} + +/* Right sidebar (TOC) styling */ +.theme-doc-toc-desktop { + background: var(--ifm-neutral-50); + border-left: 1px solid var(--ifm-neutral-200); +} + +[data-theme="dark"] .theme-doc-toc-desktop { + background: var(--ifm-neutral-900); + border-left-color: var(--ifm-neutral-700); +} + +.table-of-contents { + padding: 1rem; +} + +.table-of-contents__link { + color: var(--ifm-neutral-600); + font-size: var(--ifm-font-size-sm); + padding: 0.25rem 0.5rem; + border-radius: 4px; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); +} + +[data-theme="dark"] .table-of-contents__link { + color: var(--ifm-neutral-400); +} + +.table-of-contents__link:hover { + background: rgba(0, 86, 140, 0.1); + color: var(--ifm-primary); +} + +[data-theme="dark"] .table-of-contents__link:hover { + background: rgba(77, 166, 255, 0.1); + color: var(--ifm-primary-300); +} + +.table-of-contents__link--active { + background: var(--ifm-primary); + color: white; + font-weight: 600; +} + +/* Blog sidebar styling */ +.theme-blog-sidebar { + background: var(--ifm-neutral-50); + border-right: 1px solid var(--ifm-neutral-200); + padding: 1rem; +} + +[data-theme="dark"] .theme-blog-sidebar { + background: var(--ifm-neutral-900); + border-right-color: var(--ifm-neutral-700); +} + +.theme-blog-sidebar .menu__link { + color: var(--ifm-neutral-700); + padding: 0.5rem 1rem; + border-radius: 6px; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); +} + +[data-theme="dark"] .theme-blog-sidebar .menu__link { + color: var(--ifm-neutral-300); +} + +.theme-blog-sidebar .menu__link:hover { + background: rgba(0, 86, 140, 0.1); + color: var(--ifm-primary); +} + +[data-theme="dark"] .theme-blog-sidebar .menu__link:hover { + background: rgba(77, 166, 255, 0.1); + color: var(--ifm-primary-300); +} + +/* Fix sidebar proportions and active state visibility */ +.menu__link--active { + background: linear-gradient(135deg, var(--ifm-primary) 0%, var(--ifm-primary-600) 100%) !important; + color: white !important; + font-weight: 600 !important; + box-shadow: var(--ifm-shadow-md) !important; +} + +.menu__list-item-collapsible .menu__link { + font-size: var(--ifm-font-size-sm) !important; + padding: 0.75rem 1rem !important; + font-weight: 600 !important; +} + +/* Fix logo sizing for different screen sizes */ +.navbar__logo img { + height: auto; + width: auto; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); +} + +/* Fix search plugin styling */ +.navbar__search { + margin-right: 1rem; + order: 2; +} + +.navbar__search-input { + background: rgba(255, 255, 255, 0.1); + border: 1px solid var(--ifm-neutral-300); + border-radius: 6px; + color: var(--ifm-neutral-700); + padding: 0.5rem 1rem; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); +} + +[data-theme="dark"] .navbar__search-input { + background: rgba(0, 0, 0, 0.2); + border-color: var(--ifm-neutral-600); + color: var(--ifm-neutral-300); +} + +.navbar__search-input:focus { + border-color: var(--ifm-primary); + box-shadow: 0 0 0 2px rgba(0, 86, 140, 0.2); +} + +/* Fix sidebar active state visibility and proportions */ +.menu__link--active { + background: linear-gradient(135deg, var(--ifm-primary) 0%, var(--ifm-primary-600) 100%) !important; + color: white !important; + font-weight: 600 !important; + box-shadow: var(--ifm-shadow-md) !important; + position: relative; +} + +.menu__link--active::before { + content: ''; + position: absolute; + left: -1rem; + top: 50%; + transform: translateY(-50%); + width: 4px; + height: 20px; + background: var(--ifm-accent); + border-radius: 2px; +} + +/* Fix sidebar category proportions */ +.menu__list-item-collapsible .menu__link { + font-size: var(--ifm-font-size-sm) !important; + padding: 0.75rem 1rem !important; + font-weight: 600 !important; + color: var(--ifm-neutral-800) !important; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +[data-theme="dark"] .menu__list-item-collapsible .menu__link { + color: var(--ifm-neutral-200) !important; +} + +.menu__list-item-collapsible .menu__link:hover { + background: rgba(0, 86, 140, 0.05) !important; + transform: none !important; +} + +/* Nested menu items */ +.menu__list .menu__list { + padding-left: 1rem; + border-left: 2px solid var(--ifm-neutral-200); + margin-left: 1rem; +} + +[data-theme="dark"] .menu__list .menu__list { + border-left-color: var(--ifm-neutral-700); +} + +.menu__list .menu__list .menu__link { + font-size: var(--ifm-font-size-sm) !important; + padding: 0.5rem 1rem !important; + color: var(--ifm-neutral-600) !important; +} + +[data-theme="dark"] .menu__list .menu__list .menu__link { + color: var(--ifm-neutral-400) !important; +} + +/* Fix logo sizing for different screen sizes */ +.navbar__logo img { + height: 32px; + width: auto; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); +} + +@media (max-width: 768px) { + .navbar__logo img { + height: 28px; + } +} + +@media (max-width: 480px) { + .navbar__logo img { + height: 24px; + } +} + +/* Fix hero logo sizing */ +.heroLogo { + width: clamp(80px, 15vw, 120px) !important; + height: auto !important; +} + +/* Fix partner logo sizing */ +.partnerLogo { + max-width: clamp(80px, 15vw, 120px) !important; + max-height: clamp(50px, 10vh, 80px) !important; + width: auto !important; + height: auto !important; +} + +/* Right sidebar (TOC) styling */ +.theme-doc-toc-desktop { + background: var(--ifm-neutral-50); + border-left: 1px solid var(--ifm-neutral-200); + padding: 1rem; +} + +[data-theme="dark"] .theme-doc-toc-desktop { + background: var(--ifm-neutral-900); + border-left-color: var(--ifm-neutral-700); +} + +.table-of-contents__link { + color: var(--ifm-neutral-600); + font-size: var(--ifm-font-size-sm); + padding: 0.25rem 0.5rem; + border-radius: 4px; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); + display: block; + margin: 0.125rem 0; +} + +[data-theme="dark"] .table-of-contents__link { + color: var(--ifm-neutral-400); +} + +.table-of-contents__link:hover { + background: rgba(0, 86, 140, 0.1); + color: var(--ifm-primary); + text-decoration: none; +} + +[data-theme="dark"] .table-of-contents__link:hover { + background: rgba(77, 166, 255, 0.1); + color: var(--ifm-primary-300); +} + +.table-of-contents__link--active { + background: var(--ifm-primary); + color: white; + font-weight: 600; +} + +/* Blog sidebar styling */ +.theme-blog-sidebar { + background: var(--ifm-neutral-50); + border-right: 1px solid var(--ifm-neutral-200); + padding: 1rem; +} + +[data-theme="dark"] .theme-blog-sidebar { + background: var(--ifm-neutral-900); + border-right-color: var(--ifm-neutral-700); +} + +.theme-blog-sidebar .menu__link { + color: var(--ifm-neutral-700); + padding: 0.5rem 1rem; + border-radius: 6px; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); + font-size: var(--ifm-font-size-sm); +} + +[data-theme="dark"] .theme-blog-sidebar .menu__link { + color: var(--ifm-neutral-300); +} + +.theme-blog-sidebar .menu__link:hover { + background: rgba(0, 86, 140, 0.1); + color: var(--ifm-primary); + transform: translateX(4px); +} + +[data-theme="dark"] .theme-blog-sidebar .menu__link:hover { + background: rgba(77, 166, 255, 0.1); + color: var(--ifm-primary-300); +} + +/* Global background consistency */ +html { + background: var(--ifm-neutral-50); +} + +[data-theme="dark"] html { + background: var(--ifm-neutral-900); +} + +body { + background: var(--ifm-neutral-50); +} + +[data-theme="dark"] body { + background: var(--ifm-neutral-900); +} + +main { + background: var(--ifm-neutral-50); +} + +[data-theme="dark"] main { + background: var(--ifm-neutral-900); +} + +/* Docs and Blog page backgrounds */ +.theme-doc-root, +.theme-blog-wrapper { + background: var(--ifm-neutral-50); +} + +[data-theme="dark"] .theme-doc-root, +[data-theme="dark"] .theme-blog-wrapper { + background: var(--ifm-neutral-900); +} + +/* Fix white sections between homepage components */ +.cnoe-section-spacing { + margin: 0; + padding: 0; +} + +/* Mobile sidebar improvements */ +@media (max-width: 996px) { + .theme-doc-sidebar-container { + background: rgba(248, 250, 252, 0.95); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + } + + [data-theme="dark"] .theme-doc-sidebar-container { + background: rgba(30, 41, 59, 0.95); + } + + .menu__link { + padding: 1rem; + font-size: var(--ifm-font-size-base); + } + + .menu__link:hover { + transform: translateX(8px); + } +} + +/* Touch-friendly enhancements for mobile */ +@media (max-width: 768px) { + .menu__link { + min-height: 44px; + display: flex; + align-items: center; + } +} + + +/* Additiona +l Dark Mode Enhancements */ + +/* Ensure proper dark mode for all page backgrounds */ +[data-theme="dark"] html, +[data-theme="dark"] body { + background: var(--ifm-neutral-900) !important; + color: var(--ifm-neutral-300) !important; +} + +/* Enhanced dark mode for hero section gradient */ +[data-theme="dark"] .hero-gradient-bg { + background: linear-gradient(135deg, + var(--ifm-neutral-900) 0%, + rgba(15, 23, 42, 0.95) 25%, + rgba(30, 41, 59, 0.9) 50%, + rgba(15, 23, 42, 0.95) 75%, + var(--ifm-neutral-900) 100%) !important; + background-size: 400% 400%; +} + +/* Enhanced dark mode for floating shapes */ +[data-theme="dark"] .floating-shape { + background: linear-gradient(135deg, rgba(77, 166, 255, 0.08), rgba(77, 166, 255, 0.12)) !important; + opacity: 0.6; +} + +[data-theme="dark"] .floating-shape.container { + background: linear-gradient(135deg, rgba(77, 166, 255, 0.1), rgba(100, 116, 139, 0.1)) !important; +} + +[data-theme="dark"] .floating-shape.kubernetes { + background: linear-gradient(135deg, rgba(77, 166, 255, 0.12), rgba(59, 130, 246, 0.1)) !important; +} + +[data-theme="dark"] .floating-shape.cloud { + background: linear-gradient(135deg, rgba(100, 116, 139, 0.1), rgba(71, 85, 105, 0.1)) !important; +} + +[data-theme="dark"] .floating-shape.platform { + background: linear-gradient(135deg, rgba(255, 139, 90, 0.1), rgba(255, 107, 53, 0.1)) !important; +} + +/* Enhanced dark mode for glassmorphism effects */ +[data-theme="dark"] .navbar { + background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.95) 100%) !important; + border-bottom: 1px solid rgba(71, 85, 105, 0.3) !important; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important; +} + +[data-theme="dark"] .featureCardInner, +[data-theme="dark"] .missionVisionCard, +[data-theme="dark"] .newsCardLink { + background: rgba(30, 41, 59, 0.9) !important; + border: 1px solid rgba(71, 85, 105, 0.4) !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; +} + +[data-theme="dark"] .featureCardInner:hover, +[data-theme="dark"] .missionVisionCard:hover, +[data-theme="dark"] .newsCardLink:hover { + background: rgba(30, 41, 59, 0.95) !important; + border-color: rgba(77, 166, 255, 0.6) !important; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important; +} + +/* Enhanced dark mode for cards */ +[data-theme="dark"] .card { + background: rgba(30, 41, 59, 0.8) !important; + border: 1px solid rgba(71, 85, 105, 0.4) !important; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2) !important; +} + +[data-theme="dark"] .card:hover { + background: rgba(30, 41, 59, 0.9) !important; + border-color: rgba(77, 166, 255, 0.5) !important; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important; +} + +/* Enhanced dark mode for text elements */ +[data-theme="dark"] h1, +[data-theme="dark"] h2, +[data-theme="dark"] h3, +[data-theme="dark"] h4, +[data-theme="dark"] h5, +[data-theme="dark"] h6 { + color: var(--ifm-neutral-100) !important; +} + +[data-theme="dark"] p, +[data-theme="dark"] li, +[data-theme="dark"] .description { + color: var(--ifm-neutral-300) !important; +} + +/* Enhanced dark mode for links */ +[data-theme="dark"] a { + color: var(--ifm-primary-300) !important; +} + +[data-theme="dark"] a:hover { + color: var(--ifm-primary-200) !important; +} + +/* Enhanced dark mode for code elements */ +[data-theme="dark"] code { + background: rgba(71, 85, 105, 0.3) !important; + color: var(--ifm-primary-300) !important; + border: 1px solid rgba(71, 85, 105, 0.5) !important; +} + +[data-theme="dark"] pre { + background: var(--ifm-neutral-800) !important; + border: 1px solid var(--ifm-neutral-700) !important; +} + +[data-theme="dark"] pre code { + background: transparent !important; + border: none !important; + color: var(--ifm-neutral-300) !important; +} + +/* Enhanced dark mode for tables */ +[data-theme="dark"] table { + background: var(--ifm-neutral-800) !important; + border: 1px solid var(--ifm-neutral-700) !important; +} + +[data-theme="dark"] th { + background: var(--ifm-neutral-700) !important; + color: var(--ifm-neutral-100) !important; + border-bottom: 2px solid var(--ifm-neutral-600) !important; +} + +[data-theme="dark"] td { + color: var(--ifm-neutral-300) !important; + border-bottom: 1px solid var(--ifm-neutral-700) !important; +} + +[data-theme="dark"] tr:hover { + background: rgba(71, 85, 105, 0.2) !important; +} + +/* Enhanced dark mode for blockquotes */ +[data-theme="dark"] blockquote { + background: rgba(30, 41, 59, 0.5) !important; + border-left: 4px solid var(--ifm-primary-500) !important; + color: var(--ifm-neutral-300) !important; +} + +/* Enhanced dark mode for horizontal rules */ +[data-theme="dark"] hr { + border-color: var(--ifm-neutral-700) !important; +} + +/* Enhanced dark mode for any remaining utility classes */ +[data-theme="dark"] .shadow { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important; +} + +[data-theme="dark"] .shadow-lg { + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2) !important; +} + +[data-theme="dark"] .shadow-xl { + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important; +} + +/* Ensure proper contrast for any missed elements */ +[data-theme="dark"] .text-light { + color: var(--ifm-neutral-300) !important; +} + +[data-theme="dark"] .text-dark { + color: var(--ifm-neutral-100) !important; +} + +[data-theme="dark"] .bg-primary { + background: var(--ifm-primary-600) !important; +} + +[data-theme="dark"] .bg-secondary { + background: var(--ifm-neutral-700) !important; +} + +/* Final enhancement for overall dark mode consistency */ +[data-theme="dark"] * { + scrollbar-width: thin; + scrollbar-color: var(--ifm-neutral-600) var(--ifm-neutral-800); +} + +[data-theme="dark"] *::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +[data-theme="dark"] *::-webkit-scrollbar-track { + background: var(--ifm-neutral-800); +} + +[data-theme="dark"] *::-webkit-scrollbar-thumb { + background: var(--ifm-neutral-600); + border-radius: 4px; +} + +[data-theme="dark"] *::-webkit-scrollbar-thumb:hover { + background: var(--ifm-neutral-500); +} + +/* Ensure proper selection colors in dark mode */ +[data-theme="dark"] ::selection { + background: rgba(77, 166, 255, 0.3) !important; + color: var(--ifm-neutral-100) !important; +} + +[data-theme="dark"] ::-moz-selection { + background: rgba(77, 166, 255, 0.3) !important; + color: var(--ifm-neutral-100) !important; +} + +/* Homep +age Background Consistency */ +.hero, +.features, +.cnoeSection, +.members, +.newsSection, +.learnMoreSection, +.partnerContainer, +.modernHero, +.heroBanner { + background: linear-gradient(135deg, + var(--ifm-neutral-50) 0%, + rgba(248, 250, 252, 0.8) 50%, + var(--ifm-neutral-50) 100%) !important; + position: relative; +} + +[data-theme="dark"] .hero, +[data-theme="dark"] .features, +[data-theme="dark"] .cnoeSection, +[data-theme="dark"] .members, +[data-theme="dark"] .newsSection, +[data-theme="dark"] .learnMoreSection, +[data-theme="dark"] .partnerContainer, +[data-theme="dark"] .modernHero, +[data-theme="dark"] .heroBanner { + background: linear-gradient(135deg, + var(--ifm-neutral-900) 0%, + rgba(15, 23, 42, 0.8) 50%, + var(--ifm-neutral-900) 100%) !important; +} + +/* Enhanced Navbar Items */ +.navbar__item { + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); +} + +.navbar__link { + font-weight: 500; + color: var(--ifm-neutral-700); + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); + border-radius: 6px; + padding: 0.5rem 1rem; + position: relative; + overflow: hidden; +} + +[data-theme="dark"] .navbar__link { + color: var(--ifm-neutral-300); +} + +.navbar__link:hover { + color: var(--ifm-primary); + background: rgba(0, 86, 140, 0.1); + transform: translateY(-1px); +} + +[data-theme="dark"] .navbar__link:hover { + color: var(--ifm-primary-300); + background: rgba(77, 166, 255, 0.1); +} + +.navbar__link--active { + color: var(--ifm-primary); + background: linear-gradient(135deg, rgba(0, 86, 140, 0.1) 0%, rgba(0, 86, 140, 0.05) 100%); + font-weight: 600; +} + +[data-theme="dark"] .navbar__link--active { + color: var(--ifm-primary-300); + background: linear-gradient(135deg, rgba(77, 166, 255, 0.1) 0%, rgba(77, 166, 255, 0.05) 100%); +} + +/* Enhanced Logo */ +.navbar__logo { + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); +} + +.navbar__logo:hover { + transform: scale(1.05); +} + +/* Mobile Navbar Enhancements */ +.navbar-sidebar { + background: rgba(248, 250, 252, 0.95); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); +} + +[data-theme="dark"] .navbar-sidebar { + background: rgba(30, 41, 59, 0.95); +} + +.navbar-sidebar__item { + padding: 0.5rem 1rem; +} + +.navbar-sidebar__link { + border-radius: 8px; + padding: 0.75rem 1rem; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); + font-weight: 500; +} + +.navbar-sidebar__link:hover { + background: rgba(0, 86, 140, 0.1); + color: var(--ifm-primary); + transform: translateX(4px); +} + +[data-theme="dark"] .navbar-sidebar__link:hover { + background: rgba(77, 166, 255, 0.1); + color: var(--ifm-primary-300); +} + +/* Enhanced Social Icons */ +.navbar--calendar-link, +.navbar--slack-link, +.navbar--github-link { + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); + border-radius: 8px; +} + +.navbar--calendar-link:hover, +.navbar--slack-link:hover, +.navbar--github-link:hover { + background: rgba(0, 86, 140, 0.1); + transform: translateY(-2px) scale(1.1); +} + +[data-theme="dark"] .navbar--calendar-link:hover, +[data-theme="dark"] .navbar--slack-link:hover, +[data-theme="dark"] .navbar--github-link:hover { + background: rgba(77, 166, 255, 0.1); +} + +/* Seamless Section Transitions */ +.hero+.features, +.features+.cnoeSection, +.cnoeSection+.members, +.members+.newsSection, +.newsSection+.learnMoreSection { + border-top: none; + margin-top: 0; + padding-top: 0; +} + +/* Remove any conflicting backgrounds */ +.container, +.row, +.col { + background: transparent !important; +} + +/* Ensure main content wrapper has consistent background */ +.main-wrapper, +.docMainContainer, +.docRoot { + background: transparent !important; +} + +/* Homepage specific body background */ +body[class*="homepage"] { + background: linear-gradient(135deg, + var(--ifm-neutral-50) 0%, + rgba(248, 250, 252, 0.8) 50%, + var(--ifm-neutral-50) 100%); +} + +[data-theme="dark"] body[class*="homepage"] { + background: linear-gradient(135deg, + var(--ifm-neutral-900) 0%, + rgba(15, 23, 42, 0.8) 50%, + var(--ifm-neutral-900) 100%); +} + +/* Enhanced navbar brand area */ +.navbar__brand { + display: flex; + align-items: center; + margin-right: 1rem; +} + +.navbar__title { + font-weight: 700; + color: var(--ifm-primary); + margin-left: 0.5rem; + font-size: 1.25rem; +} + +[data-theme="dark"] .navbar__title { + color: var(--ifm-primary-300); +} + +/* Enhanced search styling if present */ +.navbar__search { + margin-right: 1rem; +} + +.navbar__search-input { + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(0, 86, 140, 0.2); + border-radius: 6px; + color: var(--ifm-neutral-700); + padding: 0.5rem 1rem; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); + backdrop-filter: blur(10px); +} + +[data-theme="dark"] .navbar__search-input { + background: rgba(0, 0, 0, 0.2); + border-color: rgba(77, 166, 255, 0.2); + color: var(--ifm-neutral-300); +} + +.navbar__search-input:focus { + border-color: var(--ifm-primary); + box-shadow: 0 0 0 2px rgba(0, 86, 140, 0.2); + background: rgba(255, 255, 255, 0.2); +} + +[data-theme="dark"] .navbar__search-input:focus { + border-color: var(--ifm-primary-300); + box-shadow: 0 0 0 2px rgba(77, 166, 255, 0.2); + background: rgba(0, 0, 0, 0.3); +} + +/* Responsive navbar adjustments */ +@media (max-width: 996px) { + .navbar__items { + gap: 0.25rem; + } + + .navbar__search { + margin-right: 0.5rem; + } + + .navbar--calendar-link, + .navbar--slack-link, + .navbar--github-link { + width: 28px; + height: 28px; + padding: 4px; + } +} + +@media (max-width: 768px) { + .navbar__brand { + margin-right: 0.5rem; + } + + .navbar__title { + font-size: 1.1rem; + } + + .navbar__search { + display: none; + /* Hide search on very small screens */ + } +} + +/ +/* Homepage Background Consistency - Animated Gradient Sync */ +.hero, +.features, +.cnoeSection, +.members, +.newsSection, +.learnMoreSection, +.partnerContainer, +.modernHero, +.heroBanner, +.heroContainer, +.missionVisionSection, +.valuePropositionSection { + background: linear-gradient(135deg, + var(--ifm-primary-50) 0%, + var(--ifm-primary-100) 25%, + var(--ifm-neutral-50) 50%, + var(--ifm-primary-100) 75%, + var(--ifm-primary-50) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; + position: relative; +} + +/* Ensure body and main containers also have animated background */ +body.homepage, +.main-wrapper, +.docMainContainer, +.docRoot { + background: linear-gradient(135deg, + var(--ifm-primary-50) 0%, + var(--ifm-primary-100) 25%, + var(--ifm-neutral-50) 50%, + var(--ifm-primary-100) 75%, + var(--ifm-primary-50) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; +} + +/* Remove any conflicting backgrounds from containers */ +.container, +.row, +.col, +.container-fluid { + background: transparent !important; +} + +/* Dark theme animated consistency */ +[data-theme="dark"] .hero, +[data-theme="dark"] .features, +[data-theme="dark"] .cnoeSection, +[data-theme="dark"] .members, +[data-theme="dark"] .newsSection, +[data-theme="dark"] .learnMoreSection, +[data-theme="dark"] .partnerContainer, +[data-theme="dark"] .modernHero, +[data-theme="dark"] .heroBanner, +[data-theme="dark"] .heroContainer, +[data-theme="dark"] .missionVisionSection, +[data-theme="dark"] .valuePropositionSection { + background: linear-gradient(135deg, + var(--ifm-neutral-900) 0%, + var(--ifm-primary-900) 25%, + var(--ifm-neutral-800) 50%, + var(--ifm-primary-800) 75%, + var(--ifm-neutral-900) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; +} + +[data-theme="dark"] body.homepage, +[data-theme="dark"] .main-wrapper, +[data-theme="dark"] .docMainContainer, +[data-theme="dark"] .docRoot { + background: linear-gradient(135deg, + var(--ifm-neutral-900) 0%, + var(--ifm-primary-900) 25%, + var(--ifm-neutral-800) 50%, + var(--ifm-primary-800) 75%, + var(--ifm-neutral-900) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; +} + +/* Seamless Section Transitions */ +.hero+.features, +.features+.cnoeSection, +.cnoeSection+.members, +.members+.newsSection, +.newsSection+.learnMoreSection { + border-top: none; + margin-top: 0; + padding-top: 0; +} + +/* Override any Docusaurus default backgrounds for homepage */ +.homepage .main-wrapper, +.homepage .docMainContainer, +.homepage .docRoot, +.homepage main { + background: #e6f2ff !important; +} + +[data-theme="dark"] .homepage .main-wrapper, +[data-theme="dark"] .homepage .docMainContainer, +[data-theme="dark"] .homepage .docRoot, +[data-theme="dark"] .homepage main { + background: #1a202c !important; +} + +/* Ensure all homepage sections have the same background */ +.homepage section, +.homepage div[class*="section"], +.homepage div[class*="Section"] { + background: #e6f2ff !important; +} + +[data-theme="dark"] .homepage section, +[data-theme="dark"] .homepage div[class*="section"], +[data-theme="dark"] .homepage div[class*="Section"] { + background: #1a202c !important; +} + +/* En +sure all homepage sections have animated background synchronized with hero */ +.homepage section, +.homepage div[class*="section"], +.homepage div[class*="Section"] { + background: linear-gradient(135deg, + var(--ifm-primary-50) 0%, + var(--ifm-primary-100) 25%, + var(--ifm-neutral-50) 50%, + var(--ifm-primary-100) 75%, + var(--ifm-primary-50) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; +} + +[data-theme="dark"] .homepage section, +[data-theme="dark"] .homepage div[class*="section"], +[data-theme="dark"] .homepage div[class*="Section"] { + background: linear-gradient(135deg, + var(--ifm-neutral-900) 0%, + var(--ifm-primary-900) 25%, + var(--ifm-neutral-800) 50%, + var(--ifm-primary-800) 75%, + var(--ifm-neutral-900) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; +} + +/* Override any Docusaurus default backgrounds for homepage */ +.homepage .main-wrapper, +.homepage .docMainContainer, +.homepage .docRoot, +.homepage main { + background: linear-gradient(135deg, + var(--ifm-primary-50) 0%, + var(--ifm-primary-100) 25%, + var(--ifm-neutral-50) 50%, + var(--ifm-primary-100) 75%, + var(--ifm-primary-50) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; +} + +[data-theme="dark"] .homepage .main-wrapper, +[data-theme="dark"] .homepage .docMainContainer, +[data-theme="dark"] .homepage .docRoot, +[data-theme="dark"] .homepage main { + background: linear-gradient(135deg, + var(--ifm-neutral-900) 0%, + var(--ifm-primary-900) 25%, + var(--ifm-neutral-800) 50%, + var(--ifm-primary-800) 75%, + var(--ifm-neutral-900) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; +} + +/* +Final comprehensive rule to ensure all homepage sections sync with hero animation */ +body[class*="homepage"] *[class*="Section"], +body[class*="homepage"] *[class*="section"], +body[class*="homepage"] .features, +body[class*="homepage"] .members, +body[class*="homepage"] .newsSection, +body[class*="homepage"] .cnoeSection, +body[class*="homepage"] .learnMoreSection { + background: linear-gradient(135deg, + var(--ifm-primary-50) 0%, + var(--ifm-primary-100) 25%, + var(--ifm-neutral-50) 50%, + var(--ifm-primary-100) 75%, + var(--ifm-primary-50) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; +} + +[data-theme="dark"] body[class*="homepage"] *[class*="Section"], +[data-theme="dark"] body[class*="homepage"] *[class*="section"], +[data-theme="dark"] body[class*="homepage"] .features, +[data-theme="dark"] body[class*="homepage"] .members, +[data-theme="dark"] body[class*="homepage"] .newsSection, +[data-theme="dark"] body[class*="homepage"] .cnoeSection, +[data-theme="dark"] body[class*="homepage"] .learnMoreSection { + background: linear-gradient(135deg, + var(--ifm-neutral-900) 0%, + var(--ifm-primary-900) 25%, + var(--ifm-neutral-800) 50%, + var(--ifm-primary-800) 75%, + var(--ifm-neutral-900) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; +} + +/* Ensure reduced motion support for the animated backgrounds */ +@media (prefers-reduced-motion: reduce) { + + body[class*="homepage"] *[class*="Section"], + body[class*="homepage"] *[class*="section"], + body[class*="homepage"] .features, + body[class*="homepage"] .members, + body[class*="homepage"] .newsSection, + body[class*="homepage"] .cnoeSection, + body[class*="homepage"] .learnMoreSection { + animation: none !important; + background: var(--ifm-primary-50) !important; + } + + [data-theme="dark"] body[class*="homepage"] *[class*="Section"], + [data-theme="dark"] body[class*="homepage"] *[class*="section"], + [data-theme="dark"] body[class*="homepage"] .features, + [data-theme="dark"] body[class*="homepage"] .members, + [data-theme="dark"] body[class*="homepage"] .newsSection, + [data-theme="dark"] body[class*="homepage"] .cnoeSection, + [data-theme="dark"] body[class*="homepage"] .learnMoreSection { + background: var(--ifm-neutral-900) !important; + } +} + +/* + Remove white lines between homepage sections */ +.homepage section, +.homepage .hero, +.homepage .features, +.homepage .cnoeSection, +.homepage .members, +.homepage .newsSection, +.homepage .learnMoreSection, +.homepage main, +.homepage main>div { + margin: 0 !important; + padding-top: 0 !important; + padding-bottom: 0 !important; + border: none !important; + box-shadow: none !important; +} + +/* Ensure containers don't add white backgrounds */ +.homepage .container, +.homepage .container-fluid, +.homepage .row, +.homepage .col { + background: transparent !important; + margin: 0 !important; + padding-left: 1rem !important; + padding-right: 1rem !important; + border: none !important; + box-shadow: none !important; +} + +/* Remove any default Docusaurus spacing */ +.homepage main>div:not(:first-child) { + margin-top: 0 !important; +} + +.homepage main>div:not(:last-child) { + margin-bottom: 0 !important; +} + +/* Ensure sections touch each other */ +.homepage .hero, +.homepage .features, +.homepage .cnoeSection, +.homepage .members, +.homepage .newsSection, +.homepage .learnMoreSection { + border-top: none !important; + border-bottom: none !important; + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +/* Remove any card or component backgrounds that might show as white lines */ +.homepage .description, +.homepage .content, +.homepage .card, +.homepage .panel { + background: transparent !important; + border: none !important; + box-shadow: none !important; +} + +/* Ensure the main wrapper doesn't add spacing */ +.homepage .main-wrapper { + padding: 0 !important; + margin: 0 !important; +} + +/* Remove any potential white backgrounds from nested elements */ +.homepage *[style*="background-color: white"], +.homepage *[style*="background-color: #fff"], +.homepage *[style*="background: white"], +.homepage *[style*="background: #fff"] { + background: transparent !important; +} + +/* Aggres +sive fix for white lines between homepage sections */ +.homepage, +.homepage body, +.homepage html { + margin: 0 !important; + padding: 0 !important; +} + +/* Remove all margins and padding from homepage layout elements */ +.homepage .theme-doc-wrapper, +.homepage .main-wrapper, +.homepage main, +.homepage article, +.homepage section, +.homepage div[class*="Section"], +.homepage div[class*="section"] { + margin: 0 !important; + padding-top: 0 !important; + padding-bottom: 0 !important; + border: none !important; + box-shadow: none !important; + background: transparent !important; +} + +/* Ensure sections have proper padding only on sides */ +.homepage .hero, +.homepage .features, +.homepage .cnoeSection, +.homepage .members, +.homepage .newsSection, +.homepage .learnMoreSection { + padding-top: 5rem !important; + padding-bottom: 5rem !important; + padding-left: 0 !important; + padding-right: 0 !important; + margin: 0 !important; + border: none !important; +} + +/* Remove any potential white space from containers */ +.homepage .container, +.homepage .container-fluid { + background: transparent !important; + border: none !important; + box-shadow: none !important; + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +/* Fix any potential Layout component spacing */ +.homepage .theme-doc-root, +.homepage .docMainContainer, +.homepage .docRoot { + padding: 0 !important; + margin: 0 !important; + background: transparent !important; +} + +/* Remove any default spacing from React components */ +.homepage>div, +.homepage main>div, +.homepage section>div { + margin: 0 !important; + background: transparent !important; +} + +/* Ensure no white backgrounds leak through */ +.homepage * { + box-sizing: border-box; +} + +.homepage *:not(.hero):not(.features):not(.cnoeSection):not(.members):not(.newsSection):not(.learnMoreSection) { + background: transparent !important; +} + +/* Force remove any inline styles that might add white backgrounds */ +.homepage [style*="background: white"], +.homepage [style*="background: #fff"], +.homepage [style*="background-color: white"], +.homepage [style*="background-color: #fff"] { + background: transparent !important; +} + +/* Remove any potential borders or outlines */ +.homepage * { + border: none !important; + outline: none !important; +} + +/* Restore only necessary borders for interactive elements */ +.homepage button, +.homepage .button, +.homepage input, +.homepage select, +.homepage textarea { + border: 1px solid rgba(0, 0, 0, 0.1) !important; +} + +/ * Target specific Docusaurus layout elements that might cause white lines */ .homepage .theme-doc-wrapper .main-wrapper { + padding: 0 !important; + margin: 0 !important; +} + +.homepage .theme-doc-wrapper .main-wrapper main { + padding: 0 !important; + margin: 0 !important; +} + +/* Remove any potential spacing from scroll animation wrappers */ +.homepage div[data-scroll-animation] { + margin: 0 !important; + padding: 0 !important; + background: transparent !important; +} + +/* Ensure Layout component doesn't add spacing */ +.homepage .theme-layout { + padding: 0 !important; + margin: 0 !important; +} + +/* Remove spacing from any wrapper divs */ +.homepage main>div:first-child, +.homepage main>div:last-child, +.homepage main>div:nth-child(n) { + margin: 0 !important; + padding: 0 !important; + background: transparent !important; +} + +/* Force sections to be flush against each other */ +.homepage .hero+main, +.homepage main .features, +.homepage main .cnoeSection, +.homepage main .members, +.homepage main .newsSection, +.homepage main .learnMoreSection { + margin-top: 0 !important; + margin-bottom: 0 !important; + border-top: none !important; + border-bottom: none !important; +} + +/* Remove any potential white space from the Partners component wrapper */ +.homepage .members { + margin: 0 !important; + padding: 5rem 0 !important; +} + +/* Remove any potential white space from the CNOENews component wrapper */ +.homepage .newsSection { + margin: 0 !important; + padding: 5rem 0 !important; +} + +/* Ensure the learn more section is flush */ +.homepage .learnMoreSection { + margin: 0 !important; + padding: 4rem 0 !important; +} + +/* +Target the exact HTML structure causing white gaps */ + +/* Remove spacing from the main element */ +.homepage main { + margin: 0 !important; + padding: 0 !important; + background: transparent !important; + border: none !important; +} + +/* Remove spacing from scroll animation wrapper divs */ +.homepage div[data-scroll-animation] { + margin: 0 !important; + padding: 0 !important; + background: transparent !important; + border: none !important; + display: block !important; +} + +/* Specifically target the transition between main and outside divs */ +.homepage main+div[data-scroll-animation] { + margin-top: 0 !important; + border-top: none !important; +} + +/* Remove any spacing between consecutive scroll animation divs */ +.homepage div[data-scroll-animation]+div[data-scroll-animation] { + margin-top: 0 !important; + border-top: none !important; +} + +/* Force the Layout component to have no spacing */ +.homepage .theme-layout { + margin: 0 !important; + padding: 0 !important; +} + +/* Remove any potential spacing from the Layout wrapper */ +.homepage .theme-layout>div { + margin: 0 !important; + padding: 0 !important; +} + +/* Ensure the header and main are flush */ +.homepage header+main { + margin-top: 0 !important; + border-top: none !important; +} + +/* Remove any browser default spacing */ +.homepage * { + margin-block-start: 0 !important; + margin-block-end: 0 !important; + margin-inline-start: 0 !important; + margin-inline-end: 0 !important; +} + +/* Force all homepage sections to be absolutely flush */ +.homepage .hero, +.homepage .cnoeSection, +.homepage .features, +.homepage .members, +.homepage .newsSection, +.homepage .learnMoreSection { + display: block !important; + margin: 0 !important; + padding: 5rem 0 !important; + border: none !important; + vertical-align: top !important; +} + +/* Remove any line-height or font-size that might create spacing */ +.homepage { + line-height: 1 !important; + font-size: 0 !important; +} + +.homepage * { + font-size: initial !important; + line-height: initial !important; +} + +/* Nuclear option: remove ALL spacing from ALL elements */ +.homepage, +.homepage * { + box-sizing: border-box !important; +} + +.homepage>*, +.homepage main>*, +.homepage section>*, +.homepage div>* { + margin: 0 !important; + padding: 0 !important; + border: none !important; +} + +/* Restore only the necessary padding for content */ +.homepage .hero .heroContainer, +.homepage .cnoeSection .container, +.homepage .features .container, +.homepage .members .container, +.homepage .newsSection .container, +.homepage .learnMoreSection .container { + padding: 2rem !important; +} + +/ * Overlap sections slightly to eliminate any potential gaps */ .homepage .cnoeSection { + margin-top: -1px !important; +} + +.homepage .features { + margin-top: -1px !important; +} + +.homepage .members { + margin-top: -1px !important; +} + +.homepage .newsSection { + margin-top: -1px !important; +} + +.homepage .learnMoreSection { + margin-top: -1px !important; +} + +/* Alternative approach: use negative margins to pull sections together */ +.homepage main>div:not(:first-child) { + margin-top: -2px !important; +} + +.homepage main+div { + margin-top: -2px !important; +} + +.homepage div[data-scroll-animation]+div[data-scroll-animation] { + margin-top: -2px !important; +} + +/* Ensure sections have enough z-index to overlap properly */ +.homepage .hero { + z-index: 1; + position: relative; +} + +.homepage .cnoeSection { + z-index: 2; + position: relative; +} + +.homepage .features { + z-index: 3; + position: relative; +} + +.homepage .members { + z-index: 4; + position: relative; +} + +.homepage .newsSection { + z-index: 5; + position: relative; +} + +.homepage .learnMoreSection { + z-index: 6; + position: relative; +} + +/ * Aggressive approach: Extend backgrounds to cover any gaps */ .homepage .hero, +.homepage .cnoeSection, +.homepage .features, +.homepage .members, +.homepage .newsSection, +.homepage .learnMoreSection { + /* Extend the background beyond the element boundaries */ + position: relative !important; + margin-top: -10px !important; + margin-bottom: -10px !important; + padding-top: calc(5rem + 10px) !important; + padding-bottom: calc(5rem + 10px) !important; +} + +/* Make sure the first section doesn't have negative top margin */ +.homepage .hero { + margin-top: 0 !important; + padding-top: 5rem !important; +} + +/* Make sure the last section doesn't have negative bottom margin */ +.homepage .learnMoreSection { + margin-bottom: 0 !important; + padding-bottom: 4rem !important; +} + +/* Alternative approach: Use pseudo-elements to fill gaps */ +.homepage .cnoeSection::after, +.homepage .features::after, +.homepage .members::after, +.homepage .newsSection::after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + right: 0; + height: 10px; + background: linear-gradient(135deg, + var(--ifm-primary-50) 0%, + var(--ifm-primary-100) 25%, + var(--ifm-neutral-50) 50%, + var(--ifm-primary-100) 75%, + var(--ifm-primary-50) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; + z-index: 10; +} + +[data-theme="dark"] .homepage .cnoeSection::after, +[data-theme="dark"] .homepage .features::after, +[data-theme="dark"] .homepage .members::after, +[data-theme="dark"] .homepage .newsSection::after { + background: linear-gradient(135deg, + var(--ifm-neutral-900) 0%, + var(--ifm-primary-900) 25%, + var(--ifm-neutral-800) 50%, + var(--ifm-primary-800) 75%, + var(--ifm-neutral-900) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; +} + +/* Nuclear option: Apply background to the entire page */ +.homepage { + background: linear-gradient(135deg, + var(--ifm-primary-50) 0%, + var(--ifm-primary-100) 25%, + var(--ifm-neutral-50) 50%, + var(--ifm-primary-100) 75%, + var(--ifm-primary-50) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; + background-attachment: fixed !important; +} + +[data-theme="dark"] .homepage { + background: linear-gradient(135deg, + var(--ifm-neutral-900) 0%, + var(--ifm-primary-900) 25%, + var(--ifm-neutral-800) 50%, + var(--ifm-primary-800) 75%, + var(--ifm-neutral-900) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; + background-attachment: fixed !important; +} + +/* Make all sections have transparent backgrounds so the page background shows through */ +.homepage .hero, +.homepage .cnoeSection, +.homepage .features, +.homepage .members, +.homepage .newsSection, +.homepage .learnMoreSection { + background: transparent !important; +} + +/* Apply the animated background to the html and body elements */ +.homepage html, +.homepage body { + background: linear-gradient(135deg, + var(--ifm-primary-50) 0%, + var(--ifm-primary-100) 25%, + var(--ifm-neutral-50) 50%, + var(--ifm-primary-100) 75%, + var(--ifm-primary-50) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; + background-attachment: fixed !important; +} + +[data-theme="dark"] .homepage html, +[data-theme="dark"] .homepage body { + background: linear-gradient(135deg, + var(--ifm-neutral-900) 0%, + var(--ifm-primary-900) 25%, + var(--ifm-neutral-800) 50%, + var(--ifm-primary-800) 75%, + var(--ifm-neutral-900) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; + background-attachment: fixed !important; +} \ No newline at end of file diff --git a/src/css/dark-mode-fixes.css b/src/css/dark-mode-fixes.css new file mode 100644 index 000000000..1df5fafdc --- /dev/null +++ b/src/css/dark-mode-fixes.css @@ -0,0 +1,679 @@ +/* Critical Dark Mode Fixes */ + +/* Fix dark mode backgrounds */ +[data-theme="dark"] { + /* Ensure proper dark backgrounds - using lighter shades for better readability */ + --ifm-background-color: #1a202c !important; + --ifm-background-surface-color: #2d3748 !important; + + /* Fix text colors - using lighter text for better contrast */ + --ifm-font-color-base: #e2e8f0 !important; + --ifm-font-color-secondary: #cbd5e1 !important; + + /* Fix card backgrounds */ + --ifm-card-background-color: #2d3748 !important; + + /* Fix content wrapper backgrounds */ + --ifm-color-content-secondary: #cbd5e1 !important; + --ifm-color-emphasis-100: #2d3748 !important; + --ifm-color-emphasis-200: #4a5568 !important; + --ifm-color-emphasis-300: #718096 !important; +} + +/* Fix dark mode for all page backgrounds */ +[data-theme="dark"] html, +[data-theme="dark"] body, +[data-theme="dark"] main, +[data-theme="dark"] .theme-doc-root, +[data-theme="dark"] .theme-blog-wrapper { + background: #1a202c !important; + color: #e2e8f0 !important; +} + +/* Fix dark mode for components - Animated Gradient Sync */ +[data-theme="dark"] .features, +[data-theme="dark"] .cnoeSection, +[data-theme="dark"] .members, +[data-theme="dark"] .newsSection, +[data-theme="dark"] .learnMoreSection, +[data-theme="dark"] .partnerContainer, +[data-theme="dark"] .modernHero, +[data-theme="dark"] .heroBanner, +[data-theme="dark"] .heroContainer, +[data-theme="dark"] .missionVisionSection, +[data-theme="dark"] .valuePropositionSection { + background: linear-gradient(135deg, + var(--ifm-neutral-900) 0%, + var(--ifm-primary-900) 25%, + var(--ifm-neutral-800) 50%, + var(--ifm-primary-800) 75%, + var(--ifm-neutral-900) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; +} + +/* Fix dark mode for hero section */ +[data-theme="dark"] .hero { + background: linear-gradient(135deg, + var(--ifm-neutral-900) 0%, + var(--ifm-primary-900) 25%, + var(--ifm-neutral-800) 50%, + var(--ifm-primary-800) 75%, + var(--ifm-neutral-900) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; +} + +/* Ensure all homepage sections have animated dark background */ +[data-theme="dark"] .homepage section, +[data-theme="dark"] .homepage div[class*="section"], +[data-theme="dark"] .homepage div[class*="Section"] { + background: linear-gradient(135deg, + var(--ifm-neutral-900) 0%, + var(--ifm-primary-900) 25%, + var(--ifm-neutral-800) 50%, + var(--ifm-primary-800) 75%, + var(--ifm-neutral-900) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; +} + +/* Dark mode body and main containers with animation */ +[data-theme="dark"] body.homepage, +[data-theme="dark"] .main-wrapper, +[data-theme="dark"] .docMainContainer, +[data-theme="dark"] .docRoot { + background: linear-gradient(135deg, + var(--ifm-neutral-900) 0%, + var(--ifm-primary-900) 25%, + var(--ifm-neutral-800) 50%, + var(--ifm-primary-800) 75%, + var(--ifm-neutral-900) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; +} + +[data-theme="dark"] .hero-gradient-bg { + background: linear-gradient(135deg, + #1a202c 0%, + #2d3748 25%, + #4a5568 50%, + #2d3748 75%, + #1a202c 100%) !important; + background-size: 400% 400%; +} + +/* Fix dark mode text colors */ +[data-theme="dark"] .heroTitle, +[data-theme="dark"] .sectionTitle, +[data-theme="dark"] .partnersTitle, +[data-theme="dark"] .newsTitle, +[data-theme="dark"] .missionVisionTitle, +[data-theme="dark"] .featureTitle { + color: #e2e8f0 !important; +} + +[data-theme="dark"] .heroSubtitle, +[data-theme="dark"] .sectionSubtitle, +[data-theme="dark"] .partnersSubtitle, +[data-theme="dark"] .newsSubtitle, +[data-theme="dark"] .missionVisionDescription, +[data-theme="dark"] .featureDescription, +[data-theme="dark"] .description { + color: #94a3b8 !important; +} + +/* Fix dark mode for sidebar */ +[data-theme="dark"] .theme-doc-sidebar-container { + background: #1a202c !important; + border-right: 1px solid #4a5568 !important; +} + +[data-theme="dark"] .menu__link { + color: #cbd5e1 !important; +} + +[data-theme="dark"] .menu__link:hover { + background: rgba(77, 166, 255, 0.1) !important; + color: #4da6ff !important; +} + +[data-theme="dark"] .menu__link--active { + background: linear-gradient(135deg, #4da6ff 0%, #80c0ff 100%) !important; + color: white !important; +} + +/* Fix dark mode for navbar */ +[data-theme="dark"] .navbar { + background: linear-gradient(135deg, + rgba(15, 23, 42, 0.7) 0%, + rgba(30, 41, 59, 0.85) 20%, + rgba(15, 23, 42, 0.9) 100%) !important; + border-bottom: 1px solid rgba(77, 166, 255, 0.12) !important; + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.3), + 0 2px 8px rgba(77, 166, 255, 0.08), + inset 0 1px 0 rgba(77, 166, 255, 0.1) !important; +} + +[data-theme="dark"] .navbar__link { + color: #cbd5e1 !important; +} + +[data-theme="dark"] .navbar__link:hover { + color: #4da6ff !important; + background: rgba(77, 166, 255, 0.1) !important; +} + +/* Fix dark mode for cards and components */ +[data-theme="dark"] .featureCardInner, +[data-theme="dark"] .missionVisionCard, +[data-theme="dark"] .newsCardLink { + background: rgba(30, 41, 59, 0.8) !important; + border: 1px solid rgba(71, 85, 105, 0.3) !important; + color: #94a3b8 !important; +} + +[data-theme="dark"] .featureCardInner:hover, +[data-theme="dark"] .missionVisionCard:hover, +[data-theme="dark"] .newsCardLink:hover { + border-color: #80c0ff !important; +} + +/* Fix dark mode for table of contents */ +[data-theme="dark"] .theme-doc-toc-desktop { + background: #1a202c !important; + border-left-color: #4a5568 !important; +} + +[data-theme="dark"] .table-of-contents__link { + color: #94a3b8 !important; +} + +[data-theme="dark"] .table-of-contents__link:hover { + background: rgba(77, 166, 255, 0.1) !important; + color: #4da6ff !important; +} + +/* Fix dark mode for blog sidebar */ +[data-theme="dark"] .theme-blog-sidebar { + background: #1a202c !important; + border-right-color: #4a5568 !important; +} + +[data-theme="dark"] .theme-blog-sidebar .menu__link { + color: #cbd5e1 !important; +} + +[data-theme="dark"] .theme-blog-sidebar .menu__link:hover { + background: rgba(77, 166, 255, 0.1) !important; + color: #4da6ff !important; +} + +/* Fix dark mode for footer */ +[data-theme="dark"] .footer--dark { + background-color: #1a202c !important; +} + +/* Fix dark mode for content areas */ +[data-theme="dark"] .markdown, +[data-theme="dark"] .theme-doc-markdown { + color: #94a3b8 !important; +} + +[data-theme="dark"] .markdown h1, +[data-theme="dark"] .markdown h2, +[data-theme="dark"] .markdown h3, +[data-theme="dark"] .markdown h4, +[data-theme="dark"] .markdown h5, +[data-theme="dark"] .markdown h6 { + color: #e2e8f0 !important; +} + +/* Fix dark mode for search */ +[data-theme="dark"] .navbar__search-input { + background: rgba(0, 0, 0, 0.2) !important; + border-color: #4a5568 !important; + color: #94a3b8 !important; +} + +[data-theme="dark"] .navbar__search-input:focus { + border-color: #4da6ff !important; + box-shadow: 0 0 0 2px rgba(77, 166, 255, 0.2) !important; +} + +/* Fix dark mode for main content wrapper */ +[data-theme="dark"] .main-wrapper, +[data-theme="dark"] .docMainContainer, +[data-theme="dark"] .docRoot { + background: #1a202c !important; +} + +/* Fix dark mode for documentation pages */ +[data-theme="dark"] .theme-doc-markdown > div, +[data-theme="dark"] .theme-doc-markdown { + background: #1a202c !important; +} + +/* Fix dark mode for code blocks */ +[data-theme="dark"] .theme-code-block { + background: #2d3748 !important; + border-color: #4a5568 !important; +} + +[data-theme="dark"] .prism-code { + background: #2d3748 !important; +} + +[data-theme="dark"] .token.comment, +[data-theme="dark"] .token.prolog, +[data-theme="dark"] .token.doctype, +[data-theme="dark"] .token.cdata { + color: #718096 !important; +} + +/* Fix dark mode for breadcrumbs */ +[data-theme="dark"] .breadcrumbs { + background: #1a202c !important; +} + +[data-theme="dark"] .breadcrumbs__link { + color: #94a3b8 !important; +} + +[data-theme="dark"] .breadcrumbs__link:hover { + color: #4da6ff !important; +} + +/* Fix dark mode for pagination */ +[data-theme="dark"] .pagination-nav__link { + background: #2d3748 !important; + border-color: #4a5568 !important; + color: #94a3b8 !important; +} + +[data-theme="dark"] .pagination-nav__link:hover { + background: #4a5568 !important; + color: #e2e8f0 !important; +} + +/* Fix dark mode for tabs */ +[data-theme="dark"] .tabs { + background: #1a202c !important; +} + +[data-theme="dark"] .tabs__item { + color: #94a3b8 !important; +} + +[data-theme="dark"] .tabs__item--active { + color: #4da6ff !important; + border-bottom-color: #4da6ff !important; +} + +[data-theme="dark"] .tabs__item:hover { + color: #e2e8f0 !important; +} + +/* Fix dark mode for admonitions */ +[data-theme="dark"] .admonition { + background: #2d3748 !important; + border-color: #4a5568 !important; +} + +[data-theme="dark"] .admonition-heading { + color: #e2e8f0 !important; +} + +[data-theme="dark"] .admonition-content { + color: #94a3b8 !important; +} + +/* Fix dark mode for dropdown menus */ +[data-theme="dark"] .dropdown__menu { + background: #2d3748 !important; + border: 1px solid #4a5568 !important; +} + +[data-theme="dark"] .dropdown__link { + color: #94a3b8 !important; +} + +[data-theme="dark"] .dropdown__link:hover { + background: rgba(77, 166, 255, 0.1) !important; + color: #4da6ff !important; +} + +/* Fix dark mode for mobile menu */ +[data-theme="dark"] .navbar-sidebar { + background: rgba(15, 23, 42, 0.95) !important; +} + +[data-theme="dark"] .navbar-sidebar__backdrop { + background: rgba(0, 0, 0, 0.6) !important; +} + +[data-theme="dark"] .navbar-sidebar__brand { + background: #2d3748 !important; + border-bottom-color: #4a5568 !important; +} + +[data-theme="dark"] .navbar-sidebar__item { + color: #94a3b8 !important; +} + +[data-theme="dark"] .navbar-sidebar__link { + color: #94a3b8 !important; +} + +[data-theme="dark"] .navbar-sidebar__link:hover { + background: rgba(77, 166, 255, 0.1) !important; + color: #4da6ff !important; +} + +/* Fix dark mode for blog components */ +[data-theme="dark"] .theme-blog-wrapper { + background: #1a202c !important; +} + +[data-theme="dark"] .blogPostContainer { + background: #1a202c !important; +} + +[data-theme="dark"] .blogPostTitle { + color: #e2e8f0 !important; +} + +[data-theme="dark"] .blogPostContent { + color: #94a3b8 !important; +} + +/* Fix dark mode for homepage components */ +[data-theme="dark"] .heroBanner { + background: #1a202c !important; +} + +[data-theme="dark"] .modernHero { + background: #1a202c !important; +} + +/* Fix dark mode for homepage hero */ +[data-theme="dark"] .heroContainer { + background: #1a202c !important; +} + +[data-theme="dark"] .heroTitle { + color: #e2e8f0 !important; +} + +[data-theme="dark"] .heroSubtitle { + color: #94a3b8 !important; +} + +[data-theme="dark"] .trustLabel { + color: #94a3b8 !important; +} + +/* Fix dark mode for partners */ +[data-theme="dark"] .members { + background: #1a202c !important; +} + +[data-theme="dark"] .partnerLogo { + filter: brightness(0.8) !important; +} + +[data-theme="dark"] .partnerContainer { + background: #1a202c !important; +} + +/* Fix dark mode for learn more section */ +[data-theme="dark"] .learnMoreSection { + background: #1a202c !important; +} + +/* Fix dark mode for any remaining elements */ +[data-theme="dark"] .container, +[data-theme="dark"] .row, +[data-theme="dark"] .col { + background: transparent !important; +} + +/* Fix dark mode for buttons in dark theme */ +[data-theme="dark"] .button--secondary { + background: transparent !important; + border: 2px solid #94a3b8 !important; + color: #94a3b8 !important; +} + +[data-theme="dark"] .button--secondary:hover { + background: #4da6ff !important; + border-color: #4da6ff !important; + color: white !important; +} + +/* Fix dark mode for any cards */ +[data-theme="dark"] .card, +[data-theme="dark"] .panel { + background: #2d3748 !important; + border-color: #4a5568 !important; + color: #94a3b8 !important; +} + +[data-theme="dark"] .card:hover, +[data-theme="dark"] .panel:hover { + border-color: #80c0ff !important; +} + +/* Fix dark mode for text elements */ +[data-theme="dark"] p, +[data-theme="dark"] li, +[data-theme="dark"] span, +[data-theme="dark"] div { + color: #94a3b8 !important; +} + +/* Ensure proper contrast for links */ +[data-theme="dark"] a { + color: #4da6ff !important; +} + +[data-theme="dark"] a:hover { + color: #80c0ff !important; +} + +/* Fix dark mode for any modals */ +[data-theme="dark"] .modal, +[data-theme="dark"] .overlay { + background: #2d3748 !important; + border-color: #4a5568 !important; +} + +/* Fix dark mode for form elements */ +[data-theme="dark"] input, +[data-theme="dark"] textarea, +[data-theme="dark"] select { + background: #2d3748 !important; + border: 1px solid #4a5568 !important; + color: #e2e8f0 !important; +} + +[data-theme="dark"] input:focus, +[data-theme="dark"] textarea:focus, +[data-theme="dark"] select:focus { + border-color: #4da6ff !important; + box-shadow: 0 0 0 2px rgba(77, 166, 255, 0.2) !important; +} + +/* Fix dark mode for any tooltips */ +[data-theme="dark"] .tooltip { + background: #4a5568 !important; + color: #e2e8f0 !important; + border-color: #718096 !important; +} + +/* Ensure proper dark mode scrollbars */ +[data-theme="dark"] * { + scrollbar-color: #4a5568 #2d3748; +} + +/* Fix any potential white backgrounds that might appear */ +[data-theme="dark"] [style*="background-color: white"], +[data-theme="dark"] [style*="background-color: #fff"], +[data-theme="dark"] [style*="background: white"] { + background: #1a202c !important; +} + +[data-theme="dark"] [style*="color: black"], +[data-theme="dark"] [style*="color: #000"], +[data-theme="dark"] [style*="color:#000"] { + color: #94a3b8 !important; +} + +/* Fix dark mode for search plugin */ +[data-theme="dark"] .DocSearch { + --docsearch-primary-color: #94a3b8 !important; + --docsearch-text-color: #94a3b8 !important; + --docsearch-muted-color: #718096 !important; + --docsearch-container-background: rgba(15, 23, 42, 0.8) !important; + --docsearch-modal-background: #2d3748 !important; + --docsearch-searchbox-background: #4a5568 !important; + --docsearch-searchbox-focus-background: #4a5568 !important; + --docsearch-hit-color: #94a3b8 !important; + --docsearch-hit-active-color: #e2e8f0 !important; + --docsearch-hit-background: #4a5568 !important; + --docsearch-hit-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; + --docsearch-key-gradient: linear-gradient(-225deg, #4a5568, #4a5568) !important; + --docsearch-key-shadow: inset 0 -2px 0 0 #2d3748, inset 0 0 1px 1px #4a5568, 0 1px 2px 1px rgba(0, 0, 0, 0.3) !important; + --docsearch-footer-background: #2d3748 !important; +} + +[data-theme="dark"] .DocSearch-Button { + background: #2d3748 !important; + border-color: #4a5568 !important; + color: #94a3b8 !important; +} + +[data-theme="dark"] .DocSearch-Button:hover { + background: #4a5568 !important; + color: #e2e8f0 !important; +} + +[data-theme="dark"] .DocSearch-Button-Key { + background: #4a5568 !important; + color: #94a3b8 !important; +} + +/* Fix dark mode for lunr search plugin if present */ +[data-theme="dark"] .search-bar { + background: #2d3748 !important; + border-color: #4a5568 !important; +} + +[data-theme="dark"] .search-bar input { + background: #4a5568 !important; + color: #e2e8f0 !important; +} + +[data-theme="dark"] .search-bar input::placeholder { + color: #94a3b8 !important; +} + +[data-theme="dark"] .search-results { + background: #2d3748 !important; + border-color: #4a5568 !important; + color: #94a3b8 !important; +} + +[data-theme="dark"] .search-result-item { + color: #94a3b8 !important; +} + +[data-theme="dark"] .search-result-item:hover { + background: rgba(77, 166, 255, 0.1) !important; +} + +[data-theme="dark"] .search-result-title { + color: #e2e8f0 !important; +} + +[data-theme="dark"] .search-result-snippet { + color: #94a3b8 !important; +} + +/* Fix dark mode for any remaining Docusaurus components */ +[data-theme="dark"] .theme-doc-version-banner { + background: #2d3748 !important; + border-color: #4a5568 !important; + color: #94a3b8 !important; +} + +[data-theme="dark"] .theme-doc-version-badge { + background: #4a5568 !important; + color: #e2e8f0 !important; +} + +/* Fix dark mode for any alert/callout components */ +[data-theme="dark"] .alert { + background: #2d3748 !important; + border-color: #4a5568 !important; + color: #94a3b8 !important; +} + +[data-theme="dark"] .alert--primary { + background: rgba(77, 166, 255, 0.1) !important; + border-color: #4da6ff !important; +} + +[data-theme="dark"] .alert--secondary { + background: rgba(148, 163, 184, 0.1) !important; + border-color: #94a3b8 !important; +} + +[data-theme="dark"] .alert--success { + background: rgba(16, 185, 129, 0.1) !important; + border-color: #10b981 !important; +} + +[data-theme="dark"] .alert--info { + background: rgba(59, 130, 246, 0.1) !important; + border-color: #3b82f6 !important; +} + +[data-theme="dark"] .alert--warning { + background: rgba(245, 158, 11, 0.1) !important; + border-color: #f59e0b !important; +} + +[data-theme="dark"] .alert--danger { + background: rgba(239, 68, 68, 0.1) !important; + border-color: #ef4444 !important; +} + +/* Fix dark mode for any remaining interactive elements */ +[data-theme="dark"] .badge { + background: #4a5568 !important; + color: #e2e8f0 !important; +} + +[data-theme="dark"] .badge--primary { + background: #4da6ff !important; + color: white !important; +} + +[data-theme="dark"] .badge--secondary { + background: #94a3b8 !important; + color: white !important; +} + +/* Final catch-all for any missed elements */ +[data-theme="dark"] .clean-btn { + background: rgba(77, 166, 255, 0.1) !important; + border-color: rgba(77, 166, 255, 0.2) !important; + color: #4da6ff !important; +} + +[data-theme="dark"] .clean-btn:hover { + background: #4da6ff !important; + color: white !important; +} \ No newline at end of file diff --git a/src/css/homepage-fix.css b/src/css/homepage-fix.css new file mode 100644 index 000000000..de639d12a --- /dev/null +++ b/src/css/homepage-fix.css @@ -0,0 +1,106 @@ +/* Emergency homepage gap fix - highest specificity */ + +/* Apply background to the root elements with maximum specificity */ +html[data-theme="light"] body.homepage, +html[data-theme="light"] .homepage, +html[data-theme="light"] .homepage .main-wrapper, +html[data-theme="light"] .homepage main, +html[data-theme="light"] .homepage .theme-doc-wrapper { + background: linear-gradient(135deg, + #e6f2ff 0%, + #b3d9ff 25%, + #f8fafc 50%, + #b3d9ff 75%, + #e6f2ff 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; + background-attachment: fixed !important; + min-height: 100vh !important; +} + +html[data-theme="dark"] body.homepage, +html[data-theme="dark"] .homepage, +html[data-theme="dark"] .homepage .main-wrapper, +html[data-theme="dark"] .homepage main, +html[data-theme="dark"] .homepage .theme-doc-wrapper { + background: linear-gradient(135deg, + #0f172a 0%, + #002444 25%, + #1e293b 50%, + #003156 75%, + #0f172a 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; + background-attachment: fixed !important; + min-height: 100vh !important; +} + +/* Make all sections completely transparent */ +html body.homepage .hero, +html body.homepage .cnoeSection, +html body.homepage .features, +html body.homepage .members, +html body.homepage .newsSection, +html body.homepage .learnMoreSection, +html body.homepage main, +html body.homepage main>div, +html body.homepage div[data-scroll-animation] { + background: transparent !important; + margin: 0 !important; + padding-left: 0 !important; + padding-right: 0 !important; + border: none !important; + box-shadow: none !important; +} + +/* Restore only vertical padding for content spacing */ +html body.homepage .hero { + padding: 5rem 0 !important; +} + +html body.homepage .cnoeSection { + padding: 4rem 0 !important; +} + +html body.homepage .features { + padding: 5rem 0 !important; +} + +html body.homepage .members { + padding: 5rem 0 !important; +} + +html body.homepage .newsSection { + padding: 5rem 0 !important; +} + +html body.homepage .learnMoreSection { + padding: 4rem 0 !important; +} + +/* Remove any container backgrounds */ +html body.homepage .container, +html body.homepage .container-fluid { + background: transparent !important; + margin: 0 auto !important; + padding: 0 2rem !important; +} + +/* Ensure no white backgrounds anywhere */ +html body.homepage *:not(.button):not(input):not(select):not(textarea) { + background-color: transparent !important; + background-image: none !important; +} + +/* Force remove any inline styles */ +html body.homepage [style*="background"] { + background: transparent !important; +} + +/* Remove all margins and borders */ +html body.homepage * { + margin-top: 0 !important; + margin-bottom: 0 !important; + border-top: none !important; + border-bottom: none !important; +} \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index f337fb599..55322c191 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -3,127 +3,266 @@ import clsx from "clsx"; import Link from "@docusaurus/Link"; import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; import Layout from "@theme/Layout"; -import InformationCNOE from "@site/src/components/InformationCNOE"; -import ValueProposition from "@site/src/components/ValueProposition"; +import ValueProposition from "@site/src/components/ValueProposition"; import MissionVision from "@site/src/components/MissionVision"; import InteractiveDiagram from "@site/src/components/InteractiveDiagram"; import Grid from '@mui/material/Grid'; import HelpIcon from '@mui/icons-material/Help'; import AliceCarousel from 'react-alice-carousel'; import 'react-alice-carousel/lib/alice-carousel.css'; -import {useColorMode} from '@docusaurus/theme-common'; - - - +import { useColorMode } from '@docusaurus/theme-common'; +import { initScrollAnimations, initStaggeredAnimations } from '@site/src/utils/scrollAnimations'; import styles from "./index.module.css"; import CNOENews from "../components/CNOENews"; import Stacks from "../components/Stacks"; -const { useState, useEffect } = React; +const { useState, useEffect, useRef } = React; function HomepageHeader() { const { siteConfig } = useDocusaurusContext(); - const [bgImage, setBgImage] = useState(''); + const [isVisible, setIsVisible] = useState(false); + + useEffect(() => { + // Trigger entrance animations after component mounts + const timer = setTimeout(() => setIsVisible(true), 300); + return () => clearTimeout(timer); + }, []); return ( -
- - - - - -

{siteConfig.tagline}    - - - Get Started - -

- - - - +
+ {/* Animated Background Elements */} +
+
+
+
+
+
+
+
+
+ + {/* Hero Content */} +
+
+ {/* Logo Section with Float Animation */} +
+ CNOE Logo +
+ + {/* Main Content */} +
+

+ Cloud Native Operational Excellence +

+ +

+ An open community collaboration with the goal of helping facilitate platform engineering through the sharing of guidance, tooling, and internal developer platform (IDP) reference architectures. +

+ + {/* CTA Buttons */} +
+ + + + + Overview + + + + + + Get Started + + + + + + Join Community + +
+ + {/* Learn More Button */} +
+ +
+
+
+
); } const Partners = () => { - const {colorMode, setColorMode} = useColorMode(); + const { colorMode, setColorMode } = useColorMode(); const { siteConfig } = useDocusaurusContext(); + const [isVisible, setIsVisible] = useState(false); + const containerRef = useRef(null); + const handleDragStart = (e) => e.preventDefault(); - var items =[] - if(colorMode == 'light'){ + + useEffect(() => { + if (typeof window !== 'undefined' && containerRef.current) { + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + setIsVisible(true); + observer.unobserve(entry.target); + } + }); + }, + { threshold: 0.2 } + ); + + observer.observe(containerRef.current); + + return () => { + if (containerRef.current) { + observer.unobserve(containerRef.current); + } + }; + } + }, []); + + const createLogoItem = (src, alt) => ( +
+ {alt} +
+ ); + + var items = []; + if (colorMode == 'light') { items = [ - , - , - , - , - , - , - , - , - , + createLogoItem("img/members/AWS-light.svg", "AWS"), + createLogoItem("img/members/Adobe-light.svg", "Adobe"), + createLogoItem("img/members/Autodesk-light.svg", "Autodesk"), + createLogoItem("img/members/Twilio-light.svg", "Twilio"), + createLogoItem("img/members/Salesforce-light.svg", "Salesforce"), + createLogoItem("img/members/Intuit-light.svg", "Intuit"), + createLogoItem("img/members/Nike-light.svg", "Nike"), + createLogoItem("img/members/cisco-light.svg", "Cisco"), + createLogoItem("img/members/Siemens-light.svg", "Siemens"), ]; - } else { items = [ - , - , - , - , - , - , - , - , - , + createLogoItem("img/members/AWS-dark.svg", "AWS"), + createLogoItem("img/members/Adobe-dark.svg", "Adobe"), + createLogoItem("img/members/Autodesk-dark.svg", "Autodesk"), + createLogoItem("img/members/Twilio-dark.svg", "Twilio"), + createLogoItem("img/members/Salesforce-dark.svg", "Salesforce"), + createLogoItem("img/members/Intuit-dark.svg", "Intuit"), + createLogoItem("img/members/Nike-dark.svg", "Nike"), + createLogoItem("img/members/cisco-dark.svg", "Cisco"), + createLogoItem("img/members/Siemens-dark.svg", "Siemens"), ]; } const responsive = { - 0: { items: 1 }, + 0: { items: 2 }, 568: { items: 3 }, + 768: { items: 4 }, 1024: { items: 6 }, -}; + }; + return ( -
-

Members

- - - - +
+
+

Trusted by Industry Leaders

+

+ Join leading companies building the future of internal developer platforms +

+
+ +
+ +
+ +
+ + GitHub - - - -   - - - - - Contribute - + Join the Community + +
+
); } @@ -131,6 +270,17 @@ const Partners = () => { export default function Home() { const { siteConfig } = useDocusaurusContext(); + + useEffect(() => { + // Initialize scroll-based animations after component mounts + const timer = setTimeout(() => { + initScrollAnimations(); + initStaggeredAnimations('.cnoe-stagger-container', '.cnoe-stagger-item', 100); + }, 500); + + return () => clearTimeout(timer); + }, []); + return (
- - - +
+ +
+
+ +
- - +
+ +
+
+ +
+ + ); } diff --git a/src/pages/index.module.css b/src/pages/index.module.css index ee4d2d893..9e83ea06c 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -10,23 +10,545 @@ overflow: hidden; } +/* Modern Hero Section Styles */ +.modernHero { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + padding: 0; + position: relative; +} + +.heroContent { + position: relative; + z-index: 10; + width: 100%; + max-width: 1200px; + margin: 0 auto; + padding: 0 2rem; +} + +.heroContainer { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + gap: 3rem; +} + +.logoSection { + opacity: 0; + animation-delay: 0.3s; +} + +.heroLogo { + width: 400px; + height: auto; + filter: + drop-shadow(0 10px 20px rgba(0, 86, 140, 0.2)) drop-shadow(0 20px 40px rgba(0, 86, 140, 0.15)) drop-shadow(0 30px 60px rgba(0, 86, 140, 0.1)); +} + +.heroTextContent { + max-width: 800px; + opacity: 0; + animation-delay: 0.6s; +} + +.heroTitle { + font-size: var(--ifm-font-size-5xl); + font-weight: 700; + line-height: 1.1; + margin-bottom: 1.5rem; + color: var(--ifm-neutral-900); + letter-spacing: -0.02em; + text-shadow: + 0 2px 4px rgba(0, 86, 140, 0.1), + 0 4px 8px rgba(0, 86, 140, 0.08), + 0 0 20px rgba(255, 152, 0, 0.1); +} + +[data-theme="dark"] .heroTitle { + color: var(--ifm-neutral-100) !important; + text-shadow: + 0 2px 4px rgba(77, 166, 255, 0.15), + 0 4px 8px rgba(77, 166, 255, 0.12), + 0 0 20px rgba(255, 152, 0, 0.15); +} + +.heroTitleAccent { + background: linear-gradient(135deg, var(--ifm-primary) 0%, var(--ifm-primary-600) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + font-weight: 800; + white-space: nowrap; + display: inline-block; +} + +.heroSubtitle { + font-size: var(--ifm-font-size-2xl); + line-height: 1.5; + color: var(--ifm-neutral-700); + margin-bottom: 2.5rem; + font-weight: 500; + text-shadow: 0 1px 2px rgba(0, 86, 140, 0.05); +} + +[data-theme="dark"] .heroSubtitle { + color: var(--ifm-neutral-400) !important; + text-shadow: 0 1px 2px rgba(77, 166, 255, 0.08); +} + +.heroButtons { + display: flex; + gap: 1rem; + justify-content: center; + flex-wrap: wrap; + opacity: 0; + animation-delay: 0.9s; +} + +/* Base Hero Button Styles - All buttons have same rounded shape */ +.heroButton { + min-width: 180px; + padding: 0.75rem 2rem; + font-size: var(--ifm-font-size-lg); + font-weight: 600; + border-radius: 50px !important; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); + box-shadow: 0 4px 15px rgba(0, 86, 140, 0.1); + border: 2px solid var(--ifm-primary); +} + +.heroButton:hover { + transform: translateY(-3px); + box-shadow: 0 8px 25px rgba(0, 86, 140, 0.25); +} + +[data-theme="dark"] .heroButton { + box-shadow: 0 4px 15px rgba(77, 166, 255, 0.1); + border-color: var(--ifm-primary-300); +} + +[data-theme="dark"] .heroButton:hover { + box-shadow: 0 8px 25px rgba(77, 166, 255, 0.25); +} + +/* Get Started Button - Has gradient by default */ +.getStartedButton { + background: linear-gradient(45deg, var(--ifm-accent-600) 0%, var(--ifm-accent-700) 20%, var(--ifm-accent-800) 80%, var(--ifm-accent-900) 100%) !important; + color: white !important; + border-color: transparent !important; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease) !important; +} + +.getStartedButton:hover { + background: linear-gradient(135deg, var(--ifm-accent-600) 0%, var(--ifm-accent-700) 20%, var(--ifm-accent-800) 80%, var(--ifm-accent-900) 100%) !important; + color: white !important; + box-shadow: 0 8px 25px rgba(255, 107, 53, 0.8); +} + +[data-theme="dark"] .getStartedButton { + background: linear-gradient(135deg, var(--ifm-accent) 0%, var(--ifm-accent-700) 100%) !important; + color: white !important; + border-color: transparent !important; +} + +[data-theme="dark"] .getStartedButton:hover { + background: linear-gradient(135deg, var(--ifm-accent-600) 0%, var(--ifm-accent-800) 100%) !important; + color: white !important; + box-shadow: 0 8px 25px rgba(255, 152, 0, 0.4); +} + +/* Overview and Join Community Buttons - Gradient on hover */ +.heroButton:not(.getStartedButton) { + background: transparent; +} + +.heroButton:not(.getStartedButton):hover { + background: linear-gradient(135deg, var(--ifm-accent-600) 0%, var(--ifm-accent-700) 20%, var(--ifm-accent-800) 80%, var(--ifm-accent-900) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 3s ease infinite !important; + color: white !important; + border-color: transparent !important; + box-shadow: 0 8px 25px rgba(255, 140, 90, 0.8); +} + +[data-theme="dark"] .heroButton:not(.getStartedButton) { + border-color: var(--ifm-primary-300); +} + +[data-theme="dark"] .heroButton:not(.getStartedButton):hover { + background: linear-gradient(45deg, #1a8dff 0%, #ff6b35 50%, #1a8dff 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 3s ease infinite !important; + color: white !important; + border-color: transparent !important; + box-shadow: 0 8px 25px rgba(255, 107, 53, 0.8); +} + +/* Remove Get Started button gradient when other buttons are hovered */ +.heroButtons:hover .getStartedButton:not(:hover) { + background: transparent !important; + color: var(--ifm-primary) !important; + border-color: var(--ifm-primary) !important; + animation: none !important; +} + +[data-theme="dark"] .heroButtons:hover .getStartedButton:not(:hover) { + color: var(--ifm-primary-300) !important; + border-color: var(--ifm-primary-300) !important; +} + +/* Remove Get Started button gradient when Learn More button is hovered */ +.learnMoreButton:hover~.heroButtons .getStartedButton, +.heroTextContent:has(.learnMoreButton:hover) .heroButtons .getStartedButton { + background: transparent !important; + color: var(--ifm-primary) !important; + border-color: var(--ifm-primary) !important; + animation: none !important; +} + +[data-theme="dark"] .learnMoreButton:hover~.heroButtons .getStartedButton, +[data-theme="dark"] .heroTextContent:has(.learnMoreButton:hover) .heroButtons .getStartedButton { + color: var(--ifm-primary-300) !important; + border-color: var(--ifm-primary-300) !important; +} + +/* Button Icons */ +.buttonIcon { + transition: transform var(--ifm-duration-normal) var(--ifm-easing-ease); +} + +.heroButton:hover .buttonIcon { + transform: scale(1.1); +} + +/* Learn More Button in Hero */ +.learnMoreHero { + display: flex; + justify-content: center; + margin-top: 4rem; + opacity: 0; + animation-delay: 1.2s; +} + +.learnMoreButton { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 160px; + padding: 0.75rem 1.5rem; + font-size: var(--ifm-font-size-lg); + font-weight: 700; + border: none; + background: transparent; + color: var(--ifm-primary); + border-radius: 0; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); + cursor: pointer; + box-shadow: none; + text-shadow: 0 2px 4px rgba(0, 86, 140, 0.1); + letter-spacing: 0.5px; +} + +[data-theme="dark"] .learnMoreButton { + color: var(--ifm-primary-300); + text-shadow: 0 2px 4px rgba(77, 166, 255, 0.2); +} + +.learnMoreButton:hover { + background: transparent; + color: var(--ifm-accent-900); + transform: translateY(-3px); + box-shadow: none; + border-color: transparent; + text-shadow: 0 4px 8px rgba(0, 86, 140, 0.3), 0 0 20px rgba(0, 86, 140, 0.2); + filter: brightness(1.2); + border-color: transparent !important; +} + +[data-theme="dark"] .learnMoreButton:hover { + background: transparent; + color: var(--ifm-primary-300); + border-color: transparent; + text-shadow: 0 4px 8px rgba(77, 166, 255, 0.4), 0 0 20px rgba(77, 166, 255, 0.3); + filter: brightness(1.3); +} + +.learnMoreContent { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.25rem; +} + +.downArrow { + transition: transform var(--ifm-duration-normal) var(--ifm-easing-ease); +} + +.learnMoreButton:hover .downArrow { + transform: translateY(3px); +} + +/* Mobile Responsive */ @media screen and (max-width: 996px) { .heroBanner { padding: 2rem; } + + .modernHero { + min-height: 80vh; + padding: 2rem 0; + } + + .heroTitle { + font-size: var(--ifm-font-size-3xl); + } + + .heroSubtitle { + font-size: var(--ifm-font-size-lg); + } + + .heroLogo { + width: 200px; + } + + .heroButtons { + flex-direction: column; + align-items: center; + } + + .heroButton { + width: 100%; + max-width: 280px; + } + + .learnMoreHero { + margin-top: 2rem; + } + + .learnMoreButton { + min-width: 160px; + padding: 0.65rem 1.5rem; + font-size: var(--ifm-font-size-base); + } +} + +@media screen and (max-width: 576px) { + .heroTitle { + font-size: var(--ifm-font-size-2xl); + } + + .heroSubtitle { + font-size: var(--ifm-font-size-base); + } + + .heroContainer { + gap: 2rem; + } } + .mybutton:hover { cursor: pointer; } + .buttons { display: flex; align-items: center; justify-content: center; } +/* Modern Partners Section */ .members { - margin-top: 40px; - padding: 40px 0; - background-color: var(--ifm-color-neutral-lighter); /* Uses Docusaurus theme color */ + padding: 5rem 0; + background: linear-gradient(135deg, + var(--ifm-primary-50) 0%, + var(--ifm-primary-100) 25%, + var(--ifm-neutral-50) 50%, + var(--ifm-primary-100) 75%, + var(--ifm-primary-50) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; + position: relative; + overflow: hidden; + opacity: 0; + transform: translateY(30px); + transition: all 0.8s var(--ifm-easing-ease); +} + +[data-theme="dark"] .members { + background: linear-gradient(135deg, + var(--ifm-neutral-900) 0%, + var(--ifm-primary-900) 25%, + var(--ifm-neutral-800) 50%, + var(--ifm-primary-800) 75%, + var(--ifm-neutral-900) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; +} + +.members.membersVisible { + opacity: 1; + transform: translateY(0); +} + +.members::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: url('data:image/svg+xml,') repeat; + opacity: 0.8; +} + +[data-theme="dark"] .members::before { + background: url('data:image/svg+xml,') repeat; +} + +/* Partners Header */ +.partnersHeader { + text-align: center; + margin-bottom: 3rem; + position: relative; + z-index: 2; +} + +.partnersTitle { + font-size: var(--ifm-font-size-3xl); + font-weight: 700; + color: var(--ifm-neutral-900); + margin-bottom: 1rem; + letter-spacing: -0.02em; +} + +[data-theme="dark"] .partnersTitle { + color: var(--ifm-neutral-100) !important; +} + +.partnersSubtitle { + font-size: var(--ifm-font-size-lg); + color: var(--ifm-neutral-600); + max-width: 500px; + margin: 0 auto; + line-height: 1.6; +} + +[data-theme="dark"] .partnersSubtitle { + color: var(--ifm-neutral-400) !important; +} + +/* Partners Carousel */ +.partnersCarousel { + margin: 3rem 0; + position: relative; + z-index: 2; +} + +.partnerLogoContainer { + display: flex; + align-items: center; + justify-content: center; + padding: 1.5rem; + height: 120px; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); +} + +.partnerLogo { + width: auto; + height: auto; + filter: grayscale(100%) opacity(0.7); + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); +} + +.partnerLogoContainer:hover .partnerLogo { + filter: grayscale(0%) opacity(1); + transform: scale(1.1); +} + +/* Alice Carousel Customization */ +.partnersCarousel .alice-carousel { + padding: 1rem 0; +} + +.partnersCarousel .alice-carousel__stage { + padding: 0 2rem; +} + +.partnersCarousel .alice-carousel__stage-item { + opacity: 0.6; + transition: opacity var(--ifm-duration-normal) var(--ifm-easing-ease); +} + +.partnersCarousel .alice-carousel__stage-item.__active { + opacity: 1; } +/* Partners Action */ +.partnersAction { + text-align: center; + position: relative; + z-index: 2; +} + +.partnersAction .button { + min-width: 200px; + font-weight: 600; + box-shadow: var(--ifm-shadow-lg); +} + +.partnersAction .button:hover { + transform: translateY(-3px); + box-shadow: var(--ifm-shadow-xl); +} + +/* Mobile Responsive */ +@media (max-width: 996px) { + .members { + padding: 3rem 0; + } + + .partnersTitle { + font-size: var(--ifm-font-size-2xl); + } + + .partnersSubtitle { + font-size: var(--ifm-font-size-base); + } + + .partnerLogoContainer { + padding: 1rem; + height: 100px; + } + + .partnerLogo { + max-width: 100px; + max-height: 60px; + } +} + +@media (max-width: 576px) { + .partnersHeader { + margin-bottom: 2rem; + } + + .partnersTitle { + font-size: var(--ifm-font-size-xl); + } + + .partnerLogoContainer { + height: 80px; + } + + .partnerLogo { + max-width: 80px; + max-height: 50px; + } +} \ No newline at end of file diff --git a/src/theme/ColorModeToggle/index.js b/src/theme/ColorModeToggle/index.js new file mode 100644 index 000000000..5d42a9517 --- /dev/null +++ b/src/theme/ColorModeToggle/index.js @@ -0,0 +1,113 @@ +import React from 'react'; +import clsx from 'clsx'; +import useIsBrowser from '@docusaurus/useIsBrowser'; +import {translate} from '@docusaurus/Translate'; +import IconLightMode from '@theme/Icon/LightMode'; +import IconDarkMode from '@theme/Icon/DarkMode'; +import IconSystemColorMode from '@theme/Icon/SystemColorMode'; +import styles from './styles.module.css'; +// The order of color modes is defined here, and can be customized with swizzle +function getNextColorMode(colorMode, respectPrefersColorScheme) { + // 2-value transition + if (!respectPrefersColorScheme) { + return colorMode === 'dark' ? 'light' : 'dark'; + } + // 3-value transition + switch (colorMode) { + case null: + return 'light'; + case 'light': + return 'dark'; + case 'dark': + return null; + default: + throw new Error(`unexpected color mode ${colorMode}`); + } +} +function getColorModeLabel(colorMode) { + switch (colorMode) { + case null: + return translate({ + message: 'system mode', + id: 'theme.colorToggle.ariaLabel.mode.system', + description: 'The name for the system color mode', + }); + case 'light': + return translate({ + message: 'light mode', + id: 'theme.colorToggle.ariaLabel.mode.light', + description: 'The name for the light color mode', + }); + case 'dark': + return translate({ + message: 'dark mode', + id: 'theme.colorToggle.ariaLabel.mode.dark', + description: 'The name for the dark color mode', + }); + default: + throw new Error(`unexpected color mode ${colorMode}`); + } +} +function getColorModeAriaLabel(colorMode) { + return translate( + { + message: 'Switch between dark and light mode (currently {mode})', + id: 'theme.colorToggle.ariaLabel', + description: 'The ARIA label for the color mode toggle', + }, + { + mode: getColorModeLabel(colorMode), + }, + ); +} +function CurrentColorModeIcon() { + // 3 icons are always rendered for technical reasons + // We use "data-theme-choice" to render the correct one + // This must work even before React hydrates + return ( + <> + + + + + ); +} +function ColorModeToggle({ + className, + buttonClassName, + respectPrefersColorScheme, + value, + onChange, +}) { + const isBrowser = useIsBrowser(); + return ( +
+ +
+ ); +} +export default React.memo(ColorModeToggle); diff --git a/src/theme/ColorModeToggle/styles.module.css b/src/theme/ColorModeToggle/styles.module.css new file mode 100644 index 000000000..4078ae4f7 --- /dev/null +++ b/src/theme/ColorModeToggle/styles.module.css @@ -0,0 +1,105 @@ +/* Match the exact styling pattern of other navbar icons */ +.toggle { + width: auto !important; + height: 69% !important; + padding: 0.4rem 1rem !important; + margin: 0 0.25rem !important; + border-radius: 8px !important; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease) !important; + display: inline-flex !important; + align-items: center !important; + justify-content: flex-start !important; + font-weight: 500 !important; + color: var(--ifm-neutral-900) !important; + text-decoration: none !important; + position: relative !important; +} + +.toggle:hover { + background: rgba(0, 86, 140, 0.08) !important; + color: var(--ifm-neutral-900) !important; + transform: translateX(4px) !important; + box-shadow: var(--ifm-shadow-sm) !important; +} + +[data-theme="dark"] .toggle:hover { + background: rgba(77, 166, 255, 0.1) !important; +} + +/* Add the orange accent bar like other navbar icons */ +.toggle:hover::after { + content: ''; + position: absolute; + bottom: -4px; + left: 50%; + transform: translateX(-50%); + width: 80%; + height: 3px; + background: var(--ifm-accent, #FF9800); + border-radius: 2px; + z-index: 10; +} + +.toggleButton { + /* Complete reset of all button styles */ + all: unset !important; + align-items: center !important; + display: flex !important; + justify-content: center !important; + width: 100% !important; + height: 100% !important; + border-radius: 0 !important; + border: none !important; + background: transparent !important; + padding: 0 !important; + margin: 0 !important; + box-shadow: none !important; + color: inherit !important; + cursor: pointer !important; + font: inherit !important; + text-align: inherit !important; + text-decoration: none !important; + outline: none !important; +} + +.toggleButton:hover, +.toggleButton:focus, +.toggleButton:active, +.toggleButton:visited { + background: transparent !important; + box-shadow: none !important; + color: inherit !important; + border: none !important; + outline: none !important; + text-decoration: none !important; +} + +.toggleIcon { + display: none !important; + width: 24px !important; + height: 25px !important; +} + +[data-theme-choice='system'] .systemToggleIcon, +[data-theme-choice='light'] .lightToggleIcon, +[data-theme-choice='dark'] .darkToggleIcon { + display: initial !important; +} + +.toggleButtonDisabled { + cursor: not-allowed !important; +} + +/* Nuclear option - override any possible conflicting styles */ +.toggle *, +.toggle *::before, +.toggle *::after { + box-sizing: border-box !important; +} + +/* Ensure the hover effect only applies to the container, not the button */ +.toggle:hover .toggleButton { + background: transparent !important; +} + +/* Removed orange bar to match GitHub icon pattern */ \ No newline at end of file diff --git a/src/utils/scrollAnimations.js b/src/utils/scrollAnimations.js new file mode 100644 index 000000000..1cf227a32 --- /dev/null +++ b/src/utils/scrollAnimations.js @@ -0,0 +1,121 @@ +/** + * Scroll-based animation utilities for CNOE website + * Implements intersection observer for reveal animations + */ + +// Intersection Observer for scroll-based animations +export const createScrollObserver = (callback, options = {}) => { + const defaultOptions = { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px', + ...options + }; + + if (typeof window !== 'undefined' && 'IntersectionObserver' in window) { + return new IntersectionObserver(callback, defaultOptions); + } + return null; +}; + +// Initialize scroll animations for elements +export const initScrollAnimations = () => { + if (typeof window === 'undefined') return; + + // Check for reduced motion preference + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + if (prefersReducedMotion) return; + + const observer = createScrollObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + const element = entry.target; + const animationType = element.dataset.scrollAnimation || 'fade-in-up'; + const delay = element.dataset.animationDelay || '0'; + + // Add animation class with delay + setTimeout(() => { + element.classList.add(`cnoe-animate-${animationType}`); + element.classList.add('cnoe-animate-visible'); + }, parseInt(delay)); + + // Stop observing this element + observer.unobserve(element); + } + }); + }); + + // Find all elements with scroll animation attributes + const animatedElements = document.querySelectorAll('[data-scroll-animation]'); + animatedElements.forEach((element) => { + observer.observe(element); + }); + + return observer; +}; + +// Staggered animation utility for card grids +export const initStaggeredAnimations = (containerSelector, itemSelector, delay = 100) => { + if (typeof window === 'undefined') return; + + const containers = document.querySelectorAll(containerSelector); + + containers.forEach((container) => { + const items = container.querySelectorAll(itemSelector); + + const observer = createScrollObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + const containerElement = entry.target; + const items = containerElement.querySelectorAll(itemSelector); + + items.forEach((item, index) => { + setTimeout(() => { + item.classList.add('cnoe-animate-fade-in-up'); + item.classList.add('cnoe-animate-visible'); + }, index * delay); + }); + + observer.unobserve(containerElement); + } + }); + }); + + observer.observe(container); + }); +}; + +// React hook for scroll animations +export const useScrollAnimation = (ref, animationType = 'fade-in-up', delay = 0) => { + if (typeof window === 'undefined') return; + + React.useEffect(() => { + const element = ref.current; + if (!element) return; + + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + if (prefersReducedMotion) { + element.classList.add('cnoe-animate-visible'); + return; + } + + const observer = createScrollObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + setTimeout(() => { + element.classList.add(`cnoe-animate-${animationType}`); + element.classList.add('cnoe-animate-visible'); + }, delay); + observer.unobserve(element); + } + }); + }); + + observer.observe(element); + + return () => { + if (observer) { + observer.unobserve(element); + } + }; + }, [ref, animationType, delay]); +}; \ No newline at end of file diff --git a/static/img/kubernetes.svg b/static/img/kubernetes.svg new file mode 100644 index 000000000..8ddda046d --- /dev/null +++ b/static/img/kubernetes.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/logo-dark-no-name.png b/static/img/logo-dark-no-name.png new file mode 100644 index 0000000000000000000000000000000000000000..31b4ffe183bf8aa491a0b7ff2cf96e94d8c0be7f GIT binary patch literal 35658 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 literal 0 HcmV?d00001 diff --git a/static/img/logo-no-name.png b/static/img/logo-no-name.png new file mode 100644 index 0000000000000000000000000000000000000000..82f4320b9d7c4e7e5dd380b5142c8eaa0e2ecbf3 GIT binary patch literal 31805 zcmbTeby!qu7dH$zD4^5;B0UU4cS(15w}5naHz?iRB_-V|3@OsxNGshSh)BO1&v~A6 z-sgJ1e?GV_X3yUDz3y1`yVqKq2xUbnbTmRV1Oxs~$1>6eUK|pY0K|t7hjex+Lj(~vg zm>&?yjf@@KTm_)ehk^e4^Vd9Gt<3)!$=>DfWdRFhet5#n%EZF_|LSJuY4!in z?cvE^-TtiWui^L~i1F&Enz=aGx;;!wke!8v|IZNr*WG_6_*ajAI%wEixeBuV-Q|C7 z|8Fntf1dwqoPXc_-yTZNR%XCf{+Su;--G=7-oM&EtdCdO%G1nNTinXd%--c;HQem% z{LKH)C;!`1%)!>dS2Svph?ZwGbTo8kI-b4RsV*PBIZX>Wx?<}P>Q#myAfgB( zAYla}fc}48!X-Q1?S!MB{6ph4B5Gw@lbL4EL#qx3Zlagu!r+A`X;)7@~|C{Go{oZP8w{oeAeayl^NQyM&y8d?#A=Um zP+Dzc7yn8U>Yu-DML1o8H$5mE=TP5#D({L>_`lLygFJ5H)R z99PNKbLDFzz8nq3)XB6fhFKBSxa*^Tb~65LU|e@751f^|Zu_13B_|C<3Ps7If35Eo zXxeBwy|1~N(Fa@czzo&9ERJmrnIh(2j7^3rmwmZ{4LBO-i5DN4&``MHychZxi6PK* zMyqw$`H(=#@t-!cK${P1CG7udBL^z)uk|l`Yvlm6kbEEO0#H#d!TeW?frl1?&F?Ye z7CbkU7S@nZW;t=?I`v)Jg};=rYKcE3YT)hCj^>J|m}qUt1KZwsK(nvu2ir z&M!6B&aJuqIylJjZ)dAtc|@+CW7VF!iZTC7La?|g@)H`2ueF5um-Hs+>}B*ko_@IS z-~Bl6Itca!c6wm23^H}`zKb9w-3F!*rVuj~& z`Cuz*tB-a8lR_gReDCiN9on10N2yCtv%pnzmwgm2Zfi3o#jc zRon{mkA&UeNQ09Y?Fjhb% zcDKD}yLDyE`E!Cjtr|oI9A7+?Q+e7|M&E;X~>+m z#e);{argkch?T??pe81V)vxgS2sxyTG3v{es>2$_&ehpF@fkSRhhJ{g5v6V<8G~^q zB^o@&ynnb5)CI~W!L82HRHvTrt8X~{+HKrb*X{>tp|WleOimeR#feL7Qzk*eN|*1f zfjT=^K@)%4V{U4(n!(N`h^R(R468uOlGZ&67JuX*KCAQUSEiKIT;*cRWXVFM5O$9^ zSZI+<0XJ%$o=Tqp;xE=ogm`|QIn?cJJx0hQ=Pv#-uBJnl!Wxg`ia>&X?$b~P9cq5G zx=h-~KPDxg8_~wQfLmR!vV|FKz;B={o40E}HX_sYmhPRD%o|NcAKl}ZLE_jEp(~Gf z4|?UvYT2+q*tV`IXcA^dAq@7vYHE7%hnLnA@#0OiO@lh({Txe{){|}~KM$K_(%gKu zS}eXm6;z)fJ(c+;iv1%&PW&a`k{W9T@vylLv>-L12UC^;WPOwDVCw6N_D3b`D3yB& zX71B_#Kqm^r;CP|qMSwTaqh#d>Tp2yub?ZUzcU9C8mixF@E6Pm(eMZVZi}@E>6<4g z!(vhpdvGbj7AQ-}GxI>#7z0?d!gP@wgKWc-G zR@FjrqRAH=WH~7k`yZFY5+ZCqX*NtWK;s9a(!Vypy-bx!WLGTfqeXE|3G|TYmPT3K z{BY^iOp9^Eu6upcGZ;WDjhPiZso%^JtTGC4*SX*&s;3?l z3AKFG!YlKk5lSWmxHFBCRsBcNUX!B~QR(+CDLH5H zFZfdzrglde&xXj%i7p{LMwKFmEAZ}MC@A$N7B~I2)8-YYhiZ<*pGsn1N)=P-8Y&LWyBy^+yv&w z#gsF(i~EbkS?_|bP=NLKW#;}3aT-vT@Fc`@0`p*)>Z5n*8!sc4Yi}ZdR95p~24z3E zc&^?{_7S#3xs8-35*wm7Z@&AP%_XYx0qb8#m?HnPes$T-Ob@D$*NON=)VDjMVm@-I zi`}xZ#%{rLBsdD~zik>Ve&v#W@^~%1qKi}>u6{rKwru5Zx}owOg;q z)+I#r@qscSlAW?R$6Orey@^pt2akRV{7ct)88={X5}FfK5dY|qt{B8mnk=$ak4j;1 zHfhf0w01H{Ka}qjK0?X4>#V5&pIo9+;pcGINye$mdN15bjd&j!4&!{aa6(%!Q55pS zlE%*eRnzj<6}nexks-iF;&w?={&85ABtg?Zjg>ZL$&yUv;wlfa#RXXTn)8TljsvXh zaV(CBxV)Y0CyPxeKgsx5aN-VBsEB(TjJ$KLBPZQmb(fiv|3qh3l!yK9{npk$hVoW+_w=~aPs=HDB6>5`T+1U|S z@)r%f&HP}Po8`K@$K0$yn3tZ9d{Px|=@?;{dUF&`)5$ShTO+OAmcL!}w(DKAtD`Cb z_z&lkVey%+=tX$9%`CglYYxV`WOwYGyKGzS=^u(z;OeXs()#JHlv5)C-eW#-nQq3$ zDkm2&+B;wEgU_pNoGoMCDPXr~PTuze*@^Haok_k`_nmM@*Qa?@SQE{7tb z?}NC_VSD<)2F{k`cy1jwEpA-S?~_t~+(Y~Blm?L69Y|M52W!(Z6=KOeCxpwf@~xJt=K1z0Vc#%<0pas73jY5z$}b-|oYKr}f9a}*K@ zHLpF`BQ>9&Yg!sFrCV`| zdm`k8-cwI54z`U}!`v7YsrL^od_#G%WvL;r_86KM$1JI@vZ9ontbLHLqC9D32r@Ih zc|50K$hj*^{9QuCszYY(_l{}ttN%E&)1Qtvuo@z0Ak-P%GdaPgQ{DN6SrNFB18{$? zshwGcdSC)`Inv5pb$&_QWC=CN>J{ZZ6f&K8o(S)P(v=Qx_{=fqWe)FWn<6IXtZAVX zE7h@}?dx*FDTd;+lYN1)`q9@0VxA`iV1`Mn%YGdf;% zn>N~D0X>D51I~XmcW5YfX@)e@Hvkf#=hHi&M2L_tqXS>|fIs3&7P4>v5`%{55i<8j59ri8{(f{Eq2%K3ClV_j`T5bW zgd%nae`Quazt||?ytI-PX*cLyvrtW9TIMAGB;ypBWL*$0UvT=Jb-DT4-(~X)4sqEV zgh6RMbt@bstewX}SMv3~XOrS?*Hv1|fS9e~XUL?f^@t}vcQ4y{Yn14zG7M+gr4wwB zxy!PIpf{RGZA|=%JwOtq75tXSInZSQetow`Lvg9&L!G~6i% zr6mhaSO0S~$=3j_5LabO4D8MBoo>kdmcY1=x*;C4zPh)Ao{_ylV~=KI^P1ffxVntO zV~_MvWn|w!y%grH;b^bXqSW(MfT`kB=_kztd$7f}PowkI0{hgR)U2CGmJmSax(dPy z^=qDDq=Ox{=iGy+WOC;L9C?1H9Vs@wYIe!kN{||kB>rqFF9q)$_FXnAKz$P6?pznu z(Y`-cG#kE*mylqiMk_m7usC;63n>Z&u&rmj+22htc<`{nk^phzm_)PVU@F~_Q}M~w z)vP(8dlgNt=-C?BLCe~^+6ly;l!GNT|5asK)GG-smQ|@xr%e`S^8{^k-u{(_~ z^-=&gFfBXnr~){wa^vOY(R?lYqY6=Ml`}5CrW(Ndr$=- z07t$68ITO1WlIj|dL~u2o;hiG-X?k7sx`F0yoxt@J3y0RKi_e{&DfHvyRii$rf1w6 zdI8X>11P>rmiUkHuVyNWxujRfI$}068(1oznMsfQFu!yFFki*Kn;WlAFp*ny8I8H|E{&<{X@%U3Of@^B7SEh4~F zVV*x~Hu60-_#lVv1my6+^Q)^&4#_Tztlqb0) zlY1XGg07=uxSCoj4|w^F?Y%GdZHazgv+kEeD&x`$!tENnIfep)nTb{hg-=>^fmqAT zX|Wq%7-W#F6Y(e`o{F(id(mU0=p{~>%zX9KAYIW!PB@+!wl1sCiE>%%_nzj$bik}Q zjGomK`_@$?_pI4qiH$6x!DSCrQ!!*`h!WqS;xng>dRs-M4>tib+Hu;CYAAFwv~3#5 zT5hzrpBR)Y=TaSpo4$G9@`~K=iD}}G>u7{Qlut+?$hZK~HkD3LW^57W$rrhAI6Y+= zXoDmwKkux|mniGp4K?SF_1C(y+_9uda-Kjd?_MNjxbmQq+1f5{tK(JlQIS?nv-Cqdn=0=W_<&$_CGUcGRoUQE6=J=^$Y()a*sCK6?iIbSKDqsLFN@=#hYRK#CM)A6)49vMTEe%u zeE00vR!`vj_PxSz`AwXa0gmV+VbD|_pehemi;;B~ZY3yq7_~9ue+MhErWsi*eM=C-?i}$HPBCi#ZB5v!rEes4NK}L$W z$;%^c`^+{w(UQY#YMU42U-eMU;0Z7U-`g`~LWWahEqe>tF%1(vO%-XFnbPIKq@(Y%pP-;KBPK2`zalBd!E=>tw#NGk1vCs9ks3WSvQyfUMy(7+5$T3_{0;U_5k z3o8jTy-1ipz}Qk0Bsw}%{i6E3e75676`e1fhYj)kv3THz{giv(u6u7z&f?5vk`vil zU{elh`3<_Y>4brTWhZ!b#}xA|G^i$39* z<#kT0*5Z~CeLcR?V@LDE^MSjKDdG_Y;f9qyu)*0ARF-chX|Tp3mu3;icOFRi%?ckA zm#DZT1$HT-rrr8{0_I-s-1sZ*U??-(k1h#7AYiuOZDLKd z!%M<<(rsG{I%sCVK)5}Xxk?Nok7ON19P^QI0X~c8tU=iA+E*x(){wYUd$RYQ+qqon z5tR<-a_vFlG$_-)7v)vDYXo_k?_+=5C?2iEIa7sdIFI{gHZvt$O^5nqSg1Rqx#C{c zZpR?yQ>LZiOlH#MwtN&aDwaY8gu7fMe+D!tj$h{g?Mb~!g9UVcH=QeT08{9Aq?xaP zN=FY&X>+GBvW8v0hkD2-sMKR7kYZkL&`2lvWZh(g6Eui5u5sHxI2s{oBj@gX_EGaL zh-X>lg>;y|hm9+UaFhOdafPf^O? zn=QAXlzE_XhtZn$=xj)J?7)uH$AQPD7Clm$ioWA55HSZIOhaCP=%83pUYfK?!I2x8 zOSaaNn+JaDlFYE+6S;`d4^DQWha9d4h1+WL) zm?{*!F5?*zj#XOYarY`qyAV%U;;M;@JXBBF%N)dN5``!nz|)9lkcnO3(80d)-`T{3 z_+**OLdS+>toMtiVY<)t%W3^Ro>L7pp+ts9X;P!-nE0cUK1lb&5lJQDxtnCMle)+XP z=T6XbKloDuyX+UcgP#wiBqdHj$>f}mCl|SdCjbNuP?!J?|5zM|`U9D!*TjwEb13h< zeY$ISaTDI^h^_m&0KwSIhqO&;Two@$_9r#NFt?wkDw2Dh{AHNSlq!Z` z3$lJI{g|ry?90TPMh!FSM)aUTl%4J4FEtk%$D0zIeodd&ER~K0`M_AOOzY2|zM}N7cn|pPRdPF}7XV2;k@}q(>1qu(L zMz4{mKn7F#Z6DnCWWT{=JRLVhol+`)uLVJL%g6o1XG!;4kdu>-SMJg~Q=W39iMhin z4V}dRt5efVJA@yp2MN1@5}$ZRq;8f+rfP^m#fp=*iYCWyT5^p(h-1r09{L>Qs<;>O zBq!JpQxpbvnj*<;JogAV9axew^p8iqZFwK2>f`v!1nfdSa^9GN@Ds>VK$*Q{w z{cKMpnj*2ds~x1Jb%S9sBz&t z4)-agw-!~UI`c>Pj~*gW)IcE5)tHb#oD#$_kcERoZ9z6DRdh#r&RD64So-sey;mjsItvx5)^o(;ae& znGp#ztesi!)}a~}qsc*2;ckgSrfNcJ6^t`5_T(C66>$U3(s1n-=GCx^@(`(g3Dj?$ z2Fb+da0OwzRTGbNIw(522D?7>C|v5cnR0v?l{!*B!?=g(^7d3QgDMeTKD?7Qeq?Uw zFJArIqadAMVHjPOOYzZXoN@ic{z2J_>k?xfhr!jM{53&KQlvE0oi9EN6ZJRO8m70? zNkZa2`{mFA6PMs$8qeN6cb62+A=t2v4W!bJT2=<3m?E$G(ZBp1CP}t;ni?miSC6Ky zc&DA5LDwZ=knUO>saXG3P2=XawX>;O73usiaY-(FC+dhw6D_EhPeK^q7s!wnn6B11 zzG9{f=$G8QBj*jYt}l-QkDtU!ha`zj-2r?4+eAiApFF<0I@KrsVg%~;*kEAB)|%}E zHuqu90H&B&^YY1D?k}&d$N>2fO-I3=_fTHeML?Z=?XW2?)QTJaF(B6&$MAbYty$&qLgy8N}8*&JLM~E*atlav88d!LoBtt z`&vh>s`2tL21Vi*M(vXA-#&&ok|4(TcKJT751QsLMVc zk>V1Hbrh<>3vcE`2y{+}0>2wlVy(ixVd)p6)x*g>^Ph)pN(>znztSjmgf?KENaauJ zg9D5wCy{Xa*~+xGi0hD2K86#FSdW!?3hN`^kFnm1cI|9)cGysg`QHPnX5IfMYFyX6ZNo+gDt1xTho|* zQ4NlT3fQwc-le%>WwZ6~9u|P?xVl>tXiK3;r;9Ig&6y<|tZGtj8kE)T;hXA@CKZE< z*&br;W1z`ptRKZRR$ILKl{h@hT&r_U*Oe8Qbs7>y*_TH}PFAA5%OjtQ)QH~-V*>_M zqEzJx(hQDr)|!AxA)|^oM$O?Uq0UIlFWX!k>H%5(T>9q652-vYl<9RMXk$0%*R8Vv zxlcp03@*bp)Mx+4MMT6>=B2&MPMt#Ln?MnQ?^F-9A$7NHH6_De7QbZJS()Nm42GO) zP|J#5j*5>U1H{5mOk2o%uU0u<^i2oTCh?ZH$P&*?nTD>;;J)$9rl{dlLNF^jQyWIG zp@^3XI-!i_rOcd=EZgE}7kJrGjHOC|gk^~xwBRlVrat$t+N!zAQC5(2%lXzY-o|+e z4|bQkweu3ea$M1BK-P0>W-o_|CPl6oAzj*{d4K_ z&r=%#HP%Za%2MYDNJ}B1n%puUpzTQ zK3i@uS~n3vcnGy?fTc;AJ&K~xNT>Tib2;Yv-^#9CI7dpW*DJa<9RuzdWk)*!LmM>K~PHY*+U6)k;B&Xp;#t9D=?J*6GaS%HdANc z0mf8(TTT1dEWffodhmU`8v3H%QOh^p1P<3@deIAmu(0(zK(KyW$VOq6CU)u$^rCL+ zfgv+M0ACo@bl_+a13$Q5zW!AYkC4gSd$V|1 z6V&eGzyJPh-|>-tnbfdFDvWLN=u*u4uX+{XPpH#2iIfvlM3KqG4W%ZxG^EmZ@z;0? zdqGZhzuTtM$=eHphUY5v5=cre%N^b9fCX5KDMF=yDR=Owz-H2Xs zv5$R#n5N+`555qjAl1BwnR$!K>(e5*SyOqUgVcIA}Q1^2w5XDIvAD z!YncdJFsKbB+OlnEHeUvb><-(bIkjA%#yrEpRt7rQ0-;0Q2u0XA+-pgdgZoWjrH1F z@~*8!eDivBhty(`!uA9bvKukBt*gZaydOdZAX%VRYdk`SyUu{*oQ~+Mo`(a|o=kIA z5dE*B1%ISHd~hBHEUvfhCPmipa538Mon@{e*QF zEMbC-N6*u|sZO?}HR;wEovLyA+R)M%j1#WU$Bs>{Oox2keZG0&a{QI4^+MUH?(9qC z5g-+q*u2)2ox<3gha_S3BzD)9*YE<7(BEkDjK~qfVhVlX=}yXPE0AA2xDa_L$Y5^O3C>GJWJOnxKe-E z*GZ4)HXUoq)vcq0RbIC9^O>X(^ zZQ&sa4iT$VMP+t+e-&pcS#iCQ#<=5JAxC+>QRYtx1hZ~@nS}u<$jf?q)y0>$xEV{S z*~IeAfogxWf`vKAl&dq`P`YY#*C^eTwgToM&4GnnIf!EPgi04IQS?10&+9m*w^~TQ zY(%Q8j`d@U$%8F1ye{&nPgF}e#sCw26 z-$=>bUesq0gt$Dab2as1f6qGM8UUUf^M*ThT%-n`?{?Weff-POGSx+=nY%O48?J4c zU+B(+9n8D~GtwucuKEnds-wFEv8g^Xg`>oF23;OZRedWGg*@0Sa%}B@_7qcv8b50B zoDYxsa|H$Q&w~#%YziE@W&BK9Z4A<=#_5-l(A5DYekk4}g&^uU)wdyRiozcH8(~S; zm&h@dSdYY0#c7cB2IwrXkylAm%Vyj<*LSYOf*FU1WF63Vvz4tOfD3wXI+iB^o5A5;aRf}>AsqADxv7fKdQj5U3{m07i@G+ACT5#oPv?r)UI8v+tE;Ey zFV7ehhzc{O1rt=LPy%I8fwo+*Y7;JTwz3xO;rhE_F*}n0HhT?r8PzT-AO!g9214@J z{=9w}H2u#cKWoqP|hhDMwPQ7J+(Z;y?C00Y_ULk!BH6VL!)7hN5UYE5K zNBE^K$qC4rwxNF&$&paRQ_@9`@E1gGXh8}!S^c6$W=+A7C$=scn zs9+=Oxx$!et^F$frY3|9e1l8=H;-ON3qL2Qs1py#Uv7uVl-pbLz zU6eH~L=|10^G{`h-tLbw~165{zeV>w3PLfj&Uo zo<@RpM==*?F?-B=D#xtr?|>Y6O2f(e)j(B!SM(uEoip z{l{WJJbzLLjww@l@A_`)F{L;)>vztDvL2BfQ0V8o`Ru19k!1uq9Xb0UAFf^W$9jq% zU`m&i*A*+U)2va(SEmB&NbkJg30)l&i0&8Z@mh>&R&;6;Q62+xf1QY*Lvg0MZqX(6(6NhdAJ4= zv&oN6Y3RJtBrr_4iomU(U-EXzSBy4`5R@go^!uyEY7H#?WyC&Q%?_bNn-`r?RdkPQ zK$YYN(Ew4sL{a7J-M}w2xx2kF?ppj%t^kSTgv$(-M}L8w_&nj~ctc+i9@TOq8&J8sm?_hB30)*Mm3ptzYb=sqYk@Qnk7sL{9VH0zU51d%iz>Dvb|x z3&Z;;*ka{Y>8|PgHu~sEL0~^!%_8fu-p|0CbkhhIZ(Gu_$47^ekJe%DpKkH21ioB| zUlEgViEi3yQkloEebAh2*U$%d2k}L6uNjYQiVFP@$GC`GR}gI3YoQlraUQKwUY0;d z-ob#W`(d!-&R32U%4OFA! z@L^%i-cREBUZk?C89+wQny7n5KOVsqtM0K6b;QcY;UoNWrxQee)EOI?dW|H0MVV#O zO0i`jXFEHm(XKdGp=I$&K_F*e&g=04k^JaJ%X%z4VDCG-usj{FzqSe{;yGW~9kKS+ zv#YqFI^n|zT%w>RF=HxVqv5@3ae;T<9~`>QW5Q6%Ycq;C52B}iwE%516ms>a*`Z zZjw|A9)I_i>$FkPz^{6~Lclr{#z<&IEiOT@+s(oD=e+|G%6zneib64*2>p)gTtmju z@Uob6N`a=s08TZn!@^SLNGZccOjdjxN?3FvZ?V)G=49$gE5WBIU-J5W&NNhmS<%m{ z^)4H*savK?3N$2JEl#3Ux|@rIj~!+1Bg5iWDw0&j-~TdOATh}DkDUwv=M9(X2&CEQ z4AV|$4_QovZN{x}>S)Y_ZMGmD1{Q5e>|vgko83X?Z>DpYVTTvu1zC3KT3K)9pZPN* z1$FWGVLT5~v@{VXK(&*M|LcVqDjaFNxbGWDlyT*cKCqs$m(SVKqF00(r z2Hdw9%e*}*;pwR90<1Y$>_HY^>egF>AKWzt($)A{B1^r^sh8Hp+fxQfi@Z9Hm-_FX58_|R1t|i9#b>4I?)&J=|dD6qY0QE7uHHfuz_cNr>Pa-&b4&z;{~p; zSOfY=uX5XN6JywqQ|bkosM|(v(%xTnKuvwjrN4_w<#Xl-h#4#+JW?wth$j>eWBvXc zN$$nzM^2%BZh>2Wf(SLggQGaI>hGL9V%CAgzW8;!c&QT-4+g02Aw}D@qpQj4)ZHk6 zBPF22s+)4qX;BeaV418izBvrk0{IOACG~oe$WFj1UV=RT4$V5$jFKIm)zmr3fI8x3 zWcL2@dZf)9nRdbl-v5Del{wDl;+$GmGa_PNSEEJMQ(W$c(Ra8ygFJw+Sm2%XRM>Ko z0twEC2ixXr;boCwHx>E(FEKkvKhDtO$5uENPA-{r=(@1G1&m8tuF%-5us<2A(4Xt0ff@47c6i`3;1)1&Tb7QWeUk zn)*8FyzkIuMwly@`E^XU1W>5i1^rg=&R3W}SC5A1B(1^!u32sVwx4+7(dDyNwC1N6 zyXz*Zt69=)@A-TzZX6kFW@^l76KQmmFl~0@6m_NZ#bJy#Dw2emPRR+OooRb7&z~en zQ=+FEr+~8ufsLR5K~cYuWRdLp2&xehS>-qm!jNIayVbI%^=j|Na45SYz|dw|hj$6F=GE^xR9JR6Z|D zp8kGW%mS~+Q;{45R~Gsw_P94vV`9HM4sGpzR~t+8Mi8PL-)T|s`o^)5nGa^|&pEJV zNLqQAdijOgyM4uZ21KvDyiP1fh`m2&S)-QcGeSp>c2Vrr(Kta{vi<29vo*x=(`z#E zNjj8KDb8eUGTaJVv5ptU7j`N7p4Qh738dVG0s_Fx(;>mdjJv}&MiO8`Gx9w@s){PO z2{Xe!g$?Y(?^?}u@TlNX&C2V`Fid*STncne< zf$z#bs-e)3Yp*v2%LNj92PWU2KjFpZ!3cT<%GMciTi%EYO~Q0(!~mG>rpz=cWrLew z%lTBIsGma(c-2GXn>AE)E>eZ8-*{a3ROcD5729+p*!d`X<+MAlswo9uLb^rOwt?mN`m0XC{lLe#q$H9Svz16`L44xcIH@o`O8c&pku9KLRx5I3{{R zgdv&hs9$_vESB!SL`O>2S)qh6 zv^QD4hCfHQ$u=hhw>z*=n%=z1sj0f`y@4Vs0)>!s^NfCsSV7LC`}J6IR*66)H|b~1 zubfOy+_{6Aj~AbPE>AyzC7zs>WA-~DAi3a-A8d>YWHhWqTps*-J<4mOpPON*6Vbg1 z<9Fn{5mF7+QSGV@cuXZ54(p4NiZgSn7`T?IACCf`E>C@-3dui4hA8)X>5q)j#sGyQ zR=D>mqg4rES@eB_?fS{gtM%EXm_c5s{7rtAcc)Wa^?Zqjq%(m}#q1WG}#8Z7rSG&vOFn9>PoF;>V%Dh;e2Nuc7ZPzFa|U**#* zp_)7?_}RNVvLDidX{K(=A0@7(Pl|OWC?Y~XpyUOWMMNG1-vAbnE>O2rMxXWk%uH$cmne=fB?>O=Buwdg>w_sL7nr<1Jqt(IiyAZH zb^!-X5o=>XEXiF+x7Y_pA%};hu=BOY7m`H9{B(@y`c;4C^hBiz4S55KQ@bb|GS2dh?)Nl#Rfn*x5m>(4nk?lA zDW^&SO9V4~>_Jq;K_Y?0hb$|QjQLRIT8hr52IYktjw%N)@4M2h$TYl@-Jn^(S|!13 z*-qk3-+m$6&)?Ye@g-7Qmw;8|BiVJ}6it|igq<%xs~of19t8z=aX=q|2r2XFw<%b$ z8>*?D`}dk@$l&|m`|uSA%i9=oQD?c0fy16+GM3AyOCE7lf;>WlFiF6ZRasgIHBK-T z@Y7I`55qsuhlpKSLut`K&r>^3zjtByy}BG<);PbWv3^N{(cPmd3|6b0YPXChs+Z-Y zeIYu+9s*WncZ6r91s)+NVGy&mP@-QeU}Vo{TQ?z@6+P}}Z=oTc)M}^cx8%cN#s?`1 zi`7&+?2GOAVj4#Ml3-J~w9H%W>ru$qL{xE!kcfEW#(MR0ruYUzZkbF&uJu0rA_yFA zTXSN}bSd#BLp?d+bxA=uWFml0HHsGtCB8Ga|EDKYbM{93j`ME$X~O7y(81a>d?@z! zMjzKDT$=^A^BfA7{^R^T+ zqo_-MyPXUbPti;Ib#@d>oDRfOQU<2PzpP_yCnPDSn3!wXtz0&}rbP>n&LCs%36uz{J*{iPuBBQQ%$zYu zT6~O+M~}^NJ{Hk^jMZ`}!`@prj+*=ff1<7|f`t+Va3mt~Vn*b5VO^YMC_&>WrB?l! zm4vG=c4Pb8sPvdenCqh^UrNB70q^XxrrQaNB*ipDUP)JMP=3Z z&X^uuji{!`c){JR$eBBSAs}!IJ^U{K zW;gmvA!BNco!^8oZMHC1z=`M*Pl}~`XyDF_$&L`Ih>ji`7&N8}69gnECry3yCTxwXTYp zxRfKiiuCNK>(70=pX?2@xsOL;mIvt=kdfTL=|!I1h3wl`@ua-;fr;rq`v=Ke$dbNO zVb>|ny;($-DW>E<-q2aMOhfs`JXt)?0qC#1h3Osh{Ol?NZKNQqjWzCL2lkWIs@DqC zwv7}O6-ryAHn5kwM);iiWrdbP7MR^Gu6?OLUA3bsJ+qTOU#t`NxG^(Hbfd|V3t-PB z2i3{(iTA?oPq|lU|ID0MMN%|feS}WODs>F>H%j$d7`) z+Jy#oM1S@zNlYlvyb&CM?t9Rl?KBhizAC+DTCFj!&&AzM6y*!6aYkHNjMj#wlIEwL z311O+{$7^;A&wv4pcaB1!zQOKrueX-rv)wJ_NQ(N#0mvzGNzS=sZTyL33Gl95o}TF zgkOg|8CZK|XioC<#BalNXA2!nya^?S1-CO=e^?hN(G7LJP z!VuCiFm$JMNOwphCDJI;Avr4D-OWgcbP7s{beA9@Al)H-pHaWR=lKin&*$b9FV38^ z_u6Z%z4ltyx^}F@X2HqSm$Gg9!|i9p#(a-}ZrVUQgwDM9x1_#S(4zvam{YSOU9S09 zT1Pw;x_oGRmQR(f@of#=i<`q#v|uNC7GJ;LTIEHJ(mHr?8{R9d#hjv7=E+B!PDwWL zML{OF3Y4**2BxA#YFOXWLTXr;Fk5} zrF|WZ;TH`nz{s(sTP(fFAY?7>(Ub(5*7177^;jb3yQ{gK9t$u$r$1S8_3>i($P)SU z2^7~+3}5Ewz=#9^fcFpA?Q~I!{ZjPKtLF8%+{$N$uMx^a@4jEIos48jlk^_7a|jaV zMi{JWArF_Pa=(UDJ)ZYlL9P%K>edxMG1L|+O}LcZeXRmZP9DnkCe{|?{Uw)_w{_k! zH2#t!^kQ_yz=`Ah<#)Mf-y#XmpLl2IM?^y9r3#5C`YWwvHnrtUbJ`k9It;Q`0hWc8 z=T|a_RGE_C)&}p-GpnNHlod~YugNQW$KJb9P&8|D&co8yq^q`QyMiW^2Xb^R_guW3 zj<-f$4D^@q+GKyseJM{oue`xH;qZ&uWZOI2yPv=D+d`ythf~#k(tMIcY&jhVBij3N zw6)r#1Q1#8y#hI)U z`9r${90j4ReZLJ+Kc(GPZO?VQ0C?imCzVIST{x?G{VtZiu;P{^M_)F0$97Xy4|Vew zRYLsfnN*c97Q!eLalzqP+E*ZsOT#~?j@=_sv<5bJ$<&yWS492-RwjY5Q!f-Ko5qx< z(SidYW$@@7ht9{^0^vruT~fZCKDoy6}gN?k3u*rQw2x3R1 zTn+?)s_22!IotT*sI(dTcb&Li^&%Qwcg*;iiSZ#F#ppk?A~eFNEw`~);f@(Uzm61v z%@h4njd%>d4PmPmnj>>(EU9N?ObT)Rl`*>pbaZPl4!S*#%{duG%S_QM`YC{fA!v*H z)ZIc)2QHD+o-|ly{lx*h!I|Gu1oP$ka^K6lh+qLwiYSSup6I<<1>FrA96EVmW29CI zi&#Z7p}csa?0wDR#nNs>Mrx`}Iso%!27->r!A2E(EZ%1+8q90wa85h#f z5P?Aql{%82(Bp6Mj+x6txu0?^Hl|LMW`8_)Di_KzEEQ(#?u~lSFbOTO&CJtZjWdq~ zit8^N)e|$Q;B6NC7AujC!^a|?DQ|NIEG;#4-1vA&6A0~er9H<5M~`f%$#+R06>Xh+ zio2fL{WB-~SdVQ=Rj?qFzLc7hDA@F9|GMg1v37UBbn3SA z^Kn{>ijsVj^)vu4Q(<0d#=_AX681De2FIeA<>E~YK~n$5v#({VRUz@@l`J4R-nm3{$j zP?iu!uj;DlvpQ@YyRwZp#Y`7Pf>{=pF;A^8E61tk%%DmMNqsLUjD6EuR=Xn>f|^ilT z_?|f~#K(OsHOS$$g-|GW{obvOYCXgu0+Ge38L@cBGa_t|r`7&DkTAI{S8VSgT| zy5SM6wMv89A(4+mFk^N~){r*yU`l;X2RyR~O0)xU4eLPVB2V33;isa`5QW194 zi&_4=`Q3SDLsCV&UN-@`G7Eqs@WwwG$?WcM!$^qXZR_O3h4YEeL{E|7$?EFft)e1` z14D0XgZ)d@?RK%_BTav8$DSuN`>|U&R*xOg+rDv(rlqUt^J1*#!!00#^wU7IPFJ1% zCbg%srZ6xR_fd`}ou;6qIY4UqgdW?5|Jy~{jmG9~h*Ce@r1XZ(ROo8wXU9q@u(>WL zW)~}#r;GJ?3i(m7LjnIKt7B}qvMz^`2oEoJ4=s7cwm;AyLJ%!$>90!7nc-i1y?jGc zW%udq*yGK;^oIx_mjJ1D&dxhoc3UM<%2=SB& zaX+9V^(U>#y${+6ptH%}6GLGQ30Xu8PD2mF>7RVRuHLTG0Mbb?%=n00i;&z$D=n(f z;#XUG_<_SCQWmjPvb$#iQgQUY^rVfFu?Mvylg)YcQkQ`V@5O*{roErXhgQsL)sOC6t+`BCr?DF(tQeOhyQwVI6Bi6#@yC9~ zj=RPG>gXxs8wr*xxfM2vR;Q}2&d{0a#m(`rahipaf_{NlcnTc^C2*Pg%TGfAdLa1F zOis0w;|JCc;lvu`-U;JBoEQf-)C{;Wx>B?~_4K(^2?*fAOvxTd@7e3yfZXS0D@)MZ zh<^7Mv=!gJjqJ{3&|Yhgv0Mw=7aZo~NudEL3;+xH9a1Q6VECnAqUp)^z?PoF-0=58 zmr5g*PupU+e`e-qoA1z3!A=voLf%%LsB+=aVcGE)J z@3qQ#gcjdZBLrUo3;kgHqYZhLwwJ8EVU%`dqHnZ2Kh%^o@>Mwz?&>T=vJh{ZoBI=9 z)-zM_%eG?w_6Z+?WAz9;G?vP?15egRS;%*RHlx=oUER@z;nZsSByA|HA7|kbGGrZl z$b7b0r>_42YcuQwp|GH@VSra%xt)JiSEnM(aW5CK5wtDi7$e{jmUo7vX(k%^?YeDf z_@yIl3lj)+(&--9RcvTK)**-v2e(lVTYzxdcKgoExnyWpovx2$k{WA0UIJUBnlVWm zZp7unq|@`ei4msBt;v`5sSy)KJz*OB2VJ{r?&JW*k+XNf`_O%XWL3)j;>Wj@-H_XK zS{m=ihT9>Q$51_DkR4K1F}LIC@6^KZ6dnBWqtg^I^DE~cec}zf*Q2lSZoDM|(4p4+ zi2kLyrvBqi)#iK0h~rpHBao#vB@{&OeJ2PVy3UKJ8WK&mu01?8wW3|I(X9R;_k9mb z*w2q(Yx4_ig_?#84C8z!5xY7k@3A8vkE0>6Jfh;Mr>1nNQc;CyN#Od1-BY#g-}8$S z1Aq)FgAQy=>ZR`!a%PoA4M3NiAs{r`hvPwF6=6d!Y zPYvXO?ci9!tBp6lGF=AQV#Axp?KUNIu7Lx(fvhj&>Ki05+LTy@NOJ7GAuxG(%#gR2 zIPNPP8U*AA?<#o#{n`kp`-SX3HfR$thzWp^#Fehy-x^w=Un7+5cwYZz7XcW)0c8a>`Xv0QVWvPTM7w(H}RefqX$u(Mr6Y+>h11E3qD#}8IE#NEu+)PF}EmyZO|(TuN95AZ>gRTrf+ zSwfs@B|_yC8BVTE&t6=#e$fZ2%;E^A$gS?HDv_QA65T*q)V4{ILK}7A9glgir8(j9#=gMv5+46I_UkltDE-A5*>DBI$?WT*My){@xtYtn2N+)>icB6Xa@j} zjZr4M^e4bqffrLTPQYtKVv)Z=((~PqRJ$Zu6uHJALGn#0b&D`UqVD_ipN~l1sJT(= zhQ}4^9Q?Ll`MouWE~G$!<0>*`q`zG$EWY#r3L3z3AVVtG^stR?AA7F*Awwv^!fxB@3d}Mg}3g_H28&hkVb5tk2`3tQe zpqvSWtux_UP0p9sYl@!+8<@2~+kh|Q(OqRGTAm`V`e;Jeds&W`T;$S2s$7o;Axu_? zj{*%Bg3utp>7h||ihLV$*;+o#_x@7a^-#Z`l@hzUkn;>~%KEvfkhDJ7YdVS<`6SyF z%zo~Y{EX%{#WSJNnTs$!@;)IW6%nfkpxxjnu!p}&hUmNcE>|;_6N*T%fV!o+B~2E& zmyW`kF_N}n@CSPKBk@C{DT1Lm%$k#o{BVY1T&lf z@*AE#xU5ucYAuF+GGED(>k_P=aHV7MGgdHxks^di`}DiI6RrSHBe&avHSGTK#;@FN z8K5HA4lWHmV$(>UXVOS3MxgMoFC{HQfeuRAdy*O!D<8H?O^f;Pxrvfr%1LP$YV+cW zY}PyKEN{!4l3BpvTxWYPr#hOhX}{iUrgVnq12`6_0AeWXOxbYyi_|@LGvA0)5Eb3> z0I>Gv*m_S44JNhvWU9E3l|*pk&4#bU6oeNg2Hu_2 zeyuEe7>#|I+J7z_cWBrcjs7d9;5c7YlXH;$%9H`#xVBB(Rt$%&>F6kzr8840EnBmT znG&GzC}GkPM4hq0!E|>i*l-lbKiK*M@fs*SK7}TMXMzT8S-G9h$U!@0*#7GyEFV9G zqG9x(YZ|2bD$2R^kH|kWXcQexr!3=!9U|g9Bjz@+0NRIC|A@zmy=Soj>9Jt+(nxN+ z#r%GPqSB&7F1yjMrk3I|9O_=fG2V;$jVhfhzgpyJIo-W)*nPNK4sW*0L^@@t42931 ziW-b}%2;I78)_4?Pt>z;%bqtrEj3c0X!;sy6_ekM?X!=ETt=rwP&9DXI*m|=%9&Qb z695)g0PKRsPASSx7aiuVI8opf4K4?K(^H-IqzwD(=dvM%2D1IqzFR)7PX^k6t|_{z z&Zwy9DJUe&UnpryH7MfDLQXN>Lb>cqDl8vR#JBX7pG2YOij458pDmZAM90Lq3PW}&^3rnWszT|`D{{)C8Bs$jik}BiMphVk>*uv7NL&4hETXD!B`W3J$ccnFLwOt zMMLFF5&-}vh2Q}lSeFpopHH~~T$C1>7Iq>K>{e>VNmX)d)Vkc0$}{-g^CG*M#*(%d zf&t3Glh}Z`T1MXo(82;}RLwLW=QjnA0hE-z@@WNarA0afClY zK?^e^HkC8q4<#(#+jbcjLvumVfi9wh#N1@u+K9b}+3yJfyrlU9nnfQBaN2G@R(3S- z_>lN|T68vObGh2^D44%~gf_G4Fygo@UyfUvXvS4$cKJzLGq@4}{g^>bbY{rNBFlA6%ZnT$&X6Ul)jQNI*yKrk*vi!R5ht0t5p(v#SU4J9@Q zOxl^rzW0X-IZG^fyH{`GA6Rt4`(;ySz23Z>tao+KH{G`XwqEwV(DqQfrqkY<)zU!b zz_mJ4C|s$r_+@4D$iRlB77CnKj#sHeq}UgapLf4Jeh`3}ZhRq-vxk-3!$`nITa1<0 zBMZ>5mM%Z}b-2$I`p^OmlFme`FK;+cGG<6_Fg>H^e{L0wdXFXa_m!twrjnuVM;9U(*<$j8X$oBXUGmQN)Vlt0R>7&P*WU&^ld9R9Pg|<}n0I>02lpp^ zyk1eI7p6&ULdsi#AXpzSvK*xZ4qg6Q z?ugMo02m{dPljwaCrhi}eQD-JVyv5^6Di7Yw^WBO&8WwDlg^OEhoM5+Kaf5&P*fd` zk|?@$-3h?qKpLIS4iH3fk3xSdHu?NMFoaqwp4!!+@RPnoeg#8>6)s!OFB;z8Tm`9*;(9fLd`hKaA~Ae@;U_nVDa>5 zL3SMW3dIO15~q(^=)IvvxX4Ne42yg_O=CB&V<1M()pgnVU@Gzlo_PlmiV1K_;2xDS zAm2RK%_sO&rxQ8LEZ}4!)vl1dz`feNAqyNx0AR=;e46QJNa2F5zD#HE-ew8M-TShU zOQ`L;eE#mpVfI`!Yp=YZ|9Ifvhgk^`zg^Vdw5QVeSD`XZ ziq~K_323%7Py&p%R+C?5-^KNbWFH}G>NnAde(g%M;(w53*sv#P)2evr!D_EkoPle+ zUBGM^kg^(`ElQ(qsHW3pCjSKIfjX1^#ZOjNg2!#bJ$L-ja@3SNapjm&W zJAo&kKB>g+R{Va@G*f#=x%Pu=e9WY>HrkW3OiHCP?&rP{&)xIycod^V2-u*I;$of$ z4Bo77?}FFs?(SS+NH)IvXKngdTz>{9)|Cq<>dh$($a~qUTSek_8y~EJHU&Uoc#_8C@Dd)5h3)mYw5R{mK_EB8am30; z^3|sG9l!iJbxwG^)pR7`GzHLJLJg3Ip~MHH1&Q@nhYNBk;pTWtrB3;qKOw=i=4K}9 z`nn6maR#eSqiFx>-vIvbo;TH+{^YBrnjcp#fy`*V@`XH_0fu63a-~cg4@|n+tpSQN zK*YeSD^Md%Mg%>^=|3CtaNECARiXlPU%FaWkm=6M<67+|1Eqv=yUd^eo`<;j`zNgg ze)-&WjXi7%d4!_*fZ9i^TuxIsy7lF=&_BV(&H2v|0D4{`3Ljd2-dN3*iL5gvdC3V3 zpcSF&PTbXJXy0xmvGdrRfQ9=CdL{Ya(Lid_+dKU95>^7AQOY`+x@DbPe|^Wui^~n@ zRkT$B^Nja)B=IHk{HjY)n`ZQ%wC{i(LMulk-n8mBS@l;d!VTl^s>>2ue5i;VYdjPt zJJ?vXt!_ab7XJ7=B$)EmUhs;0pHh^kj%Q%l*q71e2MIC8H2VuT2PXZu$9sM(Uv)Sr zvbG|OVjg4n`&~!f`jp%Le{Cyz;L+i04iN})O+U-aI*6X|{T*TWeeMzbAQHA$Dk5S- zPad9x@mz{@HW2<5GL#T8zWrwLNg;l&m1lN?DIj0g>Gvk2yFe!+-P#Y`q{x9wS*h#g zelZTd@_*xeF9oCA3E^D5mga4w9;yD4GLovOnP= zYHem^fKxIIbh(f3spQn*rsBgm3Z!+o@m0QkJUiAi3wfQe`@=xnmhr!JtO-C>QD`<_ z;4EhX6?;3%*_;pzT2ms2{s*3T2)XY;vMS}h1Y4O^%unyaT>sfHAFg`XU9yMB`olH- zZV}GrG%r2{RelP1`=I<+`kH-*(k-I$H0^O(g%!$g*8lbb7?d9Ep$NWAu}HkGbm{qB z8QOju`!Fp=_^Xtn;?;5K;K3Wcs2(kh%WEu5ST%3LmN*ZS! z5yMm*fWSt6`be|FMQJ3^MQ<|YI@9ym@O#cbe*uG%B08VX|2Tr_kap|(s4)TT(114u zw*Z`7QrEljltgO=NZiqXdeAP6=7+r%OVVx+?Vh@Pz-IoA5q@8ANAqs$rp9ynSQ^k6Gw-6!sM(xmu}S5ALMzcH&OhL!yCwWDy*=Yga%)Rdea;&{o3>fbB^_Xwc)C`sJK07 zOY=KAYvY-`+Io7Y=4Ro#f?=)g=BFR?1a`uIL++7-X-iZ7YWC>XP6e8w)^5dqGOJ2u z{|(BYWh=JH`jEWxbY`MT4t{dL{J2ggmfQ!tJ+FRkJo&#xNViuqozB*xEtGfW1sjZJDssBaPoWMjd<^RmX z8((k1_^2?rhbH$K{A13ZLT+mbczXi9C8%8*1i&T%Vw2@)v4gjQ*u`c*S*n|y4g25KvH^zB!SM1x}a1%uO{gJ#?k#o>gC#{=z6=rukU<_Oj1; zS%#GqGqfE|4E|(5?*983pE|m4Qa|3rXw}D^NX7rB4DDCo78V*j!L94V*{ipPnlD!F zI(6%Q>9P}Aa_GaHlOeG=fAE;b_u`4R*j&YIE#C8z7^Zy9KZ;~62$25vgm|`%^Vkp! z96J0U55Wm*H2Fkrur7oOmWCW2{T#z#j;LJ9qs6V0mCD0D{GZ@0@e3t!9Y2c8NXspb z>t}#~y;NP+l4m(o0sP79ar{0)jUj{CVY|GM8VeIhJ^tAT5F6kt7Mh9o`>upM+Z#OJ zW_W;ln(& z*1Ed9WZH|BKW_%eX|-~KiO&+I@&k1-_1!%H9(#a?3+O4OWhPIHY6q^D@N%|R^OB`b zd40FxZ{XFWn2jeR9Y-qmy_jG|p8KUHEE*tYlgE}fjD6=nn^rtu)b>_#If{<$PgEyC zhN<--*rT^xEMlYMyOiJ#1IJ8_ufWtBP~9-ZnCc`VZn%6B8d(c%Pt+bQ(_z5G5^okw zX7b#8f8(*{dd?9&kwz-Ud(_vF@K1W1m?BqA92zX{`FUxS!X;*#_Xist3N9+a#?%7t3e$TzL#n}qD%9k=!-KzZi!lrVNL|V zcr{r~aKcQJvR@>bI}~|VC3O|pPJ*ZhvKWabBnppWaPRlFMfK3$TRsUHjM1?BzE z61Ie8CD`o83mExU@uf;c=q7A&R-Y2Yh_p2M4FDaKaT7%yrHa%eJw}_HYX4T>CBolN z(~7Rs%y?=yE;5243*C$Sbx(taw9w;ox*{%e<%D7Pr|pX(!Af#Q!d5vbGj=$cxrN zU2MFagAXA)CaY4-6|ev8st6tY9#+iK<~>((+f-!O+uzULbSb{L!Cc`PdvjfVw7|z! zm);(dY&+k}7icSqZ#y+0@N<=vm*`(`ZwXzzbi4~w1)4?Dh2dfTZ@C5)U~My*7ak1_ z3_F)|)EbW8WO51qer#9_z$VAiJW-CiPWxP~KJ}^jc@Ev5J~a-$-{;;>n6>3IUnh`a z{^yfjf%^&cyIW$iuI_uCuSns3`x;ULqKVce5roKFN@F7Yc`lv9G*TqZPNXvaxeQ2} z|3#2>C+k9v*O*3L@O#lqdH08i^xok4#t&jaL<#;Z9%@>7(R1-QXSFgJSlxg7^w?ng z=V1xe`#D(OIFyPdvRCTtZesq%U28x)2sLT!k2b$xOP$*|a~-OFIQEnzj2CpC5Cf?E zDzz3BVvm&e?2aY6F4KgGaupza>ZPVhRT~B zMF<2yR{D6HYB%`hN^H1=JvossY5qK4yM;8Q^AL>GK?x6aC@y-;g`NqEf*+8q%W(woC*OO(Aba^4zD(0sx`bA&~hy|^` zg2a0OVhT96&`S2kTkaSc^YWfzVG@C7me_vqfw( z3_g&U-okVK7Mr4WmrNnGaRLJgw#b({v#<(0+^5oUwnBD!R`84sN}xQhOQ63WKATf; zf0N+NVcgnlPm!&v$c(9M$s2D^vbS*yh*oN}4L3B*LW=E6xjFde0#venkAj;Z-qN7Dc+h=^CufA^|LB!hF2Y`DrQWrsv| zpSS?JcIp1!sBo4ch&6V5B4KVdz+FNn2Ek2E#zSczR&`j}l$k}F$I5kskP`Ws&^)in)| zcXSAJuS(5#rhm5q)B;JwO7$6^zIL$3S%{A1x#}26rB(9PtV(dxt=~nScNARLVVhNP z$G%tKIlPCzV7t{`oFpvtIOcuItAjedlkoMwR|KFITT6Kn00)jrm1Hz1;f8L%UiCZ% z5}Xfpj6aQ^0p#IT+70l7)FEy?)k$sk3H@n)ypJ4-pWANE%go!h>(A-+rkTta{~K3L zmcLjK^4qO_oge2>q=Zv=jUMjEh_N+Uad19;|}dfltL@(vDay*M4IVL^WK) z?ts{5`Tbg2iTr7U)o~HZB%TaA9O{fUq1L0Uz&j9+0q~!xttu1ONNe!^kGmr=xIpce z6Eta~TJPQ+V#2Pdz`!7WO?c6#Cd~a!O-S%d(>>(UWV&E!^RtV0KxdRJEcBH0o67NK zp;ay|;Vp>%p52V-+Xf&NYyr9mKLHS+NjQh)JK(1lv??ARjPI8EigtKHuK>GEgS7B` z+(`of{Z|D}%mbEd$Xeuw=#b(6npC=HUn3 ze*)}R^rrLt3FniwDN11$awI9do*P)pfB3Ed9RoBbt~ZX#wo`h*R2gLz!>XWr-LlVi z2q=mwfS}ijg2bx6T)4{-rFl1)GpL-)sD?|R~kl*ty|nc z?@u!VuQ8=3eQ+GhM zxB^^*4_2LR3l1}W&IU@$=>iinq;opC-pZ<@#av0!#W@11%>MpFAluukAhmKe5s#Rx?uOcm?r3F%N z{y0cPIn=s<`|!fLgSeh9&Y_wG|6}`44?CJ>#M7#FcZsyXo1`qam7Gh3H0g3}ovlw? z0Mc44i|May5#He0g7B-=0))r|kwJcua$8IUzJ~l8Mq0L%GMPvCGPDc*dC@CBJGK8j z9}Trm0zOs1_F_A!--rRTP_l{{>)Ue%xv$x?z(oVqG-p$8IJvSLFD|{5>ugv4-dAFv z46}{c-h`WVrU#8`gZLxD>YIcFx+k1KN{(%-@IqbhlcN7pKTc4+K}Qwhq{3<;F`DQ7 zGTKk`*W9m*QwxkB1oVrgzBlTJcd4h*)loXFBDytFYCWR!AvlR0Dqy7Dq$y#-rCm-r0KR5 z0h(Kwc5iA=<*Wv91^8G7TvdmljB=>KMvlpn9g2UyU0o9yp50}M&BqYp3r@h(tMc*u z{A=j=a!DdKsftuQLnFiL;L$(YhyX~963IyNY|PF#`2|8!wggF92O5JlP1OEOjTNK} z6=2BD5(gqRX55#bVqZ8dJne=+aF%ktdwe(pkq1e01rcg!AV8SakZFA)u$OV3oVAX5 z5+j5A+XVd2QTjJmR*EJFzVFX`J4i@rv^=WU^3Y63A;E(%8#SGbL;Bf|yi`(zb?|#-rFy6`b!(D)@Vg(CTj-nYo z>2&n2Gkh}sBpzGqEtUf-61^C`;4LGD2jjfxG;2q=RX<6TG?d`uVuu2)f7k7vCT-Gv z(=kVdUAJ^h%9lE~@phJ0_IW;)Csf+YB9f^<^;chErKPt*>r0wHyxZ0?-tzAx^p z;TXYIn|lTf8O+xM@Th<4 ztp0ZW;{`5i+7PIR^kNr$tBf+PJxEO#2|sjGX8IOz2f>FR5SL5)wK@}5%SVX^Q-9Zf zvdlOu5SCsLvs@S$jlK-n_=+Hk{B;O)T@7|i zS>e~PULnec3#)WSOjw<03r1=dx<}4Wp|woev&_8w?tjgKD}SCFD<7cXFTnxYXi2i< zmGo~vf?RzRxV)8WQ5_SyE|slP zVL1HbUjAdqww~#U;Pppx89DQ>TiLB$+XY*9*>UI<*tX9;GF`1eRH`Q&~)IcnVXJ>6^Phska_OONu zm?E{9Lc8^GT=L}OQ4)Q0lAVt6^rX4)$nd&$Ja{Gja6|20YH$!Zkcl(Rn-y{HO=;=+ zIIK9tf{l#~Yd!oWL}zEM`kN20jluF+pzbSN4AsRV(1sDoql28^TI}C(r|bQziB63W zVv)B=XY=;qLh$*y%{jaC)qDj8y5HZ0@S%J_`5ZErczckwe6q3`vr|ehVJZ(AG$ww^ z*VHvi8nJtq==o?zxl`@l*#cO}k#xzdWLAmE7lf-qa?VOrLiX^$45nVuepqhsDl-Y( z&;QiuQJ-}U6+%c?#VVgCg97uPRf%Gi3eoB!yOKofii_qkMWj`&ER7ei^{mW=#l7(V zS>DAX4?w>@WF&Gl^#N?kQuy-c>`pu!@KJsX=?h=$r3u2JwvIy|!GesU%sarJf{dzk Jxuoga{{tmGu*?7e literal 0 HcmV?d00001 From fa49af2e5dc328f3bcab68a3c0e41b0d2036eb74 Mon Sep 17 00:00:00 2001 From: punkwalker Date: Sun, 3 Aug 2025 17:27:11 -0700 Subject: [PATCH 2/3] finalize light mode Signed-off-by: punkwalker --- docusaurus.config.js | 48 +- package.json | 1 + src/components/CNOENews/index.js | 106 +- src/components/CNOENews/styles.module.css | 200 +++- src/components/InteractiveDiagram/index.js | 262 +++-- .../InteractiveDiagram/styles.module.css | 107 +- src/components/MissionVision/index.js | 4 +- .../MissionVision/styles.module.css | 2 +- .../ValueProposition/styles.module.css | 2 +- src/css/custom.css | 956 +++++++----------- src/css/dark-mode-fixes.css | 679 ------------- src/css/homepage-fix.css | 106 -- src/pages/index.js | 52 +- src/pages/index.module.css | 18 +- yarn.lock | 19 + 15 files changed, 886 insertions(+), 1676 deletions(-) delete mode 100644 src/css/dark-mode-fixes.css delete mode 100644 src/css/homepage-fix.css diff --git a/docusaurus.config.js b/docusaurus.config.js index 7dc6470bc..1ea00ee12 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -44,27 +44,27 @@ const config = { beforeDefaultRemarkPlugins: [remarkGithubAdmonitionsToDirectives], sidebarPath: require.resolve('./sidebars.js'), sidebarItemsGenerator: async function ({ - defaultSidebarItemsGenerator, - ...args - }) { - const sidebarItems = await defaultSidebarItemsGenerator(args); - - // Find the directory you want to flatten - const processItems = (items) => { - return items.flatMap(item => { - if (item.type === 'category' && item.label === 'Parent DOC Directory') { - // Return the items inside the category instead of the category itself - return item.items || []; - } - if (item.items) { - return [{...item, items: processItems(item.items)}]; - } - return [item]; - }); - }; - - return processItems(sidebarItems); - }, + defaultSidebarItemsGenerator, + ...args + }) { + const sidebarItems = await defaultSidebarItemsGenerator(args); + + // Find the directory you want to flatten + const processItems = (items) => { + return items.flatMap(item => { + if (item.type === 'category' && item.label === 'Parent DOC Directory') { + // Return the items inside the category instead of the category itself + return item.items || []; + } + if (item.items) { + return [{ ...item, items: processItems(item.items) }]; + } + return [item]; + }); + }; + + return processItems(sidebarItems); + }, }, blog: { showReadingTime: true, @@ -81,7 +81,7 @@ const config = { ], themes: ['@docusaurus/theme-mermaid'], - + // Enable Mermaid in markdown markdown: { mermaid: true, @@ -92,7 +92,7 @@ const config = { ({ colorMode: { defaultMode: 'light', - disableSwitch: false, + disableSwitch: true, respectPrefersColorScheme: true, }, navbar: { @@ -108,7 +108,7 @@ const config = { position: 'left', label: 'Docs' }, - {to: '/blog', label: 'Blog', position: 'left'}, + { to: '/blog', label: 'Blog', position: 'left' }, { 'aria-label': 'Community Calendar', 'className': 'navbar--calendar-link', diff --git a/package.json b/package.json index a73d53277..094d5035d 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "d3": "^7.8.5", "docusaurus-lunr-search": "^3.6.0", "html-react-parser": "^3.0.15", + "playwright": "^1.54.1", "plugin-image-zoom": "git+https://github.com/flexanalytics/plugin-image-zoom.git", "prism-react-renderer": "^1.3.5", "react": "^19.0.0", diff --git a/src/components/CNOENews/index.js b/src/components/CNOENews/index.js index d2c0e2d46..0ba9178b7 100644 --- a/src/components/CNOENews/index.js +++ b/src/components/CNOENews/index.js @@ -10,45 +10,45 @@ import styles from './styles.module.css'; const { useState, useEffect, useRef } = React; -function News({title, description, imageSrc, linkTo, date, presentationLink}){ - return( -
- -
- {title} -
-
- - - +function News({ title, description, imageSrc, linkTo, date, presentationLink }) { + return ( + + ); } @@ -73,7 +73,7 @@ export default function CNOENews() { }; fetchYAMLData(); - }, []); + }, []); useEffect(() => { // Initialize scroll animation @@ -129,7 +129,7 @@ export default function CNOENews() { }; return ( -
@@ -139,22 +139,32 @@ export default function CNOENews() {

Stay updated with the latest CNOE community talks, presentations, and insights

- - ► Add your talk! + + + + Add your talk!
- +
- ); } - + diff --git a/src/components/CNOENews/styles.module.css b/src/components/CNOENews/styles.module.css index 157ba81b9..039cb7468 100644 --- a/src/components/CNOENews/styles.module.css +++ b/src/components/CNOENews/styles.module.css @@ -70,7 +70,7 @@ .newsSubtitle { font-size: var(--ifm-font-size-lg); - color: var(--ifm-neutral-600); + color: var(--ifm-neutral-700); max-width: 600px; margin: 0 auto 1.5rem; line-height: 1.6; @@ -80,24 +80,59 @@ color: var(--ifm-neutral-400) !important; } -.addTalkLink { +/* Add Talk Button - Match Hero Button Style */ +.addTalkButton { + min-width: 180px; + padding: 0.75rem 2rem; + font-size: var(--ifm-font-size-lg); + font-weight: 600; + border-radius: 50px !important; display: inline-flex; align-items: center; + justify-content: center; + gap: 0.5rem; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); + box-shadow: 0 4px 15px rgba(0, 86, 140, 0.1); + border: 2px solid var(--ifm-primary); + background: transparent; color: var(--ifm-primary); text-decoration: none; - font-weight: 600; - font-size: var(--ifm-font-size-base); - padding: 0.5rem 1rem; - border-radius: 6px; - transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); - background: rgba(0, 86, 140, 0.05); - border: 1px solid rgba(0, 86, 140, 0.1); } -[data-theme="dark"] .addTalkLink { - color: var(--ifm-primary-300) !important; - background: rgba(77, 166, 255, 0.05) !important; - border: 1px solid rgba(77, 166, 255, 0.1) !important; +.addTalkButton:hover { + background: linear-gradient(135deg, var(--ifm-accent-600) 0%, var(--ifm-accent-700) 20%, var(--ifm-accent-800) 80%, var(--ifm-accent-900) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 3s ease infinite !important; + color: white !important; + border-color: transparent !important; + box-shadow: 0 8px 25px rgba(255, 140, 90, 0.8); + transform: translateY(-3px); + text-decoration: none; +} + +[data-theme="dark"] .addTalkButton { + box-shadow: 0 4px 15px rgba(77, 166, 255, 0.1); + border-color: var(--ifm-primary-300); + color: var(--ifm-primary-300); +} + +[data-theme="dark"] .addTalkButton:hover { + background: linear-gradient(45deg, #1a8dff 0%, #ff6b35 50%, #1a8dff 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 3s ease infinite !important; + color: white !important; + border-color: transparent !important; + box-shadow: 0 8px 25px rgba(255, 107, 53, 0.8); + text-decoration: none; +} + +/* Button Icon */ +.buttonIcon { + transition: transform var(--ifm-duration-normal) var(--ifm-easing-ease); +} + +.addTalkButton:hover .buttonIcon { + transform: scale(1.1); } .addTalkLink:hover { @@ -116,12 +151,15 @@ .newsCarousel { position: relative; z-index: 2; + margin-top: 4rem; } /* News Cards */ .newsCard { - margin: 0 0.5rem; - height: 100%; + /* margin: 0 2.5rem; */ + height: 450px; + /* Fixed height for all cards */ + width: 95%; } .newsCardLink { @@ -202,7 +240,7 @@ margin-bottom: 1rem; } -.newsTitle { +.newsCardTitle { font-size: var(--ifm-font-size-lg); font-weight: 600; color: var(--ifm-neutral-900); @@ -214,7 +252,7 @@ overflow: hidden; } -[data-theme="dark"] .newsTitle { +[data-theme="dark"] .newsCardTitle { color: var(--ifm-neutral-100) !important; } @@ -272,30 +310,110 @@ /* Alice Carousel Customization */ .newsCarousel .alice-carousel { - padding: 1rem 0; + padding: 1rem 0 3rem 0; } .newsCarousel .alice-carousel__stage { - padding: 0 1rem; + padding: 0 2rem; } +/* Modern Navigation Arrows - Match Button Style */ .newsCarousel .alice-carousel__prev-btn, .newsCarousel .alice-carousel__next-btn { - background: var(--ifm-primary); + background: transparent; border-radius: 50%; - width: 40px; - height: 40px; - color: white; - border: none; - box-shadow: var(--ifm-shadow-lg); + width: 80px; + height: 80px; + color: var(--ifm-primary); + border: 3px solid var(--ifm-primary); + box-shadow: 0 4px 15px rgba(0, 86, 140, 0.1); transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); + display: flex; + align-items: center; + justify-content: center; + font-size: 2rem; + font-weight: bold; } .newsCarousel .alice-carousel__prev-btn:hover, .newsCarousel .alice-carousel__next-btn:hover { - background: var(--ifm-primary-600); - transform: scale(1.1); - box-shadow: var(--ifm-shadow-xl); + background: linear-gradient(135deg, var(--ifm-accent-600) 0%, var(--ifm-accent-700) 20%, var(--ifm-accent-800) 80%, var(--ifm-accent-900) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 3s ease infinite !important; + color: white !important; + border-color: transparent !important; + box-shadow: 0 8px 25px rgba(255, 140, 90, 0.8); + transform: translateY(-3px); +} + +[data-theme="dark"] .newsCarousel .alice-carousel__prev-btn, +[data-theme="dark"] .newsCarousel .alice-carousel__next-btn { + background: transparent; + color: var(--ifm-primary-300); + border-color: var(--ifm-primary-300); + box-shadow: 0 4px 15px rgba(77, 166, 255, 0.1); +} + +[data-theme="dark"] .newsCarousel .alice-carousel__prev-btn:hover, +[data-theme="dark"] .newsCarousel .alice-carousel__next-btn:hover { + background: linear-gradient(45deg, #1a8dff 0%, #ff6b35 50%, #1a8dff 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 3s ease infinite !important; + color: white !important; + border-color: transparent !important; + box-shadow: 0 8px 25px rgba(255, 107, 53, 0.8); +} + +/* Modern Carousel Dots */ +.newsCarousel .alice-carousel__dots { + margin-top: 2rem; +} + +.newsCarousel .alice-carousel__dots-item:not(.__custom) { + width: 12px !important; + height: 12px !important; + border-radius: 50% !important; + background: transparent !important; + margin: 0 6px !important; + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease) !important; + border: 2px solid var(--ifm-primary) !important; + box-shadow: 0 4px 15px rgba(0, 86, 140, 0.1) !important; +} + +.newsCarousel .alice-carousel__dots-item:not(.__custom):hover { + background: linear-gradient(135deg, var(--ifm-accent-600) 0%, var(--ifm-accent-700) 20%, var(--ifm-accent-800) 80%, var(--ifm-accent-900) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 3s ease infinite !important; + border-color: transparent !important; + transform: scale(1.2) !important; + box-shadow: 0 8px 25px rgba(255, 140, 90, 0.8) !important; +} + +.newsCarousel .alice-carousel__dots-item:not(.__custom).__active { + background: var(--ifm-primary) !important; + transform: scale(1.3) !important; + box-shadow: 0 4px 20px rgba(0, 86, 140, 0.3), 0 0 20px var(--ifm-accent) !important; + border-color: var(--ifm-accent) !important; +} + +[data-theme="dark"] .newsCarousel .alice-carousel__dots-item:not(.__custom) { + background: transparent !important; + border-color: var(--ifm-primary-300) !important; + box-shadow: 0 4px 15px rgba(77, 166, 255, 0.1) !important; +} + +[data-theme="dark"] .newsCarousel .alice-carousel__dots-item:not(.__custom):hover { + background: linear-gradient(45deg, #1a8dff 0%, #ff6b35 50%, #1a8dff 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 3s ease infinite !important; + border-color: transparent !important; + box-shadow: 0 8px 25px rgba(255, 107, 53, 0.8) !important; +} + +[data-theme="dark"] .newsCarousel .alice-carousel__dots-item:not(.__custom).__active { + background: var(--ifm-primary-300) !important; + box-shadow: 0 4px 20px rgba(77, 166, 255, 0.3), 0 0 20px var(--ifm-accent) !important; + border-color: var(--ifm-accent) !important; } /* Mobile Responsive */ @@ -303,19 +421,23 @@ .newsSection { padding: 3rem 0; } - + .newsTitle { font-size: var(--ifm-font-size-2xl); } - + + .newsCardTitle { + font-size: var(--ifm-font-size-base); + } + .newsSubtitle { font-size: var(--ifm-font-size-base); } - + .newsImageContainer { height: 160px; } - + .newsContent { padding: 1rem; height: calc(100% - 160px); @@ -326,20 +448,24 @@ .newsHeader { margin-bottom: 2rem; } - + .newsTitle { font-size: var(--ifm-font-size-xl); } - + + .newsCardTitle { + font-size: var(--ifm-font-size-sm); + } + .newsCard { margin: 0 0.25rem; } - + .newsImageContainer { height: 140px; } - + .newsContent { height: calc(100% - 140px); } -} +} \ No newline at end of file diff --git a/src/components/InteractiveDiagram/index.js b/src/components/InteractiveDiagram/index.js index 0571e499f..788a59288 100644 --- a/src/components/InteractiveDiagram/index.js +++ b/src/components/InteractiveDiagram/index.js @@ -21,7 +21,7 @@ export default function InteractiveDiagram() { setIsShow("none"); }, 3000); // Closes after 3 seconds (adjust time as needed) } - + // Cleanup function to clear timeout if component unmounts or isShow changes return () => { if (timeoutId) { @@ -29,7 +29,7 @@ export default function InteractiveDiagram() { } }; }, [isShow]); - + return (
@@ -40,12 +40,17 @@ export default function InteractiveDiagram() { setIsShow("block"); setPromptTitle("Deployment Targets"); setPromptText( - parse(` -

The runtime environments that product apps and services run on. +

+

The runtime environments that product apps and services run on. This includes static content or data published for distribution.

-
- Read More - `) +
+ +
); }} > @@ -54,7 +59,7 @@ export default function InteractiveDiagram() {
-

Application

+

Application

Ensures the delivery of a packaged up and functional set of software or tools.

-
- Read More - `) +
+

Ensures the delivery of a packaged up and functional set of software or tools.

+
+ +
); }} > @@ -78,11 +88,16 @@ export default function InteractiveDiagram() { setIsShow("block"); setPromptTitle("Code Repository"); setPromptText( - parse(` -

Enable developers to collaborate on code asynchronously while keeping historical lineage of changes.

-
- Read More - `) +
+

Enable developers to collaborate on code asynchronously while keeping historical lineage of changes.

+
+ +
); }} > @@ -94,11 +109,16 @@ export default function InteractiveDiagram() { setIsShow("block"); setPromptTitle("Config Repository"); setPromptText( - parse(` -

Canonical data store for application configuration.

-
- Read More - `) +
+

Canonical data store for application configuration.

+
+ +
); }} > @@ -110,12 +130,16 @@ export default function InteractiveDiagram() { setIsShow("block"); setPromptTitle("Artifact Registries"); setPromptText( - parse(` - Preserves a signed, accessible, and traceable list of packaged components. -
-
- Read More - `) +
+

Preserves a signed, accessible, and traceable list of packaged components.

+
+ +
); }} > @@ -127,11 +151,16 @@ export default function InteractiveDiagram() { setIsShow("block"); setPromptTitle("Secret Repository"); setPromptText( - parse(` -

Secrets repositories are secure long term storage locations for sensitive data.

-
- Read More - `) +
+

Secrets repositories are secure long term storage locations for sensitive data.

+
+ +
); }} > @@ -144,19 +173,24 @@ export default function InteractiveDiagram() { setIsShow("block"); setPromptTitle("Signing"); setPromptText( - parse(` +

Cryptographic signing of artifacts to allow for verification of the consistency and integrity of the data they contain.

-
- Read More - `) +
+ +
); }} > Signing
-
-

Operation

+
+

Operation

Software catalog of all components, systems and domains.

-
- Read More - `) +
+

Software catalog of all components, systems and domains.

+
+ +
); }} > @@ -180,11 +219,16 @@ export default function InteractiveDiagram() { setIsShow("block"); setPromptTitle("Identity and Access"); setPromptText( - parse(` -

A service that can be used to wire up Authentication and Authorization in a common well understood manner.

-
- Read More - `) +
+

A service that can be used to wire up Authentication and Authorization in a common well understood manner.

+
+ +
); }} > @@ -197,11 +241,16 @@ export default function InteractiveDiagram() { setIsShow("block"); setPromptTitle("Infra as Code"); setPromptText( - parse(` -

Tooling required to spin up infrastructure resources for a given application.

-
- Read More - `) +
+

Tooling required to spin up infrastructure resources for a given application.

+
+ +
); }} > @@ -213,11 +262,16 @@ export default function InteractiveDiagram() { setIsShow("block"); setPromptTitle("Continuous Delivery"); setPromptText( - parse(` -

CD gets infrastructure and application resources into a state, ready for receiving production workload.

-
- Read More - `) +
+

CD gets infrastructure and application resources into a state, ready for receiving production workload.

+
+ +
); }} > @@ -229,11 +283,16 @@ export default function InteractiveDiagram() { setIsShow("block"); setPromptTitle("Workflow Orchestration"); setPromptText( - parse(` -

The orchestration process to get applications ready for delivery.

-
- Read More - `) +
+

The orchestration process to get applications ready for delivery.

+
+ +
); }} > @@ -245,11 +304,16 @@ export default function InteractiveDiagram() { setIsShow("block"); setPromptTitle("Service Discovery"); setPromptText( - parse(` -

Allows for the dynamic lookup or querying of service details.

-
- Read More - `) +
+

Allows for the dynamic lookup or querying of service details.

+
+ +
); }} > @@ -262,11 +326,16 @@ export default function InteractiveDiagram() { setIsShow("block"); setPromptTitle("Secret Management"); setPromptText( - parse(` -

Secrets Management manages the life cycle and distribution of secrets safely and securely.

-
- Read More - `) +
+

Secrets Management manages the life cycle and distribution of secrets safely and securely.

+
+ +
); }} > @@ -278,11 +347,16 @@ export default function InteractiveDiagram() { setIsShow("block"); setPromptTitle("Validation"); setPromptText( - parse(` -

Validation ensures that API specifications are abided. Can be used in conjunction with admission control to enable security controls

-
- Read More - `) +
+

Validation ensures that API specifications are abided. Can be used in conjunction with admission control to enable security controls

+
+ +
); }} > @@ -294,11 +368,16 @@ export default function InteractiveDiagram() { setIsShow("block"); setPromptTitle("Compute Platform"); setPromptText( - parse(` -

The runtime used by the platform. Hosts the platform capabilities or their integration points.

-
- Read More - `) +
+

The runtime used by the platform. Hosts the platform capabilities or their integration points.

+
+ +
); }} > @@ -311,11 +390,16 @@ export default function InteractiveDiagram() { setIsShow("block"); setPromptTitle("Observability"); setPromptText( - parse(` +

Monitors, reports, and alerts on the overall well-being of the system.

-
- Read More - `) +
+ +
); }} > diff --git a/src/components/InteractiveDiagram/styles.module.css b/src/components/InteractiveDiagram/styles.module.css index b1b237813..92c7acf78 100644 --- a/src/components/InteractiveDiagram/styles.module.css +++ b/src/components/InteractiveDiagram/styles.module.css @@ -1,13 +1,12 @@ .interactivediagramcontainer { position: relative; - left: 0; - width: 100vw; + width: 100%; background-color: var(--ifm-background-color); text-align: center; padding-top: 15px; padding-bottom: 15px; font-weight: bold; - color: var(--ifm-color-neutral-darkest); + color: var(--ifm-color-neutral-lightest); min-height: 405px; max-height: 465px; border-color: var(--ifm-color-primary-lightest); @@ -20,7 +19,7 @@ left: 15%; width: 70vw; height: 435px; - background-color: rgba(var(--ifm-color-neutral-light-rgb), 0.8); + background-color: none; z-index: 100; border-radius: 8px; } @@ -31,20 +30,35 @@ flex-direction: column; width: 50%; left: 25%; - height: 50%; top: 20%; - background-color: var(--ifm-color-neutral-lightest); + background-color: var(--ifm-primary-50); border-radius: 8px; - box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25); + box-shadow: 0px 0px 10px 0px var(--ifm-accent); + max-height: 60%; overflow-y: auto; } + +.readMoreButton { + background: var(--ifm-primary-500); + color: var(--ifm-color-neutral-lightest); + border: none; + border-radius: 8px; + cursor: pointer; + font-weight: bold; + transition: background-color 0.2s; +} + +.readMoreButton:hover { + background: var(--ifm-accent); +} + .closeIcon { text-align: center; width: 25px; cursor: pointer; } -.closeIcon > path { +.closeIcon>path { fill: var(--ifm-color-neutral-darkest); } @@ -90,15 +104,17 @@ min-width: 865px; border-radius: 8px; } + .diagramcontent:hover { cursor: pointer; } .cell { - background-color: var(--ifm-color-neutral-lighter); + background-color: var(--ifm-primary-500); padding: 2px; border-radius: 8px; } + .cellmobile { background-color: var(--ifm-color-neutral-lighter); padding: 2px; @@ -120,6 +136,7 @@ white-space: nowrap; min-height: 290px; } + .diagramcontent .bottomrow .bottomleftcol { display: inline-block; width: 40%; @@ -144,7 +161,7 @@ padding-right: 5px; margin-left: 10px; border-radius: 8px; - background-color: var(--ifm-color-neutral-lighter); + background-color: var(--ifm-primary-500); } .diagramcontent .bottomrow .bottomleftcol .bottomleftcolright .cell { @@ -176,6 +193,7 @@ border-radius: 8px; border-color: var(--ifm-color-primary-lightest); } + .diagramcontent .bottomrow .bottomrightcol .bottomrightcolleft { display: inline-block; height: 100%; @@ -195,7 +213,7 @@ margin-right: 10px; max-height: 268px; border-radius: 8px; - background-color: var(--ifm-color-neutral-lighter); + background-color: var(--ifm-primary-500); margin-bottom: 8px; } @@ -206,6 +224,7 @@ margin-bottom: 5px; border-radius: 8px; } + .diagramcontent .bottomrow .bottomrightcol .bottomrightcolleft .cellmobile { width: 98.5%; height: 14%; @@ -213,10 +232,12 @@ margin-bottom: 5px; border-radius: 8px; } + .diagramcontent .bottomrow .bottomrightcol .bottomrightcolleft .rowcell { width: 100%; margin-left: -4px; } + .diagramcontent .bottomrow .bottomrightcol .bottomrightcolleft .rowcell .cell { width: 24%; height: 100%; @@ -226,12 +247,8 @@ border-radius: 8px; padding: 2px; } -.diagramcontent - .bottomrow - .bottomrightcol - .bottomrightcolleft - .rowcell - .cellmobile { + +.diagramcontent .bottomrow .bottomrightcol .bottomrightcolleft .rowcell .cellmobile { width: 24%; height: 100%; display: inline-block; @@ -239,7 +256,14 @@ font-size: 16px; border-radius: 8px; padding: 2px; + background-color: var(--ifm-primary-500); +} + +.diagramcontent .bottomrow .bottomrightcol .bottomrightcolleft .rowcell .cellmobile:hover { + cursor: pointer; + background-color: var(--ifm-accent); } + .endcell { width: 22.5%; padding: 2px; @@ -249,8 +273,9 @@ margin: 0px 4px; font-size: 16px; border-radius: 8px; - background-color: var(--ifm-color-neutral-lighter); + background-color: var(--ifm-primary-500); } + .interactivediagramcontainer .Modal { all: unset; background-color: white; @@ -258,32 +283,37 @@ height: 20px; width: 50vw; } + .endcell:hover { cursor: pointer; - background-color: var(--ifm-color-primary-lightest); + background-color: var(--ifm-accent); color: white; } .cell:hover { cursor: pointer; - background-color: var(--ifm-color-primary-lightest); + background-color: var(--ifm-accent); color: white; } + .cellmobile:hover { cursor: pointer; background-color: var(--ifm-color-primary-lightest); color: white; } + .diagramcontent .bottomrow .bottomleftcol .bottomleftcolleft:hover { cursor: pointer; - background-color: var(--ifm-color-primary-lightest); + background-color: var(--ifm-accent); color: white; } + .diagramcontent .bottomrow .bottomrightcol .bottomrightcolright:hover { cursor: pointer; - background-color: var(--ifm-color-primary-lightest); + background-color: var(--ifm-accent); color: white; } + .diagramcontent .labels { position: absolute; margin-top: -30px; @@ -291,27 +321,31 @@ text-transform: uppercase; font-size: 12px; font-weight: 600; - -} +} @media only screen and (max-width: 768px) { + /* For mobile phones: */ .interactivediagramcontainer { font-size: 10px; padding: 0px; } + .diagramcontent { min-width: 390px; padding: 0px; width: 95vw; } + .toprow { padding-top: 10px; } + .rowcell { font-size: 10px; } + .diagramcontent .bottomrow .bottomrightcol .bottomrightcolleft .rowcell { width: 95%; margin-left: unset; @@ -322,6 +356,7 @@ width: unset; padding-right: 17px; } + .diagramcontent .bottomrow .bottomrightcol { padding-left: 10px; margin-left: -2px; @@ -333,12 +368,8 @@ margin-left: 5px; margin-right: 7px; } - .diagramcontent - .bottomrow - .bottomrightcol - .bottomrightcolleft - .rowcell - .cell { + + .diagramcontent .bottomrow .bottomrightcol .bottomrightcolleft .rowcell .cell { width: 24%; height: 100%; display: inline-block; @@ -347,12 +378,8 @@ border-radius: 5px; padding: 2px; } - .diagramcontent - .bottomrow - .bottomrightcol - .bottomrightcolleft - .rowcell - .cellmobile { + + .diagramcontent .bottomrow .bottomrightcol .bottomrightcolleft .rowcell .cellmobile { width: 28%; height: 100%; display: inline-block; @@ -361,6 +388,7 @@ border-radius: 5px; padding: 2px; } + .endcell { width: 22.5%; padding: 2px; @@ -372,6 +400,7 @@ border-radius: 5px; background-color: var(--ifm-color-neutral-lighter); } + .diagramcontent .bottomrow .bottomleftcol .bottomleftcolright { display: inline-block; height: 100%; @@ -379,6 +408,7 @@ overflow: hidden; border-top: none; } + .diagramcontent .bottomrow .bottomrightcol .bottomrightcolright { display: inline-block; height: 88%; @@ -393,6 +423,7 @@ background-color: var(--ifm-color-neutral-lighter); margin-bottom: 33px; } + .diagramcontent .bottomrow .bottomrightcol .bottomrightcolleft { display: inline-block; height: 85%; @@ -400,6 +431,7 @@ overflow: hidden; min-height: 267px; } + .popUpPrompt { position: absolute; top: 15px; @@ -410,6 +442,7 @@ z-index: 100; border-radius: 8px; } + .innerPromptBox { position: absolute; display: flex; @@ -423,4 +456,4 @@ box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25); overflow-y: auto; } -} +} \ No newline at end of file diff --git a/src/components/MissionVision/index.js b/src/components/MissionVision/index.js index a78143499..0af943b36 100644 --- a/src/components/MissionVision/index.js +++ b/src/components/MissionVision/index.js @@ -17,14 +17,14 @@ const FeatureList = [ Svg: require('@site/static/img/vision.svg').default, description: ( <> - CNOE strives to be the goto framework for leading software companies + CNOE strives to be the goto framework for leading software companies to build their cloud-native internal developer platform ), }, ]; -function Feature({Svg, title, description, index, isVisible}) { +function Feature({ Svg, title, description, index, isVisible }) { return (
diff --git a/src/components/MissionVision/styles.module.css b/src/components/MissionVision/styles.module.css index 585706860..a07aa5250 100644 --- a/src/components/MissionVision/styles.module.css +++ b/src/components/MissionVision/styles.module.css @@ -62,7 +62,7 @@ .sectionSubtitle { font-size: var(--ifm-font-size-xl); - color: var(--ifm-neutral-600); + color: var(--ifm-neutral-700); max-width: 600px; margin: 0 auto; line-height: 1.6; diff --git a/src/components/ValueProposition/styles.module.css b/src/components/ValueProposition/styles.module.css index e3ed6fa2f..5ce3e0b0b 100644 --- a/src/components/ValueProposition/styles.module.css +++ b/src/components/ValueProposition/styles.module.css @@ -61,7 +61,7 @@ .sectionSubtitle { font-size: var(--ifm-font-size-xl); - color: var(--ifm-neutral-600); + color: var(--ifm-neutral-700); max-width: 600px; margin: 0 auto; line-height: 1.6; diff --git a/src/css/custom.css b/src/css/custom.css index 5d0a4d7ef..3d5ad7da5 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -7,11 +7,6 @@ /* Import Inter font family for modern typography */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); -/* Import dark mode fixes */ -@import './dark-mode-fixes.css'; - -/* Import homepage gap fix */ -@import './homepage-fix.css'; /* CNOE Modern Design System - CNOE Brand Color Palette */ :root { @@ -446,13 +441,19 @@ } .footer--dark { - background-color: var(--ifm-color-black); + background: linear-gradient(45deg, + var(--ifm-primary-500) 0%, + var(--ifm-primary-600) 15%, + var(--ifm-primary-700) 50%, + var(--ifm-primary-800) 75%, + var(--ifm-primary-900) 100%); color: var(--ifm-color-white); text-align: center; + font-weight: 400; } .footer--dark .footer__items :hover { - color: var(--ifm-color-primary-lightest); + color: var(--ifm-accent); } .footer__copyright { @@ -511,19 +512,17 @@ p>img { transition: background var(--ifm-transition-fast); } -.navbar--calendar-link:hover { - background: var(--ifm-color-emphasis-200); -} - .navbar--calendar-link:before { content: ''; height: 100%; display: block; - background: url('data:image/svg+xml,'); + background: url('data:image/svg+xml;charset=utf-8,') no-repeat center; + background-size: contain; } html[data-theme='dark'] .navbar--calendar-link:before { - background: url('data:image/svg+xml,'); + background: url('data:image/svg+xml;charset=utf-8,') no-repeat center; + background-size: contain; } /* navbar */ @@ -685,146 +684,6 @@ h3 { background-size: 400% 400%; } -.floating-shape { - position: absolute; - border-radius: 50%; - background: linear-gradient(135deg, var(--ifm-primary-200), var(--ifm-primary-300)); - opacity: 0.1; - animation: cnoe-float-shapes 20s ease-in-out infinite; -} - -[data-theme="dark"] .floating-shape { - background: linear-gradient(135deg, var(--ifm-primary-600), var(--ifm-primary-700)); - opacity: 0.05; -} - -.floating-shape:nth-child(1) { - width: 80px; - height: 80px; - top: 20%; - left: 10%; - animation-delay: 0s; - animation-duration: 25s; -} - -.floating-shape:nth-child(2) { - width: 120px; - height: 120px; - top: 60%; - right: 15%; - animation-delay: -5s; - animation-duration: 30s; -} - -.floating-shape:nth-child(3) { - width: 60px; - height: 60px; - top: 40%; - left: 70%; - animation-delay: -10s; - animation-duration: 20s; -} - -.floating-shape:nth-child(4) { - width: 100px; - height: 100px; - top: 80%; - left: 20%; - animation-delay: -15s; - animation-duration: 35s; -} - -.floating-shape:nth-child(5) { - width: 40px; - height: 40px; - top: 15%; - right: 30%; - animation-delay: -8s; - animation-duration: 22s; -} - -/* Cloud-Native Themed Shapes */ -.floating-shape.container { - border-radius: 8px; - background: linear-gradient(135deg, var(--ifm-primary-200), var(--ifm-primary-300)); - position: relative; -} - -.floating-shape.container::before { - content: '📦'; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 24px; - opacity: 0.6; -} - -.floating-shape.kubernetes { - border-radius: 50%; - background: linear-gradient(135deg, var(--ifm-info), #326ce5); - position: relative; -} - -.floating-shape.kubernetes::before { - content: '☸️'; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 20px; - opacity: 0.7; -} - -.floating-shape.cloud { - border-radius: 20px; - background: linear-gradient(135deg, var(--ifm-neutral-300), var(--ifm-neutral-400)); - position: relative; -} - -.floating-shape.cloud::before { - content: '☁️'; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 22px; - opacity: 0.6; -} - -.floating-shape.platform { - border-radius: 12px; - background: linear-gradient(135deg, var(--ifm-accent), var(--ifm-accent-dark)); - position: relative; - transform: rotate(15deg); -} - -.floating-shape.platform::before { - content: '🚀'; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%) rotate(-15deg); - font-size: 20px; - opacity: 0.7; -} - -[data-theme="dark"] .floating-shape.container { - background: linear-gradient(135deg, var(--ifm-primary-600), var(--ifm-primary-700)); -} - -[data-theme="dark"] .floating-shape.kubernetes { - background: linear-gradient(135deg, var(--ifm-info), #4da6ff); -} - -[data-theme="dark"] .floating-shape.cloud { - background: linear-gradient(135deg, var(--ifm-neutral-600), var(--ifm-neutral-700)); -} - -[data-theme="dark"] .floating-shape.platform { - background: linear-gradient(135deg, var(--ifm-accent-light), var(--ifm-accent)); -} - @keyframes cnoe-float-shapes { 0%, @@ -847,11 +706,6 @@ h3 { /* Performance optimizations for mobile */ @media (max-width: 768px) { - .floating-shape { - animation-duration: 15s; - will-change: transform; - } - .hero-gradient-bg { animation-duration: 20s; } @@ -859,32 +713,11 @@ h3 { /* Reduced motion support for background elements */ @media (prefers-reduced-motion: reduce) { - - .floating-shape, .hero-gradient-bg { animation: none; } - - .floating-shape { - opacity: 0.05; - } - - [data-theme="dark"] .floating-shape { - opacity: 0.02; - } } -/* Synchronized Gradient Animation for Body - Global Sync Point */ -body { - background: linear-gradient(135deg, - var(--ifm-primary-50) 0%, - var(--ifm-primary-100) 25%, - var(--ifm-neutral-50) 50%, - var(--ifm-primary-100) 75%, - var(--ifm-primary-50) 100%); - background-size: 400% 400%; - animation: var(--cnoe-gradient-animation); -} [data-theme="dark"] body { background: linear-gradient(135deg, @@ -1147,13 +980,6 @@ body { box-shadow: var(--ifm-shadow-sm) !important; } -[data-theme="dark"] .navbar--calendar-link:hover, -[data-theme="dark"] .navbar--slack-link:hover, -[data-theme="dark"] .navbar--github-link:hover { - background: rgba(77, 166, 255, 0.08) !important; - color: var(--ifm-primary-300) !important; -} - /* Icon styling for navbar links */ .navbar--calendar-link:before, .navbar--slack-link:before, @@ -1212,21 +1038,6 @@ body { font-size: var(--ifm-font-size-sm); } -[data-theme="dark"] .menu__link { - color: var(--ifm-neutral-300); -} - -.menu__link:hover { - background: rgba(0, 86, 140, 0.08); - color: var(--ifm-primary); - transform: translateX(4px); - box-shadow: var(--ifm-shadow-sm); -} - -[data-theme="dark"] .menu__link:hover { - background: rgba(77, 166, 255, 0.08); - color: var(--ifm-primary-300); -} .menu__link--active { background: linear-gradient(135deg, var(--ifm-primary) 0%, var(--ifm-primary-600) 100%); @@ -1236,38 +1047,23 @@ body { position: relative; } -.menu__link--active::before { +.menu__link--active::before, +.menu__list-item-collapsible:hover::before, +.menu__link:hover::before { content: ''; position: absolute; left: -1rem; top: 50%; transform: translateY(-50%); width: 4px; - height: 20px; + height: 70%; background: var(--ifm-accent); border-radius: 2px; } -/* Sidebar Categories */ -.menu__list-item-collapsible { - margin: 0.5rem 0; -} - -.menu__list-item-collapsible .menu__link { - font-weight: 600; - color: var(--ifm-neutral-800); - font-size: var(--ifm-font-size-base); - text-transform: uppercase; - letter-spacing: 0.05em; - padding: 1rem; -} - -[data-theme="dark"] .menu__list-item-collapsible .menu__link { - color: var(--ifm-neutral-200); -} - -.menu__list-item-collapsible .menu__link:hover { - background: rgba(0, 86, 140, 0.05); +.menu__list-item .menu__link:hover { + background: var(--ifm-primary-50); + color: var(--ifm-primary) !important; transform: none; } @@ -1292,28 +1088,6 @@ body { color: var(--ifm-neutral-400); } -/* Mobile Sidebar */ -@media (max-width: 996px) { - .theme-doc-sidebar-container { - background: rgba(248, 250, 252, 0.95); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - } - - [data-theme="dark"] .theme-doc-sidebar-container { - background: rgba(30, 41, 59, 0.95); - } - - .menu__link { - padding: 1rem; - font-size: var(--ifm-font-size-base); - } - - .menu__link:hover { - transform: translateX(8px); - } -} - /* Touch-friendly enhancements for mobile */ @media (max-width: 768px) { .menu__link { @@ -1384,8 +1158,8 @@ body { /* Copy Button Enhancement */ .clean-btn { - background: rgba(0, 86, 140, 0.1) !important; - border: 1px solid rgba(0, 86, 140, 0.2) !important; + /* background: rgba(0, 86, 140, 0.1) !important; + border: 1px solid rgba(0, 86, 140, 0.2) !important; */ color: var(--ifm-primary) !important; border-radius: 8px !important; padding: 0.5rem 1rem !important; @@ -1604,6 +1378,38 @@ main>div:not(:last-child) { margin-bottom: 2rem; } +/* Remove gaps between homepage sections by overlapping them slightly */ +.homepage main>div:not(:last-child) { + margin-bottom: -5px !important; +} + +/* Remove gap between main and following sections */ +.homepage main+div { + margin-top: -5px !important; +} + +/* Ensure all homepage sections have seamless backgrounds */ +.homepage .features, +.homepage .members { + position: relative; + z-index: 1; +} + +[data-theme="dark"] html, +[data-theme="dark"] body, +[data-theme="dark"] #__docusaurus, +[data-theme="dark"] .main-wrapper, +[data-theme="dark"] main { + background: linear-gradient(135deg, + var(--ifm-neutral-900) 0%, + var(--ifm-primary-900) 25%, + var(--ifm-neutral-800) 50%, + var(--ifm-primary-800) 75%, + var(--ifm-neutral-900) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; +} + /* Loading states for better UX */ .loading-skeleton { background: linear-gradient(90deg, var(--ifm-neutral-200) 25%, var(--ifm-neutral-100) 50%, var(--ifm-neutral-200) 75%); @@ -1631,7 +1437,6 @@ main>div:not(:last-child) { .navbar, .footer, - .floating-shape, .hero-background { display: none !important; } @@ -1647,20 +1452,6 @@ main>div:not(:last-child) { } } -/* High contrast mode support */ -@media (prefers-contrast: high) { - :root { - --ifm-primary: #000080; - --ifm-neutral-600: #000000; - --ifm-neutral-400: #666666; - } - - [data-theme="dark"] { - --ifm-primary: #4da6ff; - --ifm-neutral-600: #ffffff; - --ifm-neutral-400: #cccccc; - } -} /* Ensure all interactive elements are accessible */ button, @@ -1706,31 +1497,6 @@ main { background: var(--ifm-neutral-900); } -/* Fix search plugin styling */ -.navbar__search { - margin-right: 1rem; -} - -.navbar__search-input { - background: rgba(255, 255, 255, 0.1); - border: 1px solid var(--ifm-neutral-300); - border-radius: 6px; - color: var(--ifm-neutral-700); - padding: 0.5rem 1rem; - transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); -} - -[data-theme="dark"] .navbar__search-input { - background: rgba(0, 0, 0, 0.2); - border-color: var(--ifm-neutral-600); - color: var(--ifm-neutral-300); -} - -.navbar__search-input:focus { - border-color: var(--ifm-primary); - box-shadow: 0 0 0 2px rgba(0, 86, 140, 0.2); -} - /* Fix white sections between homepage components */ .cnoe-section-spacing { margin: 0; @@ -1768,6 +1534,7 @@ main { font-size: var(--ifm-font-size-sm); padding: 0.25rem 0.5rem; border-radius: 4px; + word-wrap: normal; transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); } @@ -1791,38 +1558,7 @@ main { font-weight: 600; } -/* Blog sidebar styling */ -.theme-blog-sidebar { - background: var(--ifm-neutral-50); - border-right: 1px solid var(--ifm-neutral-200); - padding: 1rem; -} - -[data-theme="dark"] .theme-blog-sidebar { - background: var(--ifm-neutral-900); - border-right-color: var(--ifm-neutral-700); -} - -.theme-blog-sidebar .menu__link { - color: var(--ifm-neutral-700); - padding: 0.5rem 1rem; - border-radius: 6px; - transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); -} - -[data-theme="dark"] .theme-blog-sidebar .menu__link { - color: var(--ifm-neutral-300); -} - -.theme-blog-sidebar .menu__link:hover { - background: rgba(0, 86, 140, 0.1); - color: var(--ifm-primary); -} - -[data-theme="dark"] .theme-blog-sidebar .menu__link:hover { - background: rgba(77, 166, 255, 0.1); - color: var(--ifm-primary-300); -} +/* Duplicate blog sidebar section removed - using enhanced version below */ /* Fix sidebar proportions and active state visibility */ .menu__link--active { @@ -1832,12 +1568,6 @@ main { box-shadow: var(--ifm-shadow-md) !important; } -.menu__list-item-collapsible .menu__link { - font-size: var(--ifm-font-size-sm) !important; - padding: 0.75rem 1rem !important; - font-weight: 600 !important; -} - /* Fix logo sizing for different screen sizes */ .navbar__logo img { height: auto; @@ -1845,53 +1575,6 @@ main { transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); } -/* Fix search plugin styling */ -.navbar__search { - margin-right: 1rem; - order: 2; -} - -.navbar__search-input { - background: rgba(255, 255, 255, 0.1); - border: 1px solid var(--ifm-neutral-300); - border-radius: 6px; - color: var(--ifm-neutral-700); - padding: 0.5rem 1rem; - transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); -} - -[data-theme="dark"] .navbar__search-input { - background: rgba(0, 0, 0, 0.2); - border-color: var(--ifm-neutral-600); - color: var(--ifm-neutral-300); -} - -.navbar__search-input:focus { - border-color: var(--ifm-primary); - box-shadow: 0 0 0 2px rgba(0, 86, 140, 0.2); -} - -/* Fix sidebar active state visibility and proportions */ -.menu__link--active { - background: linear-gradient(135deg, var(--ifm-primary) 0%, var(--ifm-primary-600) 100%) !important; - color: white !important; - font-weight: 600 !important; - box-shadow: var(--ifm-shadow-md) !important; - position: relative; -} - -.menu__link--active::before { - content: ''; - position: absolute; - left: -1rem; - top: 50%; - transform: translateY(-50%); - width: 4px; - height: 20px; - background: var(--ifm-accent); - border-radius: 2px; -} - /* Fix sidebar category proportions */ .menu__list-item-collapsible .menu__link { font-size: var(--ifm-font-size-sm) !important; @@ -1902,12 +1585,8 @@ main { letter-spacing: 0.05em; } -[data-theme="dark"] .menu__list-item-collapsible .menu__link { - color: var(--ifm-neutral-200) !important; -} - .menu__list-item-collapsible .menu__link:hover { - background: rgba(0, 86, 140, 0.05) !important; + background: var(--ifm-primary-50) !important; transform: none !important; } @@ -1922,11 +1601,6 @@ main { border-left-color: var(--ifm-neutral-700); } -.menu__list .menu__list .menu__link { - font-size: var(--ifm-font-size-sm) !important; - padding: 0.5rem 1rem !important; - color: var(--ifm-neutral-600) !important; -} [data-theme="dark"] .menu__list .menu__list .menu__link { color: var(--ifm-neutral-400) !important; @@ -2008,41 +1682,62 @@ main { font-weight: 600; } -/* Blog sidebar styling */ -.theme-blog-sidebar { +/* Enhanced Blog Sidebar Styling */ +[class*="sidebar"] { background: var(--ifm-neutral-50); border-right: 1px solid var(--ifm-neutral-200); - padding: 1rem; -} - -[data-theme="dark"] .theme-blog-sidebar { - background: var(--ifm-neutral-900); - border-right-color: var(--ifm-neutral-700); } -.theme-blog-sidebar .menu__link { +/* Enhanced Blog Sidebar Menu Links */ +[class*="sidebarItemLink"] { + font-weight: 500; color: var(--ifm-neutral-700); - padding: 0.5rem 1rem; - border-radius: 6px; + border-radius: 8px; + padding: 0.75rem 1rem; + margin: 0.25rem 0; transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); + position: relative; font-size: var(--ifm-font-size-sm); } -[data-theme="dark"] .theme-blog-sidebar .menu__link { - color: var(--ifm-neutral-300); -} - -.theme-blog-sidebar .menu__link:hover { - background: rgba(0, 86, 140, 0.1); +[class*="sidebarItemLink"]:hover { + background: var(--ifm-primary-50); color: var(--ifm-primary); transform: translateX(4px); + box-shadow: var(--ifm-shadow-sm); } -[data-theme="dark"] .theme-blog-sidebar .menu__link:hover { - background: rgba(77, 166, 255, 0.1); - color: var(--ifm-primary-300); +[class*="sidebarItemLink"]:hover::before { + content: ''; + position: absolute; + left: 0rem; + top: 50%; + transform: translateY(-50%); + width: 4px; + height: 75%; + background: var(--ifm-accent); + border-radius: 2px; } +/* Enhanced Blog Sidebar Active Link */ +[class*="sidebarItemLinkActive"] { + font-weight: 600; + box-shadow: var(--ifm-shadow-md); + position: relative; +} + +[class*="sidebarItemLinkActive"]::before { + content: ''; + position: absolute; + left: 0rem; + top: 50%; + transform: translateY(-50%); + width: 4px; + height: 70%; + background: var(--ifm-accent); + border-radius: 2px; +} + /* Global background consistency */ html { background: var(--ifm-neutral-50); @@ -2138,28 +1833,6 @@ l Dark Mode Enhancements */ background-size: 400% 400%; } -/* Enhanced dark mode for floating shapes */ -[data-theme="dark"] .floating-shape { - background: linear-gradient(135deg, rgba(77, 166, 255, 0.08), rgba(77, 166, 255, 0.12)) !important; - opacity: 0.6; -} - -[data-theme="dark"] .floating-shape.container { - background: linear-gradient(135deg, rgba(77, 166, 255, 0.1), rgba(100, 116, 139, 0.1)) !important; -} - -[data-theme="dark"] .floating-shape.kubernetes { - background: linear-gradient(135deg, rgba(77, 166, 255, 0.12), rgba(59, 130, 246, 0.1)) !important; -} - -[data-theme="dark"] .floating-shape.cloud { - background: linear-gradient(135deg, rgba(100, 116, 139, 0.1), rgba(71, 85, 105, 0.1)) !important; -} - -[data-theme="dark"] .floating-shape.platform { - background: linear-gradient(135deg, rgba(255, 139, 90, 0.1), rgba(255, 107, 53, 0.1)) !important; -} - /* Enhanced dark mode for glassmorphism effects */ [data-theme="dark"] .navbar { background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.95) 100%) !important; @@ -2486,33 +2159,16 @@ age Background Consistency */ padding-top: 0; } -/* Remove any conflicting backgrounds */ -.container, -.row, -.col { - background: transparent !important; -} - -/* Ensure main content wrapper has consistent background */ -.main-wrapper, -.docMainContainer, -.docRoot { - background: transparent !important; -} - -/* Homepage specific body background */ -body[class*="homepage"] { - background: linear-gradient(135deg, - var(--ifm-neutral-50) 0%, - rgba(248, 250, 252, 0.8) 50%, - var(--ifm-neutral-50) 100%); -} [data-theme="dark"] body[class*="homepage"] { background: linear-gradient(135deg, var(--ifm-neutral-900) 0%, - rgba(15, 23, 42, 0.8) 50%, - var(--ifm-neutral-900) 100%); + var(--ifm-primary-900) 25%, + var(--ifm-neutral-800) 50%, + var(--ifm-primary-800) 75%, + var(--ifm-neutral-900) 100%) !important; + background-size: 400% 400% !important; + animation: cnoe-gradient-shift 15s ease infinite !important; } /* Enhanced navbar brand area */ @@ -2533,37 +2189,188 @@ body[class*="homepage"] { color: var(--ifm-primary-300); } -/* Enhanced search styling if present */ +/* Enhanced modern search styling with magnifying glass icon */ .navbar__search { - margin-right: 1rem; + position: relative; + transform: translateY(-2px); + /* Move search bar 2px up from navbar bottom */ } .navbar__search-input { - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(0, 86, 140, 0.2); - border-radius: 6px; - color: var(--ifm-neutral-700); - padding: 0.5rem 1rem; - transition: all var(--ifm-duration-normal) var(--ifm-easing-ease); - backdrop-filter: blur(10px); + background: rgba(255, 255, 255, 0.2) !important; + /* More noticeable background */ + backdrop-filter: blur(15px) !important; + -webkit-backdrop-filter: blur(15px) !important; + border: 1px solid rgba(0, 86, 140, 0.25) !important; + /* More visible border */ + border-radius: 12px !important; + padding: 0.75rem 1.25rem 0.75rem 2.75rem !important; + /* Left padding for search icon */ + font-size: var(--ifm-font-size-sm) !important; + font-family: var(--ifm-font-family) !important; + font-weight: 400 !important; + color: var(--ifm-neutral-800) !important; + width: 15rem !important; + /* Slightly wider for better visibility */ + transition: all var(--ifm-duration-normal) var(--ifm-easing-ease) !important; + box-shadow: + 0 3px 12px rgba(0, 86, 140, 0.12), + inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; + /* Enhanced shadow for visibility */ +} + +/* Magnifying glass search icon */ +.navbar__search::before { + content: ''; + position: absolute; + left: 12px; + top: 50%; + transform: translateY(-50%); + width: 18px; + height: 18px; + background: url('data:image/svg+xml;charset=utf-8,') no-repeat center; + background-size: contain; + pointer-events: none; + z-index: 1; +} + +.navbar__search-input::placeholder { + color: var(--ifm-neutral-600) !important; + font-weight: 400 !important; +} + +/* Dark theme support for search bar */ +[data-theme="dark"] .navbar__search::before { + background: url('data:image/svg+xml;charset=utf-8,') no-repeat center; + background-size: contain; } [data-theme="dark"] .navbar__search-input { - background: rgba(0, 0, 0, 0.2); - border-color: rgba(77, 166, 255, 0.2); - color: var(--ifm-neutral-300); + background: rgba(0, 0, 0, 0.3) !important; + border-color: rgba(77, 166, 255, 0.2) !important; + color: var(--ifm-neutral-200) !important; + box-shadow: + 0 3px 12px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(77, 166, 255, 0.15) !important; +} + +[data-theme="dark"] .navbar__search-input::placeholder { + color: var(--ifm-neutral-500) !important; } +/* Focus states for enhanced interactivity */ .navbar__search-input:focus { + border-color: var(--ifm-primary) !important; + box-shadow: + 0 0 0 3px rgba(0, 86, 140, 0.15), + 0 4px 16px rgba(0, 86, 140, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; + outline: none !important; + transform: translateY(-1px) !important; + background: rgba(255, 255, 255, 0.25) !important; +} + +[data-theme="dark"] .navbar__search-input:focus { + border-color: var(--ifm-primary-300) !important; + box-shadow: + 0 0 0 3px rgba(77, 166, 255, 0.2), + 0 4px 16px rgba(77, 166, 255, 0.15), + inset 0 1px 0 rgba(77, 166, 255, 0.2) !important; + background: rgba(0, 0, 0, 0.4) !important; +} + +/* Hover states for better UX */ +.navbar__search-input:hover { + border-color: var(--ifm-primary-light) !important; + transform: translateY(-1px) !important; + box-shadow: + 0 4px 16px rgba(0, 86, 140, 0.12), + inset 0 1px 0 rgba(255, 255, 255, 0.35) !important; + background: rgba(255, 255, 255, 0.25) !important; +} + +[data-theme="dark"] .navbar__search-input:hover { + border-color: var(--ifm-primary-400) !important; + box-shadow: + 0 4px 16px rgba(77, 166, 255, 0.12), + inset 0 1px 0 rgba(77, 166, 255, 0.18) !important; + background: rgba(0, 0, 0, 0.35) !important; +} + +/* Responsive adjustments for search bar */ +@media (max-width: 996px) { + .navbar__search-input { + width: 220px !important; + padding: 0.65rem 1rem 0.65rem 2.5rem !important; + } + + .navbar__search::before { + left: 10px; + width: 14px; + height: 14px; + } +} + +@media (max-width: 768px) { + .navbar__search-input { + width: 180px !important; + padding: 0.6rem 0.8rem 0.6rem 2.2rem !important; + font-size: 0.8rem !important; + } + + .navbar__search::before { + left: 8px; + width: 12px; + height: 12px; + } +} + +/* [data-theme="dark"] .navbar__search-input { + background: rgba(0, 0, 0, 0.25); + border-color: rgba(77, 166, 255, 0.15); + color: var(--ifm-neutral-200); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(77, 166, 255, 0.1); +} + +[data-theme="dark"] .navbar__search-input::placeholder { + color: var(--ifm-neutral-500); +} */ + +/* .navbar__search-input:focus { border-color: var(--ifm-primary); - box-shadow: 0 0 0 2px rgba(0, 86, 140, 0.2); + box-shadow: + 0 0 0 3px rgba(0, 86, 140, 0.15), + 0 4px 12px rgba(0, 86, 140, 0.12), + inset 0 1px 0 rgba(255, 255, 255, 0.3); + outline: none; + transform: translateY(-1px); background: rgba(255, 255, 255, 0.2); } [data-theme="dark"] .navbar__search-input:focus { border-color: var(--ifm-primary-300); - box-shadow: 0 0 0 2px rgba(77, 166, 255, 0.2); - background: rgba(0, 0, 0, 0.3); + box-shadow: + 0 0 0 3px rgba(77, 166, 255, 0.15), + 0 4px 12px rgba(77, 166, 255, 0.12), + inset 0 1px 0 rgba(77, 166, 255, 0.15); + background: rgba(0, 0, 0, 0.35); +} + +.navbar__search-input:hover { + border-color: var(--ifm-primary-light); + transform: translateY(-1px); + box-shadow: + 0 4px 12px rgba(0, 86, 140, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.25); +} + +[data-theme="dark"] .navbar__search-input:hover { + border-color: var(--ifm-primary-400); + box-shadow: + 0 4px 12px rgba(77, 166, 255, 0.1), + inset 0 1px 0 rgba(77, 166, 255, 0.12); } /* Responsive navbar adjustments */ @@ -2572,10 +2379,6 @@ body[class*="homepage"] { gap: 0.25rem; } - .navbar__search { - margin-right: 0.5rem; - } - .navbar--calendar-link, .navbar--slack-link, .navbar--github-link { @@ -2593,55 +2396,9 @@ body[class*="homepage"] { .navbar__title { font-size: 1.1rem; } - - .navbar__search { - display: none; - /* Hide search on very small screens */ - } } -/ -/* Homepage Background Consistency - Animated Gradient Sync */ -.hero, -.features, -.cnoeSection, -.members, -.newsSection, -.learnMoreSection, -.partnerContainer, -.modernHero, -.heroBanner, -.heroContainer, -.missionVisionSection, -.valuePropositionSection { - background: linear-gradient(135deg, - var(--ifm-primary-50) 0%, - var(--ifm-primary-100) 25%, - var(--ifm-neutral-50) 50%, - var(--ifm-primary-100) 75%, - var(--ifm-primary-50) 100%) !important; - background-size: 400% 400% !important; - animation: cnoe-gradient-shift 15s ease infinite !important; - position: relative; -} - -/* Ensure body and main containers also have animated background */ -body.homepage, -.main-wrapper, -.docMainContainer, -.docRoot { - background: linear-gradient(135deg, - var(--ifm-primary-50) 0%, - var(--ifm-primary-100) 25%, - var(--ifm-neutral-50) 50%, - var(--ifm-primary-100) 75%, - var(--ifm-primary-50) 100%) !important; - background-size: 400% 400% !important; - animation: cnoe-gradient-shift 15s ease infinite !important; -} - -/* Remove any conflicting backgrounds from containers */ -.container, +Remove any conflicting backgrounds from containers .container, .row, .col, .container-fluid { @@ -2724,21 +2481,6 @@ body.homepage, background: #1a202c !important; } -/* En -sure all homepage sections have animated background synchronized with hero */ -.homepage section, -.homepage div[class*="section"], -.homepage div[class*="Section"] { - background: linear-gradient(135deg, - var(--ifm-primary-50) 0%, - var(--ifm-primary-100) 25%, - var(--ifm-neutral-50) 50%, - var(--ifm-primary-100) 75%, - var(--ifm-primary-50) 100%) !important; - background-size: 400% 400% !important; - animation: cnoe-gradient-shift 15s ease infinite !important; -} - [data-theme="dark"] .homepage section, [data-theme="dark"] .homepage div[class*="section"], [data-theme="dark"] .homepage div[class*="Section"] { @@ -2752,21 +2494,6 @@ sure all homepage sections have animated background synchronized with hero */ animation: cnoe-gradient-shift 15s ease infinite !important; } -/* Override any Docusaurus default backgrounds for homepage */ -.homepage .main-wrapper, -.homepage .docMainContainer, -.homepage .docRoot, -.homepage main { - background: linear-gradient(135deg, - var(--ifm-primary-50) 0%, - var(--ifm-primary-100) 25%, - var(--ifm-neutral-50) 50%, - var(--ifm-primary-100) 75%, - var(--ifm-primary-50) 100%) !important; - background-size: 400% 400% !important; - animation: cnoe-gradient-shift 15s ease infinite !important; -} - [data-theme="dark"] .homepage .main-wrapper, [data-theme="dark"] .homepage .docMainContainer, [data-theme="dark"] .homepage .docRoot, @@ -2781,25 +2508,6 @@ sure all homepage sections have animated background synchronized with hero */ animation: cnoe-gradient-shift 15s ease infinite !important; } -/* -Final comprehensive rule to ensure all homepage sections sync with hero animation */ -body[class*="homepage"] *[class*="Section"], -body[class*="homepage"] *[class*="section"], -body[class*="homepage"] .features, -body[class*="homepage"] .members, -body[class*="homepage"] .newsSection, -body[class*="homepage"] .cnoeSection, -body[class*="homepage"] .learnMoreSection { - background: linear-gradient(135deg, - var(--ifm-primary-50) 0%, - var(--ifm-primary-100) 25%, - var(--ifm-neutral-50) 50%, - var(--ifm-primary-100) 75%, - var(--ifm-primary-50) 100%) !important; - background-size: 400% 400% !important; - animation: cnoe-gradient-shift 15s ease infinite !important; -} - [data-theme="dark"] body[class*="homepage"] *[class*="Section"], [data-theme="dark"] body[class*="homepage"] *[class*="section"], [data-theme="dark"] body[class*="homepage"] .features, @@ -3018,7 +2726,7 @@ sive fix for white lines between homepage sections */ border: 1px solid rgba(0, 0, 0, 0.1) !important; } -/ * Target specific Docusaurus layout elements that might cause white lines */ .homepage .theme-doc-wrapper .main-wrapper { +.homepage .theme-doc-wrapper .main-wrapper { padding: 0 !important; margin: 0 !important; } @@ -3150,7 +2858,6 @@ Target the exact HTML structure causing white gaps */ margin: 0 !important; padding: 5rem 0 !important; border: none !important; - vertical-align: top !important; } /* Remove any line-height or font-size that might create spacing */ @@ -3189,7 +2896,7 @@ Target the exact HTML structure causing white gaps */ padding: 2rem !important; } -/ * Overlap sections slightly to eliminate any potential gaps */ .homepage .cnoeSection { +.homepage .cnoeSection { margin-top: -1px !important; } @@ -3253,7 +2960,7 @@ Target the exact HTML structure causing white gaps */ position: relative; } -/ * Aggressive approach: Extend backgrounds to cover any gaps */ .homepage .hero, +.homepage .hero, .homepage .cnoeSection, .homepage .features, .homepage .members, @@ -3279,28 +2986,6 @@ Target the exact HTML structure causing white gaps */ padding-bottom: 4rem !important; } -/* Alternative approach: Use pseudo-elements to fill gaps */ -.homepage .cnoeSection::after, -.homepage .features::after, -.homepage .members::after, -.homepage .newsSection::after { - content: ''; - position: absolute; - bottom: -5px; - left: 0; - right: 0; - height: 10px; - background: linear-gradient(135deg, - var(--ifm-primary-50) 0%, - var(--ifm-primary-100) 25%, - var(--ifm-neutral-50) 50%, - var(--ifm-primary-100) 75%, - var(--ifm-primary-50) 100%) !important; - background-size: 400% 400% !important; - animation: cnoe-gradient-shift 15s ease infinite !important; - z-index: 10; -} - [data-theme="dark"] .homepage .cnoeSection::after, [data-theme="dark"] .homepage .features::after, [data-theme="dark"] .homepage .members::after, @@ -3315,18 +3000,6 @@ Target the exact HTML structure causing white gaps */ animation: cnoe-gradient-shift 15s ease infinite !important; } -/* Nuclear option: Apply background to the entire page */ -.homepage { - background: linear-gradient(135deg, - var(--ifm-primary-50) 0%, - var(--ifm-primary-100) 25%, - var(--ifm-neutral-50) 50%, - var(--ifm-primary-100) 75%, - var(--ifm-primary-50) 100%) !important; - background-size: 400% 400% !important; - animation: cnoe-gradient-shift 15s ease infinite !important; - background-attachment: fixed !important; -} [data-theme="dark"] .homepage { background: linear-gradient(135deg, @@ -3350,20 +3023,6 @@ Target the exact HTML structure causing white gaps */ background: transparent !important; } -/* Apply the animated background to the html and body elements */ -.homepage html, -.homepage body { - background: linear-gradient(135deg, - var(--ifm-primary-50) 0%, - var(--ifm-primary-100) 25%, - var(--ifm-neutral-50) 50%, - var(--ifm-primary-100) 75%, - var(--ifm-primary-50) 100%) !important; - background-size: 400% 400% !important; - animation: cnoe-gradient-shift 15s ease infinite !important; - background-attachment: fixed !important; -} - [data-theme="dark"] .homepage html, [data-theme="dark"] .homepage body { background: linear-gradient(135deg, @@ -3375,4 +3034,73 @@ Target the exact HTML structure causing white gaps */ background-size: 400% 400% !important; animation: cnoe-gradient-shift 15s ease infinite !important; background-attachment: fixed !important; +} + +/* ===== FLOATING SHAPES SYSTEM ===== */ + +/* Hero Section Animated Background Elements */ +.hero-background { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; + z-index: 0; +} + +[data-theme="dark"] .hero-gradient-bg { + background: linear-gradient(135deg, + var(--ifm-neutral-900) 0%, + var(--ifm-primary-900) 25%, + var(--ifm-neutral-800) 50%, + var(--ifm-primary-800) 75%, + var(--ifm-neutral-900) 100%); + background-size: 400% 400%; +} + + +/* Performance optimizations for mobile */ +@media (max-width: 768px) { + + .hero-gradient-bg { + animation-duration: 20s; + } +} + +/* Reduced motion support for background elements */ +@media (prefers-reduced-motion: reduce) { + .hero-gradient-bg { + animation: none; + } + +} + +/* Gradient Animation Keyframes */ +@keyframes cnoe-gradient-shift { + + 0%, + 100% { + background-position: 0% 50%; + } + + 50% { + background-position: 100% 50%; + } +} + +/* + Make docs content area background match the light sidebar background */ +.theme-doc-root [data-theme="light"] .main-wrapper, +.theme-doc-root [data-theme="light"] .container-fluid, +.theme-doc-root [data-theme="light"] .theme-doc-markdown, +.theme-doc-root [data-theme="light"] .col--9, +.theme-doc-root [data-theme="light"] .docItemContainer_Djhp, +.theme-doc-root [data-theme="light"] .docItemCol_VOVn, +.theme-doc-root [data-theme="light"] .docItemWrapper_J1Ly, +.theme-doc-root [data-theme="light"] .row, +.theme-doc-root [data-theme="light"] .col, +.theme-doc-root [data-theme="light"] article, +.theme-doc-root [data-theme="light"] .markdown { + background: var(--ifm-background-color) !important; } \ No newline at end of file diff --git a/src/css/dark-mode-fixes.css b/src/css/dark-mode-fixes.css deleted file mode 100644 index 1df5fafdc..000000000 --- a/src/css/dark-mode-fixes.css +++ /dev/null @@ -1,679 +0,0 @@ -/* Critical Dark Mode Fixes */ - -/* Fix dark mode backgrounds */ -[data-theme="dark"] { - /* Ensure proper dark backgrounds - using lighter shades for better readability */ - --ifm-background-color: #1a202c !important; - --ifm-background-surface-color: #2d3748 !important; - - /* Fix text colors - using lighter text for better contrast */ - --ifm-font-color-base: #e2e8f0 !important; - --ifm-font-color-secondary: #cbd5e1 !important; - - /* Fix card backgrounds */ - --ifm-card-background-color: #2d3748 !important; - - /* Fix content wrapper backgrounds */ - --ifm-color-content-secondary: #cbd5e1 !important; - --ifm-color-emphasis-100: #2d3748 !important; - --ifm-color-emphasis-200: #4a5568 !important; - --ifm-color-emphasis-300: #718096 !important; -} - -/* Fix dark mode for all page backgrounds */ -[data-theme="dark"] html, -[data-theme="dark"] body, -[data-theme="dark"] main, -[data-theme="dark"] .theme-doc-root, -[data-theme="dark"] .theme-blog-wrapper { - background: #1a202c !important; - color: #e2e8f0 !important; -} - -/* Fix dark mode for components - Animated Gradient Sync */ -[data-theme="dark"] .features, -[data-theme="dark"] .cnoeSection, -[data-theme="dark"] .members, -[data-theme="dark"] .newsSection, -[data-theme="dark"] .learnMoreSection, -[data-theme="dark"] .partnerContainer, -[data-theme="dark"] .modernHero, -[data-theme="dark"] .heroBanner, -[data-theme="dark"] .heroContainer, -[data-theme="dark"] .missionVisionSection, -[data-theme="dark"] .valuePropositionSection { - background: linear-gradient(135deg, - var(--ifm-neutral-900) 0%, - var(--ifm-primary-900) 25%, - var(--ifm-neutral-800) 50%, - var(--ifm-primary-800) 75%, - var(--ifm-neutral-900) 100%) !important; - background-size: 400% 400% !important; - animation: cnoe-gradient-shift 15s ease infinite !important; -} - -/* Fix dark mode for hero section */ -[data-theme="dark"] .hero { - background: linear-gradient(135deg, - var(--ifm-neutral-900) 0%, - var(--ifm-primary-900) 25%, - var(--ifm-neutral-800) 50%, - var(--ifm-primary-800) 75%, - var(--ifm-neutral-900) 100%) !important; - background-size: 400% 400% !important; - animation: cnoe-gradient-shift 15s ease infinite !important; -} - -/* Ensure all homepage sections have animated dark background */ -[data-theme="dark"] .homepage section, -[data-theme="dark"] .homepage div[class*="section"], -[data-theme="dark"] .homepage div[class*="Section"] { - background: linear-gradient(135deg, - var(--ifm-neutral-900) 0%, - var(--ifm-primary-900) 25%, - var(--ifm-neutral-800) 50%, - var(--ifm-primary-800) 75%, - var(--ifm-neutral-900) 100%) !important; - background-size: 400% 400% !important; - animation: cnoe-gradient-shift 15s ease infinite !important; -} - -/* Dark mode body and main containers with animation */ -[data-theme="dark"] body.homepage, -[data-theme="dark"] .main-wrapper, -[data-theme="dark"] .docMainContainer, -[data-theme="dark"] .docRoot { - background: linear-gradient(135deg, - var(--ifm-neutral-900) 0%, - var(--ifm-primary-900) 25%, - var(--ifm-neutral-800) 50%, - var(--ifm-primary-800) 75%, - var(--ifm-neutral-900) 100%) !important; - background-size: 400% 400% !important; - animation: cnoe-gradient-shift 15s ease infinite !important; -} - -[data-theme="dark"] .hero-gradient-bg { - background: linear-gradient(135deg, - #1a202c 0%, - #2d3748 25%, - #4a5568 50%, - #2d3748 75%, - #1a202c 100%) !important; - background-size: 400% 400%; -} - -/* Fix dark mode text colors */ -[data-theme="dark"] .heroTitle, -[data-theme="dark"] .sectionTitle, -[data-theme="dark"] .partnersTitle, -[data-theme="dark"] .newsTitle, -[data-theme="dark"] .missionVisionTitle, -[data-theme="dark"] .featureTitle { - color: #e2e8f0 !important; -} - -[data-theme="dark"] .heroSubtitle, -[data-theme="dark"] .sectionSubtitle, -[data-theme="dark"] .partnersSubtitle, -[data-theme="dark"] .newsSubtitle, -[data-theme="dark"] .missionVisionDescription, -[data-theme="dark"] .featureDescription, -[data-theme="dark"] .description { - color: #94a3b8 !important; -} - -/* Fix dark mode for sidebar */ -[data-theme="dark"] .theme-doc-sidebar-container { - background: #1a202c !important; - border-right: 1px solid #4a5568 !important; -} - -[data-theme="dark"] .menu__link { - color: #cbd5e1 !important; -} - -[data-theme="dark"] .menu__link:hover { - background: rgba(77, 166, 255, 0.1) !important; - color: #4da6ff !important; -} - -[data-theme="dark"] .menu__link--active { - background: linear-gradient(135deg, #4da6ff 0%, #80c0ff 100%) !important; - color: white !important; -} - -/* Fix dark mode for navbar */ -[data-theme="dark"] .navbar { - background: linear-gradient(135deg, - rgba(15, 23, 42, 0.7) 0%, - rgba(30, 41, 59, 0.85) 20%, - rgba(15, 23, 42, 0.9) 100%) !important; - border-bottom: 1px solid rgba(77, 166, 255, 0.12) !important; - box-shadow: - 0 8px 32px rgba(0, 0, 0, 0.3), - 0 2px 8px rgba(77, 166, 255, 0.08), - inset 0 1px 0 rgba(77, 166, 255, 0.1) !important; -} - -[data-theme="dark"] .navbar__link { - color: #cbd5e1 !important; -} - -[data-theme="dark"] .navbar__link:hover { - color: #4da6ff !important; - background: rgba(77, 166, 255, 0.1) !important; -} - -/* Fix dark mode for cards and components */ -[data-theme="dark"] .featureCardInner, -[data-theme="dark"] .missionVisionCard, -[data-theme="dark"] .newsCardLink { - background: rgba(30, 41, 59, 0.8) !important; - border: 1px solid rgba(71, 85, 105, 0.3) !important; - color: #94a3b8 !important; -} - -[data-theme="dark"] .featureCardInner:hover, -[data-theme="dark"] .missionVisionCard:hover, -[data-theme="dark"] .newsCardLink:hover { - border-color: #80c0ff !important; -} - -/* Fix dark mode for table of contents */ -[data-theme="dark"] .theme-doc-toc-desktop { - background: #1a202c !important; - border-left-color: #4a5568 !important; -} - -[data-theme="dark"] .table-of-contents__link { - color: #94a3b8 !important; -} - -[data-theme="dark"] .table-of-contents__link:hover { - background: rgba(77, 166, 255, 0.1) !important; - color: #4da6ff !important; -} - -/* Fix dark mode for blog sidebar */ -[data-theme="dark"] .theme-blog-sidebar { - background: #1a202c !important; - border-right-color: #4a5568 !important; -} - -[data-theme="dark"] .theme-blog-sidebar .menu__link { - color: #cbd5e1 !important; -} - -[data-theme="dark"] .theme-blog-sidebar .menu__link:hover { - background: rgba(77, 166, 255, 0.1) !important; - color: #4da6ff !important; -} - -/* Fix dark mode for footer */ -[data-theme="dark"] .footer--dark { - background-color: #1a202c !important; -} - -/* Fix dark mode for content areas */ -[data-theme="dark"] .markdown, -[data-theme="dark"] .theme-doc-markdown { - color: #94a3b8 !important; -} - -[data-theme="dark"] .markdown h1, -[data-theme="dark"] .markdown h2, -[data-theme="dark"] .markdown h3, -[data-theme="dark"] .markdown h4, -[data-theme="dark"] .markdown h5, -[data-theme="dark"] .markdown h6 { - color: #e2e8f0 !important; -} - -/* Fix dark mode for search */ -[data-theme="dark"] .navbar__search-input { - background: rgba(0, 0, 0, 0.2) !important; - border-color: #4a5568 !important; - color: #94a3b8 !important; -} - -[data-theme="dark"] .navbar__search-input:focus { - border-color: #4da6ff !important; - box-shadow: 0 0 0 2px rgba(77, 166, 255, 0.2) !important; -} - -/* Fix dark mode for main content wrapper */ -[data-theme="dark"] .main-wrapper, -[data-theme="dark"] .docMainContainer, -[data-theme="dark"] .docRoot { - background: #1a202c !important; -} - -/* Fix dark mode for documentation pages */ -[data-theme="dark"] .theme-doc-markdown > div, -[data-theme="dark"] .theme-doc-markdown { - background: #1a202c !important; -} - -/* Fix dark mode for code blocks */ -[data-theme="dark"] .theme-code-block { - background: #2d3748 !important; - border-color: #4a5568 !important; -} - -[data-theme="dark"] .prism-code { - background: #2d3748 !important; -} - -[data-theme="dark"] .token.comment, -[data-theme="dark"] .token.prolog, -[data-theme="dark"] .token.doctype, -[data-theme="dark"] .token.cdata { - color: #718096 !important; -} - -/* Fix dark mode for breadcrumbs */ -[data-theme="dark"] .breadcrumbs { - background: #1a202c !important; -} - -[data-theme="dark"] .breadcrumbs__link { - color: #94a3b8 !important; -} - -[data-theme="dark"] .breadcrumbs__link:hover { - color: #4da6ff !important; -} - -/* Fix dark mode for pagination */ -[data-theme="dark"] .pagination-nav__link { - background: #2d3748 !important; - border-color: #4a5568 !important; - color: #94a3b8 !important; -} - -[data-theme="dark"] .pagination-nav__link:hover { - background: #4a5568 !important; - color: #e2e8f0 !important; -} - -/* Fix dark mode for tabs */ -[data-theme="dark"] .tabs { - background: #1a202c !important; -} - -[data-theme="dark"] .tabs__item { - color: #94a3b8 !important; -} - -[data-theme="dark"] .tabs__item--active { - color: #4da6ff !important; - border-bottom-color: #4da6ff !important; -} - -[data-theme="dark"] .tabs__item:hover { - color: #e2e8f0 !important; -} - -/* Fix dark mode for admonitions */ -[data-theme="dark"] .admonition { - background: #2d3748 !important; - border-color: #4a5568 !important; -} - -[data-theme="dark"] .admonition-heading { - color: #e2e8f0 !important; -} - -[data-theme="dark"] .admonition-content { - color: #94a3b8 !important; -} - -/* Fix dark mode for dropdown menus */ -[data-theme="dark"] .dropdown__menu { - background: #2d3748 !important; - border: 1px solid #4a5568 !important; -} - -[data-theme="dark"] .dropdown__link { - color: #94a3b8 !important; -} - -[data-theme="dark"] .dropdown__link:hover { - background: rgba(77, 166, 255, 0.1) !important; - color: #4da6ff !important; -} - -/* Fix dark mode for mobile menu */ -[data-theme="dark"] .navbar-sidebar { - background: rgba(15, 23, 42, 0.95) !important; -} - -[data-theme="dark"] .navbar-sidebar__backdrop { - background: rgba(0, 0, 0, 0.6) !important; -} - -[data-theme="dark"] .navbar-sidebar__brand { - background: #2d3748 !important; - border-bottom-color: #4a5568 !important; -} - -[data-theme="dark"] .navbar-sidebar__item { - color: #94a3b8 !important; -} - -[data-theme="dark"] .navbar-sidebar__link { - color: #94a3b8 !important; -} - -[data-theme="dark"] .navbar-sidebar__link:hover { - background: rgba(77, 166, 255, 0.1) !important; - color: #4da6ff !important; -} - -/* Fix dark mode for blog components */ -[data-theme="dark"] .theme-blog-wrapper { - background: #1a202c !important; -} - -[data-theme="dark"] .blogPostContainer { - background: #1a202c !important; -} - -[data-theme="dark"] .blogPostTitle { - color: #e2e8f0 !important; -} - -[data-theme="dark"] .blogPostContent { - color: #94a3b8 !important; -} - -/* Fix dark mode for homepage components */ -[data-theme="dark"] .heroBanner { - background: #1a202c !important; -} - -[data-theme="dark"] .modernHero { - background: #1a202c !important; -} - -/* Fix dark mode for homepage hero */ -[data-theme="dark"] .heroContainer { - background: #1a202c !important; -} - -[data-theme="dark"] .heroTitle { - color: #e2e8f0 !important; -} - -[data-theme="dark"] .heroSubtitle { - color: #94a3b8 !important; -} - -[data-theme="dark"] .trustLabel { - color: #94a3b8 !important; -} - -/* Fix dark mode for partners */ -[data-theme="dark"] .members { - background: #1a202c !important; -} - -[data-theme="dark"] .partnerLogo { - filter: brightness(0.8) !important; -} - -[data-theme="dark"] .partnerContainer { - background: #1a202c !important; -} - -/* Fix dark mode for learn more section */ -[data-theme="dark"] .learnMoreSection { - background: #1a202c !important; -} - -/* Fix dark mode for any remaining elements */ -[data-theme="dark"] .container, -[data-theme="dark"] .row, -[data-theme="dark"] .col { - background: transparent !important; -} - -/* Fix dark mode for buttons in dark theme */ -[data-theme="dark"] .button--secondary { - background: transparent !important; - border: 2px solid #94a3b8 !important; - color: #94a3b8 !important; -} - -[data-theme="dark"] .button--secondary:hover { - background: #4da6ff !important; - border-color: #4da6ff !important; - color: white !important; -} - -/* Fix dark mode for any cards */ -[data-theme="dark"] .card, -[data-theme="dark"] .panel { - background: #2d3748 !important; - border-color: #4a5568 !important; - color: #94a3b8 !important; -} - -[data-theme="dark"] .card:hover, -[data-theme="dark"] .panel:hover { - border-color: #80c0ff !important; -} - -/* Fix dark mode for text elements */ -[data-theme="dark"] p, -[data-theme="dark"] li, -[data-theme="dark"] span, -[data-theme="dark"] div { - color: #94a3b8 !important; -} - -/* Ensure proper contrast for links */ -[data-theme="dark"] a { - color: #4da6ff !important; -} - -[data-theme="dark"] a:hover { - color: #80c0ff !important; -} - -/* Fix dark mode for any modals */ -[data-theme="dark"] .modal, -[data-theme="dark"] .overlay { - background: #2d3748 !important; - border-color: #4a5568 !important; -} - -/* Fix dark mode for form elements */ -[data-theme="dark"] input, -[data-theme="dark"] textarea, -[data-theme="dark"] select { - background: #2d3748 !important; - border: 1px solid #4a5568 !important; - color: #e2e8f0 !important; -} - -[data-theme="dark"] input:focus, -[data-theme="dark"] textarea:focus, -[data-theme="dark"] select:focus { - border-color: #4da6ff !important; - box-shadow: 0 0 0 2px rgba(77, 166, 255, 0.2) !important; -} - -/* Fix dark mode for any tooltips */ -[data-theme="dark"] .tooltip { - background: #4a5568 !important; - color: #e2e8f0 !important; - border-color: #718096 !important; -} - -/* Ensure proper dark mode scrollbars */ -[data-theme="dark"] * { - scrollbar-color: #4a5568 #2d3748; -} - -/* Fix any potential white backgrounds that might appear */ -[data-theme="dark"] [style*="background-color: white"], -[data-theme="dark"] [style*="background-color: #fff"], -[data-theme="dark"] [style*="background: white"] { - background: #1a202c !important; -} - -[data-theme="dark"] [style*="color: black"], -[data-theme="dark"] [style*="color: #000"], -[data-theme="dark"] [style*="color:#000"] { - color: #94a3b8 !important; -} - -/* Fix dark mode for search plugin */ -[data-theme="dark"] .DocSearch { - --docsearch-primary-color: #94a3b8 !important; - --docsearch-text-color: #94a3b8 !important; - --docsearch-muted-color: #718096 !important; - --docsearch-container-background: rgba(15, 23, 42, 0.8) !important; - --docsearch-modal-background: #2d3748 !important; - --docsearch-searchbox-background: #4a5568 !important; - --docsearch-searchbox-focus-background: #4a5568 !important; - --docsearch-hit-color: #94a3b8 !important; - --docsearch-hit-active-color: #e2e8f0 !important; - --docsearch-hit-background: #4a5568 !important; - --docsearch-hit-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; - --docsearch-key-gradient: linear-gradient(-225deg, #4a5568, #4a5568) !important; - --docsearch-key-shadow: inset 0 -2px 0 0 #2d3748, inset 0 0 1px 1px #4a5568, 0 1px 2px 1px rgba(0, 0, 0, 0.3) !important; - --docsearch-footer-background: #2d3748 !important; -} - -[data-theme="dark"] .DocSearch-Button { - background: #2d3748 !important; - border-color: #4a5568 !important; - color: #94a3b8 !important; -} - -[data-theme="dark"] .DocSearch-Button:hover { - background: #4a5568 !important; - color: #e2e8f0 !important; -} - -[data-theme="dark"] .DocSearch-Button-Key { - background: #4a5568 !important; - color: #94a3b8 !important; -} - -/* Fix dark mode for lunr search plugin if present */ -[data-theme="dark"] .search-bar { - background: #2d3748 !important; - border-color: #4a5568 !important; -} - -[data-theme="dark"] .search-bar input { - background: #4a5568 !important; - color: #e2e8f0 !important; -} - -[data-theme="dark"] .search-bar input::placeholder { - color: #94a3b8 !important; -} - -[data-theme="dark"] .search-results { - background: #2d3748 !important; - border-color: #4a5568 !important; - color: #94a3b8 !important; -} - -[data-theme="dark"] .search-result-item { - color: #94a3b8 !important; -} - -[data-theme="dark"] .search-result-item:hover { - background: rgba(77, 166, 255, 0.1) !important; -} - -[data-theme="dark"] .search-result-title { - color: #e2e8f0 !important; -} - -[data-theme="dark"] .search-result-snippet { - color: #94a3b8 !important; -} - -/* Fix dark mode for any remaining Docusaurus components */ -[data-theme="dark"] .theme-doc-version-banner { - background: #2d3748 !important; - border-color: #4a5568 !important; - color: #94a3b8 !important; -} - -[data-theme="dark"] .theme-doc-version-badge { - background: #4a5568 !important; - color: #e2e8f0 !important; -} - -/* Fix dark mode for any alert/callout components */ -[data-theme="dark"] .alert { - background: #2d3748 !important; - border-color: #4a5568 !important; - color: #94a3b8 !important; -} - -[data-theme="dark"] .alert--primary { - background: rgba(77, 166, 255, 0.1) !important; - border-color: #4da6ff !important; -} - -[data-theme="dark"] .alert--secondary { - background: rgba(148, 163, 184, 0.1) !important; - border-color: #94a3b8 !important; -} - -[data-theme="dark"] .alert--success { - background: rgba(16, 185, 129, 0.1) !important; - border-color: #10b981 !important; -} - -[data-theme="dark"] .alert--info { - background: rgba(59, 130, 246, 0.1) !important; - border-color: #3b82f6 !important; -} - -[data-theme="dark"] .alert--warning { - background: rgba(245, 158, 11, 0.1) !important; - border-color: #f59e0b !important; -} - -[data-theme="dark"] .alert--danger { - background: rgba(239, 68, 68, 0.1) !important; - border-color: #ef4444 !important; -} - -/* Fix dark mode for any remaining interactive elements */ -[data-theme="dark"] .badge { - background: #4a5568 !important; - color: #e2e8f0 !important; -} - -[data-theme="dark"] .badge--primary { - background: #4da6ff !important; - color: white !important; -} - -[data-theme="dark"] .badge--secondary { - background: #94a3b8 !important; - color: white !important; -} - -/* Final catch-all for any missed elements */ -[data-theme="dark"] .clean-btn { - background: rgba(77, 166, 255, 0.1) !important; - border-color: rgba(77, 166, 255, 0.2) !important; - color: #4da6ff !important; -} - -[data-theme="dark"] .clean-btn:hover { - background: #4da6ff !important; - color: white !important; -} \ No newline at end of file diff --git a/src/css/homepage-fix.css b/src/css/homepage-fix.css deleted file mode 100644 index de639d12a..000000000 --- a/src/css/homepage-fix.css +++ /dev/null @@ -1,106 +0,0 @@ -/* Emergency homepage gap fix - highest specificity */ - -/* Apply background to the root elements with maximum specificity */ -html[data-theme="light"] body.homepage, -html[data-theme="light"] .homepage, -html[data-theme="light"] .homepage .main-wrapper, -html[data-theme="light"] .homepage main, -html[data-theme="light"] .homepage .theme-doc-wrapper { - background: linear-gradient(135deg, - #e6f2ff 0%, - #b3d9ff 25%, - #f8fafc 50%, - #b3d9ff 75%, - #e6f2ff 100%) !important; - background-size: 400% 400% !important; - animation: cnoe-gradient-shift 15s ease infinite !important; - background-attachment: fixed !important; - min-height: 100vh !important; -} - -html[data-theme="dark"] body.homepage, -html[data-theme="dark"] .homepage, -html[data-theme="dark"] .homepage .main-wrapper, -html[data-theme="dark"] .homepage main, -html[data-theme="dark"] .homepage .theme-doc-wrapper { - background: linear-gradient(135deg, - #0f172a 0%, - #002444 25%, - #1e293b 50%, - #003156 75%, - #0f172a 100%) !important; - background-size: 400% 400% !important; - animation: cnoe-gradient-shift 15s ease infinite !important; - background-attachment: fixed !important; - min-height: 100vh !important; -} - -/* Make all sections completely transparent */ -html body.homepage .hero, -html body.homepage .cnoeSection, -html body.homepage .features, -html body.homepage .members, -html body.homepage .newsSection, -html body.homepage .learnMoreSection, -html body.homepage main, -html body.homepage main>div, -html body.homepage div[data-scroll-animation] { - background: transparent !important; - margin: 0 !important; - padding-left: 0 !important; - padding-right: 0 !important; - border: none !important; - box-shadow: none !important; -} - -/* Restore only vertical padding for content spacing */ -html body.homepage .hero { - padding: 5rem 0 !important; -} - -html body.homepage .cnoeSection { - padding: 4rem 0 !important; -} - -html body.homepage .features { - padding: 5rem 0 !important; -} - -html body.homepage .members { - padding: 5rem 0 !important; -} - -html body.homepage .newsSection { - padding: 5rem 0 !important; -} - -html body.homepage .learnMoreSection { - padding: 4rem 0 !important; -} - -/* Remove any container backgrounds */ -html body.homepage .container, -html body.homepage .container-fluid { - background: transparent !important; - margin: 0 auto !important; - padding: 0 2rem !important; -} - -/* Ensure no white backgrounds anywhere */ -html body.homepage *:not(.button):not(input):not(select):not(textarea) { - background-color: transparent !important; - background-image: none !important; -} - -/* Force remove any inline styles */ -html body.homepage [style*="background"] { - background: transparent !important; -} - -/* Remove all margins and borders */ -html body.homepage * { - margin-top: 0 !important; - margin-bottom: 0 !important; - border-top: none !important; - border-bottom: none !important; -} \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index 55322c191..07cb9e157 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -5,9 +5,6 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; import Layout from "@theme/Layout"; import ValueProposition from "@site/src/components/ValueProposition"; import MissionVision from "@site/src/components/MissionVision"; -import InteractiveDiagram from "@site/src/components/InteractiveDiagram"; -import Grid from '@mui/material/Grid'; -import HelpIcon from '@mui/icons-material/Help'; import AliceCarousel from 'react-alice-carousel'; import 'react-alice-carousel/lib/alice-carousel.css'; import { useColorMode } from '@docusaurus/theme-common'; @@ -34,12 +31,6 @@ function HomepageHeader() { {/* Animated Background Elements */}
-
-
-
-
-
-
{/* Hero Content */} @@ -109,7 +100,7 @@ function HomepageHeader() { > - Join Community + Community
@@ -118,9 +109,15 @@ function HomepageHeader() {
-
- - GitHub - Join the Community - -
+
); @@ -287,20 +273,20 @@ export default function Home() { description="Joint efforts to build Internal Developer Platforms" > -
-
+
+
-
+
+
+ +
+
+ +
-
- -
-
- -
diff --git a/src/pages/index.module.css b/src/pages/index.module.css index 9e83ea06c..d1e7bbc7a 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -12,12 +12,14 @@ /* Modern Hero Section Styles */ .modernHero { - min-height: 100vh; + min-height: calc(100vh - var(--ifm-navbar-height)); + height: calc(100vh - var(--ifm-navbar-height)); display: flex; align-items: center; justify-content: center; padding: 0; position: relative; + overflow: hidden; } .heroContent { @@ -35,6 +37,8 @@ align-items: center; text-align: center; gap: 3rem; + height: 100%; + min-height: calc(100vh - var(--ifm-navbar-height) - 4rem); } .logoSection { @@ -53,6 +57,9 @@ max-width: 800px; opacity: 0; animation-delay: 0.6s; + display: flex; + flex-direction: column; + height: 100%; } .heroTitle { @@ -233,8 +240,9 @@ .learnMoreHero { display: flex; justify-content: center; - margin-top: 4rem; - opacity: 0; + margin-top: auto; + padding-top: 3rem; + opacity: 1; animation-delay: 1.2s; } @@ -330,7 +338,7 @@ } .learnMoreHero { - margin-top: 2rem; + padding-top: 2rem; } .learnMoreButton { @@ -435,7 +443,7 @@ .partnersSubtitle { font-size: var(--ifm-font-size-lg); - color: var(--ifm-neutral-600); + color: var(--ifm-neutral-700); max-width: 500px; margin: 0 auto; line-height: 1.6; diff --git a/yarn.lock b/yarn.lock index fb89d8b11..08d05edee 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5511,6 +5511,11 @@ fs.realpath@^1.0.0: resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw== +fsevents@2.3.2: + version "2.3.2" + resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" + integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== + fsevents@~2.3.2: version "2.3.3" resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6" @@ -8095,6 +8100,20 @@ pkg-types@^2.0.1: exsolve "^1.0.7" pathe "^2.0.3" +playwright-core@1.54.1: + version "1.54.1" + resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.54.1.tgz#d32edcce048c9d83ceac31e294a7b60ef586960b" + integrity sha512-Nbjs2zjj0htNhzgiy5wu+3w09YetDx5pkrpI/kZotDlDUaYk0HVA5xrBVPdow4SAUIlhgKcJeJg4GRKW6xHusA== + +playwright@^1.54.1: + version "1.54.1" + resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.54.1.tgz#128d66a8d5182b5330e6440be3a72ca313362788" + integrity sha512-peWpSwIBmSLi6aW2auvrUtf2DqY16YYcCMO8rTVx486jKmDTJg7UAhyrraP98GB8BoPURZP8+nxO7TSd4cPr5g== + dependencies: + playwright-core "1.54.1" + optionalDependencies: + fsevents "2.3.2" + "plugin-image-zoom@git+https://github.com/flexanalytics/plugin-image-zoom.git": version "1.1.0" resolved "git+https://github.com/flexanalytics/plugin-image-zoom.git#8e1b866c79ed6d42cefc4c52f851f1dfd1d0c7de" From 8ce1bdc54eaa1de4fbb7bfb4bd3911160a25aee9 Mon Sep 17 00:00:00 2001 From: punkwalker Date: Mon, 4 Aug 2025 03:38:41 +0000 Subject: [PATCH 3/3] minor fixes Signed-off-by: punkwalker --- docusaurus.config.js | 4 +-- src/components/ValueProposition/index.js | 4 +-- .../ValueProposition/styles.module.css | 25 ++++++++++++------- src/pages/index.js | 10 ++++---- 4 files changed, 25 insertions(+), 18 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index 1ea00ee12..b1113d6c2 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -93,7 +93,7 @@ const config = { colorMode: { defaultMode: 'light', disableSwitch: true, - respectPrefersColorScheme: true, + respectPrefersColorScheme: false, }, navbar: { title: '', @@ -141,7 +141,7 @@ const config = { }, { label: 'Contribute', - to: '/docs/contribute', + to: '/docs/contributing/aws-ref-impl-CONTRIBUTING', }, ], }, diff --git a/src/components/ValueProposition/index.js b/src/components/ValueProposition/index.js index c0ddf6ff0..d4561e6a8 100644 --- a/src/components/ValueProposition/index.js +++ b/src/components/ValueProposition/index.js @@ -89,9 +89,9 @@ export default function ValueProposition() {
-

Why Choose CNOE?

+

Why CNOE?

- Built on proven principles for modern internal developer platforms + To share proven principles of building robust internal developer platforms

- Community + Contribute
@@ -225,9 +225,9 @@ const Partners = () => {
-

Trusted by Industry Leaders

+

Members

- Join leading companies building the future of internal developer platforms + Led by companies building the internal developer platforms at scale