feat: polish remaining storefront sections
This commit is contained in:
@@ -1,122 +1,234 @@
|
||||
.festival {
|
||||
padding: 20px 20px 30px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.festival-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.festival-scroll {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
overflow-x: auto;
|
||||
padding: 10px 0;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.festival-scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.festival-card {
|
||||
flex-shrink: 0;
|
||||
width: 150px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
animation: slideIn 0.5s ease forwards;
|
||||
animation-delay: var(--delay);
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.festival-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.festival-emoji {
|
||||
font-size: 32px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.festival-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.festival-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.festival-date {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
|
||||
.festival-days {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 2px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.days-number {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #ff5a5a;
|
||||
}
|
||||
|
||||
.days-text {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.festival-scroll-btn {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 10;
|
||||
background: white;
|
||||
border: none;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.festival-scroll-btn:hover {
|
||||
background: #ff5a5a !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.festival-card {
|
||||
width: 130px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.festival-emoji {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
.festival {
|
||||
padding: 12px 20px 24px;
|
||||
}
|
||||
|
||||
.festival-panel {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 30px;
|
||||
border-radius: 32px;
|
||||
background: linear-gradient(135deg, rgba(255, 250, 244, 0.94), rgba(255, 245, 236, 0.94));
|
||||
border: 1px solid rgba(233, 221, 212, 0.92);
|
||||
box-shadow: 0 22px 48px rgba(66, 42, 26, 0.08);
|
||||
}
|
||||
|
||||
.festival-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
gap: 24px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.festival-copy {
|
||||
max-width: 760px;
|
||||
}
|
||||
|
||||
.festival-kicker {
|
||||
display: inline-flex;
|
||||
margin-bottom: 12px;
|
||||
padding: 7px 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(239, 106, 91, 0.1);
|
||||
color: #d84e3f;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.festival-copy h2 {
|
||||
margin: 0;
|
||||
color: #221d18;
|
||||
font-size: clamp(24px, 4vw, 34px);
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.festival-copy p {
|
||||
margin: 12px 0 0;
|
||||
color: #756b61;
|
||||
line-height: 1.85;
|
||||
}
|
||||
|
||||
.festival-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.festival-summary {
|
||||
padding: 10px 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid rgba(236, 223, 213, 0.94);
|
||||
color: #63574b;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.festival-controls {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.festival-scroll-btn.ant-btn {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 16px;
|
||||
border-color: rgba(224, 208, 197, 0.95);
|
||||
background: #fffaf5;
|
||||
color: #66594d;
|
||||
}
|
||||
|
||||
.festival-scroll-btn.ant-btn:hover {
|
||||
color: #ef6a5b !important;
|
||||
border-color: rgba(239, 106, 91, 0.4) !important;
|
||||
background: #fff4ef !important;
|
||||
}
|
||||
|
||||
.festival-scroll {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: minmax(240px, 1fr);
|
||||
gap: 14px;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.festival-scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.festival-card {
|
||||
display: grid;
|
||||
grid-template-columns: 54px minmax(0, 1fr);
|
||||
gap: 14px;
|
||||
padding: 20px;
|
||||
border-radius: 24px;
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
border: 1px solid rgba(233, 221, 212, 0.95);
|
||||
animation: fadeIn 0.6s ease-out;
|
||||
animation-delay: var(--delay);
|
||||
animation-fill-mode: both;
|
||||
transition: transform 0.24s ease, box-shadow 0.24s ease;
|
||||
}
|
||||
|
||||
.festival-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 18px 36px rgba(66, 42, 26, 0.1);
|
||||
}
|
||||
|
||||
.festival-icon {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border-radius: 18px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.tone-orange .festival-icon {
|
||||
background: linear-gradient(135deg, #ffe7d6 0%, #ffcfb4 100%);
|
||||
color: #d96a44;
|
||||
}
|
||||
|
||||
.tone-green .festival-icon {
|
||||
background: linear-gradient(135deg, #e0f4e8 0%, #c3ead4 100%);
|
||||
color: #2f8f73;
|
||||
}
|
||||
|
||||
.tone-pink .festival-icon {
|
||||
background: linear-gradient(135deg, #ffe7f0 0%, #ffd1e4 100%);
|
||||
color: #cc5f8b;
|
||||
}
|
||||
|
||||
.tone-purple .festival-icon {
|
||||
background: linear-gradient(135deg, #efe7ff 0%, #dccfff 100%);
|
||||
color: #7d60c9;
|
||||
}
|
||||
|
||||
.tone-slate .festival-icon {
|
||||
background: linear-gradient(135deg, #edf1f7 0%, #d8e0ec 100%);
|
||||
color: #60708a;
|
||||
}
|
||||
|
||||
.tone-red .festival-icon {
|
||||
background: linear-gradient(135deg, #ffe2df 0%, #ffc4bc 100%);
|
||||
color: #cf5347;
|
||||
}
|
||||
|
||||
.festival-content {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.festival-topline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.festival-name {
|
||||
margin: 0;
|
||||
color: #241d17;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.festival-days {
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
background: #fff3ea;
|
||||
color: #d84e3f;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.festival-date {
|
||||
margin: 8px 0 6px;
|
||||
color: #7e7266;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.festival-note {
|
||||
color: #a29488;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.festival-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.festival-actions {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.festival {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.festival-panel {
|
||||
padding: 20px 18px;
|
||||
border-radius: 26px;
|
||||
}
|
||||
|
||||
.festival-scroll {
|
||||
grid-auto-columns: minmax(220px, 1fr);
|
||||
}
|
||||
|
||||
.festival-card {
|
||||
grid-template-columns: 48px minmax(0, 1fr);
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.festival-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user