/** * SPDX-FileCopyrightText: 2023 jordi fita mas * 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; } 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 { 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: 999; padding: 1rem 2.5rem; display: flex; align-items: center; justify-content: space-between; } body > header, nav .has-submenu ul { background-color: rgba(var(--clar-rgb), 0.7); backdrop-filter: blur(10px); } 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: 2.5rem; 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 { list-style: none; padding-left: 0; display: flex; } nav ul { flex-wrap: wrap; align-items: center; } nav a, nav button, label[for="menuShowHide"] { font-size: 1.8rem; 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; } @media (max-width: 48rem) { body > header { display: grid; grid-template-columns: 1fr 1fr; } label[for="menuShowHide"] { position: static; cursor: pointer; justify-self: end; } label[for="menuShowHide"]::before { content: "\2630"; } nav { display: none; grid-column: 1 / span 2; } #menuShowHide:checked ~ nav { display: block; } #menuShowHide:checked ~ label[for="menuShowHide"]::before { content: "✕"; } nav ul { flex-direction: column; align-items: start; } nav .has-submenu ul { display: flex; position: static; padding-left: 2rem; margin-top: -1rem; background: none; } } #content { padding: 2.5rem; } .nature div, .nature section a { background: var(--background-image) center center no-repeat; background-size: cover; } .nature div, .services { margin-bottom: 5rem; } .nature div:first-child, .nature section, .services { border-radius: 5px; } .nature div:first-child, .services { min-height: 6rem; display: flex; align-items: flex-end; gap: 5rem; padding: 5rem; } .nature div:first-child { justify-content: space-between; } .nature h2, .nature div:first-child a, .services h2, .surroundings .spiel a { font-weight: bold; line-height: .9em; } .nature h2, .nature div:first-child a { border-radius: 5px; background-color: var(--clar); } .nature h2 { width: 50%; min-height: 100%; margin-bottom: 0; font-size: calc(2rem + 4vw); display: block; padding: 3rem; } .nature div:first-child a, .services h2, .surroundings .spiel a { font-size: calc(1.8rem + 1.7vw); } .nature div:first-child a, .services a { padding: 1.5rem 2rem; } .nature div:first-child a span, .services a span, .surroundings .spiel a:hover span, .campsite_type_booking form button span { display: inline-block; transition: transform 0.5s ease; } .nature div:first-child a:hover span, .services a:hover span, .spiel a:hover span, .campsite_type_booking form button:hover span { transform: translateX(1.3rem); } dl, .nature div + div, .outside_activities > div { display: flex; gap: 5rem; } .nature section { flex: 1; } .nature section h3 { font-size: 2.4rem; } .nature section a { display: block; width: 100%; height: 20rem; } .nature section a span { z-index: 2; padding: 1rem 1.5rem; background-color: var(--clar); border-bottom-right-radius: 5px; } @media (max-width: 64rem) { .nature div + div { flex-direction: column; } } @media (max-width: 48rem) { .nature div:first-child { flex-direction: column; } .nature h2 { width: 100%; } } .services { justify-content: end; background-color: var(--accent); } .carousel { display: none; } .carousel .spiel { font-size: 2.4rem; padding-right: 4rem; } .carousel .spiel p { margin-top: 0; margin-bottom: 2rem; } .carousel figure, .carousel .slick-track > img { margin-right: 5rem; position: relative; } .carousel img { height: 40rem; width: 100%; border-radius: 5px; 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: 5px; font-size: 1.7rem; } .carousel .slick-list { order: 1; padding: 0 20% 0 0 !important; } .carousel .slick-track { display: flex; align-items: start; } .carousel.slick-slider { display: flex; flex-wrap: wrap; justify-content: end; } .carousel .slick-arrow { font-size: 6rem; line-height: 1; width: 5rem; height: 5rem; border: none !important; background: none; cursor: pointer; transition: transform 0.5s ease; } .carousel .slick-prev.slick-arrow, .carousel .slick-next.slick-arrow { opacity: 1; } .carousel .slick-prev { order: 2; margin: 2.5rem 4rem 0 0; } .carousel .slick-prev:hover { transform: translateX(-1.3rem); } .carousel .slick-next { order: 3; margin: 2.5rem 7rem 0 0; } .carousel .slick-next:hover { transform: translateX(1.3rem); } .enjoy { font-weight: 900; font-size: calc(1.8rem + 8vw); line-height: 1.2em; margin: 10rem 0; } dl { flex-wrap: wrap; } dl div { flex-basis: calc(25% - 5rem + 5rem / 4); } 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 h3, .campsite_services .spiel { font-size: calc(2.2rem + 4vw); font-weight: 600; line-height: .9em; } .outside_activities h3 { margin-bottom: 10rem; } .outside_activities > div { align-items: start; } .outside_activities > div:first-of-type { margin-bottom: 5rem; } .outside_activities > div:first-of-type p { width: 25%; padding-top: 12rem; } .outside_activities > div:first-of-type img { width: 40%; } .outside_activities > div:first-of-type img:last-child { width: 35%; padding-top: 22rem; } .outside_activities > div:nth-of-type(2) > img { width: 35%; } .outside_activities > div:nth-of-type(2) > div { width: 30%; padding-top: 10rem; } .outside_activities > div:nth-of-type(2) > div img { margin-top: 20rem; } .outside_activities > div:nth-of-type(2) > img:last-child { padding-top: 22rem; } .outside_activities > div:last-child img { width: 40%; } .outside_activities > div:last-child img:first-child { margin-top: 10rem; } .outside_activities > div:last-child img:nth-child(2) { margin-top: 22rem; } .outside_activities > div:last-child div { width: 20%; } .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 { min-width: calc((100vw - 5rem/* main margin */ - 5rem/* booking gap */) * .40111/* flex: .4 of form */ + 5rem /* booking gap again */); flex-shrink: 0; } .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: 2.5rem; display: flex; gap: 5rem; } @media (max-width: 48rem) { .campsite_type_booking { flex-direction: column; } } .campsite_type_booking form { flex: .4; background-color: var(--accent); padding: 2rem; } .campsite_type_booking form fieldset { display: flex; gap: 2.5rem; padding: 0; border: none; } .campsite_type_booking form label { flex: 1; font-size: 2rem; } .campsite_type_booking form input { padding: 1.5rem .5rem; width: 100%; background-color: var(--base); } .campsite_type_booking form footer { margin-top: 2rem; } .campsite_type_booking form button { width: 100%; text-align: left; 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 form, .campsite_type_booking form button, .campsite_type_booking form input { border: none; border-radius: 5px; } .campsite_type_prices { flex: .6; padding: 2.5rem; border-radius: 5px; border: 3px solid black; } .campsite_type_prices dl { display: flex; justify-content: space-between; gap: 2.5rem; } .campsite_type_prices div { flex-basis: unset; } .campsite_type_prices dt { display: flex; align-items: center; gap: .5rem; border: none; padding: 0; } .campsite_type_calendar { padding: 5rem 0 2.5rem; } .campsite_type_features li { flex: 1; font-size: 2.4rem; text-align: center; justify-content: space-between; background-repeat: no-repeat; background-position: top center; 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 { flex: 2; } .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; 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; } #booking fieldset { border: none; } #booking legend { font-weight: bold; } #booking input:not([type="radio"]):not([type="checkbox"]), #booking select { width: 100%; } #booking fieldset { margin-bottom: 1em; padding-bottom: 1em; border-bottom: 3px solid black; } #booking fieldset:first-of-type, #booking fieldset:nth-of-type(3), #booking fieldset:last-of-type { display: grid; row-gap: 1em; column-gap: 1em; } #booking fieldset.campsite-options { transition: opacity .25s ease-in; } #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:nth-of-type(3) { grid-template-columns: repeat(4, 1fr); } #booking fieldset:last-of-type { border-bottom: none; grid-template-columns: repeat(2, 1fr); } @media (max-width: 48rem) { #booking fieldset { grid-template-columns: 1fr !important; } } body > footer { display: flex; flex-direction: column; gap: 1rem; } body > footer div, .campsite_type_features, .campsite_type_detail { padding: 5rem 0; border-top: 3px solid black; } .campsite_type_detail { padding-bottom: 2.5rem; } body > footer div { display: flex; justify-content: space-between; margin: 0 2.5rem; border-bottom: 3px solid black; } body > footer section { width: 25%; } body > footer h2 { font-size: 2.4rem; margin-bottom: 2rem; border-bottom: 1px solid black; } 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; }