From f88a9bb6b49f03dfa4a5640bf35d23a74554b2ca Mon Sep 17 00:00:00 2001 From: popovskik Date: Fri, 31 Jul 2026 12:33:41 +0200 Subject: [PATCH] Landing: add featured essentials row and make stages collapsible dropdowns Adds a 5-card featured row (journey, deadlines, eVS apply, residence permit, accommodation) above the stages, and converts the six stage cards into native details/summary accordions (first open by default, chevron rotates). Links inside open into a compact grid. Cuts the empty white space and visual noise. Co-Authored-By: Claude Opus 4.8 (1M context) --- css/pages/_guide.css | 131 +++++++++++++++++++++------- en/student-welcome-guide/index.html | 84 ++++++++++++------ mk/student-welcome-guide/index.html | 84 ++++++++++++------ si/student-welcome-guide/index.html | 84 ++++++++++++------ 4 files changed, 277 insertions(+), 106 deletions(-) diff --git a/css/pages/_guide.css b/css/pages/_guide.css index e80f402e..5f47e08a 100644 --- a/css/pages/_guide.css +++ b/css/pages/_guide.css @@ -674,71 +674,137 @@ .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; } -/* Stage cards: the guide grouped into six journey stages. */ -.guide-cats { +/* Featured essentials row */ +.guide-featured { display: grid; - grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); - gap: 22px; - align-items: start; + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); + gap: 14px; + margin-bottom: 36px; +} +.guide-featured-card { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 3px; + padding: 18px; + border: 1px solid #D8E3E8; + border-radius: 14px; + background: linear-gradient(180deg, #f4f9fb 0%, #ffffff 70%); + text-decoration: none; + transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; +} +.guide-featured-card:hover { + transform: translateY(-3px); + border-color: #2D738C; + box-shadow: 0 12px 26px rgba(45, 115, 140, .18); +} +.guide-featured-icon { + display: flex; + align-items: center; + justify-content: center; + width: 42px; + height: 42px; + margin-bottom: 8px; + border-radius: 11px; + background: #2D738C; + color: #fff; + font-size: 18px; +} +.guide-featured-label { + font-size: 16px; + font-weight: 700; + color: #101828; +} +.guide-featured-sub { + font-size: 13px; + color: #667085; + line-height: 18px; +} + +/* Browse-by-stage label */ +.guide-browse-label { + max-width: 860px; + margin: 0 auto 14px; + font-size: 13px; + font-weight: 700; + letter-spacing: .04em; + text-transform: uppercase; + color: #98A2B3; +} + +/* Stage accordion (six journey stages) */ +.guide-cats { + display: flex; + flex-direction: column; + gap: 12px; + max-width: 860px; + margin: 0 auto; } .guide-cat { border: 1px solid #EAECF0; - border-radius: 16px; + border-radius: 14px; 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; + overflow: hidden; + transition: border-color .15s ease, box-shadow .15s ease; } -.guide-cat:hover { +.guide-cat[open] { border-color: #D8E3E8; - box-shadow: 0 12px 28px rgba(16, 24, 40, .08); + box-shadow: 0 8px 22px rgba(16, 24, 40, .06); } .guide-cat-head { display: flex; - align-items: flex-start; + align-items: center; gap: 14px; - padding-bottom: 14px; - margin-bottom: 8px; - border-bottom: 1px solid #F2F4F7; + padding: 16px 18px; + cursor: pointer; + list-style: none; } +.guide-cat-head::-webkit-details-marker { display: none; } +.guide-cat-head:hover { background: #FCFCFD; } .guide-cat-num { flex-shrink: 0; - width: 38px; - height: 38px; - border-radius: 10px; + width: 34px; + height: 34px; + border-radius: 9px; background: #2D738C; color: #fff; font-weight: 700; - font-size: 17px; + font-size: 16px; display: flex; align-items: center; justify-content: center; } +.guide-cat-heading { flex: 1 1 auto; } .guide-cat-heading h3 { display: flex; align-items: center; gap: 9px; - margin: 2px 0 4px; - font-size: 17px; + margin: 0 0 2px; + font-size: 16px; font-weight: 700; color: #101828; - line-height: 22px; + line-height: 21px; text-align: left; } -.guide-cat-heading h3 i { - color: #2D738C; - font-size: 15px; -} +.guide-cat-heading h3 i { color: #2D738C; font-size: 14px; } .guide-cat-heading p { margin: 0; - font-size: 13.5px; + font-size: 13px; color: #667085; - line-height: 20px; + line-height: 18px; } +.guide-cat-caret { + flex-shrink: 0; + color: #98A2B3; + font-size: 14px; + transition: transform .2s ease; +} +.guide-cat[open] .guide-cat-caret { transform: rotate(180deg); } .guide-cat-links { - display: flex; - flex-direction: column; - gap: 2px; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + gap: 4px 10px; + padding: 2px 14px 16px 62px; } .guide-quicklink { display: flex; @@ -763,6 +829,9 @@ text-align: center; flex-shrink: 0; } +@media (max-width: 640px) { + .guide-cat-links { padding-left: 16px; } +} /* ---------- 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 3f0f160c..f876fc6e 100644 --- a/en/student-welcome-guide/index.html +++ b/en/student-welcome-guide/index.html @@ -222,31 +222,61 @@

Find your way through the guide

-

The guide follows your journey in six stages, from choosing a programme to daily life in Slovenia. Open the stage you are in, or use Show my route above for a personal checklist.

+

Most students start with the essentials below. Open a stage to see everything in it.

+
+ + + Your journey + The whole path at a glance + + + + Deadlines + What closes when + + + + Apply (eVŠ) + Enrol step by step + + + + Residence permit + Your right to stay + + + + Accommodation + Finding a place to live + +
+

Browse by stage

-
-
+
+ 1

Start here: explore and decide

See the whole journey, then pick a programme, a city, and check the cost.

-
+ +
Your complete journey Choosing a programme Study cities Tuition and scholarships
-
-
-
+ +
+ 2

Apply to study

Deadlines, the eVŠ application, recognition, documents, and enrolment.

-
+ +
Current deadlines Bachelor application @@ -256,15 +286,16 @@ Preparing documents Admission and enrolment
-
-
-
+ +
+ 3

Residence and healthcare

Your legal right to stay for the year and your access to healthcare.

-
+ +
Visa and residence Residence permit @@ -273,30 +304,32 @@ Health insurance (RM/SI 3) Using healthcare
-
-
-
+ +
+ 4

Move and settle in

Housing, packing, arrival, and the admin that unlocks everything else.

-
+ +
Accommodation Travelling and packing Arrival checklist Admin basics (EMŠO, tax, bank)
-
-
-
+ +
+ 5

Everyday student life

Meals, transport, work, budget, studying, and finding your community.

-
+ +
Student meals Student transport @@ -306,20 +339,21 @@ Wellbeing and community Student organisations
-
-
-
+ +
+ 6

After your first year

Renewing, changing or graduating, plus the official sources to trust.

-
+ +
Renewal and graduation Official sources
-
+
diff --git a/mk/student-welcome-guide/index.html b/mk/student-welcome-guide/index.html index b89b4041..99554561 100644 --- a/mk/student-welcome-guide/index.html +++ b/mk/student-welcome-guide/index.html @@ -222,31 +222,61 @@

Најдете го вашиот пат низ водичот

-

Водичот ја следи вашата патека во шест фази, од избор на програма до секојдневниот живот во Словенија. Отворете ја фазата во која сте, или горе користете Прикажи го мојот пат за личен список.

+

Повеќето студенти почнуваат со основите подолу. Отворете фаза за да видите сè во неа.

+
+ + + Вашиот пат + Целиот пат на едно место + + + + Рокови + Што кога се затвора + + + + Пријава (eVŠ) + Запишување чекор по чекор + + + + Дозвола за престој + Вашето право на престој + + + + Сместување + Наоѓање сместување + +
+

Прелистувајте по фази

-
-
+
+ 1

Почнете тука: истражете и одлучете

Видете го целиот пат, потоа изберете програма, град и проверете ги трошоците.

-
+ +
Целосниот пат Избор на програма Студентски градови Школарина и стипендии
-
-
-
+ +
+ 2

Пријава за студии

Рокови, пријавата преку eVŠ, признавање, документи и запишување.

-
+ +
Тековни рокови Додипломска пријава @@ -256,15 +286,16 @@ Подготовка на документи Прием и запишување
-
-
-
+ +
+ 3

Престој и здравство

Вашето законско право на престој за годината и пристапот до здравство.

-
+ +
Виза и престој Дозвола за престој @@ -273,30 +304,32 @@ Здравствено осигурување (RM/SI 3) Користење здравство
-
-
-
+ +
+ 4

Преселба и снаоѓање

Сместување, пакување, пристигнување и администрацијата што отклучува сè друго.

-
+ +
Сместување Патување и пакување Листа по пристигнување Основна администрација (EMŠO, данок, банка)
-
-
-
+ +
+ 5

Секојдневен студентски живот

Исхрана, превоз, работа, буџет, студирање и наоѓање на заедницата.

-
+ +
Студентска исхрана Студентски превоз @@ -306,20 +339,21 @@ Благосостојба и заедница Студентски организации
-
-
-
+ +
+ 6

По првата година

Обнова, промена или дипломирање, плус официјалните извори на кои да им верувате.

-
+ +
Обнова и дипломирање Официјални извори
-
+
diff --git a/si/student-welcome-guide/index.html b/si/student-welcome-guide/index.html index 9b901cd2..26578fd4 100644 --- a/si/student-welcome-guide/index.html +++ b/si/student-welcome-guide/index.html @@ -222,31 +222,61 @@

Poiščite svojo pot skozi vodnik

-

Vodnik sledi vaši poti v šestih fazah, od izbire programa do vsakdana v Sloveniji. Odprite fazo, v kateri ste, ali zgoraj uporabite Prikaži mojo pot za osebni seznam.

+

Večina študentov začne s spodnjimi osnovami. Odprite fazo in si oglejte vse v njej.

+
+ + + Vaša pot + Celotna pot na enem mestu + + + + Roki + Kaj se kdaj zapre + + + + Prijava (eVŠ) + Vpis korak za korakom + + + + Dovoljenje za prebivanje + Vaša pravica do bivanja + + + + Nastanitev + Iskanje nastanitve + +
+

Prebrskajte po fazah

-
-
+
+ 1

Začnite tukaj: raziščite in se odločite

Poglejte celotno pot, nato izberite program, mesto in preverite stroške.

-
+ +
Celotna pot Izbira programa Študijska mesta Šolnina in štipendije
-
-
-
+ +
+ 2

Prijava na študij

Roki, prijava prek eVŠ, priznavanje, dokumenti in vpis.

-
+ +
Trenutni roki Dodiplomska prijava @@ -256,15 +286,16 @@ Priprava dokumentov Sprejem in vpis
-
-
-
+ +
+ 3

Prebivanje in zdravstvo

Vaša zakonita pravica do bivanja za celo leto in dostop do zdravstva.

-
+ +
Vizum in prebivanje Dovoljenje za prebivanje @@ -273,30 +304,32 @@ Zdravstveno zavarovanje (RM/SI 3) Uporaba zdravstva
-
-
-
+ +
+ 4

Selitev in ureditev

Nastanitev, pakiranje, prihod in administracija, ki odklene vse drugo.

-
+ +
Nastanitev Selitev in pakiranje Kontrolni seznam ob prihodu Osnovna administracija (EMŠO, davčna, banka)
-
-
-
+ +
+ 5

Vsakdanje študentsko življenje

Prehrana, prevoz, delo, proračun, študij in iskanje skupnosti.

-
+ +
Študentska prehrana Študentski prevoz @@ -306,20 +339,21 @@ Dobro počutje in skupnost Študentske organizacije
-
-
-
+ +
+ 6

Po prvem letu

Podaljšanje, sprememba ali diplomiranje ter zanesljivi uradni viri.

-
+ +
Podaljšanje in diplomiranje Uradni viri
-
+