Update styles

web/static/public.css

@@ -770,7 +770,11 @@ dl, .nature div + div, .outside_activities > div {
 .campsite_type_prices dl {
     display: flex;
     justify-content: space-between;
-    gap: 2.5rem;
+    gap: 1rem;
+}
+
+.campsite_type_prices dl div:hover {
+  background-color: transparent;
 }
 
 .campsite_type_prices div {
@@ -1034,7 +1038,6 @@ input[type="checkbox"]:checked::before {
 /* Some focus styles for accessibility */
 input[type="radio"]:focus,
 input[type="checkbox"]:focus {
-  outline: solid 1px;
   outline-offset: 2px;
 }
 
@@ -1138,6 +1141,7 @@ body > footer div, .campsite_type_features, .campsite_type_detail {
 
 body > footer div {
     display: flex;
+    gap: 3rem;
     justify-content: space-between;
     margin: 0 2.5rem;
     border-bottom: 3px solid black;
@@ -1179,24 +1183,136 @@ body > footer span {
 
 /* contact */
 
+@media (max-width: 64rem) {
+	.contact-page {
+	  grid-template-columns: 1fr !important;
+	}
+}
+
 .contact-page {
   display: grid;
   grid-template-columns: 1fr 4fr;
+  grid-gap: 20px;
 }
 
 address {
-  font-style: normal;
-  font-size: 2rem;
   font-size: calc(16px + .4vw);
-  margin: 30px 0 0 0;
+  margin: 30px 0 30px 0;
 }
 
 #map {
   border-radius: 5px;
 }
 
+.leaflet-popup-content-wrapper {
+  border-radius: 5px !important;
+}
+
+.leaflet-popup-content {
+  font-size: 2rem !important;
+}
+
 /* camping map */
 
 #arbres {
   mix-blend-mode: multiply;
 }
+
+/* surrounding */
+
+.ad-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+	margin: 50px 0;
+}
+
+.ad-image-container {
+	width: 50%;
+	min-height: 300px;
+	  border-top-left-radius: 5px;
+	  border-bottom-left-radius: 5px;
+	  background-image: url(https://camper.tandem.ws/media/0c0625998215b6caec6e871ab26d791c330f34bb46a2facc9d502d769d207e7b/barranquisme.jpg);
+	  background-repeat: no-repeat;
+	  background-position: center center;
+	  background-size: cover;
+}
+
+.ad-description-container {
+	width: 50%;
+	min-height: 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 50px;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+  background-color: var(--accent-2);
+}
+
+.ad-description-container h3 {
+	font-size: calc(16px + .7vw);
+	font-weight: 400;
+	line-height: 9rem;
+}
+
+.ad-button {
+  font-size: calc(18px + 1.7vw);
+  font-weight: 600;
+  line-height: 0.9em;
+  display: flex;
+  align-items: flex-start;
+  column-gap: 0.5em;
+  border-radius: 5px;
+  color: var(--contrast);
+}
+
+.ad-button .ad-icon svg {
+  width: 40px;
+  transform: rotate(320deg) translate3d(-5px,-10px,0);
+  transition: all 0.5s ease;
+}
+
+.ad-button:hover .gb-icon svg {
+  transform: rotate(320deg) translate3d(10px,0,0);
+}
+
+.arrow_link {
+  fill: var(--contrast);
+}
+
+/* services */
+
+.services_icon  {
+  position: relative;
+  z-index: 2;
+}
+
+dt {
+  position: relative;
+  z-index: 3;
+}
+
+
+.services_icon::before {
+  content: '';
+  background: var(--accent-2);
+  position: absolute;
+  width: 60px;
+  height: 60px;
+  top: 2px;
+  left: 2px;
+  border-radius: 50px;
+  z-index: 1;
+}
+
+/*
+.services_icon:hover::before {
+  background: var(--accent-2);
+}
+*/
+
+.services_icon a {
+  color: var(--accent);
+  text-decoration: var(--accent) wavy underline;
+}

web/templates/public/contact.gohtml

@@ -18,6 +18,7 @@
 		<h2>{{( pgettext "Contact" "title" )}}</h2>
 
 		{{ template "companyAddress" .PublicPage.CompanyAddress }}
+		<p>GPS: 42º 14’ 43,86’’ / 2º 35’ 58,26’’</p>
 	</div>
 
     <div id="map"></div>

web/templates/public/layout.gohtml

@@ -87,6 +87,12 @@
             {{- end }}
         {{- end }}
 
+        <section>
+            <h2>Obertura 2023</h2>
+            <p><strong>Camping i Safari tents:</strong><br>de 08/04 a 09/10</p>
+            <p><strong>Cabanes i Bungalows:</strong><br>de 08/04 a 11/12</p>
+        </section>
+
         <section>
             <h2>{{ .CompanyAddress.TradeName }}</h2>
             {{ template "companyAddress" .CompanyAddress }}

web/templates/public/services.gohtml

@@ -33,7 +33,7 @@
 
     <dl>
         {{ range .Services -}}
-            <div>
+            <div class="services_icon">
                 <dt class="icon_{{ .IconName }}">{{ .Name }}</dt>
                 <dd>{{ .Description | raw }}</dd>
             </div>

web/templates/public/surroundings.gohtml

@@ -9,9 +9,25 @@
 {{ define "content" -}}
     <h2>{{( pgettext "Surroundings" "title" )}}</h2>
 
+<section>
+
+<div class="ad-container">
+
+	<div class="ad-image-container"></div>
+
+	<div class="ad-description-container">
+		<h3 class="ad-title">Vine a fer barranquisme per Sadernes!</h3>
+		<a class="ad-button" href="#">Reserva el teu dia<span class="ad-icon"><svg viewBox="0 0 93.69895 67.38545" xmlns="http://www.w3.org/2000/svg" class="arrow_link"><path d="m67.38545,67.38545l-13.49997-2.97457c.57203-5.72033,2.74576-10.99256,6.52117-15.8167,3.77542-4.82414,8.04659-7.94172,12.81353-9.35273H0v-11.09743h73.22018c-4.76694-1.41101-9.03812-4.53813-12.81353-9.38134-3.77542-4.84321-5.94914-10.12498-6.52117-15.8453l13.49997-2.91737c.26695,8.38981,2.70762,15.01586,7.32202,19.87813s10.94489,7.61757,18.99148,8.26587v11.09743c-8.04659.6483-14.37709,3.40359-18.99148,8.26587-4.6144,4.86228-7.05507,11.48832-7.32202,19.87813Z"></path></svg></span></a>
+
+	</div>
+</div>
+
+</section>
+
     <section class="outside_activities">
         <h3>{{( pgettext "What to Do Outside the Campsite?" "title" )}}</h3>
         <div>
+
             <p>{{( gettext "Campsite Montagut is an ideal starting point for quiet outings, climbing, swimming in the river and gorges, volcanoes, the Fageda d’en Jordà, cycle tours for all ages…." )}}</p>
             <img src="/static/images/excusions.webp" alt="" width="640" height="960">
             <img src="/static/images/escalada_sadernes.webp" alt="" width="640" height="960">