/** * Blok: packages (Pakiety Strategie) * Layout niezależny od rebuildu Tailwinda (scoped pod .packages-section). * Tło sekcji (bg-white-3 + 3dbg.png) i przyciski (.btn .btn-main) idą z motywu. * 1rem = 10px (font-size: 62.5% na ). */ .packages-section .packages { padding-block: 6rem; } @media (min-width: 1024px) { .packages-section .packages { padding-block: 9rem; } } /* ===== Intro ===== */ .packages-section .packages__intro, .packages-section .packages__pkgs-intro { max-width: 90rem; margin-bottom: 4rem; } .packages-section .packages__intro-desc, .packages-section .packages__pkgs-desc { margin-top: 1.2rem; color: #565656; } /* ===== Konsultacja (biała karta) ===== */ .packages-section .pkg-consult { display: grid; gap: 3rem; background: #fff; border-radius: 0.8rem; box-shadow: 0px 18px 37.2px 0px rgba(0, 0, 0, 0.08); padding: 3rem; margin-bottom: 6rem; } @media (min-width: 1024px) { .packages-section .pkg-consult { grid-template-columns: 1fr 1.35fr; align-items: center; gap: 5rem; padding: 5rem; } } .packages-section .pkg-consult__left h3 { margin-bottom: 1.6rem; } .packages-section .pkg-consult__desc { color: #565656; } /* Ciemny box z ceną */ .packages-section .pkg-consult__box { display: flex; flex-direction: column; gap: 2.4rem; background: #17171a; color: #fff; border-radius: 0.8rem; padding: 3rem; } @media (min-width: 1024px) { .packages-section .pkg-consult__box { padding: 4rem; } } .packages-section .pkg-consult__box-main { display: grid; gap: 2.4rem; } @media (min-width: 1024px) { .packages-section .pkg-consult__box-main { grid-template-columns: 1fr 1fr; gap: 3rem; } } .packages-section .pkg-consult__price-label { font-size: 1.5rem; color: #c9c9c9; margin-bottom: 1rem; } .packages-section .pkg-consult__price-val { font-size: 3.4rem; font-weight: 700; line-height: 1.1; } .packages-section .pkg-consult__price-val span { font-size: 1.6rem; font-weight: 400; color: #c9c9c9; } .packages-section .pkg-consult__btn { align-self: flex-start; } /* ===== Panel pakietów (białe tło) ===== */ .packages-section .pkg-panel { background: #fff; border-radius: 0.8rem; box-shadow: 0px 18px 37.2px 0px rgba(0, 0, 0, 0.08); padding: 3rem; display: flex; justify-content: center; flex-direction: column; align-items: center; } @media (min-width: 1024px) { .packages-section .pkg-panel { padding: 6rem 4rem; margin-bottom: -20rem; } } /* ===== Siatka pakietów ===== */ .packages-section .pkg-grid { display: grid; gap: 2.4rem; /* równa wysokość wszystkich kafli; wyróżniony wystaje ujemnym marginesem */ align-items: stretch; /* węższe kafle: siatka zawężona i wyśrodkowana (jak na makiecie) */ max-width: 84rem; margin-inline: auto; margin-bottom: 40px; } @media (min-width: 1024px) { .packages-section .pkg-grid { grid-template-columns: 1fr 1.25fr 1fr; } } .packages-section .pkg-card { display: flex; flex-direction: column; gap: 2rem; /* tło kafla — jasnoszare */ background: #F5F6F7; border: 1px solid transparent; border-radius: 0.8rem; padding: 3rem; text-align: center; height: 100%; } .packages-section .pkg-card--featured { /* wyróżniony kafel — białe tło, czerwony border, szerszy i wyższy (wystaje góra/dół) */ background: #fff; border-color: #D11317; box-shadow: 0px 18px 37.2px 0px rgba(209, 19, 23, 0.08); margin-block: -2rem; } .packages-section h3.pkg-card__name { color: #D11317 !important; } .packages-section .pkg-card__sub { color: #565656; margin-top: 0.4rem; } .packages-section .pkg-card__price { display: flex; flex-direction: column; gap: 0.4rem; } .packages-section .pkg-card__price-val { font-size: 2.8rem; font-weight: 700; line-height: 1.1; } /* "netto/m-c" wewnątrz ceny — drobne, szare */ .packages-section .pkg-card__price-val .smallDesc { font-size: 1.4rem; font-weight: 400; color: #565656; } .packages-section .pkg-card__price-desc { color: #565656; font-size: 1.4rem; } .packages-section .pkg-card__divider { display: block; height: 1px; background: #e7e7e7; } .packages-section .pkg-card__ideal { text-align: left; } .packages-section .pkg-card__btn { align-self: center; margin-top: auto; } /* ===== Czerwone punktory list (WYSIWYG) ===== */ .packages-section .wysiwyg ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; } .packages-section .wysiwyg ul li { position: relative; padding-left: 2.2rem; } .packages-section .wysiwyg ul li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #D11317; } .packages-section { position: relative; z-index: 2; }