gitadmin/fraxlenet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update to content

Browse Source 
Updated general text
Added 'art' jobs
Optimised the line endings
This commit is contained in:
Danny
2026-06-03 12:36:20 +01:00
parent 1a3a6d61f9
commit afc32567eb
6 changed files with 380 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+98
View File
@@ -479,6 +479,7 @@ ul { list-style: none; }
.service-icon--orange { background: rgba(249,115,22,0.2); color: var(--orange); }
.service-icon--purple { background: rgba(167,139,250,0.2); color: #A78BFA; }
.service-icon--teal { background: rgba(13,148,136,0.2); color: #2DD4BF; }
.service-icon--gold { background: rgba(251,191,36,0.2); color: var(--gold); }
.service-card h3 {
font-family: var(--font-head);
@@ -494,6 +495,101 @@ ul { list-style: none; }
font-size: 0.94rem;
}
/* Keep the icon and text above the plant row */
.service-wide-icon, .service-wide-text { position: relative; z-index: 2; }
/* Full width feature band - sits below the 3 card grid */
.service-wide {
margin-top: 28px;
display: flex;
align-items: center;
gap: 32px;
background: linear-gradient(135deg, rgba(13,148,136,0.14), rgba(124,58,237,0.14));
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius);
padding: 40px 44px;
position: relative;
overflow: hidden;
transition: box-shadow var(--transition), border-color var(--transition), background var(--transition);
}
.service-wide::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--teal), var(--purple-bright));
}
.service-wide:hover {
border-color: rgba(255,255,255,0.2);
box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.service-wide-icon {
flex-shrink: 0;
width: 72px;
height: 72px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
background: rgba(13,148,136,0.2);
color: #2DD4BF;
}
.service-wide-text h3 {
font-family: var(--font-head);
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
margin-bottom: 10px;
color: var(--white);
}
.service-wide-text p {
color: rgba(255,255,255,0.7);
line-height: 1.72;
font-size: 0.97rem;
max-width: 70ch;
}
/* Row of plants that grow up from the bottom edge on hover - themed to the sustainable growth message */
.service-wide-plants {
position: absolute;
left: 0; right: 0; bottom: 3px;
height: 64px;
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 0 28px;
gap: 6px;
z-index: 1;
pointer-events: none;
}
.service-wide-plants i {
color: var(--teal);
font-size: 1.1rem;
transform: translateY(120%);
opacity: 0;
transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.5, 1), opacity 0.35s ease;
}
.service-wide:hover .service-wide-plants i {
transform: translateY(0);
opacity: 0.9;
}
.service-wide-plants i:nth-child(1) { transition-delay: 0.00s; font-size: 1.00rem; }
.service-wide-plants i:nth-child(2) { transition-delay: 0.05s; font-size: 1.30rem; }
.service-wide-plants i:nth-child(3) { transition-delay: 0.10s; font-size: 0.95rem; }
.service-wide-plants i:nth-child(4) { transition-delay: 0.15s; font-size: 1.20rem; }
.service-wide-plants i:nth-child(5) { transition-delay: 0.20s; font-size: 1.05rem; }
.service-wide-plants i:nth-child(6) { transition-delay: 0.25s; font-size: 1.35rem; }
.service-wide-plants i:nth-child(7) { transition-delay: 0.30s; font-size: 1.00rem; }
.service-wide-plants i:nth-child(8) { transition-delay: 0.35s; font-size: 1.20rem; }
.service-wide-plants i:nth-child(9) { transition-delay: 0.40s; font-size: 0.95rem; }
.service-wide-plants i:nth-child(10) { transition-delay: 0.45s; font-size: 1.25rem; }
.service-wide-plants i:nth-child(3n) { color: #34D399; }
.service-wide-plants i:nth-child(3n+1) { color: #5EEAD4; }
@media (prefers-reduced-motion: reduce) {
.service-wide-plants i { transition: opacity 0.25s ease; transform: none; }
}
/* ================================================
ABOUT
================================================ */
@@ -954,6 +1050,8 @@ ul { list-style: none; }
}
.services-grid { grid-template-columns: 1fr; }
.service-wide { flex-direction: column; text-align: center; gap: 20px; padding: 32px 24px; }
.service-wide-text p { max-width: none; }
.project-row { grid-template-columns: 110px 1fr auto; gap: 18px; padding: 20px 0; }
.project-row-img { height: 80px; }
.project-img-placeholder { font-size: 1.8rem; }