Template:Services/styles.css: Difference between revisions
From Amethyst Collaborative Knowledge
Created page with ".services-intro { color: #5c5066; font-size: 1.05em; max-width: 720px; line-height: 1.7; margin-bottom: 2em; } .service { display: grid; grid-template-columns: 200px 1fr; gap: 0.25rem 2rem; padding: 1.75rem 0; border-bottom: 1px solid #e2dce8; align-items: start; } .service:last-child { border-bottom: none; } .service-sidebar { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }..." |
No edit summary |
||
| Line 5: | Line 5: | ||
line-height: 1.7; | line-height: 1.7; | ||
margin-bottom: 2em; | margin-bottom: 2em; | ||
text-align: center; | |||
} | } | ||
Revision as of 17:32, 11 February 2026
.services-intro {
color: #5c5066;
font-size: 1.05em;
max-width: 720px;
line-height: 1.7;
margin-bottom: 2em;
text-align: center;
}
.service {
display: grid;
grid-template-columns: 200px 1fr;
gap: 0.25rem 2rem;
padding: 1.75rem 0;
border-bottom: 1px solid #e2dce8;
align-items: start;
}
.service:last-child {
border-bottom: none;
}
.service-sidebar {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.service-icon {
width: 40px;
height: 40px;
background: #f4f0f8;
border: 1px solid #e2dce8;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.service-icon img {
width: 20px;
height: 20px;
}
.service-label {
font-size: 1.1em;
font-weight: 600;
color: #4a2d6b;
line-height: 1.35;
}
.service-body p {
color: #5c5066;
font-size: 0.97em;
line-height: 1.72;
margin: 0 0 0.6rem 0;
}
.service-body p:last-child {
margin-bottom: 0;
}
.service-detail {
font-size: 0.9em;
color: #8a7f94;
font-style: italic;
margin-top: 0.4rem;
}
.services-cta {
margin-top: 2.5rem;
padding: 2rem 2.25rem;
background: #f9f7fb;
border: 1px solid #e2dce8;
border-radius: 10px;
}
.services-cta-heading {
font-size: 1.25em;
font-weight: 600;
color: #4a2d6b;
margin: 0 0 0.5rem 0;
}
.services-cta p {
color: #5c5066;
font-size: 0.97em;
line-height: 1.7;
margin: 0;
}
.services-cta a {
color: #6b4c91;
font-weight: 500;
border-bottom: 1px solid #9b7cc4;
text-decoration: none;
}
.services-cta a:hover {
color: #4a2d6b;
border-color: #4a2d6b;
}
@media (max-width: 700px) {
.service {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.service-sidebar {
flex-direction: row;
align-items: center;
}
}