#stamp-slider {
font-family: ‘Georgia’, serif;
}
.stamp-viewport {
overflow: hidden;
width: 100%;
}
.stamp-track {
display: flex;
gap: 24px;
transition: transform 0.4s ease;
will-change: transform;
}
.stamp-card {
flex: 0 0 calc(25% – 18px);
min-width: 0;
text-decoration: none;
color: inherit;
display: block;
}
.stamp-inner {
background: #f5f0e8;
border: 3px solid #8b6914;
border-radius: 4px;
padding: 10px 10px 14px;
position: relative;
box-shadow: 2px 3px 8px rgba(0,0,0,0.18);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stamp-card:hover .stamp-inner {
transform: translateY(-4px) rotate(0deg);
box-shadow: 4px 8px 16px rgba(0,0,0,0.25);
}
.stamp-inner::before {
content: ”;
position: absolute;
top: -10px; left: -10px; right: -10px; bottom: -10px;
background:
radial-gradient(circle, transparent 5px, #f5f0e8 5px) top left / 12px 12px,
radial-gradient(circle, transparent 5px, #f5f0e8 5px) top right / 12px 12px,
radial-gradient(circle, transparent 5px, #f5f0e8 5px) bottom left / 12px 12px,
radial-gradient(circle, transparent 5px, #f5f0e8 5px) bottom right / 12px 12px;
background-repeat: no-repeat;
z-index: -1;
}
.stamp-img {
width: 100%;
aspect-ratio: 1;
overflow: hidden;
border: 2px solid #c9a84c;
background: #e8dfc8;
}
.stamp-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.stamp-info {
text-align: center;
margin-top: 10px;
}
.stamp-city {
display: block;
font-size: 15px;
font-weight: bold;
color: #3a2a0a;
letter-spacing: 1px;
text-transform: uppercase;
}
.stamp-country {
display: block;
font-size: 11px;
color: #8b6914;
letter-spacing: 2px;
text-transform: uppercase;
margin-top: 3px;
}
.stamp-rot-1 .stamp-inner { transform: rotate(-1.5deg); }
.stamp-rot-2 .stamp-inner { transform: rotate(1deg); }
.stamp-rot-3 .stamp-inner { transform: rotate(-0.8deg); }
.stamp-rot-4 .stamp-inner { transform: rotate(1.5deg); }
.stamp-rot-5 .stamp-inner { transform: rotate(-1deg); }
.stamp-nav {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 24px;
}
.stamp-btn {
background: #8b6914;
color: #f5f0e8;
border: none;
width: 42px;
height: 42px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, transform 0.1s;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.stamp-btn:hover { background: #6b4f10; transform: scale(1.08); }
.stamp-btn:disabled { background: #ccc; cursor: not-allowed; transform: none; box-shadow: none; }
.stamp-dots {
display: flex;
gap: 8px;
}
.stamp-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #ccc;
transition: background 0.2s;
}
.stamp-dot.active { background: #8b6914; }
@media (max-width: 600px) {
.stamp-card { flex: 0 0 calc(50% – 12px); }
}
(function() {
var track = document.getElementById(‘stamp-track’);
var prev = document.getElementById(‘stamp-prev’);
var next = document.getElementById(‘stamp-next’);
var dotsContainer = document.getElementById(‘stamp-dots’);
var cards = track.querySelectorAll(‘.stamp-card’);
var total = cards.length;
var visible = window.innerWidth <= 600 ? 2 : 4;
var current = 0;
var maxStep = total – visible;
// Crea i dots
for (var i = 0; i <= maxStep; i++) {
var dot = document.createElement('span');
dot.className = 'stamp-dot' + (i === 0 ? ' active' : '');
dotsContainer.appendChild(dot);
}
function updateDots() {
var dots = dotsContainer.querySelectorAll('.stamp-dot');
dots.forEach(function(d, i) {
d.classList.toggle('active', i === current);
});
}
function move(dir) {
current = Math.max(0, Math.min(current + dir, maxStep));
var cardWidth = cards[0].offsetWidth + 24;
track.style.transform = 'translateX(-' + (current * cardWidth) + 'px)';
prev.disabled = current === 0;
next.disabled = current === maxStep;
updateDots();
}
prev.addEventListener('click', function() { move(-1); });
next.addEventListener('click', function() { move(1); });
// Stato iniziale
prev.disabled = true;
next.disabled = maxStep === 0;
})();
Persi per Scelta - Il mondo è troppo grande per restare sulla strada principale. 