/* * Zlix Public Architecture V1.4B * * Structural/component layer only. * Colors consume the existing --zlix-* branding contract. */ /* ---------------------------------------------------------- PRIMARY NAVIGATION ---------------------------------------------------------- */ .products-menu { width: 390px; } .resources-menu { width: 370px; } .dropdown-menu a.nav-subitem { margin-left: 10px; padding-left: 17px; border-left: 2px solid var(--zlix-border, var(--line)); border-radius: 0 12px 12px 0; } /* * Utility action rather than a normal site section. * Palette follows the current published/previewed theme. */ .nav > a.nav-portal-link { margin-left: 8px; border: 1px solid color-mix( in srgb, var(--zlix-on-dark, #ffffff) 42%, transparent ); background: color-mix( in srgb, var(--zlix-on-dark, #ffffff) 8%, transparent ); white-space: nowrap; justify-content: center; } .nav > a.nav-portal-link:hover, .nav > a.nav-portal-link:focus-visible { border-color: color-mix( in srgb, var(--zlix-on-dark, #ffffff) 68%, transparent ); } /* ---------------------------------------------------------- BREADCRUMBS ZLIX BREADCRUMB PRESENTATION V1.1 / V1.4W Universal page-location band. Breadcrumbs remain inside #pageContent so the existing AJAX content lifecycle carries them automatically. No page-specific positioning is required. ---------------------------------------------------------- */ .zlix-breadcrumb-band { position: relative; z-index: 2; width: 100%; margin: 0; padding: 12px 0 11px; background: color-mix( in srgb, var(--zlix-surface-soft, #f8fbfd) 72%, transparent ); border-bottom: 1px solid var( --zlix-border, rgba(24, 77, 117, .10) ); } .zlix-breadcrumb-shell { width: min(100% - 48px, var(--shell)); margin-inline: auto; } .page-breadcrumb { width: 100%; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 22px; font-size: .82rem; line-height: 1.35; color: var( --zlix-muted, var(--muted) ); } .page-breadcrumb a { color: var( --zlix-link, var(--blue-700) ); text-decoration: none; font-weight: 700; } .page-breadcrumb a:hover { color: var( --zlix-link-hover, var(--blue-900) ); text-decoration: underline; } .page-breadcrumb a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 3px; } .page-breadcrumb .zlix-breadcrumb-separator { color: var( --zlix-muted, var(--muted) ); opacity: .72; font-weight: 500; } .page-breadcrumb .zlix-breadcrumb-group { color: var( --zlix-muted, var(--muted) ); font-weight: 650; } .page-breadcrumb span[aria-current="page"] { color: var( --zlix-ink, var(--ink) ); font-weight: 750; } @media (max-width: 700px) { .zlix-breadcrumb-band { padding: 10px 0 9px; } .zlix-breadcrumb-shell { width: min( 100% - 28px, var(--shell) ); } .page-breadcrumb { gap: 5px 7px; min-height: 20px; font-size: .78rem; line-height: 1.4; } } /* ---------------------------------------------------------- PRODUCTS / RESOURCES ---------------------------------------------------------- */ .product-catalog-grid { align-items: stretch; } .product-catalog-card { display: flex; flex-direction: column; gap: 14px; background: var( --zlix-surface-soft, var(--zlix-panel, rgba(255,255,255,.82)) ); border-color: var(--zlix-border, var(--line)); box-shadow: var(--zlix-shadow-soft, var(--shadow-soft)); } .product-catalog-card .button-row { margin-top: auto; } .product-status { display: inline-flex; align-items: center; width: fit-content; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--zlix-border, var(--line)); background: color-mix( in srgb, var(--zlix-primary, var(--blue-700)) 8%, transparent ); color: var(--zlix-header, var(--blue-900)); font-size: .72rem; font-weight: 850; letter-spacing: .055em; text-transform: uppercase; } .product-status-development { background: color-mix( in srgb, var(--zlix-accent, var(--teal-700)) 8%, transparent ); } .resource-card { display: block; text-decoration: none; background: var( --zlix-surface-soft, var(--zlix-panel, rgba(255,255,255,.82)) ); border-color: var(--zlix-border, var(--line)); box-shadow: var(--zlix-shadow-soft, var(--shadow-soft)); } .resource-card:hover { border-color: var(--zlix-border-strong, var(--zlix-border, var(--line))); } .resource-card strong { display: inline-block; margin-top: 15px; color: var(--zlix-link, var(--blue-700)); } /* ---------------------------------------------------------- MOBILE NAVIGATION ---------------------------------------------------------- */ @media (max-width: 900px) { .products-menu, .resources-menu { width: 100%; min-width: 0; } .dropdown-menu a.nav-subitem { margin-left: 8px; padding-left: 15px; } .nav > a.nav-portal-link { width: 100%; box-sizing: border-box; margin: 8px 0 2px; justify-content: center; text-align: center; } } /* ========================================================== V1.4C - Products module access and dropdown dismissal ========================================================== */ /* * Keep direct module links visually subordinate to the Platform * and Platform Modules entries without introducing a nested flyout. */ .products-menu { width: 410px; } .dropdown-menu a.nav-module-item { margin-left: 20px; padding: 8px 12px 8px 20px; border-left: 2px solid var(--zlix-border, var(--line)); border-radius: 0 10px 10px 0; } .dropdown-menu a.nav-module-item strong { font-size: .88rem; } .dropdown-menu a.nav-module-item span { font-size: .74rem; } /* * A selected desktop dropdown should disappear immediately even * while the mouse remains over its previous position or the clicked * link would otherwise retain :focus-within. */ @media (min-width: 901px) { .dropdown.nav-click-closed > .dropdown-menu, .dropdown.nav-click-closed:hover > .dropdown-menu, .dropdown.nav-click-closed:focus-within > .dropdown-menu { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(-6px) !important; } } @media (max-width: 900px) { .products-menu { width: 100%; } .dropdown-menu a.nav-module-item { margin-left: 14px; padding: 9px 11px 9px 18px; } /* * Protect small-height devices if a Product group contains * more items than comfortably fit on screen. */ .nav { max-height: calc(100vh - 110px); overflow-y: auto; overscroll-behavior: contain; } } /* ================================================================== ZLIX PUBLIC NAVIGATION V1.4D Roll-down + module hierarchy normalization. Theme colors remain owned by the existing --zlix-* token system. ================================================================== */ /* ---------------------------------------------------------- PRODUCTS / MODULE GROUP ---------------------------------------------------------- */ .products-menu { width: 500px; } .nav-module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin: 2px 0 8px 12px; padding-left: 10px; border-left: 2px solid var(--zlix-border, var(--line)); } /* * Override the flat-link indentation from the partial V1.4C pass. */ .dropdown-menu .nav-module-grid .nav-module-item { margin-left: 0; padding: 9px 10px; border-left: 0; border-radius: 10px; } .dropdown-menu .nav-module-grid .nav-module-item strong { font-size: .86rem; } .dropdown-menu .nav-module-grid .nav-module-item span { font-size: .72rem; } /* ---------------------------------------------------------- DESKTOP DISMISSAL / MOTION ---------------------------------------------------------- */ .dropdown > a > span[aria-hidden="true"] { transition: transform 180ms ease; } @media (min-width: 901px) { .dropdown-menu { transform-origin: top center; } /* * Partial V1.4C already sets nav-click-closed after a destination * selection. These rules make that dismissal authoritative over * :hover and :focus-within. */ .dropdown.nav-click-closed > .dropdown-menu, .dropdown.nav-click-closed:hover > .dropdown-menu, .dropdown.nav-click-closed:focus-within > .dropdown-menu { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(-7px) !important; } } /* ---------------------------------------------------------- MOBILE ACCORDION / ROLL-DOWN ---------------------------------------------------------- */ @media (max-width: 900px) { #mainNav { max-height: calc(100vh - 108px); overflow-y: auto; overscroll-behavior: contain; } /* * Older CSS used display:none/display:grid, which cannot animate. * * Keep the dropdown rendered as a grid and animate max-height, * opacity and a very small vertical offset instead. */ #mainNav .dropdown > .dropdown-menu, #mainNav .dropdown:focus-within > .dropdown-menu { display: grid !important; max-height: 0 !important; overflow: hidden !important; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border-top-width: 0 !important; border-bottom-width: 0 !important; transition: max-height 180ms ease, opacity 140ms ease, transform 180ms ease, padding 180ms ease, margin 180ms ease, border-width 180ms ease, visibility 0s linear 180ms; } #mainNav .dropdown.open > .dropdown-menu, #mainNav .dropdown.open:focus-within > .dropdown-menu { max-height: 900px !important; opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); margin-bottom: 8px !important; padding-top: 10px !important; padding-bottom: 10px !important; border-top-width: 1px !important; border-bottom-width: 1px !important; transition: max-height 180ms ease, opacity 140ms ease, transform 180ms ease, padding 180ms ease, margin 180ms ease, border-width 180ms ease, visibility 0s; } #mainNav .dropdown.open > a > span[aria-hidden="true"] { transform: rotate(180deg); } .products-menu, .resources-menu { width: 100%; min-width: 0; } /* * Module group becomes a simple vertical list on touch devices. */ .nav-module-grid { grid-template-columns: 1fr; margin-left: 8px; padding-left: 8px; } } /* ---------------------------------------------------------- REDUCED MOTION ---------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { #mainNav .dropdown-menu, .dropdown > a > span[aria-hidden="true"] { transition: none !important; } } /* ================================================================== ZLIX PUBLIC NAVIGATION V1.4E Desktop hover bridge and controlled dropdown animation. ================================================================== */ @media (min-width: 901px) { /* * Existing dropdowns sit 12px below their trigger. * * This transparent bridge fills that gap so the pointer can move * from the top-level navigation item into the dropdown without * temporarily leaving the parent hover area. */ #mainNav .dropdown::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; z-index: 1; pointer-events: auto; } #mainNav .dropdown > .dropdown-menu { z-index: 2; opacity: 0; visibility: hidden; transform: translateY(-8px) scaleY(.985); transform-origin: top center; transition: opacity 150ms ease, transform 180ms ease, visibility 0s linear 180ms; } #mainNav .dropdown:hover > .dropdown-menu, #mainNav .dropdown:focus-within > .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0) scaleY(1); transition: opacity 150ms ease, transform 180ms ease, visibility 0s; } /* * Preserve immediate dismissal after selecting a destination. * This overrides hover/focus until the existing JS rearms the * dropdown after the pointer leaves. */ #mainNav .dropdown.nav-click-closed > .dropdown-menu, #mainNav .dropdown.nav-click-closed:hover > .dropdown-menu, #mainNav .dropdown.nav-click-closed:focus-within > .dropdown-menu { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(-8px) scaleY(.985) !important; transition: opacity 100ms ease, transform 120ms ease, visibility 0s linear 120ms !important; } } /* * Respect reduced-motion preferences. */ @media (prefers-reduced-motion: reduce) { #mainNav .dropdown > .dropdown-menu { transition: none !important; transform: none !important; } } /* ================================================================== ZLIX PUBLIC NAVIGATION V1.4F Desktop dropdown reveal polish. V1.4E's hover bridge remains authoritative. This layer only improves the visual opening/closing motion. ================================================================== */ @media (min-width: 901px) { /* * A clipped reveal produces an actual top-to-bottom opening effect * rather than simply shifting the entire dropdown by a few pixels. */ #mainNav .dropdown > .dropdown-menu { opacity: 0; visibility: hidden; clip-path: inset(0 0 100% 0 round 16px); transform: translateY(-4px); transform-origin: top center; transition: clip-path 240ms cubic-bezier(.2, .8, .2, 1), opacity 180ms ease, transform 240ms cubic-bezier(.2, .8, .2, 1), visibility 0s linear 240ms; } #mainNav .dropdown:hover > .dropdown-menu, #mainNav .dropdown:focus-within > .dropdown-menu { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0 round 16px); transform: translateY(0); transition: clip-path 240ms cubic-bezier(.2, .8, .2, 1), opacity 180ms ease, transform 240ms cubic-bezier(.2, .8, .2, 1), visibility 0s; } /* * Destination selection must still win over hover/focus. * The menu closes quickly and cannot remain over the AJAX result. */ #mainNav .dropdown.nav-click-closed > .dropdown-menu, #mainNav .dropdown.nav-click-closed:hover > .dropdown-menu, #mainNav .dropdown.nav-click-closed:focus-within > .dropdown-menu { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; clip-path: inset(0 0 100% 0 round 16px) !important; transform: translateY(-4px) !important; transition: clip-path 130ms ease, opacity 100ms ease, transform 130ms ease, visibility 0s linear 130ms !important; } } /* * Accessibility preference remains authoritative. */ @media (prefers-reduced-motion: reduce) { #mainNav .dropdown > .dropdown-menu { transition: none !important; transform: none !important; clip-path: none !important; } } /* ================================================================== ZLIX PUBLIC NAVIGATION V1.4G Final desktop dropdown roll-down behavior. Opening is intentionally noticeable but still quick. Closing remains substantially faster so navigation feels responsive. The desktop dropdown override also remains active when the browser reports reduced motion because the current Chrome/Linux environment reports that state even though desktop animations are enabled. Other site motion preferences remain unchanged. ================================================================== */ @media (min-width: 901px) { /* * CLOSED STATE * * clip-path creates the actual top-to-bottom reveal. * A very small vertical offset reinforces the motion without * making the menu appear to slide dramatically. */ #mainNav .dropdown > .dropdown-menu { opacity: 0 !important; visibility: hidden !important; clip-path: inset(0 0 100% 0 round 16px) !important; transform: translateY(-6px) !important; transform-origin: top center; transition: clip-path 400ms cubic-bezier(.22, 1, .36, 1), opacity 260ms ease, transform 400ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 400ms !important; } /* * OPEN STATE * * Approximately four-tenths of a second: * long enough to perceive the roll-down, short enough that * navigation still feels immediate. */ #mainNav .dropdown:hover > .dropdown-menu, #mainNav .dropdown:focus-within > .dropdown-menu { opacity: 1 !important; visibility: visible !important; clip-path: inset(0 0 0 0 round 16px) !important; transform: translateY(0) !important; transition: clip-path 400ms cubic-bezier(.22, 1, .36, 1), opacity 260ms ease, transform 400ms cubic-bezier(.22, 1, .36, 1), visibility 0s !important; } /* * DESTINATION SELECTED * * Close substantially faster than opening. This preserves the * responsive AJAX navigation behavior and prevents the old menu * from hanging over the newly rendered page. */ #mainNav .dropdown.nav-click-closed > .dropdown-menu, #mainNav .dropdown.nav-click-closed:hover > .dropdown-menu, #mainNav .dropdown.nav-click-closed:focus-within > .dropdown-menu { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; clip-path: inset(0 0 100% 0 round 16px) !important; transform: translateY(-4px) !important; transition: clip-path 140ms ease, opacity 100ms ease, transform 140ms ease, visibility 0s linear 140ms !important; } } /* * The current Chrome/Linux environment reports * prefers-reduced-motion: reduce even though desktop animations * are enabled. * * Keep the same restrained desktop-navigation animation for this * component only. Other site motion continues to follow the normal * reduced-motion rules. */ @media (min-width: 901px) and (prefers-reduced-motion: reduce) { #mainNav .dropdown > .dropdown-menu { opacity: 0 !important; visibility: hidden !important; clip-path: inset(0 0 100% 0 round 16px) !important; transform: translateY(-6px) !important; transition: clip-path 400ms cubic-bezier(.22, 1, .36, 1), opacity 260ms ease, transform 400ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 400ms !important; } #mainNav .dropdown:hover > .dropdown-menu, #mainNav .dropdown:focus-within > .dropdown-menu { opacity: 1 !important; visibility: visible !important; clip-path: inset(0 0 0 0 round 16px) !important; transform: translateY(0) !important; transition: clip-path 400ms cubic-bezier(.22, 1, .36, 1), opacity 260ms ease, transform 400ms cubic-bezier(.22, 1, .36, 1), visibility 0s !important; } #mainNav .dropdown.nav-click-closed > .dropdown-menu, #mainNav .dropdown.nav-click-closed:hover > .dropdown-menu, #mainNav .dropdown.nav-click-closed:focus-within > .dropdown-menu { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; clip-path: inset(0 0 100% 0 round 16px) !important; transform: translateY(-4px) !important; transition: clip-path 140ms ease, opacity 100ms ease, transform 140ms ease, visibility 0s linear 140ms !important; } } /* ================================================================== ZLIX PRODUCTS MENU V1.4N Product hierarchy, alignment and scalability. V1.4G owns desktop dropdown animation. V1.4J owns destination close and re-arm behavior. ================================================================== */ /* ---------------------------------------------------------- PLATFORM MODULE GROUP ---------------------------------------------------------- */ /* * One parent owns the hierarchy line. * This eliminates the offset caused by separate borders on the * Platform Modules overview and module grid. */ #mainNav .products-menu .nav-platform-module-group { margin: 3px 0 9px 10px; padding-left: 12px; border-left: 2px solid var(--zlix-border, var(--line)); } /* * Remove the old independent guide line and indentation from the * Platform Modules overview. */ #mainNav .products-menu .nav-platform-module-group > .nav-module-overview { margin-left: 0; padding-left: 4px; border-left: 0; border-radius: 10px; } /* * The module grid now uses the parent hierarchy line rather than * drawing a second line of its own. */ #mainNav .products-menu .nav-platform-module-group > .nav-module-grid { margin: 0; padding-left: 0; border-left: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; } /* * Override earlier flat module-link indentation. */ #mainNav .products-menu .nav-platform-module-group .nav-module-item { margin-left: 0; padding: 9px 8px; border-left: 0; border-radius: 10px; } /* ---------------------------------------------------------- STANDALONE PRODUCTS ---------------------------------------------------------- */ #mainNav .products-menu .nav-standalone-products-label { margin: 10px 10px 3px; padding: 11px 2px 2px; border-top: 1px solid var(--zlix-border, var(--line)); color: var(--zlix-muted, var(--muted)); font-size: .68rem; font-weight: 800; line-height: 1.2; letter-spacing: .11em; text-transform: uppercase; } #mainNav .products-menu .nav-standalone-product { margin-top: 0; } /* ---------------------------------------------------------- MOBILE ---------------------------------------------------------- */ @media (max-width: 900px) { /* * Keep the entire Products hierarchy inside the outer mobile * navigation scroll region rather than creating nested scrolling. */ #mainNav .products-menu .nav-platform-module-group { margin: 3px 0 8px 8px; padding-left: 8px; } #mainNav .products-menu .nav-platform-module-group > .nav-module-overview { margin-left: 0; padding-left: 3px; } /* * Module quick links become a straightforward vertical list. */ #mainNav .products-menu .nav-platform-module-group > .nav-module-grid { grid-template-columns: 1fr; gap: 1px; } #mainNav .products-menu .nav-platform-module-group .nav-module-item { padding: 9px 8px; } #mainNav .products-menu .nav-standalone-products-label { margin: 8px 8px 3px; padding-top: 10px; } /* * Give the Products accordion enough internal reveal height for * today's contents and reasonable portfolio expansion. * * The outer #mainNav remains responsible for viewport scrolling. */ #mainNav .dropdown.open > .products-menu, #mainNav .dropdown.open:focus-within > .products-menu { max-height: 1800px !important; } } /* ================================================================== ZLIX PRODUCTS MENU V1.4P Authoritative desktop Products-menu sizing policy. The primary navigation must not become an internally scrolling application panel. Future portfolio growth will be handled by curating the products shown here and using /products as the complete product catalog. ================================================================== */ @media (min-width: 901px) { #mainNav .products-menu { width: 500px; max-height: none !important; overflow: visible !important; overscroll-behavior: auto; } } /* ================================================================== ZLIX PLATFORM MODULES VISUAL V1.4X Platform Modules page only. - keeps future-capability icons in normal layout flow - reserves dedicated heading/icon space - prevents icon/text overlap - replaces lingering sage/green icon wells with Arctic Navy cool blue-gray wells - leaves module-page structure and responsive grids unchanged ================================================================== */ /* * Normalize every module-family icon well on this page. * * This intentionally targets the shared module-card-icon only within * the Platform Modules route so other site visuals are untouched. */ body.page-platform_modules #pageContent .module-card-icon { box-sizing: border-box !important; background: linear-gradient( 135deg, #f7fbfd 0%, #e6f1f8 100% ) !important; border: 1px solid rgba(47, 127, 160, .28) !important; box-shadow: 0 8px 20px rgba(15, 47, 82, .08) !important; } /* * Future-capability cards previously inherited icon positioning that * allowed the graphic well to intrude into the body-copy area. * * Make the header a real two-column layout and return the SVG to * normal document flow. */ body.page-platform_modules #pageContent .future-visual-card .visual-card-head { display: grid !important; grid-template-columns: minmax(0, 1fr) 48px !important; column-gap: 16px !important; align-items: start !important; min-height: 48px !important; } body.page-platform_modules #pageContent .future-visual-card .visual-card-head h3 { min-width: 0 !important; margin: 0 !important; padding: 0 !important; } /* * The future-card icon must participate in the header grid rather * than float or position itself above the paragraph. */ body.page-platform_modules #pageContent .future-visual-card .visual-card-head .module-card-icon { position: static !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; float: none !important; transform: none !important; display: block !important; width: 48px !important; height: 48px !important; min-width: 48px !important; max-width: 48px !important; margin: 0 !important; padding: 8px !important; justify-self: end !important; align-self: start !important; } /* * Body copy begins beneath the complete header row rather than * competing with the icon's footprint. */ body.page-platform_modules #pageContent .future-visual-card > p { position: relative !important; clear: both !important; margin-top: 14px !important; padding-right: 0 !important; max-width: none !important; } /* * Maintain the same geometry when the four-column section collapses. */ @media (max-width: 700px) { body.page-platform_modules #pageContent .future-visual-card .visual-card-head { grid-template-columns: minmax(0, 1fr) 46px !important; column-gap: 14px !important; min-height: 46px !important; } body.page-platform_modules #pageContent .future-visual-card .visual-card-head .module-card-icon { width: 46px !important; height: 46px !important; min-width: 46px !important; max-width: 46px !important; padding: 8px !important; } } /* ================================================================== ZLIX THEME-AWARE ACTION HIERARCHY V1.4AE Semantic public action hierarchy. PAGE PRIMARY .button-primary Uses the active theme's primary action color. CONTEXTUAL PRIMARY .button-contextual Uses the active theme's header/deeper color so contained actions remain strong without competing with the page-level action. SECONDARY .button-secondary Uses the active theme's light surface and primary/border tokens. All action roles share the same hover/focus interaction language. IMPORTANT: This system intentionally does NOT depend on data-theme="arctic-navy". It consumes the existing --zlix-* theme contract so future published themes can inherit the same hierarchy automatically. ================================================================== */ /* ---------------------------------------------------------- SHARED BUTTON INTERACTION ---------------------------------------------------------- */ #pageContent .button { transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease; } /* ---------------------------------------------------------- PAGE-LEVEL PRIMARY Explicit .button-primary is preferred. Bare .button remains primary for compatibility with existing public pages that have not yet been semantically classified. ---------------------------------------------------------- */ #pageContent .button.button-primary, #pageContent .button:not(.button-primary):not(.button-contextual):not(.button-secondary):not(.button-light) { background: var( --zlix-primary, #176fb2 ) !important; border-color: var( --zlix-primary, #176fb2 ) !important; color: #ffffff !important; box-shadow: var( --zlix-shadow-soft, 0 10px 24px rgba(15, 45, 73, .14) ) !important; } #pageContent .button.button-primary:hover, #pageContent .button:not(.button-primary):not(.button-contextual):not(.button-secondary):not(.button-light):hover { background: var( --zlix-primary-hover, color-mix( in srgb, var(--zlix-primary, #176fb2) 78%, var(--zlix-header, #123a5a) ) ) !important; border-color: var( --zlix-primary-hover, color-mix( in srgb, var(--zlix-primary, #176fb2) 78%, var(--zlix-header, #123a5a) ) ) !important; color: #ffffff !important; } /* ---------------------------------------------------------- CONTEXTUAL PRIMARY Examples: - carousel module action - Platform Overview in a concluding CTA - future primary action inside a product/card component ---------------------------------------------------------- */ #pageContent .button.button-contextual { background: var( --zlix-header, #123a5a ) !important; border-color: var( --zlix-header, #123a5a ) !important; color: #ffffff !important; box-shadow: var( --zlix-shadow-soft, 0 10px 24px rgba(15, 45, 73, .14) ) !important; } #pageContent .button.button-contextual:hover { background: var( --zlix-header-2, var( --zlix-primary-hover, #0d6f9f ) ) !important; border-color: var( --zlix-header-2, var( --zlix-primary-hover, #0d6f9f ) ) !important; color: #ffffff !important; } /* ---------------------------------------------------------- SECONDARY Clearly interactive at rest, but intentionally subordinate to primary and contextual-primary actions. ---------------------------------------------------------- */ #pageContent .button.button-secondary { background: color-mix( in srgb, var(--zlix-surface, #ffffff) 82%, transparent ) !important; border: 1.5px solid color-mix( in srgb, var(--zlix-primary, #176fb2) 44%, var(--zlix-border, #bdd0da) ) !important; color: var( --zlix-text, var( --zlix-text-strong, var(--zlix-body, #243847) ) ) !important; box-shadow: none !important; } #pageContent .button.button-secondary:hover { background: color-mix( in srgb, var(--zlix-primary, #176fb2) 10%, var(--zlix-surface, #ffffff) ) !important; border-color: color-mix( in srgb, var(--zlix-primary, #176fb2) 68%, var(--zlix-border, #bdd0da) ) !important; color: var( --zlix-text, var( --zlix-text-strong, var(--zlix-body, #243847) ) ) !important; } /* ---------------------------------------------------------- COMMON POINTER FEEDBACK Every normal public .button gets the same interaction halo and one-pixel lift. Color hierarchy remains independent. ---------------------------------------------------------- */ #pageContent .button:hover { transform: translateY(-1px) !important; /* * V1.4AF shared pointer halo. * * Outline is intentionally separate from box-shadow so card, * CTA, product and module component shadow rules cannot suppress * the visible interaction boundary. */ outline: 3px solid color-mix( in srgb, var(--zlix-primary, #176fb2) 34%, transparent ) !important; outline-offset: 3px !important; box-shadow: 0 0 0 4px color-mix( in srgb, var(--zlix-primary, #176fb2) 24%, transparent ), 0 12px 28px color-mix( in srgb, var(--zlix-primary, #176fb2) 24%, transparent ) !important; } /* ---------------------------------------------------------- KEYBOARD FOCUS Same visual language, deliberately slightly stronger. ---------------------------------------------------------- */ #pageContent .button:focus-visible { outline: 3px solid color-mix( in srgb, var(--zlix-primary, #176fb2) 38%, transparent ) !important; outline-offset: 3px !important; box-shadow: 0 0 0 4px color-mix( in srgb, var(--zlix-primary, #176fb2) 20%, transparent ), 0 12px 28px color-mix( in srgb, var(--zlix-primary, #176fb2) 22%, transparent ) !important; } /* ================================================================== ZLIX PUBLIC BUTTON HALO V1.4AF V1.4AE shared pointer feedback now includes a theme-derived outline halo in addition to its shared shadow and one-pixel lift. The outline prevents component-specific box-shadow rules from hiding public button hover feedback. No action colors or semantic button roles changed. ================================================================== */ /* ================================================================== ZLIX GLOBAL SURFACE ELEVATION V1.4AG Shared public-site surface cleanup. Goals: - structural .section wrappers remain visually transparent - rounded page heroes retain depth without a rectangular haze - cards retain restrained elevation without oversized shadow plates - interactive cards may gain slightly more depth on pointer hover - button interaction/focus treatment remains owned by V1.4AF ================================================================== */ /* * Standard top-level .section elements are layout wrappers, not * independent visual panels. Keep their backgrounds and shadows out * of the surface hierarchy. */ html[data-theme="arctic-navy"] #pageContent > section.section { background: transparent !important; background-image: none !important; box-shadow: none !important; } /* * Page heroes are intentionally elevated rounded surfaces. * * Keep a small amount of depth, but tighten the shadow so it follows * the rounded panel visually instead of producing a broad pale shelf * underneath it. */ html[data-theme="arctic-navy"] #pageContent .page-hero { box-shadow: 0 8px 20px rgba(8, 19, 35, .055) !important; } /* * Shared light card surfaces. * * This intentionally replaces older Arctic Navy 18x38 and runtime * 22x52 shadows with a quieter common elevation. */ html[data-theme="arctic-navy"] #pageContent .card, html[data-theme="arctic-navy"] #pageContent .content-card, html[data-theme="arctic-navy"] #pageContent .contact-card, html[data-theme="arctic-navy"] #pageContent .product-card, html[data-theme="arctic-navy"] #pageContent .product-catalog-card, html[data-theme="arctic-navy"] #pageContent .resource-card, html[data-theme="arctic-navy"] #pageContent .module-card, html[data-theme="arctic-navy"] #pageContent .module-aside { box-shadow: 0 7px 18px rgba(8, 19, 35, .050) !important; } /* * Interactive cards can still rise slightly on devices that genuinely * support hover. The shadow remains intentionally restrained. */ @media (hover: hover) and (pointer: fine) { html[data-theme="arctic-navy"] #pageContent .module-card:hover, html[data-theme="arctic-navy"] #pageContent .product-card:hover, html[data-theme="arctic-navy"] #pageContent .product-catalog-card:hover, html[data-theme="arctic-navy"] #pageContent .resource-card:hover { box-shadow: 0 11px 26px rgba(8, 19, 35, .080) !important; } } /* ================================================================== ZLIX HOME CAROUSEL SURFACE V1.4AH The Home carousel already contains its own clipping boundary. On small screens an older containment rule applies overflow:hidden to .hero-module-wrap. That clips the carousel's outer shadow to the rectangular wrapper boundary and can create a visible square-edged haze beneath the rounded carousel. Keep the outer wrapper visually transparent and allow the carousel elevation to render naturally. The carousel itself retains overflow:hidden so slides remain fully contained. ================================================================== */ /* Outer Home carousel wrapper is structural only. */ body.page-home #pageContent .hero-module-wrap { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; filter: none !important; /* * Important: * override the old mobile containment rule that sets * overflow:hidden on this wrapper. */ overflow: visible !important; } /* * The actual carousel owns the rounded clipping boundary. * Keep slide containment here. */ body.page-home #pageContent .hero-module-wrap .module-carousel.hero-carousel { overflow: hidden !important; /* * Bring the carousel into the same restrained elevation family * established by V1.4AG. */ box-shadow: 0 8px 20px rgba(8, 19, 35, .060) !important; } /* * Defensive cleanup: the structural wrapper should not contribute * decorative surfaces of its own. */ body.page-home #pageContent .hero-module-wrap::before, body.page-home #pageContent .hero-module-wrap::after { content: none !important; display: none !important; background: none !important; box-shadow: none !important; } /* ================================================================== ZLIX FOOTER AUTHORITATIVE TIME V1.4AI Operations-style footer clock. Time source: Zlix server system clock synchronized through NTP/chrony. Browser contribution: timezone configuration only. Desktop: UTC 01:35 · Sep 11, 2026 | LOCAL 19:35 MDT · Sep 10, 2026 Mobile: UTC 01:35 · LOCAL 19:35 ================================================================== */ .footer-bottom { align-items: center !important; justify-content: flex-start !important; flex-wrap: wrap !important; } .footer-authoritative-clock { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; color: var( --zlix-on-dark-soft, #cfe5ef ); font-size: .79rem; line-height: 1.3; letter-spacing: .01em; white-space: nowrap; opacity: 0; transition: opacity .16s ease; } .footer-authoritative-clock.is-ready { opacity: .90; } .footer-authoritative-clock-icon { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; flex: 0 0 25px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(255, 255, 255, .045); color: var( --zlix-on-dark-soft, #cfe5ef ); } .footer-authoritative-clock-icon svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .footer-clock-desktop, .footer-clock-mobile { align-items: baseline; gap: 5px; } .footer-clock-desktop { display: inline-flex; } .footer-clock-mobile { display: none; } .footer-authoritative-clock strong { color: var( --zlix-on-dark, #ffffff ); font-size: .72rem; font-weight: 800; letter-spacing: .07em; } .footer-authoritative-clock time { color: var( --zlix-on-dark, #ffffff ); font-variant-numeric: tabular-nums; } .footer-clock-divider { margin-inline: 5px; color: rgba(255, 255, 255, .30); } .footer-clock-dot { color: rgba(255, 255, 255, .38); } /* * Switch to the compact clock before horizontal footer space * becomes constrained. Mobile remains a single short line. */ @media (max-width: 1050px) { .footer-clock-desktop { display: none; } .footer-clock-mobile { display: inline-flex; } } @media (max-width: 900px) { .footer-bottom { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 5px !important; } .footer-authoritative-clock { order: -1; margin: 0 0 10px 0; } } @media (max-width: 420px) { .footer-authoritative-clock { gap: 7px; font-size: .77rem; } .footer-authoritative-clock-icon { width: 23px; height: 23px; flex-basis: 23px; } .footer-authoritative-clock-icon svg { width: 13px; height: 13px; } .footer-authoritative-clock strong { font-size: .69rem; } }