camper/web/static/public.css

1664 lines
41 KiB
CSS
Raw Normal View History

Split templates and handlers into admin and public I need to check that the user is an employee (or admin) in administration handlers, but i do not want to do it for each handler, because i am bound to forget it. Thus, i added the /admin sub-path for these resources. The public-facing web is the rest of the resources outside /admin, but for now there is only home, to test whether it works as expected or not. The public-facing web can not relay on the user’s language settings, as the guest user has no way to set that. I would be happy to just use the Accept-Language header for that, but apparently Google does not use that header[0], and they give four alternatives: a country-specific domain, a subdomain with a generic top-level domain (gTLD), subdirectories with a gTLD, or URL parameters (e.g., site.com?loc=de). Of the four, Google does not recommend URL parameters, and the customer is already using subdirectories with the current site, therefor that’s what i have chosen. Google also tells me that it is a very good idea to have links between localized version of the same resources, either with <link> elements, Link HTTP response headers, or a sitemap file[1]; they are all equivalent in the eyes of Google. I have choosen the Link response headers way, because for that i can simply “augment” ResponseHeader to automatically add these headers when the response status is 2xx, otherwise i would need to pass down the original URL path until it reaches the template. Even though Camper is supposed to be a “generic”, multi-company application, i think i will stick to the easiest route and write the templates for just the “first” customer. [0]: https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites [1]: https://developers.google.com/search/docs/specialty/international/localized-versions
2023-08-05 01:42:37 +00:00
/**
* SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
* SPDX-FileCopyrightText: 2023 Oriol Carbonell <info@oriolcarbonell.cat>
Split templates and handlers into admin and public I need to check that the user is an employee (or admin) in administration handlers, but i do not want to do it for each handler, because i am bound to forget it. Thus, i added the /admin sub-path for these resources. The public-facing web is the rest of the resources outside /admin, but for now there is only home, to test whether it works as expected or not. The public-facing web can not relay on the user’s language settings, as the guest user has no way to set that. I would be happy to just use the Accept-Language header for that, but apparently Google does not use that header[0], and they give four alternatives: a country-specific domain, a subdomain with a generic top-level domain (gTLD), subdirectories with a gTLD, or URL parameters (e.g., site.com?loc=de). Of the four, Google does not recommend URL parameters, and the customer is already using subdirectories with the current site, therefor that’s what i have chosen. Google also tells me that it is a very good idea to have links between localized version of the same resources, either with <link> elements, Link HTTP response headers, or a sitemap file[1]; they are all equivalent in the eyes of Google. I have choosen the Link response headers way, because for that i can simply “augment” ResponseHeader to automatically add these headers when the response status is 2xx, otherwise i would need to pass down the original URL path until it reaches the template. Even though Camper is supposed to be a “generic”, multi-company application, i think i will stick to the easiest route and write the templates for just the “first” customer. [0]: https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites [1]: https://developers.google.com/search/docs/specialty/international/localized-versions
2023-08-05 01:42:37 +00:00
* SPDX-License-Identifier: AGPL-3.0-only
*/
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro Bold'), local('MabryPro-Bold'), url('fonts/MabryPro-Bold.woff2') format('woff2');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro Medium'), local('MabryPro-Medium'), url('fonts/MabryPro-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro Black'), local('MabryPro-Black'), url('fonts/MabryPro-Black.woff2') format('woff2');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro Light Italic'), local('MabryPro-LightItalic'), url('fonts/MabryPro-LightItalic.woff2') format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro Bold Italic'), local('MabryPro-BoldItalic'), url('fonts/MabryPro-BoldItalic.woff2') format('woff2');
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro Light'), local('MabryPro-Light'), url('fonts/MabryPro-Light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro Black Italic'), local('MabryPro-BlackItalic'), url('fonts/MabryPro-BlackItalic.woff2') format('woff2');
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro Medium Italic'), local('MabryPro-MediumItalic'), url('fonts/MabryPro-MediumItalic.woff2') format('woff2');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro Italic'), local('MabryPro-Italic'), url('fonts/MabryPro-Italic.woff2') format('woff2');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro'), local('MabryPro-Regular'), url('fonts/MabryPro-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
Split templates and handlers into admin and public I need to check that the user is an employee (or admin) in administration handlers, but i do not want to do it for each handler, because i am bound to forget it. Thus, i added the /admin sub-path for these resources. The public-facing web is the rest of the resources outside /admin, but for now there is only home, to test whether it works as expected or not. The public-facing web can not relay on the user’s language settings, as the guest user has no way to set that. I would be happy to just use the Accept-Language header for that, but apparently Google does not use that header[0], and they give four alternatives: a country-specific domain, a subdomain with a generic top-level domain (gTLD), subdirectories with a gTLD, or URL parameters (e.g., site.com?loc=de). Of the four, Google does not recommend URL parameters, and the customer is already using subdirectories with the current site, therefor that’s what i have chosen. Google also tells me that it is a very good idea to have links between localized version of the same resources, either with <link> elements, Link HTTP response headers, or a sitemap file[1]; they are all equivalent in the eyes of Google. I have choosen the Link response headers way, because for that i can simply “augment” ResponseHeader to automatically add these headers when the response status is 2xx, otherwise i would need to pass down the original URL path until it reaches the template. Even though Camper is supposed to be a “generic”, multi-company application, i think i will stick to the easiest route and write the templates for just the “first” customer. [0]: https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites [1]: https://developers.google.com/search/docs/specialty/international/localized-versions
2023-08-05 01:42:37 +00:00
*, *::before, *::after {
box-sizing: inherit;
Split templates and handlers into admin and public I need to check that the user is an employee (or admin) in administration handlers, but i do not want to do it for each handler, because i am bound to forget it. Thus, i added the /admin sub-path for these resources. The public-facing web is the rest of the resources outside /admin, but for now there is only home, to test whether it works as expected or not. The public-facing web can not relay on the user’s language settings, as the guest user has no way to set that. I would be happy to just use the Accept-Language header for that, but apparently Google does not use that header[0], and they give four alternatives: a country-specific domain, a subdomain with a generic top-level domain (gTLD), subdirectories with a gTLD, or URL parameters (e.g., site.com?loc=de). Of the four, Google does not recommend URL parameters, and the customer is already using subdirectories with the current site, therefor that’s what i have chosen. Google also tells me that it is a very good idea to have links between localized version of the same resources, either with <link> elements, Link HTTP response headers, or a sitemap file[1]; they are all equivalent in the eyes of Google. I have choosen the Link response headers way, because for that i can simply “augment” ResponseHeader to automatically add these headers when the response status is 2xx, otherwise i would need to pass down the original URL path until it reaches the template. Even though Camper is supposed to be a “generic”, multi-company application, i think i will stick to the easiest route and write the templates for just the “first” customer. [0]: https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites [1]: https://developers.google.com/search/docs/specialty/international/localized-versions
2023-08-05 01:42:37 +00:00
}
* {
margin: 0;
}
html {
box-sizing: border-box;
Split templates and handlers into admin and public I need to check that the user is an employee (or admin) in administration handlers, but i do not want to do it for each handler, because i am bound to forget it. Thus, i added the /admin sub-path for these resources. The public-facing web is the rest of the resources outside /admin, but for now there is only home, to test whether it works as expected or not. The public-facing web can not relay on the user’s language settings, as the guest user has no way to set that. I would be happy to just use the Accept-Language header for that, but apparently Google does not use that header[0], and they give four alternatives: a country-specific domain, a subdomain with a generic top-level domain (gTLD), subdirectories with a gTLD, or URL parameters (e.g., site.com?loc=de). Of the four, Google does not recommend URL parameters, and the customer is already using subdirectories with the current site, therefor that’s what i have chosen. Google also tells me that it is a very good idea to have links between localized version of the same resources, either with <link> elements, Link HTTP response headers, or a sitemap file[1]; they are all equivalent in the eyes of Google. I have choosen the Link response headers way, because for that i can simply “augment” ResponseHeader to automatically add these headers when the response status is 2xx, otherwise i would need to pass down the original URL path until it reaches the template. Even though Camper is supposed to be a “generic”, multi-company application, i think i will stick to the easiest route and write the templates for just the “first” customer. [0]: https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites [1]: https://developers.google.com/search/docs/specialty/international/localized-versions
2023-08-05 01:42:37 +00:00
font-size: 62.5%;
--contrast: #303334;
--contrast-2: #5f6158;
--contrast-3: #b2b2be;
--base: #f0f0f0;
--base-2: #f7f8f9;
--base-3: #ffffff;
--accent: #00aa7d;
--accent-2: #FFE37F;
--accent-3: #9adff4;
--clar-rgb: 239, 237, 236;
--clar: rgb(var(--clar-rgb));
Split templates and handlers into admin and public I need to check that the user is an employee (or admin) in administration handlers, but i do not want to do it for each handler, because i am bound to forget it. Thus, i added the /admin sub-path for these resources. The public-facing web is the rest of the resources outside /admin, but for now there is only home, to test whether it works as expected or not. The public-facing web can not relay on the user’s language settings, as the guest user has no way to set that. I would be happy to just use the Accept-Language header for that, but apparently Google does not use that header[0], and they give four alternatives: a country-specific domain, a subdomain with a generic top-level domain (gTLD), subdirectories with a gTLD, or URL parameters (e.g., site.com?loc=de). Of the four, Google does not recommend URL parameters, and the customer is already using subdirectories with the current site, therefor that’s what i have chosen. Google also tells me that it is a very good idea to have links between localized version of the same resources, either with <link> elements, Link HTTP response headers, or a sitemap file[1]; they are all equivalent in the eyes of Google. I have choosen the Link response headers way, because for that i can simply “augment” ResponseHeader to automatically add these headers when the response status is 2xx, otherwise i would need to pass down the original URL path until it reaches the template. Even though Camper is supposed to be a “generic”, multi-company application, i think i will stick to the easiest route and write the templates for just the “first” customer. [0]: https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites [1]: https://developers.google.com/search/docs/specialty/international/localized-versions
2023-08-05 01:42:37 +00:00
}
body {
font-family: 'Mabry Pro', sans-serif;
Split templates and handlers into admin and public I need to check that the user is an employee (or admin) in administration handlers, but i do not want to do it for each handler, because i am bound to forget it. Thus, i added the /admin sub-path for these resources. The public-facing web is the rest of the resources outside /admin, but for now there is only home, to test whether it works as expected or not. The public-facing web can not relay on the user’s language settings, as the guest user has no way to set that. I would be happy to just use the Accept-Language header for that, but apparently Google does not use that header[0], and they give four alternatives: a country-specific domain, a subdomain with a generic top-level domain (gTLD), subdirectories with a gTLD, or URL parameters (e.g., site.com?loc=de). Of the four, Google does not recommend URL parameters, and the customer is already using subdirectories with the current site, therefor that’s what i have chosen. Google also tells me that it is a very good idea to have links between localized version of the same resources, either with <link> elements, Link HTTP response headers, or a sitemap file[1]; they are all equivalent in the eyes of Google. I have choosen the Link response headers way, because for that i can simply “augment” ResponseHeader to automatically add these headers when the response status is 2xx, otherwise i would need to pass down the original URL path until it reaches the template. Even though Camper is supposed to be a “generic”, multi-company application, i think i will stick to the easiest route and write the templates for just the “first” customer. [0]: https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites [1]: https://developers.google.com/search/docs/specialty/international/localized-versions
2023-08-05 01:42:37 +00:00
font-size: 1.6rem;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
background-color: var(--clar);
color: var(--contrast);
max-width: 200rem;
margin-left: auto;
margin-right: auto;
overflow-x: hidden;
Split templates and handlers into admin and public I need to check that the user is an employee (or admin) in administration handlers, but i do not want to do it for each handler, because i am bound to forget it. Thus, i added the /admin sub-path for these resources. The public-facing web is the rest of the resources outside /admin, but for now there is only home, to test whether it works as expected or not. The public-facing web can not relay on the user’s language settings, as the guest user has no way to set that. I would be happy to just use the Accept-Language header for that, but apparently Google does not use that header[0], and they give four alternatives: a country-specific domain, a subdomain with a generic top-level domain (gTLD), subdirectories with a gTLD, or URL parameters (e.g., site.com?loc=de). Of the four, Google does not recommend URL parameters, and the customer is already using subdirectories with the current site, therefor that’s what i have chosen. Google also tells me that it is a very good idea to have links between localized version of the same resources, either with <link> elements, Link HTTP response headers, or a sitemap file[1]; they are all equivalent in the eyes of Google. I have choosen the Link response headers way, because for that i can simply “augment” ResponseHeader to automatically add these headers when the response status is 2xx, otherwise i would need to pass down the original URL path until it reaches the template. Even though Camper is supposed to be a “generic”, multi-company application, i think i will stick to the easiest route and write the templates for just the “first” customer. [0]: https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites [1]: https://developers.google.com/search/docs/specialty/international/localized-versions
2023-08-05 01:42:37 +00:00
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
img {
height: auto;
}
Split templates and handlers into admin and public I need to check that the user is an employee (or admin) in administration handlers, but i do not want to do it for each handler, because i am bound to forget it. Thus, i added the /admin sub-path for these resources. The public-facing web is the rest of the resources outside /admin, but for now there is only home, to test whether it works as expected or not. The public-facing web can not relay on the user’s language settings, as the guest user has no way to set that. I would be happy to just use the Accept-Language header for that, but apparently Google does not use that header[0], and they give four alternatives: a country-specific domain, a subdomain with a generic top-level domain (gTLD), subdirectories with a gTLD, or URL parameters (e.g., site.com?loc=de). Of the four, Google does not recommend URL parameters, and the customer is already using subdirectories with the current site, therefor that’s what i have chosen. Google also tells me that it is a very good idea to have links between localized version of the same resources, either with <link> elements, Link HTTP response headers, or a sitemap file[1]; they are all equivalent in the eyes of Google. I have choosen the Link response headers way, because for that i can simply “augment” ResponseHeader to automatically add these headers when the response status is 2xx, otherwise i would need to pass down the original URL path until it reaches the template. Even though Camper is supposed to be a “generic”, multi-company application, i think i will stick to the easiest route and write the templates for just the “first” customer. [0]: https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites [1]: https://developers.google.com/search/docs/specialty/international/localized-versions
2023-08-05 01:42:37 +00:00
input, button, textarea, select {
font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
p + p, dl + p {
margin-top: 1.5em;
}
h2 {
font-size: 4.2rem;
font-weight: 400;
}
a {
color: var(--contrast);
text-decoration: none;
}
address {
font-style: normal;
}
body > a[href="#content"], .sr-only {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
body > a[href="#content"]:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
clip: auto !important;
clip-path: none;
color: #21759b;
display: block;
font-size: 1.4rem;
font-weight: 700;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
}
body > header {
position: sticky;
top: 0;
z-index: 9999;
padding: 1rem 2.5rem;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
justify-content: space-between;
}
body > header > address {
margin: 0 0 1em;
display: flex;
gap: 2em;
}
body > header > address, nav:first-of-type a {
font-size: 1.3rem;
}
nav:first-of-type .has-submenu > a {
line-height: 1.2;
}
nav:first-of-type .has-submenu > a::after {
top: .5rem;
}
nav:first-of-type .has-submenu ul {
top: 2rem;
}
body > header > address a {
display: flex;
gap: .5em;
}
body > header > address a::before {
display: inline-block;
width: 1.2rem;
aspect-ratio: 1;
content: '';
background: left center / 100% no-repeat;
}
body > header > address a[href^='tel:']::before {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"%3E%3Crect width="256" height="256" fill="none"/%3E%3Cpath d="M164.39,145.34a8,8,0,0,1,7.59-.69l47.16,21.13a8,8,0,0,1,4.8,8.3A48.33,48.33,0,0,1,176,216,136,136,0,0,1,40,80,48.33,48.33,0,0,1,81.92,32.06a8,8,0,0,1,8.3,4.8l21.13,47.2a8,8,0,0,1-.66,7.53L89.32,117a7.93,7.93,0,0,0-.54,7.81c8.27,16.93,25.77,34.22,42.75,42.41a7.92,7.92,0,0,0,7.83-.59Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3C/svg%3E');
}
body > header > address a[href^='mailto:']::before {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"%3E%3Crect width="256" height="256" fill="none"/%3E%3Cpolyline points="224 56 128 144 32 56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3Cpath d="M32,56H224a0,0,0,0,1,0,0V192a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V56A0,0,0,0,1,32,56Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3Cline x1="110.55" y1="128" x2="34.47" y2="197.74" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3Cline x1="221.53" y1="197.74" x2="145.45" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3C/svg%3E');
}
body > header, nav .has-submenu ul {
background-color: rgba(var(--clar-rgb), 0.7);
2024-01-13 00:20:31 +00:00
/* background: linear-gradient(180deg, rgba(0,170,125,0.7021009087228641) 35%, rgba(240,240,240,0.7021009087228641) 35%); */
backdrop-filter: blur(10px);
border-bottom: 1px solid;
}
h1 a {
display: flex;
align-items: center;
}
h1 a span {
display: inline-block;
}
h1 a .logo {
width: 9rem;
height: 5.1633rem;
background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 209.62463 120.27728"%3E%3Cpath d="m102.10584,21.36518s15.78382,27.66469,51.74793,31.08194l-1.43503,10.41504s-7.02735,3.85898-7.51532,4.45149c-.48786.5924-17.41148,7.42712-20.34098,7.59008-2.92939.16307-13.72109.10905-14.04701-.62769-.32603-.73675-16.96005-28.72295-16.95779-32.16343,0-.18506,3.01532-26.44336,8.54819-20.74742Z" fill="%23a4c480" stroke-width="0"/%3E%3Cpath d="m154.60698,63.26961l11.07138.63548s5.45032-48.4924-22.5546-52.25112l-.18608,1.29294,10.33565,13.93141,1.24885,16.53929-.4229,16.65601.5077,3.19599Z" fill="%23969189" stroke-width="0"/%3E%3Cpath d="m59.98896,13.07467s26.34299,16.24631,33.85829,32.03453h2.18499v-9.02184l2.23121-6.99542,5.14967-9.73333,3.96251-2.62987s8.53287-9.22889,29.83861-5.08471c21.30463,4.14418,22.90476,11.23106,26.57542,23.12839,3.67064,11.8962,1.89537,28.65032,1.89537,28.65032l11.17265,3.52303s-.09146-9.67818,2.9162-17.32566c3.00766-7.64736,5.56715-24.27484,19.32456-37.32302l1.35125-1.72351L132.62842,1.12773,59.72236,10.71343l.2666,2.36124Z" fill="%23d1c7b8" stroke-width="0"/%3E%3Cpath d="m175.91826,101.64108s11.48323-14.95787,10.31478-21.95104c-1.16855-6.99328-8.30382-14.01521-16.6462-15.6803-8.34227-1.66521-11.83564,0-11.83564,0l-3.14422-.74013-.92508-5.81706-2.4041-.75986s-7.30826-1.80944-9.24761.75986c-1.93936,2.56829-10.35775,5.34352-10.35775,5.34352l-6.4734,2.03409s-6.74439,3.44048-9.43154,2.48349c-2.68716-.9571-10.13413,6.76413-10.13413,6.76413l-6.14083,7.02734-1.08375,4.51092,4.27421.72581s31.57746,3.08581,33.05873,3.08581c1.48015,0,9.98774,1.85027,9.98774,1.85027l17.20003,5.9172,12.98874,4.44596Z" fill="%23b0dbea" stroke-width="0"/%3E%3Cpath d="m96.47827,44.56732c-.00067-.0108-.00549-.10791-.00989-.27209v.49615c.00708-.07379.01459-.14758.00989-.22406Z" fill="none" stroke-width="0"/%3E%3Cpath d="m154.30634,65.09119c.3075-.00421.61816-.00604.92975-.00702h-1.00415c.0238.00128.05182.00665.0744.00702Z" fill="none" stroke-width="0"/%3E%3Cpath d="m115.49664,65.26294c3.7135-.74225,6.41833-.75543,7.27844-.73346.75879-.15302,3.80713-1.50214,4.39526-1.90857.36786-.25543.96246-.47028,2.38763-.97681,2.26318-.80286,6.04944-2.14532,8.03943-3.67395,3.02869-2.32764,11.24426-2.55499,14.82135-2.39087v-2.58807c-30.22626,0-46.91541-23.68726-50.24347-28.9433-5.68298,8.39807-5.75269,18.2829-5.70831,20.19055.00012.00391.00012.00598.00024.01001l.00116-.00195v.04871c.00439.16418.00922.26129.00989.27209.0047.07648-.00281.15027-.00989.22406v1.46252c6.60834,10.5589,10.33264,19.86877,11.60651,23.32941,2.42841-1.9151,5.34241-3.90509,7.42175-4.32037Z" fill="none" stroke-width="0"/%3E%3Cpath d="m132.65265,8.35669c10.40503.30835,18.67029,3.9845,24.56561,10.92816,13.32343,15.69019,9.93256,42.32843,9.78168,43.45618-.01428.10895-.06281.20264-.09912.30164,3.02527.51666,5.72345,1.26544,8.10999,2.22583,2.9295-30.71533,13.64392-45.85205,22.27155-53.17957L132.03918,3.1828,62.6452,12.43805c8.8457,4.99109,16.0592,11.3692,21.73309,17.66266,3.46472,3.84235,6.51636,7.82147,9.19141,11.72217.24237-5.02301,1.72693-15.47211,9.44702-23.44989,6.79944-7.02747,16.76282-10.38971,29.63593-10.0163Z" fill="none" stroke-width="0"/%3E%3Cpath d="m133.47638,11.40063c-.08368-.01318-.14539-.05841-.22137-.08423-.23016-.0105-.45697-.02808-.68939-.03473-11.99207-.35455-21.22534,2.70929-27.42676,9.10553-.39752.40967-.76978.8299-1.13098,1.25439.17615.31549,16.2937,28.53033,48.41089,28.53033v-14.09778c0-.94934,1.03522-21.547-18.94238-24.67352Z" fill="none" stroke-width="0"/%3E%3Cpath d="m154.98254,21.17133c-1.96252-2.30884-4.22461-4.21466-6.77295-5.72064,8.00757,8.26025,7.52295,20.52759,7.51306,20.69946l.01544,26.00714c2.99548.00995,5.78503.17841,8.38086.48676-.00665-.09686-.03308-.19049-.0199-.29187.03534-.26318,3.36334-26.4939-9.11652-41.18085Z" fill="none" stroke-width="0"/%3E%3Cpath d="m183.75952,77.11957c-3.5838-9.8241-17.01001-12.02271-28.15991-12.0354h-.36353c-.31158.00098-.62225.00281-.92975.00702-.02258-.00037-.0506-.00574-.0744-.00702h-1.80408v-1.41315c-.00098-.01465-.00909-.02875-.00909-.04346v-5.13818c-2.9162-.14581-10.83899.11072-13.0
background-size: 100%;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
margin-right: 1.7rem;
}
h1 a .name {
2023-12-13 22:23:28 +00:00
font-size: calc(1.5rem + .8vw);
line-height: 1em;
text-indent: -.4em;
word-wrap: break-word;
font-weight: 700;
width: 50%;
}
#menuShowHide, label[for="menuShowHide"] {
position: absolute;
left: -9999em;
}
nav ul, .campsite_type_features ul, .campsite_features ul, .outside_activities > ul {
list-style: none;
padding-left: 0;
display: flex;
}
nav ul {
flex-wrap: wrap;
align-items: center;
justify-content: end;
}
nav a, nav button, label[for="menuShowHide"] {
2023-12-13 22:23:28 +00:00
font-size: 1.5rem;
font-weight: 500;
text-transform: uppercase;
padding: 0 2rem;
line-height: 6rem;
}
nav button {
cursor: pointer;
background: none;
border: none;
}
nav .has-submenu {
position: relative;
}
nav .has-submenu > a::after, nav .has-submenu > button::after {
content: "↓";
position: absolute;
right: -0.05rem;
}
nav .has-submenu ul {
flex-direction: column;
align-items: start;
display: none;
position: absolute;
top: 5rem;
}
nav .has-submenu ul a {
line-height: 4rem;
white-space: nowrap;
}
nav .has-submenu:hover ul, nav .has-submenu:focus-within ul {
display: flex;
}
nav:last-of-type > ul > li:last-child {
display: none;
}
.boto-reserva a {
padding-top: 3px;
}
.boto-reserva {
border: 2px solid;
2024-01-18 02:27:07 +00:00
border-radius: .6rem;
height: 4rem;
display: flex;
align-items: center;
margin-bottom: 3px;
transition: 0.5s ease;
}
.boto-reserva:hover {
background: var(--accent);
transition: 0.5s ease;
}
2023-12-13 22:23:28 +00:00
@media (max-width: 80rem) {
body > header {
grid-template-columns: 1fr auto;
}
label[for="menuShowHide"] {
position: static;
cursor: pointer;
justify-self: end;
}
label[for="menuShowHide"]::before {
content: "\2630";
margin-right: .20em;
}
nav:last-of-type {
display: none;
grid-column: 1 / span 2;
}
#menuShowHide:checked ~ nav {
display: block;
}
#menuShowHide:checked ~ label[for="menuShowHide"]::before {
content: "✕";
}
nav:last-of-type ul {
flex-direction: column;
align-items: start;
}
nav:last-of-type .has-submenu ul {
display: flex;
position: static;
padding-left: 2rem;
margin-top: -1rem;
background: none;
}
nav:last-of-type > ul > li:last-child {
display: unset;
}
nav:first-of-type {
display: none;
}
body > header > address {
grid-column: 1 / span 2;
}
}
#content {
padding: 2.5rem;
}
.hero .slick-slide, .nature section a {
background: var(--background-image) center center no-repeat;
background-size: cover;
}
.hero {
position: relative;
2024-01-18 02:27:07 +00:00
margin-bottom: 5rem;
}
.nature, .services {
margin-bottom: 5rem;
}
.hero .slick-slide, .nature section, .services {
2024-01-18 02:27:07 +00:00
border-radius: .6rem;
}
.hero .slick-initialized .slick-slide {
2024-01-13 00:20:31 +00:00
display: flex;
align-items: flex-end;
justify-content: space-between;
2024-01-13 00:20:31 +00:00
gap: 5rem;
padding: 5rem;
height: 65vh;
2024-01-13 00:20:31 +00:00
}
.services {
min-height: 8rem;
display: flex;
align-items: flex-end;
gap: 5rem;
padding: 5rem;
}
.hero .slick-slide span, .hero a, .services h2, .surroundings .spiel a {
font-weight: bold;
line-height: .9em;
}
.hero .slick-slide span, .hero a {
2024-01-18 02:27:07 +00:00
border-radius: .6rem;
background-color: var(--clar);
}
.hero .slick-slide > span {
width: 50%;
margin-bottom: 0;
2024-01-18 02:27:07 +00:00
font-size: calc(2rem + 2.7vw);
display: block;
background: transparent;
2024-01-13 00:20:31 +00:00
color: var(--base);
}
.hero a, .services h2, .surroundings .spiel a {
2024-01-13 00:20:31 +00:00
font-size: calc(1rem + 1.2vw);
}
.hero a, .services a {
padding: 1.5rem 2rem;
}
.hero a span, .services a span, .surroundings .spiel a:hover span, .campsite_type_booking button span {
display: inline-block;
transition: transform 0.5s ease;
}
.hero a {
position: absolute;
2024-01-18 02:27:07 +00:00
bottom: 1rem;
right: 1rem;
}
.hero a:hover span, .services a:hover span, .spiel a:hover span, .campsite_type_booking button:hover span {
transform: translateX(1.3rem);
}
@media (max-width: 48rem) {
.hero .slick-slide {
flex-direction: column;
}
.hero .slick-slide span {
width: 100%;
}
}
dl, .nature > div, .outside_activities > div, .campsite_info {
display: flex;
gap: 5rem;
}
.nature section {
flex: 1;
}
.nature section h3 {
font-size: 2.4rem;
}
.nature section a {
display: block;
width: 100%;
height: 20rem;
2024-01-18 02:27:07 +00:00
border-radius: .6rem;
}
.nature section a span {
z-index: 2;
2024-01-13 00:20:31 +00:00
padding: .55rem 1.5rem 1rem;
background-color: var(--accent);
color: var(--base);
border-top-left-radius: .6rem;
2024-01-18 02:27:07 +00:00
border-bottom-right-radius: .6rem;
}
/* graella allotjaments portada */
.nature > div {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 5rem;
grid-row-gap: 5rem;
}
.nature section:nth-child(2n + 1) { grid-area: 1 / 1 / 2 / 5; }
.nature section:nth-child(2n + 2){ grid-area: 1 / 5 / 2 / 9; }
.nature section:nth-child(2n + 3) { grid-area: 1 / 9 / 2 / 13; }
.nature section:nth-child(2n + 4) { grid-area: 2 / 1 / 3 / 4; }
.nature section:nth-child(2n + 5){ grid-area: 2 / 4 / 3 / 7; }
.nature section:nth-child(2n + 6) { grid-area: 2 / 7 / 3 / 10; }
.nature section:nth-child(2n + 7) { grid-area: 2 / 10 / 3 / 13; }
@media (max-width: 64rem) {
.nature > div {
display: flex;
flex-direction: column;
}
}
/* fi graella */
.services {
justify-content: end;
background-color: var(--accent);
}
.campsite_services, .campsite.carousel {
margin: 0 0 4rem 0;
2023-12-13 22:23:28 +00:00
}
.carousel {
display: none;
}
.carousel .spiel {
2024-01-13 00:20:31 +00:00
font-size: 1.8rem;
}
.carousel .spiel p {
margin-top: 0;
margin-bottom: 2rem;
}
.carousel .spiel, .carousel figure, .carousel .slick-track > img {
margin-right: 5rem;
position: relative;
}
.carousel img {
2024-01-13 00:20:31 +00:00
height: 30rem;
width: 100%;
2024-01-18 02:27:07 +00:00
border-radius: .6rem;
object-fit: cover;
}
.carousel figcaption {
padding: 10px 15px;
background: var(--clar);
width: fit-content;
float: right;
position: absolute;
bottom: 0;
right: 0;
2024-01-18 02:27:07 +00:00
border-top-left-radius: .6rem;
font-size: 1.7rem;
}
.carousel .slick-list {
order: 1;
margin-right: -5rem;
}
.slick-slider .slick-arrow {
2024-01-18 02:27:07 +00:00
font-weight: 600;
font-size: calc(1rem + 1.2vw);
line-height: 1;
width: 5rem;
height: 5rem;
border: none !important;
background: var(--base);
cursor: pointer;
transition: padding 0.5s ease;
position: absolute;
top: 1rem;
z-index: 1;
}
.slick-slider .slick-prev {
right: 6rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.slick-slider .slick-prev:hover {
padding-right: 1.3rem;
}
.slick-slider .slick-next {
right: 1rem;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.slick-slider .slick-next:hover {
padding-left: 1.3rem;
}
.enjoy {
font-weight: 900;
2024-01-15 11:32:52 +00:00
font-size: calc(2rem + 4vw);
line-height: 1.2em;
margin: 10rem 0;
}
dl {
flex-wrap: wrap;
}
dl div {
flex-basis: calc(25% - 5rem + 5rem / 4);
min-height: 220px;
padding: 12.5px;
2024-01-18 02:27:07 +00:00
border-radius: .6rem;
transition: all 0.5s ease;
2023-12-13 22:23:28 +00:00
}
dl div:hover {
background-color: var(--accent-2);
}
dt {
font-size: 2rem;
font-weight: 600;
padding: 5rem 0 .5rem;
margin-bottom: 2rem;
border-bottom: 1px solid black;
background-size: 2em 2em;
background-repeat: no-repeat;
background-position: top left;
}
@media (max-width: 48rem) {
dl {
flex-direction: column;
}
del div {
flex-basis: 100%;
}
}
.outside_activities {
margin-top: 2rem;
}
2024-01-18 02:27:07 +00:00
.outside_activities img {
border-radius: .6rem;
2024-01-18 02:27:07 +00:00
}
.outside_activities h3, .campsite_services .spiel {
font-size: calc(2.2rem + 4vw);
font-weight: 600;
line-height: .9em;
}
.outside_activities h3 {
margin-bottom: 10rem;
}
.outside_activities > ul {
max-width: 108rem;
margin: 0 auto;
flex-direction: column;
2024-01-18 02:27:07 +00:00
gap: 5rem;
}
.outside_activities article {
display: flex;
gap: 5.5%;
justify-content: space-between;
}
.outside_activities > ul > li:nth-child(2n) article {
flex-direction: row-reverse;
2024-01-18 02:27:07 +00:00
text-align: right;
}
.outside_activities article h4 {
font-size: 2.3rem;
}
.outside_activities article > div {
width: 29.5%;
}
.outside_activities article > img {
width: 64%;
aspect-ratio: 16/9;
object-fit: cover;
}
@media (max-width: 64rem) {
.outside_activities > ul {
gap: 5rem;
}
.outside_activities article, .outside_activities > ul > li:nth-child(2n) article, .campsite_info {
flex-direction: column;
gap: 1rem;
}
.campsite_info > * {
flex: auto;
}
.outside_activities article > div, .outside_activities article > img {
width: 100%;
}
}
.campsite_activities {
margin-top: 10rem;
padding-top: 10rem;
border-top: 1px solid black;
}
.campsite_activities h3 {
font-size: 2.9rem;
font-weight: 400;
line-height: 1.2;
margin-bottom: 5rem;
}
.campsite_services.carousel .slick-track {
align-items: center;
}
.campsite_type.carousel .spiel h3 {
font-size: calc(1.8rem + 1.7vw);
font-weight: 700;
}
.campsite_type_title {
font-size: 3.6rem;
}
.campsite_type_booking {
2024-01-29 12:42:24 +00:00
margin-top: 5rem;
display: flex;
gap: 5rem;
}
@media (max-width: 48rem) {
.campsite_type_booking {
flex-direction: column;
}
}
.campsite_type_booking fieldset, .campsite_type_booking footer {
flex: 1;
}
.campsite_type_booking {
background-color: var(--accent);
padding: 2rem;
}
.campsite_type_booking fieldset {
display: flex;
gap: 2.5rem;
padding: 0;
border: none;
}
.campsite_type_booking label {
flex: 1;
font-size: 2rem;
}
.campsite_type_booking input {
padding: 1.5rem .5rem;
width: 100%;
background-color: var(--base);
}
.campsite_type_booking footer {
margin-top: 2rem;
text-align: right;
}
.campsite_type_booking button {
background-color: var(--clar);
padding: 1.5rem 2rem;
cursor: pointer;
font-size: calc(1.8rem + .8vw);
font-weight: 600;
line-height: 0.9em;
}
.campsite_type_booking,
.campsite_type_booking button,
.campsite_type_booking input {
border: none;
2024-01-18 02:27:07 +00:00
border-radius: .6rem;
}
.campsite_type_calendar_prices {
display: flex;
flex-direction: row-reverse;
}
@media (max-width: 48rem) {
.campsite_type_calendar_prices {
flex-direction: column;
}
}
.campsite_type_prices {
2024-01-29 12:42:24 +00:00
padding: 2.5rem 2.5rem 2.5rem 0;
2024-01-18 02:27:07 +00:00
border-radius: .6rem;
flex: .5;
}
.campsite_type_prices dl {
display: flex;
flex-direction: column;
2023-12-20 12:02:56 +00:00
gap: 1rem;
border-bottom: 1px solid black;
2023-12-20 12:02:56 +00:00
}
.campsite_type_prices dl div:hover {
background-color: transparent;
}
.campsite_type_prices div {
flex-basis: unset;
min-height: 0;
padding: 0;
}
.campsite_type_prices dt {
display: flex;
align-items: center;
gap: 1.5rem;
border-top: 1px solid black;
border-bottom: none;
padding: .5em 0 0;
cursor: pointer;
position: relative;
}
.campsite_type_prices dt::after {
position: absolute;
right: 0;
top: 50%;
content: '+';
width: 1em;
aspect-ratio: 1;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
color: white;
border-radius: 50%;
line-height: 0;
}
.campsite_type_prices dt.open::after {
content: '-';
}
.campsite_type_prices dd {
padding: 0 0 0 calc(30px + 1.5rem);
}
.campsite_type_prices .pets_warning {
display: flex;
align-items: center;
min-height: 4.8rem;
padding-left: 5.8rem;
background-size: 4.8rem;
background-repeat: no-repeat;
background-position: left center;
}
.campsite_type_calendar {
padding: 2.5rem 0;
min-width: 0;
flex: 1;
}
.campsite_type_features li, .campsite_features li {
text-align: center;
justify-content: space-between;
background-repeat: no-repeat;
background-position: top center;
}
.campsite_type_features li {
flex: 1;
font-size: 2.4rem;
background-size: 7.2rem 7.2rem;
padding-top: 7.2rem;
}
.campsite_type_features ul {
gap: 2.5rem;
}
.campsite_type_detail {
display: flex;
gap: 5rem;
}
.campsite_type_detail section {
flex: 1;
}
.campsite_type_detail section:last-child {
2024-01-18 02:27:07 +00:00
flex: 1;
}
.campsite_type_detail h4 {
font-size: 2.4rem;
font-weight: 400;
margin-bottom: 1.5rem;
}
.campsite_type_detail ul + h4 {
margin-top: 2.5rem;
}
@media (max-width: 64rem) {
.campsite_type_features ul, .campsite_type_detail {
flex-wrap: wrap;
}
.campsite_type_features li {
flex: unset;
width: calc((100% - 2.5rem * 2) / 3);
}
.campsite_type_detail section {
flex: unset;
width: calc((100% - 5rem) / 2);
}
.campsite_type_detail section:last-child {
width: 100%;
}
}
@media (max-width: 48rem) {
.campsite_type_features ul, .campsite_type_detail {
flex-wrap: nowrap;
flex-direction: column;
}
.campsite_type_features li, .campsite_type_detail section {
width: 100%;
}
}
.campsite_type_calendar button {
display: flex;
gap: 1em;
font-size: 2.5rem;
border: none;
cursor: pointer;
}
.campsite_type_calendar form button:first-child, .campsite_type_calendar > header button {
min-width: 0;
}
.campsite_type_calendar > header {
display: flex;
gap: 2rem;
justify-content: space-between;
align-items: center;
}
.campsite_type_calendar > header button:first-of-type::before {
content: "←";
}
.campsite_type_calendar > header button:last-of-type::before {
content: "→";
}
.campsite_type_calendar > div {
display: flex;
flex-wrap: nowrap;
gap: 1em;
overflow-x: scroll;
scroll-behavior: smooth;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.campsite_type_calendar table {
border-collapse: collapse;
flex: 0 0 27rem;
height: 100%;
}
.campsite_type_calendar td {
width: calc(100% / 7);
}
.campsite_type_calendar time {
--aa-brightness: calc(((var(--red) * 299) + (var(--green) * 587) + (var(--blue) * 114)) / 1000);
--aa-color: calc((var(--aa-brightness) - 128) * -1000);
background: rgb(var(--red), var(--green), var(--blue));
color: rgb(var(--aa-color), var(--aa-color), var(--aa-color));
display: flex;
width: 100%;
min-width: 3rem;
aspect-ratio: 1;
justify-content: center;
align-items: center;
}
.campsite_type_calendar [aria-checked] {
border: 2px solid var(--camper--color--black);
position: relative;
}
.campsite_type_calendar [aria-checked]::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
background-color: var(--camper--color--black);
border-radius: 50%;
width: .8rem;
height: .8rem;
}
.campsite_info > * {
flex: 1;
}
.campsite_features {
display: flex;
justify-content: center;
align-items: center;
}
.campsite_features ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 1fr;
gap: 5rem;
}
.campsite_features li {
background-size: 3.6rem 3.6rem;
padding-top: 3.6rem;
}
.checkin-checkout {
flex-direction: column;
gap: 0;
margin-bottom: 2rem;
font-size: 2rem;
}
.checkin-checkout div {
min-height: 0;
flex-basis: 100%;
2024-01-29 12:42:24 +00:00
padding: .75rem 2rem;
display: flex;
gap: .25em;
border: 2px solid #383127;
border-radius: 0;
background-repeat: no-repeat;
background-position: left center;
background-size: 3.2rem;
}
2024-01-29 12:42:24 +00:00
.checkin-checkout div:first-child {
border-top-left-radius: .6rem;
border-top-right-radius: .6rem;
2024-01-29 12:42:24 +00:00
}
.checkin-checkout div:last-child {
border-bottom-left-radius: .6rem;
border-bottom-right-radius: .6rem;
2024-01-29 12:42:24 +00:00
}
.checkin-checkout div:hover {
background-color: initial;
}
.checkin-checkout div:last-child, .checkin-checkout div:last-child:hover {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"%3E%3Crect width="256" height="256" fill="none"/%3E%3Cpath transform="translate(0 256) scale(1 -1)" d="M30.93,198.72C47.39,181.19,90.6,144,152,144v48l80-80L152,32V80C99.2,80,31.51,130.45,24,195.54A4,4,0,0,0,30.93,198.72Z" fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3C/svg%3E');
background-color: #383127;
color: white;
}
.checkin-checkout div:first-child {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"%3E%3Crect width="256" height="256" fill="none"/%3E%3Cpath d="M30.93,198.72C47.39,181.19,90.6,144,152,144v48l80-80L152,32V80C99.2,80,31.51,130.45,24,195.54A4,4,0,0,0,30.93,198.72Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3C/svg%3E');
}
.checkin-checkout dt {
padding: 0 0 0 3.2rem;
margin: 0;
font-size: inherit;
font-weight: normal;
border-bottom: none;
}
.checkin-checkout dt:after {
content: ":";
}
2023-12-13 22:23:28 +00:00
/* form */
input {
height: 60px;
2024-01-18 02:27:07 +00:00
border-radius: .6rem;
border: 1px solid;
2023-12-13 22:23:28 +00:00
}
select {
min-height: 60px;
2024-01-18 02:27:07 +00:00
border-radius: .6rem;
border: 1px solid;
background: white;
padding: 20px;
2023-12-13 22:23:28 +00:00
}
2023-12-13 22:23:28 +00:00
/*
label {
display: flex;
align-items: center;
gap: 20px;
}
*/
fieldset {
display: flex;
justify-content: space-between;
2023-12-13 22:23:28 +00:00
}
button {
font-size: 4rem;
background: var(--accent);
2024-01-18 02:27:07 +00:00
border-radius: .6rem;
border: 1px solid var(--accent);
color: var(--contrast);
2023-12-13 22:23:28 +00:00
}
/* radio buttins + checkbox */
/* Context for relative positioning */
label {
position: relative;
2023-12-13 22:23:28 +00:00
}
/* Base styles for both types of inputs */
input[type="radio"],
input[type="checkbox"] {
appearance: none;
background: #fff;
border: 2px solid #777;
height: 1.5em !important;
width: 1.5em !important;
margin: 0 10px 0 30px;
border-radius: 100%;
vertical-align: text-bottom;
position: relative;
2023-12-13 22:23:28 +00:00
}
/* Remove the circular shape from checkboxes */
input[type="checkbox"] {
border-radius: 0;
2023-12-13 22:23:28 +00:00
}
/* Styles for the pseudo-elements */
input[type="radio"]::before,
input[type="checkbox"]::before {
content: "";
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
top: 0;
2023-12-13 22:23:28 +00:00
}
/* Center of the checked radio button */
input[type="radio"]:checked::before {
border: 5px solid transparent;
border-radius: 100%;
background: var(--accent);
margin: 4px;
2023-12-13 22:23:28 +00:00
}
/* The checkmark shape */
input[type="checkbox"]:checked::before {
border-right: 5px solid var(--accent);
border-bottom: 6px solid var(--accent);
height: 90%;
width: 50%;
transform: rotate(50deg) translateY(-20%) translateX(-10%);
2023-12-13 22:23:28 +00:00
}
/* Some focus styles for accessibility */
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline-offset: 2px;
2023-12-13 22:23:28 +00:00
}
#booking fieldset {
border: none;
}
#booking legend {
font-weight: bold;
}
#booking input:not([type="radio"]):not([type="checkbox"]),
#booking select {
width: 100%;
padding: 20px;
}
#booking fieldset {
margin-bottom: 1em;
padding-bottom: 1em;
border-bottom: 3px solid black;
}
#booking fieldset:first-of-type,
#booking fieldset.campsite-options,
#booking fieldset:last-of-type {
display: grid;
row-gap: 1em;
column-gap: 1em;
}
#booking fieldset.campsite-options:not(.is-visible) {
visibility: hidden;
max-height: 0;
overflow: hidden;
margin: 0;
padding: 0;
border: none;
line-height: 0;
opacity: 0;
}
#booking fieldset:first-of-type {
grid-template-columns: repeat(3, 1fr);
}
#booking fieldset.campsite-options {
transition: opacity .25s ease-in;
grid-template-columns: repeat(4, 1fr);
}
#booking fieldset:last-of-type {
border-bottom: none;
grid-template-columns: repeat(2, 1fr);
}
#booking a, .outside_activities a {
color: var(--accent);
text-decoration: var(--accent) wavy underline;
}
@media (max-width: 48rem) {
#booking fieldset {
grid-template-columns: 1fr !important;
}
}
2024-01-17 12:31:33 +00:00
/* booking card */
.credit-cards {
display: flex;
gap: 10px;
align-items: center;
margin: 30px 10px;
2024-01-17 12:31:33 +00:00
}
.credit-cards svg {
width: 4.8rem;
2024-01-17 12:31:33 +00:00
}
2023-12-13 22:23:28 +00:00
/* footer responsive */
@media (max-width: 48rem) {
body > footer div {
display: flex;
flex-direction: column;
}
body > footer section {
width: 100% !important;
margin: 4rem 0 0 0;
}
}
2023-12-13 22:23:28 +00:00
/* end footer responsive */
2023-12-13 22:23:28 +00:00
body > footer {
display: flex;
flex-direction: column;
gap: 1rem;
2024-01-13 00:20:31 +00:00
margin: 120px 20px 0 20px;
background: var(--contrast);
color: var(--base);
2024-01-18 02:27:07 +00:00
border-top-left-radius: .6rem;
border-top-right-radius: .6rem;
2024-01-13 00:20:31 +00:00
}
body > footer a {
color: var(--base);
}
body > footer > div, .campsite_type_features, .campsite_type_detail {
padding: 5rem 0;
}
/* highlight footer season */
body > footer section:nth-child(3) {
2024-01-18 02:27:07 +00:00
border-radius: .6rem;
background: var(--accent-2);
padding: 0 15px;
color: var(--contrast);
}
body > footer section:nth-child(3) h2 {
border-bottom: 1px solid var(--contrast);
}
body > footer section:nth-child(3) p {
padding-left: 15px;
}
.campsite_type_detail {
padding-bottom: 2.5rem;
}
body > footer > div {
display: flex;
2023-12-20 12:02:56 +00:00
gap: 3rem;
justify-content: space-between;
margin: 0 2.5rem;
2024-01-13 00:20:31 +00:00
border-bottom: 1px solid var(--base);
}
body > footer section {
width: 25%;
}
body > footer h2 {
font-size: 2.4rem;
margin-bottom: 2rem;
2024-01-13 00:20:31 +00:00
border-bottom: 1px solid var(--base);
}
body > footer ul {
list-style: none;
padding: 0;
}
body > footer li a::before {
font-size: 1.25em;
content: "→";
display: inline-block;
margin-right: .5em;
transition: transform .5s ease;
}
body > footer li a:hover::before {
transform: translateX(.6rem);
}
body > footer span {
font-size: 1.5rem;
text-align: center;
padding: 2.5rem;
display: block;
}
2023-12-13 22:23:28 +00:00
.camping-association {
display: flex;
2024-01-13 00:20:31 +00:00
flex-wrap: wrap;
flex-direction: row;
height: 5rem;
gap: 2rem;
margin: 2rem 0 0;
}
.camping-association img {
max-height: 35px;;
}
2023-12-13 22:23:28 +00:00
/* contact */
2023-12-20 12:02:56 +00:00
@media (max-width: 64rem) {
.contact-page {
grid-template-columns: 1fr !important;
}
2023-12-20 12:02:56 +00:00
}
2023-12-13 22:23:28 +00:00
.contact-page {
display: grid;
grid-template-columns: 1fr 4fr;
grid-gap: 20px;
2023-12-13 22:23:28 +00:00
}
address {
font-size: calc(16px + .4vw);
margin: 30px 0 30px 0;
2023-12-13 22:23:28 +00:00
}
#map {
2024-01-18 02:27:07 +00:00
border-radius: .6rem;
2023-12-13 22:23:28 +00:00
}
2023-12-20 12:02:56 +00:00
.leaflet-popup-content-wrapper {
border-radius: 5px !important;
2023-12-20 12:02:56 +00:00
}
.leaflet-popup-content {
font-size: 2rem !important;
2023-12-20 12:02:56 +00:00
}
2024-01-29 12:42:24 +00:00
/* campground page */
.map-legend {
display: flex;
gap: 5rem;
2024-01-29 12:42:24 +00:00
}
2023-12-13 22:23:28 +00:00
2024-01-15 11:32:52 +00:00
#campground_map {
width: 70vw;
border-radius: .6rem;
2024-01-15 11:32:52 +00:00
}
2023-12-13 22:23:28 +00:00
#arbres {
mix-blend-mode: multiply;
2024-01-14 20:36:03 +00:00
opacity: .5;
2023-12-13 22:23:28 +00:00
}
2023-12-20 12:02:56 +00:00
#zones {
mix-blend-mode: multiply;
2024-01-14 20:36:03 +00:00
opacity: .3;
}
2024-01-29 12:42:24 +00:00
.legend-directory {
width: 30vw;
background: #fff;
border-radius: .6rem;
padding: 1rem 2rem;
2024-01-29 12:42:24 +00:00
}
.legend-directory h4 {
border-bottom: solid 1px;
margin: 1rem 0;
2024-01-29 12:42:24 +00:00
}
.legend-directory ul {
padding-left: 0;
list-style: none;
column-count: 2;
column-gap: 2rem;
2024-01-29 12:42:24 +00:00
}
.legend-directory li {
display: flex;
align-items: center;
gap: 1rem;
color: var(--contrast);
margin: 1rem;
2024-01-29 12:42:24 +00:00
}
.legend-directory svg {
display: inline-block;
width: 2rem;
height: 2rem;
flex-shrink: 0;
fill: var(--contrast);
2024-01-29 12:42:24 +00:00
}
@media (max-width: 64rem) {
.map-legend {
display: flex;
flex-direction: column;
}
2024-01-29 12:42:24 +00:00
#campground_map {
width: 100%;
}
2024-01-29 12:42:24 +00:00
.legend-directory {
width: 100%;
}
2024-01-29 12:42:24 +00:00
}
2023-12-20 12:02:56 +00:00
/* surrounding */
#surroundings-ad {
display: flex;
margin: 5rem 0;
border-radius: .6rem;
overflow: hidden;
background-color: var(--accent-2);
2023-12-20 12:02:56 +00:00
}
#surroundings-ad::before {
content: '';
background: var(--background-image) center center no-repeat;
background-size: cover;
min-height: 30rem;
2023-12-20 12:02:56 +00:00
}
#surroundings-ad::before, #surroundings-ad > div {
flex: 1;
}
#surroundings-ad > div {
display: flex;
flex-direction: column;
justify-content: center;
padding: 5rem;
2023-12-20 12:02:56 +00:00
}
#surroundings-ad h3 {
font-size: calc(1.6rem + .7vw);
font-weight: 400;
margin-bottom: 2.585rem;
2023-12-20 12:02:56 +00:00
}
#surroundings-ad a {
font-size: calc(1.8rem + 1.7vw);
font-weight: 600;
line-height: 0.9em;
display: flex;
align-items: flex-start;
gap: 0.5em;
color: var(--contrast);
2023-12-20 12:02:56 +00:00
}
#surroundings-ad svg {
width: 4rem;
transform: rotate(320deg) translate3d(-5px, -10px, 0);
transition: transform 0.5s ease;
2023-12-20 12:02:56 +00:00
}
#surroundings-ad a:hover svg {
transform: rotate(320deg) translate3d(10px, 0, 0);
2023-12-20 12:02:56 +00:00
}
@media (max-width: 48rem) {
#surroundings-ad {
flex-direction: column-reverse;
}
#surroundings-ad > div {
justify-content: start;
}
2023-12-20 12:02:56 +00:00
}
/* services */
.services_icon {
position: relative;
z-index: 2;
2023-12-20 12:02:56 +00:00
}
dt {
position: relative;
z-index: 3;
2023-12-20 12:02:56 +00:00
}
.services_icon::before {
content: '';
background: var(--accent-2);
position: absolute;
width: 60px;
height: 60px;
top: 2px;
left: 2px;
border-radius: 50px;
z-index: 1;
2023-12-20 12:02:56 +00:00
}
/*
.services_icon:hover::before {
background: var(--accent-2);
}
*/
.services_icon a {
color: var(--accent);
text-decoration: var(--accent) wavy underline;
}
[x-cloak] {
display: none !important;
}