/* ============================================================ KAELO GLOBAL — COMPONENTS & PRIMITIVES Layout primitives, buttons, motion and the preloader. Built strictly on the tokens defined in design-tokens.css. ============================================================ */ /* --- Layout primitives ------------------------------------- */ .k-container { max-width: var(--k-container); margin-inline: auto; padding-inline: var(--k-bleed); } .k-container--wide { max-width: var(--k-container-wide); margin-inline: auto; padding-inline: var(--k-bleed); } .k-container--text { max-width: 760px; margin-inline: auto; padding-inline: var(--k-bleed); } .k-section { padding-block: clamp(var(--k-space-5), 3rem + 6vw, var(--k-space-7)); } .k-section--tight { padding-block: clamp(var(--k-space-4), 2rem + 3vw, var(--k-space-6)); } /* The signature cyan hairline — a recurring brand mark */ .k-accent-line { display: block; width: 48px; height: 2px; background: var(--k-cyan); border: 0; } /* --- Buttons ----------------------------------------------- */ .k-btn { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--k-font-body); font-size: var(--k-text-sm); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; padding: 1.05em 1.9em; border: 1px solid currentColor; background: transparent; color: var(--k-ink); text-decoration: none; cursor: pointer; transition: background var(--k-dur-fast) var(--k-ease), color var(--k-dur-fast) var(--k-ease); } .k-btn:hover { background: var(--k-ink); color: var(--k-canvas); } .k-btn--cyan { background: var(--k-cyan); border-color: var(--k-cyan); color: var(--k-black); } .k-btn--cyan:hover { background: var(--k-cyan-deep); border-color: var(--k-cyan-deep); color: var(--k-black); } .k-dark .k-btn { color: var(--k-white); } .k-dark .k-btn:hover { background: var(--k-white); color: var(--k-black); } /* --- Motion: scroll reveal --------------------------------- No-flash pattern: content is visible by default. Only when JS confirms support (adds .k-js to ) does it hide-then-reveal. This keeps content visible to crawlers / no-JS users / slow nets. ------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { html.k-js [data-k-reveal] { opacity: 0; transform: translateY(28px); transition: opacity var(--k-dur-base) var(--k-ease), transform var(--k-dur-base) var(--k-ease); } html.k-js [data-k-reveal].is-visible { opacity: 1; transform: none; } /* staggered children — for grids and lists */ html.k-js [data-k-reveal-group] > * { opacity: 0; transform: translateY(28px); transition: opacity var(--k-dur-base) var(--k-ease), transform var(--k-dur-base) var(--k-ease); } html.k-js [data-k-reveal-group].is-visible > * { opacity: 1; transform: none; } html.k-js [data-k-reveal-group].is-visible > *:nth-child(2) { transition-delay: 0.08s; } html.k-js [data-k-reveal-group].is-visible > *:nth-child(3) { transition-delay: 0.16s; } html.k-js [data-k-reveal-group].is-visible > *:nth-child(4) { transition-delay: 0.24s; } html.k-js [data-k-reveal-group].is-visible > *:nth-child(5) { transition-delay: 0.32s; } html.k-js [data-k-reveal-group].is-visible > *:nth-child(6) { transition-delay: 0.40s; } } /* ============================================================ Sentinel theme contexts — used on any page that alternates light / dark sections. Loaded globally so it works outside the homepage too (division hubs, future templates). ============================================================ */ .k-label--cyan { color: var(--k-cyan); } [data-k-theme="dark"] { background: var(--k-black); color: var(--k-white); } [data-k-theme="dark"] h1, [data-k-theme="dark"] h2, [data-k-theme="dark"] h3, [data-k-theme="dark"] h4, [data-k-theme="dark"] p, [data-k-theme="dark"] dt, [data-k-theme="dark"] dd, [data-k-theme="dark"] li, [data-k-theme="dark"] span { color: var(--k-white); } [data-k-theme="dark"] .k-label { color: var(--k-white-60); } [data-k-theme="dark"] .k-label--cyan { color: var(--k-cyan); } [data-k-theme="dark"] a:not(.k-btn):not(.k-link) { color: var(--k-cyan); } [data-k-theme="dark"] a:not(.k-btn):not(.k-link):hover { color: var(--k-white); } [data-k-theme="dark"] .k-btn--cyan { color: var(--k-black); } [data-k-theme="dark"] .k-btn--cyan:hover { color: var(--k-black); } [data-k-theme="light"] { background: var(--k-canvas); color: var(--k-ink); } /* --- Preloader --------------------------------------------- */ html.k-loading { overflow: hidden; } #k-preloader { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: var(--k-black); transition: opacity var(--k-dur-slow) var(--k-ease), visibility 0s linear var(--k-dur-slow); } #k-preloader.is-done { opacity: 0; visibility: hidden; } #k-preloader .k-preloader__mark { width: clamp(120px, 18vw, 220px); opacity: 0; animation: k-preloader-in var(--k-dur-slow) var(--k-ease) 0.1s forwards; } @keyframes k-preloader-in { to { opacity: 1; } } /* ============================================================ SKIP-TO-CONTENT LINK WCAG 2.4.1. Hidden until keyboard focus. ============================================================ */ .k-skip-link { position: absolute; top: -100px; left: 1rem; z-index: 100000; padding: 0.75rem 1.25rem; background: var(--k-cyan); color: var(--k-black); font-family: var(--k-font-body); font-weight: 600; font-size: 0.875rem; text-decoration: none; border-radius: 0; transition: top 0.18s ease; } .k-skip-link:focus { top: 1rem; outline: 2px solid var(--k-black); outline-offset: 2px; } /* ============================================================ FOCUS-VISIBLE — keyboard navigation polish Applies a clear, brand-aligned focus ring to interactive elements only when the user is navigating with a keyboard. ============================================================ */ :focus-visible { outline: 2px solid var(--k-cyan); outline-offset: 3px; border-radius: 2px; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--k-cyan); outline-offset: 3px; } /* ============================================================ COOKIE CONSENT BANNER Pinned to bottom of viewport. Restrained, editorial. ============================================================ */ .k-consent { position: fixed; inset: auto 0 0 0; z-index: 9000; background: var(--k-black); color: var(--k-paper); border-top: 1px solid rgba(255, 255, 255, 0.08); transform: translateY(100%); transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1); box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.45); } .k-consent.is-open { transform: translateY(0); } .k-consent__inner { max-width: var(--k-container-wide); margin-inline: auto; padding: clamp(1.25rem, 0.5rem + 1.6vw, 2rem) var(--k-bleed); display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.25rem, 0.5rem + 1.6vw, 2.5rem); align-items: center; } .k-consent__label { font-family: var(--k-font-body); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--k-cyan); margin: 0 0 0.5rem; } .k-consent__lead { font-family: var(--k-font-body); font-size: 0.875rem; line-height: 1.55; color: rgba(255, 255, 255, 0.82); margin: 0 0 0.625rem; max-width: 58ch; } .k-consent__links { font-family: var(--k-font-body); font-size: 0.75rem; margin: 0; color: rgba(255, 255, 255, 0.55); } .k-consent__links a { color: rgba(255, 255, 255, 0.78); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.3); transition: color 0.15s ease, text-decoration-color 0.15s ease; } .k-consent__links a:hover { color: var(--k-cyan); text-decoration-color: var(--k-cyan); } .k-consent__links span { margin: 0 0.5rem; color: rgba(255, 255, 255, 0.3); } .k-consent__actions { display: flex; flex-wrap: wrap; gap: 0.625rem; justify-content: flex-end; } .k-consent__btn { font-family: var(--k-font-body); font-weight: 500; font-size: 0.8125rem; padding: 0.7rem 1.1rem; border-radius: 0; border: 1px solid transparent; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; letter-spacing: 0.01em; white-space: nowrap; } .k-consent__btn--ghost { background: transparent; color: rgba(255, 255, 255, 0.82); border-color: rgba(255, 255, 255, 0.22); } .k-consent__btn--ghost:hover { color: var(--k-paper); border-color: rgba(255, 255, 255, 0.5); } .k-consent__btn--solid { background: var(--k-cyan); color: var(--k-black); border-color: var(--k-cyan); } .k-consent__btn--solid:hover { background: #00d6e2; border-color: #00d6e2; } @media (max-width: 880px) { .k-consent__inner { grid-template-columns: 1fr; } .k-consent__actions { justify-content: stretch; } .k-consent__btn { flex: 1 1 auto; } } /* ============================================================ ACCESSIBILITY LAUNCHER + PANEL Floating button bottom-left, panel slides in from the left. ============================================================ */ .k-a11y-launcher { position: fixed; bottom: 1.25rem; left: 1.25rem; z-index: 8000; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.96); color: var(--k-ink); border: 1px solid rgba(10, 10, 10, 0.12); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; } .k-a11y-launcher:hover { transform: scale(1.05); background: var(--k-ink); color: var(--k-cyan); border-color: var(--k-ink); } .k-a11y-launcher svg { display: block; transition: transform 0.22s ease; } .k-a11y-launcher:hover svg { transform: scale(1.04); } .k-a11y-panel { position: fixed; bottom: 5.25rem; left: 1.25rem; z-index: 8001; width: min(320px, calc(100vw - 2.5rem)); background: var(--k-paper); color: var(--k-ink); border: 1px solid var(--k-line); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18); opacity: 0; transform: translateY(8px); transition: opacity 0.18s ease, transform 0.18s ease; } .k-a11y-panel.is-open { opacity: 1; transform: translateY(0); } .k-a11y-panel__head { position: relative; padding: 1.1rem 1.25rem 0.75rem; border-bottom: 1px solid var(--k-line); } .k-a11y-panel__eyebrow { font-family: var(--k-font-body); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--k-cyan-deep); margin: 0 0 0.25rem; } .k-a11y-panel__h { font-family: var(--k-font-heading); font-weight: 400; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; margin: 0; color: var(--k-ink); } .k-a11y-panel__close { position: absolute; top: 0.75rem; right: 0.75rem; width: 32px; height: 32px; background: transparent; border: 0; color: var(--k-ink-60); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: color 0.15s ease; } .k-a11y-panel__close:hover { color: var(--k-ink); } .k-a11y-panel__body { padding: 1.1rem 1.25rem 1.25rem; } .k-a11y-group { margin-bottom: 1rem; } .k-a11y-group:last-child { margin-bottom: 0; } .k-a11y-group__label { font-family: var(--k-font-body); font-weight: 500; font-size: 0.75rem; color: var(--k-ink); margin: 0 0 0.4rem; letter-spacing: 0.04em; } .k-a11y-group__row { display: flex; gap: 0.4rem; } .k-a11y-btn { flex: 1; font-family: var(--k-font-body); font-weight: 500; font-size: 0.8125rem; padding: 0.55rem 0.75rem; background: transparent; border: 1px solid var(--k-line); color: var(--k-ink); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; border-radius: 0; } .k-a11y-btn:hover { border-color: var(--k-ink); } .k-a11y-btn[aria-pressed="true"] { background: var(--k-ink); color: var(--k-paper); border-color: var(--k-ink); } .k-a11y-btn--lg { font-size: 1rem; } .k-a11y-reset { width: 100%; background: transparent; border: 0; border-top: 1px solid var(--k-line); padding: 0.75rem 0 0; margin-top: 0.5rem; text-align: left; font-family: var(--k-font-body); font-size: 0.75rem; color: var(--k-ink-60); cursor: pointer; transition: color 0.15s ease; } .k-a11y-reset:hover { color: var(--k-cyan-deep); } .k-a11y-panel__note { font-family: var(--k-font-body); font-size: 0.6875rem; color: var(--k-ink-60); margin: 1rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--k-line); line-height: 1.5; } .k-a11y-panel__note a { color: var(--k-cyan-deep); } /* ============================================================ A11Y PREFERENCE MODES — applied via attributes ============================================================ */ html[data-k-text="small"] body { font-size: 0.94em; } html[data-k-text="large"] body { font-size: 1.12em; } html[data-k-contrast="high"] { --k-ink: #000000; --k-ink-60: #1a1a1a; --k-ink-80: #0d0d0d; --k-paper: #ffffff; --k-line: #000000; --k-cyan-deep: #006975; } html[data-k-contrast="high"] body { background: #ffffff !important; } html[data-k-contrast="high"] a { text-decoration: underline; } html[data-k-motion="reduced"] *, html[data-k-motion="reduced"] *::before, html[data-k-motion="reduced"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Respect OS-level reduced-motion as a default */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }