/* Theme Name: Vita Fit Theme URI: https://vitafit.com.pl Author: Vita Fit Studio Zdrowych Aktywności Description: Motyw WordPress dla Vita Fit Studio Zdrowych Aktywności w Orzeszu (dla kobiet … dla dzieci). Kolorystyka i styl inspirowane logotypem studia — czerwień, pomarańcz, złoto i fiolet w duchu skrzydeł motyla. Nowoczesna, bardzo wyrazista typografia (Unbounded + Inter). Version: 1.0.0 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: vitafit */ /* ========================================================= 0. DESIGN TOKENS — kolory zaczerpnięte z logotypu Vita Fit ========================================================= */ :root{ --vf-red: #E5331A; --vf-red-dark: #C4230E; --vf-orange: #F2841E; --vf-gold: #F6AC2B; --vf-purple: #6E2C8E; --vf-purple-dark:#4A1C63; --vf-magenta: #A72C93; --vf-ink: #241226; --vf-ink-soft: #4b3350; --vf-cream: #FFF8F0; --vf-white: #FFFFFF; /* Gradienty ograniczone do dwóch–trzech barw — spokojniejsze, bardziej biznesowe użycie palety */ --vf-gradient-wing: linear-gradient(135deg, var(--vf-orange) 0%, var(--vf-red) 100%); --vf-gradient-hero: linear-gradient(115deg, var(--vf-purple-dark) 0%, var(--vf-purple) 55%, var(--vf-red-dark) 100%); --vf-gradient-cta: linear-gradient(90deg, var(--vf-red) 0%, var(--vf-orange) 100%); --vf-font-display: "Plus Jakarta Sans", "Segoe UI", sans-serif; --vf-font-body: "Inter", "Segoe UI", sans-serif; --vf-radius: 16px; --vf-radius-sm: 10px; --vf-shadow: 0 14px 30px -14px rgba(36, 18, 38, 0.28); --vf-shadow-soft: 0 6px 18px -8px rgba(36, 18, 38, 0.16); --vf-max: 1180px; } /* ========================================================= 1. RESET / BASE ========================================================= */ *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin:0; font-family: var(--vf-font-body); color: var(--vf-ink); background: var(--vf-cream); font-size: 16px; line-height: 1.7; /* Uwaga: świadomie NIE ustawiamy tu overflow-x:hidden — na elemencie ta właściwość "łamie" position:sticky i efekty parallax/scroll używane przez Elementor. Ewentualne poziome przewijanie na wąskich ekranach należy naprawiać punktowo, na konkretnym elemencie. */ } img{ max-width:100%; height:auto; display:block; } a{ color: var(--vf-red); text-decoration: none; transition: color .2s ease; } a:hover{ color: var(--vf-purple); } ul{ margin:0; padding:0; list-style:none; } button{ font-family: inherit; cursor: pointer; } .screen-reader-text{ position:absolute !important; left:-9999px; } h1,h2,h3,h4,h5,h6{ font-family: var(--vf-font-display); font-weight: 700; line-height: 1.22; color: var(--vf-ink); margin: 0 0 .5em; letter-spacing: -0.01em; } h1{ font-size: clamp(2.1rem, 4vw, 3.1rem); font-weight: 700; } h2{ font-size: clamp(1.7rem, 2.8vw, 2.25rem); } h3{ font-size: 1.25rem; font-weight: 600; } p{ margin: 0 0 1.1em; } /* Ikony SVG (telefon, e-mail, adres, Facebook) — jeden spójny rozmiar wszędzie tam, gdzie są używane, aby nigdy nie wyświetlały się nieproporcjonalnie względem otaczającego tekstu. */ .vf-icon{ display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: 0 0 16px; margin-right: 8px; vertical-align: -3px; } .vf-icon svg{ width: 100%; height: 100%; fill: currentColor; display: block; } .vf-footer-social .vf-icon, .vf-topbar-social .vf-icon{ margin-right:0; } .container{ max-width: var(--vf-max); margin: 0 auto; padding: 0 24px; } .eyebrow{ display:inline-flex; align-items:center; gap:7px; font-family: var(--vf-font-display); font-weight: 600; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--vf-red-dark); background: rgba(229,51,26,.07); padding: 6px 15px; border-radius: 100px; margin-bottom: 16px; } .btn{ display:inline-flex; align-items:center; gap:10px; font-family: var(--vf-font-display); font-weight: 600; font-size: .95rem; padding: 14px 28px; border-radius: 10px; border: none; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } .btn-primary{ background: var(--vf-gradient-cta); color: var(--vf-white); box-shadow: var(--vf-shadow-soft); } .btn-primary:hover{ color: var(--vf-white); transform: translateY(-3px); box-shadow: var(--vf-shadow); } .btn-outline{ background: transparent; color: var(--vf-white); border: 2px solid rgba(255,255,255,.7); } .btn-outline:hover{ background: rgba(255,255,255,.15); color: var(--vf-white); transform: translateY(-3px); } .btn-dark{ background: var(--vf-ink); color: var(--vf-white); } .btn-dark:hover{ color:var(--vf-white); filter: brightness(1.15); transform: translateY(-3px); } /* ========================================================= 2. TOPBAR + HEADER ========================================================= */ .vf-topbar{ background: var(--vf-ink); color: rgba(255,255,255,.85); font-size: .85rem; } .vf-topbar .container{ display:flex; align-items:center; justify-content:space-between; padding-top:8px; padding-bottom:8px; gap: 16px; flex-wrap: wrap; } .vf-topbar a{ color: rgba(255,255,255,.85); } .vf-topbar a:hover{ color: var(--vf-gold); } .vf-topbar-contact{ display:flex; gap:22px; align-items:center; flex-wrap:wrap; } .vf-topbar-contact span{ display:inline-flex; align-items:center; gap:7px; } .vf-topbar-social a{ display:inline-flex; align-items:center; justify-content:center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.12); } .vf-topbar-social a:hover{ background: var(--vf-gradient-cta); } .vf-header{ position: sticky; top:0; z-index: 999; background: var(--vf-white); box-shadow: 0 2px 18px rgba(74,28,99,.08); } .vf-header .container{ display:flex; align-items:center; justify-content:space-between; padding-top: 14px; padding-bottom:14px; gap: 20px; } .vf-logo{ display:flex; align-items:center; gap:12px; font-family: var(--vf-font-display); } .vf-logo img{ max-height: 58px; width:auto; } .vf-logo-text{ display:flex; flex-direction:column; line-height:1.1; } .vf-logo-text strong{ font-size: 1.4rem; font-weight:700; color: var(--vf-red); } .vf-logo-text small{ font-size:.72rem; color: var(--vf-ink-soft); letter-spacing:.03em; font-family: var(--vf-font-body); font-weight:600;} .vf-nav{ display:flex; align-items:center; gap: 6px; } .vf-nav ul{ display:flex; align-items:center; gap: 4px; } .vf-nav a{ color: var(--vf-ink); font-weight: 700; font-size: .95rem; padding: 10px 16px; border-radius: 100px; display:inline-block; } .vf-nav a:hover, .vf-nav .current-menu-item > a{ color: var(--vf-white); background: var(--vf-red); } .vf-nav .btn{ margin-left: 8px; } .vf-menu-toggle{ display:none; width: 46px; height:46px; border-radius: 50%; border:none; background: var(--vf-cream); align-items:center; justify-content:center; flex-direction: column; gap:5px; } .vf-menu-toggle span{ width:20px; height:2.5px; background: var(--vf-ink); border-radius:3px; } @media (max-width: 900px){ .vf-topbar-contact span:nth-child(2){ display:none; } .vf-nav{ position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw); background: var(--vf-white); flex-direction: column; align-items: stretch; padding: 100px 26px 26px; transform: translateX(100%); transition: transform .3s ease; box-shadow: -12px 0 40px rgba(0,0,0,.15); } .vf-nav.is-open{ transform: translateX(0); } .vf-nav ul{ flex-direction: column; align-items: stretch; gap:4px; } .vf-nav a{ padding: 13px 16px; } .vf-nav .btn{ margin: 14px 0 0; justify-content:center; } .vf-menu-toggle{ display:flex; } } /* ========================================================= 3. HERO ========================================================= */ .vf-hero{ position: relative; background: var(--vf-gradient-hero); color: var(--vf-white); overflow: hidden; padding: 90px 0 130px; } .vf-hero::before{ content:""; position:absolute; border-radius:50%; background: rgba(255,255,255,.05); width: 460px; height:460px; top:-180px; right:-140px; } .vf-hero .container{ position:relative; z-index:2; display:grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items:center; } .vf-hero h1{ color: var(--vf-white); } .vf-hero h1 span{ color: var(--vf-gold); font-weight: 600; } .vf-hero p{ font-size: 1.1rem; color: rgba(255,255,255,.85); max-width: 480px; } .vf-hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 10px; } .vf-hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family: var(--vf-font-display); font-weight:600; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color: var(--vf-white); background: rgba(255,255,255,.14); padding: 6px 15px; border-radius:100px; margin-bottom:18px; } .vf-hero-visual{ position:relative; aspect-ratio: 1/1; border-radius: var(--vf-radius); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; padding: 40px; } .vf-hero-visual img{ width: auto; height: auto; max-width: 65%; max-height: 65%; object-fit: contain; filter: drop-shadow(0 12px 24px rgba(0,0,0,.2)); } @media (max-width: 900px){ .vf-hero .container{ grid-template-columns: 1fr; text-align:center; } .vf-hero p{ margin-left:auto; margin-right:auto; } .vf-hero-actions{ justify-content:center; } .vf-hero-visual{ max-width: 320px; margin: 0 auto; } } /* ========================================================= 4. SEKCJE / KARTY OFERTY ========================================================= */ .vf-section{ padding: 90px 0; } .vf-section-head{ max-width: 680px; margin: 0 auto 50px; text-align:center; } .vf-section-head.left{ margin: 0 0 50px; text-align:left; } .vf-section-alt{ background: var(--vf-white); } .vf-cards{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media (max-width: 1000px){ .vf-cards{ grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px){ .vf-cards{ grid-template-columns: 1fr; } } .vf-card{ position: relative; background: var(--vf-white); border-radius: var(--vf-radius); padding: 30px 26px; box-shadow: var(--vf-shadow-soft); border: 1px solid rgba(74,28,99,.06); transition: transform .25s ease, box-shadow .25s ease; overflow:hidden; } .vf-card:hover{ transform: translateY(-4px); box-shadow: var(--vf-shadow); } .vf-card::before{ content:""; position:absolute; inset: 0 0 auto 0; height:4px; background: var(--vf-orange); } .vf-card-icon{ width: 52px; height:52px; border-radius: var(--vf-radius-sm); display:flex; align-items:center; justify-content:center; background: rgba(242,132,30,.12); margin-bottom: 18px; font-size: 1.4rem; } .vf-card h3{ margin-bottom:.4em; } .vf-card p{ color: var(--vf-ink-soft); font-size: .96rem; margin-bottom: 14px; } .vf-card-link{ font-family: var(--vf-font-display); font-weight:700; font-size:.88rem; color: var(--vf-red); } .vf-card-link:hover{ color: var(--vf-purple); } /* CTA baner */ .vf-cta-banner{ border-radius: var(--vf-radius); background: var(--vf-gradient-hero); color: var(--vf-white); padding: 56px 50px; display:flex; align-items:center; justify-content:space-between; gap: 30px; flex-wrap: wrap; } .vf-cta-banner h2{ color: var(--vf-white); margin-bottom:.3em; } .vf-cta-banner p{ color: rgba(255,255,255,.85); margin:0; max-width: 480px; } /* Loga / partnerzy (karty) */ .vf-partners{ display:flex; align-items:center; justify-content:center; gap: 60px; flex-wrap:wrap; padding: 40px 0; } .vf-partners img{ max-height: 70px; width:auto; filter: grayscale(15%); opacity:.9; } /* ========================================================= 5. TREŚĆ STRON / WPISÓW (page.php, single.php) ========================================================= */ .vf-page-hero{ background: var(--vf-gradient-hero); color: var(--vf-white); padding: 70px 0 60px; text-align:center; } .vf-page-hero h1{ color: var(--vf-white); margin-bottom:.2em; } .vf-breadcrumb{ font-size:.85rem; color: rgba(255,255,255,.75); } .vf-breadcrumb a{ color: rgba(255,255,255,.9); } .vf-content-wrap{ padding: 70px 0; } .entry-content{ max-width: 860px; margin: 0 auto; } .entry-content h2{ margin-top: 1.4em; } .entry-content ul, .entry-content ol{ padding-left: 22px; margin-bottom:1.2em; } .entry-content li{ margin-bottom:.4em; list-style: revert; } .entry-content blockquote{ border-left: 5px solid var(--vf-orange); background: var(--vf-white); padding: 18px 24px; border-radius: 0 14px 14px 0; font-style: italic; color: var(--vf-ink-soft); } .entry-content table{ width:100%; border-collapse: collapse; margin-bottom: 1.4em; } .entry-content table th, .entry-content table td{ border: 1px solid rgba(74,28,99,.15); padding: 12px 14px; text-align:left; } .entry-content table th{ background: var(--vf-cream); font-family: var(--vf-font-display); } .entry-content img{ border-radius: var(--vf-radius-sm); } .vf-post-meta{ display:flex; gap:16px; flex-wrap:wrap; color: var(--vf-ink-soft); font-size:.9rem; margin-bottom: 24px; } /* Zabezpieczenie: treść zbudowana w Elementorze nigdy nie dziedziczy wąskiej szerokości motywu, nawet gdyby jakiś dodatkowy wrapper pozostał w kodzie szablonu. */ body.elementor-page .entry-content, .elementor-section-wrap, .elementor{ max-width: none !important; } /* 404 */ .vf-404{ text-align:center; padding: 120px 0; } .vf-404 .vf-404-num{ font-family: var(--vf-font-display); font-weight:700; font-size: clamp(4rem, 14vw, 7.5rem); color: var(--vf-orange); line-height:1; margin-bottom: .2em; } /* ========================================================= 6. FOOTER ========================================================= */ .vf-footer{ background: var(--vf-ink); color: rgba(255,255,255,.75); padding-top: 64px; } .vf-footer a{ color: rgba(255,255,255,.75); } .vf-footer a:hover{ color: var(--vf-gold); } .vf-footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; padding-bottom: 46px; border-bottom: 1px solid rgba(255,255,255,.1); } @media (max-width: 900px){ .vf-footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 560px){ .vf-footer-grid{ grid-template-columns: 1fr; } } .vf-footer h4{ color: var(--vf-white); font-family: var(--vf-font-display); font-size: 1rem; letter-spacing:.03em; margin-bottom: 18px; } .vf-footer-logo{ display:flex; align-items:center; gap:10px; margin-bottom:14px; } .vf-footer-logo strong{ font-family: var(--vf-font-display); font-size:1.25rem; font-weight:700; color: var(--vf-white); } .vf-footer li{ margin-bottom: 10px; } .vf-footer-social{ display:flex; gap:10px; margin-top:16px; } .vf-footer-social a{ width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; } .vf-footer-social a:hover{ background: var(--vf-gradient-cta); } .vf-footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; padding: 22px 0; font-size:.85rem; color: rgba(255,255,255,.5); } /* ========================================================= 7. WIDGETY / WP DEFAULT ========================================================= */ .widget{ margin-bottom: 34px; } .widget-title{ font-family: var(--vf-font-display); } .wp-block-button__link{ font-family: var(--vf-font-display); font-weight:700; border-radius:100px !important; background: var(--vf-gradient-cta) !important; } ::selection{ background: var(--vf-gold); color: var(--vf-ink); }