Implemented main home design and cart viewer

2026-05-23 15:37:44 +02:00
parent d8cb68e8bf
commit 5e839dca03
8 changed files with 1000 additions and 139 deletions
@@ -0,0 +1,141 @@
+/* Expanding Search Input Controls */
+.search-input-container {
+    max-width: 0;
+    opacity: 0;
+    overflow: hidden;
+    transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
+}
+
+    .search-input-container.is-active {
+        max-width: 280px;
+        opacity: 1;
+    }
+
+.custom-search-field {
+    font-size: 0.8rem;
+    height: 32px;
+    box-shadow: none !important;
+}
+
+/* Structural Layout Typography */
+.branding-logo {
+    font-size: 1.1rem;
+    letter-spacing: -0.5px;
+}
+
+.text-hero-wrapper {
+    margin-top: 5rem;
+    margin-bottom: 3.5rem;
+}
+
+.master-headline {
+    letter-spacing: -1.5px;
+    font-weight: 400;
+    line-height: 1.15;
+}
+
+.sub-headline {
+    max-width: 520px;
+    font-size: 0.95rem;
+    font-weight: 300;
+    line-height: 1.6;
+}
+
+/* Filtering Dropdown Drawer Settings */
+.filter-dropdown-panel {
+    border-radius: 12px;
+}
+
+.panel-section-heading {
+    letter-spacing: 0.5px;
+    font-size: 0.7rem;
+}
+
+.reset-link-btn {
+    font-size: 0.7rem;
+}
+
+/* Custom Minimal Separator Rule Layout */
+.custom-milled-line {
+    height: 35px;
+    margin-top: 5px;
+    margin-bottom: 25px;
+    z-index: 0;
+    pointer-events: none;
+}
+
+.center-bloom-shadow {
+    bottom: 15px;
+    width: 55%;
+    height: 50px;
+    background: radial-gradient(ellipse at bottom, rgba(20, 20, 20, 0.07) 0%, rgba(40, 40, 40, 0.02) 60%, rgba(255, 255, 255, 0) 100%);
+    filter: blur(10px);
+}
+
+.core-horizontal-rule {
+    bottom: 15px;
+    height: 1px;
+    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0) 100%);
+}
+
+/* View Engine Layout Presentation Variants: Grid Cards */
+.book-grid-card {
+    background-color: #F1F1F1;
+    border-radius: 12px;
+    min-height: 380px;
+}
+
+.badge-new-arrival {
+    background-color: #E63946;
+    font-size: 0.75rem;
+}
+
+.book-spine-fallback {
+    width: 130px;
+    height: 185px;
+    font-size: 0.65rem;
+    letter-spacing: 1px;
+    border-radius: 2px;
+}
+
+.product-card-title {
+    font-size: 0.95rem;
+    font-weight: 500;
+}
+
+/* View Engine Layout Presentation Variants: List Rows */
+.list-row-item {
+    border-bottom: 1px solid rgba(0,0,0,0.06);
+    transition: background-color 0.2s ease;
+}
+
+    .list-row-item:hover {
+        background-color: rgba(0,0,0,0.01);
+    }
+
+.structural-list-left {
+    flex: 2;
+}
+
+.list-item-title {
+    font-size: 0.95rem;
+    min-width: 260px;
+}
+
+.list-item-author {
+    min-width: 160px;
+}
+
+.list-item-tag {
+    font-size: 0.65rem;
+}
+
+.list-new-badge {
+    font-size: 0.65rem;
+}
+
+.list-item-price {
+    font-size: 0.9rem;
+    min-width: 80px;
+    text-align: right;
+}