1203 lines
30 KiB
CSS
1203 lines
30 KiB
CSS
/**
|
|
* SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
|
|
* 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 {
|
|
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: 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 {
|
|
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.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;
|
|
}
|
|
|
|
@media (max-width: 80rem) {
|
|
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;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.campsite_services {
|
|
margin: 0 0 40px 0;
|
|
}
|
|
|
|
.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);
|
|
min-height: 220px;
|
|
padding: 12.5px;
|
|
border-radius: 5px;
|
|
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%;
|
|
}
|
|
}
|
|
|
|
/* autside-activities tablet & mobile */
|
|
@media (max-width: 64rem) {
|
|
|
|
dl, .nature div + div, .outside_activities > div {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.outside_activities > div:first-of-type p {
|
|
width: 100% !important;
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
.outside_activities > div:first-of-type img:last-child {
|
|
width: 100% !important;
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
} /* end autside-activities tablet & mobile */
|
|
|
|
.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 img {
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.outside_activities > div {
|
|
align-items: start;
|
|
}
|
|
|
|
.outside_activities > div:first-of-type {
|
|
margin-bottom: 5rem;
|
|
}
|
|
|
|
.outside_activities > div:first-of-type p {
|
|
width: 25%;
|
|
margin-top: 12rem;
|
|
}
|
|
|
|
.outside_activities > div:first-of-type img {
|
|
width: 40%;
|
|
}
|
|
|
|
.outside_activities > div:first-of-type img:last-child {
|
|
width: 35%;
|
|
margin-top: 22rem;
|
|
}
|
|
|
|
.outside_activities > div:nth-of-type(2) > img {
|
|
width: 35%;
|
|
}
|
|
|
|
.outside_activities > div:nth-of-type(2) > div {
|
|
width: 30%;
|
|
margin-top: 10rem;
|
|
}
|
|
|
|
.outside_activities > div:nth-of-type(2) > div img {
|
|
margin-top: 20rem;
|
|
}
|
|
|
|
.outside_activities > div:nth-of-type(2) > img:last-child {
|
|
margin-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;
|
|
}
|
|
|
|
/* form */
|
|
|
|
input {
|
|
height: 60px;
|
|
border-radius: 5px;
|
|
border: 1px solid;
|
|
}
|
|
|
|
select {
|
|
min-height: 60px;
|
|
border-radius: 5px;
|
|
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: 5px;
|
|
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: solid 1px;
|
|
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: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;
|
|
}
|
|
}
|
|
|
|
|
|
/* footer responsive */
|
|
@media (max-width: 48rem) {
|
|
body > footer div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
body > footer section {
|
|
width: 100% !important;
|
|
margin: 40px 0 0 0;
|
|
}
|
|
|
|
}/* end footer responsive */
|
|
|
|
footer {
|
|
margin: 120px 0 0 0;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
/* contact */
|
|
|
|
.contact-page {
|
|
display: grid;
|
|
grid-template-columns: 1fr 4fr;
|
|
}
|
|
|
|
address {
|
|
font-style: normal;
|
|
font-size: 2rem;
|
|
font-size: calc(16px + .4vw);
|
|
margin: 30px 0 0 0;
|
|
}
|
|
|
|
#map {
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/* camping map */
|
|
|
|
#arbres {
|
|
mix-blend-mode: multiply;
|
|
}
|