Khwezi Mngoma
8d2efbeb4a
continuous-integration/drone/pr Build is passing
Redesigned account, checkout Added stock management design elements
127 lines
2.6 KiB
CSS
127 lines
2.6 KiB
CSS
/* ==========================================================================
|
|
Midrand Books — Contact View Layout Architecture Styles
|
|
========================================================================== */
|
|
|
|
.contact-page-container {
|
|
max-width: 1140px;
|
|
margin: 0 auto;
|
|
padding-left: 1.5rem;
|
|
padding-right: 1.5rem;
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
}
|
|
|
|
.contact-main-title {
|
|
font-size: 2.5rem;
|
|
letter-spacing: -0.03em;
|
|
color: #111111;
|
|
font-family: Georgia, 'Times New Roman', serif;
|
|
}
|
|
|
|
.tracking-wider {
|
|
letter-spacing: 0.12em;
|
|
}
|
|
|
|
.extra-small {
|
|
font-size: 0.72rem !important;
|
|
}
|
|
|
|
.metadata-title {
|
|
font-family: Georgia, 'Times New Roman', serif;
|
|
font-size: 1.2rem;
|
|
font-weight: 500;
|
|
color: #111111;
|
|
}
|
|
|
|
/* --- Metadata Info Panels --- */
|
|
.contact-metadata-card {
|
|
border-radius: 8px;
|
|
background-color: #FFFFFF;
|
|
border: 1px solid rgba(0, 0, 0, 0.06) !important;
|
|
}
|
|
|
|
.meta-label {
|
|
letter-spacing: 0.08em;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.meta-value {
|
|
color: #333333;
|
|
}
|
|
|
|
.contact-link {
|
|
color: #111111;
|
|
text-decoration: underline;
|
|
text-underline-offset: 3px;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.contact-link:hover {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* --- Form Fields --- */
|
|
.contact-form-panel {
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(0, 0, 0, 0.06) !important;
|
|
}
|
|
|
|
.premium-plaintext-field {
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
background-color: #FAFAFA;
|
|
outline: none;
|
|
border-radius: 6px;
|
|
padding: 0.75rem 0.95rem;
|
|
font-size: 0.9rem;
|
|
color: #111111;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.premium-plaintext-field:focus {
|
|
border-color: #111111;
|
|
box-shadow: 0 0 0 1px #111111;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
/* --- Premium Action Button --- */
|
|
.btn-premium-action {
|
|
background-color: #111111;
|
|
color: #FFFFFF;
|
|
border: 1px solid #111111;
|
|
border-radius: 6px;
|
|
font-family: var(--bs-font-monospace);
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-premium-action:hover {
|
|
background-color: transparent;
|
|
color: #111111;
|
|
}
|
|
|
|
/* --- Submission State Banner --- */
|
|
.submission-success-banner {
|
|
background-color: #FDFBFB;
|
|
border: 1px dashed rgba(0, 0, 0, 0.08);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.success-vector-checkmark {
|
|
color: #111111;
|
|
animation: bounceMarker 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
|
|
@keyframes bounceMarker {
|
|
from {
|
|
transform: scale(0.4);
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|