Landing/About/guide polish + Proxify-style category filter bar
About Us: - Replace the appreciation photo with an Apple-style scrolling marquee that focal-zooms the centred photo (main.js + _about.css); heading now sits above the carousel; remove the "Have any questions?" FAQ CTA (EN/MK/SI). Landing hero: - Turn the flat blue overlay into a Proxify-style radial vignette (light centre over the CTA, dark edges) and raise the "Become a member" button. Filter bar (Events & Projects / Blog / News, EN/MK/SI): - Add a shared Proxify-style rounded pill bar with a trailing search icon that swaps to a search field and opens a results dropdown (thumbnail + category + title). New css/pages/_filterbar.css + filter-search.js, layered on top of the existing filter/pagination JS. Blog category icons preserved. - Balance the News filter bar spacing between the header and the cards. Student Welcome Guide: - Widen the intro paragraphs, constrain the full-bleed disclaimer to a normal centred width, and add space before the route configurator. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
popovskikandClaude Opus 4.8 committed
1 parent
93af2d8051
commit
5d50604af4
20 files changed
+601
-84
No files matched your search
+4
-1
@@ -42,4 +42,7 @@
|
||||
@import 'pages/_support.css';
|
||||
@import 'pages/_hub.css';
|
||||
@import 'pages/_legal.css';
|
||||
@import 'pages/_gallery.css';
|
||||
@import 'pages/_gallery.css';
|
||||
|
||||
/* Loaded last so the shared filter bar wins over per-page chip styles. */
|
||||
@import 'pages/_filterbar.css';
|
||||
+40
-9
@@ -509,20 +509,51 @@
|
||||
/* ==========================================================================
|
||||
Appreciation to members & friends (photo carousel + names)
|
||||
========================================================================== */
|
||||
.appreciation-section { padding: 84px 24px 96px; background: #FFFFFF; text-align: center; }
|
||||
.appreciation-section > .page-header-section { margin-bottom: 36px; padding: 0; background: transparent; }
|
||||
.appreciation-section h2 { font-size: 36px; font-weight: 600; color: #101828; margin: 0 0 12px; }
|
||||
.appr-lead { font-size: 18px; line-height: 28px; color: #667085; max-width: 720px; margin: 0 auto; }
|
||||
/* Contained variant of the crossfade hero (overrides the full-bleed .about-hero) */
|
||||
.appreciation-hero {
|
||||
position: relative; left: auto; transform: none;
|
||||
width: 100%; max-width: 1000px; margin: 0 auto 34px;
|
||||
height: clamp(220px, 32vw, 380px); border-radius: 18px; overflow: hidden;
|
||||
.appreciation-section { padding: 84px 24px 96px; background: #FFFFFF; text-align: center; overflow: hidden; }
|
||||
.appreciation-section h2 { font-size: clamp(34px, 5vw, 54px); font-weight: 700; letter-spacing: -0.02em; color: #101828; margin: 0 0 16px; }
|
||||
.appr-lead { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: #667085; max-width: 760px; margin: 0 auto; }
|
||||
|
||||
/* Apple-style scrolling photo marquee */
|
||||
.appr-marquee {
|
||||
position: relative; left: 50%; transform: translateX(-50%);
|
||||
width: 100vw; overflow: hidden;
|
||||
/* extra vertical room so the enlarged focal card is not clipped */
|
||||
margin-bottom: 48px; padding: 40px 0;
|
||||
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
|
||||
mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
|
||||
}
|
||||
.appr-track {
|
||||
display: flex; align-items: center; width: max-content;
|
||||
animation: appr-scroll 70s linear infinite;
|
||||
}
|
||||
.appr-marquee:hover .appr-track { animation-play-state: paused; }
|
||||
.appr-card {
|
||||
flex: 0 0 auto; margin-right: 24px;
|
||||
width: clamp(240px, 27vw, 380px);
|
||||
height: clamp(170px, 19vw, 270px);
|
||||
border-radius: 20px; overflow: hidden; background: #EAF1F4;
|
||||
box-shadow: 0 12px 30px rgba(16, 24, 40, 0.14);
|
||||
/* base state before JS focal-scaling kicks in */
|
||||
transform: scale(0.82); transform-origin: center center;
|
||||
will-change: transform, filter;
|
||||
filter: brightness(0.62);
|
||||
}
|
||||
.appr-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
@keyframes appr-scroll {
|
||||
from { transform: translateX(0); }
|
||||
to { transform: translateX(-50%); }
|
||||
}
|
||||
.appr-intro { margin-bottom: 40px; }
|
||||
|
||||
.appreciation-names {
|
||||
display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px;
|
||||
max-width: 900px; margin: 0 auto;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.appr-track { animation: none; }
|
||||
/* no movement => show all cards evenly, no focal zoom/dim */
|
||||
.appr-card { transform: scale(0.92); filter: none; }
|
||||
}
|
||||
.appr-name {
|
||||
display: inline-block; padding: 8px 16px; border-radius: 999px;
|
||||
background: #F2F7F9; border: 1px solid #E1ECF0; color: #2D5F72;
|
||||
|
||||
@@ -0,0 +1,247 @@
|
||||
/* ==========================================================================
|
||||
Category filter bar (Proxify-style) + search dropdown
|
||||
Shared by the Events & Projects, Blog and News pages. The existing chip
|
||||
elements (.filter-pill / .blog-chip / .newshub-chip) are reused as tabs and
|
||||
progressively enhanced into this bar by filter-search.js — so the existing
|
||||
filtering + pagination keeps working untouched.
|
||||
This file is imported LAST in main.css so its rules win over the per-page
|
||||
chip styles regardless of specificity.
|
||||
========================================================================== */
|
||||
|
||||
.filterbar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
margin: 0 auto 40px;
|
||||
padding: 9px 12px;
|
||||
background: #F9FAFB;
|
||||
border-radius: 999px;
|
||||
box-shadow: 0 8px 30px rgba(16, 24, 40, 0.10);
|
||||
}
|
||||
/* Search mode: bar turns solid white and stretches wide */
|
||||
.filterbar.is-searching {
|
||||
width: 100%;
|
||||
max-width: 880px;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
/* ---- Tabs (reuse the existing chip row) ---- */
|
||||
.filterbar-tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
flex: 1 1 auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.filterbar-tabs::-webkit-scrollbar { display: none; }
|
||||
.filterbar-tabs[hidden] { display: none; }
|
||||
|
||||
.filterbar .filter-pill,
|
||||
.filterbar .blog-chip,
|
||||
.filterbar .newshub-chip {
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
height: 42px;
|
||||
padding: 0 18px;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
color: #344054;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
transition: color .15s ease, background .15s ease, box-shadow .15s ease;
|
||||
}
|
||||
.filterbar .filter-pill i,
|
||||
.filterbar .blog-chip i,
|
||||
.filterbar .newshub-chip i { font-size: 12px; }
|
||||
|
||||
.filterbar .filter-pill:hover,
|
||||
.filterbar .blog-chip:hover,
|
||||
.filterbar .newshub-chip:hover { color: #2D5F72; background: transparent; }
|
||||
|
||||
.filterbar .filter-pill.active,
|
||||
.filterbar .blog-chip.is-active,
|
||||
.filterbar .newshub-chip.is-active {
|
||||
color: #2D5F72;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06);
|
||||
}
|
||||
|
||||
/* ---- Search icon button ---- */
|
||||
.filterbar-search-btn {
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 42px; height: 42px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
color: #344054;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
transition: color .15s ease;
|
||||
}
|
||||
.filterbar-search-btn:hover { color: #2D5F72; }
|
||||
.filterbar-search-btn[hidden] { display: none; }
|
||||
|
||||
/* ---- Search mode row ---- */
|
||||
.filterbar-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
}
|
||||
.filterbar-search[hidden] { display: none; }
|
||||
.filterbar-search-label {
|
||||
display: none;
|
||||
padding: 0 6px 0 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #101828;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@media (min-width: 640px) { .filterbar-search-label { display: block; } }
|
||||
|
||||
.filterbar-search-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex: 1 1 auto;
|
||||
height: 42px;
|
||||
padding: 0 14px;
|
||||
background: #FFFFFF;
|
||||
border: 1.5px solid #2D5F72;
|
||||
border-radius: 999px;
|
||||
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 0 0 4px #E1ECF0;
|
||||
}
|
||||
.filterbar-search-field i { color: #101828; font-size: 15px; }
|
||||
.filterbar-search-field input {
|
||||
flex: 1 1 auto;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
font-size: 15px;
|
||||
color: #101828;
|
||||
}
|
||||
.filterbar-search-field input::placeholder { color: #98A2B3; }
|
||||
|
||||
.filterbar-search-close {
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 42px; height: 42px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
color: #667085;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
transition: color .15s ease;
|
||||
}
|
||||
.filterbar-search-close:hover { color: #101828; }
|
||||
|
||||
/* ---- Results dropdown ---- */
|
||||
.filterbar-results {
|
||||
position: absolute;
|
||||
left: 0; right: 0;
|
||||
top: calc(100% + 8px);
|
||||
z-index: 20;
|
||||
padding: 20px 8px 12px;
|
||||
background: #F9FAFB;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 8px 30px rgba(16, 24, 40, 0.16);
|
||||
}
|
||||
.filterbar-results[hidden] { display: none; }
|
||||
.filterbar-results-count {
|
||||
margin: 0 0 8px;
|
||||
padding: 0 18px;
|
||||
font-size: 13px;
|
||||
color: #667085;
|
||||
}
|
||||
.filterbar-results-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 8px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
.filterbar-result { border-radius: 14px; transition: background .15s ease; }
|
||||
.filterbar-result:hover { background: #FFFFFF; }
|
||||
.filterbar-result-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.filterbar-result-thumb {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 112px; height: 72px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: #EAF1F4;
|
||||
color: #2D5F72;
|
||||
font-size: 24px;
|
||||
}
|
||||
.filterbar-result-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
.filterbar-result-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
.filterbar-result-cat {
|
||||
align-self: flex-start;
|
||||
padding: 3px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #475467;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #D0D5DD;
|
||||
border-radius: 999px;
|
||||
}
|
||||
.filterbar-result-title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
color: #101828;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Projects sub-filter row (event types) — centred pill row under the bar,
|
||||
styled like the Proxify secondary chips.
|
||||
========================================================================== */
|
||||
.filter-subnav {
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.filterbar { width: 100%; border-radius: 20px; }
|
||||
.filterbar.is-searching { width: 100%; }
|
||||
}
|
||||
@@ -227,7 +227,7 @@
|
||||
color: #101828;
|
||||
}
|
||||
.guide-landing-hero p {
|
||||
max-width: 720px;
|
||||
max-width: 880px;
|
||||
margin: 0 auto 12px;
|
||||
font-size: 17px;
|
||||
line-height: 28px;
|
||||
@@ -613,7 +613,7 @@
|
||||
/* ---------- Route builder ---------- */
|
||||
.guide-route {
|
||||
max-width: 920px;
|
||||
margin: -36px auto 0;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #EAECF0;
|
||||
@@ -1029,8 +1029,9 @@
|
||||
/* Informative disclaimer callout shown across the Student Welcome Guide */
|
||||
.guide-disclaimer {
|
||||
display: flex; gap: 12px; align-items: flex-start;
|
||||
max-width: 880px; /* keep it to the reading column, not full-bleed */
|
||||
background: #FFF7ED; border: 1px solid #FED7AA; border-left: 4px solid #FB923C;
|
||||
border-radius: 12px; padding: 15px 18px; margin: 8px 0 30px;
|
||||
border-radius: 12px; padding: 15px 18px; margin: 8px auto 48px;
|
||||
}
|
||||
.guide-disclaimer > i { color: #EA7317; font-size: 18px; margin-top: 2px; flex: 0 0 auto; }
|
||||
.guide-disclaimer .gd-body { font-size: 13.5px; line-height: 21px; color: #7C4A21; }
|
||||
|
||||
+11
-7
@@ -47,12 +47,15 @@
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
/* Radial vignette: lighter blue in the centre (over the CTA) fading to a
|
||||
deeper blue at the edges, so the eye is drawn to the middle. */
|
||||
background: radial-gradient(ellipse 90% 95% at 50% 50%,
|
||||
rgba(60, 142, 170, 0.46) 0%,
|
||||
rgba(45, 115, 140, 0.64) 44%,
|
||||
rgba(16, 50, 70, 0.88) 100%);
|
||||
/* Radial vignette (Proxify-style): a light, whitish-blue glow in the centre
|
||||
over the CTA that falls off to a deep, dark blue at the edges — pulling
|
||||
the eye straight to the middle where the "Become a member" button sits.
|
||||
Focal point biased slightly downward (58%) to sit on the button. */
|
||||
background: radial-gradient(ellipse 70% 78% at 50% 58%,
|
||||
rgba(178, 218, 238, 0.40) 0%,
|
||||
rgba(96, 165, 190, 0.46) 28%,
|
||||
rgba(34, 86, 114, 0.74) 58%,
|
||||
rgba(9, 34, 52, 0.96) 100%);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@@ -93,7 +96,8 @@
|
||||
.hero-content p {
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
margin: 0 0 72px 0;
|
||||
/* tighter gap so the CTA sits a bit higher, closer to the copy */
|
||||
margin: 0 0 40px 0;
|
||||
}
|
||||
|
||||
/* 2. Partners Section */
|
||||
|
||||
+1
-1
@@ -20,7 +20,7 @@
|
||||
.newshub-hero h1 { max-width: 760px; margin: 0 auto 16px; font-size: 42px; line-height: 1.12; color: #101828; }
|
||||
.newshub-lead { max-width: 640px; margin: 0 auto; font-size: 18px; line-height: 28px; color: #475467; }
|
||||
|
||||
.newshub-list { max-width: 1120px; margin: 40px auto 72px; padding: 0 24px; }
|
||||
.newshub-list { max-width: 1120px; margin: 0 auto 72px; padding: 0 24px; }
|
||||
.newshub-filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
Reference in new issue
Block a user