/* Styles of the public pages (.kl) — landing, about us, catalogue, product page, contact, privacy policy, sign-in, account panel. Linked in the shared (app/views/layouts/_head.html.erb), so they reach both layouts, but they only apply inside a .kl wrapper (and html:has(.kl)). The React apps have none, except around the public-site navbar the designer and the checkout show above themselves (layouts/application_spa.html.erb + spa_site_nav.css). Brand tokens (colours/typefaces/radii) come from tokens.css (scoped to .kl and the toast region, generated from frontend/packages/design-tokens/src/tokens.ts) — NOT defined HERE; this sheet only derives surfaces from them. VISUAL PREMISE (the mockups "Karta produktu 3b" and "Strona główna"): cool morning light. The page sits on a gradient from sky blue through blush to white, with a soft blush glow in the top right corner; panels are frosted glass on it (white, translucent, a white hairline and a faint garnet shadow); garnet is the one strong accent (the primary button, links, markers). Photos keep square corners, controls are pills. Headings, the wordmark and prices: Outfit; running text, forms and labels: Jost. The landing mockup is drawn at 1280px (desktop) and 390px (phone); its sizes are restated here in rem (px / 16), and where it leaves the line height to the browser, so does this sheet (line-height: normal on the navbar, the landing and the footer). */ .kl { /* Page grid of the mockup: a 1280px box with 40px gutters on a desktop (content 1200px), 20px on a phone. */ --page-max: 1280px; --gutter: clamp(20px, 3.2vw, 40px); /* Height of the navbar while it covers the top of the window: sticky columns stop under it. A desktop bar scrolls away with the page (0); the phone bar (max-width 768px) is sticky and 73px tall with its border. */ --nav-stuck: 0px; /* Surfaces derived from the brand tokens. */ --atmosphere: radial-gradient(900px 500px at 85% 10%, var(--blush-glow) 0%, transparent 70%), linear-gradient(180deg, var(--sky) 0%, var(--blush) 55%, var(--paper) 100%); /* The landing's gradient: the glow sits higher and the blush comes earlier (the "Strona główna" mockup). */ --atmosphere-landing: radial-gradient(900px 500px at 85% 6%, var(--blush-glow) 0%, transparent 70%), linear-gradient(180deg, var(--sky) 0%, var(--blush) 40%, var(--paper) 100%); --glass-fill: linear-gradient(135deg, rgb(255 255 255 / .72), rgb(255 255 255 / .38)); --glass-edge: rgb(255 255 255 / .95); --glass-blur: blur(16px); --hairline: color-mix(in srgb, var(--accent) 12%, transparent); --shadow-glass: 0 16px 36px -26px color-mix(in srgb, var(--accent) 45%, transparent); --shadow-float: 0 18px 40px -28px color-mix(in srgb, var(--accent) 50%, transparent); --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); font-family: var(--font-sans); font-weight: 400; color: var(--ink); background: var(--paper); /* No -webkit-font-smoothing: the mockups render with the system's default smoothing — on macOS "antialiased" would draw every stroke thinner than they do. */ line-height: 1.65; } .kl * { box-sizing: border-box; } .kl ::selection { background: var(--accent-pale); color: var(--ink); } /* Smooth scrolling after a click on an in-page anchor. scroll-behavior has to sit on the scrolling element (html), not on .kl. prefers-reduced-motion is respected. */ @media (prefers-reduced-motion: no-preference) { html:has(.kl) { scroll-behavior: smooth; } } /* What the browser scrolls to — an anchor's section, or an element focused with the keyboard — stops a little below the top of the window. On a phone the sticky navbar covers the top, so the scrollport starts under it (the phone section). Only on the Rails layout: above a React application (.spa-site-nav) the application sets its own scroll padding. */ html:has(> body > .kl:not(.spa-site-nav)) { scroll-padding-top: 24px; } /* Short pages (sign-in, contact, a small catalogue) on a tall window: the footer sits at the bottom of the window instead of ending above an empty strip. Only the Rails layout; on body, so the development banner above .kl counts too. */ body:has(> .kl:not(.spa-site-nav)) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } body > .kl:not(.spa-site-nav) { flex: 1 0 auto; display: flex; flex-direction: column; } body > .kl:not(.spa-site-nav) > .kl__footer { margin-top: auto; } /* No color:inherit on every link — each has its own colour (brand/nav/btn); inherit would have a higher specificity (.kl a) than .kl__btn--* and break the text colour of the buttons. Plain links in running text (no class) take the link blue of the mockup. */ .kl a { text-decoration: none; } .kl a:not([class]) { color: var(--link); transition: color .15s ease; } .kl a:not([class]):hover { color: var(--link-hover); } .kl :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .kl img { max-width: 100%; } .kl__wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); } /* ——— Typography ——— */ /* Every heading — also in views without a class of their own (sessions, e-mail change) — gets the display typeface. :where() zeroes the specificity, so the .kl__* classes still decide the rest of the style. */ .kl :where(h1, h2, h3, h4, h5, h6) { font-family: var(--font-display); font-weight: 400; } .kl__h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.12; letter-spacing: -.01em; color: var(--ink); margin: 0 0 16px; } .kl__h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.25; color: var(--ink); margin: 30px 0 12px; } /* The small uppercase label of the product page ("O kamieniu"). */ .kl__eyebrow { margin: 0; font-size: .6875rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } /* The landing's label above a heading ("Nowości"), in the link blue of the mockup. */ .kl__kicker { margin: 0; font-size: .75rem; line-height: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--link); } /* ——— Navigation ——— */ /* The bar of the landing mockup: the wordmark, the links and a round glass cart button, spread across the page grid. On a desktop it lies on the page gradient and scrolls away with the page; on a phone it is a sticky frosted bar (the phone section), and above a React application a compact frosted bar that stays on top (spa_site_nav.css). The frost lives on a layer under the content, not on the bar itself: an element with a backdrop-filter becomes the backdrop root of its descendants, so the blur of the phone menu would see only the bar, never the page behind it. */ .kl__nav { position: relative; z-index: 20; line-height: normal; } .kl__nav::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; } .kl__nav-in { max-width: var(--page-max); margin: 0 auto; padding: 22px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; } /* The wordmark: Outfit in spaced capitals. */ .kl__brand { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); } .kl__nav-links { display: flex; align-items: center; gap: 30px; font-size: .875rem; letter-spacing: .06em; } .kl__nav-link { color: var(--ink); transition: color .15s ease; } .kl__nav-link:hover { color: var(--accent); } /* „Zaprojektuj”, the way into the designer: garnet on a garnet hairline. */ .kl__nav-link--accent { padding-bottom: 2px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); } .kl__nav-link--accent:hover { color: var(--accent-dark); } .kl__nav-actions { display: flex; align-items: center; gap: 8px; } /* The cart: a round glass button with the mockup's drawn bag (a body with rounded bottom corners and a handle) and, while the cart holds something, a garnet badge with the number of pieces (cart_count_controller.js). */ .kl__cart { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .9); background: rgb(255 255 255 / .55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 20px -14px color-mix(in srgb, var(--accent) 55%, transparent); } .kl__cart-icon { position: relative; width: 19px; height: 16px; margin-top: 4px; border: 1.5px solid var(--ink); border-radius: 2px 2px 4px 4px; } .kl__cart-icon::before { content: ""; position: absolute; left: 3px; top: -7px; width: 10px; height: 7.5px; border: 1.5px solid var(--ink); border-bottom: 0; border-radius: 5px 5px 0 0; } .kl__cart-count { position: absolute; top: -3px; right: -3px; display: flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--radius-pill); background: linear-gradient(135deg, var(--accent-bright), var(--accent)); color: var(--white); font-size: .65625rem; } .kl__cart-count[hidden] { display: none; } /* The phone menu: a round glass burger and a glass card under the bar (pure CSS, works without JS), shown in the phone section. The checkbox exists only for the phone menu: on a desktop it would be an invisible first tab stop. */ .kl__nav-cb { display: none; position: absolute; opacity: 0; pointer-events: none; } .kl__burger { display: none; flex: none; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center; cursor: pointer; border: 1px solid rgb(255 255 255 / .9); background: rgb(255 255 255 / .6); } /* Three 1.5px lines 5px apart; open, the outer two cross. */ .kl__burger-line, .kl__burger-line::before, .kl__burger-line::after { content: ""; display: block; width: 16px; height: 1.5px; border-radius: 2px; background: var(--ink); transition: transform .25s ease, background-color .2s ease; } .kl__burger-line::before { transform: translateY(-6.5px); } .kl__burger-line::after { transform: translateY(5px); } .kl__nav-cb:checked ~ .kl__nav-in .kl__burger-line { background: transparent; } .kl__nav-cb:checked ~ .kl__nav-in .kl__burger-line::before { transform: translateY(0) rotate(45deg); } .kl__nav-cb:checked ~ .kl__nav-in .kl__burger-line::after { transform: translateY(-1.5px) rotate(-45deg); } .kl__nav-cb:focus-visible ~ .kl__nav-in .kl__burger { outline: 2px solid var(--accent); outline-offset: 3px; } .kl__nav-drawer { display: none; } .kl__nav-drawer-in { display: flex; flex-direction: column; font-size: 1.0625rem; } .kl__nav-drawer-link { padding: 14px 16px; color: var(--ink); transition: color .15s ease; } .kl__nav-drawer-link:hover { color: var(--accent); } .kl__nav-drawer-link--accent { color: var(--accent); } .kl__nav-drawer-link--accent:hover { color: var(--accent-dark); } /* ——— Buttons and text links ——— */ .kl__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-size: .9375rem; font-weight: 400; line-height: 1.2; letter-spacing: .04em; text-align: center; padding: 15px 28px; border: 1px solid transparent; border-radius: var(--radius-btn); cursor: pointer; transition: filter .18s ease, background .18s ease, color .18s ease, border-color .18s ease; } /* The one strong action of a page: a garnet gradient with a light top edge. */ .kl__btn--primary { color: var(--white); border-color: rgb(255 255 255 / .18); background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 48%, var(--accent-deep) 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 14px 28px -14px color-mix(in srgb, var(--accent) 75%, transparent); } .kl__btn--primary:hover { filter: brightness(1.08); } /* The second action: frosted glass with a garnet hairline — clearly weaker than the primary one. */ .kl__btn--secondary { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 28%, transparent); background: linear-gradient(135deg, rgb(255 255 255 / .75), rgb(255 255 255 / .35)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 10px 24px -18px color-mix(in srgb, var(--accent) 50%, transparent); } .kl__btn--secondary:hover { background: rgb(255 255 255 / .85); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .kl__btn--sm { padding: 10px 20px; font-size: .875rem; } .kl__btn--block { width: 100%; margin-top: 6px; } /* A text link: garnet with a pale underline that darkens on hover. */ /* `.kl .kl__link`: .kl a (text-decoration: none) is more specific than a single class. */ .kl .kl__link { display: inline-block; color: var(--accent); font-size: .9375rem; text-decoration: underline; text-decoration-color: var(--accent-pale); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .18s ease, text-decoration-color .18s ease; } .kl .kl__link:hover { color: var(--accent-dark); text-decoration-color: currentColor; } /* ——— Surfaces ——— */ /* Every Rails page lies on the page gradient, painted on the whole .kl wrapper, so the navbar and the footer lie on it without a seam; the landing has its own variant (--atmosphere-landing). */ body > .kl:not(.spa-site-nav) { background: var(--atmosphere), var(--paper); } body > .kl:has(> .kl__landing) { background: var(--atmosphere-landing), var(--paper); } /* Frosted glass panels. Listed here rather than as a utility class, so the views keep one class per element. */ .kl__contact-card, .kl__auth-card, .kl__card, .kl__legal-body, .kl__catalog-nav, .kl__catalog-empty, .kl__product-perks { background: var(--glass-fill); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-edge); border-radius: var(--radius-card); box-shadow: var(--shadow-glass); } /* ——— Landing (the "Strona główna" mockup) ——— */ /* The mockup leaves the line height of most texts to the browser; paragraphs set their own. */ .kl__landing { line-height: normal; } /* A section of the landing: the page grid, 96px to the next one. */ .kl__landing-section { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter) 96px; } /* The head of a product row: the label and the heading on the left, a text link on the right, on one baseline. */ .kl__landing-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; } .kl__landing-heading { display: flex; flex-direction: column; gap: 8px; } .kl__landing-h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 2.125rem; color: var(--ink); } /* A garnet text link underlined in its own colour. `.kl .kl__landing-link`: .kl a (text-decoration: none) is more specific than a single class. */ .kl .kl__landing-link { font-size: .875rem; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; transition: color .15s ease; } .kl .kl__landing-link:hover { color: var(--accent-dark); } /* A glass pill on a photo ("Nowość", "Nr 1"). */ .kl__chip { padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid rgb(255 255 255 / .8); background: rgb(255 255 255 / .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: .65625rem; line-height: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .kl__chip--lg { padding: 5px 12px; font-size: .6875rem; } /* ——— Landing: hero ——— */ /* The photo fills the section, mirrored (the hand reaches towards the text), under a blush mist that carries the statement on the left. The text column is centred on a 1120px grid; the section is 680px tall at the mockup's 1280px and keeps the frame's proportions on a wider window (at most 800px). The sky shows until the photo loads. */ .kl__hero { position: relative; display: flex; align-items: center; min-height: clamp(680px, 53.125vw, 800px); margin-bottom: 88px; padding: 64px max(var(--gutter), calc((100% - 1120px) / 2)); overflow: hidden; background: var(--sky); } .kl__hero-media { position: absolute; inset: 0; margin: 0; } .kl__hero-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 20% 50%; transform: scaleX(-1); } .kl__hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--blush) 92%, transparent) 0%, color-mix(in srgb, var(--blush) 75%, transparent) 32%, transparent 58%); } /* The statement comes first in the document; the photo is positioned under it. */ .kl__hero-copy { position: relative; z-index: 1; max-width: 500px; display: flex; flex-direction: column; gap: 26px; } .kl__hero-title { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: 4rem; line-height: 1.04; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; } .kl__hero-lead { margin: 0; max-width: 420px; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-soft); text-wrap: pretty; } .kl__hero-cta { align-self: flex-start; padding: 16px 28px; font-size: .96875rem; line-height: normal; } /* What the photo shows: a glass label in the corner of the frame, on the page grid's right edge. */ .kl__hero-caption { position: absolute; z-index: 1; right: max(var(--gutter), calc((100% - 1200px) / 2)); bottom: 32px; display: flex; flex-direction: column; gap: 3px; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--glass-edge); background: linear-gradient(135deg, rgb(255 255 255 / .8), rgb(255 255 255 / .45)); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: 0 16px 36px -22px color-mix(in srgb, var(--accent) 50%, transparent); } .kl__hero-caption-label { font-size: .65625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .kl__hero-caption-text { font-family: var(--font-display); font-size: 1.0625rem; color: var(--ink); } /* ——— Landing: „O Moonstory” ——— */ /* One glass card: the heading and the link to the story in the left third, the four values in a 2×2 grid in the rest. The link sits 20px under the heading (the mockup's 14px gap + 6px margin). */ .kl__values-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-areas: "intro list" "link list"; grid-template-rows: auto 1fr; gap: 20px 56px; padding: 44px; border-radius: 24px; border: 1px solid var(--glass-edge); background: var(--glass-fill); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: 0 20px 48px -34px color-mix(in srgb, var(--accent) 45%, transparent); } .kl__values-intro { grid-area: intro; display: flex; flex-direction: column; gap: 14px; } .kl__values-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 2.125rem; line-height: 1.15; color: var(--ink); text-wrap: balance; } .kl__values-link { grid-area: link; align-self: start; justify-self: start; } .kl__values-list { grid-area: list; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; } .kl__value { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--accent) 14%, transparent); } .kl__value-num { font-family: var(--font-display); font-size: .8125rem; color: var(--link); } .kl__value-body { display: flex; flex-direction: column; gap: 8px; } .kl__value-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.1875rem; color: var(--ink); } .kl__value-text { margin: 0; font-size: .90625rem; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; } /* ——— Landing: product rows ——— */ .kl__newest, .kl__bestsellers { display: flex; flex-direction: column; gap: 28px; } .kl__newest-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } /* Product card („Nowości”, products/_card): a 4:5 photo with a pill in its corner and a glass „Dodaj do koszyka” across its bottom; the name, the stones and the price under it. */ .kl__product-card { display: flex; flex-direction: column; gap: 12px; } .kl__product-card-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sky); } .kl__product-card-photo { position: absolute; inset: 0; } .kl__product-card-img { display: block; width: 100%; height: 100%; object-fit: cover; } .kl__product-card-badge { position: absolute; left: 12px; top: 12px; pointer-events: none; } .kl__product-card-cart { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: center; padding: 11px 14px; border-radius: var(--radius-pill); border: 1px solid rgb(255 255 255 / .9); background: rgb(255 255 255 / .6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: .84375rem; color: var(--accent); transition: background-color .15s ease; } .kl__product-card-cart:hover { background: rgb(255 255 255 / .88); } .kl__product-card-info { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .kl__product-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .kl__product-card-name { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.125rem; } .kl__product-card-link { color: var(--ink); transition: color .15s ease; } .kl__product-card-link:hover { color: var(--accent); } .kl__product-card-stones { margin: 0; font-size: .8125rem; color: var(--muted); } .kl__product-card-price { flex: none; margin: 0; font-family: var(--font-display); font-size: 1rem; color: var(--ink); } /* „Bestsellery”: the „Nr 1” card (its photo large, a glass panel at the bottom) beside up to three glass rows, which share its height. With no rows the card takes the whole width. */ .kl__bestsellers-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: stretch; } .kl__bestsellers-layout--single { grid-template-columns: minmax(0, 1fr); } .kl__bestseller-lead { position: relative; display: block; min-height: 520px; overflow: hidden; background: var(--sky); color: var(--ink); } .kl__bestseller-lead-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .kl__bestseller-rank { position: absolute; left: 16px; top: 16px; } .kl__bestseller-panel { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--glass-edge); background: linear-gradient(135deg, rgb(255 255 255 / .82), rgb(255 255 255 / .5)); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: 0 16px 36px -22px color-mix(in srgb, var(--accent) 50%, transparent); } .kl__bestseller-panel-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .kl__bestseller-lead-name { font-family: var(--font-display); font-size: 1.5rem; } .kl__bestseller-lead-stones { font-size: .84375rem; color: var(--muted); } .kl__bestseller-panel-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .kl__bestseller-lead-price { font-family: var(--font-display); font-size: 1.25rem; } .kl__bestseller-lead-more { font-size: .8125rem; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; transition: color .15s ease; } .kl__bestseller-lead:hover .kl__bestseller-lead-more { color: var(--accent-dark); } .kl__bestseller-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .kl__bestseller { flex: 1; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: center; padding: 12px; border-radius: 16px; border: 1px solid var(--glass-edge); background: var(--glass-fill); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: 0 16px 36px -28px color-mix(in srgb, var(--accent) 45%, transparent); } .kl__bestseller-photo { position: relative; display: block; width: 132px; height: 132px; overflow: hidden; background: var(--sky); } .kl__bestseller-img { display: block; width: 100%; height: 100%; object-fit: cover; } .kl__bestseller-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-right: 8px; } .kl__bestseller-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .kl__bestseller-name { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.1875rem; } .kl__bestseller-link { color: var(--ink); transition: color .15s ease; } .kl__bestseller-link:hover { color: var(--accent); } .kl__bestseller-price { flex: none; margin: 0; font-family: var(--font-display); font-size: 1rem; color: var(--ink); } .kl__bestseller-stones { margin: 0; font-size: .8125rem; color: var(--muted); } /* A light pill on a sky hairline — weaker than the card's glass „Dodaj do koszyka”. */ .kl__bestseller-cart { align-self: flex-start; margin-top: 4px; padding: 8px 16px; border-radius: var(--radius-pill); border: 1px solid color-mix(in srgb, var(--link) 25%, transparent); background: linear-gradient(135deg, rgb(255 255 255 / .8), color-mix(in srgb, var(--sky) 50%, transparent)); font-size: .8125rem; color: var(--accent); transition: background-color .15s ease; } .kl__bestseller-cart:hover { background: rgb(255 255 255 / .9); } /* ——— Sections ——— */ .kl__section { padding: clamp(56px, 8vw, 104px) 0; } /* ——— Section with one photo and copy ——— */ .kl__split { display: grid; grid-template-columns: .85fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; } .kl__split-figure { margin: 0; } .kl__split-img { width: 100%; height: auto; display: block; background: var(--sky); } .kl__split-copy p { color: var(--ink-soft); max-width: 52ch; } .kl__split-copy p + p { margin-top: 14px; } /* ——— About us ——— */ /* Longer, story-like copy on the .kl__split layout: explicit paragraph margins (no browser defaults), a display lead and subheading, and a closing line set off by a short garnet hairline — the accent lives in lines. */ .kl__about p { margin: 0; } .kl__about p + p { margin-top: 14px; } .kl__about .kl__about-lead { margin-bottom: 20px; font-family: var(--font-display); font-weight: 300; font-size: 1.4rem; line-height: 1.35; color: var(--ink); } .kl__about .kl__about-signoff { position: relative; margin-top: 24px; padding-top: 18px; color: var(--ink); } .kl__about-signoff::before { content: ""; position: absolute; top: 0; left: 0; width: 48px; border-top: 1px solid var(--accent); } /* The about-us page (/o-nas): its two sections closer together, the first close under the navbar. */ .kl__about-page .kl__section { padding: clamp(24px, 4vw, 44px) 0; } .kl__about-page .kl__section:last-child { padding-bottom: clamp(56px, 8vw, 88px); } /* ——— Product tiles (category pages) ——— */ .kl__tile { display: block; color: var(--ink); } .kl__tile-img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--sky); transition: opacity .2s ease; } .kl__tile:hover .kl__tile-img { opacity: .9; } .kl__tile-name { display: block; margin-top: 12px; font-size: .94rem; letter-spacing: .01em; transition: color .15s ease; } .kl__tile:hover .kl__tile-name { color: var(--accent); } /* The tile of a product without a photo (Product::Image) keeps its square: a bracelet outline in a hairline, with one garnet bead, on sky. The price line is used by the category pages only. */ .kl__tile-placeholder { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1; background: var(--sky); } .kl__tile-placeholder::before { content: ""; width: 44%; aspect-ratio: 1 / 1; border: 1px solid var(--accent-pale); border-radius: 50%; transition: border-color .2s ease; } /* The bead hangs on the bottom of the outline: a 44% ring centred in the tile ends 28% above its bottom edge. */ .kl__tile-placeholder::after { content: ""; position: absolute; left: 50%; bottom: 28%; width: 6%; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--accent); translate: -50% 50%; } .kl__tile:hover .kl__tile-placeholder::before { border-color: var(--accent); } .kl__tile-price { display: block; margin-top: 2px; font-family: var(--font-display); font-size: .94rem; color: var(--ink-soft); } /* ——— Product catalogue: category pages (/produkty/kategoria/:id) ——— */ .kl__catalog { padding: 44px 0 76px; } .kl__catalog-head { margin-bottom: clamp(28px, 4vw, 44px); padding-bottom: clamp(22px, 3vw, 30px); border-bottom: 1px solid var(--hairline); } .kl__catalog-eyebrow { margin: 0 0 10px; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .kl__catalog-title { font-family: var(--font-display); font-size: clamp(2.1rem, 4vw, 2.9rem); font-weight: 400; line-height: 1.08; letter-spacing: -.01em; color: var(--ink); margin: 0 0 10px; } .kl__catalog-lead { margin: 0; color: var(--muted); } .kl__catalog-layout { display: grid; grid-template-columns: 230px 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; } /* Sidebar: a glass card that stays under the sticky navbar while the tiles scroll. */ .kl__catalog-nav { position: sticky; top: calc(var(--nav-stuck) + 24px); padding: 20px 22px 10px; } .kl__catalog-nav-title { margin: 0 0 6px; font-size: .6875rem; font-family: var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .kl__catalog-categories { list-style: none; margin: 0; padding: 0; } .kl__catalog-categories li + li { border-top: 1px solid var(--hairline); } /* Every category has a hairline dot; the current one (aria-current="page") is the selected one — its dot fills with garnet, like a checked radio button. */ .kl__catalog-category { display: flex; align-items: center; gap: 12px; padding: 11px 0; font-size: .96rem; color: var(--ink-soft); transition: color .15s ease; } .kl__catalog-category::before { content: ""; flex: none; width: 9px; height: 9px; border: 1px solid var(--accent-pale); border-radius: 50%; transition: background-color .15s ease, border-color .15s ease; } .kl__catalog-category:hover { color: var(--accent); } .kl__catalog-category:hover::before { border-color: var(--accent); } .kl__catalog-category[aria-current="page"] { color: var(--ink); font-weight: 500; } .kl__catalog-category[aria-current="page"]::before { border-color: var(--accent); background: var(--accent); } .kl__catalog-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 3.4vw, 40px) clamp(14px, 2vw, 24px); } .kl__catalog-empty { padding: clamp(32px, 5vw, 56px) 24px; text-align: center; } .kl__catalog-empty-text { margin: 0 0 18px; color: var(--muted); } /* ——— Breadcrumbs (shared/_breadcrumbs) ——— */ .kl__crumbs { margin-bottom: 22px; font-size: .8125rem; line-height: normal; color: var(--muted); } .kl__crumbs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; } .kl__crumbs-item { display: inline-flex; gap: 8px; min-width: 0; } /* The separator is drawn, not read: the empty alternative text keeps it out of the accessibility tree. */ .kl__crumbs-item + .kl__crumbs-item::before { content: "/"; content: "/" / ""; } .kl__crumbs-link { color: var(--accent); transition: color .15s ease; } .kl__crumbs-link:hover { color: var(--accent-dark); } /* ——— Product page (/produkty/:shop_id) ——— */ .kl__product { padding: 18px 0 72px; } /* Photos on the left, the purchase column on the right (the mockup's 1.55 : 1). */ .kl__product-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 48px; align-items: start; } /* Gallery: a grid of square photos that stays in view while the long purchase column scrolls. Below 1024px the same slides become a swiped carousel with dots — in the left column, and across the whole screen below 768px (see the narrower-screen sections). */ .kl__product-gallery { position: sticky; top: calc(var(--nav-stuck) + 24px); min-width: 0; } .kl__product-slides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .kl__product-slide { position: relative; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; background: var(--sky); } .kl__product-img, .kl__product-gift { display: block; width: 100%; height: 100%; object-fit: cover; } /* A product without a photo: the placeholder of its catalogue tile, filling the slide. */ .kl__product-slide .kl__tile-placeholder { height: 100%; } .kl__product-dots { display: none; } /* Rendered hidden: gallery_controller.js shows the dots, which do nothing without it (the track still swipes). */ .kl__product-dots[hidden] { display: none; } .kl__product-info { display: flex; flex-direction: column; min-width: 0; } .kl__product-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 2.25rem; line-height: 1.1; color: var(--ink); text-wrap: balance; } .kl__product-price { margin: 22px 0 0; font-family: var(--font-display); font-size: 1.625rem; line-height: normal; color: var(--ink); } /* „Dodaj do koszyka” (or the note why it is missing) above the designer link, both across the column. */ .kl__product-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; } .kl__product-cta .kl__btn { width: 100%; line-height: normal; } .kl__product-cta .kl__btn--primary { padding: 16px 18px; font-size: .97rem; } .kl__product-cta .kl__btn--secondary { padding: 14px 18px; letter-spacing: normal; } .kl__product-note { margin: 0; padding: 14px 18px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); background: rgb(255 255 255 / .6); font-size: .92rem; line-height: 1.55; color: var(--ink-soft); } /* What comes with every bracelet: a glass list whose rows open the matching section of the details below. */ .kl__product-perks { list-style: none; margin: 20px 0 0; padding: 0; border-radius: 18px; } .kl__product-perks li + li { border-top: 1px solid color-mix(in srgb, var(--accent) 10%, transparent); } .kl__product-perk { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 18px; font-size: .875rem; line-height: normal; color: var(--ink); transition: color .15s ease; } .kl__product-perk::after { content: ""; flex: none; width: 7px; height: 7px; border-top: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent); transform: rotate(45deg); transition: transform .2s ease; } .kl__product-perk:hover { color: var(--accent); } .kl__product-perk:hover::after { transform: translateX(2px) rotate(45deg); } /* "O kamieniu": a stone of the bracelet, from the shop's stone cards (Product#stones). */ .kl__stone { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; padding: 18px; border-radius: var(--radius-card); background: linear-gradient(145deg, var(--paper) 0%, var(--blush-card) 55%, var(--sky) 100%); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-float); } .kl__stone-head { display: flex; flex-direction: column; gap: 3px; } .kl__stone-name { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.25; color: var(--ink); } .kl__stone-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; } .kl__stone-fact { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-field); background: rgb(255 255 255 / .6); border: 1px solid rgb(255 255 255 / .9); } /* The origin lists up to five countries: it takes the whole row under the chakra and the zodiac signs. */ .kl__stone-fact--wide { grid-column: 1 / -1; } .kl__stone-fact dt { font-size: .6875rem; color: var(--muted); } .kl__stone-fact dd { margin: 0; font-size: .84rem; line-height: 1.45; color: var(--ink); } .kl__stone-story { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .kl__stone-text { margin: 0; font-size: .84rem; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; } /* Cut to four lines by expandable_controller.js, which only sets the attribute when the text is longer. */ .kl__stone-text[data-clamped] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; } .kl__stone-more { padding: 0; border: 0; background: none; font: inherit; font-size: .84rem; color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-pale); text-underline-offset: 3px; cursor: pointer; } .kl__stone-more:hover { color: var(--accent-dark); text-decoration-color: currentColor; } /* Details: an accordion of
sharing one name, so opening one closes the others (no JS needed). */ .kl__product-details { margin-top: 16px; } .kl__disclosure { border-bottom: 1px solid var(--hairline); } .kl__disclosure-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 17px 0; list-style: none; cursor: pointer; font-size: .8125rem; line-height: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); } .kl__disclosure-summary::-webkit-details-marker { display: none; } .kl__disclosure-summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(45deg); transition: transform .2s ease; } .kl__disclosure[open] > .kl__disclosure-summary::after { transform: rotate(-135deg) translate(-2px, -2px); } .kl__disclosure-summary:hover { color: var(--accent); } .kl__disclosure-body { display: flex; flex-direction: column; gap: 12px; padding: 0 0 18px; } .kl__disclosure-body p { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--ink-soft); text-wrap: pretty; } /* The composition: the cord, then every part with its count, the values in a column on the right. */ .kl__product-data { display: flex; flex-direction: column; gap: 7px; font-size: .875rem; line-height: normal; } .kl__product-spec { margin: 0; } .kl__product-spec-row, .kl__product-parts li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; } .kl__product-spec-row dt { color: var(--muted); } .kl__product-spec-row dd { margin: 0; text-align: right; } .kl__product-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .kl__product-part-count { flex: none; color: var(--muted); } /* ——— Footer ——— */ /* A light base on the page gradient under a garnet hairline: the wordmark and two columns of links, spread across the page grid (the landing mockup). */ .kl__footer { border-top: 1px solid color-mix(in srgb, var(--accent) 10%, transparent); line-height: normal; } .kl__footer-in { max-width: var(--page-max); margin: 0 auto; padding: 36px var(--gutter) 44px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 32px; font-size: .875rem; color: var(--ink-soft); } .kl__footer-brand { font-family: var(--font-display); font-size: 1.125rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); } .kl__footer-col { display: flex; flex-direction: column; gap: 6px; } .kl__footer-h { margin: 0; font-family: var(--font-sans); font-size: .6875rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .kl__footer-link { color: var(--ink); transition: color .15s ease; } .kl__footer-link:hover { color: var(--accent); } /* ——— Legal page (privacy policy) ——— */ .kl__legal { padding: 52px 0 76px; } .kl__legal-head { max-width: 720px; margin: 0 auto; text-align: center; } .kl__legal-title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 400; letter-spacing: -.01em; color: var(--ink); margin: 0 0 10px; } .kl__legal-meta { color: var(--muted); font-size: .94rem; margin: 0; } .kl__legal-body { max-width: 760px; margin: 40px auto 0; padding: clamp(26px, 5vw, 52px); } .kl__legal-sec { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--hairline); } .kl__legal-sec:first-of-type { margin-top: 18px; padding-top: 0; border-top: 0; } .kl__legal-sec h2 { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; color: var(--ink); margin: 0 0 12px; } .kl__legal-sec h2 .kl__legal-num { color: var(--accent); font-variant-numeric: tabular-nums; } .kl__legal-sec p { margin: 0 0 12px; color: var(--ink-soft); } .kl__legal-sec p:last-child { margin-bottom: 0; } .kl__legal-sec ul { margin: 0 0 12px; padding-left: 22px; } .kl__legal-sec li { margin: 0 0 8px; color: var(--ink-soft); } .kl__legal-sec li::marker { color: var(--accent); } .kl__legal-sec li:last-child { margin-bottom: 0; } .kl__legal-sec strong { color: var(--ink); font-weight: 500; } .kl__legal-back { display: inline-block; margin-top: 34px; } /* ——— Contact ——— */ .kl__contact { padding: 52px 0 76px; } .kl__contact-grid { display: grid; gap: 44px; grid-template-columns: .92fr 1.08fr; align-items: start; } .kl__contact-intro { padding-top: 6px; } .kl__contact-title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 400; letter-spacing: -.01em; color: var(--ink); margin: 0 0 14px; } .kl__contact-lead { color: var(--ink-soft); font-size: 1.05rem; margin: 0 0 26px; max-width: 46ch; } .kl__contact-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .kl__contact-point { display: flex; align-items: center; gap: 14px; color: var(--ink); font-size: .96rem; } .kl__contact-point-ic { flex-shrink: 0; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--accent); background: rgb(255 255 255 / .6); border: 1px solid var(--glass-edge); box-shadow: 0 8px 20px -14px color-mix(in srgb, var(--accent) 55%, transparent); } .kl__contact-point-ic svg { width: 18px; height: 18px; } /* ——— Forms (contact, sign-in, account) ——— */ .kl__contact-card { padding: clamp(24px, 4vw, 36px); } .kl__form { display: flex; flex-direction: column; gap: 18px; } .kl__field { display: flex; flex-direction: column; gap: 7px; } .kl__label { font-weight: 500; font-size: .9rem; color: var(--ink); } .kl__label-opt { color: var(--muted); font-weight: 400; } /* The field border mixes --muted into white so it keeps at least 3:1 against the glass card, as a control needs (the cards themselves are edged with --glass-edge). */ .kl__input { width: 100%; font: inherit; font-size: .98rem; color: var(--ink); background: rgb(255 255 255 / .85); border: 1px solid color-mix(in srgb, var(--muted) 75%, var(--white)); border-radius: var(--radius-field); padding: 12px 16px; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } .kl__input::placeholder { color: var(--muted); } .kl__input:focus { outline: none; background: var(--paper); border-color: var(--accent); box-shadow: var(--focus-ring); } .kl__input--err { border-color: var(--error); } .kl__input--err:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 16%, transparent); } .kl__textarea { resize: vertical; min-height: 130px; line-height: 1.55; } .kl__field-err { margin: 0; color: var(--error); font-size: .84rem; } .kl__field-hint { margin: 0; color: var(--muted); font-size: .84rem; } .kl__field--check { flex-direction: row; align-items: flex-start; gap: 10px; flex-wrap: wrap; } .kl__checkbox { flex-shrink: 0; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent); cursor: pointer; } .kl__check-label { flex: 1; min-width: 0; font-size: .9rem; color: var(--muted); line-height: 1.5; cursor: pointer; } /* The error of the consent goes under its label: 18px checkbox + 10px gap. */ .kl__field--check .kl__field-err { flex-basis: 100%; padding-left: 28px; } /* Rails wraps an invalid field in div.field_with_errors; the views mark errors themselves (kl__input--err, aria-invalid), so the wrapper must not break the field's flex layout. */ .kl .field_with_errors { display: contents; } .kl__form-submit { margin-top: 4px; align-self: flex-start; } /* Validation errors of a form (inline, per field). Success/info and operation errors are shown by the generic toast mechanism (app/assets/stylesheets/toast.css). */ .kl__alert { display: flex; align-items: flex-start; gap: 10px; border-radius: var(--radius-field); padding: 14px 16px; margin-bottom: 20px; font-size: .92rem; border: 1px solid transparent; } .kl__alert--error { background: var(--error-bg); border-color: var(--error-bd); color: var(--error); flex-direction: column; } /* Jost is loaded up to 500: a heavier weight would be synthesised. */ .kl__alert strong { font-weight: 500; } .kl__alert-list { margin: 6px 0 0; padding-left: 20px; } .kl__alert-list li { margin: 0 0 3px; } /* Honeypot — out of sight and out of keyboard reach, but in the DOM (bots fill it in). */ .kl__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ——— Sign-in / password reset ——— */ .kl__auth { display: grid; place-items: center; padding: clamp(40px, 8vh, 84px) var(--gutter); } .kl__auth-col { width: 100%; max-width: 440px; text-align: center; } .kl__auth-card { width: 100%; text-align: left; padding: clamp(28px, 5vw, 40px); } .kl__auth-head { text-align: center; margin-bottom: 26px; } .kl__auth-title { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 400; letter-spacing: -.01em; color: var(--ink); margin: 0 0 8px; } .kl__auth-sub { color: var(--muted); font-size: .96rem; margin: 0; } .kl__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .kl .kl__label-link { font-size: .84rem; color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-pale); text-underline-offset: 3px; } .kl .kl__label-link:hover { color: var(--accent-dark); text-decoration-color: currentColor; } .kl__auth-foot { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--hairline); text-align: center; font-size: .92rem; color: var(--muted); } /* `.kl .kl__auth-foot a` ties with the classless-link rule (.kl a:not([class])) and wins by coming later. */ .kl .kl__auth-foot a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-pale); text-underline-offset: 3px; } .kl .kl__auth-foot a:hover { color: var(--accent-dark); text-decoration-color: currentColor; } .kl__auth-note { display: inline-flex; align-items: center; gap: 8px; margin: 22px auto 0; color: var(--muted); font-size: .84rem; } .kl__auth-note svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; } /* ——— Account panel ——— */ .kl__account { padding: clamp(40px, 7vh, 72px) var(--gutter); } .kl__account-col { width: 100%; max-width: 560px; margin: 0 auto; } .kl__account-head { margin-bottom: 26px; } .kl__account-title { font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 2.2rem); font-weight: 400; letter-spacing: -.01em; color: var(--ink); margin: 0 0 6px; } .kl__account-sub { color: var(--muted); font-size: .98rem; margin: 0; } .kl__card { padding: clamp(22px, 4vw, 30px); margin-bottom: 20px; } .kl__card-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; color: var(--ink); margin: 0 0 18px; } .kl__data { margin: 0; } .kl__data-row { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid var(--hairline); } .kl__data-row:first-child { padding-top: 0; border-top: 0; } .kl__data-row:last-child { padding-bottom: 0; } .kl__data-label { font-size: .84rem; color: var(--muted); } .kl__data-value { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; font-size: 1rem; color: var(--ink); } .kl__account-card .kl__btn--sm { margin-top: 18px; } .kl__account-foot { display: flex; justify-content: flex-end; margin-top: 4px; } .kl__account-logout { color: var(--error); border-color: color-mix(in srgb, var(--error) 28%, transparent); } .kl__account-logout:hover { color: var(--error); background: var(--error-bg); border-color: var(--error-bd); } /* A state marker (e.g. a verified address) — a pill. */ .kl__badge { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: var(--radius-pill); font-size: .75rem; line-height: 1.7; border: 1px solid transparent; } .kl__badge--available { background: var(--success-bg); color: var(--success); border-color: var(--success-bd); } .kl__badge--soon { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-bd); } /* ——— Narrower screens ——— */ /* Below 1024px the „O Moonstory” card stacks its heading over the values, and the navbar's links close up so they stay next to the wordmark down to the phone bar (768px). The product photos no longer fit side by side next to the purchase column: they become a carousel of one photo at a time in the (still sticky) left column — swiped, scroll-snapped, with dots under it that gallery_controller.js keeps in step. */ @media (max-width: 1023px) { .kl__nav-links { gap: 22px; } .kl__values-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "list" "link"; grid-template-rows: none; row-gap: 28px; } .kl__product-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; } .kl__product-slides { display: flex; gap: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; } .kl__product-slides::-webkit-scrollbar { display: none; } .kl__product-slide { flex: 0 0 100%; scroll-snap-align: start; } .kl__product-dots { display: flex; justify-content: center; align-items: center; gap: 0; margin-top: 12px; } /* A fixed 24px target, whatever the width of the pill drawn inside it. */ .kl__product-dot { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; } /* The inactive dot is a lighter garnet at 3:1 against every background of the page; the current one is a pill. */ .kl__product-dot::before { content: ""; display: block; width: 6px; height: 6px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--accent) 65%, var(--white)); transition: width .2s ease, background-color .2s ease; } .kl__product-dot[aria-current="true"]::before { width: 18px; background: var(--accent); } } /* A landscape phone is shorter than the square photo: the stuck carousel and its dots must fit under the bar (24px sticky offset + 12px gap + 24px dots + 16px air). svh: the viewport with the browser toolbar shown. */ @media (min-width: 768px) and (max-width: 1023px) { .kl__product-slides { width: min(100%, 100svh - var(--nav-stuck) - 76px); margin-inline: auto; } } /* Below ~900px the two-column sections return to one column: the landing's product cards go two by two, the „Nr 1” card rises above the other bestsellers. */ @media (max-width: 900px) { .kl__split { grid-template-columns: 1fr; gap: 26px; } /* A full-width portrait would push the copy a whole screen down — crop to the bracelets. */ .kl__about-img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 80%; } .kl__newest-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } .kl__bestsellers-layout { grid-template-columns: minmax(0, 1fr); } /* The category sidebar moves above the tiles and its categories flow in a wrapping row. */ .kl__catalog-layout { grid-template-columns: 1fr; gap: 26px; } .kl__catalog-nav { position: static; } .kl__catalog-categories { display: flex; flex-wrap: wrap; column-gap: 28px; } .kl__catalog-categories li + li { border-top: 0; } } @media (max-width: 860px) { .kl__contact-grid { grid-template-columns: 1fr; gap: 30px; } .kl__product { padding-top: 14px; } .kl__product-title { font-size: 1.875rem; } .kl__product-price { margin-top: 16px; font-size: 1.5rem; } } /* Phone (the landing mockup at 390px). The navbar becomes a sticky frosted bar with the cart and a burger, whose menu is a glass card hidden (visibility) while closed, so its links leave the tab order and the accessibility tree. The bar is 73px tall: the scrollport starts under it, while the bar's own contents are exempt — the checkbox the burger focuses and the links reached with Shift+Tab would otherwise make the browser scroll to "clear" them and send a scrolled page back to the top. The negative margin equals the scroll padding, not more: WebKit reads a margin far beyond the item's height (e.g. -100vh) as a box below the item and scrolls the page down on every focus move in the open menu. Keep it equal to the paddings under the bar (here and in checkout.css) when they change. The landing: the photo band above the statement, the values in one column, „Nowości” swiped sideways, the bestsellers under the „Nr 1” card, the footer's columns side by side under the wordmark. */ @media (max-width: 768px) { .kl { --nav-stuck: 73px; } html:has(> body > .kl:not(.spa-site-nav)) { scroll-padding-top: 88px; } body > .kl:has(> .kl__landing) { background: radial-gradient(500px 360px at 90% 4%, var(--blush-glow) 0%, transparent 70%), linear-gradient(180deg, var(--sky) 0%, var(--blush) 40%, var(--paper) 100%), var(--paper); } .kl__nav { position: sticky; top: 0; border-bottom: 1px solid rgb(255 255 255 / .9); } .kl__nav::before { background: color-mix(in srgb, var(--mist) 80%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .kl__nav * { scroll-margin-top: -88px; } .kl__nav-in { padding: 14px 18px; gap: 12px; } .kl__brand { font-size: 1.1875rem; } .kl__nav-links { display: none; } .kl__nav-cb { display: block; } .kl__burger { display: inline-flex; } .kl__cart { background: rgb(255 255 255 / .6); backdrop-filter: none; -webkit-backdrop-filter: none; } .kl__nav-drawer { display: block; position: absolute; top: 68px; left: 12px; right: 12px; padding: 8px; border-radius: 24px; border: 1px solid var(--glass-edge); background: linear-gradient(145deg, rgb(255 255 255 / .95), color-mix(in srgb, var(--blush-card) 90%, transparent)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--accent) 55%, transparent); visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; } .kl__nav-cb:checked ~ .kl__nav-drawer { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; } .kl__kicker { font-size: .6875rem; } .kl__landing-section { padding: 0 16px 56px; } .kl__landing-heading { gap: 6px; } .kl__landing-h2 { font-size: 1.75rem; } .kl__landing-head { gap: 12px; } .kl .kl__landing-head .kl__landing-link { font-size: .84375rem; } .kl__landing-link-more { display: none; } .kl__hero { flex-direction: column; align-items: stretch; min-height: 0; margin-bottom: 0; padding: 0; overflow: visible; background: none; } .kl__hero-media { position: relative; inset: auto; order: -1; height: 400px; background: var(--sky); } .kl__hero-img { object-position: 12% 50%; transform: none; } .kl__hero-media::after { top: auto; height: 120px; background: linear-gradient(180deg, transparent 0%, var(--blush) 100%); } .kl__hero-caption { top: 14px; right: 14px; bottom: auto; gap: 2px; padding: 10px 13px; box-shadow: none; } .kl__hero-caption-label { font-size: .59375rem; } .kl__hero-caption-text { font-size: .875rem; } .kl__hero-copy { max-width: none; margin-top: -56px; padding: 0 20px 56px; gap: 16px; } .kl__hero-title { font-size: 2.5rem; line-height: 1.06; } .kl__hero-lead { max-width: none; font-size: .96875rem; line-height: 1.6; } .kl__hero-cta { align-self: stretch; margin-top: 4px; padding: 16px 20px; } .kl__values-card { display: flex; flex-direction: column; gap: 22px; padding: 26px 22px; } .kl__values-intro { gap: 10px; } .kl__values-title { font-size: 1.75rem; } .kl__values-list { display: flex; flex-direction: column; gap: 18px; } .kl__value { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding-top: 14px; } .kl__value-num { padding-top: 3px; } .kl__value-body { gap: 5px; } .kl__value-title { font-size: 1.09375rem; } .kl__value-text { font-size: .875rem; line-height: 1.55; } /* „Nowości” runs to the window's edges: a row swiped sideways, cards snapping to the 20px margin. */ .kl__newest { padding-left: 0; padding-right: 0; gap: 20px; } .kl__newest .kl__landing-head { padding: 0 20px; } .kl__newest-row { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; padding: 0 20px 4px; scrollbar-width: none; } .kl__newest-row::-webkit-scrollbar { display: none; } .kl__newest-item { flex: 0 0 min(72%, 300px); scroll-snap-align: start; } .kl__product-card { gap: 10px; } .kl__product-card-badge { left: 10px; top: 10px; font-size: .625rem; } .kl__product-card-cart { left: 10px; right: 10px; bottom: 10px; min-height: 44px; padding: 10px 12px; background: rgb(255 255 255 / .65); } .kl__product-card-name { font-size: 1.0625rem; } .kl__product-card-stones { font-size: .78125rem; } .kl__product-card-price { font-size: .9375rem; } .kl__bestsellers { gap: 18px; } .kl__bestsellers .kl__landing-head { padding: 0 4px; } .kl__bestsellers-layout { display: flex; flex-direction: column; gap: 18px; } .kl__bestseller-lead { min-height: 0; aspect-ratio: 4 / 5; max-height: 520px; } .kl__bestseller-rank { left: 12px; top: 12px; padding: 4px 11px; font-size: .65625rem; } .kl__bestseller-panel { left: 12px; right: 12px; bottom: 12px; gap: 12px; padding: 14px 16px; background: linear-gradient(135deg, rgb(255 255 255 / .85), rgb(255 255 255 / .55)); box-shadow: none; } .kl__bestseller-panel-main { gap: 3px; } .kl__bestseller-lead-name { font-size: 1.25rem; } .kl__bestseller-lead-stones, .kl__bestseller-lead-more { display: none; } .kl__bestseller-lead-price { font-size: 1.125rem; } .kl__bestseller-list { gap: 10px; } .kl__bestseller { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 10px; backdrop-filter: none; -webkit-backdrop-filter: none; } .kl__bestseller-photo { width: 96px; height: 96px; } .kl__bestseller-body { gap: 4px; padding-right: 0; } .kl__bestseller-head { gap: 8px; } .kl__bestseller-name { font-size: 1.0625rem; } .kl__bestseller-price { font-size: .9375rem; } .kl__bestseller-stones { font-size: .78125rem; } .kl__bestseller-cart { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 14px; } .kl__footer-in { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; padding: 28px 20px 40px; } .kl__footer-brand { grid-column: 1 / -1; justify-self: start; font-size: 1.0625rem; } .kl__footer-col { gap: 8px; } } /* The product page on a phone: one column — the carousel across the whole screen, then the purchase column. */ @media (max-width: 767px) { .kl__product-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; } .kl__product-gallery { position: static; margin: 0 calc(-1 * var(--gutter)); } } @media (max-width: 600px) { .kl__catalog-grid { grid-template-columns: 1fr 1fr; } } @media (prefers-reduced-motion: reduce) { .kl__product-slides, .kl__newest-row { scroll-behavior: auto; } .kl__disclosure-summary::after, .kl__product-dot::before, .kl__product-perk::after { transition: none; } .kl__nav-drawer { transition: none; } }