first pass - kryz inspired

2026-06-10 18:34:23 +00:00
parent 3063d01ec5
commit 771e1e166f
53 changed files with 10521 additions and 0 deletions
@@ -0,0 +1,173 @@
+@use '../../styles/variables' as *;
+@use '../../styles/mixins' as *;
+
+.schedule {
+  padding: $spacing-3xl 0;
+  background: var(--color-white);
+}
+
+.schedule-header {
+  text-align: center;
+  margin-bottom: $spacing-2xl;
+
+  .schedule-flower {
+    width: 50px;
+    height: 50px;
+    margin: 0 auto $spacing-md;
+    opacity: 0.5;
+  }
+}
+
+.schedule-list {
+  max-width: 800px;
+  margin: 0 auto $spacing-3xl;
+}
+
+.schedule-day-label {
+  text-align: center;
+  font-family: var(--font-heading);
+  font-size: 1.2rem;
+  color: var(--color-primary);
+  margin-bottom: $spacing-md;
+  font-weight: 600;
+}
+
+.schedule-table {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.schedule-row {
+  display: flex;
+  align-items: stretch;
+  padding: $spacing-md 0;
+  border-bottom: 1px solid var(--color-light);
+  transition: background $transition-fast;
+
+  &:hover {
+    background: var(--color-cream);
+  }
+}
+
+.schedule-time {
+  width: 100px;
+  flex-shrink: 0;
+  font-family: var(--font-mono);
+  font-size: 0.95rem;
+  color: var(--color-accent);
+  font-weight: 600;
+  padding-right: $spacing-md;
+  text-align: right;
+  padding-top: 2px;
+}
+
+.schedule-divider {
+  width: 2px;
+  background: var(--color-accent-muted);
+  margin: 0 $spacing-sm;
+  border-radius: 1px;
+  opacity: 0.4;
+}
+
+.schedule-details {
+  flex: 1;
+  padding: $spacing-xs 0;
+}
+
+.schedule-title {
+  font-size: 1.05rem;
+  color: var(--color-primary);
+  margin-bottom: $spacing-xs;
+}
+
+.schedule-meta {
+  display: flex;
+  gap: $spacing-md;
+  font-size: 0.85rem;
+  color: var(--color-medium);
+
+  .schedule-host {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .schedule-genre {
+    background: var(--color-light);
+    padding: 2px 10px;
+    border-radius: 10px;
+    font-style: italic;
+  }
+}
+
+// Weekend
+.schedule-weekend {
+  margin-top: $spacing-xl;
+}
+
+.weekend-heading {
+  text-align: center;
+  margin-bottom: $spacing-lg;
+
+  .schedule-flower-sm {
+    width: 35px;
+    height: 35px;
+    margin: 0 auto $spacing-sm;
+    opacity: 0.5;
+  }
+
+  h3 {
+    font-size: 1.6rem;
+    color: var(--color-primary);
+  }
+}
+
+.weekend-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: $spacing-lg;
+}
+
+.weekend-card {
+  @include card-style;
+  padding: $spacing-xl;
+  background: var(--color-white);
+
+  .card-day {
+    font-family: var(--font-heading);
+    font-size: 1.4rem;
+    font-weight: 700;
+    color: var(--color-accent);
+    margin-bottom: $spacing-md;
+    padding-bottom: $spacing-sm;
+    border-bottom: 2px solid var(--color-light);
+  }
+
+  .card-programs {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-sm;
+  }
+
+  .card-item {
+    font-size: 0.95rem;
+    color: var(--color-dark);
+    padding: $spacing-sm;
+    border-radius: $radius-sm;
+    transition: background $transition-fast;
+
+    strong {
+      color: var(--color-primary);
+    }
+
+    &:hover {
+      background: var(--color-cream);
+    }
+  }
+}
+
+@media (max-width: #{$bp-md - 1px}) {
+  .schedule-time { width: 80px; font-size: 0.85rem; }
+  .weekend-grid { grid-template-columns: 1fr; }
+}