Add map, working days, and mascot decorations to Flapjack Bros site

Embeds an OpenStreetMap view of 2 St Hilda's Road, adds a Working Days
section (Sat/Sun 3-5pm), swaps the footer's cash-only note for creator
credit, and adds background flapjack mascot illustrations with speech
bubbles. Also updates project-description.md with the leaflet perk and
order pricing details.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

project-description.md

@@ -4,10 +4,10 @@ paragraph for subtitle about us
  We are a company that have formed in 2026.
 subtitle = where you can find us
 paragraph for subtitle where you can find us
-You can find us near the English channel on 2 St Hilda's road in Hythe, where you get a 20% discount and a free poster. We strictly accept cash only.
+You can find us near the English channel on 2 St Hilda's road in Hythe, where you get a 20% discount, a free poster and leaflet. We strictly accept cash only.
 subtitle = what we sell 
 paragraph for subtitle what we sell
 We sell a range of fun things including: flapjacks, chocolate-popcorn biscuits and lots of other things. You can find out more if you come to 2 St Hilda's road. Thank you!
 subtitle = order
 paragraph for subtitle order
-You can order a maximum of 10 products with free 
+You can order a maximum of 10 products with free delivery. You can only order if you live in Kent. Here are the prices for the products. If you go to 2 St Hilda's road the prices will be: 80p for a flapjack, 1 pound 50p for a chocolate-popcorn biscuit and everything else will cost 1 pound. If you order online the prices will be: 1 pound for a flapjack, 1 pound 75p for a chocolate-popcorn biscuits and 1 pound 25p for everything else.

site/flapjack-brothers/index.html

@@ -138,6 +138,35 @@
   .about-card .emoji{font-size:3rem; display:block; margin-bottom:18px;}
   .about-card p{font-size:1.15rem; line-height:1.75; color:var(--brown); font-weight:600;}
 
+  /* ---------- MASCOTS (background decoration) ---------- */
+  #find-us, #hours{position:relative;}
+  .mascot{
+    position:absolute; display:none; align-items:center; gap:10px;
+    z-index:0; pointer-events:none;
+  }
+  .mascot .face{
+    width:64px; height:64px; flex:none;
+    filter:drop-shadow(0 8px 14px rgba(58,36,20,0.25));
+  }
+  .mascot .bubble{
+    position:relative; background:#fff; border:2.5px solid var(--choc);
+    border-radius:14px; padding:8px 14px; font-weight:800; font-size:0.82rem;
+    color:var(--brown-dark); white-space:nowrap;
+  }
+  .mascot .bubble::before{
+    content:''; position:absolute; left:-11px; bottom:11px;
+    width:0; height:0; border:9px solid transparent; border-right-color:var(--choc);
+  }
+  .mascot .bubble::after{
+    content:''; position:absolute; left:-8px; bottom:12px;
+    width:0; height:0; border:8px solid transparent; border-right-color:#fff;
+  }
+  .mascot-find{top:16%; left:2%; transform:rotate(-8deg);}
+  .mascot-hours{top:14%; right:2%; transform:rotate(7deg);}
+  @media (min-width:1180px){
+    .mascot{display:flex;}
+  }
+
   /* ---------- FIND US ---------- */
   .find-grid{
     display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
@@ -145,12 +174,18 @@
   .find-map{
     aspect-ratio:4/3; background:var(--choc); border-radius:22px;
     position:relative; overflow:hidden;
-    display:flex; align-items:center; justify-content:center;
     box-shadow:0 10px 0 var(--line);
   }
-  .find-map .pin{
+  .find-map iframe{
-    font-size:4.5rem;
+    width:100%; height:100%; border:0; display:block;
+    filter:sepia(0.35) saturate(1.15) hue-rotate(-6deg) brightness(0.96);
   }
+  .find-map .map-link{
+    position:absolute; right:14px; bottom:14px;
+    background:#fff; color:var(--brown-dark); font-weight:800; font-size:0.8rem;
+    padding:8px 14px; border-radius:999px; box-shadow:0 4px 0 var(--line);
+  }
+  .find-map .map-link:hover{color:var(--caramel-dark);}
   .find-text .perk{
     display:flex; gap:14px; align-items:flex-start; margin-bottom:20px;
     font-size:1.05rem; font-weight:700; color:var(--brown-dark);
@@ -168,6 +203,28 @@
     padding:12px 20px; border-radius:14px; font-weight:800; color:var(--caramel-dark); font-size:0.95rem;
   }
 
+  /* ---------- WORKING DAYS ---------- */
+  .hours-card{
+    background:#fff; border-radius:24px; padding:44px;
+    max-width:760px; margin:0 auto;
+    box-shadow:0 10px 0 var(--line);
+  }
+  .hours-grid{
+    display:grid; grid-template-columns:repeat(7,1fr); gap:12px;
+  }
+  .day{
+    background:var(--oat); border-radius:14px; padding:20px 6px; text-align:center;
+    font-weight:800; font-size:0.95rem; color:var(--brown);
+  }
+  .day span{
+    display:block; margin-top:10px; font-size:0.72rem; font-weight:700; color:#8a6f52;
+  }
+  .day.open{background:var(--caramel); color:#fff; transform:translateY(-4px); box-shadow:0 6px 0 var(--caramel-dark);}
+  .day.open span{color:#fff8ec;}
+  .hours-note{
+    text-align:center; margin-top:28px; font-size:1rem; font-weight:700; color:var(--brown);
+  }
+
   /* ---------- WHAT WE SELL ---------- */
   .products{background:var(--oat); border-top:2px solid var(--line); border-bottom:2px solid var(--line);}
   .products-grid{
@@ -213,6 +270,7 @@
     .find-grid{grid-template-columns:1fr;}
     .find-map{order:-1; max-width:420px; margin:0 auto; width:100%;}
     .products-grid{grid-template-columns:1fr 1fr;}
+    .hours-grid{grid-template-columns:repeat(4,1fr);}
   }
   @media (max-width: 600px){
     .nav-links{display:none;}
@@ -220,6 +278,8 @@
     .about-card{padding:32px 24px;}
     .products-grid{grid-template-columns:1fr;}
     .hero-cta .btn{width:100%; justify-content:center;}
+    .hours-card{padding:28px 20px;}
+    .hours-grid{grid-template-columns:repeat(3,1fr);}
   }
 </style>
 </head>
@@ -240,6 +300,20 @@
       <circle cx="30" cy="29" r="6.5" fill="#3e2312"/>
       <circle cx="68" cy="66" r="6.5" fill="#3e2312"/>
     </symbol>
+    <symbol id="flapjack-face" viewBox="0 0 100 100">
+      <defs>
+        <linearGradient id="faceGrad" x1="10" y1="10" x2="90" y2="90" gradientUnits="userSpaceOnUse">
+          <stop offset="0" stop-color="#d98a3a"/>
+          <stop offset="1" stop-color="#a8611c"/>
+        </linearGradient>
+      </defs>
+      <rect x="11" y="11" width="78" height="78" rx="22" fill="url(#faceGrad)" stroke="#3e2312" stroke-width="3.5"/>
+      <path d="M27 42 Q34 32 41 42" stroke="#3e2312" stroke-width="4.5" stroke-linecap="round" fill="none"/>
+      <path d="M59 42 Q66 32 73 42" stroke="#3e2312" stroke-width="4.5" stroke-linecap="round" fill="none"/>
+      <ellipse cx="50" cy="63" rx="11" ry="8" fill="#3e2312"/>
+      <circle cx="29" cy="77" r="3" fill="#3e2312" opacity="0.5"/>
+      <circle cx="69" cy="79" r="2.5" fill="#3e2312" opacity="0.4"/>
+    </symbol>
   </defs>
 </svg>
 
@@ -249,6 +323,7 @@
     <div class="nav-links">
       <a href="#about">About Us</a>
       <a href="#find-us">Find Us</a>
+      <a href="#hours">Working Days</a>
       <a href="#shop">What We Sell</a>
     </div>
   </nav>
@@ -281,13 +356,24 @@
   </section>
 
   <section id="find-us">
+    <div class="mascot mascot-find">
+      <svg class="face" viewBox="0 0 100 100"><use href="#flapjack-face"/></svg>
+      <div class="bubble">Yummy!</div>
+    </div>
     <div class="wrap">
       <div class="sec-head">
         <span class="kicker">Where You Can Find Us</span>
         <h2>Come say hello</h2>
       </div>
       <div class="find-grid">
-        <div class="find-map"><span class="pin">📍</span></div>
+        <div class="find-map">
+          <iframe
+            src="https://www.openstreetmap.org/export/embed.html?bbox=1.0767%2C51.0637%2C1.0817%2C51.0662&amp;layer=mapnik&amp;marker=51.0650%2C1.0792"
+            title="Map to The Flapjack Bros, 2 St Hilda's Road, Hythe"
+            loading="lazy"
+            referrerpolicy="no-referrer-when-downgrade"></iframe>
+          <a class="map-link" href="https://www.openstreetmap.org/?mlat=51.0650&amp;mlon=1.0792#map=18/51.0650/1.0792" target="_blank" rel="noopener">Open Map ↗</a>
+        </div>
         <div class="find-text">
           <p class="addr">You can find us near the English Channel on <strong>2 St Hilda's Road, Hythe</strong>.</p>
           <div class="perk"><span class="ico">%</span> Get a 20% discount when you visit</div>
@@ -298,6 +384,31 @@
     </div>
   </section>
 
+  <section id="hours">
+    <div class="mascot mascot-hours">
+      <svg class="face" viewBox="0 0 100 100"><use href="#flapjack-face"/></svg>
+      <div class="bubble">I've never tasted anything this good!</div>
+    </div>
+    <div class="wrap">
+      <div class="sec-head">
+        <span class="kicker">Working Days</span>
+        <h2>Weekends only, worth the wait</h2>
+      </div>
+      <div class="hours-card">
+        <div class="hours-grid">
+          <div class="day">Mon<span>Closed</span></div>
+          <div class="day">Tue<span>Closed</span></div>
+          <div class="day">Wed<span>Closed</span></div>
+          <div class="day">Thu<span>Closed</span></div>
+          <div class="day">Fri<span>Closed</span></div>
+          <div class="day open">Sat<span>3 – 5PM</span></div>
+          <div class="day open">Sun<span>3 – 5PM</span></div>
+        </div>
+        <p class="hours-note">Open Saturdays and Sundays, 3pm – 5pm.</p>
+      </div>
+    </div>
+  </section>
+
   <section class="products" id="shop">
     <div class="wrap">
       <div class="sec-head">
@@ -344,12 +455,13 @@
       <div class="footer-links">
         <a href="#about">About Us</a>
         <a href="#find-us">Find Us</a>
+        <a href="#hours">Working Days</a>
         <a href="#shop">What We Sell</a>
       </div>
     </div>
     <div class="footer-bottom">
       <span>© 2026 The Flapjack Bros. All rights reserved.</span>
-      <span>Cash only · 2 St Hilda's Road, Hythe</span>
+      <span>Created and supported by Mykolay</span>
     </div>
   </div>
 </footer>