/* ========================================================================== Anna Jaworowska — komponenty Wymaga: tokens.css. Bez frameworka, bez JS (poza
dla FAQ). ========================================================================== */ /* --- Reset i baza -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--aj-bg-light); color: var(--aj-ink-body); font: 400 var(--aj-fs-body)/var(--aj-lh-body) var(--aj-font-body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } p { margin: 0 0 var(--aj-s-2); max-width: var(--aj-measure); text-wrap: pretty; } p:last-child { margin-bottom: 0; } h1, h2, h3 { margin: 0; font-family: var(--aj-font-display); font-weight: 400; letter-spacing: var(--aj-ls-display); text-wrap: balance; } h1 { font-size: var(--aj-fs-h1); line-height: var(--aj-lh-head); } h2 { font-size: var(--aj-fs-h2); line-height: var(--aj-lh-head); } h3 { font-size: var(--aj-fs-h3); line-height: var(--aj-lh-head); } em, .aj-em { font-style: italic; } a:not(.aj-btn) { color: var(--aj-gold-ink); text-decoration-thickness: 1px; text-underline-offset: .22em; transition: color var(--aj-dur) var(--aj-ease); } a:hover:not(.aj-btn) { color: var(--aj-ink); } /* .aj-btn zarządza własnym kolorem przez --_fg (patrz sekcja "Przycisk") — te dwie ogólne reguły nie mogą go przykrywać (element+:hover ma wyższą specyficzność niż pojedyncza klasa .aj-btn, więc bez :not() gasiły tekst przycisku na hover w całym serwisie). */ :focus-visible { outline: var(--aj-focus); outline-offset: var(--aj-focus-offset); } img { max-width: 100%; height: auto; display: block; } /* Nigdy nie justujemy, nie centrujemy akapitów wieloliniowych */ .aj-left { text-align: left; } .aj-center { text-align: center; } /* tylko krótkie nagłówki / 1 zdanie */ .aj-center p { margin-inline: auto; } /* Wspólna, jednolita wysokość hero-ze-zdjęciem na WSZYSTKICH podstronach poza Home (tam hero ma inny, pełnoekranowy charakter) — Oferta, Nieruchomości, O mnie, Kontakt, Blog. UWAGA: musi być `height` (sztywna), nie `min-height` — min-height to tylko dolna granica i tak różnej długości nagłówek/akapit na każdej podstronie i tak przebijały ją na różną wysokość (zmierzone: 491–576px). Wartość 590px dobrana z zapasem ponad najwyższą zmierzoną zawartość (576px), żeby żaden H1 się nie przycinał; `overflow:hidden` już jest na sekcji nadrzędnej. */ .aj-hero-photo { height: 590px; display: flex; align-items: center; } @media (max-width: 767px) { .aj-hero-photo { height: 460px; } } /* --- Pasy sekcji i rytm pionowy ----------------------------------------- */ .aj-band { padding-block: var(--aj-s-6); } .aj-band--tight { padding-block: var(--aj-s-5); } .aj-band--open { padding-block: var(--aj-s-7); } .aj-band--light { background: var(--aj-bg-light); color: var(--aj-ink-body); } .aj-band--dark { background: var(--aj-bg-dark); color: var(--aj-on-dark-body); } /* Dwie (lub więcej) sąsiadujące jasne sekcje — naprzemiennie lekko kremowe tło, żeby granica między nimi była widoczna bez linii. Rosnąca specyficzność daje naprzemienność w obrębie ciągu: pozycje 1,3,5 = biel, 2,4,6 = krem. */ .aj-band--light + .aj-band--light { background: var(--aj-bg-warm); } .aj-band--light + .aj-band--light + .aj-band--light { background: var(--aj-bg-light); } .aj-band--light + .aj-band--light + .aj-band--light + .aj-band--light { background: var(--aj-bg-warm); } .aj-band--light + .aj-band--light + .aj-band--light + .aj-band--light + .aj-band--light { background: var(--aj-bg-light); } .aj-band--light + .aj-band--light + .aj-band--light + .aj-band--light + .aj-band--light + .aj-band--light { background: var(--aj-bg-warm); } .aj-band--dark h1, .aj-band--dark h2, .aj-band--dark h3 { color: var(--aj-on-dark); } .aj-band--dark a:not(.aj-btn) { color: var(--aj-gold); } .aj-band--dark a:hover:not(.aj-btn) { color: var(--aj-gold-hover); } .aj-container { width: 100%; max-width: var(--aj-container); margin-inline: auto; padding-inline: var(--aj-gutter); } .aj-narrow { max-width: var(--aj-container-narrow); } /* Wyśrodkowana wąska kolumna treści — dla sekcji „nagłówek + akapity" bez drugiej kolumny, żeby pustka rozkładała się równo, a długość wiersza została czytelna. */ .aj-prose { max-width: var(--aj-container-narrow); margin-inline: auto; } .aj-stack > * + * { margin-top: var(--aj-s-3); } .aj-stack-lg > * + * { margin-top: var(--aj-s-4); } /* --- Narożne „wąsy" ------------------------------------------------------ Zasada: wąsy oznaczają PAS sekcji (band), nigdy pojedynczej karty. Jeden wariant, zawsze 4 narożniki, zawsze 28 px ramienia. */ .aj-frame { position: relative; } .aj-frame::before, .aj-frame::after { content: ""; position: absolute; width: 28px; height: 28px; pointer-events: none; border-color: var(--aj-line-gold); border-style: solid; border-width: 0; } .aj-frame::before { top: var(--aj-s-3); left: var(--aj-s-3); border-top-width: 1px; border-left-width: 1px; } .aj-frame::after { bottom: var(--aj-s-3); right: var(--aj-s-3); border-bottom-width: 1px; border-right-width: 1px; } .aj-frame > .aj-frame-corners::before, .aj-frame > .aj-frame-corners::after { content: ""; position: absolute; width: 28px; height: 28px; border-color: var(--aj-line-gold); border-style: solid; border-width: 0; } .aj-frame > .aj-frame-corners::before { top: var(--aj-s-3); right: var(--aj-s-3); border-top-width: 1px; border-right-width: 1px; } .aj-frame > .aj-frame-corners::after { bottom: var(--aj-s-3); left: var(--aj-s-3); border-bottom-width: 1px; border-left-width: 1px; } /* --- Eyebrow + nagłówek sekcji ------------------------------------------ */ .aj-eyebrow { display: block; margin: 0 0 var(--aj-s-2); font: 500 var(--aj-fs-eyebrow)/1.2 var(--aj-font-body); letter-spacing: var(--aj-ls-eyebrow); text-transform: uppercase; color: var(--aj-gold-ink); } .aj-band--dark .aj-eyebrow { color: var(--aj-gold); } /* px zamiast ch: ch liczy się wg fontu TEGO diva (body ~15px), a mieści nagłówek o dużo większym foncie (h2 28-42px) — w ch wychodziło za wąsko i łamało nagłówki na 3-4 linie. */ .aj-section-head { max-width: 620px; } .aj-section-head.aj-center { max-width: 720px; margin-inline: auto; } .aj-section-head > p { max-width: 56ch; } .aj-section-head.aj-center > p { margin-inline: auto; } /* .aj-em w nagłówkach sekcji zostaje INLINE — nie wymuszamy własnej linii (mniejsza skala 2026-09-04: wymuszony blok + ręczny
dawały 3 linie). */ .aj-section-head > p { margin-top: var(--aj-s-3); font-size: var(--aj-fs-body-lg); } /* Ornament — rombik z liniami. Wolno go użyć raz na sekcję, tylko przy nagłówku wyśrodkowanym. Na nagłówkach do lewej: .aj-rule zamiast tego. */ .aj-ornament { display: flex; align-items: center; justify-content: center; gap: var(--aj-s-2); margin-top: var(--aj-s-3); color: var(--aj-line-gold); } .aj-ornament::before, .aj-ornament::after { content: ""; width: 48px; height: 1px; background: currentColor; } .aj-ornament i { width: 5px; height: 5px; background: var(--aj-gold); transform: rotate(45deg); } .aj-rule { width: 64px; height: 1px; background: var(--aj-gold); border: 0; margin: var(--aj-s-3) 0 0; } /* --- Przycisk ------------------------------------------------------------ Warianty: primary (złoto pełne) · ghost (obrys) · link (strzałka). Jedna wysokość, jedno złoto, zawsze stan hover + focus-visible. */ .aj-btn { --_bg: transparent; --_fg: var(--aj-ink); --_bd: var(--aj-ink); display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 52px; padding: 0 var(--aj-s-3); background: var(--_bg); color: var(--_fg); border: 1px solid var(--_bd); border-radius: var(--aj-r-0); font: 500 var(--aj-fs-eyebrow)/1 var(--aj-font-body); letter-spacing: var(--aj-ls-button); text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background var(--aj-dur) var(--aj-ease), color var(--aj-dur) var(--aj-ease), border-color var(--aj-dur) var(--aj-ease); } /* Motyw rodzica (Hello Elementor) ma własny skin dla `button:hover` / `[type=submit]:hover` (różowe tło + biały tekst) — selektor element+:hover ma specyficzność wyższą niż sama klasa .aj-btn, więc bez tej reguły przycisk-