Added legal pages, contact and abut us

Redesigned account, checkout Added stock management design elements
2026-06-16 23:32:44 +02:00
parent 5d614d2a94
commit 8d2efbeb4a
18 changed files with 1642 additions and 555 deletions
@@ -0,0 +1,126 @@
+/* ==========================================================================
+   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;
+    }
+}