From b2fd5f652a88c2b329501e9e1ac7a6ce28dbe6da Mon Sep 17 00:00:00 2001
From: Bruno Silva <info@wirediv.com>
Date: Sun, 19 Apr 2026 20:17:46 -0400
Subject: [PATCH] added page

---
 capelli/index.html | 329 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 329 insertions(+)
 create mode 100644 capelli/index.html

diff --git a/capelli/index.html b/capelli/index.html
new file mode 100644
index 0000000..bf80f44
--- /dev/null
+++ b/capelli/index.html
@@ -0,0 +1,329 @@
+<!DOCTYPE html>
+<html class="light" lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+  <meta http-equiv="refresh" content="300">
+  <link
+    href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&amp;family=Manrope:wght@300;400;600;800&amp;display=swap"
+    rel="stylesheet">
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
+    rel="stylesheet">
+  <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+  <script id="tailwind-config">
+    tailwind.config = {
+      darkMode: "class",
+      theme: {
+        extend: {
+          "colors": {
+            "error": "#ba1a1a",
+            "primary": "#6b081d",
+            "primary-fixed-dim": "#ffb3b6",
+            "error-container": "#ffdad6",
+            "surface-variant": "#e2e2e2",
+            "primary-fixed": "#ffdada",
+            "on-secondary": "#ffffff",
+            "secondary-container": "#cbcafd",
+            "on-error-container": "#93000a",
+            "on-secondary-fixed": "#17163f",
+            "on-error": "#ffffff",
+            "on-surface-variant": "#574142",
+            "on-tertiary-fixed": "#3f001a",
+            "outline-variant": "#ddc0c0",
+            "surface-dim": "#dadada",
+            "on-primary": "#ffffff",
+            "outline": "#8a7172",
+            "on-tertiary-container": "#ff9eb8",
+            "surface-container-low": "#f3f4f3",
+            "surface-container-lowest": "#ffffff",
+            "surface-tint": "#a63744",
+            "on-primary-fixed": "#40000c",
+            "on-tertiary": "#ffffff",
+            "surface-container-highest": "#e2e2e2",
+            "secondary": "#5a5a86",
+            "tertiary-fixed": "#ffd9e1",
+            "primary-container": "#8b2332",
+            "surface-bright": "#f9f9f9",
+            "secondary-fixed-dim": "#c3c2f5",
+            "inverse-primary": "#ffb3b6",
+            "on-secondary-container": "#545480",
+            "tertiary-container": "#852748",
+            "secondary-fixed": "#e2dfff",
+            "on-tertiary-fixed-variant": "#802345",
+            "surface-container-high": "#e8e8e8",
+            "surface-container": "#eeeeed",
+            "background": "#f9f9f9",
+            "inverse-surface": "#2f3131",
+            "on-secondary-fixed-variant": "#42426d",
+            "on-background": "#1a1c1c",
+            "inverse-on-surface": "#f0f1f0",
+            "tertiary": "#670d32",
+            "surface": "#f9f9f9",
+            "on-surface": "#1a1c1c",
+            "on-primary-fixed-variant": "#861f2f",
+            "on-primary-container": "#ffa0a5",
+            "tertiary-fixed-dim": "#ffb1c4"
+          },
+          "borderRadius": {
+            "DEFAULT": "0.125rem",
+            "lg": "0.25rem",
+            "xl": "0.5rem",
+            "full": "0.75rem"
+          },
+          "fontFamily": {
+            "headline": ["Noto Serif"],
+            "body": ["Manrope"],
+            "label": ["Manrope"]
+          }
+        },
+      },
+    }
+  </script>
+  <style>
+    html {
+      height: 100%;
+      overflow: hidden;
+      overscroll-behavior: none;
+    }
+
+    body {
+      margin: 0;
+      height: 100%;
+      overflow: hidden;
+      overscroll-behavior: none;
+      background-color: #f9f9f9;
+      font-family: 'Manrope', sans-serif;
+      touch-action: manipulation;
+      -webkit-text-size-adjust: 100%;
+    }
+
+    /* Full-screen stage: no document scroll; content is scaled to fit (see script) */
+    .fit-viewport {
+      position: fixed;
+      inset: 0;
+      z-index: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      box-sizing: border-box;
+    }
+
+    .fit-outer {
+      overflow: hidden;
+      flex-shrink: 0;
+    }
+
+    .fit-inner {
+      width: 100vw;
+      box-sizing: border-box;
+      transform-origin: top left;
+    }
+
+    .page-root {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      max-width: 100%;
+      box-sizing: border-box;
+      padding-top: max(0.5rem, env(safe-area-inset-top));
+      padding-right: max(1rem, env(safe-area-inset-right));
+      padding-bottom: max(1rem, env(safe-area-inset-bottom));
+      padding-left: max(1rem, env(safe-area-inset-left));
+    }
+
+    .headline-display {
+      font-size: clamp(1.75rem, 5vw + 0.75rem, 4.5rem);
+      line-height: 1.1;
+    }
+
+    .material-symbols-outlined {
+      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
+    }
+
+    .editorial-shadow {
+      box-shadow: 0 32px 64px -12px rgba(26, 28, 28, 0.06);
+    }
+  </style>
+</head>
+
+<body class="text-on-background bg-surface antialiased">
+  <div id="fit-viewport" class="fit-viewport">
+    <div id="fit-outer" class="fit-outer">
+      <div id="fit-inner" class="fit-inner">
+        <div class="page-root">
+    <!-- Header -->
+    <header
+      class="bg-stone-50/80 backdrop-blur-xl z-10 flex w-full flex-col gap-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6 pb-6 pt-6 sm:pb-8 sm:pt-8 lg:pb-10 lg:pt-12">
+      <div class="flex min-w-0 items-center gap-3 sm:gap-6">
+        <img alt="Mole Institute Logo" class="h-12 w-auto shrink-0 sm:h-16"
+          data-alt="Sophisticated medical institute logo featuring elegant serif typography and a minimalist burgundy emblem on a clean white background"
+          src="https://www.moleinstitute.com/wp-content/uploads/2025/10/cropped-Mole_Institute_logo_emblem_gold-e1761595525281.png">
+        <h1 class="font-headline truncate text-2xl font-bold tracking-tight text-primary sm:text-3xl">Mole Institute
+        </h1>
+      </div>
+      <div class="flex max-w-full items-center gap-2 text-on-surface-variant sm:gap-4 sm:font-semibold">
+        <span class="material-symbols-outlined shrink-0 text-primary">verified_user</span>
+        <span class="font-label text-xs uppercase tracking-widest sm:text-sm">Certified Dermatology Specialists</span>
+      </div>
+    </header>
+    <!-- Main: column on small screens, split from lg up -->
+    <main class="flex w-full flex-col sm:flex-row sm:items-stretch">
+      <!-- Editorial -->
+      <div
+        class="relative flex w-full flex-col justify-center px-4 py-8 sm:px-8 sm:py-10 lg:w-1/2 lg:px-10 lg:py-12 xl:px-16">
+        <!-- Background Subtle Texture -->
+        <div class="absolute inset-0 opacity-5 pointer-events-none bg-[url('image-11.png')] bg-cover bg-center"
+          data-alt="Microscopic view of healthy skin texture with soft warm lighting and clinical burgundy color tones">
+        </div>
+        <div class="relative z-10">
+          <span class="mb-4 block text-sm font-extrabold uppercase tracking-[0.2em] text-primary font-label sm:mb-6">Capelli</span>
+          <h2 class="headline-display font-headline mb-6 font-bold text-on-background sm:mb-8">
+            Expert Mole &amp; <span class="hidden sm:inline"><br></span>
+            <span class="text-primary">Skin Tags</span> Removal
+          </h2>
+          <div class="flex max-w-md flex-col gap-5 sm:gap-6">
+            <div class="flex items-start gap-4">
+              <div class="mt-1 bg-primary/10 p-2 rounded-lg">
+                <span class="material-symbols-outlined text-primary">biotech</span>
+              </div>
+              <div>
+                <h3 class="font-bold text-lg text-on-background">Advanced Diagnostic Imaging
+                </h3>
+                <p class="text-on-surface-variant leading-relaxed">State-of-the-art dermoscopy
+                  for precise identification and safe removal protocols.</p>
+              </div>
+            </div>
+            <div class="flex items-start gap-4">
+              <div class="mt-1 bg-primary/10 p-2 rounded-lg">
+                <span class="material-symbols-outlined text-primary">medical_services</span>
+              </div>
+              <div>
+                <h3 class="font-bold text-lg text-on-background">Minimally Invasive Care</h3>
+                <p class="text-on-surface-variant leading-relaxed">Surgical excellence with a
+                  focus on aesthetic outcomes and rapid recovery.</p>
+              </div>
+            </div>
+          </div>
+          <div class="mt-8 flex items-center gap-3 sm:mt-10 sm:gap-4 lg:mt-12">
+            <div class="h-px w-8 shrink-0 bg-primary sm:w-12"></div>
+            <p class="font-headline text-lg italic text-primary-container sm:text-xl">Excellence in Dermatological Care
+            </p>
+          </div>
+        </div>
+      </div>
+      <!-- QR & CTA -->
+      <div
+        class="relative flex w-full flex-col items-center justify-center bg-surface-container-low px-4 py-10 sm:px-8 lg:w-1/2 lg:px-10 xl:px-16">
+        <div class="absolute right-0 top-0 h-40 w-40 rounded-bl-[8rem] bg-primary/5 sm:h-64 sm:w-64 sm:rounded-bl-[12rem]">
+        </div>
+        <div
+          class="relative z-10 flex w-full max-w-sm flex-col items-center rounded-[1.75rem] border border-outline-variant/10 bg-surface-container-lowest p-8 editorial-shadow sm:rounded-[2.5rem] sm:p-10 lg:p-12">
+          <div class="mb-6 rounded-2xl border border-outline-variant/20 bg-white p-3 sm:mb-8 sm:p-4">
+            <img alt="Scan to book consultation"
+              class="mx-auto aspect-square w-[min(12rem,70vw)] max-w-[192px] sm:max-w-none sm:w-48"
+              data-alt="High-resolution digital QR code centered on a clean white background with subtle burgundy border accents"
+              src="https://www.moleinstitute.com/wp-content/uploads/2026/04/mole_institute_qr_code.png">
+          </div>
+          <h3 class="mb-2 text-center font-headline text-xl font-bold text-on-background sm:text-2xl">Scan to Book</h3>
+          <p class="mb-6 text-center font-medium text-on-surface-variant sm:mb-8">Secure your consultation with our
+            specialist team in seconds.</p>
+          <button type="button"
+            class="flex w-full items-center justify-center gap-3 rounded-full bg-gradient-to-r from-primary to-primary-container py-3.5 pl-8 pr-8 text-base font-bold text-white shadow-lg shadow-primary/20 sm:py-4 sm:text-lg"
+            aria-label="Continue"><span class="material-symbols-outlined">arrow_forward</span>
+          </button>
+        </div>
+        <div
+          class="mt-8 flex max-w-full flex-wrap items-center justify-center gap-x-4 gap-y-2 text-center font-label text-[0.65rem] uppercase tracking-widest text-on-surface-variant/60 sm:mt-10 sm:gap-x-6 sm:gap-y-3 sm:text-xs lg:mt-12">
+          <span>No Referral Required</span>
+          <span class="hidden h-1 w-1 rounded-full bg-outline sm:inline-block" aria-hidden="true"></span>
+          <span>Private &amp; Confidential</span>
+          <span class="hidden h-1 w-1 rounded-full bg-outline sm:inline-block" aria-hidden="true"></span>
+          <span>Walk-ins Welcome</span>
+        </div>
+      </div>
+    </main>
+    <div class="pointer-events-none absolute bottom-4 left-4 flex items-center gap-3 sm:bottom-8 sm:left-8 lg:bottom-16 lg:left-16"
+      aria-hidden="true">
+      <div class="h-2.5 w-2.5 rounded-full bg-primary sm:h-3 sm:w-3"></div>
+      <div class="h-2.5 w-2.5 rounded-full bg-primary/40 sm:h-3 sm:w-3"></div>
+      <div class="h-2.5 w-2.5 rounded-full bg-primary/10 sm:h-3 sm:w-3"></div>
+    </div>
+      </div>
+    </div>
+  </div>
+</div>
+  <script>
+    (function () {
+      var outer = document.getElementById('fit-outer');
+      var inner = document.getElementById('fit-inner');
+      if (!outer || !inner) return;
+
+      function viewportSize() {
+        var vv = window.visualViewport;
+        if (vv) {
+          return { w: vv.width, h: vv.height };
+        }
+        return { w: window.innerWidth, h: window.innerHeight };
+      }
+
+      function fit() {
+        var vp = viewportSize();
+        var w = inner.scrollWidth;
+        var h = inner.scrollHeight;
+        if (w < 1 || h < 1) return;
+        var s = Math.min(vp.w / w, vp.h / h);
+        if (s <= 0 || !isFinite(s)) return;
+        inner.style.transform = 'scale(' + s + ')';
+        outer.style.width = w * s + 'px';
+        outer.style.height = h * s + 'px';
+      }
+
+      var scheduled = false;
+      function scheduleFit() {
+        if (scheduled) return;
+        scheduled = true;
+        requestAnimationFrame(function () {
+          scheduled = false;
+          requestAnimationFrame(fit);
+        });
+      }
+
+      window.addEventListener('resize', scheduleFit);
+      if (window.visualViewport) {
+        window.visualViewport.addEventListener('resize', scheduleFit);
+        window.visualViewport.addEventListener('scroll', scheduleFit);
+      }
+      window.addEventListener('orientationchange', function () {
+        setTimeout(scheduleFit, 200);
+      });
+
+      var ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(scheduleFit) : null;
+      if (ro) ro.observe(inner);
+
+      var imgs = document.images;
+      for (var i = 0; i < imgs.length; i++) {
+        if (!imgs[i].complete) imgs[i].addEventListener('load', scheduleFit);
+      }
+
+      function runWhenReady() {
+        scheduleFit();
+        if (document.fonts && document.fonts.ready) {
+          document.fonts.ready.then(scheduleFit);
+        }
+      }
+
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', runWhenReady);
+      } else {
+        runWhenReady();
+      }
+      window.addEventListener('load', scheduleFit);
+    })();
+  </script>
+</body>
+
+</html>
\ No newline at end of file