.wp-pagenavi {
clear: both;
}
.wp-pagenavi a, .wp-pagenavi span {
text-decoration: none;
border: 1px solid #BFBFBF;
padding: 3px 5px;
margin: 2px;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
border-color: #000;
}
.wp-pagenavi span.current {
font-weight: bold;
}.advent-calendar-container {
margin: 30px 0;
padding: 20px;
background: #f9f9f9;
border-radius: 15px;
}
.advent-door {
background: linear-gradient(145deg, #d4af37, #ffd700);
border: 3px solid #b8860b;
color: #8b4513;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.advent-door:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}
.advent-door.locked {
background: linear-gradient(145deg, #cccccc, #999999);
border-color: #666666;
color: #666666;
cursor: not-allowed;
opacity: 0.6;
}
.advent-door.locked:hover {
transform: none;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.advent-door.open {
background: linear-gradient(145deg, #90ee90, #32cd32);
border-color: #228b22;
color: #006400;
cursor: default;
}
.advent-error {
color: #dc3545;
background: #f8d7da;
padding: 15px;
border-radius: 5px;
border-left: 4px solid #dc3545;
} .advent-calendar {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.advent-calendar.doors-grid {
display: grid;
gap: 15px;
justify-content: center;
} .advent-calendar[data-columns="6"] .doors-grid {
grid-template-columns: repeat(6, 1fr);
}
.advent-calendar[data-columns="5"] .doors-grid {
grid-template-columns: repeat(5, 1fr);
}
.advent-calendar[data-columns="4"] .doors-grid {
grid-template-columns: repeat(4, 1fr);
}
.advent-calendar[data-columns="3"] .doors-grid {
grid-template-columns: repeat(3, 1fr);
}
.advent-calendar[data-columns="7"] .doors-grid {
grid-template-columns: repeat(7, 1fr);
}
.advent-calendar[data-columns="8"] .doors-grid {
grid-template-columns: repeat(8, 1fr);
} @media (max-width: 1200px) {
.advent-calendar[data-columns="8"] .doors-grid {
grid-template-columns: repeat(6, 1fr);
}
.advent-calendar[data-columns="7"] .doors-grid {
grid-template-columns: repeat(5, 1fr);
}
}
@media (max-width: 992px) {
.advent-calendar[data-columns="6"] .doors-grid,
.advent-calendar[data-columns="5"] .doors-grid {
grid-template-columns: repeat(4, 1fr);
}
.advent-calendar[data-columns="8"] .doors-grid,
.advent-calendar[data-columns="7"] .doors-grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 768px) {
.advent-calendar[data-columns="6"] .doors-grid,
.advent-calendar[data-columns="5"] .doors-grid,
.advent-calendar[data-columns="4"] .doors-grid {
grid-template-columns: repeat(3, 1fr);
}
.advent-calendar[data-columns="8"] .doors-grid,
.advent-calendar[data-columns="7"] .doors-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 576px) {
.advent-calendar .doors-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
} .advent-calendar-door {
aspect-ratio: 1;
background: linear-gradient(145deg, #d4af37, #ffd700);
border: 3px solid #b8860b;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
font-weight: bold;
font-size: 1.5em;
color: #8b4513;
text-decoration: none;
}
.advent-calendar-door:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0,0,0,0.3);
background: linear-gradient(145deg, #ffd700, #ffec8b);
}
.advent-calendar-door.locked {
background: linear-gradient(145deg, #cccccc, #999999);
border-color: #666666;
color: #666666;
cursor: not-allowed;
transform: none;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.advent-calendar-door.locked:hover {
transform: none;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.advent-calendar-door.open {
background: linear-gradient(145deg, #90ee90, #32cd32);
border-color: #228b22;
color: #006400;
}
.advent-calendar-door.loading {
opacity: 0.7;
cursor: wait;
} .door-number {
font-size: 1.2em;
font-weight: bold;
z-index: 2;
} .door-animation-fade {
animation: doorFade 0.6s ease;
}
.door-animation-slide {
animation: doorSlide 0.6s ease;
}
.door-animation-zoom {
animation: doorZoom 0.6s ease;
}
.door-animation-flip {
animation: doorFlip 0.6s ease;
}
@keyframes doorFade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes doorSlide {
from { transform: translateY(-20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes doorZoom {
from { transform: scale(0.5); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
@keyframes doorFlip {
from { transform: rotateY(90deg); opacity: 0; }
to { transform: rotateY(0deg); opacity: 1; }
} .advent-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.advent-modal.active {
opacity: 1;
visibility: visible;
}
.advent-modal-content {
background: white;
padding: 30px;
border-radius: 15px;
max-width: 90%;
max-height: 90%;
overflow-y: auto;
position: relative;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
transform: scale(0.7);
transition: transform 0.3s ease;
}
.advent-modal.active .advent-modal-content {
transform: scale(1);
}
.advent-modal-close {
position: absolute;
top: 15px;
right: 15px;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: #666;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.advent-modal-close:hover {
background: #f0f0f0;
color: #333;
}
body.modal-open {
overflow: hidden;
} .confetti-container,
.snow-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
}
.confetti {
position: absolute;
width: 10px;
height: 10px;
animation: confettiFall linear forwards;
}
@keyframes confettiFall {
0% {
transform: translateY(-100px) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
.snowflake {
position: absolute;
animation: snowFall linear forwards;
pointer-events: none;
}
@keyframes snowFall {
0% {
transform: translateY(-100px) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
.sparkle {
position: fixed;
width: 20px;
height: 20px;
background: gold;
border-radius: 50%;
pointer-events: none;
z-index: 9999;
animation: sparklePop 2s ease-out forwards;
}
@keyframes sparklePop {
0% {
transform: scale(0);
opacity: 1;
}
50% {
transform: scale(1);
opacity: 0.8;
}
100% {
transform: scale(0);
opacity: 0;
}
} .advent-calendar-error {
position: fixed;
top: 20px;
right: 20px;
background: #dc3545;
color: white;
padding: 15px 20px;
border-radius: 5px;
z-index: 10001;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
} .advent-theme-christmas .advent-calendar-door {
background: linear-gradient(145deg, #d4af37, #ffd700);
border-color: #b8860b;
}
.advent-theme-winter .advent-calendar-door {
background: linear-gradient(145deg, #e6f3ff, #b3d9ff);
border-color: #6699cc;
color: #336699;
}
.advent-theme-modern .advent-calendar-door {
background: linear-gradient(145deg, #667eea, #764ba2);
border-color: #5a6fbe;
color: white;
}
.advent-theme-classic .advent-calendar-door {
background: linear-gradient(145deg, #8b4513, #a0522d);
border-color: #654321;
color: #ffd700;
} .door-main-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.door-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.door-number {
position: absolute;
top: 8px;
left: 8px;
background: rgba(0,0,0,0.7);
color: white;
width: 25px;
height: 25px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8em;
z-index: 2;
}
.door-default-closed {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, #d4af37, #ffd700);
}
.door-number-closed {
font-size: 1.5em;
font-weight: bold;
color: #8b4513;
} .door-default-content .door-icon {
font-size: 2em;
} .door-image-container {
position: relative;
width: 100%;
height: 100%;
border-radius: 8px;
overflow: hidden;
}
.door-main-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.3s ease;
} .door-image-container.closed .door-main-image {
filter: brightness(0.3) blur(1px);
}
.door-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
}
.door-image-container.opened .door-main-image {
filter: brightness(1);
} .door-default-content {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
transition: all 0.3s ease;
}
.door-default-content.closed {
background: linear-gradient(145deg, #d4af37, #ffd700);
}
.door-default-content.opened {
background: linear-gradient(145deg, #90ee90, #32cd32);
}
.door-icon {
font-size: 1.8em;
font-weight: bold;
}
.door-default-content.closed .door-icon {
color: #8b4513;
}
.door-default-content.opened .door-icon {
color: #006400;
}
.door-number {
position: absolute;
top: 8px;
left: 8px;
background: rgba(0,0,0,0.7);
color: white;
width: 25px;
height: 25px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8em;
z-index: 10;
} .advent-calendar-door[style*="background-image"] {
position: relative;
border: 3px solid #ffd700 !important; }
.advent-calendar-door[style*="background-image"] .door-number {
background: rgba(0, 0, 0, 0.7) !important;
border: 2px solid #ffd700 !important;
color: #ffd700 !important;
font-weight: bold;
} .door-image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 100%);
border-radius: 8px;
} .advent-calendar-door:not([style*="background-image"]) .door-default-content.closed {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
} .advent-calendar-door.open {
transition: all 0.5s ease-in-out;
}@keyframes fadeIn {
from { opacity: 0; transform: scale(0.8); }
to { opacity: 1; transform: scale(1); }
}
@keyframes slideInUp {
from { transform: translateY(50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes slideInDown {
from { transform: translateY(-50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes zoomIn {
from { transform: scale(0.3); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
@keyframes bounceIn {
0% { transform: scale(0.3); opacity: 0; }
50% { transform: scale(1.05); }
70% { transform: scale(0.9); }
100% { transform: scale(1); opacity: 1; }
}
@keyframes flipInY {
from { transform: perspective(400px) rotateY(90deg); opacity: 0; }
to { transform: perspective(400px) rotateY(0); opacity: 1; }
}
@keyframes rotateIn {
from { transform: rotate(-180deg) scale(0.3); opacity: 0; }
to { transform: rotate(0) scale(1); opacity: 1; }
}
@keyframes lightSpeedIn {
from { transform: translateX(100%) skewX(-30deg); opacity: 0; }
60% { transform: skewX(20deg); opacity: 1; }
80% { transform: skewX(-5deg); }
to { transform: translateX(0) skewX(0); opacity: 1; }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.door-animation-fade { animation: fadeIn 0.6s ease; }
.door-animation-slide-up { animation: slideInUp 0.6s ease; }
.door-animation-slide-down { animation: slideInDown 0.6s ease; }
.door-animation-zoom { animation: zoomIn 0.6s ease; }
.door-animation-bounce { animation: bounceIn 0.8s ease; }
.door-animation-flip { animation: flipInY 0.8s ease; }
.door-animation-rotate { animation: rotateIn 0.8s ease; }
.door-animation-lightspeed { animation: lightSpeedIn 0.8s ease; }
.door-animation-pulse { animation: pulse 0.8s ease; }
.confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 999999;
}
.confetti {
position: absolute;
width: 12px;
height: 12px;
opacity: 0.8;
animation: confettiFall linear forwards;
}
@keyframes confettiFall {
to {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
.snow-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 999998;
}
.snowflake {
position: absolute;
color: white;
font-size: 24px;
animation: snowfall linear infinite;
user-select: none;
}
@keyframes snowfall {
to {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
.sparkle {
position: absolute;
width: 4px;
height: 4px;
background: gold;
border-radius: 50%;
animation: sparkleTwinkle 1.5s ease-in-out infinite;
}
@keyframes sparkleTwinkle {
0%, 100% { opacity: 0; transform: scale(0); }
50% { opacity: 1; transform: scale(1); }
}
.star {
position: absolute;
width: 3px;
height: 3px;
background: white;
border-radius: 50%;
animation: starTwinkle 2s ease-in-out infinite;
}
@keyframes starTwinkle {
0%, 100% { opacity: 0.3; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.2); }
}
.door-loading {
position: relative;
}
.door-loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
margin: -15px 0 0 -15px;
border: 3px solid rgba(255,255,255,0.3);
border-top: 3px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.door-glow:hover {
box-shadow: 0 0 20px rgba(255,215,0,0.5);
}
.door-shake:hover {
animation: shake 0.5s ease;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
.door-success {
animation: successPulse 2s ease;
}
@keyframes successPulse {
0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
70% { box-shadow: 0 0 0 20px rgba(40, 167, 69, 0); }
100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}