skidfire
147 lines
4.5 KiB
CSS
147 lines
4.5 KiB
CSS
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
|
|
html { font-family: Arial, sans-serif; font-size: 12px; line-height: 1.5; }
|
|
body { background: #f0f0f0; min-height: 100vh; display: flex; flex-direction: column; }
|
|
a { color: inherit; text-decoration: none; }
|
|
a.link { color: #5a1fbf; }
|
|
a.link:hover { text-decoration: underline; }
|
|
img, svg { display: block; max-width: 100%; }
|
|
button { cursor: pointer; font: inherit; }
|
|
|
|
.topbar {
|
|
position: fixed; top: 0; left: 0; right: 0; z-index: 50;
|
|
display: flex; flex-direction: column;
|
|
}
|
|
|
|
.topbar-main {
|
|
background: linear-gradient(to bottom, #6B21A8, #4C0F8F);
|
|
color: white;
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 13px;
|
|
padding-inline: 5%;
|
|
}
|
|
|
|
.topbar-logo {
|
|
display: flex; align-items: center; height: 100%;
|
|
padding-inline: 4px;
|
|
}
|
|
.topbar-logo .logo-banner {
|
|
height: 28px;
|
|
width: auto;
|
|
display: block;
|
|
}
|
|
.topbar-logo .logo-small {
|
|
height: 28px;
|
|
width: auto;
|
|
display: none;
|
|
}
|
|
|
|
.topbar-spacer { flex: 1; }
|
|
|
|
.topbar-nav {
|
|
background: #191919; color: white;
|
|
padding: 3px 0;
|
|
display: flex; flex-wrap: wrap; align-items: center;
|
|
gap: 10px;
|
|
font-size: 12px;
|
|
padding-inline: 5%;
|
|
}
|
|
.topbar-nav a:hover { text-decoration: underline; }
|
|
.topbar-nav .spacer { flex: 1; }
|
|
|
|
.announcement-bar {
|
|
background: #2d1060; color: #e4b4ff;
|
|
font-size: 11px; text-align: center;
|
|
padding: 3px 8px;
|
|
}
|
|
.announcement-bar a { color: #d8a0ff; text-decoration: underline; }
|
|
|
|
.page-wrap {
|
|
margin-top: 62px;
|
|
display: flex; justify-content: center; flex: 1;
|
|
}
|
|
.page-inner {
|
|
margin: 0 5px 25px;
|
|
width: 100%;
|
|
max-width: 900px;
|
|
}
|
|
|
|
.two-col { display: flex; gap: 10px; margin-top: 10px; }
|
|
.col-main { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
|
|
.col-side { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
|
|
|
|
.card {
|
|
border: 1px solid #ccc; border-radius: 5px;
|
|
overflow: hidden; background: white;
|
|
}
|
|
.card-header {
|
|
padding: 8px 10px 0;
|
|
font-size: 14px;
|
|
}
|
|
.card-header b { font-size: 16px; }
|
|
.card-body { padding: 10px; }
|
|
.card-body p { font-size: 12px; color: #666; font-style: italic; }
|
|
|
|
.welcome-card .card-body { padding: 10px; font-size: 12px; }
|
|
.welcome-card .card-body p.title { font-weight: bold; font-size: 14px; color: #000; font-style: normal; margin-bottom: 4px; }
|
|
|
|
.photos-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 4px;
|
|
padding: 8px;
|
|
}
|
|
.photos-grid-side {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 4px;
|
|
padding: 8px;
|
|
}
|
|
.photo-item {
|
|
aspect-ratio: 16/9;
|
|
background: #ddd;
|
|
overflow: hidden;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
}
|
|
.photo-item img { width: 100%; height: 100%; object-fit: cover; }
|
|
.photo-item .placeholder {
|
|
width: 100%; height: 100%;
|
|
display: flex; align-items: center; justify-content: center;
|
|
color: #999; font-size: 10px; text-align: center;
|
|
background: linear-gradient(135deg, #e8d4ff, #d4b0ff);
|
|
}
|
|
|
|
.empty-note { padding: 10px; font-size: 12px; color: #666; font-style: italic; }
|
|
|
|
.featured-room-card .room-image {
|
|
width: 100%; aspect-ratio: 16/9;
|
|
background: linear-gradient(135deg, #6B21A8, #3b0764);
|
|
overflow: hidden;
|
|
}
|
|
.featured-room-card .room-image img { width: 100%; height: 100%; object-fit: cover; }
|
|
.featured-room-card .room-label { padding: 6px 10px; font-weight: bold; }
|
|
|
|
.section-label {
|
|
font-size: 11px; text-transform: uppercase;
|
|
color: #6B21A8; font-weight: bold;
|
|
letter-spacing: 0.5px; margin-bottom: 2px;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.topbar-main, .topbar-nav { padding-inline: 10%; }
|
|
.announcement-bar { padding-inline: 10%; }
|
|
}
|
|
@media (min-width: 1024px) {
|
|
.topbar-main, .topbar-nav { padding-inline: 15%; }
|
|
.announcement-bar { padding-inline: 15%; }
|
|
}
|
|
@media (max-width: 600px) {
|
|
.two-col { flex-direction: column; }
|
|
.col-side { width: 100%; }
|
|
.photos-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.logo-banner { display: none !important; }
|
|
.logo-small { display: block !important; }
|
|
} |