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.

-