diff --git a/assets/js/custom.js b/assets/js/custom.js index 3f1211631..531f587a8 100644 --- a/assets/js/custom.js +++ b/assets/js/custom.js @@ -1,2 +1,2 @@ -// Minimal custom JS - testing if complex sidebar logic is still needed -console.log('=== MINIMAL CUSTOM JS LOADED ==='); +// Minimal custom JS - testing if complex sidebar logic is still needed +console.log('=== MINIMAL CUSTOM JS LOADED ==='); diff --git a/assets/scss/common/_base.scss b/assets/scss/common/_base.scss index 9c9d01f20..62ceb9c92 100644 --- a/assets/scss/common/_base.scss +++ b/assets/scss/common/_base.scss @@ -14,23 +14,32 @@ * Important for landing pages or wide documentation pages. */ .container-fw { - max-width: 100%; /* Uses the full available width */ - padding-left: 1rem; /* Minimal left padding */ + max-width: 100%; + /* Uses the full available width */ + padding-left: 1rem; + /* Minimal left padding */ /* Main content (docs-content) in full-width mode */ .docs-content { - margin-left: 0rem !important; /* Removes standard margins */ - margin-right: 0rem !important; /* so the content can use the full */ - padding-right: 0rem !important; /* width */ + margin-left: 0rem !important; + /* Removes standard margins */ + margin-right: 0rem !important; + /* so the content can use the full */ + padding-right: 0rem !important; + /* width */ padding-left: 0rem !important; } /* Table of contents (TOC) in full-width mode */ .docs-toc { - margin-left: 3rem !important; /* Spacing to main content */ - margin-right: 0rem !important; /* No right margin */ - padding-right: 0rem !important; /* No right padding */ - padding-left: 0rem !important; /* or left */ + margin-left: 3rem !important; + /* Spacing to main content */ + margin-right: 0rem !important; + /* No right margin */ + padding-right: 0rem !important; + /* No right padding */ + padding-left: 0rem !important; + /* or left */ } } @@ -40,6 +49,22 @@ * They automatically fit the width of their container. */ .content img { - max-width: 100%; /* Image never wider than its container */ - height: auto; /* Height scales proportionally */ + max-width: 100%; + /* Image never wider than its container */ + height: auto; + /* Height scales proportionally */ +} + +/* WORD WRAPPING + * ------------- + * Used to wrap individual words in spans for styling or animation. + */ +.word { + display: inline-block; + margin-right: 0.25em; + /* Add space between words wrapped in spans */ + + &:last-child { + margin-right: 0; + } } \ No newline at end of file diff --git a/assets/scss/common/_custom.scss b/assets/scss/common/_custom.scss index 0e2d080db..1ddd2f079 100644 --- a/assets/scss/common/_custom.scss +++ b/assets/scss/common/_custom.scss @@ -1,11 +1,16 @@ // Main SCSS file importing all modular components -@import "base"; // Layout & structure -@import "header"; // Header & navigation -@import "branding"; // Logo & fonts -@import "sidebar"; // Sidebar navigation -@import "cards"; // Card grid system -@import "components"; // TOC & description boxes -@import "footer"; // Footer styles -@import "pages"; // Page-specific overrides +@import "variables-custom"; // Custom variables (colors, fonts) +@import "base"; // Layout & structure +// @import "header"; // Header & navigation +@import "header-custom"; // New Custom Header Port +@import "branding"; // Logo & fonts +@import "sidebar"; // Sidebar navigation +@import "cards"; // Card grid system +@import "components"; // TOC & description boxes +@import "footer"; // Footer styles +@import "pages"; // Page-specific overrides @import "version-warning"; // Version warning banner styles +@import "landing-ord"; // Migrated ORD Landing Page Styles + + // End of imports \ No newline at end of file diff --git a/assets/scss/common/_header-custom.scss b/assets/scss/common/_header-custom.scss new file mode 100644 index 000000000..c61e2a5c8 --- /dev/null +++ b/assets/scss/common/_header-custom.scss @@ -0,0 +1,397 @@ +/* Custom Header Styles adapted from ORD Specification */ + +:root { + --nav-height: 60px; + --nav-gap: clamp(16px, 2vw, 24px); + --nav-link-size: 0.9375rem; + /* 15px */ + --fw-nav: 500; + --fw-nav-hover: 500; + --fw-nav-active: 600; + --nav-border-scrolled: var(--lp-c-border); +} + +.header { + position: sticky; + top: 0; + z-index: 1000; + width: 100%; + height: var(--nav-height); + transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; + + @include media-breakpoint-up(lg) { + background-color: var(--lp-c-bg); + + /* Glassmorphism */ + @supports (backdrop-filter: blur(12px)) { + background-color: var(--glass-bg); + backdrop-filter: var(--glass-blur); + -webkit-backdrop-filter: var(--glass-blur); + } + } + + &.scrolled { + border-bottom-color: var(--nav-border-scrolled); + box-shadow: var(--shadow-md); + } +} + +.navbar { + height: 100%; + padding: 0 !important; + + .container-fluid { + max-width: var(--container); + height: 100%; + display: flex; + align-items: center; + gap: var(--nav-gap); + padding-inline: var(--nav-pad-x, 24px); // Add padding using var or fallback + } +} + +[data-bs-theme="dark"] { + .navbar { + background-color: transparent; + } +} + +[data-bs-theme="light"] { + .navbar { + background-color: var(--lp-c-bg); + } +} + +.navbar-brand { + display: flex; + align-items: center; + padding: 0; + margin: 0; + font-size: 1rem; + + img { + // height attribute handles size, ensuring unconstrained width maintains aspect ratio + display: block; + } + + .navbar-brand-text { + margin-left: 10px; + font-weight: 700; + color: var(--c-text-strong); + line-height: 1; + } +} + +.navbar-nav { + display: flex; + flex-direction: column; // Column on mobile + align-items: flex-start; // Align left on mobile + gap: 1rem; // Spacing on mobile + margin: 0; + padding: 0; + list-style: none; + height: auto; // Auto height on mobile + + @include media-breakpoint-up(lg) { + flex-direction: row; // Row on desktop + align-items: center; + gap: var(--nav-gap); + height: 100%; + } + + .nav-item { + width: 100%; // Full width on mobile + + @include media-breakpoint-up(lg) { + width: auto; + height: 100%; + display: flex; + align-items: center; + } + } + + .nav-link { + display: inline-flex; + align-items: center; + width: 100%; // Full width on mobile + padding: 0.5rem 0; // Larger hit area on mobile + font-size: var(--nav-link-size); + font-weight: var(--fw-nav); + color: var(--lp-c-text-1) !important; + text-decoration: none; + transition: color 0.15s ease; + background: transparent; + border: none; + + @include media-breakpoint-up(lg) { + width: auto; + height: 100%; + padding: 0 4px; + } + + &:hover, + &:focus { + color: var(--c-accent) !important; + font-weight: var(--fw-nav-hover); + } + + &.active, + &[aria-current="page"] { + color: var(--c-accent) !important; + font-weight: var(--fw-nav-active); + } + } +} + +/* Right aligned items */ +.navbar-right { + display: flex; + align-items: center; + gap: 16px; + margin-top: 1rem; // Spacing on mobile + + @include media-breakpoint-up(lg) { + margin-left: auto; + margin-top: 0; + height: var(--nav-height); // Full height for container centering + } + + // Standardize all utility buttons/links in the right section + .btn-link, + .nav-link, + .header-github-pill, + .mode-toggle, + .btn-dropdown, + .dropdown, + .version-droplet { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + height: 32px !important; + margin: 0 !important; + padding: 0 !important; + line-height: 1 !important; + vertical-align: middle !important; + } + + .version-droplet { + position: relative; // Needed for tooltip positioning + padding: 0 10px !important; + background-color: #ffc107; + color: #000; + border-radius: 16px; + font-size: 11px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.5px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + cursor: help; + + // Custom CSS Tooltip + &::after { + content: attr(data-tooltip); + position: absolute; + top: calc(100% + 14px); // Position below + bottom: auto; + right: 0; // Align to right edge (extends left) + left: auto; + width: 260px; + padding: 12px; + background-color: #1b1b1f; + color: #fff; + font-size: 13px; + font-weight: 500; + text-transform: none; + line-height: 1.5; + border-radius: 8px; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); + opacity: 0; + pointer-events: none; + transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1); + z-index: 1001; + text-align: left; + transform: translateY(-8px); // Start slightly up + } + + // Tooltip Arrow + &::before { + content: ""; + position: absolute; + top: calc(100% + 2px); // Tip of arrow just below element + bottom: auto; + right: 15px; // Align arrow with the droplet center (roughly) + left: auto; + border-width: 6px; + border-style: solid; + // Arrow pointing UP: Bottom border has color + border-color: transparent transparent #1b1b1f transparent; + opacity: 0; + pointer-events: none; + transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1); + z-index: 1001; + transform: translateY(-8px); + } + + &:hover { + + &::after, + &::before { + opacity: 1; + transform: translateY(0); + } + } + } +} + +/* GitHub Pill Style */ +.header-github-pill { + gap: 6px; + color: var(--lp-c-text-1); + font-size: var(--nav-link-size); + font-weight: var(--fw-nav); + text-decoration: none; + transition: color 0.15s ease; + + span { + display: inline-flex; + align-items: center; + } + + &:hover { + color: var(--c-accent); + } + + .icon { + width: 1.5rem; + height: 1.5rem; + display: inline-flex; + align-items: center; + justify-content: center; + } +} + +/* Theme Toggle */ +.mode-toggle { + width: 32px; + color: var(--lp-c-text-1); + + &:hover { + color: var(--c-accent); + } +} + +/* Button & Dropdown Reset */ +.btn-link.nav-link, +.btn-dropdown { + font-size: var(--nav-link-size); + font-weight: var(--fw-nav); + color: var(--lp-c-text-1) !important; + text-decoration: none !important; + border: none; + background: transparent; + + &:hover { + color: var(--c-accent) !important; + } + + svg { + stroke: currentColor; + } + + &.me-3 { + margin-right: 1rem !important; // Restore spacing for search button + } +} + +.dropdown-toggle::after { + display: none; // Hide Bootstrap default caret if needed, though we use our own SVG +} + +/* Dropdown Menu Styles */ +.dropdown-menu { + background-color: var(--lp-c-bg-elv) !important; + border: 1px solid var(--lp-c-border) !important; + padding: 8px 0; + + .dropdown-item { + color: var(--lp-c-text-1) !important; + font-size: 0.875rem; + padding: 8px 16px; + transition: background-color 0.2s ease, color 0.2s ease; + + &:hover, + &:focus { + background-color: var(--lp-c-bg-soft) !important; + color: var(--c-accent) !important; + } + + &.current, + &[aria-current="true"] { + color: var(--c-accent) !important; + font-weight: 600; + } + + .version-flag { + font-size: 0.75rem; + opacity: 0.7; + margin-left: 4px; + } + } +} + +/* Mobile Toggle */ +.navbar-toggler { + border: none; + background: transparent; + padding: 0; + color: var(--lp-c-text-2); + display: flex; + margin-left: auto; + + @include media-breakpoint-up(lg) { + display: none; + } +} + +/* Offcanvas/Mobile Menu tweaks + Desktop Reset */ +.offcanvas { + background-color: var(--lp-c-bg); + + .offcanvas-header { + border-bottom: 1px solid var(--lp-c-border); + } + + .offcanvas-body { + padding: 24px; // Spacing on mobile + width: 100%; // Ensure body fills the offcanvas + } + + /* DESKTOP RESET: Make offcanvas behave like normal navbar */ + @include media-breakpoint-up(lg) { + position: static; + z-index: auto; + flex-grow: 1; + width: 100% !important; // Force full width to fill container + height: auto !important; + visibility: visible !important; + background-color: transparent !important; + border: 0 !important; + transform: none !important; + transition: none; + display: flex; + align-items: center; + + .offcanvas-header { + display: none; + } + + .offcanvas-body { + display: flex; + align-items: center; + flex-grow: 1; + padding: 0; + overflow: visible; + width: 100%; // Ensure body fills the offcanvas + } + } +} \ No newline at end of file diff --git a/assets/scss/common/_header.scss b/assets/scss/common/_header.scss deleted file mode 100644 index 584878071..000000000 --- a/assets/scss/common/_header.scss +++ /dev/null @@ -1,120 +0,0 @@ -/* VERSION DROPDOWN - * ------------------------- - * Ensures the version dropdown is wide enough so that - * the version flag (default) is never overlapped by the chevron icon. - * Ensures the "(default)" flag in the version dropdown - * has the same color, size, and weight as the version text. - */ -.dropdown-menu[aria-labelledby="doks-versions"] { - min-width: 11em; -} - -.dropdown-item .version-flag { - color: inherit; /* Same color as text */ - font-size: inherit; /* Same size as text */ - font-weight: inherit; /* Same weight as text */ -} - -/* - * HEADER STYLES - * ============ - * This file controls the appearance of the main navigation bar (header) - * at the top of every page. - * - * IMPORTANT INFORMATION: - * - The header is always visible (fixed position) - * - Always uses a dark design (even if the page is light) - * - Contains the OCM logo and main navigation - * - Has a colored bar at the top - */ - -/* MAIN NAVIGATION BAR - * ------------------- - * Forces a dark design for better readability. - * !important is used to override other theme settings. - */ -header.navbar { - background-color: #1d1e22 !important; /* Dark background (almost black) */ - color: #dee2e6 !important; /* Light text color */ - padding-top: 1rem; /* Top spacing */ - padding-bottom: 1rem; /* Bottom spacing */ -} - -/* COLORED BAR AT THE TOP - * ---------------------- - * A thin, colored stripe above the header. - * Remains the same in light and dark mode. - */ -.header-bar { - height: 4px !important; /* Very thin line */ - background: linear-gradient(to right, #4cc9f0, #4361ee) !important; /* Blue gradient */ - border: none !important; /* No borders */ - box-shadow: none !important; /* No shadow */ -} - -/* NAVIGATION ELEMENTS - * ------------------- - * All clickable elements in the header (links, buttons, dropdown menus) - * have the same light color. - */ -header.navbar .nav-link, -header.navbar .btn-link, -header.navbar .btn-dropdown { - color: #dee2e6 !important; /* Light text color for all elements */ -} - -/* ICONS IN NAVIGATION - * ------------------- - * Special settings for SVG icons like search, menu toggle, etc. - * Uses only outlines (stroke) without fill for a light look. - */ -header.navbar .btn-link svg, -header.navbar .btn-dropdown svg, -header.navbar .nav-link[aria-label="Search website"] svg { - stroke: #dee2e6; /* Light stroke color */ - fill: none; /* No fill */ -} - -/* OFFCANVAS MENU - * -------------- - * Specific settings for the mobile offcanvas menu. - * Only apply on small screens (max-width: 991.98px)! - */ -@media (max-width: 991.98px) { - .offcanvas.offcanvas-end .offcanvas-body .navbar-nav .nav-link { - color: #232336 !important; /* Dark gray for readability in light mode */ - } - - /* Versions dropdown and social media icons styling */ - .offcanvas.offcanvas-end .offcanvas-body .btn-dropdown, - .offcanvas.offcanvas-end .offcanvas-body .btn-link, - .offcanvas.offcanvas-end .offcanvas-body .dropdown-toggle { - color: #232336 !important; /* Same color as nav links */ - } - - /* Social media icons (SVG) styling - match desktop header exactly */ - .offcanvas.offcanvas-end .offcanvas-body .social-link svg, - .offcanvas.offcanvas-end .offcanvas-body .btn-link svg, - .offcanvas.offcanvas-end .offcanvas-body .nav-link svg { - stroke: #dee2e6 !important; /* Same as desktop header */ - /* Don't override fill - let SVG definitions control solid vs outlined */ - } - - /* Dark mode styles */ - [data-bs-theme="dark"] .offcanvas.offcanvas-end .offcanvas-body .navbar-nav .nav-link { - color: #dee2e6 !important; /* Light color in dark mode */ - } - - [data-bs-theme="dark"] .offcanvas.offcanvas-end .offcanvas-body .btn-dropdown, - [data-bs-theme="dark"] .offcanvas.offcanvas-end .offcanvas-body .btn-link, - [data-bs-theme="dark"] .offcanvas.offcanvas-end .offcanvas-body .dropdown-toggle { - color: #dee2e6 !important; /* Light color in dark mode */ - } - - [data-bs-theme="dark"] .offcanvas.offcanvas-end .offcanvas-body .social-link svg, - [data-bs-theme="dark"] .offcanvas.offcanvas-end .offcanvas-body .btn-link svg, - [data-bs-theme="dark"] .offcanvas.offcanvas-end .offcanvas-body .nav-link svg { - stroke: #dee2e6 !important; /* Same as desktop header */ - /* Don't override fill - let SVG definitions control solid vs outlined */ - } -} diff --git a/assets/scss/common/_landing-ord.scss b/assets/scss/common/_landing-ord.scss new file mode 100644 index 000000000..e8308b788 --- /dev/null +++ b/assets/scss/common/_landing-ord.scss @@ -0,0 +1,618 @@ +/* Hero area and layout */ +.lp-home { + display: grid; + background: var(--lp-c-bg); + min-height: 100vh; + gap: 24px; + padding-top: var(--nav-height); + padding-left: var(--nav-pad-x) !important; + padding-right: var(--nav-pad-x) !important; + padding-bottom: var(--nav-height); + + .container { + display: flex; + margin: 0 auto; + flex-direction: column; + align-items: center; + text-align: center; + gap: 64px; + width: 100%; + max-width: var(--container); + } + + .main { + flex: 1 1 100%; + order: 2; + } + + .heading { + line-height: 1.2; + font-weight: 600; + margin-bottom: 24px; + } + + .name { + font-size: 48px; + display: block; + line-height: 1.12; + padding-bottom: 0.12em; + + + &.clip { + background: var(--lp-home-hero-name-background); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: var(--lp-home-hero-name-color); + } + } + + .text { + font-size: 36px; + font-weight: 500; + color: var(--lp-c-text-1); + display: block; + margin-top: 8px; + } + + .tagline { + color: var(--lp-c-text-2); + font-size: 20px; + line-height: 30px; + margin: 0 auto 32px; + max-width: 600px; + } + + .definition { + color: var(--c-text-dim); + font-size: 14px; + line-height: 22px; + margin: 24px auto 0; + max-width: 850px; + opacity: 0.85; + text-align: center; + } + + .actions { + display: flex; + flex-wrap: wrap; + gap: 12px; + justify-content: center; + } + + .image { + display: flex; + order: 1; + flex: 1 1 100%; + margin-top: 10px; + justify-content: center; + align-items: center; + + .image-container { + position: relative; + width: 350px; + height: 350px; + margin: 0 auto; + max-width: 100%; + + @media (max-width: 480px) { + width: 200px; + height: 200px; + } + + @media (min-width: 481px) and (max-width: 959px) { + width: 280px; + height: 280px; + } + } + + .image-bg { + position: absolute; + inset: 0; + background-image: var(--lp-home-hero-image-background-image); + filter: var(--lp-home-hero-image-filter); + border-radius: 50%; + opacity: 0.6; + } + + .image-src { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: contain; + z-index: 1; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + } + } + + /* Responsive styles */ + @media (max-width: 480px) { + .container { + gap: var(--nav-pad-x) !important; + } + + .actions { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + width: 100%; + } + + .action a { + padding: 12px 16px; + font-size: 14px; + } + } + + @media (min-width: 481px) and (max-width: 959px) { + .actions-grid { + grid-template-columns: repeat(2, 1fr); + gap: 20px; + width: 100%; + } + } + + @media (min-width: 768px) { + .name { + font-size: 56px; + } + + .text { + font-size: 48px; + } + + .tagline { + font-size: 24px; + line-height: 36px; + } + + .definition { + font-size: 16px; + line-height: 26px; + text-align: center; + } + } + + @media (min-width: 960px) { + padding-top: 16px; + + .container { + flex-direction: row; + text-align: left; + gap: 64px; + } + + .main { + flex: 1 1 50%; + order: 1; + } + + .name { + font-size: 64px; + } + + .text { + font-size: 56px; + } + + .tagline { + margin: 0 0 32px; + } + + .definition { + margin: 24px 0 32px; + text-align: left; + } + + .actions { + justify-content: flex-start; + } + + .image { + flex: 1 1 50%; + order: 2; + } + } +} + +/* Actions / Buttons */ +.action p { + margin: 0; + padding: 0; +} + +.action a, +.lp-button { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 14px 24px; + line-height: 1.2; + height: auto; + min-width: 0; + white-space: nowrap; + border-radius: 16px; + font-size: 16px; + font-weight: 600; + text-decoration: none !important; + border: 1px solid transparent; + transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.25s ease, color 0.25s ease; + width: 100%; // For .action a inside flex container if needed + + &:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-md); + } + + &:active { + transform: translateY(0); + box-shadow: none; + } +} + +.action.brand a, +.lp-button.brand { + background: var(--brand-cyan); + color: var(--lp-button-brand-text); + border-color: transparent; + + &:hover { + color: var(--lp-button-brand-text); + } +} + +.action.alt a, +.lp-button.alt { + background: var(--brand-blue-dark); + color: var(--lp-button-brand-text); + border-color: transparent; + + &:hover { + color: var(--lp-button-brand-text); + } +} + +/* Feature Cards */ +.lp-features { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 14px; + max-width: 1152px; + margin-left: auto; + margin-right: auto; + align-items: stretch; + align-content: start; + height: max-content; + cursor: pointer; + + h3 { + font-size: 16px; + } + + @media (min-width: 481px) and (max-width: 959px) { + grid-template-columns: repeat(2, 1fr); + gap: 20px; + width: 100%; + } + + @media (max-width: 480px) { + grid-template-columns: 1fr; + gap: 20px; + width: 100%; + } +} + +.lp-feature-card { + color: var(--lp-c-text-1); + padding: 16px 28px 20px; + transition: all 0.25s ease; + display: flex; + flex-direction: column; + height: 100%; + background: var(--lp-c-bg-soft); + border-radius: 12px; + box-shadow: none; + background-clip: padding-box; + text-decoration: none; // Added to handle linkified cards + + &:hover { + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); + transform: translateY(-1px); + text-decoration: none; // Ensure no underline on hover + } + + &:active { + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25); + transform: translateY(0); + } + + .card-header { + display: flex; + align-items: center; + gap: 8px; + margin: 0; + font-size: 16px; + + .emoji { + font-size: 1.2em; + } + + .title { + font-weight: 600; + } + } + + p { + margin: 12px 0 0; + color: var(--lp-c-text-2); + font-weight: 500; + line-height: 1.6; + font-size: 14px; + } + + @media (max-width: 480px) { + text-align: left; + } +} + + +/* Footer styles */ +.footer--dark { + --ifm-footer-background-color: var(--lp-c-bg); + background-color: var(--lp-c-bg); + border-top: 1px solid var(--lp-c-divider); + padding: 16px 0 0; +} + +.footer-content-wrapper { + width: 100%; + padding: 0 24px; // Mobile/Tablet + margin: 0 auto; + + @media (min-width: 960px) { + padding: 0 64px; // Desktop + } +} + +.footer-inner-container { + max-width: 1152px; + margin: 0 auto; + width: 100%; +} + +.footer--dark .footer__copyright { + color: var(--lp-c-text-2); + font-size: 12px; + line-height: 24px; + max-width: var(--container); + margin: 0 auto; + text-align: left; +} + +.footer--dark svg { + display: none; +} + +.footer-funding { + display: flex; + flex-wrap: wrap; + flex-direction: column; + align-items: center; + gap: 24px; + padding: 0; +} + +.footer-funding__image img { + max-width: 300px; + height: auto; + display: block; +} + +.footer-funding__text { + flex: 1; + font-size: 12px; + color: var(--lp-c-text-2); + line-height: 1.6; + text-align: left; +} + +.footer-funding__text p { + color: var(--lp-c-text-3); + margin: 0; + font-size: 12px; + text-align: left; +} + +.footer-funding__text strong { + color: var(--lp-c-text-3); + font-weight: 600; +} + +.footer-funding__text a { + color: var(--c-accent); + text-decoration: none; +} + +.footer-funding__text a:hover { + color: var(--lp-c-brand-2); + text-decoration: underline; +} + +.footer-copyright { + margin-top: 24px; + padding-top: 24px; + border-top: 1px solid var(--lp-c-divider); +} + +.footer-container { + display: flex; + flex-direction: column; + gap: 24px; + + @media (min-width: 960px) { + flex-direction: row; + justify-content: space-between; + align-items: center; + } +} + +.neonephos-logos { + display: flex; + justify-content: center; + align-items: center; + margin: 20px 0; +} + +.neonephos-link { + display: inline-flex; + align-items: center; + text-decoration: none; +} + +.neonephos-logo { + height: 60px; + width: auto; + opacity: 0.8; + transition: opacity 0.2s ease; +} + +.neonephos-link:hover .neonephos-logo { + opacity: 1; +} + +.neonephos-logo--light { + display: none; +} + +.neonephos-logo--dark { + display: inline; +} + +html[data-bs-theme="light"] .neonephos-logo--dark { + display: none; +} + +html[data-bs-theme="light"] .neonephos-logo--light { + display: inline; +} + +.footer-legal-links { + display: flex; + gap: 16px; + align-items: center; + justify-content: center; + font-size: 12px; + color: var(--lp-c-text-2); +} + +.footer-legal-links a { + color: var(--lp-c-text-2); + text-decoration: none; + transition: color 0.2s ease; +} + +.footer-legal-links a:hover { + color: var(--lp-c-brand-1); + text-decoration: underline; +} + +.footer-legal-sep { + color: var(--lp-c-text-3); + opacity: 0.5; +} + +@media (max-width: 649px) { + .footer-funding { + flex-direction: column; + gap: 24px; + width: 100%; + } + + .footer-funding__image { + align-self: flex-start; + } +} + +@media (min-width: 650px) and (max-width: 768px) { + .footer-funding { + flex-direction: row; + gap: 24px; + width: 100%; + flex-wrap: unset; + } + + .footer-funding__image img { + max-height: 200px; + } + + .footer-legal-links { + flex-wrap: wrap; + justify-content: center; + } + + .footer-legal-sep { + margin: 0 8px; + } +} + +@media (min-width: 769px) { + .footer-funding { + flex-direction: row; + gap: 24px; + width: auto; // Changed from 100% to auto to allow side-by-side + flex: 1; // Allow it to take available space + flex-wrap: wrap; + } + + .footer-funding__image { + align-self: flex-start; + } +} + +/* Light Theme Overrides */ +[data-bs-theme="light"] { + .lp-home { + .heading .name { + color: var(--lp-c-text-1); + } + + .heading .text, + .tagline { + color: var(--lp-c-text-2); + } + + .lp-features { + color: var(--lp-c-text-2); + } + + .lp-feature-card { + background: var(--lp-c-bg-elv); + + h3 { + color: var(--lp-c-text-2) + } + + &:hover { + background: var(--lp-c-bg-soft); + } + } + + .image .image-container, + .image .image-bg { + background: transparent; + } + + .actions .action a { + color: var(--lp-button-brand-text) !important; + } + } + + .footer--dark { + background: var(--lp-c-bg) !important; + color: var(--lp-c-text-2) !important; + border-top-color: var(--lp-c-divider); + } +} \ No newline at end of file diff --git a/assets/scss/common/_variables-custom.scss b/assets/scss/common/_variables-custom.scss index 56c9eb79e..9aafb78f5 100644 --- a/assets/scss/common/_variables-custom.scss +++ b/assets/scss/common/_variables-custom.scss @@ -1 +1,89 @@ -// Put your custom SCSS variables here +:root { + --lp-c-white: #ffffff; + --lp-c-black: #000000; + --lp-c-gray-1: #515c67; + --lp-c-gray-2: #414853; + --lp-c-gray-3: #32363f; + --lp-c-gray-soft: rgba(101, 117, 133, 0.16); + --lp-highlight-bg: #f3f38d; + --lp-highlight-text: #000000; + --lp-c-bg: #1b1b1f; + --lp-c-bg-alt: #161618; + --lp-c-bg-elv: #202127; + --lp-c-bg-soft: #202127; + --lp-c-border: #3c3f44; + --lp-c-divider: #2e2e32; + --lp-c-gutter: #000000; + --lp-c-text-1: #dfdfd6; + --lp-c-text-2: #98989f; + --lp-c-text-3: #6a6a71; + + /* Glassmorphism / Blur */ + --glass-bg: rgba(27, 27, 31, 0.8); + --glass-blur: blur(12px) saturate(140%); + --glass-border: var(--lp-c-border); + /* OCM Brand Colors (Canonical) */ + --brand-blue-dark: #257ddc; + /* Logo Dark */ + --brand-blue-mid: #1d65b4; + /* Logo Light/Mid */ + --brand-cyan: #4cc9f0; + /* Header Cyan */ + --brand-gradient: linear-gradient(to right, var(--brand-cyan), #4361ee); + + /* Mapping to LP Variables (Replacing Green with Blue) */ + --lp-c-green-1: var(--brand-blue-dark); + --lp-c-green-2: var(--brand-blue-mid); + --lp-c-green-3: var(--brand-cyan); + --lp-c-green-soft: rgba(59, 114, 199, 0.16); + /* Blue-ish soft bg */ + + --lp-c-brand-1: var(--lp-c-green-1); + --lp-c-brand-2: var(--lp-c-green-2); + --lp-c-brand-3: var(--lp-c-green-3); + --lp-c-brand-soft: var(--lp-c-green-soft); + + --lp-button-brand-bg: var(--brand-blue-mid); + --lp-button-brand-border: transparent; + --lp-button-brand-text: var(--lp-c-white); + --lp-button-brand-hover-bg: #1d65b4; + /* Slightly darker than mid blue */ + + --lp-button-alt-bg: var(--lp-c-gray-3); + --lp-button-alt-text: var(--lp-c-text-1); + --lp-button-alt-hover-bg: var(--lp-c-gray-2); + + --lp-home-hero-name-color: transparent; + --lp-home-hero-name-background: var(--brand-gradient); + --lp-home-hero-image-background-image: linear-gradient(-45deg, var(--brand-blue-dark) 50%, var(--brand-cyan) 50%); + --lp-home-hero-image-filter: blur(68px); + + --c-accent: var(--brand-cyan); + --shadow-md: 0 10px 30px rgba(4, 13, 18, 0.14); + --container: 1200px; + --nav-pad-x: 24px; + + /* Defaults for Dark Mode (ORD default) */ + --c-text-strong: #f4f7f8; +} + +[data-bs-theme="light"] { + --lp-c-bg: #ffffff; + --lp-c-bg-alt: #f9fbfc; + --lp-c-bg-elv: #f6f8f9; + --lp-c-bg-soft: #fbfbfc; + --lp-c-border: #e7ecef; + --lp-c-text-1: #0a0f12; + --lp-c-text-2: #1b242a; + --lp-c-text-3: #5a6a73; + --lp-c-divider: #e2e2de; + --c-accent: var(--brand-blue-mid); + --lp-button-brand-text: #ffffff; + --lp-button-brand-hover-bg: var(--brand-blue-dark); + --lp-button-alt-bg: #eef3f6; + --lp-button-alt-text: var(--lp-c-text-1); + --lp-button-alt-hover-bg: #e6edf3; + + /* Light Mode Overrides */ + --c-text-strong: #0a0f12; +} \ No newline at end of file diff --git a/config/_default/languages.toml b/config/_default/languages.toml index d25b6c750..accbd6354 100644 --- a/config/_default/languages.toml +++ b/config/_default/languages.toml @@ -5,22 +5,4 @@ [en.params] languageISO = "EN" languageTag = "en-US" - # Footer - footer = ''' -
-