/* ===================================================================== TaxMachine — podstrony zamówień / aktualizacji (edomeg.eu/Tax) Wspólny arkusz dla 7 podstron. Czysty CSS3, mobile-first. Motywy kolorystyczne przez [data-theme] na (js/theme-init.js). Spójne z szatą graficzną landing page TaxMachine. ===================================================================== */ :root { --maxw: 1080px; --radius: 14px; --radius-sm: 8px; --gap: clamp(1rem, 2.5vw, 2rem); --shadow: 0 8px 30px rgba(0,0,0,.08); --shadow-lg: 0 20px 50px rgba(0,0,0,.15); --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ease: cubic-bezier(.4,0,.2,1); } /* MOTYW: jasny (domyślny; paleta spójna z css/style.css serwisu edomeg.eu) */ :root, [data-theme="jasny"] { --bg:#f6f5f0; --bg-alt:#edece4; --surface:#ffffff; --text:#171d1a; --text-soft:#45514b; --primary:#0d7a55; --primary-2:#0a5f43; --on-primary:#ffffff; --accent:#b45309; --accent-soft:#fff4e3; --border:#dedcd2; --win-bg:#e2f1ea; --hl:#0d7a55; --focus:#0d7a55; color-scheme: light; } /* MOTYW: ciemny */ [data-theme="ciemny"] { --bg:#101512; --bg-alt:#151b17; --surface:#1a211c; --text:#eaeee9; --text-soft:#b4beb6; --primary:#46c795; --primary-2:#63d5a8; --on-primary:#0c1410; --accent:#fbbf24; --accent-soft:#2a2418; --border:#263029; --win-bg:#1c2f26; --hl:#46c795; --focus:#46c795; --shadow:0 8px 30px rgba(0,0,0,.5); --shadow-lg:0 20px 50px rgba(0,0,0,.6); color-scheme: dark; } /* Fallback bez JavaScript: szanuj ustawienia systemowe */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg:#101512; --bg-alt:#151b17; --surface:#1a211c; --text:#eaeee9; --text-soft:#b4beb6; --primary:#46c795; --primary-2:#63d5a8; --on-primary:#0c1410; --accent:#fbbf24; --accent-soft:#2a2418; --border:#263029; --win-bg:#1c2f26; --hl:#46c795; --focus:#46c795; --shadow:0 8px 30px rgba(0,0,0,.5); --shadow-lg:0 20px 50px rgba(0,0,0,.6); color-scheme: dark; } } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} } body { margin:0; font-family:var(--font); font-size:clamp(1rem,.96rem + .2vw,1.07rem); line-height:1.6; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; } img { max-width:100%; height:auto; display:block; } a { color:var(--primary-2); text-underline-offset:.15em; } a:not(.btn):hover { color:var(--primary); } /* Przyciski zachowują własny kolor tekstu także w stanie hover/focus (globalny a:hover nie może ich nadpisać — inaczej tekst znika). */ .btn:hover, .btn:focus { color:var(--on-primary); } .btn--outline:hover, .btn--outline:focus { color:var(--on-primary); } .btn--ghost:hover, .btn--ghost:focus { color:var(--text); } h1,h2,h3 { line-height:1.15; letter-spacing:-.02em; font-weight:800; color:var(--text); text-wrap:balance; } :focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; } .container { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem); } .container--narrow { max-width:820px; } .visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .skip-link { position:absolute; left:8px; top:-48px; z-index:1000; background:var(--primary); color:var(--on-primary); padding:.6rem 1rem; border-radius:var(--radius-sm); transition:top .2s var(--ease); } .skip-link:focus { top:8px; } /* ---------- Przyciski ---------- */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:700; font-size:1rem; line-height:1.1; text-decoration:none; padding:.8rem 1.4rem; border-radius:999px; border:2px solid transparent; background:var(--primary); color:var(--on-primary); cursor:pointer; transition:transform .12s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); } .btn:hover { transform:translateY(-2px); box-shadow:var(--shadow); } .btn:active { transform:translateY(0); } .btn--primary { background:var(--primary); color:var(--on-primary); } .btn--outline { background:transparent; color:var(--primary-2); border-color:var(--primary-2); } .btn--outline:hover { background:var(--primary-2); color:var(--on-primary); } .btn--ghost { background:transparent; color:var(--text); border-color:var(--border); } .btn--ghost:hover { background:var(--bg-alt); } .btn--lg { padding:1rem 1.8rem; font-size:1.05rem; } .btn--sm { padding:.45rem 1rem; font-size:.9rem; } .btn--block { width:100%; } /* ---------- Nagłówek ---------- */ .site-header { position:sticky; top:0; z-index:100; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--border); } .site-header__inner { display:flex; align-items:center; gap:1rem; min-height:64px; } .brand { margin-right:auto; display:inline-flex; align-items:center; } .brand img { width:170px; height:auto; } .site-nav { display:flex; align-items:center; } .site-nav__toggle { display:none; background:none; border:0; cursor:pointer; padding:.5rem; } .site-nav__bars, .site-nav__bars::before, .site-nav__bars::after { display:block; width:24px; height:2px; background:var(--text); position:relative; transition:.2s var(--ease); } .site-nav__bars::before, .site-nav__bars::after { content:""; position:absolute; left:0; } .site-nav__bars::before { top:-7px; } .site-nav__bars::after { top:7px; } .site-nav__list { display:flex; align-items:center; gap:1.2rem; list-style:none; margin:0; padding:0; } .site-nav__list a:not(.btn) { color:var(--text); text-decoration:none; font-weight:600; } .site-nav__list a:not(.btn):hover { color:var(--primary-2); } .site-nav__list a[aria-current="page"] { color:var(--primary-2); text-decoration:underline; } .theme-switch { display:inline-flex; gap:2px; margin-left:.5rem; border:1px solid var(--border); border-radius:999px; padding:3px; background:var(--surface); } .theme-switch__btn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; background:none; border:0; border-radius:50%; cursor:pointer; line-height:0; color:var(--text-soft); } .theme-switch__btn:hover { color:var(--text); } .theme-switch__btn[aria-pressed="true"] { background:var(--win-bg); color:var(--primary-2); } .theme-switch__btn svg { width:17px; height:17px; } /* Logo w ciemnym motywie: osobny plik z jasną postacią i literami E, E, G. Filtr brightness() tego nie załatwia, bo mnoży kanały, a prawie czarnego piksela mnożeniem się nie rozjaśni. Wariant ma te same wymiary (565x119), więc podmiana nie przesuwa układu. */ [data-theme="ciemny"] .brand img, [data-theme="ciemny"] .site-footer img { content: url("../img/logo-edomeg-ciemny.webp"); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .brand img, :root:not([data-theme]) .site-footer img { content: url("../img/logo-edomeg-ciemny.webp"); } } /* ---------- Pasek podstron (sub-nav) ---------- */ .subnav { background:var(--bg-alt); border-bottom:1px solid var(--border); } .subnav__inner { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; padding-block:.75rem; } /* Etykiety grup jako wyraźne nagłówki sekcji — każda zajmuje całą szerokość, więc wersje programu są w jednym wierszu, a aktualizacje w kolejnym. */ .subnav__label { flex-basis:100%; width:100%; display:flex; align-items:center; gap:.45rem; font-size:.84rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--primary-2); margin:.1rem 0 .2rem; } .subnav__label::before { content:""; width:16px; height:3px; border-radius:2px; background:var(--primary-2); } .subnav__label:not(:first-child) { margin-top:.6rem; padding-top:.6rem; border-top:1px solid var(--border); } .subnav a { background:var(--surface); border:1px solid var(--border); } .subnav a:hover { border-color:var(--primary-2); } .subnav a { font-size:.92rem; font-weight:600; text-decoration:none; color:var(--text-soft); padding:.4rem .8rem; border-radius:999px; border:1px solid transparent; } .subnav a:hover { background:var(--surface); color:var(--primary-2); } .subnav a[aria-current="page"] { background:var(--primary); color:var(--on-primary); } /* ---------- Hero strony ---------- */ /* Bez własnego tła: sekcja bierze tło strony, tak jak hero na stronie głównej. Wcześniejszy gradient (bg-alt -> bg) tworzył widoczny, przybrudzony pasek. */ .page-hero { padding:clamp(1.8rem,5vw,3rem) 0 clamp(1.2rem,3vw,2rem); } /* Nagłówek hero: jeden rozmiar, hierarchia budowana kolorem (jak .hero__title na stronie głównej) */ .page-hero h1 { font-size:clamp(2.1rem,1.4rem + 3.4vw,3.7rem); margin:0 0 .8rem; } .page-hero h1 .hl { color:var(--primary-2); } .page-hero h1 .dim { color:var(--text-soft); } /* Etykieta pod H1 w hero, w tym samym stylu co box "Kwota do wpłaty" (.pay__amount) */ .page-hero p { color:var(--text-soft); max-width:62ch; margin:0; font-size:1.08rem; } .page-hero .hero-tag { display:inline-block; background:var(--win-bg); color:var(--primary-2); border-radius:var(--radius-sm); padding:.55rem 1.1rem; font-size:1.05rem; font-weight:700; margin:0 0 1.6rem; max-width:none; } /* Ilustracja w hero — opływana tekstem (float), responsywna */ .page-hero .container { overflow:hidden; } /* Zdjęcia mają jasne, prawie białe tło, więc w jasnym motywie ich krawędź zlewa się ze stroną. Mocny cień wyglądał wtedy jak smuga wokół niewidocznego obiektu. Zamiast tego: cienka linia definiująca krawędź + delikatny cień. */ .page-hero__media { display:block; width:100%; max-width:480px; height:auto; margin:0 0 1.2rem; border-radius:var(--radius); border:1px solid rgba(23,29,26,.24); box-shadow:var(--shadow); } /* W ciemnym motywie jasne zdjęcie bije po oczach (kontrast do tła ~8,9:1 zamiast 1,9:1 jak w jasnym). Tu wystarczy filtr: przyciemnianie to mnożenie, a jasne piksele mnożą się poprawnie (inaczej niż przy rozjaśnianiu czerni w logo). */ [data-theme="ciemny"] .page-hero__media { filter: brightness(.85) saturate(.95); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .page-hero__media { filter: brightness(.85) saturate(.95); } } @media (min-width:820px){ .page-hero__media { float:right; width:42%; max-width:440px; margin:.2rem 0 1rem 2rem; } } /* ---------- Sekcje ---------- */ .section { padding:clamp(1.6rem,4vw,2.6rem) 0; } .section h2 { font-size:clamp(1.35rem,1.1rem + 1.2vw,1.9rem); margin:0 0 1rem; } .lead { color:var(--text-soft); } /* ---------- Layout oferty ---------- */ .offer-grid { display:grid; grid-template-columns:1fr; gap:var(--gap); align-items:start; } /* Karta oferty / ceny */ .offer { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow); } .offer--featured { border-color:var(--primary-2); border-width:2px; } .offer__tag { display:inline-block; background:var(--accent); color:#fff; font-size:.78rem; font-weight:700; padding:.25rem .7rem; border-radius:999px; margin-bottom:.6rem; } /* Podświetlenie obramowania boxów (oferta + dane do przelewu) po najechaniu — jak na stronie głównej */ .offer, .pay { transition:border-color .18s var(--ease), box-shadow .18s var(--ease); } .offer:hover { border-color:var(--primary-2); box-shadow:var(--shadow-lg); } .pay:hover { border-color:var(--primary); box-shadow:var(--shadow-lg); } .offer__name { font-size:1.5rem; margin:0 0 .3rem; } .offer__price { font-size:2.2rem; font-weight:800; color:var(--primary-2); margin:.2rem 0; } .offer__price small { font-size:.9rem; font-weight:600; color:var(--text-soft); } .offer__sub { color:var(--text-soft); font-size:.95rem; margin:0 0 1rem; } .offer__feats { list-style:none; padding:0; margin:0 0 1.2rem; } .offer__feats li { padding-left:1.6rem; position:relative; margin-bottom:.45rem; } .offer__feats li::before { content:"✓"; position:absolute; left:0; color:var(--primary-2); font-weight:800; } /* ---------- Wybór okresu (aktualizacje) ---------- */ .period { border:0; padding:0; margin:0 0 1rem; } .period legend { font-weight:700; margin-bottom:.5rem; padding:0; } .period__opts { display:flex; flex-wrap:wrap; gap:.5rem; } .period__opt { position:relative; } .period__opt input { position:absolute; opacity:0; inset:0; cursor:pointer; } .period__opt span { display:flex; flex-direction:column; gap:.1rem; border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:.6rem .9rem; cursor:pointer; min-width:96px; } .period__opt b { font-size:1.05rem; color:var(--primary-2); } .period__opt small { color:var(--text-soft); } .period__opt input:checked + span { border-color:var(--primary-2); background:var(--win-bg); } .period__opt input:focus-visible + span { outline:3px solid var(--focus); outline-offset:2px; } /* ---------- Pole wyboru (select) ---------- */ .field { margin-bottom:1rem; } .field > label { display:block; font-weight:700; margin-bottom:.4rem; } .field select { width:100%; font:inherit; color:var(--text); background:var(--bg); border:2px solid var(--primary-2); border-radius:var(--radius-sm); padding:.65rem .7rem; } .field select:focus { border-color:var(--primary); } .field__hint { display:block; color:var(--text-soft); font-size:.85rem; margin-top:.3rem; } /* ---------- Box płatności / przelew ---------- */ .pay { background:var(--surface); border:2px solid var(--primary-2); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow); } .pay h2 { margin-top:0; } .pay__amount { display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem; background:var(--win-bg); border-radius:var(--radius-sm); padding:.8rem 1rem; margin-bottom:1.1rem; } .pay__amount .lbl { font-weight:600; color:var(--text-soft); } .pay__amount .val { font-size:1.9rem; font-weight:800; color:var(--primary-2); } .pay__row { margin-bottom:.9rem; } .pay__row .k { display:block; font-size:.82rem; text-transform:uppercase; letter-spacing:.03em; color:var(--text-soft); margin-bottom:.15rem; } .pay__row .v { font-weight:600; } .copyfield { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; } /* Numer konta: font systemowy zamiast programistycznego. Cascadia Code/ui-monospace rysuje zero z kropką w środku, co przy przepisywaniu numeru myli. Wyrównanie cyfr daje font-variant-numeric:tabular-nums, a zero jest zwykłym, czytelnym owalem. */ .copyfield code { font-family:var(--font); font-variant-numeric:tabular-nums; font-size:1.15rem; font-weight:600; background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.45rem .7rem; letter-spacing:.06em; word-break:break-word; } .copybtn { font:inherit; font-size:.85rem; font-weight:700; cursor:pointer; border:1.5px solid var(--primary-2); color:var(--primary-2); background:transparent; border-radius:999px; padding:.35rem .8rem; } .copybtn:hover { background:var(--primary-2); color:var(--on-primary); } .copybtn.is-done { background:var(--primary); color:var(--on-primary); border-color:var(--primary); } .title-tpl { font-family:var(--font); font-variant-numeric:tabular-nums; font-size:1rem; font-weight:600; background:var(--bg-alt); border:1px dashed var(--border); border-radius:var(--radius-sm); padding:.7rem .85rem; display:block; word-break:break-word; } .pay__example { color:var(--text-soft); font-size:.9rem; margin:.4rem 0 0; } .pay__contact { background:var(--accent-soft); border-left:4px solid var(--accent); border-radius:var(--radius-sm); padding:.9rem 1.1rem; margin:0 0 1.1rem; font-weight:600; } .pay__contact a { white-space:nowrap; } /* Podpowiedź: dane, które klient ma DOPISAĆ w tytule (nie kopiować) */ .fill-note { background:var(--accent-soft); border:1px dashed var(--accent); border-radius:var(--radius-sm); padding:.65rem .85rem; margin:.55rem 0 0; font-size:.92rem; line-height:1.5; } .fill-note strong { color:var(--accent); } /* Ikona obok nagłówka "Dane do przelewu". Plik jest przycięty do samej grafiki i ma przezroczyste tło, więc wysokość 0.69em odpowiada wysokości wersalika "D" (zmierzone: 21,0 px przy foncie 30,4 px), a vertical-align:baseline stawia ją na tej samej linii pisma co tekst. */ .pay__seal { display:inline-block; height:.69em; width:auto; margin-left:.5rem; vertical-align:baseline; } /* Pasek zaufania (ikonografika) w hero, pod opisem, w lewej kolumnie obok zdjęcia */ .trust-badges { list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.6rem; max-width:62ch; } @media (min-width:600px){ .trust-badges { grid-template-columns:1fr 1fr; gap:.7rem 1.4rem; } } .trust-badges li { display:flex; align-items:center; gap:.45rem; font-size:.88rem; font-weight:600; color:var(--text-soft); } .trust-badges svg { width:20px; height:20px; flex:none; color:var(--primary-2); } /* ---------- Callout / uwaga ---------- */ .callout { background:var(--accent-soft); border-left:4px solid var(--accent); border-radius:var(--radius-sm); padding:1rem 1.2rem; color:var(--text); } .callout--info { background:var(--bg-alt); border-left-color:var(--primary-2); } .callout p { margin:.3rem 0; } /* ---------- Kroki ---------- */ .steps { counter-reset:step; list-style:none; padding:0; margin:0; display:grid; gap:.9rem; } .steps li { counter-increment:step; position:relative; padding-left:3rem; } .steps li::before { content:counter(step); position:absolute; left:0; top:-2px; width:2rem; height:2rem; display:grid; place-items:center; background:var(--primary); color:var(--on-primary); border-radius:50%; font-weight:800; } /* ---------- Tabela cen ---------- */ .table-wrap { overflow-x:auto; border-radius:var(--radius); border:1px solid var(--border); } .ptable { width:100%; border-collapse:collapse; background:var(--surface); min-width:560px; } .ptable th, .ptable td { padding:.85rem 1rem; text-align:left; border-bottom:1px solid var(--border); } .ptable thead th { background:var(--bg-alt); } /* Nagłówek cennika w kolorze szablonu (jak pierwszy wiersz tabeli porównania) */ .ptable--accent thead th { background:var(--primary); color:var(--on-primary); border-bottom-color:var(--primary); } .ptable th[scope="row"] { font-weight:700; } .ptable td.num { text-align:right; font-variant-numeric:tabular-nums; } .ptable tr:last-child td { border-bottom:0; } /* ---------- Baner cookies ---------- */ .cookie-banner { position:fixed; inset:auto 0 0 0; z-index:200; background:var(--surface); border-top:1px solid var(--border); box-shadow:0 -8px 30px rgba(0,0,0,.12); } .cookie-banner__inner { display:grid; gap:1rem; padding:1.1rem clamp(1rem,4vw,2rem); max-width:var(--maxw); margin-inline:auto; } .cookie-banner__title { margin:0 0 .3rem; font-size:1.05rem; } .cookie-banner__desc { margin:0; color:var(--text-soft); font-size:.9rem; } .cookie-banner__actions { display:flex; flex-wrap:wrap; gap:.6rem; } /* ---------- Stopka ---------- */ .site-footer { background:var(--bg-alt); border-top:1px solid var(--border); padding-top:2.4rem; margin-top:2rem; } .site-footer__grid { display:grid; grid-template-columns:1fr; gap:var(--gap); padding-bottom:1.8rem; } .site-footer__h { font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:var(--text-soft); margin:0 0 .9rem; } .site-footer__col ul { list-style:none; padding:0; margin:0; display:grid; gap:.4rem; } .site-footer__col a { color:var(--text-soft); text-decoration:none; } .site-footer__col a:hover { color:var(--primary-2); text-decoration:underline; } .site-footer__desc { color:var(--text-soft); font-size:.9rem; } .site-footer address { font-style:normal; color:var(--text-soft); line-height:1.7; } .contact-noscript { display:block; margin-top:.4rem; color:var(--text-soft); font-size:.85rem; } .site-footer__bottom { border-top:1px solid var(--border); padding-block:1.1rem; } .site-footer__bottom p { color:var(--text-soft); font-size:.82rem; margin:0; } /* ---------- Breakpointy ---------- */ @media (min-width:560px){ .site-footer__grid { grid-template-columns:repeat(2,1fr); } .cookie-banner__inner { grid-template-columns:1fr auto; align-items:center; } } @media (min-width:860px){ .offer-grid--2 { grid-template-columns:1fr 1fr; } .offer-grid--side { grid-template-columns:1.1fr .9fr; } .site-footer__grid { grid-template-columns:1.3fr 1fr 1fr 1.1fr; } } @media (max-width:859px){ .site-nav__toggle { display:block; order:3; } .site-nav__list { position:absolute; top:64px; left:0; right:0; flex-direction:column; align-items:stretch; background:var(--surface); border-bottom:1px solid var(--border); padding:1rem; gap:.8rem; transform:translateY(-130%); transition:transform .25s var(--ease); box-shadow:var(--shadow); } .site-nav__list.is-open { transform:translateY(0); } .site-nav { position:static; } } /* ---------- Klasy narzędziowe (zamiast stylów inline — CSP style-src 'self' bez unsafe-inline) ---------- */ .u-mt-lg { margin-top: 1.2rem; } .u-mt-sm { margin-top: .5rem; } .u-mt-1 { margin-top: 1rem; } .u-mb-lg { margin-bottom: 1.2rem; } .u-text-left { text-align: left; } .val--lg { font-size: 1.2rem; }