/* Styles of the public pages (.kl) — landing, 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 shows above itself (layouts/application_spa.html.erb + spa_site_nav.css). Brand tokens (colours/typefaces/radii) come from tokens.css (:root, generated from frontend/packages/design-tokens/src/tokens.ts) — NOT defined HERE. ZAŁOŻENIE WIZUALNE: kolor na stronie wnoszą ZDJĘCIA biżuterii, a nie powierzchnie. Tło zostaje białe albo lniane, akcent (złoto) pojawia się we włoskowatych liniach i podkreśleniach. Wszystkie nagłówki niesie krój szeryfowy (Cormorant Garamond) — ten sam, którym podpisany jest projektant bransoletek; tekst bieżący i formularze: Montserrat. */ .kl { font-family: var(--font-sans); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; line-height: 1.65; } .kl * { box-sizing: border-box; } /* Płynne przewijanie po kliknięciu kotwic w nawigacji. scroll-behavior musi siedzieć na elemencie przewijanym (html), nie na .kl. Szanujemy prefers-reduced-motion. */ @media (prefers-reduced-motion: no-preference) { html:has(.kl) { scroll-behavior: smooth; } } /* Sticky navbar zasłaniałby nagłówek sekcji — offset, by kotwica zatrzymała się pod paskiem. */ .kl [id] { scroll-margin-top: 88px; } /* Bez color:inherit — każdy ma własny kolor (brand/nav/btn); inherit miałby wyższą specyficzność (.kl a) niż .kl__btn--* i psułby kolor tekstu przycisków. */ .kl a { text-decoration: none; } .kl a:not([class]) { color: inherit; } .kl :focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; } .kl img { max-width: 100%; } .kl__wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; } /* ——— Typografia ——— */ /* Każdy nagłówek — także w widokach bez własnej klasy (sesje, zmiana e-maila) — dostaje krój szeryfowy. :where() zeruje specyficzność, więc klasy .kl__* nadal decydują o reszcie stylu. */ .kl :where(h1, h2, h3, h4, h5, h6) { font-family: var(--font-display); } /* Główna wypowiedź strony (hasło hero). Szeryf w rozmiarze plakatowym, ciasna interlinia — tekst jest tu elementem graficznym, nie tylko treścią. Rozmiar rośnie z szerokością okna, tak jak zdjęcie, na którym hasło leży; balance wyrównuje długość wierszy. */ .kl__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.4rem, 3.6vw, 4.25rem); line-height: 1.02; letter-spacing: -.012em; color: var(--ink); margin: 0 0 22px; text-wrap: balance; } .kl__h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.12; letter-spacing: -.01em; color: var(--ink); margin: 0 0 16px; } /* Lead leży na zdjęciu hero — ink-soft zamiast muted trzyma kontrast także nad jasnym kadrem. */ .kl__lead { font-size: 1.06rem; color: var(--ink-soft); max-width: 46ch; margin: 0; text-wrap: pretty; } .kl__sub { font-size: 1rem; color: var(--muted); max-width: 58ch; margin: 0 0 26px; } /* ——— Nawigacja ——— */ .kl__nav { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.92); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--border); } .kl__nav-in { max-width: 1120px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .kl__brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: .01em; color: var(--ink); } /* Logo (SVG z app/assets/images) niesie własne tło i zaokrąglenie. */ .kl__nav-links { display: flex; align-items: center; gap: 28px; } .kl__nav-link { font-size: .92rem; color: var(--muted); transition: color .15s ease; } .kl__nav-link:hover { color: var(--ink); } /* Burger + rozwijane menu na mobile (czysto-CSS, działa bez JS). */ .kl__nav-cb { position: absolute; opacity: 0; pointer-events: none; } .kl__burger { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; cursor: pointer; } .kl__burger-line, .kl__burger-line::before, .kl__burger-line::after { content: ""; display: block; width: 20px; height: 1px; background: var(--ink); transition: transform .25s ease, opacity .2s ease; } .kl__burger-line::before { transform: translateY(-6px); } .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: rotate(45deg); } .kl__nav-cb:checked ~ .kl__nav-in .kl__burger-line::after { transform: rotate(-45deg); } .kl__nav-drawer { display: none; } .kl__nav-drawer-in { display: flex; flex-direction: column; padding: 8px 24px 22px; gap: 4px; } .kl__nav-drawer-link { padding: 12px 0; font-size: 1rem; color: var(--ink); border-bottom: 1px solid var(--border); } .kl__nav-drawer-cta { margin-top: 18px; justify-content: center; } /* ——— Przyciski i linki tekstowe ——— */ .kl__btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: .9375rem; font-weight: 500; line-height: 1.2; padding: 15px 28px; border: 1px solid transparent; border-radius: var(--radius-btn); cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .kl__btn--primary { background: var(--ink); color: var(--white); } .kl__btn--primary:hover { background: var(--gold-dark); } .kl__btn--ghost { background: transparent; color: var(--ink); border-color: var(--border); } .kl__btn--ghost:hover { border-color: var(--gold); color: var(--gold-dark); } .kl__btn--sm { padding: 10px 18px; font-size: .875rem; } .kl__btn--block { width: 100%; justify-content: center; margin-top: 6px; } /* Link drugorzędny: złota linia pod tekstem zamiast drugiego przycisku — dwa równie mocne przyciski obok siebie rozmywają, co jest głównym działaniem. */ .kl__link { display: inline-block; color: var(--ink); font-size: .9375rem; padding-bottom: 3px; border-bottom: 1px solid var(--gold); transition: color .18s ease, border-color .18s ease; } .kl__link:hover { color: var(--gold-dark); border-color: var(--gold-dark); } /* ——— Hero ——— */ /* Zdjęcie na całą szerokość okna, a hasło leży na nim po lewej — na jasnym rękawie swetra, w pasie kadru, który bransoletka (od ~40% szerokości zdjęcia) zostawia wolny. Zdjęcie jest wypełnieniem pozycjonowanym absolutnie, więc wysokość hero wyznacza min-height (albo tekst, gdyby okazał się wyższy), a nie proporcje pliku. --hero-gutter: lewy margines tekstu = margines siatki strony (jak logo w nawigacji), ale najwyżej 8vw — na szerokim ekranie siatka ucieka do środka, a zdjęcie rośnie razem z oknem, więc tekst trzyma się wtedy proporcji kadru. */ .kl__hero { --hero-gutter: max(24px, min(calc((100vw - 1120px) / 2 + 24px), 8vw)); position: relative; display: flex; align-items: flex-start; min-height: clamp(460px, 44vw, 760px); } .kl__hero-media { position: absolute; inset: 0; } /* Kadr zakotwiczony do lewej krawędzi. Dopóki hero jest wyższe niż proporcje zdjęcia (2,39:1), nadmiar ucina się z prawej (czasopismo), a bransoletka odsuwa się od tekstu; przy 44vw palce wciąż mieszczą się w kadrze z zapasem. Na bardzo szerokim ekranie (limit 760px) zdjęcie przycina się już w pionie — 40% zostawia zapas nad bransoletką i pod chwostem. Lniane tło widać, zanim zdjęcie się doczyta. */ .kl__hero-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0% 40%; background: var(--linen); } /* Ciepłe rozjaśnienie lewej części kadru: taca, kryształ i cień mankietu są za ciemne pod tekst. Trzyma siłę pod leadem (do ~32% szerokości) i gaśnie, zanim dojdzie do bransoletki. */ .kl__hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--card) 86%, transparent) 0%, color-mix(in srgb, var(--card) 72%, transparent) 30%, transparent 42%); } /* Tekst zaczepiony od góry w odstępie rosnącym z szerokością okna — tak jak skaluje się zdjęcie — więc hasło leży na rękawie. Szerokość 38% kończy kolumnę przed bransoletką. */ .kl__hero-copy { position: relative; z-index: 1; width: 38%; padding: clamp(48px, 8vw, 140px) 0 48px var(--hero-gutter); } /* Lead kończy się przy 32% szerokości okna: dalej leży cień mankietu, a rozjaśnienie słabnie. */ .kl__hero .kl__lead { max-width: min(46ch, calc(32vw - var(--hero-gutter))); } /* ——— Sekcje ——— */ .kl__section { padding: clamp(56px, 8vw, 104px) 0; } .kl__section--linen { background: var(--linen); } /* Every landing photo except the full-bleed hero gets softly rounded corners. The brand tokens have no 1rem radius (card 4px, button 2px), hence the literal value. */ .kl__split-img, .kl__tile-img { border-radius: 1rem; } /* ——— Sekcja z jednym zdjęciem i tekstem ——— */ .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; } .kl__split-copy p { color: var(--muted); 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 serif lead and subheading, and a closing line set off by a short gold hairline — the accent lives in lines, not surfaces. */ .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-size: 1.35rem; line-height: 1.35; color: var(--ink-soft); } .kl__h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.2; color: var(--ink); margin: 30px 0 12px; } .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(--gold); } /* ——— Galeria wzorów ——— */ .kl__gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 24px); margin-top: clamp(26px, 4vw, 40px); } .kl__tile { display: block; color: var(--ink); } .kl__tile-img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: opacity .2s ease; } .kl__tile:hover .kl__tile-img { opacity: .9; } .kl__tile-name { display: block; margin-top: 10px; font-size: .82rem; letter-spacing: .04em; } .kl__tile:hover .kl__tile-name { color: var(--gold-dark); } .kl__gallery-foot { margin: clamp(22px, 3vw, 32px) 0 0; font-size: .92rem; color: var(--muted); } /* The tile of a product without a photo (Product::Image) keeps its square: a bracelet outline in a hairline, with one gold bead, on linen. 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; border-radius: 1rem; background: var(--linen); } .kl__tile-placeholder::before { content: ""; width: 44%; aspect-ratio: 1 / 1; border: 1px solid var(--muted-accent); 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(--gold); translate: -50% 50%; } .kl__tile:hover .kl__tile-placeholder::before { border-color: var(--gold); } .kl__tile-price { display: block; margin-top: 2px; font-size: .82rem; color: var(--muted); } /* ——— Product catalogue: category pages (/produkty/kategoria/:id) ——— */ .kl__catalog { padding: 52px 0 76px; } .kl__catalog-head { margin-bottom: clamp(28px, 4vw, 44px); padding-bottom: clamp(22px, 3vw, 30px); border-bottom: 1px solid var(--border); } .kl__catalog-eyebrow { margin: 0 0 8px; font-size: .78rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dark); } .kl__catalog-title { font-family: var(--font-display); font-size: clamp(2.2rem, 4.4vw, 3.2rem); font-weight: 500; line-height: 1.05; 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: 220px 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; } /* Sidebar: a card that stays under the sticky navbar while the tiles scroll (88px, as scroll-margin-top above). */ .kl__catalog-nav { position: sticky; top: 88px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 20px 22px 10px; } .kl__catalog-nav-title { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; color: var(--ink); } .kl__catalog-categories { list-style: none; margin: 0; padding: 0; } .kl__catalog-categories li + li { border-top: 1px solid var(--border); } /* Every category has a hairline dot; the current one (aria-current="page") is the selected one — its dot fills with gold, like a checked radio button. */ .kl__catalog-category { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: .94rem; color: var(--muted); transition: color .15s ease; } .kl__catalog-category::before { content: ""; flex: none; width: 9px; height: 9px; border: 1px solid var(--muted-accent); border-radius: 50%; transition: background-color .15s ease, border-color .15s ease; } .kl__catalog-category:hover { color: var(--ink); } .kl__catalog-category:hover::before { border-color: var(--gold); } .kl__catalog-category[aria-current="page"] { color: var(--ink); font-weight: 500; } .kl__catalog-category[aria-current="page"]::before { border-color: var(--gold); background: var(--gold); } .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; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); } .kl__catalog-empty-text { margin: 0 0 18px; color: var(--muted); } /* ——— Product page (/produkty/:shop_id) ——— */ .kl__product { padding: 52px 0 76px; } .kl__product-grid { display: grid; gap: clamp(28px, 5vw, 64px); align-items: start; } /* :has() (allow_browser :modern) puts the photo beside the copy without ERB in the class attribute. */ .kl__product-grid:has(.kl__product-figure) { grid-template-columns: 1fr 1fr; } .kl__product-figure { margin: 0; } .kl__product-img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: 1rem; background: var(--linen); } .kl__product-copy { max-width: 60ch; } .kl__product-back { display: inline-block; margin-bottom: 22px; color: var(--ink); border-bottom: 1px solid var(--gold); padding-bottom: 3px; font-size: .94rem; } .kl__product-back:hover { color: var(--gold-dark); border-color: var(--gold-dark); } .kl__product-title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 500; letter-spacing: -.01em; color: var(--ink); margin: 0 0 10px; } .kl__product-price { font-size: 1.25rem; color: var(--ink); margin: 0 0 20px; } .kl__product-desc { color: var(--ink-soft); margin: 0 0 26px; } .kl__product-parts { list-style: none; margin: 0; padding: 0; } .kl__product-cta { margin-top: 28px; } /* ——— Zamknięcie ——— */ .kl__closing { text-align: center; max-width: 640px; margin: 0 auto; } .kl__closing .kl__sub { margin-left: auto; margin-right: auto; } /* ——— Stopka ——— */ /* Ciemna podstawa strony — po jasnym, zdjęciowym ciągu daje domknięcie. */ .kl__footer { background: var(--ink); color: var(--linen); padding: clamp(44px, 6vw, 72px) 0 28px; } .kl__footer-in { max-width: 1120px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 5vw, 64px); } .kl__footer .kl__brand { color: var(--linen); } .kl__footer-tagline { margin: 16px 0 0; max-width: 40ch; font-size: .92rem; color: var(--muted-accent); } .kl__footer-cols { display: flex; gap: 64px; } .kl__footer-col { display: flex; flex-direction: column; gap: 10px; } .kl__footer-h { margin: 0 0 4px; font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; color: var(--linen); } .kl__footer-link { font-size: .92rem; color: var(--muted-accent); transition: color .15s ease; } .kl__footer-link:hover { color: var(--linen); } .kl__footer-bottom { max-width: 1120px; margin: clamp(34px, 5vw, 56px) auto 0; padding: 20px 24px 0; border-top: 1px solid rgba(241,234,224,.16); } .kl__footer-copy { font-size: .82rem; color: var(--muted-accent); } /* ——— Strona prawna (polityka prywatności) ——— */ .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.8rem); font-weight: 500; letter-spacing: -.01em; color: var(--ink); margin: 0 0 10px; } .kl__legal-meta { color: var(--muted); font-size: .92rem; margin: 0; } .kl__legal-body { max-width: 760px; margin: 40px auto 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: clamp(26px, 5vw, 52px); } .kl__legal-sec { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--border); } .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.35rem; font-weight: 500; color: var(--ink); margin: 0 0 12px; } .kl__legal-sec h2 .kl__legal-num { color: var(--gold); font-variant-numeric: tabular-nums; } .kl__legal-sec p { margin: 0 0 12px; color: var(--ink); } .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); } .kl__legal-sec li:last-child { margin-bottom: 0; } .kl__legal-sec strong { color: var(--ink); font-weight: 600; } .kl__legal-back { display: inline-block; color: var(--ink); border-bottom: 1px solid var(--gold); padding-bottom: 3px; font-size: .94rem; margin-top: 34px; } .kl__legal-back:hover { color: var(--gold-dark); border-color: var(--gold-dark); } /* ——— Kontakt ——— */ .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.8rem); font-weight: 500; letter-spacing: -.01em; color: var(--ink); margin: 0 0 14px; } .kl__contact-lead { color: var(--muted); 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: flex-start; gap: 12px; color: var(--ink); font-size: .96rem; } .kl__contact-point-ic { flex-shrink: 0; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-card); background: var(--gold-soft); color: var(--gold-dark); } /* ——— Formularze (kontakt, logowanie, konto) ——— */ .kl__contact-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-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); } .kl__input { width: 100%; font: inherit; font-size: .98rem; color: var(--ink); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-btn); padding: 12px 14px; transition: border-color .15s ease, box-shadow .15s ease; } .kl__input::placeholder { color: var(--muted-accent); } .kl__input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(166,124,46,.16); } .kl__input--err { border-color: var(--error); } .kl__input--err:focus { box-shadow: 0 0 0 3px rgba(143,45,35,.16); } .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: .82rem; } .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-top: 2px; accent-color: var(--gold); cursor: pointer; } .kl__check-label { flex: 1; min-width: 0; font-size: .9rem; color: var(--muted); line-height: 1.5; cursor: pointer; } .kl__form-submit { justify-content: center; margin-top: 4px; align-self: flex-start; } /* Listy błędów walidacji formularza (inline, na poziomie pola). Sukces/info oraz błędy operacji pokazuje generyczny mechanizm toastów (app/assets/stylesheets/toast.css). */ .kl__alert { display: flex; align-items: flex-start; gap: 10px; border-radius: var(--radius-card); 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; } .kl__alert-list { margin: 6px 0 0; padding-left: 20px; } .kl__alert-list li { margin: 0 0 3px; } /* Honeypot — poza zasięgiem wzroku i klawiatury, ale w DOM (boty je wypełnią). */ .kl__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ——— Logowanie / rejestracja ——— */ .kl__auth { display: grid; place-items: center; padding: clamp(40px, 8vh, 84px) 24px; background: var(--linen); } .kl__auth-col { width: 100%; max-width: 432px; text-align: center; } .kl__auth-card { width: 100%; text-align: left; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-card); 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, 2.1rem); font-weight: 500; 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__label-link { font-size: .82rem; color: var(--muted); border-bottom: 1px solid var(--border); } .kl__label-link:hover { color: var(--ink); border-color: var(--gold); } .kl__auth-foot { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); text-align: center; font-size: .92rem; color: var(--muted); } .kl__auth-foot a { color: var(--ink); border-bottom: 1px solid var(--gold); } .kl__auth-foot a:hover { color: var(--gold-dark); } .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(--gold); flex-shrink: 0; } /* ——— Panel konta ——— */ .kl__account { padding: clamp(40px, 7vh, 72px) 24px; background: var(--linen); } .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: 500; letter-spacing: -.01em; color: var(--ink); margin: 0 0 6px; } .kl__account-sub { color: var(--muted); font-size: .98rem; margin: 0; } .kl__card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-card); padding: clamp(22px, 4vw, 30px); margin-bottom: 20px; } .kl__card-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; 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(--border); } .kl__data-row:first-child { padding-top: 0; border-top: 0; } .kl__data-row:last-child { padding-bottom: 0; } .kl__data-label { font-size: .82rem; color: var(--muted); } .kl__data-value { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; 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); } .kl__account-logout:hover { background: var(--error-bg); border-color: var(--error-bd); } /* Znacznik stanu (np. adres zweryfikowany) — jedyne miejsce z pigułką. */ .kl__badge { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: var(--radius-pill); font-size: .74rem; 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); } /* ——— Układ na węższych ekranach ——— */ /* Poniżej 1024px obok bransoletki nie ma już miejsca na hasło — hero wraca do jednej kolumny: zdjęcie NAD tekstem (najpierw produkt), bez rozjaśnienia, w kadrze 2:1 z pełną kompozycją. */ @media (max-width: 1023px) { .kl__hero { flex-direction: column; align-items: stretch; min-height: 0; } .kl__hero-media { position: relative; order: -1; } .kl__hero-media::after { content: none; } .kl__hero-img { height: auto; aspect-ratio: 2 / 1; object-position: 50% 40%; } .kl__hero-copy { width: auto; padding: 32px 24px 36px; } .kl__hero .kl__lead { max-width: 46ch; } .kl__title { font-size: clamp(2.4rem, 6.4vw, 3.4rem); } /* Tighter spacing keeps the links and the CTA next to the brand down to the burger breakpoint (768px). */ .kl__nav-links { gap: 20px; } } /* Poniżej ~900px sekcje dwukolumnowe wracają do jednej kolumny. */ @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__gallery { grid-template-columns: 1fr 1fr; } .kl__product-grid:has(.kl__product-figure) { grid-template-columns: 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; } .kl__footer-in { grid-template-columns: 1fr; } } @media (max-width: 860px) { .kl__contact-grid { grid-template-columns: 1fr; gap: 30px; } } /* Mobile: chowamy poziome linki, pokazujemy burger + rozwijany panel. */ @media (max-width: 768px) { .kl__nav-links { display: none; } .kl__burger { display: inline-flex; } .kl__nav-drawer { display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--border); overflow: hidden; max-height: 0; transition: max-height .35s ease; } /* Four links plus the CTA: keep headroom so the last item is never clipped. */ .kl__nav-cb:checked ~ .kl__nav-drawer { max-height: 480px; } } @media (max-width: 600px) { /* Telefon dostaje kwadratowy kadr wokół bransoletki ( w home/index.html.erb). */ .kl__hero-img { aspect-ratio: 1 / 1; } .kl__footer-cols { flex-direction: column; gap: 26px; } .kl__catalog-grid { grid-template-columns: 1fr 1fr; } }