Add hardcore ride categorisation with bike and ride types

1 files changed, 10 insertions, 0 deletions

diff --git a/web/static/style.css b/web/static/style.css
index 830e50a..bda7188 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -136,6 +136,16 @@ select { border: 1px solid var(--color-input-border); border-radius: .55rem; pad
 .section-heading .eyebrow { margin-bottom: .2rem; }
 .section-heading h2 { margin: 0; font-size: 1.2rem; }
 .section-count { display: grid; place-items: center; min-width: 2rem; height: 2rem; border-radius: 999px; background: var(--color-secondary-surface); color: var(--color-forest); font-weight: 800; }
+.categories-panel { padding: 1rem 1.25rem; }
+.categories-layout { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; }
+.categories-heading { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
+.categories-heading .eyebrow { margin: 0; }
+.categories-heading h2 { margin: 0; font-size: 1.1rem; }
+.category-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: .35rem .65rem; background: var(--color-notice-surface); color: var(--color-notice-text); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
+.category-form { display: flex; align-items: end; gap: .65rem; flex-wrap: wrap; margin-left: auto; }
+.category-form label { min-width: 8.5rem; }
+.category-form select { min-width: 8.5rem; }
+.category-form .button { align-self: end; padding: .55rem .9rem; }
 .official-climbs-panel { padding: 0; border: 0; background: transparent; box-shadow: none; }
 .official-climbs-panel .section-heading { margin-bottom: .75rem; }
 .official-climb-list { display: grid; gap: 0; }