Kolejne poprawki
This commit is contained in:
dm
@@ -1,89 +1,146 @@
|
||||
.f-table-wrapper {
|
||||
@apply overflow-x-auto rounded-3xl shadow-lg mb-0 border border-[--f-offers-border];
|
||||
/* GŁÓWNE SEKCJE */
|
||||
.f-offers {
|
||||
@apply my-6;
|
||||
}
|
||||
|
||||
.f-table {
|
||||
@apply min-w-full border-collapse;
|
||||
/* GRID FLEX — zawsze centrowany */
|
||||
.f-offers-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.f-table-head {
|
||||
background: color-mix(in srgb, var(--f-text) 6%, transparent);
|
||||
/* KARTA – POPRAWIONA, BEZ width/max-width/flex 1 1 300px */
|
||||
.f-card {
|
||||
flex: 0 1 320px;
|
||||
|
||||
@apply bg-[--f-bg] text-[--f-text] border border-[--f-offers-border]
|
||||
rounded-2xl shadow-md p-6 relative flex flex-col gap-4;
|
||||
}
|
||||
|
||||
.f-table-heading {
|
||||
@apply text-center font-semibold text-xl py-4 px-4 text-wrap;
|
||||
.f-card:hover {
|
||||
@apply shadow-lg;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.f-plan-heading {
|
||||
@apply text-center py-4 px-4 align-bottom relative;
|
||||
}
|
||||
|
||||
.f-plan-title {
|
||||
@apply text-xl font-semibold mb-1;
|
||||
}
|
||||
|
||||
.f-plan-price {
|
||||
@apply text-2xl font-extrabold mb-1 text-[--f-offers-price];
|
||||
}
|
||||
|
||||
/* Na ten moment ukryte */
|
||||
.f-plan-speed {
|
||||
@apply text-xs opacity-[0.7];
|
||||
}
|
||||
|
||||
.f-row-even {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.f-row-odd {
|
||||
background: color-mix(in srgb, var(--f-text) 4%, transparent);
|
||||
}
|
||||
|
||||
.f-feature-name {
|
||||
@apply py-3 px-4 text-lg font-medium ;
|
||||
}
|
||||
|
||||
.f-feature-cell {
|
||||
@apply py-3 px-4 text-center text-lg;
|
||||
}
|
||||
|
||||
.f-feature-yes {
|
||||
@apply py-3 px-4 text-center font-bold text-base;
|
||||
}
|
||||
|
||||
.f-feature-no {
|
||||
@apply py-3 px-4 text-center font-bold text-base opacity-[0.45];
|
||||
}
|
||||
|
||||
/* Popularny */
|
||||
.is-popular,
|
||||
.f-popular-col {
|
||||
/* POPULARNY PLAN */
|
||||
.f-card-popular {
|
||||
border: 2px solid var(--f-offers-popular);
|
||||
background: var(--f-offers-popular-bg);
|
||||
/* color-mix(in srgb, var(--f-offers-popular) 22%, transparent) !important; */
|
||||
border-left: 2px solid var(--f-offers-popular);
|
||||
border-right: 2px solid var(--f-offers-popular);
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.f-popular-top {
|
||||
border-top: 2px solid var(--f-offers-popular);
|
||||
.f-card-badge {
|
||||
@apply absolute top-3 right-3 bg-[--btn-background]
|
||||
text-[--btn-text] text-sm font-semibold px-3 py-1 rounded-full;
|
||||
}
|
||||
|
||||
.f-popular-bottom {
|
||||
border-bottom: 2px solid var(--f-offers-popular);
|
||||
/* HEADER */
|
||||
.f-card-header {
|
||||
@apply flex flex-col items-start gap-1;
|
||||
}
|
||||
|
||||
.f-popular-badge {
|
||||
@apply bg-blue-500 text-white text-xs font-semibold px-3 py-1 rounded-full inline-block mb-2 uppercase tracking-wide;
|
||||
/* background: #3b82f6;
|
||||
color: white;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
display: inline-block;
|
||||
margin-bottom: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.025em; */
|
||||
}
|
||||
.f-card-name {
|
||||
@apply text-xl font-semibold;
|
||||
}
|
||||
|
||||
.f-card-price {
|
||||
@apply text-3xl font-extrabold text-[--f-offers-price];
|
||||
}
|
||||
|
||||
/* FEATURES */
|
||||
.f-card-features {
|
||||
@apply list-none p-0 m-0;
|
||||
}
|
||||
|
||||
.f-card-row {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid var(--f-offers-border);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.f-card-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.f-card-label {
|
||||
@apply text-base font-medium opacity-80;
|
||||
}
|
||||
|
||||
.f-card-value {
|
||||
@apply text-base font-semibold text-right;
|
||||
}
|
||||
|
||||
.f-card-value.yes {
|
||||
@apply text-green-600;
|
||||
}
|
||||
|
||||
.f-card-value.no {
|
||||
@apply text-red-600 opacity-60;
|
||||
}
|
||||
|
||||
|
||||
/* -----------------------------
|
||||
INTELIGENTNY UKŁAD KART
|
||||
------------------------------ */
|
||||
|
||||
/* DOMYŚLNE: responsywnie */
|
||||
.f-card {
|
||||
flex: 1 1 300px;
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
/* LICZNIK KART */
|
||||
.f-offers-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
/* --- UKŁAD SPECJALNY --- */
|
||||
|
||||
/* 4 karty → 2 + 2 */
|
||||
.f-count-4 .f-card {
|
||||
flex: 0 1 calc(50% - 2rem);
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
/* 5 kart → 3 + 2 */
|
||||
.f-count-5 .f-card {
|
||||
flex: 0 1 calc(33% - 2rem);
|
||||
}
|
||||
.f-count-5 .f-card:nth-child(n+4) {
|
||||
flex: 0 1 calc(50% - 2rem);
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
/* 7 kart → 3 + 3 + 1 (środek) */
|
||||
.f-count-7 .f-card {
|
||||
flex: 0 1 calc(33% - 2rem);
|
||||
}
|
||||
.f-count-7 .f-card:last-child {
|
||||
flex: 0 1 calc(33% - 2rem);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* 8 kart → 3 + 3 + 2 */
|
||||
.f-count-8 .f-card {
|
||||
flex: 0 1 calc(33% - 2rem);
|
||||
}
|
||||
.f-count-8 .f-card:nth-child(n+7) {
|
||||
flex: 0 1 calc(50% - 2rem);
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
/* 10 kart → 3 + 3 + 3 + 1 */
|
||||
.f-count-10 .f-card:last-child {
|
||||
flex: 0 1 calc(33% - 2rem);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user