/* ============================================================ Magnesy — dodatki do silnika kreatora (css/photocard.css) ============================================================ 🔴 TEN PLIK NIE JEST SAMODZIELNYM ARKUSZEM. Magnesy jadą na tym samym kreatorze co fotokartki (js/fz-photocard.js), więc `magnesy.html` ładuje NAJPIERW `css/photocard.css`, a tutaj są wyłącznie: 1. inny kolor akcentu (magnes to inny produkt, ma się odróżniać), 2. karta wyboru ROZMIARU — magnes nie ma nakładki, więc zamiast miniatury PNG pokazujemy proporcjonalny prostokąt. Poprzednia zawartość (1021 linii stylów starej aplikacji magnesów z 02/2026) została usunięta razem z tamtym kreatorem — nic jej nie ładowało po tym, jak `api/upload_proxy.php` zniknął w 6.85.0. ============================================================ */ /* Akcent produktu — jeden z czterech, rejestr i zasady w css/photocard.css. Magnes jest błękitny. Tu jako klasa na , bo ten kreator dzieli arkusz z fotokartkami; album i kalendarz mają własne arkusze i ustawiają go w :root. */ body.pc-product-magnet { --pc-accent: #1f6feb; --pc-accent-light: #e7f0fd; } /* ── Karta wyboru rozmiaru (produkt bez nakładki) ─────────── */ /* 🔴 POLE PODGLĄDU MUSI BYĆ KWADRATOWE. Kształt magnesu rysujemy procentami szerokości I wysokości — przy niekwadratowym polu każdy z tych procentów liczyłby się od innego boku i proporcja 7×10 wyszłaby fałszywa. `.pc-product-hero` z photocard.css ma stałą wysokość 240 px, więc tutaj nadpisujemy ją proporcją. */ .pc-format-hero { background: #fafafa; display: flex; align-items: center; justify-content: center; padding: 22px; aspect-ratio: 1; } /* Zapas dla przeglądarek bez `aspect-ratio` (starsze WebView na Androidzie): kwadrat robimy klasycznie, przez padding-bottom. */ @supports not (aspect-ratio: 1) { .pc-format-hero { position: relative; height: 0; padding-bottom: 100%; } .pc-format-hero > .pc-format-shape { position: absolute; } } /* Sam magnes: prostokąt w proporcji formatu. Zaokrąglenie i cień czytają się jak fizyczny przedmiot na lodówce, a nie jak pusty placeholder. */ .pc-format-shape { background: #fff; border: 1px solid var(--pc-border); border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); max-width: 100%; max-height: 100%; } /* Wymiar w cm obok nazwy — dziedziczy wygląd plakietki z photocard.css, ale przy dwóch liczbach i „cm" bywa dłuższy, więc pozwalamy mu zejść do nowej linii zamiast rozpychać kartę. */ .pc-product-card--format .pc-product-name { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; } .pc-product-card--format .pc-product-size-badge { margin-left: 0; } /* Podpowiedź o obrocie — magnes dopasowuje się do zdjęcia, nie odwrotnie. Wyciszona: to informacja, nie wezwanie do działania (zieleń/akcent zostaje dla przycisku). */ .pc-format-hint { font-size: 12px; line-height: 1.35; text-align: center; color: var(--pc-text-light); padding: 0 16px 10px; }