Brunobrno
564418501c
Refactored email sending to use a single HTML template with a base layout, removed plain text email templates, and updated all related backend logic. Introduced a new ContactMe model, serializer, Celery task, and API endpoints for handling contact form submissions, including email notifications. Renamed ShopConfiguration to SiteConfiguration throughout the backend for consistency. Updated frontend to remove unused components, add a new Services section, and adjust navigation and contact form integration.
94 lines
2.2 KiB
CSS
94 lines
2.2 KiB
CSS
/* Services section styles with clip-path animations */
|
|
|
|
.wrapper {
|
|
position: relative;
|
|
padding-top: 4rem;
|
|
padding-bottom: 4rem;
|
|
}
|
|
|
|
.header {
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
margin-bottom: 3rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.servicesStack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}.card {
|
|
position: relative;
|
|
isolation: isolate;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
backdrop-filter: saturate(140%) blur(8px);
|
|
}
|
|
|
|
.cardBg {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: -1;
|
|
background: radial-gradient(1200px 400px at 10% 10%, rgba(99, 102, 241, 0.25), transparent 60%),
|
|
radial-gradient(900px 300px at 90% 90%, rgba(16, 185, 129, 0.25), transparent 60%);
|
|
clip-path: polygon(0% 0%, 60% 0%, 100% 40%, 100% 100%, 0% 100%);
|
|
animation: floatClip 10s ease-in-out infinite;
|
|
}
|
|
|
|
.cardInner {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.cardHeader {
|
|
display: grid;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.icon {
|
|
font-size: 2rem;
|
|
line-height: 1;
|
|
margin-bottom: 0.5rem;
|
|
}/* Removed tags styles as not needed for simplified version */
|
|
|
|
/* Variant hues per card for subtle differentiation */
|
|
.card1 .cardBg {
|
|
background: radial-gradient(1200px 400px at 10% 10%, rgba(99, 102, 241, 0.35), transparent 60%),
|
|
radial-gradient(900px 300px at 90% 90%, rgba(56, 189, 248, 0.25), transparent 60%);
|
|
}
|
|
|
|
.card2 .cardBg {
|
|
background: radial-gradient(1200px 400px at 10% 10%, rgba(16, 185, 129, 0.35), transparent 60%),
|
|
radial-gradient(900px 300px at 90% 90%, rgba(245, 158, 11, 0.25), transparent 60%);
|
|
}
|
|
|
|
.card3 .cardBg {
|
|
background: radial-gradient(1200px 400px at 10% 10%, rgba(236, 72, 153, 0.35), transparent 60%),
|
|
radial-gradient(900px 300px at 90% 90%, rgba(59, 130, 246, 0.25), transparent 60%);
|
|
}
|
|
|
|
/* Removed card4 as we only have 3 services now */@keyframes floatClip {
|
|
0% {
|
|
clip-path: polygon(0% 0%, 60% 0%, 100% 40%, 100% 100%, 0% 100%);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
50% {
|
|
clip-path: polygon(0% 0%, 55% 0%, 100% 35%, 100% 100%, 0% 100%);
|
|
transform: translate3d(0, -6px, 0);
|
|
}
|
|
100% {
|
|
clip-path: polygon(0% 0%, 60% 0%, 100% 40%, 100% 100%, 0% 100%);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
.cta {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 2rem;
|
|
}
|
|
|