/* ========================================================================== MEMPHIS '80s — wspólne wzory z identyfikacji Bajki Pana Kleksa Kolory oficjalne: Atrament #244BB5 · Skarb #40B9BB · Broda #CC0066 Mango #FF6600 · czerń #000 · biel #fff Wzory: kropki, szachownica, ślimaki, fala, koło, zygzak (geometryczne formy brandowe — solidne płaszczyzny, bez gradientów) ========================================================================== */ :root { --bpk-ink: #244BB5; --bpk-teal: #40B9BB; --bpk-magenta: #CC0066; --bpk-mango: #FF6600; --bpk-black: #000000; --bpk-white: #FFFFFF; } /* widoczność dekoracji sterowana klasą na */ .mph { position: absolute; pointer-events: none; z-index: 1; } body.mph-off .mph { display: none !important; } body.mph-soft .mph { opacity: 0.5; } @media (prefers-reduced-motion: no-preference) { body.mph-on .mph-float { animation: mphFloat 7s ease-in-out infinite; } body.mph-on .mph-spin { animation: mphSpin 26s linear infinite; } } @keyframes mphFloat { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-14px) rotate(var(--r,0deg)); } } @keyframes mphSpin { to { transform: rotate(360deg); } } /* ---- KOŁO / RING (akcent kontrastujący, nawiązanie do logo) ---- */ .mph-circle { border-radius: 50%; } .mph-ring { border-radius: 50%; background: transparent; border-style: solid; } /* ---- PÓŁKOLE ---- */ .mph-half { border-radius: 999px 999px 0 0; } /* ---- TRÓJKĄT ---- */ .mph-tri { width: 0; height: 0; background: transparent !important; border-left: var(--s, 26px) solid transparent; border-right: var(--s, 26px) solid transparent; border-bottom: calc(var(--s, 26px) * 1.7) solid var(--c, #FF6600); } /* ---- KROPKI (białe na kolorze / kolor na bieli) ---- */ .mph-dots { background-image: radial-gradient(currentColor 30%, transparent 32%); background-size: 26px 26px; color: var(--c, #244BB5); } /* ---- SZACHOWNICA (paski na brzegach grafik) ---- */ .mph-check { background-image: conic-gradient(var(--c, #000) 90deg, transparent 90deg 180deg, var(--c, #000) 180deg 270deg, transparent 270deg); background-size: 22px 22px; background-position: 0 0; } .strip-check { height: 22px; width: 100%; background-image: conic-gradient(var(--c, #000) 90deg, transparent 90deg 180deg, var(--c, #000) 180deg 270deg, transparent 270deg); background-size: 22px 22px; } /* ---- ŚLIMAK MEMPHIS (wężyk) ---- */ .mph-squig { background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34'%3E%3Cpath d='M4 17 Q 19 1 34 17 T 64 17 T 94 17 T 116 17' fill='none' stroke='%23CC0066' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E"); } /* ---- ZYGZAK ---- */ .mph-zig { background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 30'%3E%3Cpath d='M3 24 L18 6 L33 24 L48 6 L63 24 L78 6 L93 24 L108 6 L117 13' fill='none' stroke='%2340B9BB' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* ---- KRZYŻYK / iskra ---- */ .mph-plus { background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2v20M2 12h20' stroke='%23FF6600' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E"); } /* ---- FALA (brzeg dużych płaszczyzn) — element blokowy ---- */ .strip-wave { display: block; width: 100%; height: 38px; }