Hardening responsiveness and SEO

hdyc-svelte/src/lib/components/Calculator.svelte

@@ -8,6 +8,7 @@
   import QuickConversionTable from '$lib/components/QuickConversionTable.svelte';
 
   export let config: CalculatorDef;
+  export let showTitle = true;
 
   let val1 = '';
   let val2 = '';
@@ -70,12 +71,16 @@
 </script>
 
 <div class="calculator-card">
-  <div class="calc-header">
-    <h2>{config.name}</h2>
-    {#if config.teaser}
-      <p class="calc-subtitle">{config.teaser}</p>
-    {/if}
-  </div>
+  {#if showTitle || config.teaser}
+    <div class="calc-header">
+      {#if showTitle}
+        <h2>{config.name}</h2>
+      {/if}
+      {#if config.teaser}
+        <p class="calc-subtitle" class:no-title={!showTitle}>{config.teaser}</p>
+      {/if}
+    </div>
+  {/if}
 
   <div class="calc-body" class:three-col={has3}>
     <div class="input-group">
@@ -181,6 +186,9 @@
     color: rgba(255, 255, 255, 0.85);
     font-weight: 400;
   }
+  .calc-subtitle.no-title {
+    margin-top: 0;
+  }
 
   .calc-body {
     display: grid;
@@ -261,6 +269,10 @@
     background: var(--accent-dark);
     transform: rotate(180deg);
   }
+  .swap-btn:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px var(--accent-glow);
+  }
 
   .calc-footer {
     display: flex;
@@ -284,16 +296,34 @@
     color: #fff;
     border-color: var(--accent);
   }
+  .clear-btn:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px var(--accent-glow);
+  }
   .formula-hint {
     font-size: 0.78rem;
     color: var(--text-muted);
     font-family: 'JetBrains Mono', monospace;
   }
 
+  @media (max-width: 900px) {
+    .calc-footer {
+      flex-wrap: wrap;
+      gap: 0.75rem;
+    }
+    .formula-hint {
+      width: 100%;
+    }
+  }
+
   @media (max-width: 640px) {
+    .calc-header {
+      padding: 1.2rem 1.2rem 0.9rem;
+    }
     .calc-body {
       grid-template-columns: 1fr;
       gap: 0.75rem;
+      padding: 1.25rem;
     }
     .calc-body.three-col {
       grid-template-columns: 1fr;
@@ -307,5 +337,8 @@
     .swap-btn:hover {
       transform: rotate(270deg);
     }
+    .calc-footer {
+      padding: 0.9rem 1.25rem 1rem;
+    }
   }
 </style>