/* QAVUN website — production stylesheet. Night theme (dark, photography-led) per the design-system readme: "Night — default, web + presentation". Tokens ported from tokens/colors.css, typography.css, spacing.css. No framework. */ @import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap"); :root { --k-ink-1: #16161a; --k-ink-2: #55555c; --k-ink-3: #8e8e94; --k-paper: #fafaf8; --k-paper-2: #f1f1ee; --k-hairline: #dcdcd8; --k-night: #0f0f11; --k-night-2: #17171a; --k-night-3: #202024; --k-fog-1: #f2f2ef; --k-fog-2: #a4a4a8; --k-fog-3: #6d6d72; --k-hairline-dark: #2a2a2e; --k-brass: #f0690a; --k-brass-bright: #ff8c38; --k-brass-deep: #cc5507; /* QAVUN logo orange (token name kept) */ --k-font: "Archivo", "Helvetica Neue", Arial, sans-serif; --k-spec-size: 13px; --k-spec-stretch: 94%; --k-nav-bg: rgba(15,15,17,0.86); --k-nav-bg-scrolled: rgba(15,15,17,0.94); --k-dot-ring: rgba(255,255,255,0.14); --k-container: 1240px; --k-side: clamp(20px, 5vw, 64px); } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } html, body { margin: 0; background: var(--k-night); color: var(--k-fog-1); font-family: var(--k-font); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } p { margin: 0 0 14px; } p:last-child { margin-bottom: 0; } .k-accent-dot { color: var(--k-brass); } /* ---- reveal-on-scroll (slow, calm — per brand animation guidance) ------- Visible by default: content must never depend on JS to be readable. The hidden-until-scrolled starting state is opted into only once script.js has run and tagged , via the earliest possible inline script in — so a blocked/failed script.js simply leaves everything shown. */ .reveal { opacity: 1; transform: none; transition: opacity 600ms ease-out, transform 600ms ease-out; } .js .reveal { opacity: 0; transform: translateY(16px); } .js .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Grid children stagger in one after another; script.js tags them with .reveal-item and a per-index transition-delay. Same JS-gated safety. */ .reveal-item { opacity: 1; transform: none; transition: opacity 700ms ease-out, transform 700ms ease-out; } .js .reveal-item { opacity: 0; transform: translateY(20px); } .js .reveal-item.is-visible { opacity: 1; transform: translateY(0); } /* Large photography settles from a slight zoom as its section reveals. */ .js .reveal .k-family__img img, .js .reveal .k-imagebreak img { transform: scale(1.05); transition: transform 1400ms cubic-bezier(0.22, 1, 0.36, 1); } .js .reveal.is-visible .k-family__img img, .js .reveal.is-visible .k-imagebreak img { transform: scale(1); } @media (prefers-reduced-motion: reduce) { .js .reveal, .js .reveal-item { opacity: 1; transform: none; transition: none; } .js .reveal .k-family__img img, .js .reveal .k-imagebreak img { transform: none; transition: none; } } ::selection { background: var(--k-brass); color: var(--k-night); } /* Keyboard focus: a visible brass ring, only for keyboard navigation. */ :focus-visible { outline: 2px solid var(--k-brass); outline-offset: 3px; } /* Skip link: hidden until focused, then pinned top-left over everything. */ .k-skip { position: fixed; top: -48px; left: 16px; z-index: 100; padding: 12px 20px; background: var(--k-brass); color: var(--k-night); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; transition: top 200ms ease-out; } .k-skip:focus { top: 16px; } /* ---- i18n: language switcher + RTL --------------------------------------- */ .k-nav__lang { display: flex; align-items: center; gap: 2px; padding-inline-start: 18px; border-inline-start: 1px solid var(--k-hairline-dark); } .k-nav__lang-link { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--k-fog-3); padding: 6px 6px; transition: color 200ms; } .k-nav__lang-link:hover { color: var(--k-brass); } .k-nav__lang-link.is-current { color: var(--k-fog-1); } @media (max-width: 860px) { .k-nav__lang { padding-inline-start: 0; border-inline-start: none; margin-top: 10px; } .k-nav__lang-link { font-size: 13px; padding: 8px 10px 8px 0; } } /* Arabic: RTL flows via dir="rtl"; tracking and width-stretch are Latin affordances that hurt Arabic script, so neutralize them and switch to an Arabic sans. */ html[lang="ar"] { --k-font: "Noto Sans Arabic", "Archivo", "Helvetica Neue", Arial, sans-serif; } html[dir="rtl"] * { letter-spacing: 0 !important; font-stretch: 100% !important; } html[dir="rtl"] .k-spec-val, html[dir="rtl"] .k-card__code, html[dir="rtl"] .k-product__code { text-align: left; direction: ltr; } html[dir="rtl"] .k-hero__scroll { right: auto; left: var(--k-side); } /* ---- type -------------------------------------------------------------- */ .k-h1 { font-size: clamp(32px, 5vw, 54px); line-height: 1.06; font-weight: 560; font-stretch: 118%; letter-spacing: -0.01em; color: var(--k-fog-1); margin: 0; } .k-h2 { font-size: clamp(24px, 3.2vw, 36px); line-height: 1.12; font-weight: 560; font-stretch: 118%; letter-spacing: -0.01em; color: var(--k-fog-1); margin: 0; } .k-body { font-size: 15px; line-height: 1.65; color: var(--k-fog-2); } .k-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--k-fog-3); } .k-enquiry-chip { display: inline-block; margin-top: 18px; padding: 8px 14px; border: 1px solid var(--k-brass); color: var(--k-brass); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; } .k-enquiry-chip[hidden] { display: none; } .k-textlink { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--k-brass); white-space: nowrap; } .k-textlink:hover { color: var(--k-brass-bright); } .k-note { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--k-fog-3); } .k-note--pad { padding: 0 var(--k-side) 64px; } /* ---- Paper section (light, editorial break in the night surface — the long-form-copy passages read the way Kreon's white content sections do, between full-bleed photography that stays on the dark surface) ------------- */ .k-section--paper { background: var(--k-paper); color: var(--k-ink-1); --k-fog-1: var(--k-ink-1); --k-fog-2: var(--k-ink-2); --k-fog-3: var(--k-ink-3); --k-hairline-dark: var(--k-hairline); --k-night: var(--k-paper); --k-night-2: var(--k-paper-2); --k-night-3: var(--k-paper-2); } /* ---- layout helpers ------------------------------------------------------ */ .k-section { max-width: var(--k-container); margin: 0 auto; padding: 72px var(--k-side); } .k-section__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; } .k-page-head { max-width: var(--k-container); margin: 0 auto; padding: 96px var(--k-side) 48px; } .k-page-head__intro { max-width: 620px; margin-top: 18px; } /* ---- Nav ------------------------------------------------------------------- */ .k-nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px var(--k-side); background: var(--k-nav-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--k-hairline-dark); transition: padding 300ms ease-out, background 300ms ease-out; } .k-nav.is-scrolled { padding-top: 13px; padding-bottom: 13px; background: var(--k-nav-bg-scrolled); } .k-nav__mark { display: flex; align-items: center; } /* Brand logo image pair — the dark-lettered original on light (paper) pages, the white-lettered variant on the night theme (home). */ .k-logo { display: block; width: auto; } .k-logo--onlight { display: none; } body.k-light .k-logo--onlight { display: block; } body.k-light .k-logo--ondark { display: none; } .k-nav__logo { height: 40px; } .k-footer-site__logo { height: 48px; } .k-nav__links { display: flex; align-items: center; gap: 30px; } .k-nav__link { position: relative; font-size: 14px; font-weight: 560; letter-spacing: 0.01em; text-transform: lowercase; color: var(--k-fog-1); padding-bottom: 4px; transition: color 200ms ease-out; } .k-nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--k-brass); transform: scaleX(0); transform-origin: left; transition: transform 300ms ease-out; } .k-nav__link:hover { color: var(--k-brass); } .k-nav__link:hover::after { transform: scaleX(1); } .k-nav__link--active { color: var(--k-brass); } .k-nav__link--active::after { transform: scaleX(1); } .k-nav__cta { border-radius: 10px; font-size: 12px; letter-spacing: 0.02em; text-transform: lowercase; color: var(--k-fog-1); border: 1px solid var(--k-hairline-dark); padding: 9px 18px; transition: border-color 200ms, color 200ms; } .k-nav__cta:hover { border-color: var(--k-brass); color: var(--k-brass); } .k-nav__burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; background: none; border: none; cursor: pointer; padding: 0; } .k-nav__burger span { display: block; width: 100%; height: 1px; background: var(--k-fog-1); } @media (max-width: 860px) { /* The closed off-canvas menu (translateX(100%)) still counts toward the document's scrollable width; clip it so the page can't pan sideways. */ html, body { overflow-x: hidden; } /* backdrop-filter turns the header into the containing block for its fixed descendants, trapping the open menu inside the 69px-tall header (only the first item was visible). Use an opaque header on mobile so the menu panel is sized against the real viewport. */ .k-nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--k-night); } .k-nav__burger { display: flex; } .k-nav__links { position: fixed; inset: 69px 0 0 0; background: var(--k-night); flex-direction: column; align-items: flex-start; padding: 32px var(--k-side); gap: 22px; transform: translateX(100%); transition: transform 300ms ease-out; overflow-y: auto; } .k-nav__links.is-open { transform: translateX(0); } .k-nav__cta { margin-top: 8px; } } /* ---- Wordmark ---------------------------------------------------------------- */ .k-wordmark { font-family: var(--k-font); display: inline-block; line-height: 1; } .k-wordmark__mark { font-weight: 620; font-stretch: 118%; letter-spacing: 0.14em; text-transform: uppercase; color: var(--k-fog-1); } .k-wordmark__tagline { letter-spacing: 0.3em; color: var(--k-fog-3); } /* ---- Hero -------------------------------------------------------------------- */ .k-hero { position: relative; overflow: hidden; background: var(--k-night); } .k-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .k-hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,15,17,0.82) 0%, rgba(15,15,17,0.15) 60%); } .k-hero__content { position: absolute; left: var(--k-side); right: var(--k-side); bottom: 56px; } /* Entrance: the photograph settles from a slow zoom while the copy rises in sequence. CSS-only on load; JS-gated so a blocked script leaves all shown. */ @media (prefers-reduced-motion: no-preference) { .js .k-hero__img { animation: k-hero-settle 4s cubic-bezier(0.22, 1, 0.36, 1) both; } .js .k-hero__content > * { animation: k-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) both; } .js .k-hero__content > :nth-child(1) { animation-delay: 150ms; } .js .k-hero__content > :nth-child(2) { animation-delay: 300ms; } .js .k-hero__content > :nth-child(3) { animation-delay: 450ms; } .js .k-hero__content > :nth-child(4) { animation-delay: 600ms; } } @keyframes k-hero-settle { from { transform: scale(1.07); } to { transform: scale(1); } } @keyframes k-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } /* Scroll cue: a slim brass line that draws downward, bottom-right of the hero. */ .k-hero__scroll { position: absolute; right: var(--k-side); bottom: 0; width: 1px; height: 72px; overflow: hidden; } .k-hero__scroll::after { content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent, var(--k-brass)); animation: k-scroll-cue 2.4s ease-in-out infinite; } @keyframes k-scroll-cue { 0% { top: -100%; } 55% { top: 0; } 100% { top: 100%; } } @media (prefers-reduced-motion: reduce) { .k-hero__scroll { display: none; } } @media (max-width: 640px) { .k-hero__scroll { display: none; } } .k-kicker { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--k-brass-bright); margin-bottom: 18px; } .k-hero__title { font-size: clamp(32px, 5.8vw, 60px); line-height: 1.08; font-weight: 500; font-stretch: 118%; letter-spacing: -0.01em; color: var(--k-fog-1); max-width: 780px; margin: 0; } .k-hero__subtitle { font-size: 15px; line-height: 1.6; color: var(--k-fog-2); margin-top: 18px; max-width: 480px; } .k-hero__cta { display: inline-block; margin-top: 28px; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--k-fog-1); border: 1px solid rgba(242,242,239,0.4); padding: 13px 30px; transition: border-color 200ms, color 200ms; border-radius: 12px; } .k-hero__cta:hover { border-color: var(--k-brass); color: var(--k-brass); } /* ---- Buttons ------------------------------------------------------------------ */ .k-btn { display: inline-block; font-family: var(--k-font); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1; cursor: pointer; transition: all 220ms ease-out; border-radius: 12px; /* login-page button treatment, sitewide (user rule) */ } .k-btn--md { font-size: 12px; padding: 12px 26px; } .k-btn--sm { font-size: 11px; padding: 8px 18px; } .k-btn--primary { background: var(--k-fog-1); color: var(--k-night); border: 1px solid var(--k-fog-1); } .k-btn--primary:hover { background: var(--k-brass); border-color: var(--k-brass); color: var(--k-night); } .k-btn--outline { background: transparent; color: var(--k-fog-1); border: 1px solid var(--k-hairline-dark); } .k-btn--outline:hover { border-color: var(--k-fog-1); } .k-btn--brass { background: transparent; color: var(--k-brass); border: 1px solid var(--k-brass); } .k-btn--brass:hover { background: var(--k-brass); color: var(--k-night); } /* ---- Badge ------------------------------------------------------------------ */ .k-badge { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--k-fog-1); background: var(--k-night-2); border: 1px solid var(--k-hairline-dark); padding: 6px 11px; display: inline-block; white-space: nowrap; line-height: 1; } .k-badge-row { display: flex; flex-wrap: wrap; gap: 10px; } /* ---- Label ------------------------------------------------------------------- */ .k-label { display: flex; align-items: center; gap: 16px; } .k-label__text { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--k-fog-3); white-space: nowrap; } .k-label__text--brass { color: var(--k-brass); } .k-label__rule { flex: 1; height: 1px; background: var(--k-hairline-dark); } /* ---- SpecTable ----------------------------------------------------------------- */ .k-spec-table { display: grid; gap: 0 32px; } .k-spec-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--k-hairline-dark); } .k-spec-key { font-size: 12px; letter-spacing: 0.02em; color: var(--k-fog-3); } .k-spec-val { font-size: var(--k-spec-size); font-stretch: var(--k-spec-stretch); font-weight: 500; color: var(--k-fog-1); text-align: right; white-space: nowrap; } /* ---- FinishSwatches -------------------------------------------------------------- */ .k-finishes { display: flex; gap: 20px; flex-wrap: wrap; } .k-finish { text-align: center; } .k-finish__swatch { width: 34px; height: 34px; box-sizing: border-box; margin: 0 auto; border: 1px solid var(--k-hairline-dark); } .k-finish__name { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 7px; max-width: 66px; color: var(--k-fog-3); } /* ---- dimension / polar diagrams --------------------------------------------------- */ .k-dim { width: 100%; max-width: 260px; height: auto; } .k-polar { width: 100%; max-width: 190px; height: auto; } .k-polar__caption { font-size: 10px; letter-spacing: 0.06em; color: var(--k-fog-3); margin-top: 2px; } /* ---- ProductCard ------------------------------------------------------------------ Kreon/Centersvet-style: every card sits on the SAME light studio panel so the grid reads as one system; multiply-blending melts white studio shots into the panel. Fixed columns: 4 on desktop, 2 on mobile (user rule). */ /* minmax(0,1fr): a bare 1fr lets long nowrap product names blow their column wider than siblings — 0 as the min keeps all columns exactly equal. */ .k-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; } .k-card { display: block; position: relative; } .k-card__link { display: block; color: inherit; } .k-card__img { aspect-ratio: 4 / 5; background: linear-gradient(180deg, #f4f4f2 0%, #eaeae8 100%); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 22px; box-sizing: border-box; } .k-card__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform 500ms ease-out, opacity 300ms ease-out; } .k-card:hover .k-card__img img { transform: scale(1.04); opacity: 0.92; } @media (max-width: 1100px) { .k-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { .k-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; } .k-card__img { padding: 14px; } } .k-card__row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; gap: 12px; } .k-card__name { font-size: 13.5px; font-weight: 640; letter-spacing: 0.04em; text-transform: uppercase; color: var(--k-fog-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 200ms; } .k-card:hover .k-card__name { color: var(--k-brass); } .k-card__code { font-size: 11px; letter-spacing: 0.1em; color: var(--k-fog-3); white-space: nowrap; } .k-card__spec { font-size: 11px; letter-spacing: 0.08em; color: var(--k-fog-3); margin-top: 4px; } .k-card__finishes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; padding: 7px 9px; border: 1px solid var(--k-hairline-dark); width: fit-content; } .k-card__dot { width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box; border: 1px solid var(--k-dot-ring); flex: none; } /* ---- Wishlist heart (on cards; the whole card is a link, heart sits above) --------- */ .k-wish { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: rgba(15,15,17,0.55); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.14); color: var(--k-fog-1); cursor: pointer; opacity: 0; transition: opacity 200ms, color 200ms, border-color 200ms, background 200ms; } .k-card:hover .k-wish, .k-wish:focus-visible, .k-wish.is-on { opacity: 1; } .k-wish svg { width: 18px; height: 18px; transition: fill 200ms; } .k-wish:hover { border-color: var(--k-brass); color: var(--k-brass); } .k-wish.is-on { color: var(--k-brass); border-color: var(--k-brass); background: rgba(15,15,17,0.7); } .k-wish.is-on svg { fill: var(--k-brass); } @media (hover: none) { .k-wish { opacity: 1; } } /* Save-to-selection button (product detail CTA row) */ .k-wish-btn { display: inline-flex; align-items: center; gap: 8px; } .k-wish-btn svg { width: 16px; height: 16px; } .k-wish-btn.is-on { border-color: var(--k-brass); color: var(--k-brass); } .k-wish-btn.is-on svg { fill: var(--k-brass); } .k-wish-btn__added { display: none; } .k-wish-btn.is-on .k-wish-btn__add { display: none; } .k-wish-btn.is-on .k-wish-btn__added { display: inline; } /* ---- Footer ------------------------------------------------------------------------ */ .k-footer-site { background: var(--k-night); border-top: 1px solid var(--k-hairline-dark); padding: 56px var(--k-side) 32px; } .k-footer-site__grid { max-width: var(--k-container); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; } .k-footer-site__mark { font-size: 19px; font-weight: 620; font-stretch: 118%; letter-spacing: 0.14em; text-transform: uppercase; color: var(--k-fog-1); } .k-footer-site__tagline { font-size: 11px; letter-spacing: 0.3em; color: var(--k-fog-3); margin-top: 10px; } .k-social { display: flex; gap: 12px; margin-top: 22px; } .k-social__icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; box-sizing: border-box; border: 1px solid var(--k-hairline-dark); color: var(--k-fog-3); cursor: default; transition: color 200ms, border-color 200ms; } .k-social__icon:hover { color: var(--k-brass); border-color: var(--k-brass); } .k-social__icon svg { width: 15px; height: 15px; } .k-footer-site__h { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--k-fog-3); margin-bottom: 16px; } .k-footer-site__links { display: grid; gap: 9px; } .k-footer-site__links a { font-size: 13px; color: var(--k-fog-2); transition: color 200ms; } .k-footer-site__links a:hover { color: var(--k-brass); } .k-footer-site__bar { max-width: var(--k-container); margin: 48px auto 0; padding-top: 20px; border-top: 1px solid var(--k-hairline-dark); display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.08em; color: var(--k-fog-3); flex-wrap: wrap; gap: 8px 24px; } .k-footer-site__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; } .k-footer-site__legal a { color: var(--k-fog-3); transition: color 200ms; } .k-footer-site__legal a:hover { color: var(--k-brass); } @media (max-width: 760px) { .k-footer-site__grid { grid-template-columns: 1fr 1fr; } } /* ---- Home: family feature panel (from ui_kits/website) ------------------------------ */ .k-family { display: grid; grid-template-columns: 1.2fr 1fr; background: var(--k-night-2); margin: 96px 0; } .k-family--reverse { grid-template-columns: 1fr 1.2fr; } .k-family--reverse .k-family__img { order: 2; } .k-family__img { overflow: hidden; } .k-family__img img { width: 100%; height: 100%; object-fit: cover; min-height: 480px; } .k-family__copy { padding: 64px 56px; display: flex; flex-direction: column; justify-content: center; gap: 24px; } .k-family__name { font-size: clamp(30px, 4vw, 44px); font-weight: 500; font-stretch: 118%; color: var(--k-fog-1); line-height: 1.05; } @media (max-width: 860px) { .k-family, .k-family--reverse { grid-template-columns: 1fr; } .k-family--reverse .k-family__img { order: 0; } .k-family__img img { min-height: 280px; } .k-family__copy { padding: 40px var(--k-side); } } /* ---- Home: category showcase (Centersvet-style full-width slider) ------------------- Slides sit on a light studio-grey gradient with the render CONTAINED, never cover-cropped: most source images are portrait and lower-res than the full viewport, so covering both crops badly and upscales softly. Contain keeps every image at or below its natural size — crisp and complete. */ .k-showcase { position: relative; background: linear-gradient(180deg, #fdfdfc 0%, #ededeb 62%, #dededa 100%); overflow: hidden; } .k-showcase__stage { position: relative; height: clamp(440px, 66vh, 640px); } .k-showcase__slide { position: absolute; inset: 0; display: block; opacity: 0; visibility: hidden; transition: opacity 700ms ease-out, visibility 0s linear 700ms; } .k-showcase__slide.is-active { opacity: 1; visibility: visible; transition: opacity 700ms ease-out; } .k-showcase__slide img { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); width: auto; height: auto; max-width: min(72%, 900px); max-height: 62%; object-fit: contain; mix-blend-mode: multiply; } .k-showcase__scrim { display: none; } /* Full-scene 16:9 banner art runs edge-to-edge; a soft light gradient keeps the ink category name legible against the photograph. */ .k-showcase__slide--photo img { left: 0; top: 0; transform: none; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; mix-blend-mode: normal; } /* Looping product clips (Centersvet-style) fill the slide like photo art; script.js plays only the active slide and never under reduced motion. */ .k-showcase__slide--video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .k-showcase__slide--video .k-showcase__scrim { display: block; position: absolute; inset: 0; background: linear-gradient(to top, rgba(250,250,248,0.92) 0%, rgba(250,250,248,0.35) 26%, rgba(250,250,248,0) 48%); } .k-showcase__slide--photo .k-showcase__scrim { display: block; position: absolute; inset: 0; background: linear-gradient(to top, rgba(250,250,248,0.92) 0%, rgba(250,250,248,0.35) 26%, rgba(250,250,248,0) 48%); } .k-showcase__name { position: absolute; left: 0; right: 0; bottom: 64px; text-align: center; font-size: clamp(40px, 8.5vw, 104px); font-weight: 560; font-stretch: 118%; letter-spacing: 0.06em; text-transform: uppercase; color: var(--k-ink-1); line-height: 1; transition: color 250ms; } .k-showcase__slide:hover .k-showcase__name { color: var(--k-brass-deep); } .k-showcase__nav { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; } .k-showcase__arrow { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: none; color: var(--k-ink-2); cursor: pointer; transition: color 200ms; } .k-showcase__arrow:hover { color: var(--k-brass-deep); } .k-showcase__arrow svg { width: 20px; height: 20px; } .k-showcase__dots { display: flex; align-items: center; } .k-showcase__dot { position: relative; width: 32px; height: 44px; background: none; border: none; cursor: pointer; padding: 0; } .k-showcase__dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--k-ink-3); transition: background 200ms, box-shadow 200ms; } .k-showcase__dot:hover::after { background: var(--k-ink-1); } .k-showcase__dot.is-active::after { background: var(--k-brass-deep); box-shadow: 0 0 0 4px rgba(150,117,78,0.22); } @media (max-width: 640px) { .k-showcase__stage { height: 400px; } .k-showcase__slide img { max-width: 84%; max-height: 52%; top: 40%; } .k-showcase__name { bottom: 72px; } } /* ---- Home: Kreon-style manifesto (paper break) --------------------------------------- */ .k-manifesto-big { max-width: 1000px; margin: 0 auto; padding: clamp(72px, 10vw, 128px) var(--k-side); text-align: center; } .k-manifesto-big__text { font-size: clamp(22px, 3vw, 38px); line-height: 1.42; font-weight: 500; font-stretch: 108%; letter-spacing: -0.005em; color: var(--k-ink-1); margin: 0 0 40px; } /* ---- Home: film band (full-bleed looping product clip + one short line) ------------- */ .k-filmband { position: relative; overflow: hidden; height: clamp(420px, 62vh, 620px); background: var(--k-night-2); margin: 96px 0; } .k-filmband video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .k-filmband__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,15,17,0.72) 0%, rgba(15,15,17,0.25) 55%, rgba(15,15,17,0.15) 100%); } .k-filmband__content { position: absolute; left: 0; right: 0; bottom: 0; top: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--k-side); } .k-filmband__line { font-size: clamp(26px, 3.8vw, 46px); font-weight: 520; font-stretch: 114%; letter-spacing: -0.005em; color: var(--k-fog-1); line-height: 1.15; margin: 14px 0 26px; max-width: 820px; } /* ---- Home: brass statement (from ui_kits/website) ------------------------------------ */ .k-statement { padding: 96px var(--k-side); text-align: center; } .k-statement__kicker { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--k-brass); margin-bottom: 24px; } .k-statement__line { font-size: clamp(26px, 3.4vw, 40px); font-weight: 500; font-stretch: 118%; color: var(--k-fog-1); line-height: 1.15; max-width: 820px; margin: 0 auto; } /* ---- Products: family section headers --------------------------------------------------- Typographic only — no product imagery (user rule): big index number, letterspaced title and count over a hairline rule. */ .k-family-banner { border-top: 1px solid var(--k-hairline-dark); padding-top: 28px; } .k-family-banner__label { display: flex; align-items: baseline; gap: 16px; } .k-family-banner__num { font-size: 44px; font-weight: 560; font-stretch: 118%; color: var(--k-fog-1); line-height: 1; } .k-family-banner__title { font-size: 13px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--k-fog-1); } .k-family-banner__count { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--k-fog-3); } @media (max-width: 640px) { .k-family-banner__num { font-size: 32px; } } /* ---- Contact: form + hours ------------------------------------------------------------- */ .k-contact-grid--form { align-items: start; } .k-form { margin-top: 22px; display: grid; gap: 18px; } .k-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .k-form__field { display: grid; gap: 8px; } .k-form__label { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--k-ink-3, #6b6b70); } .k-form__input { width: 100%; box-sizing: border-box; background: transparent; border: 1px solid rgba(15,15,17,0.22); padding: 12px 14px; font-family: var(--k-font); font-size: 14px; color: inherit; border-radius: 12px; transition: border-color 200ms; } .k-form__input:focus { outline: none; border-color: var(--k-brass); } .k-form__textarea { resize: vertical; min-height: 130px; } .k-form__submit { border: none; cursor: pointer; justify-self: start; font-family: var(--k-font); } .k-form__note { font-size: 11.5px; letter-spacing: 0.04em; color: rgba(15,15,17,0.55); } .k-hours { margin-top: 14px; max-width: 360px; } .k-hours__row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid rgba(15,15,17,0.14); font-size: 13.5px; } .k-hours__val { font-weight: 560; } @media (max-width: 640px) { .k-form__row { grid-template-columns: 1fr; } } /* ---- Journal: post grid + article ------------------------------------------------------ */ .k-post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 44px 28px; } .k-post-card { display: block; } .k-post-card__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--k-night-2); } .k-post-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease-out, opacity 300ms ease-out; } .k-post-card:hover .k-post-card__img img { transform: scale(1.03); opacity: 0.92; } .k-post-card__meta { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--k-fog-3); margin-top: 16px; } .k-post-card__title { font-size: 17px; font-weight: 560; font-stretch: 112%; color: var(--k-fog-1); line-height: 1.35; margin-top: 8px; transition: color 200ms; } .k-post-card:hover .k-post-card__title { color: var(--k-brass); } .k-article { max-width: var(--k-container); margin: 0 auto; padding: 24px var(--k-side) 40px; } .k-article__head { max-width: 760px; margin: 0 auto; text-align: left; padding: 24px 0 32px; } .k-article__title { margin-top: 14px; } .k-article__hero { max-width: 980px; margin: 0 auto; aspect-ratio: 16 / 8; overflow: hidden; background: var(--k-night-2); } .k-article__hero img { width: 100%; height: 100%; object-fit: cover; } .k-article__body { max-width: 720px; margin: 0 auto; padding-top: 40px; } .k-article__h { font-size: 21px; font-weight: 560; font-stretch: 112%; color: var(--k-fog-1); margin: 36px 0 14px; } .k-article__p { margin-bottom: 16px; } .k-article__product { margin-top: 48px; border-top: 1px solid var(--k-hairline-dark); padding-top: 32px; } /* ---- Product detail: gallery ------------------------------------------------------------ */ .k-gallery { display: flex; flex-direction: column; gap: 12px; } .k-gallery__main img[data-gallery-main] { transition: opacity 250ms ease-out; } .k-gallery__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .k-gallery__thumb { aspect-ratio: 1; background: var(--k-night-2); border: 1px solid var(--k-hairline-dark); padding: 8px; box-sizing: border-box; cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: border-color 200ms; } .k-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; opacity: 0.85; transition: opacity 200ms; } .k-gallery__thumb:hover img { opacity: 1; } .k-gallery__thumb.is-active { border-color: var(--k-brass); } .k-gallery__thumb.is-active img { opacity: 1; } /* ---- Product detail: ordering table ----------------------------------------------------- */ .k-ordering { display: grid; gap: 0; } .k-ordering__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--k-hairline-dark); } /* ---- Product detail: variants (order code per finish/power) ------------------------------ */ .k-variants { display: grid; gap: 0; margin-top: 4px; } .k-variant-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--k-hairline-dark); } .k-variant-label { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--k-fog-1); } .k-variant-dot { width: 13px; height: 13px; border-radius: 50%; box-sizing: border-box; border: 1px solid var(--k-dot-ring); flex: none; } .k-variant-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--k-fog-1); } .k-variant-sku { font-size: 12.5px; font-stretch: var(--k-spec-stretch); letter-spacing: 0.04em; color: var(--k-fog-2); white-space: nowrap; } /* ---- Product detail: CAD drawings ------------------------------------------------------- */ .k-cad-list { display: grid; gap: 8px; margin-top: 4px; } .k-cad-item { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 16px; border: 1px solid var(--k-hairline-dark); font-size: 13px; color: var(--k-fog-1); transition: border-color 200ms, color 200ms; } .k-cad-item:hover { border-color: var(--k-brass); color: var(--k-brass); } .k-cad-item__ext { font-size: 11px; letter-spacing: 0.1em; color: var(--k-fog-3); } .k-cad-item:hover .k-cad-item__ext { color: var(--k-brass); } /* ---- Home: manifesto strip --------------------------------------------------------- */ .k-manifesto__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .k-manifesto__copy p { color: var(--k-fog-2); } .k-manifesto__copy .k-btn { margin-top: 12px; } /* ---- Home: collection grid --------------------------------------------------------- */ .k-collection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .k-collection-tile { position: relative; aspect-ratio: 4 / 3; overflow: hidden; display: block; } .k-collection-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease-out; } .k-collection-tile:hover img { transform: scale(1.04); } .k-collection-tile__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,15,17,0.75), rgba(15,15,17,0.05) 55%); } .k-collection-tile__label { position: absolute; left: 28px; bottom: 24px; display: flex; align-items: baseline; gap: 14px; } .k-collection-tile__num { font-size: 34px; font-weight: 560; font-stretch: 118%; color: var(--k-fog-1); } .k-collection-tile__title { font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--k-fog-1); } /* ---- Home: spotlight ---------------------------------------------------------------- */ .k-spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; background: var(--k-night-2); padding: 48px; } .k-spotlight__img { aspect-ratio: 4 / 3; background: var(--k-night-3); display: flex; align-items: center; justify-content: center; overflow: hidden; } .k-spotlight__img img { width: 100%; height: 100%; object-fit: contain; } /* ---- Home: stats ---------------------------------------------------------------------- */ .k-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--k-hairline-dark); border-bottom: 1px solid var(--k-hairline-dark); padding: 32px 0; } .k-stat { text-align: center; border-left: 1px solid var(--k-hairline-dark); } .k-stat:first-child { border-left: none; } .k-stat__v { font-size: clamp(22px, 3vw, 32px); font-weight: 560; font-stretch: 118%; color: var(--k-brass-bright); } .k-stat__k { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--k-fog-3); margin-top: 8px; } /* ---- Home: references teaser --------------------------------------------------------- */ .k-refs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .k-ref-card { border-top: 1px solid var(--k-hairline-dark); padding-top: 20px; } .k-ref-card__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--k-night-2); margin-bottom: 16px; } .k-ref-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease-out; } .k-ref-card:hover .k-ref-card__img img { transform: scale(1.03); } .k-ref-card__name { font-size: 18px; font-weight: 560; font-stretch: 118%; color: var(--k-fog-1); margin-bottom: 14px; } .k-ref-card__row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--k-hairline-dark); font-size: 12.5px; color: var(--k-fog-2); } /* ---- Home: CTA banner ------------------------------------------------------------------ */ .k-cta-banner { text-align: center; max-width: 720px; margin: 0 auto; padding: 96px var(--k-side); display: flex; flex-direction: column; align-items: center; gap: 18px; } .k-cta-banner .k-btn { margin-top: 10px; } /* ---- Products: tabs --------------------------------------------------------------------- */ .k-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; } .k-tabs__item { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--k-fog-2); background: var(--k-night-2); border: 1px solid var(--k-hairline-dark); padding: 10px 18px; transition: border-color 200ms, color 200ms, background 200ms; } .k-tabs__item:hover { border-color: var(--k-brass); color: var(--k-brass); background: var(--k-night-3); } /* ---- Products: technical reference ------------------------------------------------------ */ .k-tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .k-tech-card {} .k-tech-list { margin-top: 16px; display: grid; gap: 11px; font-size: 12.5px; line-height: 1.5; color: var(--k-fog-2); } .k-tech-list__k { display: inline-block; min-width: 52px; color: var(--k-fog-1); font-weight: 500; } /* ---- Breadcrumb ------------------------------------------------------------------------- */ .k-breadcrumb { max-width: var(--k-container); margin: 0 auto; padding: 28px var(--k-side) 0; display: flex; gap: 10px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--k-fog-3); flex-wrap: wrap; } .k-breadcrumb a:hover { color: var(--k-brass); } .k-breadcrumb__current { color: var(--k-fog-1); } /* ---- Product detail --------------------------------------------------------------------- */ .k-product__grid { max-width: var(--k-container); margin: 0 auto; padding: 28px var(--k-side) 72px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; } .k-product__img-panel { position: relative; background: var(--k-night-2); display: flex; align-items: center; justify-content: center; padding: 40px; min-height: 420px; } .k-product__img-panel img { max-width: 82%; max-height: 78%; object-fit: contain; } .k-product__tag { position: absolute; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--k-fog-3); } .k-product__tag--tl { left: 32px; top: 28px; } .k-product__tag--tr { right: 32px; top: 28px; letter-spacing: 0.1em; } .k-product__tag--bl { left: 32px; bottom: 24px; font-size: 10px; letter-spacing: 0.08em; } .k-product__spec { display: flex; flex-direction: column; gap: 20px; } .k-product__title-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 8px; flex-wrap: wrap; } .k-product__code { font-size: 13px; letter-spacing: 0.12em; color: var(--k-brass); } .k-product__specline { font-size: 12px; letter-spacing: 0.1em; color: var(--k-fog-2); margin-top: 8px; } .k-product__diagrams { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; } .k-product__cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; } @media (max-width: 860px) { .k-product__grid { grid-template-columns: 1fr; gap: 32px; } .k-product__diagrams { grid-template-columns: 1fr; gap: 28px; } } /* ---- About ----------------------------------------------------------------------------- */ .k-heritage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; border-top: 1px solid var(--k-hairline-dark); padding-top: 36px; } .k-imagebreak { max-height: 480px; overflow: hidden; } .k-imagebreak img { width: 100%; height: 100%; object-fit: cover; } /* ---- Projects ---------------------------------------------------------------------------- */ .k-project { max-width: var(--k-container); margin: 0 auto; padding: 0 var(--k-side) 72px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; } .k-project__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--k-night-2); } .k-project__img img { width: 100%; height: 100%; object-fit: cover; } .k-project__row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--k-hairline-dark); } .k-project__val { font-size: 13px; color: var(--k-fog-2); text-align: right; } @media (max-width: 860px) { .k-project { grid-template-columns: 1fr; } } /* ---- Contact --------------------------------------------------------------------------- */ .k-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; } .k-contact-block { margin-top: 18px; display: grid; gap: 10px; } .k-contact-line { font-size: 20px; font-weight: 560; font-stretch: 118%; color: var(--k-fog-1); display: block; transition: color 200ms; } a.k-contact-line:hover { color: var(--k-brass); } .k-contact-list { margin-top: 18px; display: grid; gap: 10px; } .k-contact-list li { font-size: 14px; color: var(--k-fog-2); padding-left: 18px; position: relative; } .k-contact-list li::before { content: "—"; position: absolute; left: 0; color: var(--k-fog-3); } /* ---- responsive: shared grid collapses ------------------------------------------------- */ @media (max-width: 960px) { .k-manifesto__grid, .k-spotlight, .k-contact-grid { grid-template-columns: 1fr; gap: 40px; } .k-spotlight { padding: 32px; } .k-stats { grid-template-columns: repeat(2, 1fr); row-gap: 24px; } .k-stat:nth-child(3) { border-left: none; } .k-refs-grid, .k-heritage-grid, .k-tech-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .k-collection-grid { grid-template-columns: 1fr; } .k-refs-grid, .k-heritage-grid, .k-tech-grid { grid-template-columns: 1fr; } .k-section { padding: 48px var(--k-side); } .k-nav__mark { font-size: 15px; } } /* ==== Architect tools: nav icons · search · filter · wishlist ============== */ /* Nav right-hand group + icons */ .k-nav__right { display: flex; align-items: center; gap: 22px; } .k-nav__tools { display: flex; align-items: center; gap: 6px; } .k-nav__icon { position: relative; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--k-fog-2); background: none; border: none; cursor: pointer; transition: color 200ms; } .k-nav__icon:hover { color: var(--k-brass); } .k-nav__icon svg { width: 20px; height: 20px; } .k-nav__wish-badge { position: absolute; top: 2px; inset-inline-end: 2px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; background: var(--k-brass); color: var(--k-night); font-size: 10px; font-weight: 700; line-height: 1; border-radius: 9px; } .k-nav__wish-badge[hidden] { display: none; } /* Global search overlay */ .k-search { position: fixed; inset: 0; z-index: 90; background: rgba(10,10,12,0.72); backdrop-filter: blur(6px); display: flex; align-items: flex-start; justify-content: center; padding: clamp(60px, 12vh, 140px) var(--k-side) 40px; } .k-search[hidden] { display: none; } .k-search__panel { width: 100%; max-width: 640px; background: var(--k-night-2); border: 1px solid var(--k-hairline-dark); } .k-search__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--k-hairline-dark); } .k-search__glass { width: 20px; height: 20px; color: var(--k-fog-3); flex: none; } .k-search__input { flex: 1; background: none; border: none; outline: none; color: var(--k-fog-1); font-family: var(--k-font); font-size: 17px; } .k-search__input::placeholder { color: var(--k-fog-3); } .k-search__close { display: flex; width: 34px; height: 34px; align-items: center; justify-content: center; background: none; border: none; color: var(--k-fog-3); cursor: pointer; } .k-search__close:hover { color: var(--k-brass); } .k-search__close svg { width: 18px; height: 18px; } .k-search__results { max-height: 60vh; overflow-y: auto; } .k-search__hit { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--k-hairline-dark); transition: background 160ms; } .k-search__hit:hover { background: var(--k-night-3); } .k-search__hit img { width: 48px; height: 48px; object-fit: contain; background: #f4f4f2; mix-blend-mode: multiply; } .k-search__hit-name { font-size: 14px; font-weight: 560; color: var(--k-fog-1); } .k-search__hit-meta { font-size: 11px; letter-spacing: 0.06em; color: var(--k-fog-3); white-space: nowrap; } .k-search__empty { padding: 24px 18px; color: var(--k-fog-3); font-size: 13px; } /* Products page filter bar */ .k-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--k-hairline-dark); } .k-filter__search { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 220px; border: 1px solid var(--k-hairline-dark); padding: 10px 14px; } .k-filter__search svg { width: 17px; height: 17px; color: var(--k-fog-3); flex: none; } .k-filter__input { flex: 1; background: none; border: none; outline: none; color: var(--k-fog-1); font-family: var(--k-font); font-size: 14px; } .k-filter__input::placeholder { color: var(--k-fog-3); } .k-filter__chips { display: flex; flex-wrap: wrap; gap: 8px; } .k-filter__chip { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: 0.04em; color: var(--k-fog-2); background: var(--k-night-2); border: 1px solid var(--k-hairline-dark); padding: 8px 12px; cursor: pointer; transition: border-color 200ms, color 200ms; } .k-filter__chip:hover { border-color: var(--k-brass); color: var(--k-brass); } .k-filter__chip.is-on { border-color: var(--k-brass); color: var(--k-fog-1); } .k-filter__dot { width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box; border: 1px solid var(--k-dot-ring); flex: none; } .k-filter__chip--clear { color: var(--k-fog-3); } .k-filter__count { font-size: 11px; letter-spacing: 0.12em; color: var(--k-fog-3); white-space: nowrap; } /* Wishlist page */ .k-wishlist__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid var(--k-hairline-dark); } .k-wishlist__bar[hidden] { display: none; } .k-wishlist__count { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--k-fog-2); } .k-wishlist__actions { display: flex; flex-wrap: wrap; gap: 10px; } .k-wishlist__clear { color: var(--k-fog-3); } .k-wishlist__empty { padding: 20px 0 40px; } .k-wishlist__empty[style*="none"] + * { display: none; } @media (max-width: 860px) { .k-nav__right { gap: 8px; } .k-search__hit { grid-template-columns: 40px 1fr; } .k-search__hit-meta { grid-column: 2; } } /* Never show the print-only wishlist markup on screen (reserved hook) */ @media print { .k-nav, .k-footer-site, .k-filter, .k-showcase { display: none; } } /* ---- Online catalog viewer ------------------------------------------------ */ .k-catalog { max-width: var(--k-container); margin: 0 auto; padding: 40px var(--k-side) 64px; } .k-catalog__bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; } .k-catalog__actions { display: flex; flex-wrap: wrap; gap: 10px; } .k-catalog__frame { position: relative; border: 1px solid var(--k-hairline-dark); background: var(--k-night-2); height: clamp(520px, 78vh, 1000px); } .k-catalog__doc { position: relative; z-index: 1; width: 100%; height: 100%; border: 0; display: block; background: #525659; } .k-catalog__fallback { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; } /* ---- Partner gate (price list + quote) ------------------------------------ */ .k-gate { display: flex; justify-content: center; padding: 30px 0 50px; } .k-gate__panel { max-width: 460px; width: 100%; border: 1px solid var(--k-hairline-dark); background: var(--k-night-2); padding: 34px 34px 30px; } .k-gate__title { font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--k-fog-1); } .k-gate__form { display: flex; gap: 10px; } .k-gate__input { flex: 1; min-width: 0; background: transparent; border: 1px solid var(--k-hairline-dark); color: var(--k-fog-1); padding: 10px 14px; font-size: 14px; letter-spacing: 0.06em; border-radius: 12px; } .k-gate__input:focus { outline: none; border-color: var(--k-brass); } .k-gate__err { margin-top: 12px; font-size: 12.5px; color: #c96f5f; } /* ---- Price list table ------------------------------------------------------ */ .k-pricelist__search { max-width: 260px; background: transparent; border: 1px solid var(--k-hairline-dark); color: var(--k-fog-1); padding: 8px 12px; font-size: 13px; } .k-pricelist__search:focus { outline: none; border-color: var(--k-brass); } .k-pl-row { display: grid; grid-template-columns: 2.2fr 1.2fr 1.2fr 1fr 1fr; gap: 14px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--k-hairline-dark); color: var(--k-fog-2); font-size: 13px; text-decoration: none; } .k-pl-row--head { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--k-fog-3); border-bottom-color: var(--k-fog-3); } a.k-pl-row:hover .nm { color: var(--k-brass); } .k-pl-row .nm { color: var(--k-fog-1); font-weight: 500; } .k-pl-row .pr { text-align: right; font-variant-numeric: tabular-nums; color: var(--k-fog-1); } /* ---- Quotation builder ------------------------------------------------------ */ .k-quote { margin-top: 46px; border: 1px solid var(--k-hairline-dark); background: var(--k-night-2); padding: 30px 30px 28px; } .k-quote__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .k-quote__no { font-size: 12.5px; color: var(--k-fog-3); letter-spacing: 0.04em; } .k-quote__locked .k-gate__form { max-width: 380px; } .k-q-row { display: grid; grid-template-columns: 52px 2fr 1.1fr 130px 1fr 1fr; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--k-hairline-dark); color: var(--k-fog-2); font-size: 13px; } .k-q-row--head { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--k-fog-3); } .k-q-row .im img { width: 46px; height: 46px; object-fit: contain; background: #f4f4f2; mix-blend-mode: normal; border-radius: 2px; } .k-q-row .nm { color: var(--k-fog-1); font-weight: 500; } .k-q-row .pr { text-align: right; font-variant-numeric: tabular-nums; color: var(--k-fog-1); } .k-q-row .qt { display: inline-flex; align-items: stretch; border: 1px solid var(--k-hairline-dark); } .k-q-row .qt button { width: 30px; background: transparent; border: 0; color: var(--k-fog-2); font-size: 15px; cursor: pointer; } .k-q-row .qt button:hover { color: var(--k-brass); } .k-q-row .qt input { width: 46px; text-align: center; background: transparent; border: 0; border-left: 1px solid var(--k-hairline-dark); border-right: 1px solid var(--k-hairline-dark); color: var(--k-fog-1); font-size: 13px; padding: 7px 0; -moz-appearance: textfield; } .k-q-row .qt input::-webkit-outer-spin-button, .k-q-row .qt input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .k-quote__foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin-top: 20px; } .k-quote__disc { font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--k-fog-3); display: inline-flex; align-items: center; gap: 10px; } .k-quote__disc input { width: 72px; background: transparent; border: 1px solid var(--k-hairline-dark); color: var(--k-fog-1); padding: 7px 10px; font-size: 13px; } .k-quote__totals { min-width: 260px; font-size: 13.5px; } .k-quote__totals div { display: flex; justify-content: space-between; gap: 30px; padding: 6px 0; border-bottom: 1px solid var(--k-hairline-dark); color: var(--k-fog-2); } .k-quote__totals .gr { color: var(--k-fog-1); font-weight: 600; font-size: 15px; border-bottom: 2px solid var(--k-brass); } @media (max-width: 860px) { .k-pl-row { grid-template-columns: 1.6fr 1fr 1fr; } .k-pl-row span:nth-child(2), .k-pl-row span:nth-child(4) { display: none; } .k-q-row { grid-template-columns: 44px 1.6fr 110px 1fr; } .k-q-row span:nth-child(3), .k-q-row span:nth-child(5) { display: none; } .k-quote { padding: 22px 18px; } } /* The hidden attribute must always win, even over display:flex classes. */ [hidden] { display: none !important; } /* Login variant of the gate form: stacked email + password + button. */ .k-gate__form--login { flex-direction: column; align-items: stretch; } .k-gate__form--login .k-btn { align-self: flex-start; } .k-auth-line { margin-top: 14px; font-size: 12.5px; color: var(--k-fog-3); } .k-auth-out { background: none; border: 0; cursor: pointer; font-size: 12.5px; } /* ---- Login page ------------------------------------------------------------ */ .k-login { max-width: 560px; margin: 0 auto; } .k-login__panel { border: 1px solid var(--k-hairline-dark); background: var(--k-night-2); padding: 36px; margin-top: 34px; } .k-login__google { display: flex; justify-content: center; } .k-login__or { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--k-fog-3); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; } .k-login__or::before, .k-login__or::after { content: ""; flex: 1; border-top: 1px solid var(--k-hairline-dark); } .k-login__form { display: flex; flex-direction: column; gap: 16px; } .k-login__label { display: flex; flex-direction: column; gap: 7px; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--k-fog-3); } .k-login__partner-toggle { background: none; border: 0; cursor: pointer; margin-top: 22px; font-size: 12.5px; } /* ---- Cart page --------------------------------------------------------------- */ .k-cart__topline { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 12.5px; color: var(--k-fog-3); border-bottom: 1px solid var(--k-hairline-dark); padding-bottom: 14px; } .k-cart__login { margin-top: 18px; } [data-cart] .k-q-row { grid-template-columns: 52px 2fr 1.1fr 130px 1fr 1fr 30px; } .k-cart__del { background: none; border: 0; color: var(--k-fog-3); font-size: 18px; cursor: pointer; line-height: 1; } .k-cart__del:hover { color: var(--k-brass); } .k-cart__total { display: flex; justify-content: flex-end; align-items: baseline; gap: 14px; margin-top: 20px; font-size: 15px; color: var(--k-fog-2); } .k-cart__total strong { font-size: 22px; color: var(--k-fog-1); } .k-cart__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; } .k-cart__select, .k-cart__comment { width: 100%; } select.k-gate__input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--k-fog-3) 50%), linear-gradient(135deg, var(--k-fog-3) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; } select.k-gate__input option { color: #16161a; } .k-cart__done { margin-top: 26px; border: 1px solid var(--k-hairline-dark); padding: 22px; } .k-cart__empty { padding: 26px 0 40px; } /* Add-to-cart button state */ .k-cart-btn__added { display: none; } [data-cart-add].is-added .k-cart-btn__add { display: none; } [data-cart-add].is-added .k-cart-btn__added { display: inline; } @media (max-width: 860px) { [data-cart] .k-q-row { grid-template-columns: 44px 1.6fr 110px 1fr 26px; } [data-cart] .k-q-row span:nth-child(3), [data-cart] .k-q-row span:nth-child(5) { display: none; } .k-cart__grid { grid-template-columns: 1fr; } .k-login__panel { padding: 24px 18px; } } /* ---- Light theme (Centersvet/Kreon-style) ----------------------------------- Every page except the home carries body.k-light: the dark tokens are remapped to the paper palette, so the whole component library flips to a white, black-and-white-led look without per-component overrides. The home page keeps the night theme (theme: "dark" in generate.js). */ body.k-light { --k-night: #ffffff; --k-night-2: #fafaf8; --k-night-3: #f1f1ee; --k-fog-1: #16161a; --k-fog-2: #55555c; --k-fog-3: #8e8e94; --k-hairline-dark: #e2e2de; --k-nav-bg: rgba(255,255,255,0.9); --k-nav-bg-scrolled: rgba(255,255,255,0.96); --k-dot-ring: rgba(0,0,0,0.16); } /* Selection + primary button resolve correctly via the remap; the few dark-glass chips keep contrast on the light image panels: */ body.k-light .k-wish { background: rgba(255,255,255,0.72); border-color: rgba(0,0,0,0.14); color: #16161a; } body.k-light .k-wish.is-on { background: rgba(255,255,255,0.85); } body.k-light ::selection { background: var(--k-brass); color: #fff; } /* Product-page stage & gallery thumbs sit on the same studio panel as cards */ body.k-light .k-product__stage, body.k-light .k-thumb { background: linear-gradient(180deg, #f4f4f2 0%, #eaeae8 100%); } body.k-light .k-product__stage img, body.k-light .k-thumb img { mix-blend-mode: multiply; } /* The html element behind a short light page (and rubber-band overscroll) must be white too; body.k-light only recolors the body box. */ html:has(body.k-light) { background: #ffffff; } /* ---- Hybrid home ------------------------------------------------------------ The home page is light like the rest of the site, except the header, hero banner, film band and footer, which keep the night surface (user rule). Each dark island re-scopes the text/border tokens locally. */ /* Kreon-style header on the home: the bar overlays the hero — transparent with light text at the very top, flipping to the standard white bar (dark text) as soon as the page scrolls. Fixed (not sticky) so the hero can run underneath it. */ body.k-home .k-hero { margin-top: -81px; } /* pull the hero under the 81px-tall transparent nav (20px padding x2 + 40px logo + 1px border) — no light gap below the top bar */ body.k-home .k-nav:not(.is-scrolled) { --k-fog-1: #f7f7f5; --k-fog-2: #dcdcd9; --k-fog-3: #b9b9bb; --k-hairline-dark: rgba(255,255,255,0.30); --k-night: #0f0f11; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; } body.k-home .k-hero { --k-fog-1: #f2f2ef; --k-fog-2: #a4a4a8; --k-fog-3: #6d6d72; background: #0f0f11; } body.k-home .k-filmband { --k-fog-1: #f2f2ef; --k-fog-2: #a4a4a8; --k-fog-3: #6d6d72; background: #17171a; } /* The footer keeps the night surface on EVERY page (user rule). */ .k-footer-site { --k-fog-1: #f2f2ef; --k-fog-2: #a4a4a8; --k-fog-3: #6d6d72; --k-hairline-dark: #2a2a2e; --k-night-2: #17171a; background: #0f0f11 !important; border-top-color: #2a2a2e; } html:has(body.k-home) { background: #0f0f11; } /* dark overscroll matches header/footer */ /* Logo variants on the dark islands: the footer is night-surfaced on every page, and the home nav sits transparent over the dark hero until it scrolls — both need the white-lettered logo even under body.k-light. */ body .k-footer-site .k-logo--onlight { display: none; } body .k-footer-site .k-logo--ondark { display: block; } body.k-home .k-nav:not(.is-scrolled) .k-logo--onlight { display: none; } body.k-home .k-nav:not(.is-scrolled) .k-logo--ondark { display: block; } /* Mobile header: only the logo and the burger stay in the bar; the icon row (search · selection · cart · account) moves inside the burger menu. */ .k-nav__tools--menu { display: none; } @media (max-width: 860px) { .k-nav__right > .k-nav__tools { display: none; } .k-nav__tools--menu { display: flex; gap: 18px; margin-top: 14px; padding-top: 20px; border-top: 1px solid var(--k-hairline-dark); } } /* Band rhythm on small screens */ @media (max-width: 860px) { .k-family, .k-filmband { margin: 56px 0; } } /* ---- Kreon-style top utility bar ------------------------------------------- Language switcher + account + cart in a slim night strip above the sticky nav. It is a normal block, so it scrolls out of view naturally — past that only the main bar (logo · links · search · wishlist) remains. */ .k-topbar { --k-fog-1: #f2f2ef; --k-fog-2: #a4a4a8; --k-fog-3: #8e8e94; --k-hairline-dark: #2a2a2e; position: relative; z-index: 41; display: flex; justify-content: flex-end; align-items: center; gap: 26px; background: #0f0f11; padding: 5px var(--k-side); } .k-topbar .k-nav__lang { border-inline-start: none; padding-inline-start: 0; } .k-topbar .k-nav__icon { width: 30px; height: 30px; } .k-topbar .k-nav__icon svg { width: 18px; height: 18px; } .k-topbar .k-nav__wish-badge { top: -2px; inset-inline-end: -2px; } @media (max-width: 860px) { .k-topbar { display: none; } /* mobile: everything lives in the burger menu */ } /* Desktop: the switcher lives in the top bar; the in-menu copy is mobile-only */ @media (min-width: 861px) { .k-nav__links .k-nav__lang { display: none; } } /* ---- Kreon-style mobile menu ------------------------------------------------ The burger panel is always a white sheet with large, bold, full-contrast lowercase links (like kreon.com), regardless of the page theme — the dark k-home header scope is overridden here for readability. */ @media (max-width: 860px) { .k-nav .k-nav__links { --k-fog-1: #16161a; --k-fog-2: #55555c; --k-fog-3: #8e8e94; --k-hairline-dark: #e2e2de; --k-night: #ffffff; background: #ffffff; gap: 26px; padding-top: 40px; } .k-nav .k-nav__links .k-nav__link { font-size: 27px; font-weight: 640; letter-spacing: 0; color: var(--k-fog-1); } .k-nav .k-nav__links .k-nav__cta { font-size: 14px; font-weight: 560; padding: 13px 26px; } .k-nav .k-nav__links .k-nav__lang-link { font-size: 16px; font-weight: 600; padding: 8px 14px 8px 0; } .k-nav__tools--menu { gap: 26px; } .k-nav__tools--menu .k-nav__icon svg { width: 26px; height: 26px; } .k-nav__tools--menu .k-nav__icon { width: 44px; height: 44px; color: var(--k-fog-1); } } /* Mobile: position:sticky dies inside the overflow-x:hidden used to clip the off-canvas menu, so the header vanished on scroll. Fix the bar to the viewport instead and give non-home pages the 69px the bar no longer occupies; on the home the hero already runs underneath the transparent bar. */ @media (max-width: 860px) { .k-nav { position: fixed; top: 0; left: 0; right: 0; } body:not(.k-home) { padding-top: 69px; } body.k-home .k-hero { margin-top: 0; } } /* ---- Centersvet-style login ------------------------------------------------- No boxed panel: a clean white page with a large centered title, label-over- input fields with soft rounded borders, a tall full-width black button and a quiet centered partner link (which previously overflowed on mobile). */ .k-login { max-width: 560px; } .k-login__panel { border: none; background: transparent; padding: 44px 0 0; } .k-login__label { font-size: 13px; letter-spacing: 0.02em; text-transform: none; color: var(--k-fog-3); gap: 9px; } .k-login .k-gate__input { border-radius: 12px; border-color: #d4d4d0; background: #fff; padding: 16px 18px; font-size: 16px; color: var(--k-fog-1); } .k-login .k-gate__input:focus { border-color: #16161a; } .k-login__form .k-btn--primary { border-radius: 12px; width: 100%; padding: 17px 30px; font-size: 12.5px; } .k-login .k-gate__form--login .k-btn { border-radius: 12px; padding: 14px 24px; } .k-login__partner-toggle { display: block; width: 100%; margin: 28px auto 0; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; white-space: normal; text-align: center; line-height: 1.7; color: var(--k-fog-3); } .k-login__partner-toggle:hover { color: var(--k-brass); } .k-login [data-auth-signed].k-login__panel { padding-top: 24px; } /* ---- Cookie / storage consent banner ---- */ .k-consent { position: fixed; bottom: 0; left: 0; right: 0; z-index: 70; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 16px 24px; background: #0f0f11; border-top: 1px solid rgba(255, 255, 255, 0.12); } .k-consent__text { margin: 0; font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); max-width: 760px; } .k-consent__text a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .k-consent__text a:hover { color: var(--k-brass); } .k-consent .k-btn { flex: 0 0 auto; background: #fff; border-color: #fff; color: #0f0f11; } .k-consent .k-btn:hover { background: var(--k-brass); border-color: var(--k-brass); color: #0f0f11; } @media (max-width: 860px) { .k-consent { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); text-align: left; } .k-consent .k-btn { width: 100%; } } /* ---- Contact form: backend submit states ---- */ .k-form__hp { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; } /* honeypot — invisible to people, filled by bots */ .k-form__error { margin-top: 14px; font-size: 13px; line-height: 1.6; color: #b4231f; } .k-form__done { padding: 34px 0 8px; } .k-form__done-mark { width: 44px; height: 44px; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--k-brass); border-radius: 50%; color: var(--k-brass); font-size: 19px; } /* ---- B2B net prices + quote list totals ---- */ .k-price__list { color: var(--k-fog-3); margin-inline-end: 8px; } .k-price__net { font-weight: 640; } .k-price__note { display: block; margin-top: 3px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--k-fog-3); } .k-cart__total { display: block; } .k-totrow { display: flex; justify-content: flex-end; gap: 28px; padding: 6px 0; font-size: 14px; color: var(--k-fog-2); } .k-totrow span:first-child { min-width: 130px; text-align: end; } .k-totrow--grand { border-top: 1px solid var(--k-hairline-dark); margin-top: 6px; padding-top: 12px; font-size: 16px; color: var(--k-fog-1); } /* ---- My quotes (account page) ---- */ .k-myquotes { text-align: start; } .k-mq-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 22px; padding: 12px 0; border-bottom: 1px solid var(--k-hairline-dark); font-size: 13.5px; color: var(--k-fog-2); } .k-mq-no { font-weight: 620; color: var(--k-fog-1); min-width: 118px; } .k-mq-tot { font-weight: 620; color: var(--k-fog-1); } .k-mq-st { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--k-fog-3); } .k-mq-st.is-conv { color: var(--k-brass); } .k-mq-act { margin-inline-start: auto; display: inline-flex; gap: 16px; } /* ---- Admin panel ---- */ .k-admin__tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; } .k-admin__tab { padding: 10px 20px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--k-hairline-dark); background: none; color: var(--k-fog-2); cursor: pointer; } .k-admin__tab.is-active { background: var(--k-night); color: #fff; border-color: var(--k-night); } body.k-light .k-admin__tab.is-active { background: #16161a; } .k-admin__bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .k-admin__search { max-width: 340px; } .k-admin__table { margin-top: 18px; } .k-adm-row { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--k-hairline-dark); } .k-adm-row__main { display: flex; flex-direction: column; gap: 3px; min-width: 260px; flex: 1; font-size: 13.5px; color: var(--k-fog-2); } .k-adm-row__main b { color: var(--k-fog-1); font-size: 14.5px; } .k-adm-dim { font-size: 12px; color: var(--k-fog-3); } .k-adm-badge { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--k-brass); border: 1px solid var(--k-brass); padding: 1px 6px; border-radius: 9px; margin-inline-start: 8px; } .k-adm-row__act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .k-adm-row__act select { max-width: 190px; padding: 9px 12px; } .k-adm-tot { color: var(--k-fog-1); min-width: 84px; text-align: end; } .k-adm-ov { flex-basis: 100%; padding: 8px 0 4px 14px; border-inline-start: 2px solid var(--k-hairline-dark); } .k-adm-ovrow { display: flex; align-items: center; gap: 14px; padding: 6px 0; font-size: 13px; color: var(--k-fog-2); } .k-adm-ovrow b { color: var(--k-fog-1); } .k-adm-ovadd { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; } .k-adm-ovadd select { max-width: 320px; padding: 9px 12px; } .k-adm-prow { display: grid; grid-template-columns: 135px minmax(0,1fr) 120px 92px 92px; gap: 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--k-hairline-dark); font-size: 13.5px; color: var(--k-fog-2); } .k-adm-prow--head { font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--k-fog-3); } .k-adm-prow .pr, .k-adm-prow .pr input { text-align: end; } .k-adm-prow input { padding: 8px 10px; width: 100%; box-sizing: border-box; } .k-adm-prow button { width: 100%; } .k-admin__report { margin-top: 14px; font-size: 13px; color: var(--k-fog-2); } .k-adm-err { color: #b4231f; font-size: 12.5px; margin-top: 6px; } @media (max-width: 860px) { .k-adm-prow { grid-template-columns: 1fr 1fr; } .k-adm-prow--head { display: none; } }