Changes for page Home
Last modified by Alex Cotiugă on 2026/01/13 13:12
From version 6.51
edited by Alex Cotiugă
on 2025/11/12 19:47
on 2025/11/12 19:47
Change comment:
There is no comment for this version
To version 6.52
edited by Alex Cotiugă
on 2025/11/12 19:48
on 2025/11/12 19:48
Change comment:
There is no comment for this version
Summary
-
Objects (1 modified, 0 added, 0 removed)
Details
- XWiki.StyleSheetExtension[0]
-
- Code
-
... ... @@ -168,56 +168,58 @@ 168 168 } 169 169 170 170 /* SERVICES */ 171 - .services { max-width: 1100px; margin: 0 auto; padding: 0 1rem; } 172 - .cards { 173 - display: flex; 174 - flex-wrap: wrap; 175 - gap: 24px; 176 - align-items: flex-start; /* << allows different heights per row */ 171 + .services { 172 + display: grid; gap: 16px; grid-template-columns: 1fr; 173 + @media (min-width: 920px) { grid-template-columns: repeat(3, 1fr); } 177 177 } 175 + .cards { 176 + display: flex; 177 + flex-wrap: wrap; 178 + gap: 24px; 179 + align-items: flex-start; /* << allows different heights per row */ 180 +} 178 178 179 - /* Card */180 - .card {181 - flex: 1 1 320px; /* grows nicely, min ~320px */182 - max-width: 360px; /* optional: keeps them tidy in 3 cols */183 - background: #fff;184 - border-radius: 14px;185 - box-shadow: 0 6px 20px rgba(0,0,0,.06);186 - padding: 20px 20px 16px;187 - }182 +/* Card */ 183 +.card { 184 + flex: 1 1 320px; /* grows nicely, min ~320px */ 185 + max-width: 360px; /* optional: keeps them tidy in 3 cols */ 186 + background: #fff; 187 + border-radius: 14px; 188 + box-shadow: 0 6px 20px rgba(0,0,0,.06); 189 + padding: 20px 20px 16px; 190 +} 188 188 189 - .card h3 { margin: 0 0 .25rem; font-size: 1.25rem; }190 - .card p { margin: 0 0 .75rem; color: #3a4750; }192 +.card h3 { margin: 0 0 .25rem; font-size: 1.25rem; } 193 +.card p { margin: 0 0 .75rem; color: #3a4750; } 191 191 192 - /* Toggle */193 - .details-toggle {194 - display: inline-block;195 - font-weight: 600;196 - border: 1.5px solid #008e78;197 - color: #0a3c37;198 - background: #e8fbf7;199 - padding: 6px 10px;200 - border-radius: 8px;201 - cursor: pointer;202 - }195 +/* Toggle */ 196 +.details-toggle { 197 + display: inline-block; 198 + font-weight: 600; 199 + border: 1.5px solid #008e78; 200 + color: #0a3c37; 201 + background: #e8fbf7; 202 + padding: 6px 10px; 203 + border-radius: 8px; 204 + cursor: pointer; 205 +} 203 203 204 - /* Details animation */205 - .details {206 - margin-top: .5rem;207 - overflow: hidden;208 - max-height: 0; /* collapsed */209 - opacity: 0;210 - transition: max-height .28s ease, opacity .2s ease;211 - }207 +/* Details animation */ 208 +.details { 209 + margin-top: .5rem; 210 + overflow: hidden; 211 + max-height: 0; /* collapsed */ 212 + opacity: 0; 213 + transition: max-height .28s ease, opacity .2s ease; 214 +} 212 212 213 - .details.open {214 - max-height: 260px; /* big enough for your list */215 - opacity: 1;216 - }216 +.details.open { 217 + max-height: 260px; /* big enough for your list */ 218 + opacity: 1; 219 +} 217 217 218 - .details ul { margin: .25rem 0 0; padding-left: 1.1rem; } 219 - .details li { margin: .25rem 0; } 220 - 221 +.details ul { margin: .25rem 0 0; padding-left: 1.1rem; } 222 +.details li { margin: .25rem 0; } 221 221 /* METRICS */ 222 222 .metrics { 223 223 display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr);