/* Theme Name: Avuerra Theme URI: https://avuerra.pl Description: Motyw potomny Kadence dla AVUERRA. Strony budowane z sekcji SCF (Flexible Content), naglowek i stopka po stronie Kadence. Author: Mateusz Template: kadence Version: 1.2.0 License: GNU General Public License v2 or later Text Domain: avuerra */ /* ========================================================================== Tokeny marki Zrodlo wartosci: identyfikacja wizualna AVUERRA. Kolory ustawione sa rowniez w globalnej palecie Kadence, te zmienne sluza sekcjom motywu, zeby nie zaszywac kodow HEX w arkuszu sekcji. ========================================================================== */ :root{ --av-red: #D30000; --av-red-hover: #970808; --av-blush: #FCE8E5; --av-sand: #C9AE94; --av-sand-soft: #E3D4C4; --av-paper: #FBF7F4; /* Te same skladowe co --av-paper, ale rozbite, zeby dalo sie budowac przezroczystosci przez rgba() w gradiencie sekcji hero. */ --av-paper-rgb: 251, 247, 244; --av-ink: #2E211A; --av-ink-soft: #7D6650; --av-font-head: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --av-font-body: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif; --av-maxw: 1180px; --av-gap: clamp(28px, 4vw, 56px); --av-sekcja-y: clamp(64px, 8vw, 118px); } /* ========================================================================== Baza Kadence ustawia typografie globalnie. Ponizej tylko to, czego Kadence nie obejmuje, czyli elementy wlasne sekcji. ========================================================================== */ /* Kadence ustawia to globalnie, ale motyw nie powinien na tym polegac. Bez border-box szerokosc 50% plus padding daje ponad polowe i kolumna tekstu w sekcji hero wchodzi na zdjecie. */ .av-main *, .av-main *::before, .av-main *::after{ box-sizing: border-box; } .av-kontener{ max-width: var(--av-maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); } .av-naglowek{ font-family: var(--av-font-head); font-weight: 600; line-height: 1.15; margin: 0; text-wrap: balance; } .av-naglowek em{ font-style: italic; } .av-tekst{ font-family: var(--av-font-body); color: var(--av-ink-soft); margin: 0 0 1em; max-width: 68ch; } .av-tekst:last-child{ margin-bottom: 0; } /* Haslo pisane kursywa szeryfowa, zastepuje krój odreczny z makiety. */ .av-haslo{ font-family: var(--av-font-head); font-style: italic; font-weight: 400; color: var(--av-red); font-size: clamp(21px, 2.6vw, 30px); line-height: 1.35; margin: 0; } /* Kreska pod naglowkiem sekcji, powtarza sie w calej makiecie. */ .av-kreska{ width: 64px; height: 2px; background: var(--av-red); border: 0; margin: 18px 0 0; } .av-kreska--srodek{ margin-inline: auto; } /* Przycisk. Kadence stylowalby wlasny, ale sekcje uzywaja swojego, zeby wyglad nie zalezal od ustawien bloku. */ .av-przycisk{ display: inline-flex; align-items: center; justify-content: center; font-family: var(--av-font-body); font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: #fff; background: var(--av-red); padding: 15px 34px; border: 0; border-radius: 2px; transition: background .2s ease, transform .2s ease; } .av-przycisk:hover, .av-przycisk:focus-visible{ background: var(--av-red-hover); color: #fff; transform: translateY(-2px); } .av-przycisk:focus-visible{ outline: 2px solid var(--av-ink); outline-offset: 3px; } .av-przycisk--obrys{ background: transparent; color: var(--av-red); box-shadow: inset 0 0 0 1px var(--av-red); } .av-przycisk--obrys:hover, .av-przycisk--obrys:focus-visible{ background: var(--av-red); color: #fff; } /* ========================================================================== Animacja wejscia Klasa html.av-js dodawana jest inline w . Bez JS wszystko jest widoczne od razu, wiec strona nigdy nie zostaje pusta. ========================================================================== */ .av-js .av-anim{ opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .av-js .av-anim.av-widoczny{ opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce){ .av-js .av-anim{ opacity: 1; transform: none; transition: none; } .av-przycisk{ transition: none; } }