dm/fuz-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stylizacja i poprawki w układzie

Browse Source
This commit is contained in:
dm
2025-11-26 08:00:00 +01:00
parent d3040f4917
commit 284009d411
56 changed files with 328 additions and 621 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/styles/base.css
View File

@@ -1,3 +1,7 @@
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap'); */
@import "./tailwind.css";
@import "./theme.css";
@import "./navbar.css";
@@ -8,6 +12,21 @@
@import "./footer.css";
@import "./cookie.css";
@import "./contact.css";
@import "./offers/offers-main.css";
@import "./offers/offers-switches.css";
html {
font-family: 'Nunito', sans-serif;
/* font-family: "Lora", sans-serif; */
font-optical-sizing: auto;
font-weight: 500;
scroll-behavior: smooth;
}
body {
/* @apply bg-white text-gray-900 dark:bg-slate-900 dark:text-gray-100 antialiased; */
}
.grecaptcha-badge {
display: none !important;

2
src/styles/footer.css
View File

@@ -1,6 +1,6 @@
@layer components {
.f-footer {
@apply mt-0 border-t border-[var(--fuz-border)] bg-[var(--f-background)] text-[var(--f-text)] pt-2;
@apply mt-2 border-t border-[var(--f-input-border)] bg-[var(--f-background-o)] text-[var(--f-text)] pt-2;
}
.f-footer-inner {

2
src/styles/hero.css
View File

@@ -8,7 +8,7 @@
}
.f-hero-bg {
@apply absolute top-0 left-0 w-full h-full object-cover opacity-[0.7];
@apply absolute top-0 left-0 w-full h-full object-cover opacity-[0.4];
}
.f-hero-inner {

3
src/styles/markdown.css
View File

@@ -41,8 +41,7 @@
}
.fuz-markdown a {
@apply no-underline hover:no-underline;
color: var(--fuz-accent);
@apply no-underline hover:no-underline text-[var(--f-link-text)];
}
.fuz-markdown button.modal-link {

4
src/styles/navbar.css
View File

@@ -30,4 +30,8 @@
.f-mobile-link {
@apply text-lg py-2 border-b text-[var(--f-text)] hover:text-[var(--fuz-accent)];
border-color: var(--f-border-color);
}
.f-navbar-logo{
@apply w-[70] h-[36];
}

29
src/styles/offers/offers-extra.css
View File

@@ -1,27 +1,22 @@
.fuz-extra-services {
@apply mt-16;
color: var(--f-text);
.f-extra-services {
@apply mt-6 max-w-6xl mx-auto;
}
.fuz-title-small {
@apply text-xl font-semibold mb-4;
color: var(--f-text);
.f-services-title {
@apply text-2xl font-semibold mb-4 ml-10;
}
.f-services-body {
@apply text-lg font-semibold mb-4 ml-10;
}
.fuz-expand-details {
.f-expand-details {
@apply px-4 py-4;
background: rgba(0, 0, 0, 0.04);
}
:root.dark .fuz-expand-details {
background: rgba(255, 255, 255, 0.04);
.f-feature-link {
@apply underline cursor-pointer w-full h-full text-[var(--f-link-text)];
}
.btn-link {
@apply underline cursor-pointer;
color: var(--fuz-accent);
}
.btn-link:hover {
opacity: 0.7;
.f-feature-link:hover {
@apply text-[var(--f-link-text-hover)];
}

11
src/styles/offers/offers-main.css
View File

@@ -1,14 +1,11 @@
.fuz-offers-section {
@apply py-12;
background: var(--f-background);
color: var(--f-text);
@apply py-6;
}
.fuz-offers-container {
.f-offers-container {
@apply max-w-7xl mx-auto px-6;
}
.fuz-offers-description {
.f-offers-description {
@apply mb-10 text-base leading-relaxed;
color: var(--f-text);
}
}

30
src/styles/offers/offers-switches.css
View File

@@ -1,31 +1,19 @@
.fuz-switches-wrapper {
.f-switches-wrapper {
@apply flex flex-wrap justify-center gap-6 mb-12;
}
.fuz-switch-group {
@apply inline-flex overflow-hidden relative;
background: rgba(0, 0, 0, 0.08);
.f-switch-group {
@apply inline-flex overflow-hidden relative bg-[var(--f-background-switch)];
}
:root.dark .fuz-switch-group {
background: rgba(255, 255, 255, 0.12);
}
.fuz-switch {
.f-switch {
@apply px-6 py-2 text-sm font-semibold cursor-pointer select-none transition-all;
color: var(--f-text);
/* opacity: 0.7; */
}
.fuz-switch:hover {
/* opacity: 0.9; */
.f-switch.active {
@apply text-[var(--f-text-switcher)] bg-[var(--f-background-switcher)] ;
}
.fuz-switch.active {
background: var(--fuz-accent);
color: var(--btn-text);
/* opacity: 1; */
/* box-shadow: 0 2px 8px rgba(0,0,0,0.18); */
}
.f-switch:hover {
@apply opacity-[0.6]
}

218
src/styles/offers/offers-table.css
View File

@@ -1,212 +1,96 @@
/* =========================================
TABELA — KONTENER
========================================= */
.fuz-table-wrapper {
@apply overflow-x-auto rounded-3xl shadow-lg mb-0;
background: var(--f-background);
border: 1px solid rgba(0,0,0,0.07);
.f-table-wrapper {
@apply overflow-x-auto rounded-3xl shadow-lg mb-0 border border-[var(--f-offers-border)];
}
:root.dark .fuz-table-wrapper {
border: 1px solid rgba(255,255,255,0.12);
}
.fuz-table {
.f-table {
@apply min-w-full border-collapse;
color: var(--f-text);
}
/* =========================================
NAGŁÓWEK
========================================= */
.fuz-table-head {
.f-table-head {
background: color-mix(in srgb, var(--f-text) 6%, transparent);
}
:root.dark .fuz-table-head {
background: color-mix(in srgb, var(--f-text) 12%, transparent);
.f-table-heading {
@apply text-center font-semibold text-xl py-4 px-4 text-wrap;
}
.fuz-table-heading {
@apply text-center font-semibold py-4 px-4 text-lg;
color: var(--f-text);
.f-plan-heading {
@apply text-center py-4 px-4 align-bottom relative;
}
/* =========================================
NAGŁÓWEK PLANU
========================================= */
.fuz-plan-heading {
@apply text-center py-4 px-4 align-bottom;
position: relative;
.f-plan-title {
@apply text-xl font-semibold mb-1;
}
.fuz-plan-title {
@apply text-lg font-semibold mb-1;
color: var(--f-text);
.f-plan-price {
@apply text-2xl font-extrabold mb-1 text-[var(--f-offers-price)];
}
.fuz-plan-price {
@apply text-2xl font-extrabold mb-1;
color: var(--fuz-accent);
/* Na ten moment ukryte */
.f-plan-speed {
@apply text-xs opacity-[0.7];
}
.fuz-plan-speed {
@apply text-xs;
opacity: 0.7;
}
/* Badge popularności – jeśli używasz */
.fuz-plan-badge {
@apply text-[10px] px-2 py-0.5 rounded-full uppercase tracking-wide inline-block mb-2;
background: var(--fuz-accent);
color: var(--fuz-accent-text);
}
/* =========================================
WIERSZE
========================================= */
.fuz-row-even {
background: color-mix(in srgb, var(--f-text) 4%, transparent);
}
:root.dark .fuz-row-even {
background: color-mix(in srgb, var(--f-text) 10%, transparent);
}
.fuz-row-odd {
.f-row-even {
background: transparent;
}
.fuz-feature-name {
@apply py-3 px-4 text-lg font-medium;
color: var(--f-text);
border-top: 1px solid rgba(0,0,0,0.07);
.f-row-odd {
background: color-mix(in srgb, var(--f-text) 4%, transparent);
}
:root.dark .fuz-feature-name {
border-top: 1px solid rgba(255,255,255,0.12);
.f-feature-name {
@apply py-3 px-4 text-lg font-medium ;
}
.fuz-feature-cell {
.f-feature-cell {
@apply py-3 px-4 text-center text-lg;
color: var(--f-text);
border-top: 1px solid rgba(0,0,0,0.07);
}
:root.dark .fuz-feature-cell {
border-top: 1px solid rgba(255,255,255,0.12);
}
.fuz-feature-cell-btn {
@apply py-3 px-4 text-center text-sm;
}
/* =========================================
CHECKMARKS
========================================= */
/* ✔ = kolor accent */
.fuz-feature-yes {
.f-feature-yes {
@apply py-3 px-4 text-center font-bold text-base;
color: var(--fuz-accent);
border-top: 1px solid rgba(0,0,0,0.07);
}
:root.dark .fuz-feature-yes {
border-top: 1px solid rgba(255,255,255,0.12);
.f-feature-no {
@apply py-3 px-4 text-center font-bold text-base opacity-[0.45];
}
/* ✕ = szary / low opacity */
.fuz-feature-no {
@apply py-3 px-4 text-center font-bold text-base;
opacity: 0.45;
border-top: 1px solid rgba(0,0,0,0.07);
}
:root.dark .fuz-feature-no {
border-top: 1px solid rgba(255,255,255,0.12);
}
/* =========================================
POPULARNY PLAN — WARIANT C (MOCNY)
========================================= */
/* pełne tło pastel na ACCENT (mocniejsze – C) */
/* Popularny */
.is-popular,
.fuz-popular-col {
background: color-mix(in srgb, var(--fuz-accent) 22%, transparent) !important;
border-left: 2px solid var(--fuz-accent);
border-right: 2px solid var(--fuz-accent);
.f-popular-col {
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: 10;
}
:root.dark .is-popular,
:root.dark .fuz-popular-col {
background: color-mix(in srgb, var(--fuz-accent) 32%, transparent) !important;
.f-popular-top {
border-top: 2px solid var(--f-offers-popular);
}
/* górny border */
.fuz-popular-top {
border-top: 2px solid var(--fuz-accent);
.f-popular-bottom {
border-bottom: 2px solid var(--f-offers-popular);
}
/* dolny border */
.fuz-popular-bottom {
border-bottom: 2px solid var(--fuz-accent);
}
/* zbijamy border wewnątrz popularnych */
.fuz-popular-col.fuz-feature-cell,
.fuz-popular-col.fuz-feature-yes,
.fuz-popular-col.fuz-feature-no {
/* .f-popular-col.f-feature-cell,
.f-popular-col.f-feature-yes,
.f-popular-col.f-feature-no {
border-top: none !important;
}
} */
/* USŁUGI DODATKOWE */
/* Górny border pierwszego wiersza sekcji */
.fuz-extra-services table tbody tr:first-child td {
border-top: 1px solid rgba(0,0,0,0.07);
}
:root.dark .fuz-extra-services table tbody tr:first-child td {
border-top: 1px solid rgba(255,255,255,0.15);
}
/* Wiersz "Szczegóły" (opis) — zawsze pełny border-top */
.fuz-expand-details {
border-top: 0px solid rgba(0,0,0,0.1);
}
:root.dark .fuz-expand-details {
border-top: 1px solid rgba(255,255,255,0.15);
}
/* I zawsze ładny border-bottom na końcu sekcji */
.fuz-extra-services table tbody tr:last-child td {
border-bottom: 1px solid rgba(0,0,0,0.1);
}
:root.dark .fuz-extra-services table tbody tr:last-child td {
border-bottom: 1px solid rgba(255,255,255,0.15);
}
/* Usunięcie "pustych" borderów kolumny szczegóły */
.fuz-feature-cell-btn {
border-top: 1px solid rgba(0,0,0,0.07);
}
:root.dark .fuz-feature-cell-btn {
border-top: 1px solid rgba(255,255,255,0.12);
}
.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; */
}

60
src/styles/sections.css
View File

@@ -1,42 +1,50 @@
@layer components{
@layer components {
.f-section-header{
.f-section-header {
@apply text-3xl md:text-4xl font-bold mb-6 text-[var(--f-header)];
}
}
.f-section{
@apply pt-10 pb-1 mx-2;
}
.fuz-section {
@apply py-10 mx-2;
}
.f-section {
@apply pt-10 pb-1 mx-2;
}
.fuz-section-grid {
@apply grid items-center gap-5 max-w-7xl mx-auto;
}
.f-section-center {
@apply f-section text-center;
}
.fuz-section-image {
/* @apply w-full h-5/6 object-cover ; */
@apply w-full object-contain;
}
.f-section-grid {
@apply grid items-center gap-5 max-w-7xl mx-auto;
}
.fuz-image-dimmed {
opacity: 0.75;
}
.f-section-grid-single {
@apply grid items-center gap-5 max-w-6xl mx-auto;
}
.fuz-section-title {
@apply text-4xl md:text-5xl font-bold mb-6;
}
.f-section-grid-single-center {
@apply f-section-grid-single text-center;
}
.f-section-image {
@apply w-full object-contain;
}
.f-image-dimmed {
@apply opacity-[1];
}
.f-section-title {
@apply text-4xl md:text-5xl font-bold mb-2 text-[var(--f-header)];
}
.f-section-nav {
@apply mt-0 flex justify-center;
}
.fuz-section-text {
@apply max-w-4xl mx-auto;
}
.fuz-iframe-box {
@apply bg-white dark:bg-slate-800 p-4 rounded-xl
border border-gray-200 dark:border-slate-700 shadow;
@apply bg-white dark:bg-slate-800 p-4 rounded-xl border border-gray-200 dark:border-slate-700 shadow;
}
.fuz-iframe-wrapper {

10
src/styles/tailwind.css
View File

@@ -1,11 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
html {
scroll-behavior: smooth;
}
body {
@apply bg-white text-gray-900 dark:bg-slate-900 dark:text-gray-100 antialiased;
}
@tailwind utilities;

57
src/styles/theme.css
View File

@@ -27,22 +27,34 @@
--surface-shadow-dark: var(--brand-hue) 50% 3%;
--shadow-strength-dark: .8;
--border1-dark: hsl(var(--brand-hue) 40% 70%);
--brand-dim: hsl(var(--brand-hue) calc(var(--brand-saturation) / 1.25) calc(var(--brand-lightness) / 1.25));
}
:root {
--f-background: var(--surface2-light);
--f-header: var(--brand-light);
--f-background-switch: var(--surface3-light);
--f-text-switcher: var(--brand-dark);
--f-background-switcher: var(--surface4-dark);
--f-header: var(--text1-light);
--f-header-2: var(--text1-light);
--f-header-items: (var(--text2-light));
--f-text: var(--text2-light);
--f-link-text: var(--f-header);
--f-text-1: var(--text1-light);
--f-link-text: var(--brand-dim);
/* var(--brand-light); */
--f-link-text-hover: var(--f-text2-light);
--btn-background: var(--surface2-light);
--btn-text: var(--text1-light);
--f-background-o: var(--surface4-light);
--btn-outline-background: transparent;
--btn-outline-border: var(--border1-light);
--btn-outline-text: var(--text1-light);
@@ -52,39 +64,49 @@
--f-input-border: var(--surface1-light);
--f-offers-border: var(--surface4-light);
--f-offers-price: var(--brand-light);
--f-offers-popular: var(--brand-light);
--f-offers-popular-bg: color-mix(in srgb, var(--f-offers-popular) 22%, transparent);
/* Invert Color */
--f-background-invert: #0d1117;
/* --f-background-invert: #0d1117;
--f-text-invert: #e6edf3;
--btn-bg-invert: #58a6ff;
--btn-text-invert: #0d1117;
--btn-outline-invert: #58a6ff;
--btn-outline-bg-invert: rgba(88, 166, 255, 0.15);
--btn-outline-bg-invert: rgba(88, 166, 255, 0.15); */
/* Links */
--fuz-link: #0050c8;
--fuz-link-hover: #003f9a;
/* --fuz-link: #0050c8;
--fuz-link-hover: #003f9a; */
/* Accent (buttons, highlights) */
--fuz-accent: #0066ff;
/* --fuz-accent: #0066ff;
--fuz-accent-hover: #004bcc;
--fuz-accent-text: #ffffff;
--btn-ghost-text: var(--f-text);
--btn-ghost-hover-bg: rgba(0, 0, 0, 0.05);
---f-border-color: rgb(209 213 219);
---f-border-color: rgb(209 213 219); */
/* / var(--tw-border-opacity, 1)); */
}
:root.dark {
--f-background: var(--surface1-dark);
--f-background-switch: var(--surface2-dark);
--f-header: var(--brand-dark);
--f-background-switch: var(--surface3-dark);
--f-text-switcher: var(--brand-dark);
--f-background-switcher: var(--text2-light);
--f-header: var(--text1-dark);
--f-header-2: var(--text1-dark);
--f-header-items: (var(--text2-dark));
--f-text: var(--text1-dark);
--f-link-text: var(--f-header);
--f-text-1: var(--text1-dark);
--f-link-text: var(--brand-dark);
--f-link-text-hover: var(--f-text2-dark);
--btn-background: var(--surface4-dark);
@@ -97,8 +119,17 @@
--btn-outline-background-hover: var(--surface4-dark);
--btn-outline-text-hover: var(--brand-dark);
--f-input-border: var(--surface4-dark);
--f-background-o: var(--surface2-dark);
--f-input-border: var(--surface4-dark);
--f-offers-border: var(--surface4-dark);
--f-offers-price: var(--brand-dark);
--f-offers-popular: var(--brand-dark);
--f-offers-popular-bg: color-mix(in srgb, var(--f-offers-popular) 22%, transparent);
/* Invert Color */
--f-background-invert: #ffffff;
--f-text-invert: #0d0d0d;