/* ========================================================================== KILLIX theme — tokens + components Ported 1:1 from the approved prototype (KILLIX-Redesign.dc.html). - Dark/Light is driven by . Only colours, borders and shadows change between themes; no dimension ever does. - Logical properties (inset-inline-*, border-inline-*) mirror everything for Arabic RTL. Where the prototype used a physical side deliberately, it is kept physical. - Mobile-first. Single layout switch at 1024px (see DIFFERENCES.md). ========================================================================== */ /* ------------------------------------------------------------------------- 1. Tokens ---------------------------------------------------------------------- */ :root { --accent: #D6A756; --ease: cubic-bezier(.16, .84, .44, 1); --font-head: 'Space Grotesk', 'Alexandria', sans-serif; --font-body: 'Manrope', 'Alexandria', sans-serif; --font-nav: 'Space Grotesk', 'Alexandria', sans-serif; --font-label: 'Space Grotesk', 'Alexandria', sans-serif; /* Header glass (admin sliders override these via inline style) */ --kx-glass-a-dark: .62; --kx-glass-a-light: .66; --kx-glass-blur: 20px; --head-gap: 26px; } /* Arabic: Alexandria for every role. */ :root[dir="rtl"] { --font-head: 'Alexandria', sans-serif; --font-body: 'Alexandria', sans-serif; --font-nav: 'Alexandria', sans-serif; } /* Per-language typography overrides (Theme Options → Typography). Unset by default — only emitted inline when an admin picks a non-default value. */ html { font-size: calc(100% * var(--kx-type-scale, 1)); } body { letter-spacing: var(--kx-letter-spacing, normal); } p, .kx-hero__desc, .kx-cta__desc, .kx-footer__desc, .kx-flow__desc, .kx-chapter__desc { line-height: var(--kx-line-height, inherit); } :root[dir="rtl"] .kx-hero__title, :root[dir="rtl"] .kx-hero__desc, :root[dir="rtl"] .kx-h2, :root[dir="rtl"] .kx-cta__title, :root[dir="rtl"] .kx-cta__desc { text-align: var(--kx-text-align, right); } /* Theme-switcher desktop/mobile visibility (Theme Options → Dark / Light). */ @media (max-width: 767px) { .kx-switch--hide-mobile { display: none !important; } } @media (min-width: 768px) { .kx-switch--hide-desktop { display: none !important; } } /* ---- Dark (default) ---- */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: #090A0C; --surface: #12130f; --surface-2: #0d0e10; --ink: #F4EFE7; --ink-rgb: 244, 239, 231; --overlay-rgb: 9, 10, 12; --accent-ink: #D6A756; --border-rgb: 231, 226, 219; /* alpha scale (used as rgba(var(--ink-rgb), var(--iaNN))) */ --ia0035: .035; --ia004: .04; --ia005: .05; --ia006: .06; --ia008: .08; --ia01: .1; --ia012: .12; --ia014: .14; --ia018: .18; --ia02: .2; --ia025: .25; --ia03: .3; --ia035: .35; --ia04: .4; --ia045: .45; --ia05: .5; --ia055: .55; --ia058: .58; --ia06: .6; --ia062: .62; --ia065: .65; --ia068: .68; --ia07: .7; --ia072: .72; /* inkMuted(a) */ --im18: rgba(244, 239, 231, .18); --im22: rgba(244, 239, 231, .22); --im4: rgba(244, 239, 231, .4); --im5: rgba(244, 239, 231, .5); --im55: rgba(244, 239, 231, .55); --gold-fill: linear-gradient(135deg, #D6A756, #F4EFE7); --silver-fill: linear-gradient(135deg, #8b8b86, #5f5f5a); --glass-bg: rgba(16, 17, 15, var(--kx-glass-a-dark)); --glass-border: rgba(214, 167, 86, .16); --glass-shadow: 0 14px 32px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(244, 239, 231, .06); } /* ---- Light ---- (alpha values are BOOSTED: black-on-ivory needs more alpha than ivory-on-black to read as equally "muted"). */ :root[data-theme="light"] { color-scheme: light; --bg: #F4EFE7; --surface: #EAE4D9; --surface-2: #E7E2DB; --ink: #090A0C; --ink-rgb: 9, 10, 12; --overlay-rgb: 244, 239, 231; --accent-ink: #8a6423; --border-rgb: 9, 10, 12; --ia0035: .12; --ia004: .12; --ia005: .14; --ia006: .16; --ia008: .18; --ia01: .2; --ia012: .22; --ia014: .24; --ia018: .28; --ia02: .3; --ia025: .35; --ia03: .42; --ia035: .48; --ia04: .62; --ia045: .66; --ia05: .7; --ia055: .74; --ia058: .76; --ia06: .78; --ia062: .8; --ia065: .82; --ia068: .84; --ia07: .86; --ia072: .88; --im18: rgba(9, 10, 12, .46); --im22: rgba(9, 10, 12, .5); --im4: rgba(9, 10, 12, .68); --im5: rgba(9, 10, 12, .78); --im55: rgba(9, 10, 12, .83); --gold-fill: linear-gradient(135deg, #D6A756, #7a5a22); --silver-fill: linear-gradient(135deg, #6b6b66, #454540); --glass-bg: rgba(244, 239, 231, var(--kx-glass-a-light)); --glass-border: rgba(9, 10, 12, .1); --glass-shadow: 0 14px 32px rgba(9, 10, 12, .12), inset 0 1px 0 rgba(255, 255, 255, .5); } /* ------------------------------------------------------------------------- 2. Base ---------------------------------------------------------------------- */ body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); transition: background .3s ease, color .3s ease; } .kx-site { background: var(--bg); min-height: 100vh; color: var(--ink); font-family: var(--font-body); overflow-x: clip; transition: background .3s ease, color .3s ease; } [hidden] { display: none !important; } .kx-site a { color: inherit; } .kx-site button { font-family: inherit; } .kx-site :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .kx-site .kx-desktop-only { display: none; } /* ------------------------------------------------------------------------- 3. Keyframes ---------------------------------------------------------------------- */ @keyframes killixFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(1.2deg); } } @keyframes killixGlow { 0%, 100% { opacity: .3; } 50% { opacity: .55; } } @keyframes menuPanelIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes logoSweep { 0% { transform: translateX(-140%) skewX(-16deg); opacity: 0; } 12% { opacity: .9; } 55% { opacity: .9; } 100% { transform: translateX(220%) skewX(-16deg); opacity: 0; } } @keyframes heroRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes kReveal { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: scale(1); } } @keyframes kxRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ------------------------------------------------------------------------- 4. Scroll reveal (IntersectionObserver adds .is-revealed once) Content is only hidden when JS is running AND reveal is enabled AND the visitor has not asked for reduced motion (html.kx-reveal-on). ---------------------------------------------------------------------- */ .kx-reveal-on .kx-reveal { opacity: 0; transform: translateY(calc(24px * var(--kx-reveal-intensity, 1))); transition: opacity calc(.7s * var(--kx-reveal-mult, 1)) ease, transform calc(.7s * var(--kx-reveal-mult, 1)) ease; } .kx-reveal-on .kx-reveal.is-revealed { opacity: 1; transform: none; } .kx-reveal-on .kx-stagger > * { opacity: 0; } .kx-reveal-on .is-revealed .kx-stagger > * { opacity: 1; animation: kxRise calc(.6s * var(--kx-reveal-mult, 1)) ease calc(var(--i, 0) * var(--step, .1s)) backwards; } /* ------------------------------------------------------------------------- 5. Header (glass) ---------------------------------------------------------------------- */ .kx-header-wrap { padding: 10px 10px 0; transition: transform .35s ease; } .kx-header-wrap--sticky-glass, .kx-header-wrap--hide-reveal { position: sticky; top: 0; z-index: 30; } .kx-header-wrap.is-hidden { transform: translateY(-140%); } .admin-bar .kx-header-wrap--sticky-glass, .admin-bar .kx-header-wrap--hide-reveal { top: var(--wp-admin--admin-bar--height, 32px); } .kx-header { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--kx-glass-blur)); backdrop-filter: blur(var(--kx-glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--kx-header-radius, 14px); box-shadow: var(--glass-shadow); transition: padding .3s ease, background .3s ease; } .kx-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: var(--kx-header-pad-y, 10px) 16px; transition: padding .3s ease; } .kx-header__tools { display: flex; align-items: center; gap: 12px; } /* Logo */ .kx-logo { position: relative; display: block; overflow: hidden; line-height: 0; text-decoration: none; flex-shrink: 0; } .kx-logo__img { display: block; height: calc(40px * var(--kx-logo-scale, 1)); width: auto; max-width: none; object-fit: contain; } .kx-logo__img--light { display: none; } /* Dark backing chip behind logos designed for dark backgrounds (Light mode). PHP decides per logo (Auto / Always / Never) and adds .kx-logo--chip. */ :root[data-theme="light"] .kx-logo--chip { background: #090A0C; border-radius: 8px; } :root[data-theme="light"] .has-light-logo .kx-logo__img--light { display: block; } :root[data-theme="light"] .has-light-logo .kx-logo__img--dark { display: none; } /* Theme-aware images: when a visual has a separate Light and/or Dark asset, both s are in the markup and only the one matching the site's Dark/Light state (the same `data-theme` the logo and every colour token follow) shows. Swapping is pure CSS, so Visitor Choice switches update instantly. */ :root[data-theme="light"] .kx-themed--dark { display: none !important; } :root:not([data-theme="light"]) .kx-themed--light { display: none !important; } .kx-logo__sweep { position: absolute; top: 0; inset-inline-start: 0; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(var(--ink-rgb), var(--ia055)), transparent); animation: logoSweep 1.8s ease-out .5s 1 both; pointer-events: none; } /* Desktop nav */ .kx-nav__list { display: flex; align-items: center; gap: var(--kx-nav-gap, 26px); list-style: none; margin: 0; padding: 0; } .kx-nav__list a { color: var(--ink); text-decoration: none; font-size: var(--kx-nav-fs, 13.5px); font-weight: 500; letter-spacing: .01em; font-family: var(--font-nav); opacity: .85; transition: color .3s ease, opacity .3s ease; } .kx-nav__list a:hover, .kx-nav__list .current-menu-item > a { color: var(--accent-ink); opacity: 1; } /* Language switch (header) */ .kx-lang { color: rgba(var(--ink-rgb), var(--ia06)); font-size: 12.5px; font-family: var(--font-label); letter-spacing: .05em; text-decoration: none; background: none; border: 0; } .kx-lang:hover { color: var(--accent-ink); } /* Buttons */ .kx-btn { display: inline-block; text-decoration: none; font-family: var(--font-buttons, var(--font-nav)); cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s ease, border-color .35s var(--ease); } .kx-btn--header { background: var(--accent); color: #090A0C !important; font-size: 12.5px; font-weight: 600; padding: 9px 16px; border-radius: 7px; white-space: nowrap; } .kx-btn--header:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(214, 167, 86, .4); background: #e0b466; } .kx-btn--primary { background: var(--accent); color: #090A0C !important; font-weight: 600; font-size: 15px; padding: 14px 26px; border-radius: 9px; } .kx-btn--primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 12px 28px rgba(214, 167, 86, .4); background: #e0b466; } .kx-btn--ghost { border: 1px solid rgba(var(--ink-rgb), var(--ia03)); color: var(--ink); font-weight: 500; font-size: 15px; padding: 14px 26px; border-radius: 9px; } .kx-btn--ghost:hover { transform: translateY(-2px) scale(1.02); border-color: rgba(214, 167, 86, .6); background: rgba(214, 167, 86, .06); } .kx-btn--cta { background: var(--accent); color: #090A0C !important; font-weight: 600; font-size: 14px; padding: 12px 22px; border-radius: 8px; } .kx-btn--cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(214, 167, 86, .4); background: #e0b466; } /* Theme switcher */ .kx-switch { display: flex; align-items: center; } .kx-t-moon { display: none; } :root[data-theme="light"] .kx-t-sun { display: none; } :root[data-theme="light"] .kx-t-moon { display: inline; } .kx-tbtn { background: none; border: 1px solid rgba(var(--ink-rgb), var(--ia025)); border-radius: 7px; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .3s ease, color .3s ease, background .3s ease; } .kx-tbtn:hover { border-color: rgba(214, 167, 86, .6); } .kx-tbtn--icon { width: 34px; height: 34px; font-size: 14px; } /* minimal (header / floating / footer) */ .kx-switch--minimal .kx-tbtn--label { height: 34px; padding: 0 12px; gap: 6px; font-size: 12.5px; font-family: var(--font-label); border-color: transparent; } .kx-switch--minimal .kx-tbtn--label:hover { color: var(--accent-ink); border-color: transparent; } /* segmented */ .kx-seg { display: inline-flex; border: 1px solid rgba(var(--ink-rgb), var(--ia025)); border-radius: 8px; padding: 2px; } .kx-seg__btn { background: none; border: 0; color: rgba(var(--ink-rgb), var(--ia06)); font: 600 11.5px/1 var(--font-label); padding: 8px 11px; border-radius: 6px; cursor: pointer; transition: background .3s ease, color .3s ease; } :root[data-theme="dark"] .kx-seg__btn[data-kx-theme-set="dark"], :root[data-theme="light"] .kx-seg__btn[data-kx-theme-set="light"] { background: var(--accent); color: #090A0C; } /* floating */ .kx-switch--floating { position: fixed; bottom: 20px; inset-inline-start: 20px; z-index: 40; } .kx-switch--floating.kx-switch--raised { bottom: 84px; } .kx-switch--floating .kx-tbtn--icon { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border-color: rgba(214, 167, 86, .4); box-shadow: 0 8px 24px rgba(0, 0, 0, .4); } .kx-switch--floating .kx-tbtn--label { background: var(--surface); height: 44px; padding: 0 16px; gap: 8px; border-radius: 22px; border-color: rgba(214, 167, 86, .4); font-size: 12.5px; font-family: var(--font-label); box-shadow: 0 8px 24px rgba(0, 0, 0, .4); } .kx-switch--floating .kx-seg { background: var(--surface); box-shadow: 0 8px 24px rgba(0, 0, 0, .4); } /* footer */ .kx-switch--footer { margin-top: 16px; } .kx-switch--footer .kx-tbtn--label { height: 34px; padding: 0 12px; gap: 8px; font-size: 12.5px; font-family: var(--font-label); } /* Hamburger */ .kx-burger { background: none; border: 1px solid rgba(var(--ink-rgb), var(--ia025)); border-radius: 7px; width: 34px; height: 34px; color: var(--ink); font-size: 15px; line-height: 1; cursor: pointer; padding: 0; } /* ------------------------------------------------------------------------- 6. Mobile menu — compact floating glass drawer (never fullscreen) ---------------------------------------------------------------------- */ .kx-scrim { position: fixed; inset: 0; background: rgba(var(--overlay-rgb), .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 50; } .kx-drawer { position: fixed; top: 78px; inset-inline: 5%; z-index: 51; max-height: calc(100vh - 96px); overflow-y: auto; background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--kx-glass-blur)); backdrop-filter: blur(var(--kx-glass-blur)); border: 1px solid var(--glass-border); border-radius: 14px; box-shadow: var(--glass-shadow); padding: 18px; color: var(--ink); animation: menuPanelIn .3s var(--ease) both; } .admin-bar .kx-drawer { top: calc(78px + var(--wp-admin--admin-bar--height, 32px)); } .kx-drawer__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } .kx-drawer__brand { font: 700 13px/1 var(--font-label); letter-spacing: .1em; color: var(--accent-ink); } .kx-drawer__close { background: none; border: 1px solid rgba(var(--ink-rgb), var(--ia025)); border-radius: 8px; width: 32px; height: 32px; color: var(--ink); font-size: 14px; cursor: pointer; padding: 0; } .kx-drawer__list { display: flex; flex-direction: column; gap: 4px; list-style: none; margin: 0; padding: 0; } .kx-drawer__list a { display: block; color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 500; font-family: var(--font-nav-mobile, var(--font-nav)); padding: 11px 4px; border-bottom: 1px solid rgba(var(--ink-rgb), var(--ia008)); } .kx-switch--drawer { display: block; } .kx-switch--drawer .kx-tbtn--label { width: 100%; margin-top: 14px; border: 1px solid rgba(var(--ink-rgb), var(--ia018)); border-radius: 8px; padding: 10px; font-size: 13px; font-family: var(--font-nav); gap: 8px; } .kx-switch--drawer .kx-seg { margin-top: 14px; display: flex; } .kx-switch--drawer .kx-seg__btn { flex: 1; } .kx-drawer__actions { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; } .kx-drawer__lang { background: none; border: 1px solid rgba(214, 167, 86, .4); color: var(--accent-ink); border-radius: 8px; padding: 10px; font-size: 13px; font-family: var(--font-nav); text-align: center; text-decoration: none; } .kx-drawer__cta { background: var(--accent); color: #090A0C !important; text-align: center; font-weight: 600; padding: 12px; border-radius: 8px; text-decoration: none; font-size: 14px; font-family: var(--font-nav); } /* ------------------------------------------------------------------------- 7. Sections — shared ---------------------------------------------------------------------- */ .kx-section { max-width: 1280px; margin: 0 auto; padding: 36px 20px; } .kx-section--center { text-align: center; } /* extra room above/below: the K-symbol breaks out of the banner edge */ .kx-section--cta { padding: 6px 20px 56px; } .kx-h2 { font-family: var(--font-section-title, var(--font-head)); font-weight: 700; font-size: 26px; margin: 0; color: var(--ink); text-wrap: balance; /* even line lengths: no single word left alone on the last line */ } .kx-h2--pillars, .kx-h2--process { line-height: 1.2; } .kx-h2--pillars { max-width: 560px; } .kx-h2--process { max-width: 480px; } .kx-h2--wide { max-width: 560px; } .kx-section > .kx-h2 { margin-bottom: var(--head-gap); } .kx-section__head { margin-bottom: var(--head-gap); } .kx-rule { max-width: 1280px; margin: 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(214, 167, 86, .35), transparent); } /* ------------------------------------------------------------------------- 8. Hero ---------------------------------------------------------------------- */ .kx-hero { position: relative; /* Compact by default; Theme Options → Hero sets padding / min-height per device (emitted after this stylesheet, see inc/hero.php). */ padding: 24px 20px 28px; max-width: 1280px; margin: 0 auto; overflow: hidden; display: flex; flex-direction: column; justify-content: center; } .kx-hero--no-anim .kx-hero__text, .kx-hero--no-anim .kx-hero__k, .kx-hero--no-anim .kx-logo__sweep { animation: none !important; } .kx-hero--media-left .kx-hero__text { order: 2; } .kx-hero--media-left .kx-hero__visual { order: 1; } .kx-hero__grid { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; } /* min-width:0 — a grid item never grows to its content, so an oversized (or break-outside) visual can neither widen its column nor squeeze the text. */ .kx-hero__text { min-width: 0; animation: heroRise .9s ease-out both; } .kx-hero__title { font-family: var(--font-hero-title, var(--font-head)); font-weight: 700; font-size: 36px; line-height: 1.28; margin: 0 0 20px; color: var(--ink); } .kx-hero__row { display: block; } .kx-hl { color: var(--accent-ink); } .kx-hero__desc { font-family: var(--font-hero-desc, var(--font-body)); font-size: 15px; line-height: 1.6; color: rgba(var(--ink-rgb), var(--ia072)); max-width: 460px; margin: 0 0 30px; } .kx-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; } .kx-hero__visual { min-width: 0; position: relative; display: flex; justify-content: center; align-items: center; min-height: 170px; } /* Decorative diagonal — one soft band that always runs the FULL height of the Hero (top to bottom), fades out at both ends and softens at its sides, so it can never look like a cropped shape. Gold at low opacity reads the same on Dark and Light and never competes with the logo. Position / width / opacity come from Theme Options → Hero (inline custom properties). */ .kx-hero__diag { position: absolute; top: 0; bottom: 0; inset-inline-start: var(--kx-diag-x, 62%); width: var(--kx-diag-w, 110px); z-index: 0; pointer-events: none; opacity: var(--kx-diag-o, .2); background: linear-gradient(90deg, transparent, #D6A756 26%, #D6A756 74%, transparent); transform: translateX(-50%) skewX(-18deg); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); } :root[dir="rtl"] .kx-hero__diag { transform: translateX(50%) skewX(18deg); } /* Video beside text */ .kx-hero__vbox { position: relative; width: 100%; max-width: 560px; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: rgba(var(--ink-rgb), var(--ia0035)); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); animation: kReveal 1s ease-out both; } .kx-hero--no-anim .kx-hero__vbox { animation: none !important; } .kx-hero__vbox .kx-hero__embed { position: absolute; inset: 0; } /* Poster / fallback + player share the same box (no layout shift on load). */ .kx-hero__poster, .kx-hero__vid { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; object-position: var(--kx-vpos, 50% 50%); display: block; } .kx-hero__poster { z-index: 0; } .kx-hero__vid { z-index: 1; } .kx-hero__vid--yt { pointer-events: none; } .kx-hero__vbox .kx-hero__vid--yt { pointer-events: auto; } /* YouTube paints black until it has loaded: hold it back, then fade it in over the poster. */ .kx-js .kx-hero__vid--yt { opacity: 0; animation: kxFadeIn .4s ease 3.5s forwards; } .kx-js .kx-hero__vid--yt.is-ready { opacity: 1; animation: none; transition: opacity .4s ease; } @keyframes kxFadeIn { to { opacity: 1; } } /* Full Hero video background */ .kx-hero--video-bg { max-width: none; padding: 48px max(20px, calc(50% - 620px)); min-height: 340px; } .kx-hero--video-bg .kx-hero__grid { grid-template-columns: minmax(0, 640px); } .kx-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; container-type: size; pointer-events: none; } .kx-hero__bg .kx-hero__embed { position: absolute; left: var(--kx-vfx, 50%); top: var(--kx-vfy, 50%); width: 100%; height: 100%; transform: translate(calc(-1 * var(--kx-vfx, 50%)), calc(-1 * var(--kx-vfy, 50%))); } /* "cover" for a 16:9 YouTube player inside any box shape. */ @supports (width: 1cqw) { .kx-hero__bg .kx-hero__embed { width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); } } .kx-hero__bg .kx-hero__vid--yt { pointer-events: none; } .kx-hero__overlay { position: absolute; inset: 0; z-index: 2; background: rgba(var(--kx-ov-rgb, var(--overlay-rgb)), var(--kx-ov-a, .55)); } /* Overlay colour "Always dark / light": the text switches with it so it stays readable. */ .kx-hero--tone-dark { --kx-ov-rgb: 9, 10, 12; --ink: #F4EFE7; --ink-rgb: 244, 239, 231; --overlay-rgb: 9, 10, 12; --accent-ink: #D6A756; --border-rgb: 231, 226, 219; --ia0035: .035; --ia004: .04; --ia005: .05; --ia006: .06; --ia008: .08; --ia01: .1; --ia012: .12; --ia014: .14; --ia018: .18; --ia02: .2; --ia025: .25; --ia03: .3; --ia035: .35; --ia04: .4; --ia045: .45; --ia05: .5; --ia055: .55; --ia058: .58; --ia06: .6; --ia062: .62; --ia065: .65; --ia068: .68; --ia07: .7; --ia072: .72; --im18: rgba(244, 239, 231, .18); --im22: rgba(244, 239, 231, .22); --im4: rgba(244, 239, 231, .4); --im5: rgba(244, 239, 231, .5); --im55: rgba(244, 239, 231, .55); } .kx-hero--tone-light { --kx-ov-rgb: 244, 239, 231; --ink: #090A0C; --ink-rgb: 9, 10, 12; --overlay-rgb: 244, 239, 231; --accent-ink: #8a6423; --border-rgb: 9, 10, 12; --ia0035: .12; --ia004: .12; --ia005: .14; --ia006: .16; --ia008: .18; --ia01: .2; --ia012: .22; --ia014: .24; --ia018: .28; --ia02: .3; --ia025: .35; --ia03: .42; --ia035: .48; --ia04: .62; --ia045: .66; --ia05: .7; --ia055: .74; --ia058: .76; --ia06: .78; --ia062: .8; --ia065: .82; --ia068: .84; --ia07: .86; --ia072: .88; --im18: rgba(9, 10, 12, .46); --im22: rgba(9, 10, 12, .5); --im4: rgba(9, 10, 12, .68); --im5: rgba(9, 10, 12, .78); --im55: rgba(9, 10, 12, .83); } .kx-hero__line { position: absolute; height: 1px; } .kx-hero__line--a { top: 18%; left: 6%; width: 220px; background: rgba(214, 167, 86, .3); transform: rotate(8deg); } .kx-hero__line--b { bottom: 22%; right: 8%; width: 180px; background: rgba(214, 167, 86, .22); transform: rotate(-14deg); } .kx-hero__glow { position: absolute; width: 70%; height: 70%; background: radial-gradient(circle, rgba(214, 167, 86, .28), transparent 70%); animation: killixGlow 5s ease-in-out infinite; } .kx-hero__k { position: relative; /* Slot defaults only (approved size for the KILLIX symbol). Any replacement image is sized from Theme Options → Hero → Display & size, which overrides these per device. Nothing here is keyed to a specific file. */ width: 160px; max-width: 100%; height: auto; object-fit: var(--kx-fit, contain); object-position: var(--kx-pos, 50% 50%); animation: kReveal 1s ease-out both, killixFloat 7s ease-in-out 1s infinite; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .5)); } /* ------------------------------------------------------------------------- 9. Brand Pillars — Expanding Chapters Mobile-first: stacked rows (the open row grows taller). From 1024px the chapters sit side by side as strips (the open strip widens). The section's total size never changes when another chapter opens, so nothing below it moves. Order follows the document direction; images are never mirrored. ---------------------------------------------------------------------- */ .kx-chapters { --kx-open: clamp(340px, 92vw, 420px); display: flex; flex-direction: column; gap: 10px; } .kx-chapter { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; flex: 0 0 72px; min-width: 0; min-height: 0; padding: 0 18px 19px; border-radius: 14px; background: var(--surface); scroll-margin-block: 96px 16px; transition: flex-basis .6s var(--ease), flex-grow .7s var(--ease); } .kx-chapter.is-open { flex-basis: var(--kx-open); } /* Image + legibility layers. The closing veil fades out as the chapter opens; the top and bottom shades stay, so the number, icon and text always sit on a calm, theme-coloured base whatever image is uploaded. */ .kx-chapter__media { position: absolute; inset: 0; z-index: -1; } .kx-chapter__media::before, .kx-chapter__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; } .kx-chapter__media::before { background: linear-gradient(to bottom, rgba(var(--overlay-rgb), .6) 0%, rgba(var(--overlay-rgb), 0) 24%), linear-gradient(to top, rgba(var(--overlay-rgb), .94) 0%, rgba(var(--overlay-rgb), .6) 36%, rgba(var(--overlay-rgb), 0) 70%); } .kx-chapter__media::after { background: rgba(var(--overlay-rgb), .76); transition: opacity .5s ease; } .kx-chapter.is-open .kx-chapter__media::after { opacity: 0; } .kx-chapter__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--kx-fit, cover); object-position: var(--kx-pos, 50% 50%); transform: scale(1.06); transition: transform 1.2s var(--ease); } .kx-chapter.is-open .kx-chapter__img { transform: none; } /* Header: the button covers the whole chapter, so any tap on a closed chapter opens it. The open chapter lets clicks through to its text. */ .kx-chapter__head { margin: 0; font: inherit; } .kx-chapter__btn { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; } .kx-chapter__btn::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; } .kx-chapter.is-open .kx-chapter__btn { cursor: default; } .kx-chapter.is-open .kx-chapter__btn::after { pointer-events: none; } .kx-chapter__btn:focus-visible { outline: none; } .kx-chapter__btn:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; } @media (hover: hover) { .kx-chapter:not(.is-open):hover .kx-chapter__media::after { opacity: .72; } .kx-chapter:not(.is-open):hover .kx-chapter__title { color: var(--ink); } } .kx-chapter__num { min-width: 20px; font-family: var(--font-label); font-size: 12px; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--im4); transition: color .3s ease; } .kx-chapter.is-open .kx-chapter__num { color: var(--accent-ink); } .kx-chapter__icon { width: 24px; height: 24px; } .kx-chapter__icon > .kx-sh, .kx-chapter__icon > .kx-bars { width: 64%; height: 64%; } .kx-chapter__icon > .kx-ring { display: flex; width: 76%; height: 76%; } /* beats `.kx-pico i { display: block }` so the play mark centres */ .kx-chapter__icon > svg { width: 84%; height: 84%; color: rgba(var(--ink-rgb), var(--ia072)); } .kx-chapter.is-open .kx-chapter__icon > svg { color: var(--accent-ink); } /* The title is set at its open size and scaled down while closed, so the open/close motion is a transform, never a text reflow. */ .kx-chapter__title { font-family: var(--font-head); font-weight: 700; font-size: 30px; line-height: 1.15; letter-spacing: -.02em; white-space: nowrap; color: rgba(var(--ink-rgb), var(--ia072)); transform: scale(.6); transform-origin: left center; transition: transform .55s var(--ease), color .3s ease; } .kx-chapter.is-open .kx-chapter__title { transform: none; color: var(--ink); } :root[dir="rtl"] .kx-chapter__title { font-size: 26px; line-height: 1.4; letter-spacing: 0; transform-origin: right center; transform: scale(.66); } :root[dir="rtl"] .kx-chapter.is-open .kx-chapter__title { transform: none; } /* Description: height opens with the chapter; the text fades in once the chapter has room and fades out quickly when it closes. */ .kx-chapter__body { display: grid; grid-template-rows: 0fr; visibility: hidden; opacity: 0; transition: grid-template-rows .55s var(--ease), opacity .18s ease, visibility 0s linear .18s; } .kx-chapter.is-open .kx-chapter__body { grid-template-rows: 1fr; visibility: visible; opacity: 1; transition: grid-template-rows .55s var(--ease), opacity .4s ease .25s, visibility 0s; } .kx-chapter__inner { min-height: 0; overflow: hidden; } .kx-chapter__desc { margin: 10px 0 0; max-width: 46ch; font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: rgba(var(--ink-rgb), var(--ia072)); text-wrap: pretty; } :root[dir="rtl"] .kx-chapter__desc { line-height: 1.85; } @media (min-width: 768px) { .kx-chapters { --kx-open: 440px; } } /* ------------------------------------------------------------------------- 10. Icons (CSS shapes). State colours come from --fill / --line. ---------------------------------------------------------------------- */ .kx-pico { --fill: var(--silver-fill); --line: var(--im4); } .kx-chapter.is-open .kx-pico { --fill: var(--gold-fill); --line: rgba(214, 167, 86, .7); } .kx-pico i, .kx-ap__icon i { display: block; font-style: normal; } /* Fix: `.kx-bars` is itself an matched by the rule above, which was silently overriding its own `display: flex` (higher specificity), so the three growth bars never laid out side by side. */ .kx-pico .kx-bars, .kx-ap__icon .kx-bars { display: flex; } /* Built-in SVG icon library (inc/icon-library.php) rendered inside the same pico / industry badge contexts as the legacy CSS shapes. */ .kx-pico svg, .kx-ap__icon svg, .kx-icon-svg { width: 60%; height: 60%; color: var(--fill, var(--accent-ink)); overflow: visible; } .kx-icon-custom { display: block; max-width: 60%; max-height: 60%; width: auto; height: auto; object-fit: contain; } .kx-sh { width: 100%; height: 100%; background: var(--fill); transition: background .25s ease; } .kx-sh--arrow { clip-path: polygon(0% 100%, 60% 100%, 100% 0%, 100% 45%, 45% 100%); } .kx-sh--kfacet { clip-path: polygon(50% 0%, 100% 38%, 68% 100%, 22% 100%, 0% 42%); } .kx-sh--diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } .kx-sh--play { clip-path: polygon(0% 0%, 100% 50%, 0% 100%); } .kx-sh--auto { clip-path: polygon(0% 100%, 55% 100%, 100% 0%, 100% 42%, 42% 100%); } .kx-ring { display: flex; align-items: center; justify-content: center; width: 64%; height: 64%; border-radius: 50%; border: 1.5px solid var(--line); transition: border-color .25s ease; } .kx-ring .kx-sh--play { width: 34%; height: 38%; margin: 0 0 0 1px; } .kx-bars { display: flex; align-items: flex-end; gap: 3px; width: 60%; height: 60%; } .kx-bars i { width: 5px; background: var(--fill); transition: background .25s ease; } .kx-pico .kx-bars i:nth-child(1) { height: 38%; } .kx-pico .kx-bars i:nth-child(2) { height: 65%; } .kx-pico .kx-bars i:nth-child(3) { height: 100%; } /* ------------------------------------------------------------------------- 11. Services — "Lightbox" Mounted campaign boards (image + printed label). Mobile-first: a staggered column whose tilt and offset alternate. From 1024px, exactly four boards sit in an art-directed composition measured in container units, so it scales with the section. Overlap rule: a higher board may only cover the top of the image of a board below it, never a label. theme.js (section 5) adds the "Fan, then deal" entrance: the boards wait as one squared deck; engaging with the section fans it in place, then deals each board out to its spot. ---------------------------------------------------------------------- */ .kx-lb { --kx-lb-mount: #141511; --kx-lb-edge: rgba(244, 239, 231, .07); --kx-lb-ds: drop-shadow(0 26px 30px rgba(0, 0, 0, .62)) drop-shadow(0 2px 4px rgba(0, 0, 0, .45)); --kx-lb-ds-hi: drop-shadow(0 40px 44px rgba(0, 0, 0, .75)) drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); --kx-dir: 1; container-type: inline-size; } :root[data-theme="light"] .kx-lb { --kx-lb-mount: #FBF8F2; --kx-lb-edge: rgba(9, 10, 12, .07); --kx-lb-ds: drop-shadow(0 24px 26px rgba(70, 52, 22, .26)) drop-shadow(0 2px 4px rgba(70, 52, 22, .12)); --kx-lb-ds-hi: drop-shadow(0 36px 38px rgba(70, 52, 22, .34)) drop-shadow(0 3px 6px rgba(70, 52, 22, .16)); } :root[dir="rtl"] .kx-lb { --kx-dir: -1; } .kx-lb__stage { position: relative; display: flex; flex-direction: column; gap: 22px; } .kx-section > .kx-lb__stage > .kx-lb__head, .kx-lb__head { margin: 0 0 4px; } .kx-lb__card { --r: 0; --f: 0; /* inline offset, as a share of the free space in the column */ --ar: 6 / 5; /* image proportion in the column */ position: relative; width: min(86%, 340px); margin-inline-start: calc((100% - min(86%, 340px)) * var(--f)); filter: var(--kx-lb-ds); transform: rotate(calc(var(--r) * var(--kx-dir) * 1deg)); transition: transform .55s var(--ease), filter .55s ease, opacity .4s ease; } .kx-lb__card:nth-of-type(4n+1) { --r: -.6; --f: 0; --ar: 6 / 5; } .kx-lb__card:nth-of-type(4n+2) { --r: .4; --f: .85; --ar: 5 / 3; } .kx-lb__card:nth-of-type(4n+3) { --r: -.3; --f: .15; --ar: 15 / 17; } .kx-lb__card:nth-of-type(4n+4) { --r: .5; --f: .7; --ar: 10 / 7; } .kx-lb__body { background: var(--kx-lb-mount); box-shadow: inset 0 0 0 1px var(--kx-lb-edge); } .kx-lb__media { position: relative; aspect-ratio: var(--ar); overflow: hidden; background: var(--surface); } .kx-lb__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--kx-fit, cover); object-position: var(--kx-pos, 50% 50%); transition: transform 1.4s var(--ease); } .kx-lb__label { padding: 14px 16px 16px; } .kx-lb__title { font-family: var(--font-card-title, var(--font-head)); font-weight: 600; font-size: 18px; line-height: 1.25; margin: 0; color: var(--ink); transition: color .3s ease; } :root[dir="rtl"] .kx-lb__title { line-height: 1.5; } .kx-lb__desc { font-family: var(--font-card-body, var(--font-body)); font-size: 14px; line-height: 1.55; color: rgba(var(--ink-rgb), var(--ia068)); margin: 6px 0 0; max-width: 34ch; text-wrap: pretty; } :root[dir="rtl"] .kx-lb__desc { line-height: 1.8; } /* Hover belongs to the open layout: while theme.js is dealing the deck (.is-driving) it owns the transforms. */ @media (hover: hover) { .kx-lb:not(.is-driving) .kx-lb__card:hover { transform: translateY(-10px) rotate(0deg); filter: var(--kx-lb-ds-hi); z-index: 10; } .kx-lb:not(.is-driving) .kx-lb__card:hover .kx-lb__img { transform: scale(1.05); } .kx-lb:not(.is-driving) .kx-lb__card:hover .kx-lb__title { color: var(--accent-ink); } .kx-lb:not(.is-driving) .kx-lb__stage:has(.kx-lb__card:hover) .kx-lb__card:not(:hover) { opacity: .74; } } .kx-lb.is-driving .kx-lb__card, .kx-lb.is-driving .kx-lb__body { transition: none; will-change: transform; } @media (min-width: 768px) { .kx-lb__card { width: min(100%, 420px); margin-inline-start: calc((100% - min(100%, 420px)) * var(--f)); } } /* Until theme.js has set the deck up, keep the boards out of sight (only when the entrance will run). */ .kx-reveal-on .kx-lb:not(.is-primed) .kx-lb__stage { visibility: hidden; } /* ------------------------------------------------------------------------- 12. Process — "Flow": a guided route One thin gold line runs through the steps. Mobile-first the stations hang down the inline-start edge and meander gently (every other step is indented); from 1024px they sit across the width, alternating high and low. theme.js (section 6) draws the line from the stations' real positions and, when motion is allowed, draws the route once on entry. ---------------------------------------------------------------------- */ .kx-section__head--process { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: end; } .kx-process__lede { font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: rgba(var(--ink-rgb), var(--ia065)); margin: 0; max-width: 400px; } :root[dir="rtl"] .kx-process__lede { line-height: 1.85; } .kx-flow { --kx-flow-line: var(--accent-ink); --kx-flow-ring: 56px; --kx-flow-amp: 34px; /* how far every other step steps in while the route meanders down */ } .kx-flow .kx-section__head { margin-bottom: calc(var(--head-gap) + 14px); } .kx-flow__stage { position: relative; } .kx-flow__route { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; } .kx-flow__route path { fill: none; stroke: var(--kx-flow-line); stroke-width: 1.25; stroke-linecap: round; } .kx-flow__steps { position: relative; display: grid; gap: 44px; margin: 0; padding: 0; list-style: none; } .kx-flow__step { position: relative; display: grid; grid-template-columns: var(--kx-flow-ring) minmax(0, 1fr); column-gap: 20px; align-items: start; } .kx-flow__step:nth-child(even) { padding-inline-start: var(--kx-flow-amp); } .kx-flow__mark { position: relative; display: block; width: var(--kx-flow-ring); height: var(--kx-flow-ring); } .kx-flow__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .kx-flow__ring circle { fill: none; stroke: var(--kx-flow-line); stroke-width: 1; vector-effect: non-scaling-stroke; } .kx-flow__icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--kx-flow-line); } .kx-flow__icon svg { width: 42%; height: 42%; overflow: visible; stroke-width: 1.5; } .kx-flow__icon .kx-icon-custom { max-width: 44%; max-height: 44%; } :root[dir="rtl"] .kx-flow__mark.is-directional .kx-flow__icon svg { transform: scaleX(-1); } /* A stroke measured 0..1 (pathLength="1", set by theme.js). Dash 1, gap 2: an undrawn stroke sits inside the gap, so its round caps never show as a dot. */ .kx-flow__draw { stroke-dasharray: 1 2; stroke-dashoffset: 0; } .kx-flow__text { padding-top: 6px; } .kx-flow__num { display: block; margin-bottom: 8px; font-family: var(--font-label); font-size: 12px; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--accent-ink); } .kx-flow__title { font-family: var(--font-head); font-weight: 600; font-size: 18px; line-height: 1.3; margin: 0; color: var(--ink); transition: color .3s ease; } :root[dir="rtl"] .kx-flow__title { line-height: 1.5; } .kx-flow__desc { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: rgba(var(--ink-rgb), var(--ia065)); margin: 6px 0 0; max-width: 36ch; text-wrap: pretty; } :root[dir="rtl"] .kx-flow__desc { line-height: 1.85; } /* The point of light that leads the line while it draws. */ .kx-flow__comet { position: absolute; top: 0; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--kx-flow-line); box-shadow: 0 0 8px 1px rgba(214, 167, 86, .5); opacity: 0; offset-rotate: 0deg; pointer-events: none; } :root[data-theme="light"] .kx-flow__comet { box-shadow: 0 0 6px rgba(138, 100, 35, .35); } @media (hover: hover) { .kx-flow__step:hover .kx-flow__title { color: var(--accent-ink); } } @media (min-width: 768px) { .kx-flow { --kx-flow-amp: 72px; } } /* Until theme.js has set the route up, keep the stations out of sight (only when the entrance will run). */ .kx-reveal-on .kx-flow:not(.is-primed) .kx-flow__stage { visibility: hidden; } /* ------------------------------------------------------------------------- 13. Industries — "Aperture" A real camera lens (template-parts/industries.php). Outside in: machined barrel, knurled grip, the aperture ring (names engraved like f-stop markings; a precision tick scale in scale mode), a fixed gold index at 12 o'clock, a chrome bevel, then the front glass: the selected picture, lens-element rings, vignette, a nine-blade iris and coating reflections. The lens is black anodised metal in both themes, like a real lens. Mobile-first: heading, lens, chips (scale mode), text; the text is left out on phones (the gold engraved name at the index is the readout). From 1024px: text beside the lens. theme.js (section 5b) turns the ring, the iris and the picture on click / tap. ---------------------------------------------------------------------- */ .kx-ap { --kx-ap-shadow: rgba(0, 0, 0, .7); --kx-ap-shadow2: rgba(0, 0, 0, .5); --kx-ap-line: rgba(var(--border-rgb), var(--ia012)); --kx-dir: 1; } :root[data-theme="light"] .kx-ap { --kx-ap-shadow: rgba(70, 52, 22, .34); --kx-ap-shadow2: rgba(70, 52, 22, .22); } :root[dir="rtl"] .kx-ap { --kx-dir: -1; } .kx-ap__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; } .kx-ap__text { display: contents; } .kx-ap__head { order: 0; margin: 0; } .kx-ap__lens { order: 1; } .kx-ap__chips { order: 2; } .kx-ap__panels { order: 3; display: grid; } .kx-ap__panel { grid-area: 1 / 1; } .kx-ap__panel[hidden] { display: none; } .kx-ap__panels > * { transition: opacity .6s ease, transform .9s var(--ease); } .kx-ap__panels.is-swap > * { opacity: 0; transform: translateY(8px); } .kx-ap__name { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; font-family: var(--font-head); font-weight: 600; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -.025em; color: var(--ink); } :root[dir="rtl"] .kx-ap__name { letter-spacing: 0; line-height: 1.4; } .kx-ap__desc { margin: 0; max-width: 42ch; font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: rgba(var(--ink-rgb), var(--ia068)); text-wrap: pretty; } :root[dir="rtl"] .kx-ap__desc { line-height: 1.9; } .kx-ap__icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; } .kx-ap__icon .kx-sh { width: 100%; height: 100%; background: var(--gold-fill); } .kx-ap__icon svg { width: 100%; height: 100%; } /* Icon shapes shared by the industry badges (legacy CSS shapes). */ .kx-house { position: relative; width: 60%; height: 60%; } .kx-house__body { position: absolute; bottom: 0; width: 100%; height: 65%; background: linear-gradient(135deg, #D6A756, #F4EFE7); } .kx-house__roof { position: absolute; bottom: 65%; left: 50%; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #D6A756; transform: translateX(-50%); } .kx-circle { width: 60%; height: 60%; border-radius: 50%; border: 1.6px solid #D6A756; } /* The selector: always the keyboard / screen-reader tab list. In ring mode the ring is the visible control, so the chips are visually hidden (shown without JS); in scale mode they are the visible selector. */ .kx-ap__chips { display: flex; flex-wrap: wrap; gap: 8px; } .kx-js .kx-ap:not(.is-scale) .kx-ap__chips { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .kx-ap__chip { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px; border: 1px solid var(--kx-ap-line); border-radius: 999px; background: none; cursor: pointer; font-family: var(--font-head); font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; color: rgba(var(--ink-rgb), var(--ia068)); transition: color .3s ease, border-color .3s ease, background-color .3s ease, transform .15s ease; } .kx-ap__chip .kx-ap__icon { width: 14px; height: 14px; } .kx-ap__chip:hover { color: var(--ink); border-color: rgba(214, 167, 86, .5); } .kx-ap__chip:active { transform: scale(.97); } .kx-ap__chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .kx-ap__chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Scale mode from 601px: an even grid, so its height depends on the number of industries only (a web-font swap cannot re-wrap it and move the lens). */ .kx-ap.is-scale .kx-ap__chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); } .kx-ap.is-scale .kx-ap__chip { min-width: 0; } .kx-ap__chip[aria-selected="true"] { color: var(--ink); border-color: var(--accent-ink); background: rgba(214, 167, 86, .1); } /* The lens. */ .kx-ap__lens { position: relative; width: min(100%, 540px); aspect-ratio: 1; justify-self: center; filter: drop-shadow(0 44px 48px var(--kx-ap-shadow)) drop-shadow(0 8px 12px var(--kx-ap-shadow2)); } .kx-ap__lens > * { position: absolute; inset: 0; border-radius: 50%; } .kx-ap__body { background: radial-gradient(circle at 50% 50%, #0b0c0e 0 69%, transparent 69.4%), conic-gradient(from 200deg, #34353a, #141518 14%, #3f4046 27%, #17181b 42%, #2b2c31 58%, #101113 74%, #393a3f 88%, #34353a); box-shadow: inset 0 2px 1px rgba(255, 255, 255, .16), inset 0 -3px 5px rgba(0, 0, 0, .7); } .kx-ap__grip { background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .13) 0 .45deg, rgba(0, 0, 0, .32) .45deg 1.5deg); -webkit-mask: radial-gradient(closest-side, transparent 92.2%, #000 92.8%, #000 98.8%, transparent 99.6%); mask: radial-gradient(closest-side, transparent 92.2%, #000 92.8%, #000 98.8%, transparent 99.6%); transform: rotate(var(--kx-ap-ring, 0deg)); } .kx-ap__svg { width: 100%; height: 100%; overflow: visible; } .kx-ap__top, .kx-ap__glass { pointer-events: none; } /* only the ring segments take clicks / taps */ .kx-ap__band { fill: none; stroke: #0d0e10; stroke-width: 90; } .kx-ap__edge { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 1.5; } .kx-ap__seg { fill: none; stroke: transparent; stroke-width: 90; cursor: pointer; pointer-events: stroke; transition: stroke .5s ease; -webkit-tap-highlight-color: transparent; } .kx-ap.is-scale .kx-ap__seg { stroke-width: 110; } .kx-ap__seg.is-focus { stroke: rgba(214, 167, 86, .16); } .kx-ap__lbl { font-family: var(--font-head); font-weight: 500; letter-spacing: .04em; fill: rgba(244, 239, 231, .52); pointer-events: none; transition: fill .8s ease, opacity .35s ease; } :root[dir="rtl"] .kx-ap__lbl { letter-spacing: 0; font-weight: 600; } .kx-ap__lbl.is-on { fill: #D6A756; } .kx-ap__active.is-fading { opacity: 0; } .kx-ap__measure { visibility: hidden; } .kx-ap__dot { fill: rgba(255, 255, 255, .28); } .kx-ap__tick { stroke: rgba(244, 239, 231, .42); stroke-width: 3; stroke-linecap: round; transition: stroke .8s ease; } .kx-ap__tick.is-on { stroke: #D6A756; stroke-width: 4; } /* Ring mode: every name and the dividers. Scale mode: the ticks and the selected name. */ .kx-ap:not(.is-scale) .kx-ap__tick, .kx-ap:not(.is-scale) .kx-ap__active, .kx-ap.is-scale .kx-ap__dot, .kx-ap.is-scale .kx-ap__lbl:not(.kx-ap__active) { display: none; } .kx-ap__index { fill: #D6A756; } .kx-ap__glass { inset: 14.8%; overflow: hidden; background: #050506; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 0 40px rgba(0, 0, 0, .7); } .kx-ap__glass > * { position: absolute; inset: 0; border-radius: 50%; } .kx-ap__shot { opacity: 0; transition: opacity .9s ease; } .kx-ap__shot.is-on { opacity: 1; } .kx-ap__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--kx-fit, cover); object-position: var(--kx-pos, 50% 50%); transform: scale(1.07) rotate(calc(-1.4deg * var(--kx-dir))); } .kx-ap__shot.is-settled .kx-ap__photo { transform: none; transition: transform 2.4s cubic-bezier(.22, .61, .2, 1); } .kx-ap__elements { background: radial-gradient(circle, transparent 0 43%, rgba(255, 255, 255, .07) 43.4%, transparent 44.2%, transparent 69%, rgba(255, 255, 255, .06) 69.4%, transparent 70.2%); } .kx-ap__vignette { background: radial-gradient(circle, transparent 48%, rgba(0, 0, 0, .32) 78%, rgba(0, 0, 0, .78) 100%); } .kx-ap__iris { width: 100%; height: 100%; } .kx-ap__seams { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: .5; } .kx-ap__glare { background: radial-gradient(ellipse 56% 36% at 31% 22%, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 72%), radial-gradient(ellipse 24% 12% at 36% 18%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%), radial-gradient(ellipse 34% 16% at 70% 83%, rgba(214, 167, 86, .2), rgba(214, 167, 86, 0) 72%); mix-blend-mode: screen; transform: rotate(var(--kx-ap-glare, 0deg)); transition: transform 2.2s cubic-bezier(.22, .61, .2, 1); } :root[data-theme="light"] .kx-ap__glare { filter: brightness(1.15); } @media (hover: hover) { .kx-ap__seg:hover { stroke: rgba(255, 255, 255, .045); } /* a hint only: hover never selects */ } /* Phones: the same lens, a little wider than the text column, and no text below it; in scale mode the chips are one swipeable row under the lens. */ @media (max-width: 600px) { .kx-ap__lens { width: calc(100% + 12px); margin-inline: -6px; } .kx-ap__panels { display: none; } .kx-ap.is-scale .kx-ap__chips { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; margin-inline: -20px; padding: 2px 20px 6px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%); } .kx-ap.is-scale .kx-ap__chips::-webkit-scrollbar { display: none; } .kx-ap__chip { scroll-snap-align: center; } .kx-ap.is-scale .kx-ap__chip { min-width: auto; } } @media (prefers-reduced-motion: reduce) { .kx-ap *, .kx-ap *::before, .kx-ap *::after { transition-duration: .01ms !important; transition-delay: 0s !important; } .kx-ap__shot { transition-duration: .25s !important; } } /* ------------------------------------------------------------------------- 14. Creative Lab ---------------------------------------------------------------------- */ .kx-concept__sweep { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(214, 167, 86, .2) 50%, transparent 60%); transform: translateX(-120%); transition: transform .8s ease; pointer-events: none; } .kx-concept:hover .kx-concept__sweep { transform: translateX(10%); } /* Stacked layout only (mobile + tablet, below 1024px) — from 1024px the tile shape is set by the layout grid. */ @media (max-width: 1023px) { .kx-concept.has-ar { aspect-ratio: var(--kx-ar); } } .kx-h2--lab { margin-bottom: 10px; } .kx-lab__lede { font-family: var(--font-body); font-size: 14.5px; line-height: 1.6; color: rgba(var(--ink-rgb), var(--ia06)); max-width: 520px; margin: 0; } .kx-concepts { display: flex; flex-direction: column; gap: 16px; } .kx-concept { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 5; } .kx-concept__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--kx-fit, cover); object-position: var(--kx-pos, 50% 50%); display: block; transition: transform .7s var(--ease); } .kx-concept:hover .kx-concept__img { transform: scale(1.07) translateY(-2%); } .kx-concept__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(var(--overlay-rgb), .92), rgba(var(--overlay-rgb), .1) 50%); } .kx-concept__badge { position: absolute; top: 16px; inset-inline-start: 16px; width: 22px; height: 22px; background: linear-gradient(135deg, #D6A756, #F4EFE7); clip-path: polygon(50% 0%, 100% 38%, 68% 100%, 22% 100%, 0% 42%); opacity: .9; transition: transform .5s ease; } .kx-concept:hover .kx-concept__badge { transform: rotate(25deg); } .kx-concept__caption { position: absolute; bottom: 0; inset-inline: 0; padding: 18px; } .kx-concept--featured .kx-concept__caption { padding: 30px; } .kx-concept__kicker { font-family: var(--font-label); font-size: 11px; letter-spacing: .04em; color: var(--accent-ink); margin-bottom: 6px; } .kx-concept__title { font-family: var(--font-card-title, var(--font-head)); font-weight: 700; font-size: 17px; color: var(--ink); margin: 0; } .kx-concept--featured .kx-concept__title { font-size: 26px; margin-bottom: 10px; } .kx-concept__blurb { font-family: var(--font-card-body, var(--font-body)); font-size: 13.5px; line-height: 1.55; color: rgba(var(--ink-rgb), var(--ia065)); margin: 0; max-width: 340px; } /* ------------------------------------------------------------------------- 15. Philosophy ---------------------------------------------------------------------- */ .kx-philosophy { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; } .kx-philosophy__word { font-family: var(--font-head); font-weight: 700; font-size: 22px; color: var(--ink); } .kx-philosophy__desc { font-family: var(--font-body); font-size: 14.5px; color: rgba(var(--ink-rgb), var(--ia055)); margin: 20px auto 0; max-width: 460px; line-height: 1.6; } /* ------------------------------------------------------------------------- 16. CTA banner ---------------------------------------------------------------------- */ .kx-cta { /* Image size (--kx-cta-img) and how far it breaks out past the bottom edge (mobile) or the top/left edges (desktop). These are slot defaults; the admin Width / Height override --kx-cta-img / --kx-cta-h per device. The image's aspect ratio arrives as --kx-cta-ar on .kx-cta__visual. */ --kx-cta-img: clamp(176px, 56vw, 250px); --kx-cta-over: 30px; background: linear-gradient(135deg, var(--surface), var(--bg)); border: 1px solid rgba(214, 167, 86, .25); border-radius: var(--kx-cta-radius, 20px); display: grid; /* Mobile: title + text on row 1; K-symbol (physical left) and button on row 2. */ grid-template-columns: minmax(0, 46%) minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 14px; padding: var(--kx-cta-pad, 32px) 24px; position: relative; } :root[dir="rtl"] .kx-cta { grid-template-columns: minmax(0, 1fr) minmax(0, 46%); } /* Decorative layer — clips the stripe/glow to the rounded box so the K-symbol itself is free to break out of it. */ .kx-cta__bg { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse 60% 90% at 14% 62%, rgba(214, 167, 86, .17), transparent 70%); } /* Full-height soft diagonal (same principle as the Hero): flush with the banner's top and bottom, faded at the ends, gold at low opacity. */ .kx-cta__stripe { position: absolute; top: 0; bottom: 0; inset-inline-start: var(--kx-diag-x, 38%); width: 72px; opacity: var(--kx-diag-o, .16); background: linear-gradient(90deg, transparent, #D6A756 26%, #D6A756 74%, transparent); transform: translateX(-50%) skewX(-18deg); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); } :root[dir="rtl"] .kx-cta__stripe { transform: translateX(50%) skewX(18deg); } .kx-cta__text { position: relative; grid-column: 1 / -1; grid-row: 1; } .kx-cta__title { font-family: var(--font-cta, var(--font-head)); font-weight: 700; font-size: 24px; margin: 0 0 10px; color: var(--ink); } .kx-cta__desc { font-family: var(--font-cta, var(--font-body)); font-size: 14px; color: rgba(var(--ink-rgb), var(--ia065)); margin: 0; max-width: 380px; } .kx-cta__action { position: relative; grid-row: 2; grid-column: 2; justify-self: end; } :root[dir="rtl"] .kx-cta__action { grid-column: 1; justify-self: start; } /* The K sits on the PHYSICAL left in both LTR and RTL. */ .kx-cta__visual { position: relative; z-index: 2; grid-row: 2; grid-column: 1; align-self: stretch; pointer-events: none; height: calc(var(--kx-cta-h, calc(var(--kx-cta-img) / var(--kx-cta-ar, 1.1389))) - var(--kx-cta-pad, 32px) - var(--kx-cta-over)); } :root[dir="rtl"] .kx-cta__visual { grid-column: 2; } .kx-cta__img { position: absolute; left: -34px; bottom: calc(-1 * (var(--kx-cta-pad, 32px) + var(--kx-cta-over))); width: var(--kx-cta-img); max-width: none; height: var(--kx-cta-h, auto); object-fit: var(--kx-fit, contain); object-position: var(--kx-pos, 50% 50%); filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .32)); } :root[data-theme="light"] .kx-cta__img { filter: drop-shadow(0 12px 18px rgba(9, 10, 12, .16)); } /* Mobile (≤767px): one column — title, description, button, then the K-symbol in normal flow beneath the button, so it can never cover the content. It is anchored on the banner's bottom-LEFT corner (physical left in LTR and RTL): pulled 32px left of the content box so it overlaps the left border by ~11px while staying inside the 20px page gutter, and on the bottom edge: ~40% of it breaks out below (--kx-cta-m-over, derived from the default width: (100vw − 82px gutters) × 70% ÷ aspect 1.1389 × 40%); the section's bottom padding grows by the same amount so nothing below is covered. Sized from its own mobile controls (Theme Options → CTA → Display & size → Mobile), which do NOT inherit Desktop / Tablet: --kx-cta-m-w Width (default 70% of the banner's content width) --kx-cta-m-mw Max width (default 100% — never wider than the banner) --kx-cta-m-space Reserved space (how much of the image stays inside the banner — height of the visual row; default auto) --kx-vs / --kx-vx / --kx-vy Scale / X / Y offset (cosmetic, relative to the default spot: -X left, +X right, -Y up, +Y down; scaling grows from the top edge). Offsets are not clamped; the section clips horizontally so nothing causes page scroll. */ @media (max-width: 767px) { .kx-cta { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding: var(--kx-cta-pad, 32px) 20px 0; } :root[dir="rtl"] .kx-cta { grid-template-columns: minmax(0, 1fr); } .kx-cta__text, :root[dir="rtl"] .kx-cta__text { grid-column: 1; grid-row: 1; } .kx-cta__action, :root[dir="rtl"] .kx-cta__action { grid-column: 1; grid-row: 2; justify-self: start; margin-top: 20px; z-index: 3; } .kx-cta__visual, :root[dir="rtl"] .kx-cta__visual { grid-column: 1; grid-row: 3; align-self: start; display: flex; align-items: flex-start; height: var(--kx-cta-m-space, auto); margin-top: 18px; } .kx-section.kx-section--cta .kx-cta__img { position: relative; inset: auto; transform: none; display: block; width: var(--kx-cta-m-w, 70%); max-width: var(--kx-cta-m-mw, 100%); height: var(--kx-cta-m-h, auto); margin: 0 auto calc(-1 * var(--kx-cta-m-over)) -32px; transform-origin: 50% 0; translate: var(--kx-vx, 0px) var(--kx-vy, 0px); } .kx-section--cta { overflow-x: clip; --kx-cta-m-over: calc((100vw - 82px) * .2459); padding-bottom: calc(var(--kx-cta-m-over) + 28px); } } /* ------------------------------------------------------------------------- 16b. Clients — logo grid. Prepared for future use: the section is OFF by default and renders nothing until enabled in Homepage Sections. Columns / logo size per device arrive as inline custom properties (--kx-cl-cols-d|t|m, --kx-cl-mh-*, --kx-cl-mw-*); these are the defaults. ---------------------------------------------------------------------- */ .kx-clients { --_cols: var(--kx-cl-cols-m, 2); --_mh: var(--kx-cl-mh-m, 44px); --_mw: var(--kx-cl-mw-m, 110px); } @media (min-width: 768px) { .kx-clients { --_cols: var(--kx-cl-cols-t, 4); --_mh: var(--kx-cl-mh-t, 52px); --_mw: var(--kx-cl-mw-t, 140px); } } @media (min-width: 1024px) { .kx-clients { --_cols: var(--kx-cl-cols-d, 5); --_mh: var(--kx-cl-mh-d, 56px); --_mw: var(--kx-cl-mw-d, 150px); } } .kx-clients__lede { font-family: var(--font-body); font-size: 14.5px; line-height: 1.6; color: rgba(var(--ink-rgb), var(--ia06)); max-width: 520px; margin: 12px 0 0; } .kx-clients__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kx-cl-gap, 14px); grid-template-columns: repeat(var(--_cols), minmax(0, 1fr)); } .kx-client { display: flex; min-width: 0; } .kx-client__link { flex: 1; display: flex; align-items: center; justify-content: center; min-height: calc(var(--_mh) + 2 * var(--kx-cl-pad, 20px)); padding: var(--kx-cl-pad, 20px); border-radius: 14px; color: inherit; text-decoration: none; transition: transform .3s var(--ease), border-color .3s ease, background .3s ease; } .kx-clients--tiles .kx-client__link { border: 1px solid rgba(var(--ink-rgb), var(--ia008)); background: rgba(var(--ink-rgb), var(--ia0035)); } :root[data-theme="light"] .kx-clients--tiles .kx-client__link { background: rgba(255, 255, 255, .55); border-color: rgba(9, 10, 12, .12); } .kx-client__logo { display: block; max-width: var(--_mw); max-height: var(--_mh); width: auto; height: auto; object-fit: contain; transition: filter .3s ease, opacity .3s ease, transform .3s var(--ease); } .kx-client__name { font-family: var(--font-head); font-weight: 600; font-size: 15px; text-align: center; color: rgba(var(--ink-rgb), var(--ia07)); } .kx-clients--gray .kx-client__logo, .kx-clients--gray-hover .kx-client__logo { filter: grayscale(1); opacity: .78; } .kx-clients--gray-hover a.kx-client__link:hover .kx-client__logo, .kx-clients--gray-hover a.kx-client__link:focus-visible .kx-client__logo { filter: none; opacity: 1; } a.kx-client__link:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; } .kx-clients--lift a.kx-client__link:hover { transform: translateY(-3px); border-color: rgba(214, 167, 86, .4); } .kx-clients--scale a.kx-client__link:hover .kx-client__logo { transform: scale(1.07); } /* ------------------------------------------------------------------------- 17. Footer ---------------------------------------------------------------------- */ .kx-footer { background: var(--surface-2); border-top: 1px solid rgba(var(--ink-rgb), var(--ia008)); } .kx-footer__grid { max-width: 1280px; margin: 0 auto; padding: 36px 20px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .kx-logo--footer { display: inline-block; margin-bottom: 10px; } .kx-logo--footer .kx-logo__img { height: calc(46px * var(--kx-footer-logo-scale, 1)); } .kx-footer__tagline { font-family: var(--font-footer, var(--font-label)); font-size: 10.5px; letter-spacing: .14em; color: var(--accent-ink); margin-bottom: 14px; } .kx-footer__desc { font-family: var(--font-footer, var(--font-body)); font-size: 13px; line-height: 1.6; color: rgba(var(--ink-rgb), var(--ia055)); max-width: 260px; margin: 0; } .kx-socials { display: flex; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; flex-wrap: wrap; } .kx-social { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(var(--ink-rgb), var(--ia02)); background: rgba(var(--ink-rgb), var(--ia0035)); display: flex; align-items: center; justify-content: center; color: rgba(var(--ink-rgb), var(--ia07)); font-size: 10px; font-family: var(--font-label); text-decoration: none; transition: border-color .25s var(--ease), color .25s ease, background .25s ease, transform .25s var(--ease), box-shadow .25s ease; } .kx-social svg { width: 16px; height: 16px; } .kx-social__code { font-size: 10px; letter-spacing: .02em; } .kx-social:hover { border-color: rgba(214, 167, 86, .65); color: var(--accent); background: rgba(214, 167, 86, .1); transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); } .kx-social:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .kx-footer__heading { font-family: var(--font-footer, var(--font-label)); font-size: 12px; letter-spacing: .06em; color: var(--accent-ink); margin-bottom: 16px; } .kx-footer__list { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; } .kx-footer__list a { color: rgba(var(--ink-rgb), var(--ia07)); text-decoration: none; font-size: 13.5px; font-family: var(--font-footer, var(--font-body)); transition: color .3s ease; } .kx-footer__list a:hover { color: var(--accent-ink); } .kx-footer__contact { display: flex; flex-direction: column; gap: 10px; font-family: var(--font-footer, var(--font-body)); font-size: 13.5px; color: rgba(var(--ink-rgb), var(--ia07)); } .kx-footer__contact a { color: inherit; text-decoration: none; transition: color .3s ease; } .kx-footer__contact a:hover { color: var(--accent-ink); } .kx-footer__note { font-family: monospace; font-size: 11px; color: rgba(var(--ink-rgb), var(--ia035)); } .kx-footer__legal { max-width: 1280px; margin: 0 auto; padding: 20px 20px 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 1px solid rgba(var(--ink-rgb), var(--ia006)); } .kx-footer__copy { font-family: var(--font-footer, var(--font-body)); font-size: 12px; color: rgba(var(--ink-rgb), var(--ia04)); } .kx-legal { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; } .kx-legal a { color: rgba(var(--ink-rgb), var(--ia04)); font-size: 12px; text-decoration: none; font-family: var(--font-footer, var(--font-body)); transition: color .3s ease; } .kx-legal a:hover { color: var(--accent-ink); } /* ------------------------------------------------------------------------- 18. Floating WhatsApp ---------------------------------------------------------------------- */ .kx-wa { position: fixed; bottom: var(--kx-wa-offset-y, 20px); width: var(--kx-wa-size, 52px); height: var(--kx-wa-size, 52px); border-radius: 50%; background: var(--surface); border: 1px solid rgba(214, 167, 86, .4); display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); z-index: 40; transition: transform .2s ease; } .kx-wa--end { inset-inline-end: var(--kx-wa-offset-x, 20px); } .kx-wa--start { inset-inline-start: var(--kx-wa-offset-x, 20px); } .kx-wa:hover { transform: scale(1.06); } @media (max-width: 767px) { .kx-wa--hide-mobile { display: none !important; } } @media (min-width: 768px) { .kx-wa--hide-desktop { display: none !important; } } .kx-wa__bubble { position: relative; width: 20px; height: 16px; border: 1.6px solid #D6A756; border-radius: 5px; display: block; } .kx-wa__tail { position: absolute; bottom: -5px; left: 3px; width: 0; height: 0; border-top: 6px solid #D6A756; border-right: 5px solid transparent; } .kx-wa__dot { position: absolute; top: 4px; width: 4px; height: 4px; border-radius: 50%; background: #D6A756; } .kx-wa__dot--a { left: 4px; } .kx-wa__dot--b { left: 10px; } /* ------------------------------------------------------------------------- 19. Inner pages (blog, pages, 404) — same tokens, minimal layout ---------------------------------------------------------------------- */ .kx-page { max-width: 1280px; margin: 0 auto; padding: 36px 20px 56px; } .kx-page--center { text-align: center; } .kx-page__head { margin-bottom: 28px; } .kx-page__empty { color: rgba(var(--ink-rgb), var(--ia065)); font-size: 15px; line-height: 1.65; } .kx-404 { font: 700 80px/1 var(--font-head); color: var(--accent-ink); margin-bottom: 12px; } .kx-posts { display: grid; grid-template-columns: 1fr; gap: 16px; } .kx-post-card { background: var(--surface); border: 1px solid rgba(var(--ink-rgb), var(--ia008)); border-radius: 14px; overflow: hidden; transition: transform .35s var(--ease), border-color .35s ease; } .kx-post-card:hover { transform: translateY(-5px); border-color: rgba(214, 167, 86, .4); } .kx-post-card__media img { display: block; width: 100%; height: 180px; object-fit: cover; } .kx-post-card__body { padding: 18px; } .kx-post-card__meta { font: 12px/1 var(--font-label); letter-spacing: .08em; color: var(--accent-ink); margin-bottom: 10px; } .kx-post-card__title { font: 600 17px/1.3 var(--font-head); margin: 0 0 8px; } .kx-post-card__title a { text-decoration: none; color: var(--ink); } .kx-post-card__excerpt { font-size: 13px; line-height: 1.55; color: rgba(var(--ink-rgb), var(--ia06)); margin: 0 0 12px; } .kx-post-card__more { font: 600 13px/1 var(--font-nav); color: var(--accent-ink); text-decoration: none; } .kx-pagination { margin-top: 32px; } .kx-pagination .page-numbers { display: inline-block; padding: 8px 12px; border: 1px solid rgba(var(--ink-rgb), var(--ia02)); border-radius: 7px; margin-inline-end: 6px; text-decoration: none; color: var(--ink); font: 500 13px/1 var(--font-nav); } .kx-pagination .page-numbers.current { background: var(--accent); color: #090A0C; border-color: var(--accent); } .kx-article { max-width: 780px; margin: 0 auto; } .kx-article__media img { width: 100%; border-radius: 14px; margin-bottom: 28px; } .kx-content { font-family: var(--font-body); font-size: 16px; line-height: 1.75; color: rgba(var(--ink-rgb), var(--ia072)); } .kx-content h2, .kx-content h3, .kx-content h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.25; } .kx-content a { color: var(--accent-ink); } .kx-content img { border-radius: 12px; } /* ------------------------------------------------------------------------- 19a. Contact page ---------------------------------------------------------------------- */ .kx-contact { max-width: 1280px; margin: 0 auto; padding: 36px 20px 64px; } .kx-contact__head { max-width: 640px; margin-bottom: 32px; } .kx-contact__title { font: 700 clamp(30px, 5vw, 44px)/1.15 var(--font-head); color: var(--ink); margin: 0 0 14px; } .kx-contact__intro { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: rgba(var(--ink-rgb), var(--ia072)); margin: 0; } .kx-contact__grid { display: grid; grid-template-columns: 1fr; gap: 32px; } .kx-cinfo__block { margin-bottom: 26px; } .kx-cinfo__heading { display: flex; align-items: center; gap: 9px; font: 600 13px/1 var(--font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 12px; } .kx-cinfo__icon { width: 18px; height: 18px; flex-shrink: 0; } .kx-cinfo__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .kx-cinfo__list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .kx-cinfo__label { font: 500 12.5px/1 var(--font-nav); color: rgba(var(--ink-rgb), var(--ia058)); min-width: 92px; } .kx-cinfo__list a, .kx-cinfo__list span:not(.kx-cinfo__label) { font-family: var(--font-body); font-size: 15px; color: var(--ink); text-decoration: none; } .kx-cinfo__list a:hover { color: var(--accent-ink); } .kx-cinfo__wa, .kx-cinfo__wa-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-ink) !important; text-decoration: none; } .kx-cinfo__wa svg { width: 16px; height: 16px; } .kx-cinfo__text { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: rgba(var(--ink-rgb), var(--ia072)); margin: 0; } .kx-cinfo__note { font: 12px/1.5 monospace; color: rgba(var(--ink-rgb), var(--ia045)); margin: 18px 0 0; } .kx-cinfo__socials { margin-top: 22px; } .kx-cform { background: var(--surface); border: 1px solid rgba(var(--ink-rgb), var(--ia008)); border-radius: 16px; padding: 26px 22px; } .kx-cform__heading { font: 700 21px/1.2 var(--font-form, var(--font-head)); color: var(--ink); margin: 0 0 8px; } .kx-cform__desc { font-family: var(--font-form, var(--font-body)); font-size: 14px; color: rgba(var(--ink-rgb), var(--ia065)); margin: 0 0 22px; } .kx-form__grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 18px; } .kx-field { display: flex; flex-direction: column; gap: 6px; } .kx-field--wide { grid-column: 1 / -1; } .kx-field label { font-family: var(--font-form, var(--font-nav)); font-weight: 600; font-size: 12px; line-height: 1; color: rgba(var(--ink-rgb), var(--ia065)); } .kx-field input, .kx-field select, .kx-field textarea { font-family: var(--font-form, var(--font-body)); font-size: 14.5px; color: var(--ink); background: var(--bg); border: 1px solid rgba(var(--ink-rgb), var(--ia014)); border-radius: 9px; padding: 11px 13px; transition: border-color .25s ease; } .kx-field input:focus, .kx-field select:focus, .kx-field textarea:focus { border-color: var(--accent); outline: none; } .kx-field textarea { resize: vertical; } .kx-field__err { font-size: 12px; color: #d8664f; min-height: 1px; } .kx-field.is-invalid input, .kx-field.is-invalid textarea { border-color: #d8664f; } .kx-field__hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; } .kx-cform__submit { width: 100%; justify-content: center; } .kx-cform__submit:disabled { opacity: .6; cursor: progress; } .kx-form-status { margin-bottom: 16px; padding: 12px 14px; border-radius: 9px; font: 500 13.5px/1.5 var(--font-body); } .kx-form-status--success { background: rgba(80, 170, 110, .12); color: #4caf7d; border: 1px solid rgba(80, 170, 110, .3); } .kx-form-status--error { background: rgba(216, 102, 79, .12); color: #d8664f; border: 1px solid rgba(216, 102, 79, .3); } /* ------------------------------------------------------------------------- 19b. WhatsApp pre-chat window — same Dark/Light tokens as the whole site. ---------------------------------------------------------------------- */ .kx-wa-win { position: fixed; z-index: 45; bottom: calc(var(--kx-wa-offset-y, 20px) + var(--kx-wa-size, 52px) + 14px); width: min(var(--kx-wa-win-w, 360px), calc(100vw - 24px)); max-height: min(520px, calc(100vh - 120px)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid rgba(214, 167, 86, .3); border-radius: var(--kx-wa-win-radius, 18px); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); overflow: hidden; opacity: 1; transform: none; } .kx-wa-win--end { inset-inline-end: var(--kx-wa-offset-x, 20px); } .kx-wa-win--start { inset-inline-start: var(--kx-wa-offset-x, 20px); } .kx-wa-win--anim { opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .28s ease, transform .28s ease; } .kx-wa-win--anim.is-open { opacity: 1; transform: none; } .kx-wa-win__head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; border-bottom: 1px solid rgba(var(--ink-rgb), var(--ia008)); } .kx-wa-win__avatar { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--bg); border: 1px solid rgba(214, 167, 86, .3); display: flex; align-items: center; justify-content: center; } .kx-wa-win__avatar-img { width: 100%; height: 100%; object-fit: cover; } .kx-wa-win__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .kx-wa-win__name { font: 700 14px/1.2 var(--font-head); color: var(--ink); } .kx-wa-win__status { display: flex; align-items: center; gap: 5px; font: 500 11.5px/1 var(--font-body); color: rgba(var(--ink-rgb), var(--ia058)); } .kx-wa-win__dot { width: 7px; height: 7px; border-radius: 50%; background: #4caf7d; box-shadow: 0 0 0 2px rgba(76, 175, 125, .25); } .kx-wa-win__close { border: 0; background: rgba(var(--ink-rgb), var(--ia008)); color: var(--ink); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; flex-shrink: 0; font-size: 11px; } .kx-wa-win__body { padding: 16px; overflow-y: auto; flex: 1; } .kx-wa-win__bubble { background: rgba(214, 167, 86, .1); border: 1px solid rgba(214, 167, 86, .25); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; } .kx-wa-win__bubble strong { font: 700 13.5px/1.35 var(--font-head); color: var(--ink); } .kx-wa-win__bubble span { font: 400 12.5px/1.4 var(--font-body); color: rgba(var(--ink-rgb), var(--ia065)); } .kx-wa-win__quick { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; } .kx-wa-win__opt { display: flex; align-items: center; gap: 9px; text-align: start; background: var(--bg); border: 1px solid rgba(var(--ink-rgb), var(--ia012)); border-radius: 9px; padding: 9px 11px; font: 500 12.5px/1.35 var(--font-body); color: var(--ink); cursor: pointer; transition: border-color .2s ease, background .2s ease; } .kx-wa-win__opt:hover { border-color: var(--accent); background: rgba(214, 167, 86, .08); } .kx-wa-win__opt-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent-ink); } .kx-wa-win__opt-icon svg { width: 100%; height: 100%; } .kx-wa-win__input { width: 100%; font-family: var(--font-body); font-size: 13px; color: var(--ink); background: var(--bg); border: 1px solid rgba(var(--ink-rgb), var(--ia014)); border-radius: 9px; padding: 10px 12px; resize: vertical; } .kx-wa-win__foot { padding: 12px 16px 16px; } .kx-wa-win__continue { width: 100%; justify-content: center; gap: 8px; } .kx-wa-win__continue svg { width: 16px; height: 16px; } /* ------------------------------------------------------------------------- 20. Desktop (≥ 1024px) ---------------------------------------------------------------------- */ @media (min-width: 1024px) { :root { --head-gap: 32px; } .kx-mobile-only, .kx-drawer, .kx-scrim { display: none !important; } .kx-nav.kx-desktop-only { display: block; } .kx-lang.kx-desktop-only { display: inline; } .kx-btn--header.kx-desktop-only { display: inline-block; } .kx-switch.kx-desktop-only { display: flex; } /* header */ .kx-header-wrap { padding: 16px 20px 0; } .kx-header__inner { padding: 11px 22px; } .kx-header-wrap.is-scrolled:not(.kx-header-wrap--static) .kx-header__inner { padding: 8px 22px; } .kx-logo__img { height: calc(56px * var(--kx-logo-scale, 1)); } /* sections */ .kx-section { padding: 46px 32px; } .kx-section--cta { padding: 26px 32px 64px; } .kx-h2 { font-size: clamp(28px, 3.4vw, 38px); } /* hero */ .kx-hero { padding: 36px 32px 36px; } .kx-hero--video-bg { padding: 56px max(32px, calc(50% - 608px)); min-height: 400px; } .kx-hero__grid { grid-template-columns: 1.1fr .9fr; } .kx-hero--video-bg .kx-hero__grid { grid-template-columns: minmax(0, 640px); } .kx-hero--media-left .kx-hero__grid { grid-template-columns: .9fr 1.1fr; } .kx-hero__title { font-size: clamp(40px, 5vw, 58px); } .kx-hero__desc { font-size: 16px; } .kx-hero__visual { min-height: 240px; } .kx-hero__grid { gap: 40px; } .kx-hero__k { width: 270px; } /* pillars: chapters sit side by side as strips; the open strip widens */ .kx-chapters { flex-direction: row; gap: 12px; height: clamp(440px, 38vw, 520px); } .kx-chapter { flex: 1 1 0; padding: 0 22px 26px; border-radius: 16px; } .kx-chapter.is-open { flex-basis: 0; flex-grow: 2.6; } .kx-chapter__btn { display: block; } .kx-chapter__num { position: absolute; top: 24px; inset-inline-start: 22px; } .kx-chapter__icon { position: absolute; top: 19px; inset-inline-end: 19px; width: 28px; height: 28px; } .kx-chapter__title { display: block; font-size: 44px; line-height: 1.08; letter-spacing: -.03em; transform: scale(.41); transform-origin: left bottom; } :root[dir="rtl"] .kx-chapter__title { font-size: 38px; line-height: 1.35; transform: scale(.47); transform-origin: right bottom; } /* fixed measure: the text never re-wraps while its strip is widening */ .kx-chapter__desc { width: 36ch; max-width: none; margin-top: 12px; font-size: 16px; } /* services: four boards in the art-directed composition (units are the 1216px design grid) */ .kx-lb--compose .kx-lb__stage { display: block; height: calc(632 / 1216 * 100cqw + 180px); } /* room for two-line titles and three-line descriptions */ .kx-lb--compose .kx-lb__head { position: absolute; top: 6px; inset-inline-start: 0; width: min(30cqw, 360px); } .kx-lb--compose .kx-lb__card { position: absolute; top: calc(var(--y) / 1216 * 100cqw); inset-inline-start: calc(var(--x) / 1216 * 100cqw); width: calc(var(--w) / 1216 * 100cqw); margin: 0; z-index: var(--z); } .kx-lb--compose .kx-lb__media { aspect-ratio: auto; height: calc(var(--ih) / 1216 * 100cqw); } .kx-lb--compose .kx-lb__card:nth-of-type(1) { --x: 60; --y: 190; --w: 330; --ih: 290; --r: -.9; --z: 3; } .kx-lb--compose .kx-lb__card:nth-of-type(2) { --x: 404; --y: 0; --w: 520; --ih: 300; --r: .3; --z: 4; } .kx-lb--compose .kx-lb__card:nth-of-type(3) { --x: 872; --y: 110; --w: 300; --ih: 400; --r: .7; --z: 2; } .kx-lb--compose .kx-lb__card:nth-of-type(4) { --x: 400; --y: 432; --w: 380; --ih: 200; --r: -.5; --z: 1; } .kx-lb--compose .kx-lb__label { padding: 16px 20px 18px; } .kx-lb--compose .kx-lb__title { font-size: 19px; } /* process */ .kx-section__head--process { grid-template-columns: 1.2fr 1fr; } .kx-flow { --kx-flow-ring: 64px; } .kx-flow .kx-section__head { margin-bottom: 76px; } .kx-flow__steps { grid-template-columns: repeat(var(--kx-n, 5), minmax(0, 1fr)); column-gap: 32px; row-gap: 0; } .kx-flow__step { display: block; } .kx-flow__step:nth-child(even) { padding-inline-start: 0; margin-top: 112px; } .kx-flow__text { padding-top: 26px; } .kx-flow__desc { max-width: 21ch; } /* industries: the text beside the lens */ .kx-ap__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; } .kx-ap__text { display: grid; gap: 30px; align-content: center; min-width: 0; } .kx-ap__panels { min-height: 150px; } .kx-ap__lens { width: min(100%, 600px); } .kx-ap__panels { order: 1; } .kx-ap__chips { order: 2; } /* creative lab */ .kx-concepts { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; height: 480px; } .kx-concept { aspect-ratio: auto; } .kx-concept--featured { grid-row: 1 / 3; } /* philosophy */ .kx-philosophy { gap: 20px; } .kx-philosophy__word { font-size: clamp(28px, 4vw, 44px); } /* cta — [K-symbol | text | button] left→right; mirrored text/button in RTL, K-symbol stays on the left and rises above the top edge. */ .kx-cta { --kx-cta-img: 320px; grid-template-columns: var(--kx-cta-col, 270px) minmax(0, 1fr) auto; column-gap: 32px; padding: 48px; min-height: 200px; } :root[dir="rtl"] .kx-cta { grid-template-columns: minmax(0, 1fr) auto var(--kx-cta-col, 270px); } .kx-cta__text { grid-column: 2; grid-row: 1; } :root[dir="rtl"] .kx-cta__text { grid-column: 1; } .kx-cta__title { font-size: 30px; } .kx-cta__action { grid-row: 1; grid-column: 3; justify-self: end; } :root[dir="rtl"] .kx-cta__action { grid-column: 2; justify-self: start; } .kx-cta__visual { grid-row: 1; grid-column: 1; height: auto; } :root[dir="rtl"] .kx-cta__visual { grid-column: 3; } .kx-cta__img { left: -74px; bottom: auto; top: 50%; transform: translateY(-55%); } /* footer */ .kx-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; padding: 52px 32px 24px; } .kx-logo--footer .kx-logo__img { height: calc(58px * var(--kx-footer-logo-scale, 1)); } .kx-footer__legal { padding: 20px 32px 24px; } /* inner pages */ .kx-page { padding: 56px 32px 80px; } .kx-posts { grid-template-columns: repeat(3, 1fr); gap: 20px; } /* contact page */ .kx-contact { padding: 56px 32px 90px; } .kx-contact__grid { grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: start; } .kx-cform { padding: 34px 36px; } } /* Wide desktop: the open strip takes a larger share and closed titles grow a little. */ @media (min-width: 1280px) { .kx-chapter.is-open { flex-grow: 3.2; } .kx-chapter__title { transform: scale(.45); } :root[dir="rtl"] .kx-chapter__title { transform: scale(.5); } } /* ------------------------------------------------------------------------- 21. Reduced motion — decorative motion off, content visible immediately. Click-driven state changes (pillars / theme) stay instant. ---------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .kx-reveal, .kx-stagger > * { opacity: 1 !important; transform: none !important; } .kx-btn:hover, .kx-post-card:hover, .kx-wa:hover, .kx-social:hover, .kx-lb .kx-lb__card:hover, .kx-lb__card:hover .kx-lb__img, .kx-concept:hover .kx-concept__img, .kx-concept:hover .kx-concept__badge, .kx-clients a.kx-client__link:hover, .kx-clients a.kx-client__link:hover .kx-client__logo { transform: none !important; } }