diff --git a/app/public/assets/css/components/header.css b/app/public/assets/css/components/header.css
index 18207a2..29b6eeb 100644
--- a/app/public/assets/css/components/header.css
+++ b/app/public/assets/css/components/header.css
@@ -6,81 +6,82 @@
/* ── Header bar ─────────────────────────────────────────────────────── */
header {
- vertical-align: center;
- flex-shrink: 0;
- background: linear-gradient(
- 0deg,
- rgba(192, 93, 225, 1) 0%,
- rgba(51, 191, 135, 1) 66%,
- rgba(60, 133, 108, 1) 100%
- );
+ vertical-align: center;
+ flex-shrink: 0;
+ background: linear-gradient(
+ 0deg,
+ rgba(192, 93, 225, 1) 0%,
+ rgba(51, 191, 135, 1) 66%,
+ rgba(60, 133, 108, 1) 100%
+ );
}
/* ── Navigation ────────────────────────────────────────────────────── */
header nav {
- padding: var(--space-s) var(--space-s);
- display: flex;
- align-items: center;
- justify-content: space-between;
- font-size: var(--step-0);
+ padding: var(--space-s) var(--space-s);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: var(--step-0);
}
header nav ul {
- display: flex;
- gap: var(--space-l);
- align-items: center;
- list-style: none;
- margin: 0;
- padding: 0;
+ display: flex;
+ gap: var(--space-l);
+ align-items: center;
+ list-style: none;
+ margin: 0;
+ padding: 0;
}
header nav ul a {
- font-family: var(--font-display);
- letter-spacing: 0.12em;
- text-transform: uppercase;
- color: var(--accent-foreground);
- text-decoration: none;
- padding: var(--space-3xs) var(--space-xs);
- text-shadow:
- 0 0 16px var(--header-shadow-strong),
- 0 0 32px var(--header-shadow-soft);
- transition: opacity 0.15s;
+ font-family: var(--font-display);
+ font-size: var(--step-0)
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ color: var(--accent-foreground);
+ text-decoration: none;
+ padding: var(--space-3xs) var(--space-xs);
+ text-shadow:
+ 0 0 16px var(--header-shadow-strong),
+ 0 0 32px var(--header-shadow-soft);
+ transition: opacity 0.15s;
}
header nav ul a:hover {
- color: var(--accent-primary);
+ color: var(--accent-primary);
}
header nav ul a[aria-current="page"] {
- color: var(--accent-primary);
- border-radius: 0;
- border-bottom: 2px solid currentColor;
- padding-bottom: 1px;
+ color: var(--accent-primary);
+ border-radius: 0;
+ border-bottom: 2px solid currentColor;
+ padding-bottom: 1px;
}
/* ── Logo ───────────────────────────────────────────────────────────── */
.nav-logo {
- text-decoration: none;
+ text-decoration: none;
}
.nav-left-links,
.nav-right-links {
- display: flex;
- gap: var(--space-l);
- align-items: center;
- list-style: none;
- margin: 0;
- padding: 0;
+ display: flex;
+ gap: var(--space-l);
+ align-items: center;
+ list-style: none;
+ margin: 0;
+ padding: 0;
}
.nav-top-row {
- display: contents;
+ display: contents;
}
.nav-mobile-links {
- display: none;
+ display: none;
}
/* ── Hamburger menu (pure CSS, checkbox trick) ──────────────────────── */
@@ -94,132 +95,119 @@ header nav ul a[aria-current="page"] {
ul.nav-mobile-links ← full dropdown (hidden by default) */
.menu-btn {
- position: absolute;
- top: -9999px;
- left: -9999px;
+ position: absolute;
+ top: -9999px;
+ left: -9999px;
}
.menu-icon {
- display: none;
- cursor: pointer;
- padding: var(--space-2xs) var(--space-s);
- align-items: center;
- justify-content: center;
+ display: none;
+ cursor: pointer;
+ padding: var(--space-2xs) var(--space-s);
+ align-items: center;
+ justify-content: center;
}
/* Middle bar of the burger icon */
.navicon {
- background: var(--accent-foreground);
- display: block;
- height: 2px;
- width: 24px;
- position: relative;
- transition: all 0.3s ease-out;
+ background: var(--accent-foreground);
+ display: block;
+ height: 2px;
+ width: 24px;
+ position: relative;
+ transition: all 0.3s ease-out;
}
.navicon::before,
.navicon::after {
- content: "";
- background: var(--accent-foreground);
- display: block;
- height: 2px;
- width: 100%;
- position: absolute;
- transition: all 0.3s ease-out;
+ content: "";
+ background: var(--accent-foreground);
+ display: block;
+ height: 2px;
+ width: 100%;
+ position: absolute;
+ transition: all 0.3s ease-out;
}
.navicon::before {
- top: -7px;
+ top: -7px;
}
.navicon::after {
- bottom: -7px;
+ bottom: -7px;
}
/* ── Mobile (≤ 640px) ───────────────────────────────────────────────── */
@media screen and (max-width: 640px) {
- header nav[aria-label="Navigation principale"] {
- display: flex;
- flex-direction: column;
- align-items: stretch;
- padding: 0;
- }
+ header nav[aria-label="Navigation principale"] {
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ padding: 0;
+ }
- header nav[aria-label="Navigation principale"] .nav-top-row {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: var(--space-s);
- }
+ header nav[aria-label="Navigation principale"] .nav-top-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: var(--space-s);
+ }
- header nav[aria-label="Navigation principale"] .nav-right-links {
- display: none;
- }
+ header nav[aria-label="Navigation principale"] .nav-right-links {
+ display: none;
+ }
- header nav[aria-label="Navigation principale"] .nav-left-links {
- display: flex;
- gap: 0;
- }
+ header nav[aria-label="Navigation principale"] .nav-left-links {
+ display: flex;
+ gap: 0;
+ }
- header
- nav[aria-label="Navigation principale"]
- .nav-left-links
- li:not(:first-child) {
- display: none;
- }
+ header nav[aria-label="Navigation principale"] .nav-left-links li:not(:first-child) {
+ display: none;
+ }
- .menu-icon {
- display: flex;
- }
+ .menu-icon {
+ display: flex;
+ }
- header nav[aria-label="Navigation principale"] .nav-mobile-links {
- display: block;
- list-style: none;
- margin: 0;
- padding: 0;
- max-height: 0;
- overflow: hidden;
- transition: max-height 0.2s ease-out;
- }
+ header nav[aria-label="Navigation principale"] .nav-mobile-links {
+ display: block;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 0.2s ease-out;
+ }
- .menu-btn:checked
- ~ nav[aria-label="Navigation principale"]
- .nav-mobile-links {
- max-height: 300px;
- }
+ .menu-btn:checked ~ nav[aria-label="Navigation principale"] .nav-mobile-links {
+ max-height: 300px;
+ }
- header nav[aria-label="Navigation principale"] .nav-mobile-links li {
- border-top: 1px solid var(--header-nav-active-border);
- text-align: left;
- }
+ header nav[aria-label="Navigation principale"] .nav-mobile-links li {
+ border-top: 1px solid var(--header-nav-active-border);
+ text-align: left;
+ }
- header nav[aria-label="Navigation principale"] .nav-mobile-links li a {
- display: block;
- width: 100%;
- padding: var(--space-s) var(--space-s);
- text-align: left;
- }
+ header nav[aria-label="Navigation principale"] .nav-mobile-links li a {
+ display: block;
+ width: 100%;
+ padding: var(--space-s) var(--space-s);
+ text-align: left;
+ }
- /* Animate burger → X */
- .menu-btn:checked ~ nav[aria-label="Navigation principale"]
- .menu-icon
- .navicon {
- background: transparent;
- }
+ /* Animate burger → X */
+ .menu-btn:checked ~ nav[aria-label="Navigation principale"] .menu-icon .navicon {
+ background: transparent;
+ }
- .menu-btn:checked
- ~ nav[aria-label="Navigation principale"]
- .menu-icon
- .navicon::before {
- transform: rotate(-45deg);
- top: 0;
- }
+ .menu-btn:checked ~ nav[aria-label="Navigation principale"] .menu-icon .navicon::before {
+ transform: rotate(-45deg);
+ top: 0;
+ }
- .menu-btn:checked
- ~ nav[aria-label="Navigation principale"]
- .menu-icon
- .navicon::after {
- transform: rotate(45deg);
- bottom: 0;
- }
+ .menu-btn:checked ~ nav[aria-label="Navigation principale"] .menu-icon .navicon::after {
+ transform: rotate(45deg);
+ bottom: 0;
+ }
}
diff --git a/app/public/assets/css/repertoire.css b/app/public/assets/css/repertoire.css
index f02fb08..82a6e48 100644
--- a/app/public/assets/css/repertoire.css
+++ b/app/public/assets/css/repertoire.css
@@ -4,852 +4,860 @@
============================================================ */
.search-main {
- flex: 1;
- min-height: 0;
- overflow: hidden;
- padding: 0;
- display: flex;
- flex-direction: column;
+ flex: 1;
+ min-height: 0;
+ overflow: hidden;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
}
/* ── Scrollable results area with sticky pagination ──────────────── */
#search-results {
- flex: 1;
- min-height: 0;
- overflow-y: auto;
- display: flex;
- flex-direction: column;
+ flex: 1;
+ min-height: 0;
+ overflow-y: auto;
+ display: flex;
+ flex-direction: column;
}
.search-results-header {
- flex-shrink: 0;
+ flex-shrink: 0;
}
.search-results-range--compact {
- display: none;
+ display: none;
}
.search-empty {
- flex: 1;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: var(--space-xl) var(--space-m);
- color: var(--text-secondary);
- font-size: var(--step-0);
- text-align: center;
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: var(--space-xl) var(--space-m);
+ color: var(--text-secondary);
+ font-size: var(--step-0);
+ text-align: center;
}
/* ---- 6-column index layout ---- */
/* Equal-width columns except Années (years) = narrower */
.repertoire-index {
- display: grid;
- grid-template-columns:
- minmax(3rem, 0.45fr)
- minmax(16rem, 1.2fr)
- minmax(9rem, 1fr)
- minmax(7rem, 1fr)
- minmax(8rem, 1fr)
- minmax(3rem, 0.45fr);
- grid-template-rows: auto minmax(0, 1fr);
- gap: var(--space-s);
- justify-content: space-between;
- padding: 0;
- margin: 0 var(--space-s);
- height: 100%;
+ display: grid;
+ grid-template-columns:
+ minmax(3rem, 0.45fr)
+ minmax(16rem, 1.2fr)
+ minmax(9rem, 1fr)
+ minmax(7rem, 1fr)
+ minmax(8rem, 1fr)
+ minmax(3rem, 0.45fr);
+ grid-template-rows: auto minmax(0, 1fr);
+ gap: var(--space-s);
+ justify-content: space-between;
+ padding: 0;
+ margin: 0 var(--space-s);
+ height: 100%;
}
/* ---- Accordion: visible only on mobile (≤ 640px) ---- */
/* Desktop: heading-text visible, toggle hidden */
.rep-accordion__heading-text {
- /* visible — inherits the h2 styling above */
+ /* visible — inherits the h2 styling above */
}
.rep-accordion__toggle,
.rep-accordion__chevron,
.rep-accordion__badge {
- display: none;
+ display: none;
}
.rep-accordion__panel {
- display: contents;
+ display: contents;
}
/* Each section becomes transparent to the grid so h2+ul sit in the 2-row layout */
.repertoire-col {
- display: contents;
+ display: contents;
}
.repertoire-col > h2 {
- grid-row: 1;
- font-family: var(--font-display);
- font-size: var(--step--1);
- letter-spacing: 0.08em;
- text-transform: uppercase;
- color: var(--text-primary);
- font-weight: 398;
- line-height: 1.3;
- margin: 0;
- padding: var(--space-xs) 0 var(--space-3xs) 0;
- border-bottom: 1px solid var(--text-primary);
- align-self: end;
- hyphens: auto;
- word-break: normal;
- overflow-wrap: break-word;
+ grid-row: 1;
+ font-family: var(--font-display);
+ font-size: var(--step--1);
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: var(--text-primary);
+ font-weight: 398;
+ line-height: 1.3;
+ margin: 0;
+ padding: var(--space-xs) 0 var(--space-3xs) 0;
+ border-bottom: 1px solid var(--text-primary);
+ align-self: end;
+ hyphens: auto;
+ word-break: normal;
+ overflow-wrap: break-word;
}
.repertoire-col .rep-accordion__panel > ul {
- grid-row: 2;
- overflow-y: auto;
- overflow-x: hidden;
- min-height: 0;
- padding-top: var(--space-2xs);
- padding-bottom: var(--space-l);
- padding-left: 0;
- padding-right: 0;
+ grid-row: 2;
+ overflow-y: auto;
+ overflow-x: hidden;
+ min-height: 0;
+ padding-top: var(--space-2xs);
+ padding-bottom: var(--space-l);
+ padding-left: 0;
+ padding-right: 0;
}
/* Strip list chrome inside repertoire columns */
.repertoire-col ul {
- list-style: none;
- margin: 0;
- padding: 0;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.repertoire-col a,
+.repertoire-col button {
+ line-height: 22px;
+}
+.repertoire-col[data-col="kw"] button {
+ font-size: calc(var(--step--1)*1.15);
}
/* ---- Responsive (≤ 1025px): accordion mode, students as results ---- */
@media (max-width: 1025px) {
- .repertoire-index {
- display: flex;
- flex-direction: column;
- min-height: 0;
- height: 100%;
- overflow-y: hidden;
- gap: 0;
- margin: 0;
- }
+ .repertoire-index {
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
+ height: 100%;
+ overflow-y: hidden;
+ gap: 0;
+ margin: 0;
+ }
- /* Each column becomes a block-level accordion section */
- .repertoire-col {
- display: block;
- border-bottom: 1px solid var(--text-primary);
- }
+ /* Each column becomes a block-level accordion section */
+ .repertoire-col {
+ display: block;
+ border-bottom: 1px solid var(--text-primary);
+ }
- .repertoire-col[data-col="students"] {
- border-bottom: none;
- }
+ .repertoire-col[data-col="students"] {
+ border-bottom: none;
+ }
- /* Flex order: years/ap/or/fi first, then keywords, students last */
- .repertoire-col[data-col="years"] {
- order: 0;
- }
- .repertoire-col[data-col="ap"] {
- order: 1;
- }
- .repertoire-col[data-col="or"] {
- order: 2;
- }
- .repertoire-col[data-col="fi"] {
- order: 3;
- }
- .repertoire-col[data-col="kw"] {
- order: 4;
- }
- .repertoire-col[data-col="students"] {
- order: 5;
- }
+ /* Flex order: years/ap/or/fi first, then keywords, students last */
+ .repertoire-col[data-col="years"] {
+ order: 0;
+ }
+ .repertoire-col[data-col="ap"] {
+ order: 1;
+ }
+ .repertoire-col[data-col="or"] {
+ order: 2;
+ }
+ .repertoire-col[data-col="fi"] {
+ order: 3;
+ }
+ .repertoire-col[data-col="kw"] {
+ order: 4;
+ }
+ .repertoire-col[data-col="students"] {
+ order: 5;
+ }
- /* Students column: not an accordion — open results list below filters */
- .repertoire-col[data-col="students"] {
- border-bottom: none;
- border-top: none;
- margin-top: 0;
- padding-top: 0;
- flex: 1;
- min-height: 0;
- display: flex;
- flex-direction: column;
- }
+ /* Students column: not an accordion — open results list below filters */
+ .repertoire-col[data-col="students"] {
+ border-bottom: none;
+ border-top: none;
+ margin-top: 0;
+ padding-top: 0;
+ flex: 1;
+ min-height: 0;
+ display: flex;
+ flex-direction: column;
+ }
- .repertoire-col[data-col="students"] .rep-accordion__toggle {
- display: none;
- }
+ .repertoire-col[data-col="students"] .rep-accordion__toggle {
+ display: none;
+ }
- .repertoire-col[data-col="students"] .rep-accordion__heading-text {
- display: none;
- }
+ .repertoire-col[data-col="students"] .rep-accordion__heading-text {
+ display: none;
+ }
- .repertoire-col[data-col="students"] .rep-accordion__panel {
- display: block;
- max-height: none;
- overflow-y: auto;
- flex: 1;
- }
+ .repertoire-col[data-col="students"] .rep-accordion__panel {
+ display: block;
+ max-height: none;
+ overflow-y: auto;
+ flex: 1;
+ }
- /* Hide the plain h2 — the toggle button replaces it */
- .repertoire-col > h2 {
- display: block;
- grid-row: unset;
- align-self: unset;
- border-bottom: none;
- padding: 0;
- margin: 0;
- font-size: inherit;
- line-height: inherit;
- }
+ /* Hide the plain h2 — the toggle button replaces it */
+ .repertoire-col > h2 {
+ display: block;
+ grid-row: unset;
+ align-self: unset;
+ border-bottom: none;
+ padding: 0;
+ margin: 0;
+ font-size: inherit;
+ line-height: inherit;
+ }
- /* Hide heading text on mobile (toggle button replaces it) */
- .rep-accordion__heading-text {
- display: none;
- }
+ /* Hide heading text on mobile (toggle button replaces it) */
+ .rep-accordion__heading-text {
+ display: none;
+ }
- /* Accordion toggle: full-width touch target */
- .rep-accordion__toggle {
- display: flex;
- align-items: center;
- justify-content: space-between;
- width: 100%;
- min-height: 48px;
- padding: var(--space-xs) var(--space-s);
- background: none;
- border: none;
- font-family: var(--font-display);
- font-size: var(--step--2);
- letter-spacing: 0.08em;
- text-transform: uppercase;
- color: var(--text-primary);
- font-weight: 398;
- text-align: left;
- cursor: pointer;
- }
+ /* Accordion toggle: full-width touch target */
+ .rep-accordion__toggle {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ min-height: 48px;
+ padding: var(--space-xs) var(--space-s);
+ background: none;
+ border: none;
+ font-family: var(--font-display);
+ font-size: var(--step--2);
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: var(--text-primary);
+ font-weight: 398;
+ text-align: left;
+ cursor: pointer;
+ }
- .rep-accordion__toggle:active {
- background: var(--bg-secondary);
- }
+ .rep-accordion__toggle:active {
+ background: var(--bg-secondary);
+ }
- /* Badge: active filter count */
- .rep-accordion__badge {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- min-width: 1.4em;
- height: 1.4em;
- padding: 0 0.35em;
- margin-left: var(--space-2xs);
- background: var(--accent-primary);
- color: var(--accent-foreground);
- border-radius: 99px;
- font-family: var(--font-body);
- font-size: var(--step--2);
- font-weight: 500;
- letter-spacing: 0;
- text-transform: none;
- }
+ /* Badge: active filter count */
+ .rep-accordion__badge {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 1.4em;
+ height: 1.4em;
+ padding: 0 0.35em;
+ margin-left: var(--space-2xs);
+ background: var(--accent-primary);
+ color: var(--accent-foreground);
+ border-radius: 99px;
+ font-family: var(--font-body);
+ font-size: var(--step--2);
+ font-weight: 500;
+ letter-spacing: 0;
+ text-transform: none;
+ }
- /* Chevron: CSS triangle */
- .rep-accordion__chevron {
- display: inline-block;
- width: 10px;
- height: 10px;
- flex-shrink: 0;
- margin-left: var(--space-2xs);
- border-right: 2px solid var(--text-secondary);
- border-bottom: 2px solid var(--text-secondary);
- transform: rotate(45deg);
- transition: transform 0.2s;
- }
+ /* Chevron: CSS triangle */
+ .rep-accordion__chevron {
+ display: inline-block;
+ width: 10px;
+ height: 10px;
+ flex-shrink: 0;
+ margin-left: var(--space-2xs);
+ border-right: 2px solid var(--text-secondary);
+ border-bottom: 2px solid var(--text-secondary);
+ transform: rotate(45deg);
+ transition: transform 0.2s;
+ }
- .rep-accordion__toggle[aria-expanded="true"] .rep-accordion__chevron {
- transform: rotate(-135deg);
- }
+ .rep-accordion__toggle[aria-expanded="true"] .rep-accordion__chevron {
+ transform: rotate(-135deg);
+ }
- /* Panel: collapsed by default */
- .rep-accordion__panel {
- display: block;
- max-height: 0;
- overflow: hidden;
- transition: max-height 0.3s ease;
- }
+ /* Panel: collapsed by default */
+ .rep-accordion__panel {
+ display: block;
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 0.3s ease;
+ }
- .rep-accordion__panel.is-open {
- max-height: 60vh;
- overflow-y: auto;
- }
+ .rep-accordion__panel.is-open {
+ max-height: 60vh;
+ overflow-y: auto;
+ }
- /* Reposition the
inside the panel */
- .repertoire-col ul {
- grid-row: unset;
- overflow-y: visible;
- padding: 0;
- padding-left: 1ch;
- }
+ /* Reposition the inside the panel */
+ .repertoire-col ul {
+ grid-row: unset;
+ overflow-y: visible;
+ padding: 0;
+ padding-left: 1ch;
+ }
- /* Larger touch targets for filter entries */
- .rep-entry {
- padding: var(--space-2xs) 0;
- min-height: 44px;
- display: flex;
- align-items: center;
- }
+ /* Larger touch targets for filter entries */
+ .rep-entry {
+ padding: var(--space-2xs) 0;
+ min-height: 44px;
+ display: flex;
+ align-items: center;
+ }
- /* Years column: keep big numbers but smaller on mobile */
- .repertoire-col[data-col="years"] .rep-entry {
- font-size: var(--step-2);
- min-height: 48px;
- }
+ /* Years column: keep big numbers but smaller on mobile */
+ .repertoire-col[data-col="years"] .rep-entry {
+ font-size: var(--step-2);
+ min-height: 48px;
+ }
- /* Column heading font-size is handled by the toggle button */
- .repertoire-col > h2 {
- font-size: inherit;
- line-height: inherit;
- }
+ /* Column heading font-size is handled by the toggle button */
+ .repertoire-col > h2 {
+ font-size: inherit;
+ line-height: inherit;
+ }
}
/* ---- rep-entry: shared base (button + link variants) ---- */
.rep-entry {
- display: block;
- width: 100%;
- text-align: left;
- background: none;
- border: none;
- padding: var(--space-3xs) 0;
- margin: 0;
- font-family: var(--font-body);
- font-size: var(--step-0);
- font-weight: 398;
- color: var(--text-primary);
- line-height: 1.4;
- cursor: pointer;
- text-decoration: none;
- transition:
- color 0.15s,
- opacity 0.15s;
+ display: block;
+ width: 100%;
+ text-align: left;
+ background: none;
+ border: none;
+ padding: var(--space-3xs) 0;
+ margin: 0;
+ font-family: var(--font-body);
+ font-size: var(--step-0);
+ font-weight: 398;
+ color: var(--text-primary);
+ line-height: 1.4;
+ cursor: pointer;
+ text-decoration: none;
+ transition:
+ color 0.15s,
+ opacity 0.15s;
}
.rep-entry:hover {
- color: var(--accent-primary);
+ color: var(--accent-primary);
}
/* ── Swap transition ────────────────────────────────────────────────── */
.repertoire-index.htmx-swapping {
- opacity: 0.5;
- transition: opacity 0.1s ease-out;
+ opacity: 0.5;
+ transition: opacity 0.1s ease-out;
}
.repertoire-index {
- transition: opacity 0.15s ease-in;
+ transition: opacity 0.15s ease-in;
}
/* Link variant (students col) — no underline by default */
.rep-entry--link {
- text-decoration: none;
+ text-decoration: none;
}
/* Selected: accent color */
.rep-entry--selected {
- color: var(--accent-primary);
+ color: var(--accent-primary);
}
/* Faded/disabled: muted, not interactive */
.rep-entry--faded {
- opacity: 0.3;
- cursor: not-allowed;
- pointer-events: none;
+ opacity: 0.3;
+ cursor: not-allowed;
+ pointer-events: none;
}
/* Years column — big numbers, semi-bold (BBBDMSans Medium weight) */
.repertoire-col[data-col="years"] .rep-entry {
- font-size: var(--step-3);
- font-weight: 300;
- line-height: 1.1;
- letter-spacing: -0.02em;
- padding: var(--space-3xs) 0;
+ font-size: var(--step-3);
+ font-weight: 300;
+ line-height: 1.1;
+ letter-spacing: -0.02em;
+ padding: var(--space-3xs) 0;
}
/* Empty state in students column */
.rep-empty {
- color: var(--text-tertiary);
- font-size: var(--step--1);
- padding: var(--space-3xs) 0;
+ color: var(--text-tertiary);
+ font-size: var(--step--1);
+ padding: var(--space-3xs) 0;
}
/* ---- HTMX loading indicator ---- */
.rep-indicator {
- display: block;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- height: 2px;
- background: var(--accent-primary);
- opacity: 0;
- transition: opacity 0.1s;
- z-index: 100;
- pointer-events: none;
+ display: block;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 2px;
+ background: var(--accent-primary);
+ opacity: 0;
+ transition: opacity 0.1s;
+ z-index: 100;
+ pointer-events: none;
}
.rep-indicator.htmx-request {
- opacity: 1;
- animation: rep-progress 1.2s ease-in-out infinite;
+ opacity: 1;
+ animation: rep-progress 1.2s ease-in-out infinite;
}
@keyframes rep-progress {
- 0% {
- transform: scaleX(0);
- transform-origin: left;
- }
- 50% {
- transform: scaleX(0.7);
- transform-origin: left;
- }
- 100% {
- transform: scaleX(1);
- transform-origin: left;
- }
+ 0% {
+ transform: scaleX(0);
+ transform-origin: left;
+ }
+ 50% {
+ transform: scaleX(0.7);
+ transform-origin: left;
+ }
+ 100% {
+ transform: scaleX(1);
+ transform-origin: left;
+ }
}
/* ---- Search results view (grid) ---- */
.search-results-header {
- display: block;
- font-size: var(--step--1);
- color: var(--text-secondary);
- margin: var(--space-s) var(--space-m) var(--space-2xs);
+ display: block;
+ font-size: var(--step--1);
+ color: var(--text-secondary);
+ margin: var(--space-s) var(--space-m) var(--space-2xs);
}
.results-grid {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
- gap: var(--space-m);
- list-style: none;
- margin: 0;
- padding: var(--space-2xs) var(--space-m) var(--space-m);
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ gap: var(--space-m);
+ list-style: none;
+ margin: 0;
+ padding: var(--space-2xs) var(--space-m) var(--space-m);
}
.result-card {
- text-decoration: none;
- color: inherit;
- display: flex;
- flex-direction: column;
- gap: var(--space-3xs);
+ text-decoration: none;
+ color: inherit;
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-3xs);
}
.result-card__cover {
- margin: 0;
+ margin: 0;
}
.result-card__cover img {
- width: 100%;
- aspect-ratio: 4 / 3;
- object-fit: cover;
- display: block;
- border-radius: 7px 7px 0 0;
+ width: 100%;
+ aspect-ratio: 4 / 3;
+ object-fit: cover;
+ display: block;
+ border-radius: 7px 7px 0 0;
}
.result-card__gradient {
- width: 100%;
- aspect-ratio: 4 / 3;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: var(--space-s);
- text-align: center;
- box-sizing: border-box;
- border-radius: 7px 7px 0 0;
- background: linear-gradient(
- 180deg,
- rgba(60, 133, 108, 1) 0%,
- rgba(51, 191, 135, 1) 25%,
- rgba(192, 93, 225, 1) 75%,
- rgba(149, 87, 181, 1) 100%
- );
+ width: 100%;
+ aspect-ratio: 4 / 3;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: var(--space-s);
+ text-align: center;
+ box-sizing: border-box;
+ border-radius: 7px 7px 0 0;
+ background: linear-gradient(
+ 180deg,
+ rgba(60, 133, 108, 1) 0%,
+ rgba(51, 191, 135, 1) 25%,
+ rgba(192, 93, 225, 1) 75%,
+ rgba(149, 87, 181, 1) 100%
+ );
}
.result-card__gradient-author {
- color: var(--accent-foreground);
- font-size: var(--step--2);
- opacity: 0.85;
- margin-bottom: 0.25rem;
- display: block;
+ color: var(--accent-foreground);
+ font-size: var(--step--2);
+ opacity: 0.85;
+ margin-bottom: 0.25rem;
+ display: block;
}
.result-card__gradient-title {
- color: var(--accent-foreground);
- font-size: var(--step--1);
- font-weight: 600;
- display: -webkit-box;
- -webkit-line-clamp: 3;
- -webkit-box-orient: vertical;
- overflow: hidden;
+ color: var(--accent-foreground);
+ font-size: var(--step--1);
+ font-weight: 600;
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
}
.result-card__authors {
- font-size: var(--step--1);
- font-weight: 500;
- color: var(--text-primary);
+ font-size: var(--step--1);
+ font-weight: 500;
+ color: var(--text-primary);
}
.result-card__title {
- font-size: var(--step--1);
- color: var(--text-secondary);
- line-height: 1.35;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- overflow: hidden;
+ font-size: var(--step--1);
+ color: var(--text-secondary);
+ line-height: 1.35;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
}
.result-card__meta {
- font-size: var(--step--2);
- color: var(--accent-primary);
- font-style: normal;
+ font-size: var(--step--2);
+ color: var(--accent-primary);
+ font-style: normal;
}
/* Search controls bar */
.search-controls {
- display: flex;
- align-items: center;
- gap: var(--space-s);
- padding: var(--space-xs) var(--space-m);
- border-bottom: 1px solid var(--border-secondary);
- flex-shrink: 0;
- flex-wrap: wrap;
+ display: flex;
+ align-items: center;
+ gap: var(--space-s);
+ padding: var(--space-xs) var(--space-m);
+ border-bottom: 1px solid var(--border-secondary);
+ flex-shrink: 0;
+ flex-wrap: wrap;
}
.search-filter-label {
- display: flex;
- align-items: center;
- gap: var(--space-3xs);
- font-size: var(--step--2);
- color: var(--text-secondary);
- text-transform: uppercase;
- letter-spacing: 0.06em;
- white-space: nowrap;
- cursor: default;
+ display: flex;
+ align-items: center;
+ gap: var(--space-3xs);
+ font-size: var(--step--2);
+ color: var(--text-secondary);
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+ white-space: nowrap;
+ cursor: default;
}
.search-filter-select {
- font-size: var(--step--1);
- padding: var(--space-3xs) var(--space-2xs);
- padding-right: 1.75rem;
+ font-size: var(--step--1);
+ padding: var(--space-3xs) var(--space-2xs);
+ padding-right: 1.75rem;
}
.search-filter-select:focus {
- border: 2px solid var(--accent-primary);
+ border: 2px solid var(--accent-primary);
}
.search-apply-btn,
.search-reset-link {
- /* btn--sm classes handle styling; space kept for potential overrides */
+ /* btn--sm classes handle styling; space kept for potential overrides */
}
/* Search results pagination */
.pagination-wrap {
- display: flex;
- justify-content: center;
- align-items: center;
- gap: var(--space-2xs);
- padding: var(--space-s) 0;
- position: sticky;
- bottom: 0;
- background: var(--bg-primary);
- z-index: 10;
- flex-shrink: 0;
- margin-top: auto;
- border-top: 1px solid var(--border-secondary);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: var(--space-2xs);
+ padding: var(--space-s) 0;
+ position: sticky;
+ bottom: 0;
+ background: var(--bg-primary);
+ z-index: 10;
+ flex-shrink: 0;
+ margin-top: auto;
+ border-top: 1px solid var(--border-secondary);
}
.pagination-wrap ul {
- display: flex;
- align-items: center;
- gap: var(--space-2xs);
- list-style: none;
- margin: 0;
- padding: 0;
+ display: flex;
+ align-items: center;
+ gap: var(--space-2xs);
+ list-style: none;
+ margin: 0;
+ padding: 0;
}
.pagination-btn {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- min-width: 2.75rem;
- min-height: 2.75rem;
- padding: 0 var(--space-2xs);
- border: 1px solid var(--border-secondary);
- border-radius: var(--radius);
- color: var(--text-primary);
- font-size: var(--step--1);
- text-decoration: none;
- font-weight: 400;
- transition: all 0.15s;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 2.75rem;
+ min-height: 2.75rem;
+ padding: 0 var(--space-2xs);
+ border: 1px solid var(--border-secondary);
+ border-radius: var(--radius);
+ color: var(--text-primary);
+ font-size: var(--step--1);
+ text-decoration: none;
+ font-weight: 400;
+ transition: all 0.15s;
}
.pagination-btn:hover:not(.disabled) {
- border-color: var(--accent-primary);
- color: var(--accent-primary);
+ border-color: var(--accent-primary);
+ color: var(--accent-primary);
}
.pagination-btn.disabled {
- opacity: 0.3;
- cursor: not-allowed;
- pointer-events: none;
+ opacity: 0.3;
+ cursor: not-allowed;
+ pointer-events: none;
}
.pagination-info {
- font-size: var(--step--1);
- color: var(--text-secondary);
- padding: 0 var(--space-2xs);
+ font-size: var(--step--1);
+ color: var(--text-secondary);
+ padding: 0 var(--space-2xs);
}
/* Error message */
.search-error {
- background: var(--search-error-bg);
- border-left: 3px solid var(--search-error-border);
- color: var(--search-error-color);
- padding: var(--space-2xs) var(--space-s);
- font-size: var(--step--1);
- margin: var(--space-2xs) var(--space-m);
- flex-shrink: 0;
+ background: var(--search-error-bg);
+ border-left: 3px solid var(--search-error-border);
+ color: var(--search-error-color);
+ padding: var(--space-2xs) var(--space-s);
+ font-size: var(--step--1);
+ margin: var(--space-2xs) var(--space-m);
+ flex-shrink: 0;
}
/* ---- Student popover ---- */
.student-popover {
- position: absolute;
- z-index: 200;
- width: 300px;
- background: var(--bg-primary, #fff);
- border: 1px solid var(--border-primary, #ddd);
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.13);
- border-radius: var(--radius);
- overflow: hidden;
- pointer-events: auto;
- max-height: 80vh;
- overflow-y: auto;
+ position: absolute;
+ z-index: 200;
+ width: 300px;
+ background: var(--bg-primary, #fff);
+ border: 1px solid var(--border-primary, #ddd);
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.13);
+ border-radius: var(--radius);
+ overflow: hidden;
+ pointer-events: auto;
+ max-height: 80vh;
+ overflow-y: auto;
}
.student-popover[hidden] {
- display: none;
+ display: none;
}
/* ---- Student card (inside popover) ---- */
.student-card {
- display: block;
- text-decoration: none;
- color: inherit;
- transition: background 0.12s;
- border-bottom: 1px solid var(--border-primary, #eee);
+ display: block;
+ text-decoration: none;
+ color: inherit;
+ transition: background 0.12s;
+ border-bottom: 1px solid var(--border-primary, #eee);
}
.student-card:last-child {
- border-bottom: none;
+ border-bottom: none;
}
.student-card:hover {
- background: var(--bg-secondary, #f5f5f5);
+ background: var(--bg-secondary, #f5f5f5);
}
.student-card__banner {
- width: 100%;
- height: 120px;
- background-size: cover;
- background-position: center;
+ width: 100%;
+ height: 120px;
+ background-size: cover;
+ background-position: center;
}
.student-card__banner--gradient {
- background: linear-gradient(
- 180deg,
- rgba(60, 133, 108, 1) 0%,
- rgba(51, 191, 135, 1) 25%,
- rgba(192, 93, 225, 1) 75%,
- rgba(149, 87, 181, 1) 100%
- );
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: var(--space-s);
- text-align: center;
- box-sizing: border-box;
+ background: linear-gradient(
+ 180deg,
+ rgba(60, 133, 108, 1) 0%,
+ rgba(51, 191, 135, 1) 25%,
+ rgba(192, 93, 225, 1) 75%,
+ rgba(149, 87, 181, 1) 100%
+ );
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: var(--space-s);
+ text-align: center;
+ box-sizing: border-box;
}
.student-card__gradient-author {
- color: var(--accent-foreground);
- font-size: var(--step--2);
- opacity: 0.85;
- margin-bottom: 0.25rem;
- display: block;
+ color: var(--accent-foreground);
+ font-size: var(--step--2);
+ opacity: 0.85;
+ margin-bottom: 0.25rem;
+ display: block;
}
.student-card__gradient-title {
- color: var(--accent-foreground);
- font-size: var(--step--1);
- font-weight: 600;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- overflow: hidden;
+ color: var(--accent-foreground);
+ font-size: var(--step--1);
+ font-weight: 600;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
}
.student-card__body {
- padding: var(--space-xs) var(--space-s) var(--space-s);
+ padding: var(--space-xs) var(--space-s) var(--space-s);
}
.student-card__meta {
- margin: 0 0 var(--space-3xs);
- font-size: var(--step--2);
- color: var(--text-secondary, #888);
- letter-spacing: 0.03em;
+ margin: 0 0 var(--space-3xs);
+ font-size: var(--step--2);
+ color: var(--text-secondary, #888);
+ letter-spacing: 0.03em;
}
.student-card__title {
- margin: 0 0 var(--space-3xs);
- font-size: var(--step--1);
- font-weight: 600;
- line-height: 1.3;
- color: var(--text-primary);
+ margin: 0 0 var(--space-3xs);
+ font-size: var(--step--1);
+ font-weight: 600;
+ line-height: 1.3;
+ color: var(--text-primary);
}
.student-card__subtitle {
- margin: 0 0 var(--space-3xs);
- font-size: var(--step--2);
- color: var(--text-secondary, #888);
- font-style: italic;
+ margin: 0 0 var(--space-3xs);
+ font-size: var(--step--2);
+ color: var(--text-secondary, #888);
+ font-style: italic;
}
.student-card__synopsis {
- margin: var(--space-3xs) 0 0;
- font-size: var(--step--2);
- color: var(--text-secondary, #888);
- line-height: 1.5;
+ margin: var(--space-3xs) 0 0;
+ font-size: var(--step--2);
+ color: var(--text-secondary, #888);
+ line-height: 1.5;
}
/* ── Collapsible filter controls ─────────────────────────────────── */
.search-filters-toggle {
- flex-shrink: 0;
- border-bottom: 1px solid var(--border-secondary);
+ flex-shrink: 0;
+ border-bottom: 1px solid var(--border-secondary);
}
.search-filters-summary {
- display: none; /* hidden on desktop */
- align-items: center;
- gap: var(--space-2xs);
- padding: var(--space-xs) var(--space-m);
- font-size: var(--step--2);
- text-transform: uppercase;
- letter-spacing: 0.06em;
- color: var(--text-secondary);
- cursor: pointer;
- list-style: none;
- user-select: none;
- min-height: 44px;
+ display: none; /* hidden on desktop */
+ align-items: center;
+ gap: var(--space-2xs);
+ padding: var(--space-xs) var(--space-m);
+ font-size: var(--step--2);
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+ color: var(--text-secondary);
+ cursor: pointer;
+ list-style: none;
+ user-select: none;
+ min-height: 44px;
}
.search-filters-summary::-webkit-details-marker {
- display: none;
+ display: none;
}
.search-filters-summary::after {
- content: "";
- display: inline-block;
- width: 8px;
- height: 8px;
- margin-left: auto;
- border-right: 2px solid var(--text-secondary);
- border-bottom: 2px solid var(--text-secondary);
- transform: rotate(45deg);
- transition: transform 0.2s;
+ content: "";
+ display: inline-block;
+ width: 8px;
+ height: 8px;
+ margin-left: auto;
+ border-right: 2px solid var(--text-secondary);
+ border-bottom: 2px solid var(--text-secondary);
+ transform: rotate(45deg);
+ transition: transform 0.2s;
}
.search-filters-toggle[open] .search-filters-summary::after {
- transform: rotate(-135deg);
+ transform: rotate(-135deg);
}
.search-filters-badge {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- min-width: 1.4em;
- height: 1.4em;
- padding: 0 0.35em;
- background: var(--accent-primary);
- color: var(--accent-foreground);
- border-radius: 99px;
- font-size: 0.85em;
- font-weight: 500;
- letter-spacing: 0;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 1.4em;
+ height: 1.4em;
+ padding: 0 0.35em;
+ background: var(--accent-primary);
+ color: var(--accent-foreground);
+ border-radius: 99px;
+ font-size: 0.85em;
+ font-weight: 500;
+ letter-spacing: 0;
}
/* ── Responsive: mobile (≤ 768px) ────────────────────────────────── */
@media (max-width: 768px) {
- /* Show filter toggle summary, collapse by default if no filters active */
- .search-filters-summary {
- display: flex;
- }
+ /* Show filter toggle summary, collapse by default if no filters active */
+ .search-filters-summary {
+ display: flex;
+ }
- .search-filters-toggle:not([open]) .search-controls {
- display: none;
- }
+ .search-filters-toggle:not([open]) .search-controls {
+ display: none;
+ }
- .search-filters-toggle[open] .search-controls {
- display: flex;
- }
+ .search-filters-toggle[open] .search-controls {
+ display: flex;
+ }
- /* Filters stack vertically on mobile */
- .search-controls {
- flex-direction: column;
- align-items: stretch;
- gap: var(--space-xs);
- padding: var(--space-xs) var(--space-m);
- }
+ /* Filters stack vertically on mobile */
+ .search-controls {
+ flex-direction: column;
+ align-items: stretch;
+ gap: var(--space-xs);
+ padding: var(--space-xs) var(--space-m);
+ }
- .search-filter-label {
- flex-direction: column;
- align-items: stretch;
- gap: var(--space-3xs);
- }
+ .search-filter-label {
+ flex-direction: column;
+ align-items: stretch;
+ gap: var(--space-3xs);
+ }
- .search-filter-select {
- width: 100%;
- }
+ .search-filter-select {
+ width: 100%;
+ }
- .search-apply-btn,
- .search-reset-link {
- width: 100%;
- text-align: center;
- }
+ .search-apply-btn,
+ .search-reset-link {
+ width: 100%;
+ text-align: center;
+ }
- /* Pagination: hide first/last edge buttons */
- .pagination-edge {
- display: none;
- }
+ /* Pagination: hide first/last edge buttons */
+ .pagination-edge {
+ display: none;
+ }
- .pagination-btn {
- min-width: 2.25rem;
- min-height: 2.25rem;
- font-size: var(--step--2);
- }
+ .pagination-btn {
+ min-width: 2.25rem;
+ min-height: 2.25rem;
+ font-size: var(--step--2);
+ }
- .pagination-info {
- font-size: var(--step--2);
- }
+ .pagination-info {
+ font-size: var(--step--2);
+ }
- /* Reduce results grid gaps and padding */
- .results-grid {
- gap: var(--space-s);
- padding: var(--space-2xs) var(--space-s) var(--space-s);
- grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
- }
+ /* Reduce results grid gaps and padding */
+ .results-grid {
+ gap: var(--space-s);
+ padding: var(--space-2xs) var(--space-s) var(--space-s);
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+ }
- .search-results-header {
- margin: var(--space-s) var(--space-s) var(--space-2xs);
- }
+ .search-results-header {
+ margin: var(--space-s) var(--space-s) var(--space-2xs);
+ }
- .search-results-range {
- display: none;
- }
+ .search-results-range {
+ display: none;
+ }
- .search-results-range--compact {
- display: inline;
- }
+ .search-results-range--compact {
+ display: inline;
+ }
}