From 9a9319e3a370dcae9e98f471c34d025e0da7b313 Mon Sep 17 00:00:00 2001
From: Reef <reef@odoo4projects.com>
Date: Thu, 20 Aug 2026 09:55:10 +0000
Subject: [PATCH] perf: inline critical CSS, defer GSAP, preconnect cdnjs,
 font-display swap

- Inline all above-the-fold CSS (hero, server-banner, buttons, layout) as
  inline <style> in <head> to eliminate render-blocking style.css
- Load full style.css via media='print' onload pattern (async, non-blocking)
- Move GSAP from <head> to before </body> (right before script.js)
- Preconnect to cdnjs.cloudflare.com
- Override Font Awesome 6 font-display to 'swap' to prevent FOIT
---
 index.html | 51 +++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 49 insertions(+), 2 deletions(-)
diff --git a/index.html b/index.html
index 2ee22ea..a4f201c 100644
--- a/index.html
+++ b/index.html
@@ -26,12 +26,58 @@
     </script>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin />
     <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Marcellus&display=swap" />
     <link rel="preload" as="style" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Marcellus&display=swap" media="print" onload="this.media='all'" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" media="print" onload="this.media='all'" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
-    <link rel="stylesheet" href="style.css" />
+    <style>
+      /* critical: Grand Hotel Business Lounge */
+      *{box-sizing:border-box}
+      body{margin:0;font-family:Inter,'Segoe UI',sans-serif;font-size:1rem;line-height:1.6;color:var(--ink);background:var(--cream)}
+      h1,h2,h3,h4{font-family:Marcellus,'Georgia',serif;font-weight:400;line-height:1.15;margin-top:0;margin-bottom:.5rem}
+      h1{font-size:clamp(2rem,5vw,3.6rem)}h2{font-size:clamp(1.6rem,3.2vw,2.4rem)}h3{font-size:clamp(1.1rem,2vw,1.4rem)}
+      p{margin-top:0;margin-bottom:1rem}a{color:var(--brass-deep);text-decoration:none}a:hover{color:var(--brass)}img{max-width:100%;height:auto;vertical-align:middle}
+      @font-face{font-family:'Font Awesome 6 Brands';font-display:swap}@font-face{font-family:'Font Awesome 6 Free';font-display:swap}
+      :root{--midnight:#0d1b2e;--midnight-2:#12233c;--midnight-3:#162a45;--brass:#c9a227;--brass-bright:#ddb84a;--brass-deep:#8a6f1f;--cream:#f4f0e8;--cream-2:#ece6da;--ivory:#faf7f1;--ink:#171c26;--ink-soft:rgba(23,28,38,.6);--ink-faint:rgba(23,28,38,.38);--line:rgba(23,28,38,.09);--line-brass:rgba(201,162,39,.25);--success:#1e7a46;--radius:.5rem;--radius-lg:1rem;--radius-pill:2rem;--shadow-rest:0 2px 8px rgba(13,27,46,.08);--shadow-hover:0 12px 30px rgba(13,27,46,.16);--shadow-brass:0 8px 20px rgba(201,162,39,.25)}
+      .container{width:86%;padding:0 1.25rem;margin:0 auto;max-width:1200px}
+      .btn{display:inline-block;padding:.7rem 2rem;font-family:Marcellus,Georgia,serif;font-size:.9rem;letter-spacing:.04em;text-transform:uppercase;border:1px solid transparent;border-radius:var(--radius);cursor:pointer;text-decoration:none;transition:all .25s}
+      .btn-brass{background:var(--brass);color:var(--midnight);border-color:var(--brass)}.btn-brass:hover{background:var(--brass-bright);border-color:var(--brass-bright);transform:translateY(-1px);box-shadow:var(--shadow-brass)}
+      .btn-outline{background:transparent;color:var(--cream);border-color:var(--line-brass)}.btn-outline:hover{border-color:var(--brass);color:var(--brass);background:rgba(201,162,39,.08)}
+      .btn-lg{padding:.85rem 2.5rem;font-size:1rem}
+      .hero{background:var(--midnight);padding:4rem 0 0;position:relative;overflow:hidden;min-height:85vh;display:flex;flex-direction:column}
+      .hero::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--midnight) 50%,rgba(13,27,46,.4) 100%);opacity:.5;z-index:0}
+      .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}.hero-bg-slide{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:.25;filter:brightness(1.15)saturate(1.1)}
+      .hero .container{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:center}
+      .hero-kicker{font-family:Inter,sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--brass);margin-bottom:.75rem}
+      .hero h1{color:#fff;max-width:700px;margin-bottom:1rem;font-weight:400}.hero h1 span{color:var(--brass)}
+      .hero-sub{font-size:1.05rem;color:rgba(255,255,255,.7);max-width:560px;line-height:1.7;margin-bottom:1.5rem}
+      .hero-stats{display:flex;gap:1.5rem;margin-bottom:2rem;flex-wrap:wrap}.hero-stat{display:flex;align-items:center;gap:.4rem;color:rgba(255,255,255,.65);font-size:.85rem}.hero-stat i{color:var(--brass);font-size:.75rem}
+      .hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}
+      .server-banner{background:var(--midnight);padding:2rem 0 1.5rem;border-top:1px solid var(--line-brass);border-bottom:1px solid var(--line-brass);position:relative;overflow:hidden}
+      .server-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 100%,rgba(201,162,39,.06) 0%,transparent 70%);pointer-events:none}
+      .server-banner-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;flex-wrap:wrap;gap:.5rem}
+      .server-banner-kicker{font-family:Marcellus,Georgia,serif;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brass)}
+      .server-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.75rem}
+      .server-card{background:rgba(255,255,255,.035);border:1px solid rgba(201,162,39,.12);border-radius:var(--radius);padding:1rem .75rem;text-align:center;transition:all .4s cubic-bezier(.16,1,.3,1);position:relative}
+      .server-card:hover{background:rgba(255,255,255,.06);border-color:rgba(201,162,39,.25)}
+      .server-card .server-city{font-family:Marcellus,Georgia,serif;font-size:1.05rem;color:#fff;margin-bottom:.15rem}
+      .server-card .server-region{font-family:Inter,sans-serif;font-size:.68rem;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.06em}
+      .server-card.server-best{background:rgba(201,162,39,.1);border-color:var(--brass);box-shadow:0 0 25px rgba(201,162,39,.15),inset 0 0 25px rgba(201,162,39,.04);transform:translateY(-3px)}
+      .server-card.server-best .server-city{color:var(--brass-bright)}
+      .hero-city-label{position:absolute;bottom:2rem;right:2rem;background:rgba(13,27,46,.88);border:1px solid var(--line-brass);border-radius:var(--radius);padding:.7rem 1.25rem;color:rgba(255,255,255,.8);font-family:Marcellus,Georgia,serif;font-size:.9rem;z-index:2;transform:translateX(150%);white-space:nowrap;backdrop-filter:blur(6px);pointer-events:none}
+      .hero-city-label strong{color:var(--brass-bright);font-weight:400}
+      .section-light{background:var(--cream);padding:3.5rem 0}.section-dark{background:var(--midnight);padding:3.5rem 0}.section-dark h2{color:#fff}
+      .section-kicker{font-family:Inter,sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--brass);margin-bottom:.5rem;text-align:center}
+      .section-title{text-align:center;margin-bottom:2rem;color:var(--ink)}.section-dark .section-title{color:#fff}
+      @media(max-width:992px){.server-grid{grid-template-columns:repeat(3,1fr)}}
+      @media(max-width:768px){.hero{min-height:auto;padding:3rem 0 0}.hero-actions{flex-direction:column}.hero-actions .btn{width:100%;text-align:center}.hero-stats{gap:.75rem}.hero-city-label{bottom:1rem;right:1rem;font-size:.78rem;padding:.5rem .9rem}}
+      @media(max-width:576px){.server-grid{grid-template-columns:repeat(2,1fr)}.server-banner-header{flex-direction:column;align-items:flex-start}}
+      .status-dot{width:7px;height:7px;border-radius:50%;background:var(--brass);display:inline-block;animation:statusPulse 1.2s ease-in-out infinite}
+      @keyframes statusPulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
+    </style>
+    <link rel="stylesheet" href="style.css" media="print" onload="this.media='all'" />
+    <noscript><link rel="stylesheet" href="style.css" /></noscript>
   </head>
   <body>
     <!--
@@ -372,6 +418,7 @@
       </div>
     </footer>
 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
     <script src="script.js"></script>
     <script defer src="https://static.odoo4projects.com/agent-odoo4projects/agent.js"></script>
   </body>
