HEX

File: /home/ezpgggd/www/aaindex.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Mansueto Marine</title>

  <style>
    :root{
      --card-bg: rgba(255,255,255,.88);
      --text: #0b1220;
      --muted: rgba(11,18,32,.75);
      --line: rgba(11,18,32,.12);
      --shadow: 0 22px 70px rgba(0,0,0,.45);
      --radius: 18px;
    }

    *{box-sizing:border-box}
    html,body{height:100%;margin:0}
    body{
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
      color:var(--text);
      background:#000;
      overflow:hidden;
    }

    /* VIDEO BACKGROUND */
    .video-bg{
      position:fixed;
      inset:0;
      z-index:-3;
      overflow:hidden;
    }

    .video-bg video{
      width:100%;
      height:100%;
      object-fit:cover;
    }

    /* OVERLAY */
    .overlay{
      position:fixed;
      inset:0;
      z-index:-2;
      background:
        radial-gradient(800px 400px at 20% 20%, rgba(0,0,0,.25), transparent 60%),
        linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65));
    }

    /* LAYOUT */
    .wrap{
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px 18px;
    }

    .card{
      width:min(620px,100%);
      background:var(--card-bg);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:34px 28px;
      text-align:center;
      border:1px solid rgba(255,255,255,.35);
    }

    .logo{
      width:96px;
      height:96px;
      object-fit:contain;
      margin:0 auto 14px;
      display:block;
      border-radius:50%;
      background:#fff;
      padding:6px;
    }

    .brand{
      font-size:13px;
      letter-spacing:.16em;
      text-transform:uppercase;
      opacity:.85;
      margin-bottom:10px;
    }

    h1{
      margin:0 0 10px;
      font-size:30px;
      font-weight:650;
    }

    p{
      margin:0 0 22px;
      font-size:16px;
      line-height:1.6;
      color:var(--muted);
    }

    .divider{
      height:1px;
      background:var(--line);
      margin:18px 0;
    }

    .contacts{
      display:flex;
      flex-direction:column;
      gap:10px;
      font-size:16px;
    }

    .contacts a{
      color:var(--text);
      text-decoration:none;
      font-weight:650;
    }

    .contacts a:hover{
      text-decoration:underline;
    }

    .small{
      margin-top:16px;
      font-size:12px;
      color:rgba(11,18,32,.55);
    }

    @media(max-width:420px){
      h1{font-size:26px}
      .logo{width:82px;height:82px}
      .card{padding:28px 18px}
    }
  </style>
</head>

<body>

  <!-- VIDEO BACKGROUND -->
  <div class="video-bg">
    <video autoplay muted loop playsinline>
      <source src="/wp-content/uploads/2024/05/Mansueto-9MB.mp4" type="video/mp4">
    </video>
  </div>

  <!-- OVERLAY -->
  <div class="overlay"></div>

  <!-- CONTENT -->
  <div class="wrap">
    <main class="card">
      <img
        src="https://www.mansuetomarine.it/wp-content/uploads/2022/02/logo_largo.jpg"
        alt="Mansueto Marine"
        class="logo"
      >

      <div class="brand">Mansueto Marine</div>

      <h1>Website under maintenance</h1>

      <p>
        We are currently working on a new version of our website to offer you a better experience.<br>
        We will be back online very soon.
      </p>

      <div class="divider"></div>

      <div class="contacts">
        <div>
          <a href="mailto:info@mansuetomarine.it">info@mansuetomarine.it</a>
        </div>
        <div>
          <a href="https://wa.me/393396709546">WhatsApp +39 339 670 9546</a>
        </div>
        <div style="font-weight:650;">
          Office phone +39 0184 501617
        </div>
      </div>

      <div class="small">Thank you for your patience.</div>
    </main>
  </div>

</body>
</html>