Improve landing page mobile performance

2026-05-20 18:24:11 +02:00
parent 75b8a66c62
commit 81ddb781ca
2 changed files with 26 additions and 6 deletions
--- a/index.html
+++ b/index.html
@@ -4,10 +4,7 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MischLabs - Services</title>
-    <link rel="stylesheet" href="style.css?v=6">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css?v=7">
 </head>
 <body>
    <div class="bg-glow bg-glow-1"></div>
--- a/style.css
+++ b/style.css
@@ -25,7 +25,7 @@ html {
 }

 body {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
@@ -34,13 +34,15 @@ body {
    align-items: center;
    overflow-x: hidden;
    position: relative;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
 }

 /* ===== Background Glows ===== */
 .bg-glow {
    position: fixed;
    border-radius: 50%;
-    filter: blur(120px);
+    filter: blur(80px);
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
@@ -181,6 +183,8 @@ main {
    position: relative;
    overflow: visible;
    isolation: isolate;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
 }

 .card > * {
@@ -316,6 +320,10 @@ footer p {

 /* ===== Responsive ===== */
@media (max-width: 768px) {
+    .bg-glow {
+        display: none;
+    }
+
    header {
        padding: 3rem 1.5rem 1.5rem;
    }
@@ -335,6 +343,11 @@ footer p {

    .card {
        padding: 1.25rem;
+        animation: none;
+        transition:
+            border-color 0.2s ease,
+            background-color 0.2s ease,
+            box-shadow 0.2s ease;
    }

    .card-icon {
@@ -353,6 +366,16 @@ footer p {
    }
 }

+@media (hover: none) {
+    .card::after {
+        display: none;
+    }
+
+    .card:hover {
+        transform: none;
+    }
+}
+
@media (max-width: 480px) {
    .card-banner {
        flex-direction: column;