smueller/HexaHost-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance CSS styles for product features, values, team, and technology sections: Added new styles for lists, grid layouts, and improved text alignment and spacing for better visual presentation.

Browse Source
This commit is contained in:
TheOnlyMace
2026-01-06 21:41:27 +01:00
parent 65ff0da7a9
commit a6aab5208d
1 changed files with 106 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
public/assets/css/style.css
View File

@@ -450,10 +450,21 @@ body {
}
.product-features {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
list-style: disc;
padding-left: var(--spacing-xl);
margin-bottom: var(--spacing-lg);
text-align: left;
}
.product-features li {
color: var(--text-secondary);
font-size: var(--font-size-sm);
padding: var(--spacing-xs) 0;
line-height: 1.5;
}
.product-features li::marker {
color: var(--primary-color);
}
.feature {
@@ -1176,6 +1187,13 @@ body {
padding: var(--spacing-3xl) 0;
}
.values-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-xl);
margin-top: var(--spacing-2xl);
}
.values-list {
display: grid;
gap: var(--spacing-lg);
@@ -1183,9 +1201,93 @@ body {
.value-item {
display: flex;
align-items: flex-start;
align-items: center;
gap: var(--spacing-xl);
padding: var(--spacing-xl) var(--spacing-2xl);
}
.value-icon {
width: 32px;
height: 32px;
min-width: 32px;
color: var(--primary-color);
}
.value-item h3 {
font-size: var(--font-size-lg);
font-weight: 600;
margin-bottom: 0;
min-width: 180px;
}
.value-item p {
color: var(--text-secondary);
line-height: 1.5;
margin: 0;
}
/* Team Section */
.team {
padding: var(--spacing-3xl) 0;
}
.team-content {
margin-top: var(--spacing-2xl);
}
.team-text {
margin-bottom: var(--spacing-2xl);
}
.team-text p {
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: var(--spacing-lg);
}
.team-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: var(--spacing-lg);
padding: var(--spacing-2xl);
text-align: center;
}
/* Technology Section */
.technology {
padding: var(--spacing-3xl) 0;
background: rgba(255, 255, 255, 0.02);
}
.tech-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-xl);
margin-top: var(--spacing-2xl);
}
.tech-item {
padding: var(--spacing-xl);
text-align: center;
}
.tech-item .tech-icon {
width: 48px;
height: 48px;
margin: 0 auto var(--spacing-lg);
color: var(--primary-color);
}
.tech-item h3 {
font-size: var(--font-size-lg);
font-weight: 600;
margin-bottom: var(--spacing-md);
}
.tech-item p {
color: var(--text-secondary);
line-height: 1.6;
font-size: var(--font-size-sm);
}
.value-number {