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) <noreply@anthropic.com>
This commit is contained in:
popovskikandClaude Opus 4.8 committed
1 parent
13b2bb6eb2
commit
f88a9bb6b4
4 files changed
+277
-106
No files matched your search
+100
-31
@@ -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 {
|
||||
|
||||
Reference in new issue
Block a user