/* ========================================================================= xilyxis.com — page-level composition. Loads AFTER the vendored Xilyxis Design System (colors_and_type.css, components.css). Everything here composes DS primitives and consumes --xlx-* tokens only: no raw color, radius, shadow, or duration literals. ========================================================================= */ /* The page canvas is painted on , not : body carries the .xlx wrapper class, and the design system sets .xlx { background: transparent } so its tokens never paint over a host page. Colouring here would lose to that class on specificity and leave the canvas transparent (white). */ html { background-color: var(--xlx-bg); scroll-behavior: smooth; /* Sticky glass header must not cover an anchored section heading. Taller on small screens, where the nav wraps to a second row. */ scroll-padding-top: 8rem; } @media (min-width: 640px) { html { scroll-padding-top: 5rem; } } body { margin: 0; min-height: 100vh; color: var(--xlx-fg-2); } /* Buttons rendered as anchors: .xlx a sets the link colour and outranks the .xlx-btn-* variant on specificity, which would paint brand-on-brand. */ .xlx a.xlx-btn-primary { color: var(--xlx-brand-ink); } .xlx a.xlx-btn-primary:hover { color: var(--xlx-brand-ink); } .xlx a.xlx-btn-secondary { color: var(--xlx-brand); } .xlx a.xlx-btn-secondary:hover { color: var(--xlx-brand-ink); } .xlx a.xlx-btn-glass { color: var(--xlx-fg); } /* --------------------------- Skip link ---------------------------------- */ .site-skip-link { position: absolute; left: var(--xlx-space-4); top: var(--xlx-space-4); z-index: 100; padding: var(--xlx-space-2) var(--xlx-space-4); border-radius: var(--xlx-radius-md); background-color: var(--xlx-brand); color: var(--xlx-brand-ink); font-weight: 600; transform: translateY(-200%); } .site-skip-link:focus-visible { transform: translateY(0); outline: none; box-shadow: var(--xlx-ring); } /* ----------------------------- Header ----------------------------------- */ /* Below 640px the three links wrap to their own row under the brand rather than competing with it for width; a hamburger would be overhead for a three-anchor single-page nav. */ @media (max-width: 639px) { .xlx-header-inner { height: auto; flex-wrap: wrap; row-gap: var(--xlx-space-2); padding: var(--xlx-space-3) var(--xlx-space-4); } } .site-brand { font-size: var(--xlx-text-lg); font-weight: 800; letter-spacing: var(--xlx-tracking-wide); color: var(--xlx-fg); } .site-brand:hover { color: var(--xlx-brand); } @media (min-width: 640px) { .site-brand { font-size: var(--xlx-text-xl); } } /* Three anchor links carry the whole site, so they stay visible at every width rather than collapsing into a menu — they simply tighten up on small screens. */ .site-nav { display: flex; order: 3; flex-basis: 100%; justify-content: center; gap: var(--xlx-space-6); font-size: var(--xlx-text-sm); } @media (min-width: 640px) { .site-nav { order: 0; flex-basis: auto; gap: var(--xlx-space-8); font-size: var(--xlx-text-base); } } .site-theme-toggle { gap: var(--xlx-space-2); } .site-theme-toggle-text { display: none; } @media (min-width: 640px) { .site-theme-toggle-text { display: inline; } } /* One icon per theme: sun offers light, moon offers dark. */ .site-icon-sun { display: none; } .site-icon-moon { display: inline-block; } [data-theme="light"] .site-icon-sun { display: inline-block; } [data-theme="light"] .site-icon-moon { display: none; } .site-icon { flex-shrink: 0; } /* ------------------------------ Hero ------------------------------------ */ .site-hero { display: flex; align-items: center; min-height: calc(100vh - 4rem); padding: var(--xlx-space-20) 0; } .site-hero-inner { text-align: center; } .site-hero-inner .eyebrow { display: block; margin-bottom: var(--xlx-space-4); } .site-hero-inner .lead { max-width: 42rem; margin: 0 auto var(--xlx-space-8) auto; } .site-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--xlx-space-4); } /* ---------------------------- Sections ---------------------------------- */ .site-section { padding: var(--xlx-space-20) 0; } .site-section-head { text-align: center; max-width: 42rem; margin: 0 auto var(--xlx-space-12) auto; } .site-section-head p { color: var(--xlx-fg-muted); margin-bottom: 0; } .site-panel { padding: var(--xlx-space-8); } @media (min-width: 768px) { .site-panel { padding: var(--xlx-space-12); } } .site-panel > p:last-of-type { margin-bottom: 0; } /* ---------------------------- Product grid ------------------------------ */ .site-grid { display: grid; grid-template-columns: 1fr; gap: var(--xlx-space-6); } @media (min-width: 640px) { .site-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .site-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .site-product-card { display: flex; flex-direction: column; padding: var(--xlx-space-6); color: inherit; } .site-product-card:hover { color: inherit; } .site-product-card p { color: var(--xlx-fg-muted); flex-grow: 1; } /* Upcoming products are not links; suppress the DS card lift affordance. */ .site-product-card.is-upcoming:hover { transform: none; box-shadow: var(--xlx-shadow-md); } .site-product-head { display: flex; align-items: center; justify-content: space-between; gap: var(--xlx-space-3); margin-bottom: var(--xlx-space-5); } .site-product-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--xlx-radius-md); background-color: var(--xlx-surface-muted); border: 1px solid var(--xlx-border-subtle); color: var(--xlx-brand); } .site-card-link { display: inline-flex; align-items: center; gap: var(--xlx-space-2); margin-top: var(--xlx-space-5); font-size: var(--xlx-text-sm); font-weight: 600; color: var(--xlx-brand); } .site-card-link.is-muted { color: var(--xlx-fg-subtle); font-weight: 500; } .site-product-card:hover .site-card-link:not(.is-muted) { color: var(--xlx-brand-light); } /* ------------------------------ Values ---------------------------------- */ .site-values { display: grid; grid-template-columns: 1fr; gap: var(--xlx-space-4); margin-top: var(--xlx-space-8); } @media (min-width: 768px) { .site-values { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .site-values p { margin-bottom: 0; } /* ----------------------------- Contact ---------------------------------- */ .site-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--xlx-space-6); } .site-contact-list li { display: flex; align-items: flex-start; gap: var(--xlx-space-4); } .site-contact-list h4 { margin-bottom: var(--xlx-space-1); } .site-contact-list p, .site-contact-list address { margin: 0; font-style: normal; color: var(--xlx-fg-2); } .site-contact-icon { display: inline-flex; flex-shrink: 0; color: var(--xlx-brand); padding-top: var(--xlx-space-1); } /* ------------------------------ Footer ---------------------------------- */ .site-footer { border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; padding: var(--xlx-space-12) 0 var(--xlx-space-6) 0; margin-top: var(--xlx-space-12); } .site-footer-inner { display: flex; flex-direction: column; gap: var(--xlx-space-6); justify-content: space-between; } @media (min-width: 768px) { .site-footer-inner { flex-direction: row; align-items: flex-start; } } .site-footer-brand { font-size: var(--xlx-text-lg); font-weight: 800; letter-spacing: var(--xlx-tracking-wide); color: var(--xlx-fg); margin-bottom: var(--xlx-space-1); } .site-footer-inner .small { margin: 0; } .site-footer-nav { display: flex; flex-wrap: wrap; gap: var(--xlx-space-6); } .site-footer-nav a { color: var(--xlx-fg-muted); } .site-footer-nav a:hover { color: var(--xlx-fg); } .site-footer-legal { margin-top: var(--xlx-space-8); padding-top: var(--xlx-space-6); border-top: 1px solid var(--xlx-glass-border); } .site-footer-legal p { margin: 0; } /* --------------------------- Reduced motion ------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .xlx-card:hover { transform: none; } }