/* ============================================================ dvd-carousel.css Includere nel della pagina ASP principale: ============================================================ */ /* ── Sezione ── */ .dvd-section { padding: 24px 16px; max-width: 1200px; margin: 0 auto; } .dvd-section__title { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #111; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid #111; } /* ── Wrapper carousel ── */ .carousel-wrapper { position: relative; clip-path: inset(0 0 -500px 0); } .carousel-track-container { overflow: hidden; /* diventa visible via JS dopo init */ } .carousel-track { display: flex; gap: 16px; transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; } /* ── Card ── */ .dvd-card { flex: 0 0 calc(25% - 12px); min-width: 0; border: 1px solid #e0e0e0; background: #fff; position: relative; cursor: pointer; z-index: 1; transition: box-shadow 0.25s, z-index 0s; } .dvd-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.18); z-index: 10; } /* Immagine copertina */ .dvd-card__cover { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; background: #f5f5f5; } .dvd-card__cover-placeholder { width: 100%; aspect-ratio: 3/4; background: #eee; display: flex; align-items: center; justify-content: center; color: #aaa; font-size: 12px; } /* Corpo card */ .dvd-card__body { padding: 10px 12px 14px; } .dvd-card__title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.3; margin-bottom: 10px; min-height: 34px; } .dvd-card__meta { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 4px 8px; } .dvd-card__label { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #888; margin-bottom: 1px; } .dvd-card__value { font-size: 12px; font-weight: 600; color: #111; } /* Rating */ .dvd-card__rating { text-align: right; } .dvd-card__score { font-size: 12px; font-weight: 700; color: #111; white-space: nowrap; } .dvd-card__score span { font-size: 10px; font-weight: 400; color: #999; } .dvd-card__stars { display: flex; justify-content: flex-end; gap: 2px; margin-top: 3px; } .dvd-card__stars .star { width: 12px; height: 12px; fill: #e0004d; } .dvd-card__stars .star.empty { fill: #ddd; } /* ── Pannello espandibile (hover) ── */ .dvd-card__expand { position: absolute; left: -1px; right: -1px; top: 100%; background: #fff; border: 1px solid #e0e0e0; border-top: none; overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.25s ease; pointer-events: none; z-index: 10; } .dvd-card:hover .dvd-card__expand { max-height: 400px; opacity: 1; pointer-events: auto; } .dvd-card__expand-inner { padding: 10px 12px 12px; } /* Label "ACQUISTALO SU" */ .dvd-card__acquista-label { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #888; margin-bottom: 8px; } /* Lista piattaforme */ .dvd-card__piattaforme { display: flex; flex-direction: column; gap: 6px; } /* Riga singola piattaforma: logo+nome a sinistra, tasti a destra */ .dvd-card__piattaforma-row { display: flex; align-items: center; gap: 8px; } .dvd-card__piattaforma-info { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; } .dvd-card__piattaforma-logo { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; } .dvd-card__piattaforma-nome { font-size: 11px; font-weight: 600; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Contenitore tasti DVD / Blu-ray per riga */ .dvd-card__btns { display: flex; gap: 4px; flex-shrink: 0; } /* Pulsante acquista base */ .dvd-card__btn { display: inline-block; padding: 5px 10px; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; border: none; cursor: pointer; text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: background 0.15s; line-height: 1.2; } /* Tasto DVD */ .dvd-card__btn--dvd { background: #e0004d; } .dvd-card__btn--dvd:hover { background: #b8003e; } /* Tasto Blu-ray */ .dvd-card__btn--bluray { background: #0066cc; } .dvd-card__btn--bluray:hover { background: #004c99; } .dvd-card__btn, .dvd-card__btn:link, .dvd-card__btn:visited { color: #ffffff; } /* ── Frecce navigazione ── */ .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; background: #fff; border: 1px solid #ccc; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; box-shadow: 0 2px 8px rgba(0,0,0,0.12); transition: background 0.15s, border-color 0.15s; } .carousel-btn:hover { background: #f5f5f5; border-color: #999; } .carousel-btn:disabled { opacity: 0.35; cursor: default; } .carousel-btn--prev { left: 5px; } .carousel-btn--next { right: 5px; } .carousel-btn svg { width: 14px; height: 14px; stroke: #333; stroke-width: 2.5; fill: none; } /* ── Responsive ── */ @media (max-width: 900px) { .dvd-card { flex: 0 0 calc(50% - 8px); } } @media (max-width: 560px) { .dvd-card { flex: 0 0 50% - 8px; } } /* ── Loading skeleton ── */ .dvd-card--skeleton .dvd-card__cover-placeholder { animation: dvdPulse 1.4s ease-in-out infinite; } .dvd-card--skeleton .dvd-card__title, .dvd-card--skeleton .dvd-card__value { background: #eee; color: transparent; border-radius: 3px; animation: dvdPulse 1.4s ease-in-out infinite; } @keyframes dvdPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }