diff --git a/app/public/assets/css/public.css b/app/public/assets/css/public.css index 8d28f0c..5cffbd0 100644 --- a/app/public/assets/css/public.css +++ b/app/public/assets/css/public.css @@ -5,267 +5,264 @@ /* Cards grid — scrollable main area */ .home-main { - flex: 1; - min-height: 0; - overflow-y: auto; - overflow-x: hidden; - padding: 0; + flex: 1; + min-height: 0; + overflow-y: auto; + overflow-x: hidden; + padding: 0; } .cards-container { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: var(--space-s); - list-style: none; - margin: 0; - padding: var(--space-xs) var(--space-s) var(--space-m); + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-s); + list-style: none; + margin: 0; + padding: var(--space-xs) var(--space-s) var(--space-m); } @media (max-width: 768px) { - .cards-container { - grid-template-columns: repeat(2, 1fr); - } + .cards-container { + grid-template-columns: repeat(2, 1fr); + } } @media (max-width: 480px) { - .cards-container { - grid-template-columns: 1fr; - } + .cards-container { + grid-template-columns: 1fr; + } } /* Each card = list item containing a block link */ .card { - display: flex; - flex-direction: column; - cursor: pointer; - border: 1px solid var(--border-primary); - border-radius: var(--radius); - background: var(--bg-primary); - overflow: hidden; - transition: - box-shadow 0.2s ease, - transform 0.2s ease; + display: flex; + flex-direction: column; + cursor: pointer; + border-radius: var(--radius); + background: var(--bg-primary); + overflow: hidden; + transition: + border-color 0.2s ease, + box-shadow 0.2s ease; } .card:hover { - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); - transform: translateY(-2px); + box-shadow: 0 4px 16px var(--accent-secondary); + /* border-color: var(--accent-primary); */ } .card > a { - text-decoration: none; - color: inherit; - display: flex; - flex-direction: column; - flex: 1; - border-radius: inherit; + text-decoration: none; + color: inherit; + display: flex; + flex-direction: column; + flex: 1; + border-radius: inherit; } /* Media wrapper:
for real images/video,
for placeholders */ .home-body figure { - width: 100%; - aspect-ratio: 4 / 3; - overflow: hidden; - background: var(--bg-tertiary); - position: relative; - margin: 0; /* reset
default margin */ - border-radius: 7px 7px 0 0; + width: 100%; + aspect-ratio: 4 / 3; + overflow: hidden; + background: var(--bg-tertiary); + position: relative; + margin: 0; /* reset
default margin */ + border-radius: 7px 7px 0 0; } .home-body figure img, .home-body figure video { - width: 100%; - height: 100%; - object-fit: cover; - display: block; - transition: transform 0.3s ease; + width: 100%; + height: 100%; + object-fit: cover; + display: block; + transition: transform 0.3s ease; } .card:hover figure img, .card:hover figure video { - transform: scale(1.02); + transform: scale(1.02); } .card__media--placeholder { - width: 100%; - height: 100%; - background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-active)); - display: flex; - align-items: center; - justify-content: center; - color: var(--text-tertiary); - font-size: var(--step-3); + width: 100%; + height: 100%; + background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-active)); + display: flex; + align-items: center; + justify-content: center; + color: var(--text-tertiary); + font-size: var(--step-3); } .card__media--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: 0 0 var(--radius) var(--radius); + background: linear-gradient( + 0deg, + rgba(192, 93, 225, 1) 0%, + rgba(51, 191, 135, 1) 66%, + rgba(60, 133, 108, 1) 100% + ); } .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; } .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; } /* Section label */ .home-section-label { - font-style: normal; - background: transparent; - color: var(--text-primary); - font-size: var(--step--2); - font-weight: 600; - letter-spacing: 0.1em; - text-transform: uppercase; - padding: var(--space-s) var(--space-s) var(--space-xs); - border-bottom: 1px solid var(--border-primary); - margin: 0; + font-style: normal; + background: transparent; + color: var(--text-primary); + font-size: var(--step--2); + font-weight: 600; + letter-spacing: 0.1em; + text-transform: uppercase; + padding: var(--space-s) var(--space-s) var(--space-xs); + border-bottom: 1px solid var(--border-primary); + margin: 0; } /* Card caption —

directly inside the card link, below the media */ .home-body li > a > p { - padding: var(--space-2xs) var(--space-xs) var(--space-xs); - font-size: var(--step--1); - line-height: 1.35; - color: var(--text-primary); - margin: 0; - font-weight: 400; - border-top: 1px solid var(--border-primary); + padding: var(--space-2xs) var(--space-xs) var(--space-xs); + font-size: var(--step--1); + line-height: 1.35; + color: var(--text-primary); + margin: 0; + font-weight: 400; } /* Empty-state message shown when no cards exist */ .cards-empty { - padding: var(--space-l); - color: var(--text-tertiary); - font-size: var(--step--1); - list-style: none; + padding: var(--space-l); + color: var(--text-tertiary); + font-size: var(--step--1); + list-style: none; } /* Filter info */ .filter-info { - background: var(--accent-muted); - color: var(--accent-secondary); - padding: var(--space-3xs) var(--space-s); - font-size: var(--step--1); - display: flex; - align-items: center; - gap: var(--space-s); - flex-shrink: 0; + background: var(--accent-muted); + color: var(--accent-secondary); + padding: var(--space-3xs) var(--space-s); + font-size: var(--step--1); + display: flex; + align-items: center; + gap: var(--space-s); + flex-shrink: 0; } .clear-filter { - color: var(--accent-secondary); - text-decoration: none; - padding: var(--space-3xs) var(--space-2xs); - background: var(--accent-muted); - border-radius: var(--radius); - font-size: var(--step--1); + color: var(--accent-secondary); + text-decoration: none; + padding: var(--space-3xs) var(--space-2xs); + background: var(--accent-muted); + border-radius: var(--radius); + font-size: var(--step--1); } .clear-filter:hover { - background: var(--accent-secondary); - color: var(--accent-foreground); + background: var(--accent-secondary); + color: var(--accent-foreground); } /* Pagination */ .pagination-wrap { - border-top: 1px solid var(--border-secondary); - background: var(--bg-primary); - flex-shrink: 0; + border-top: 1px solid var(--border-secondary); + background: var(--bg-primary); + flex-shrink: 0; } .pagination-wrap ul { - display: flex; - justify-content: center; - align-items: center; - gap: var(--space-2xs); - padding: var(--space-s); - list-style: none; - margin: 0; + display: flex; + justify-content: center; + align-items: center; + gap: var(--space-2xs); + padding: var(--space-s); + list-style: none; + margin: 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); } .page-current { - font-weight: 600; - color: var(--text-primary); + font-weight: 600; + color: var(--text-primary); } /* Suppress card hover scale for users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { - .home-body figure img, - .home-body figure video { - transition: none; - } - .card:hover figure img, - .card:hover figure video { - transform: none; - } - .card__media--gradient { - transition: none; - } - .card { - transition: none; - } - .card:hover { - transform: none; - } + .home-body figure img, + .home-body figure video { + transition: none; + } + .card:hover figure img, + .card:hover figure video { + transform: none; + } + .card__media--gradient { + transition: none; + } + .card { + transition: none; + } + .card:hover { + transform: none; + } } diff --git a/app/public/assets/css/repertoire.css b/app/public/assets/css/repertoire.css index 49a5ba3..5d6defc 100644 --- a/app/public/assets/css/repertoire.css +++ b/app/public/assets/css/repertoire.css @@ -466,11 +466,10 @@ 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% + 0deg, + rgba(192, 93, 225, 1) 0%, + rgba(51, 191, 135, 1) 66%, + rgba(60, 133, 108, 1) 100% ); } @@ -698,12 +697,12 @@ .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% + 0deg, + rgba(192, 93, 225, 1) 0%, + rgba(51, 191, 135, 1) 66%, + rgba(60, 133, 108, 1) 100% ); + display: flex; flex-direction: column; align-items: center;