mark/msos
0
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(qa2): responsive Latest-news/FAQ at tablet + muted-text contrast sweep
Deploy to Production on Develop Push / deploy (push) Successful in 22s
Details

Browse Source 
- Latest-news row and FAQ grid now go 3 -> 2 -> 1 columns (added a 1024px
  tablet step); .news-card drops its brittle fixed 405.33px width and fills a
  responsive grid cell. Fixes cramped 3-across cards on 769-1024px.
- Contrast: replace #98A2B3 text color (2.58:1 on white) with the palette
  muted #667085 (~4.8:1) across 13 CSS files (31 text-color uses; borders/
  backgrounds untouched, verified none on dark backgrounds).
- Re-stamped cache-bust (v=6770822f).

Note: the ~20px-looser header top-gap at 769-1024px is left as a minor,
lower-risk follow-up (would need a coordinated multi-page padding pass).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
popovskikandClaude Opus 4.8 committed 2026-08-27 19:33:31 +02:00
1 parent c5bdb59a92
commit 0052b38c1c
275 files changed
+1482 -1472
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

css/pages/_about.css
+1 -1
View File
@@ -571,4 +571,4 @@
font-size: 17px; line-height: 29px; color: #475467;
}
.appr-thanks strong { display: block; margin-top: 10px; color: #101828; font-weight: 600; }
.appreciation-note { font-size: 13px; color: #98A2B3; margin: 26px auto 0; font-style: italic; }
.appreciation-note { font-size: 13px; color: #667085; margin: 26px auto 0; font-style: italic; }
css/pages/_article.css
+3 -3
View File
@@ -662,7 +662,7 @@
.image-placeholder .image-placeholder-box .ph-icon {
font-size: 32px;
color: #98A2B3;
color: #667085;
}
.image-placeholder .ph-label {
@@ -709,7 +709,7 @@
align-items: center;
justify-content: center;
gap: 8px;
color: #98A2B3;
color: #667085;
box-sizing: border-box;
padding: 16px;
text-align: center;
@@ -739,7 +739,7 @@
/* Small "illustrative image" tag prepended to symbolic blog/news photo captions */
.fig-illustrative { font-weight: 600; color: #667085; }
.fig-illustrative i { font-size: 11px; color: #98A2B3; margin-right: 3px; }
.fig-illustrative i { font-size: 11px; color: #667085; margin-right: 3px; }
/* Prose posts (personal stories) — no scrollspy sidebar, single centred column */
.article-page--prose .article-sidebar { display: none; }
css/pages/_blog.css
+2 -2
View File
@@ -55,7 +55,7 @@
display: inline-block;
font-size: 12px;
font-weight: 600;
color: #98A2B3;
color: #667085;
border: 1px dashed #D0D5DD;
border-radius: 999px;
padding: 3px 10px;
@@ -77,7 +77,7 @@
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #98A2B3;
color: #667085;
margin: 0 0 16px;
}
css/pages/_event.css
+6 -6
View File
@@ -52,7 +52,7 @@
background: #FFF1E8; color: #F2762E; font-size: 18px;
}
.event-key-text { display: flex; flex-direction: column; gap: 1px; }
.event-key-k { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #98A2B3; }
.event-key-k { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #667085; }
.event-key-v { font-size: 17px; line-height: 24px; color: #101828; }
.event-key-stream { font-size: 15px; color: #667085; margin: 4px 0 22px; }
.event-key-stream i { color: #2D738C; margin-right: 6px; }
@@ -67,7 +67,7 @@
gap: 20px 48px; max-width: 640px; margin: 26px auto 0; padding-top: 26px; border-top: 1px solid #EAECF0;
}
.event-partner { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.event-partner-role { order: -1; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #98A2B3; }
.event-partner-role { order: -1; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #667085; }
.event-partner img { display: block; height: 30px; width: auto; object-fit: contain; }
.event-partner--lead img { height: 34px; }
.event-partner-name { font-size: 15px; font-weight: 700; color: #344054; }
@@ -83,7 +83,7 @@
/* ---- inline photos between paragraphs (breaks up the text) ---- */
.news-article-body .event-inline { margin: 30px 0; }
.news-article-body .event-inline img { width: 100%; height: auto; border-radius: 14px; display: block; }
.news-article-body .event-inline figcaption { margin-top: 8px; font-size: 13px; color: #98A2B3; text-align: center; }
.news-article-body .event-inline figcaption { margin-top: 8px; font-size: 13px; color: #667085; text-align: center; }
@media (max-width: 560px) {
.event-key-grid { grid-template-columns: 1fr; max-width: 340px; }
@@ -139,7 +139,7 @@
.msreg .ms-label { display: block; font-size: 14px; font-weight: 700; color: #344054; margin: 22px 0 8px; }
.msreg .ms-label:first-child { margin-top: 0; }
.msreg .ms-req { color: #F2762E; }
.msreg .ms-note { font-size: 13px; color: #98A2B3; margin: 6px 0 0; }
.msreg .ms-note { font-size: 13px; color: #667085; margin: 6px 0 0; }
.msreg .ms-form textarea { margin-top: 0; }
.msreg .er-consents { margin-top: 26px; }
.msreg .ms-nav { justify-content: flex-end; }
@@ -155,8 +155,8 @@
.msreg .ev-plans { margin-top: 24px; border: 1px solid #EAECF0; border-radius: 12px; background: #FBFCFD; padding: 4px 18px 20px; }
.msreg .ev-plans[hidden] { display: none; }
.msreg .ev-plans-title { font-size: 16px; font-weight: 700; color: #101828; margin: 16px 0 2px; }
.msreg .ev-plans-lead { font-size: 13px; color: #98A2B3; margin: 0 0 6px; }
.msreg .ev-subhead { font-size: 13px; font-weight: 700; color: #98A2B3; text-transform: uppercase; letter-spacing: 0.05em; margin: 20px 0 10px; }
.msreg .ev-plans-lead { font-size: 13px; color: #667085; margin: 0 0 6px; }
.msreg .ev-subhead { font-size: 13px; font-weight: 700; color: #667085; text-transform: uppercase; letter-spacing: 0.05em; margin: 20px 0 10px; }
/* ---- print / PDF export (clean, faithful colours) ---- */
@media print {
css/pages/_filterbar.css
+1 -1
View File
@@ -140,7 +140,7 @@
font-size: 16px; /* 16px avoids iOS Safari focus-zoom */
color: #101828;
}
.filterbar-search-field input::placeholder { color: #98A2B3; }
.filterbar-search-field input::placeholder { color: #667085; }
.filterbar-search-close {
flex: 0 0 auto;
css/pages/_gallery.css
+1 -1
View File
@@ -121,7 +121,7 @@
.album-info { padding: 14px 16px 16px; }
.album-info h3 { font-size: 17px; line-height: 1.3; margin: 0 0 3px; font-weight: 700; color: #101828; transition: color 0.2s ease; }
.album-card:hover .album-info h3 { color: #2D738C; }
.album-date { font-size: 12.5px; color: #98A2B3; margin: 0 0 7px; display: flex; align-items: center; gap: 6px; }
.album-date { font-size: 12.5px; color: #667085; margin: 0 0 7px; display: flex; align-items: center; gap: 6px; }
.album-date i { font-size: 12px; color: #2D738C; }
.album-meta {
font-size: 13px; color: #667085; margin: 0;
css/pages/_guide.css
+6 -6
View File
@@ -524,7 +524,7 @@
}
.guide-feedback-btn i {
font-size: 13px;
color: #98A2B3;
color: #667085;
}
.guide-feedback-btn[data-vote="yes"]:hover {
border-color: #12B76A;
@@ -692,7 +692,7 @@
border-radius: 10px;
background: #FFFFFF;
}
.guide-field input[type="text"]::placeholder { color: #98A2B3; }
.guide-field input[type="text"]::placeholder { color: #667085; }
.guide-field input[type="text"]:focus { outline: none; border-color: #2D738C; box-shadow: 0 0 0 3px rgba(45,115,140,0.12); }
.guide-route-actions { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
@@ -787,7 +787,7 @@
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: #98A2B3;
color: #667085;
}
/* Stage accordion (six journey stages) */
@@ -853,7 +853,7 @@
}
.guide-cat-caret {
flex-shrink: 0;
color: #98A2B3;
color: #667085;
font-size: 14px;
transition: transform .2s ease;
}
@@ -938,7 +938,7 @@
}
.route-report-logo { height: 46px; width: auto; }
.route-report h1 { font-size: 27px; font-weight: 800; letter-spacing: -.02em; margin: 0; color: #101828; }
.route-report-date { margin: 6px 0 0; font-size: 13px; color: #98A2B3; }
.route-report-date { margin: 6px 0 0; font-size: 13px; color: #667085; }
.route-report-intro { color: #475467; line-height: 25px; margin: 0 0 8px; }
.route-report h2 { font-size: 17px; color: #101828; margin: 24px 0 10px; }
.route-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 6px; }
@@ -952,7 +952,7 @@
border-radius: 10px;
background: #FCFCFD;
}
.route-chip span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #98A2B3; }
.route-chip span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #667085; }
.route-chip strong { font-size: 14px; font-weight: 600; color: #101828; }
.route-steps { list-style: none; counter-reset: rstep; padding: 0; margin: 0; }
.route-steps li {
css/pages/_home.css
+14 -4
View File
@@ -390,10 +390,16 @@
}
.news-articles {
display: flex;
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-content: center;
gap: 32px;
margin-bottom: 64px;
max-width: 1264px;
margin: 0 auto 64px;
}
/* Tablet/small-laptop: 2-up instead of three cramped cards */
@media (max-width: 1024px) {
.news-articles { grid-template-columns: repeat(2, 1fr); max-width: 840px; }
}
/* 6. Testimonials Section */
@@ -578,6 +584,10 @@
margin: 0 auto 64px;
text-align: left;
}
/* Tablet/small-laptop: 2 columns before collapsing to 1 on phones */
@media (max-width: 1024px) {
.faq-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 32px; }
}
.faq-item {
display: flex;
@@ -814,8 +824,8 @@
line-height: 24px;
}
.news-articles {
flex-direction: column;
align-items: center;
grid-template-columns: 1fr;
justify-items: center;
gap: 48px;
}
css/pages/_member.css
+5 -5
View File
@@ -5,7 +5,7 @@
.mm-h2 { font-size: 32px; line-height: 1.15; text-align: center; margin: 0 0 12px; color: #101828; }
.mm-h2--light { color: #FFFFFF; }
.mm-lead { text-align: center; max-width: 640px; margin: 0 auto 36px; font-size: 18px; line-height: 28px; color: #475467; }
.mm-note { font-size: 12px; color: #98A2B3; }
.mm-note { font-size: 12px; color: #667085; }
.mm-note--center { text-align: center; margin-top: 20px; }
.mm-center { text-align: center; margin-top: 32px; }
.mm-section { max-width: 1120px; margin: 0 auto; padding: 72px 24px; }
@@ -118,7 +118,7 @@
.mm-test blockquote { margin: 0 0 18px; font-size: 17px; line-height: 27px; color: #101828; }
.mm-test blockquote::before { content: '\201C'; color: var(--mm-orange); font-size: 40px; line-height: 0; vertical-align: -18px; margin-right: 4px; }
.mm-test figcaption strong { display: block; font-size: 15px; }
.mm-test figcaption span { font-size: 13px; color: #98A2B3; }
.mm-test figcaption span { font-size: 13px; color: #667085; }
/* ---- projects showcase ---- */
.mm-shows { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 40px; }
@@ -155,14 +155,14 @@
.ms-progress[hidden] { display: none; }
.ms-progress-track { height: 6px; background: #F2F4F7; border-radius: 999px; overflow: hidden; }
.ms-progress-bar { height: 100%; width: 0; background: var(--mm-orange); border-radius: 999px; transition: width 0.3s ease; }
.ms-progress-text { display: block; margin-top: 8px; font-size: 12px; font-weight: 600; color: #98A2B3; }
.ms-progress-text { display: block; margin-top: 8px; font-size: 12px; font-weight: 600; color: #667085; }
.ms-alert { background: #FEF3F2; color: #B42318; border: 1px solid #FECDCA; border-radius: 10px; padding: 10px 14px; font-size: 14px; margin-bottom: 16px; }
.ms-alert[hidden] { display: none; }
/* honeypot: off-screen, hidden from users and assistive tech, visible to naive bots */
.ms-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ms-step[hidden] { display: none; }
.ms-step h3 { font-size: 20px; margin: 0 0 6px; }
.ms-hint { font-size: 14px; color: #98A2B3; margin: 0 0 16px; }
.ms-hint { font-size: 14px; color: #667085; margin: 0 0 16px; }
/* path choice: two rich, colour-accented cards (student = orange, supporter = teal) */
.ms-step--path { text-align: center; }
@@ -223,7 +223,7 @@
.ms-success-icon { font-size: 48px; color: #2E9E6B; margin-bottom: 14px; }
.ms-success-title { font-size: 26px; margin: 0 0 10px; }
.ms-success-text { color: #667085; font-size: 16px; line-height: 25px; max-width: 520px; margin: 0 auto 24px; }
.ms-success-next { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #98A2B3; margin: 0 0 14px; }
.ms-success-next { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #667085; margin: 0 0 14px; }
.ms-success-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* allow long labels (e.g. MK "Прочитајте го Водичот за добредојде") to wrap
inside the button instead of overflowing the box (base .btn is nowrap) */
css/pages/_news.css
+2 -2
View File
@@ -88,7 +88,7 @@
}
.newshub-media .news-badge i { font-size: 11px; }
.newshub-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.newshub-date { font-size: 13px; font-weight: 600; color: #98A2B3; margin: 0; }
.newshub-date { font-size: 13px; font-weight: 600; color: #667085; margin: 0; }
.newshub-card h3 { margin: 0; font-size: 19px; line-height: 1.3; }
.newshub-card h3 a { color: #101828; text-decoration: none; }
.newshub-card h3 a:hover { color: #2D738C; }
@@ -123,7 +123,7 @@
.news-article-date { color: #667085; font-size: 15px; margin: 0 0 24px; }
.news-article-hero { margin: 0 0 28px; }
.news-article-hero img { width: 100%; height: auto; border-radius: 14px; display: block; }
.news-article-hero figcaption { margin-top: 8px; font-size: 13px; color: #98A2B3; }
.news-article-hero figcaption { margin-top: 8px; font-size: 13px; color: #667085; }
.news-article-hero figcaption a { color: #667085; text-decoration: underline; }
.news-article-body p { font-size: 18px; line-height: 30px; color: #344054; margin: 0 0 18px; }
.news-source {
css/pages/_press.css
+1 -1
View File
@@ -122,7 +122,7 @@
border-radius: 999px;
padding: 4px 10px;
}
.press-list .host { color: #98A2B3; font-size: 13px; }
.press-list .host { color: #667085; font-size: 13px; }
.press-list .desc { flex-basis: 100%; margin: 6px 0 0; color: #475467; font-size: 14px; line-height: 22px; }
/* Closing note, matched to .faq-contact panel */