From 13b2bb6eb2042a3ed388dc4625b573ef8e7c36fe Mon Sep 17 00:00:00 2001 From: popovskik Date: Fri, 31 Jul 2026 12:25:37 +0200 Subject: [PATCH] Reorganise landing: group the 30 links into six numbered journey stages Replaces the flat crowded quicklink wall with six numbered stage cards (Start here, Apply to study, Residence and healthcare, Move and settle in, Everyday student life, After your first year), each with an icon, a one-line description, and its topic links. New guide-cats/guide-cat styles; section retitled to Find your way through the guide. Co-Authored-By: Claude Opus 4.8 (1M context) --- css/pages/_guide.css | 92 ++++++++++++++++--- en/student-welcome-guide/index.html | 132 +++++++++++++++++++++------- mk/student-welcome-guide/index.html | 132 +++++++++++++++++++++------- si/student-welcome-guide/index.html | 132 +++++++++++++++++++++------- 4 files changed, 377 insertions(+), 111 deletions(-) diff --git a/css/pages/_guide.css b/css/pages/_guide.css index 9c8d8b39..e80f402e 100644 --- a/css/pages/_guide.css +++ b/css/pages/_guide.css @@ -674,27 +674,95 @@ .guide-section { max-width: 1080px; margin: 56px auto; padding: 0 24px; } .guide-section > h2 { font-size: 26px; color: #101828; text-align: center; margin: 0 0 6px; } .guide-section > .guide-section-sub { text-align: center; color: #667085; margin: 0 0 28px; } -.guide-quicklinks { +/* Stage cards: the guide grouped into six journey stages. */ +.guide-cats { display: grid; - grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); + gap: 22px; + align-items: start; +} +.guide-cat { + border: 1px solid #EAECF0; + border-radius: 16px; + background: #FFFFFF; + padding: 22px 22px 14px; + box-shadow: 0 1px 2px rgba(16, 24, 40, .04); + transition: box-shadow .15s ease, border-color .15s ease; +} +.guide-cat:hover { + border-color: #D8E3E8; + box-shadow: 0 12px 28px rgba(16, 24, 40, .08); +} +.guide-cat-head { + display: flex; + align-items: flex-start; gap: 14px; + padding-bottom: 14px; + margin-bottom: 8px; + border-bottom: 1px solid #F2F4F7; +} +.guide-cat-num { + flex-shrink: 0; + width: 38px; + height: 38px; + border-radius: 10px; + background: #2D738C; + color: #fff; + font-weight: 700; + font-size: 17px; + display: flex; + align-items: center; + justify-content: center; +} +.guide-cat-heading h3 { + display: flex; + align-items: center; + gap: 9px; + margin: 2px 0 4px; + font-size: 17px; + font-weight: 700; + color: #101828; + line-height: 22px; + text-align: left; +} +.guide-cat-heading h3 i { + color: #2D738C; + font-size: 15px; +} +.guide-cat-heading p { + margin: 0; + font-size: 13.5px; + color: #667085; + line-height: 20px; +} +.guide-cat-links { + display: flex; + flex-direction: column; + gap: 2px; } .guide-quicklink { display: flex; align-items: center; - gap: 12px; - padding: 16px 18px; - border: 1px solid #EAECF0; - border-radius: 12px; - background: #FFFFFF; - color: #101828; + gap: 11px; + padding: 9px 10px; + border-radius: 8px; + color: #344054; font-weight: 500; - font-size: 15px; + font-size: 14.5px; text-decoration: none; - transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; + transition: background .15s ease, color .15s ease; +} +.guide-quicklink:hover { + background: #F2F7F9; + color: #1D5C72; +} +.guide-quicklink i { + color: #2D738C; + font-size: 15px; + width: 20px; + text-align: center; + flex-shrink: 0; } -.guide-quicklink:hover { border-color: #2D738C; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16,24,40,0.06); } -.guide-quicklink i { color: #2D738C; font-size: 18px; width: 22px; text-align: center; } /* ---------- Notice / before-you-rely blocks on landing ---------- */ .guide-notice { diff --git a/en/student-welcome-guide/index.html b/en/student-welcome-guide/index.html index 05c564b2..3f0f160c 100644 --- a/en/student-welcome-guide/index.html +++ b/en/student-welcome-guide/index.html @@ -221,39 +221,105 @@
-

Jump to what you need

-

The most-used parts of the guide. More sections are being added.

-
diff --git a/mk/student-welcome-guide/index.html b/mk/student-welcome-guide/index.html index e616861e..b89b4041 100644 --- a/mk/student-welcome-guide/index.html +++ b/mk/student-welcome-guide/index.html @@ -221,39 +221,105 @@
-

Скокнете на тоа што ви треба

-

Најкористените делови од водичот. Се додаваат нови делови.

-
diff --git a/si/student-welcome-guide/index.html b/si/student-welcome-guide/index.html index 32507318..9b901cd2 100644 --- a/si/student-welcome-guide/index.html +++ b/si/student-welcome-guide/index.html @@ -221,39 +221,105 @@
-

Preskočite na tisto, kar potrebujete

-

Najbolj uporabljani deli vodnika. Dodajamo nove razdelke.

-