/* ============================================================ COMPONENTS — karty, badge, animacje/interakcje (kanon). ============================================================ */ /* ── Karta ── */ .iab-card { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--sp-5); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); } .iab-card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: transparent; } .iab-card__media { border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--sp-4); aspect-ratio: 16/10; } .iab-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); } .iab-card--link:hover .iab-card__media img { transform: scale(1.05); } /* ── Badge / pill ── */ .iab-badge { display: inline-block; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--c-brand-soft); color: var(--c-brand-hover); font-size: var(--text-xs); font-weight: var(--fw-semibold); } /* ── Divider ── */ .iab-divider { height: 1px; background: var(--c-line); border: 0; margin-block: var(--sp-6); } /* ============================================================ ANIMACJE / INTERAKCJE (kanon — spójny zestaw na całej stronie) ============================================================ */ /* Scroll-reveal: ukrywaj TYLKO gdy JS aktywny (.iab-js na ). Bez JS / przy błędzie modułu treść jest widoczna (progressive enhancement). */ .iab-js .iab-reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .iab-js .iab-reveal.is-visible { opacity: 1; transform: none; } .iab-reveal[data-delay="1"] { transition-delay: 80ms; } .iab-reveal[data-delay="2"] { transition-delay: 160ms; } .iab-reveal[data-delay="3"] { transition-delay: 240ms; } @media (prefers-reduced-motion: reduce) { .iab-js .iab-reveal { opacity: 1; transform: none; } } /* Hover-lift util */ .iab-lift { transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } .iab-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); } /* ── Floating phone FAB (mobile) ── */ .iab-fab { position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: var(--z-toast); width: 56px; height: 56px; border-radius: var(--radius-pill); display: none; align-items: center; justify-content: center; background: var(--c-brand); color: var(--c-on-brand); box-shadow: var(--shadow-lift); animation: iab-fab-in var(--dur-slow) var(--ease-out) both; } .iab-fab:hover { background: var(--c-brand-hover); color: var(--c-on-brand); } @keyframes iab-fab-in { from { opacity: 0; transform: scale(.6) translateY(20px); } to { opacity: 1; transform: none; } } @media (max-width: 720px) { .iab-fab { display: flex; } /* FAB telefon = mobilne CTA */ }