feat: Enhance responsiveness and layout for service and pricing templates

2026-05-27 13:55:50 +02:00
parent e8a2e78c71
commit b56bc1e03b
2 changed files with 113 additions and 2 deletions
@@ -163,12 +163,118 @@
 .module-panel .lede { color: #455e5e; font-weight: 600; }
 .module-panel h3 { margin-top: 1rem; color: #22595b; }
 .module-panel ol { margin-left: 1.1rem; }
+.module-panel p,
+.module-panel li,
+.module-panel dd {
+    line-height: 1.75;
+}

@media (max-width: 900px) {
    .module-shell { grid-template-columns: 1fr; }
    .module-nav { order: 2; }
    .module-content { order: 1; }
 }
+
+@media (max-width: 700px) {
+    .page-hero {
+        padding: 1.15rem 1rem;
+        border-radius: 16px;
+    }
+
+    .page-hero h1 {
+        font-size: clamp(1.55rem, 7vw, 2rem);
+    }
+
+    .page-hero p {
+        max-width: none;
+        font-size: 1.02rem;
+        line-height: 1.72;
+    }
+
+    .module-shell {
+        gap: 0.75rem;
+        margin-top: 0.85rem;
+    }
+
+    .module-nav {
+        padding: 0.55rem;
+        border-radius: 14px;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none;
+        background: linear-gradient(180deg, #ffffff 0%, #f8fbf8 100%);
+    }
+
+    .module-nav::-webkit-scrollbar {
+        display: none;
+    }
+
+    .module-nav ul {
+        display: flex;
+        gap: 0.5rem;
+        min-width: max-content;
+    }
+
+    .module-nav li {
+        margin: 0;
+        flex: 0 0 auto;
+    }
+
+    .module-nav a {
+        padding: 0.8rem 1rem;
+        font-size: 0.96rem;
+        line-height: 1.2;
+        white-space: nowrap;
+    }
+
+    .module-nav li.active a {
+        box-shadow: 0 8px 20px rgba(23, 63, 70, 0.08);
+        background: linear-gradient(90deg, #e4f4f2, #f7fcfb);
+    }
+
+    .module-content {
+        padding: 1rem;
+        border-radius: 14px;
+    }
+
+    .module-panel {
+        max-width: none;
+    }
+
+    .module-panel h2 {
+        font-size: 1.32rem;
+        line-height: 1.2;
+    }
+
+    .module-panel h3 {
+        font-size: 1.02rem;
+        margin-top: 1rem;
+    }
+
+    .module-panel p,
+    .module-panel li,
+    .module-panel dd {
+        font-size: 1rem;
+    }
+
+    .module-panel ol {
+        margin-left: 1rem;
+        padding-left: 0.2rem;
+    }
+
+    .module-panel dl {
+        margin: 0;
+    }
+
+    .module-panel dt {
+        font-weight: 700;
+        margin-top: 0.6rem;
+    }
+
+    .module-panel dd {
+        margin: 0.2rem 0 0;
+    }
+}
 </style>

 <script>