camper/web/static/public.css

1743 lines
42 KiB
CSS

/**
* SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
* SPDX-FileCopyrightText: 2023 Oriol Carbonell <info@oriolcarbonell.cat>
* 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;
}
*, *::before, *::after {
box-sizing: inherit;
}
* {
margin: 0;
}
html {
box-sizing: border-box;
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));
}
body {
font-family: 'Mabry Pro', sans-serif;
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;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
img {
height: auto;
}
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);
/* 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.03827,1.80005-2.35785,1.81061-6.26093,3.19598-8.84454,4.1123-.72913.25995-1.55731.55292-1.75543.65973-.59039.41296-4.73785,2.38647-6.00653,2.39526-.48462-.01428-3.07263-.0495-6.70471.67621-2.3855.47467-7.6496,4.77966-10.40625,7.38086-.03741.03534-.08478.04852-.12439.07941-.00665.00439-.00879.01208-.01428.01758-2.12769,1.82922-6.09137,6.28394-4.89752,8.48328,20.75946.42627,38.3407,3.65741,52.23682,7.55597,8.48883,2.38214,16.07678,5.13208,22.72418,7.93823.00555-.00555.00665-.01208.01105-.0166.11902-.12225,11.84332-12.35651,8.16064-22.45209Z" fill="none" stroke-width="0"/%3E%3Cpath d="m186.50177,76.11511c-1.48676-4.07471-4.45374-7.2829-8.77844-9.59448.08252-.16187.13867-.34137.15631-.53412,4.67511-50.57495,31.40466-57.5484,31.745-57.63098l-.65973-2.8512c-.39648.09131-3.78406.94043-8.29828,4.00421-.04071-.00983-.07928-.02527-.12225-.03076L132.23956,0h-.39087L57.92072,9.98816C42.95178,2.88751,23.79694-.04852,0,7.16943l.85022,2.79944c20.75409-6.29608,39.55432-5.37756,56.20044,2.6806.1994.1861.45154.2984.72571.35022,8.73224,4.35291,16.8653,10.68378,24.36841,18.99194,15.33014,16.97485,22.53931,36.70953,23.53259,39.57513-.99554.86346-1.72021,1.53528-1.98004,1.77863-.02429.01874-.05518.02313-.07831.04401-.77417.66296-6.85333,6.06152-6.04382,10.68048-7.94147-.05725-16.32684.3017-25.13721,1.18719l-14.87634-25.76495c-.00281-.00482-.00684-.00928-.0105-.01373l-1.06238-1.83368-1.06519,1.84436c-.00024.00031-.00043.00061-.00067.00092l-.33942.58795-.0033.00568-18.06873,31.29779c-11.50208,2.81042-23.5282,6.53284-36.05109,11.37634l1.05615,2.72913c11.41272-4.41406,22.40259-7.87878,32.9563-10.57361l-7.9754,13.81415v-.00006l-.02411.04187-.77667,1.34528c-.00232.00403-.00299.00867-.00525.01276l-1.05859,1.8385h31.3595c.00793,0,.01447-.00439.0224-.00452h1.211v-47.2467l26.52234,45.93286v.00006l.74982,1.31378h.68909c.01178.00037.02307.00452.03491.00452.0116,0,.02313-.00421.03473-.00452h2.09521l-1.05756-1.83441c-.0022-.00391-.00183-.00842-.00409-.01233l-12.74426-22.07227c32.21075-3.05389,58.63867,1.0022,77.87506,6.38318,34.80206,9.73547,54.32379,25.69104,54.51648,25.85187l1.8689-2.2522c-.14313-.11786-10.64624-8.71344-29.87708-17.21222,2.73993-3.08252,11.83563-14.38074,8.07251-24.69775ZM84.3783,30.10071c-5.67389-6.29346-12.88739-12.67157-21.73309-17.66266L132.03918,3.1828l65.24316,8.90613c-8.62762,7.32751-19.34204,22.46423-22.27155,53.17957-2.38654-.96039-5.08472-1.70917-8.10999-2.22583.03632-.099.08484-.19269.09912-.30164.15088-1.12775,3.54175-27.76599-9.78168-43.45618-5.89532-6.94366-14.16058-10.61981-24.56561-10.92816-12.87311-.37341-22.83649,2.98883-29.63593,10.0163-7.72009,7.97778-9.20465,18.42688-9.44702,23.44989-2.67505-3.9007-5.72668-7.87982-9.19141-11.72217Zm79.74066,32.54333c-2.59583-.30835-5.38538-.47681-8.38086-.48676l-.01544-26.00714c.00989-.17188.49451-12.43921-7.51306-20.69946,2.54834,1.50598,4.81042,3.4118,6.77295,5.72064,12.47986,14.68695,9.15186,40.91766,9.11652,41.18085-.01318.10138.01324.19501.0199.29187Zm-11.7002-26.56989v14.09778c-32.11719,0-48.23474-28.21484-48.41089-28.53033.36121-.4245.73346-.84473,1.13098-1.25439,6.20142-6.39624,15.43469-9.46008,27.42676-9.10553.23242.00665.45923.02423.68939.03473.07599.02582.1377.07104.22137.08423,19.9776,3.12653,18.94238,23.72418,18.94238,24.67352Zm-55.95038,10.17975v-2.00739l-.00116.00195c-.00012-.00403-.00012-.0061-.00024-.01001-.04437-1.90765.02533-11.79248,5.70831-20.19055,3.32806,5.25604,20.01721,28.9433,50.24347,28.9433v2.58807c-3.57709-.16412-11.79266.06323-14.82135,2.39087-1.98999,1.52863-5.77625,2.87109-8.03943,3.67395-1.42517.50653-2.01978.72137-2.38763.97681-.58813.40643-3.63647,1.75555-4.39526,1.90857-.86011-.02197-3.56494-.00879-7.27844.73346-2.07935.41528-4.99335,2.40527-7.42175,4.32037-1.27386-3.46063-4.99817-12.77051-11.60651-23.32941Zm79.11945,53.33435c-6.6474-2.80615-14.23535-5.55609-22.72418-7.93823-13.89612-3.89856-31.47736-7.1297-52.23682-7.55597-1.19385-2.19934,2.76984-6.65405,4.89752-8.48328.00549-.00549.00763-.01318.01428-.01758.03961-.03088.08698-.04407.12439-.07941,2.75665-2.6012,8.02075-6.90619,10.40625-7.38086,3.63208-.72571,6.22009-.69049,6.70471-.67621,1.26868-.00879,5.41614-1.9823,6.00653-2.39526.19812-.10681,1.02631-.39978,1.75543-.65973,2.58362-.91632,6.48669-2.3017,8.84454-4.1123,2.19928-1.68933,10.12207-1.94586,13.03827-1.80005v5.13818c0,.01471.00812.02881.00909.04346v1.41315h3.17175c11.1499.0127,24.57611,2.2113,28.15991,12.0354,3.68268,10.09558-8.04163,22.32983-8.16064,22.45209-.00439.00452-.00549.01105-.01105.0166Z" fill="%23303334" stroke-width="0"/%3E%3C/svg%3E ') top left no-repeat;
background-size: 100%;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
margin-right: 1.7rem;
}
h1 a .name {
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"] {
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;
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;
}
@media (max-width: 32rem) {
body > header > address {
flex-direction: column;
gap: 1rem;
}
}
@media (max-width: 80rem) {
body > header {
position: unset;
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 li {
width: 100%;
}
nav:last-of-type a, nav:last-of-type button {
width: 100%;
height: 100%;
display: block;
text-align: left;
}
.boto-reserva {
height: unset;
}
nav:last-of-type .has-submenu ul {
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;
margin-bottom: 5rem;
}
.nature, .services {
margin-bottom: 5rem;
}
.hero .slick-slide, .nature section, .services {
border-radius: .6rem;
}
.hero .slick-initialized .slick-slide {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 5rem;
padding: 5rem;
height: 65vh;
}
.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 {
border-radius: .6rem;
background-color: var(--clar);
}
.hero .slick-slide > span {
width: 50%;
margin-bottom: 0;
font-size: calc(2rem + 2.7vw);
display: block;
background: transparent;
color: var(--base);
}
.hero a, .services h2, .surroundings .spiel a {
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;
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-initialized .slick-slide {
padding-bottom: 9rem;
}
.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;
border-radius: .6rem;
}
.nature section a span {
z-index: 2;
padding: .55rem 1.5rem 1rem;
background-color: var(--accent);
color: var(--base);
border-top-left-radius: .6rem;
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;
}
.carousel {
display: none;
overflow: hidden;
}
.carousel .spiel {
font-size: 1.8rem;
}
.carousel .spiel p {
margin-top: 0;
margin-bottom: 2rem;
}
.carousel .slick-slide {
margin-right: 5rem;
position: relative;
}
.carousel img {
height: 30rem;
width: 100%;
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;
border-top-left-radius: .6rem;
font-size: 1.7rem;
}
.carousel .slick-list {
margin-right: -5rem;
}
.slick-slider .slick-arrow {
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;
}
@media (max-width: 48rem) {
.carousel {
overflow: unset;
}
.carousel .slick-arrow {
background: var(--accent);
margin-top: -6rem;
margin-right: -1rem;
}
.carousel .slick-list {
padding-top: 2rem;
}
.carousel .slick-list,
.carousel .slick-slide {
margin-right: 0;
}
}
.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;
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;
border-radius: .6rem;
transition: all 0.5s ease;
}
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;
}
.outside_activities img {
border-radius: .6rem;
}
.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;
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;
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 h3 {
margin-bottom: 5rem;
}
.outside_activities > ul {
gap: 5rem;
}
.outside_activities article, .outside_activities > ul > li:nth-child(2n) article, .campsite_info {
flex-direction: column;
gap: 1rem;
text-align: left;
}
.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 {
margin-top: 5rem;
display: flex;
gap: 5rem;
}
.campsite_type_booking fieldset {
flex: 1;
}
.campsite_type_booking footer {
flex: .5;
}
.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;
border-radius: .6rem;
}
@media (max-width: 48rem) {
.campsite_type_booking,
.campsite_type_booking fieldset {
flex-direction: column;
}
.campsite_type_booking footer {
margin-top: 0;
}
}
.campsite_type_calendar_prices {
display: flex;
flex-direction: row-reverse;
}
@media (max-width: 48rem) {
.campsite_type_calendar_prices {
flex-direction: column;
}
}
.campsite_type_prices {
padding: 2.5rem 2.5rem 2.5rem 0;
border-radius: .6rem;
flex: .5;
}
.campsite_type_prices dl {
display: flex;
flex-direction: column;
gap: 1rem;
border-bottom: 1px solid black;
}
.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;
}
body > footer > div, .campsite_type_features, .campsite_type_detail {
padding: 5rem 0;
}
.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;
padding-bottom: 2.5rem;
}
.campsite_type_detail section {
flex: 1;
}
.campsite_type_detail section:last-child {
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;
scroll-snap-type: x proximity;
}
.campsite_type_calendar table {
border-collapse: collapse;
flex: 0 0 27rem;
height: 100%;
scroll-snap-align: center start;
}
.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%;
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;
}
.checkin-checkout div:first-child {
border-top-left-radius: .6rem;
border-top-right-radius: .6rem;
}
.checkin-checkout div:last-child {
border-bottom-left-radius: .6rem;
border-bottom-right-radius: .6rem;
}
.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: ":";
}
/* form */
input {
height: 60px;
border-radius: .6rem;
border: 1px solid;
}
select {
min-height: 60px;
border-radius: .6rem;
border: 1px solid;
background: white;
padding: 20px;
}
/*
label {
display: flex;
align-items: center;
gap: 20px;
}
*/
fieldset {
display: flex;
justify-content: space-between;
}
button {
font-size: 4rem;
background: var(--accent);
border-radius: .6rem;
border: 1px solid var(--accent);
color: var(--contrast);
}
/* radio buttins + checkbox */
/* Context for relative positioning */
label {
position: relative;
}
/* 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;
}
/* Remove the circular shape from checkboxes */
input[type="checkbox"] {
border-radius: 0;
}
/* 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;
}
/* Center of the checked radio button */
input[type="radio"]:checked::before {
border: 5px solid transparent;
border-radius: 100%;
background: var(--accent);
margin: 4px;
}
/* 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%);
}
/* Some focus styles for accessibility */
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline-offset: 2px;
}
#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;
}
}
/* booking card */
.credit-cards {
display: flex;
gap: 10px;
align-items: center;
margin: 30px 10px;
}
.credit-cards svg {
width: 4.8rem;
}
body > footer {
display: flex;
flex-direction: column;
gap: 1rem;
margin: 12rem 2rem 0 2rem;
background: var(--contrast);
color: var(--base);
border-top-left-radius: .6rem;
border-top-right-radius: .6rem;
}
body > footer a {
color: var(--base);
}
/* highlight footer season */
body > footer section:nth-child(3) {
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;
}
body > footer > div {
display: flex;
gap: 3rem;
justify-content: space-between;
margin: 0 2.5rem;
border-bottom: 1px solid var(--base);
}
body > footer section {
width: 25%;
}
body > footer h2 {
font-size: 2.4rem;
margin-bottom: 2rem;
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;
}
.camping-association {
display: flex;
flex-wrap: wrap;
flex-direction: row;
height: 5rem;
gap: 2rem;
margin: 2rem 0 0;
}
.camping-association img {
max-height: 35px;
}
/*<editor-fold desc="footer responsive">*/
@media (max-width: 64rem) {
body > footer div {
flex-direction: column;
}
body > footer section {
width: 100%;
margin: 4rem 0 0 0;
}
}
/*</editor-fold>*/
/* 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-size: calc(16px + .4vw);
margin: 30px 0 30px 0;
}
#map {
border-radius: .6rem;
}
.leaflet-popup-content-wrapper {
border-radius: 5px !important;
}
.leaflet-popup-content {
font-size: 2rem !important;
}
/* campground page */
.map-legend {
display: flex;
gap: 5rem;
}
#campground_map {
width: 80vw;
height: 75vh;
border-radius: .6rem;
font-size: 1.2rem;
}
#arbres {
mix-blend-mode: multiply;
opacity: .5;
}
#zones {
mix-blend-mode: multiply;
opacity: 0;
}
.legend-directory {
width: 20vw;
height: 75vh;
background: #fff;
border-radius: .6rem;
padding: 1rem 2rem;
overflow: scroll;
}
.legend-directory h4 {
border-bottom: solid 1px;
margin: 1rem 0;
}
.legend-directory ul {
padding-left: 0;
list-style: none;
}
.legend-directory li {
display: flex;
align-items: center;
gap: 1rem;
color: var(--contrast);
margin: 1rem;
}
.legend-directory svg {
display: inline-block;
width: 2rem;
height: 2rem;
flex-shrink: 0;
fill: var(--contrast);
}
@media (max-width: 64rem) {
.map-legend {
display: flex;
flex-direction: column;
}
#campground_map {
width: 100%;
}
.legend-directory {
width: 100%;
}
}
/* surrounding */
#surroundings-ad {
display: flex;
margin: 5rem 0;
border-radius: .6rem;
overflow: hidden;
background-color: var(--accent-2);
}
#surroundings-ad::before {
content: '';
background: var(--background-image) center center no-repeat;
background-size: cover;
min-height: 30rem;
}
#surroundings-ad::before, #surroundings-ad > div {
flex: 1;
}
#surroundings-ad > div {
display: flex;
flex-direction: column;
justify-content: center;
padding: 5rem;
}
#surroundings-ad h3 {
font-size: calc(1.6rem + .7vw);
font-weight: 400;
margin-bottom: 2.585rem;
}
#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);
}
#surroundings-ad svg {
width: 4rem;
transform: rotate(320deg) translate3d(-5px, -10px, 0);
transition: transform 0.5s ease;
}
#surroundings-ad a:hover svg {
transform: rotate(320deg) translate3d(10px, 0, 0);
}
@media (max-width: 48rem) {
#surroundings-ad {
flex-direction: column-reverse;
}
#surroundings-ad > div {
justify-content: start;
}
}
/* 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;
}
[x-cloak] {
display: none !important;
}