jordi fita mas
8b8dda7969
This page is “highly stylized”, with a masonry-like grid, that i did not know how to generate automatically from data defined in PostgreSQL, therefore with Oriol we agreed to have this one as a static page and we will see what we can do if the customer asks to be able to change it. I was a bit undecided on whether the icons in the bottom part of the page should be defined in the CSS or with style="" and CSS variables, like i do for the campsite type in the home page. At first i thought that it should use CSS variables, mostly for coherence: if another section of the web does it for its background image, why no this one. The difference is that the home page is dynamically created from the database, while this page is static and we know what icons we need, thus it makes more sense to move it to the stylesheet file, because then it will be downloaded by user agents that actually want to use it (e.g., browsers, but not Braille terminals).
653 lines
17 KiB
CSS
653 lines
17 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;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 4.2rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
a {
|
|
color: var(--contrast);
|
|
text-decoration: none;
|
|
}
|
|
|
|
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: 5rem;
|
|
height: 4.33rem;
|
|
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 98.72705 85.5'%3E%3Cpath d='m49.36377,0L0,85.5h98.72705L49.36377,0Zm18.61945,46.25l18.61945,32.25h-37.23914l18.61969-32.25Z' fill='%23303234'/%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 {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
display: flex;
|
|
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;
|
|
top: -.5rem;
|
|
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 {
|
|
display: inline-block;
|
|
transition: transform 0.5s ease;
|
|
}
|
|
|
|
.nature div:first-child a:hover span, .services a:hover span, .spiel a: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);
|
|
}
|
|
|
|
.surroundings .spiel {
|
|
font-size: 2.4rem;
|
|
padding-right: 4rem;
|
|
}
|
|
|
|
.surroundings .spiel p {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.surroundings figure, .surroundings .slick-track > img {
|
|
margin-right: 5rem;
|
|
position: relative;
|
|
}
|
|
|
|
.surroundings img {
|
|
height: 40rem;
|
|
width: 100%;
|
|
border-radius: 5px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.surroundings 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;
|
|
}
|
|
|
|
.surroundings .slick-list {
|
|
order: 1;
|
|
padding: 0 20% 0 0 !important;
|
|
}
|
|
|
|
.surroundings .slick-track {
|
|
display: flex;
|
|
align-items: start;
|
|
}
|
|
|
|
.surroundings .slick-slider {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: end;
|
|
}
|
|
|
|
.surroundings .slick-arrow {
|
|
font-size: 6rem;
|
|
line-height: 1;
|
|
width: 5rem;
|
|
height: 5rem;
|
|
border: none !important;
|
|
background: none;
|
|
cursor: pointer;
|
|
transition: transform 0.5s ease;
|
|
}
|
|
|
|
.surroundings .slick-prev.slick-arrow, .surroundings .slick-next.slick-arrow {
|
|
opacity: 1;
|
|
}
|
|
|
|
.surroundings .slick-prev {
|
|
order: 2;
|
|
margin: 2.5rem 4rem 0 0;
|
|
}
|
|
|
|
.surroundings .slick-prev:hover {
|
|
transform: translateX(-1.3rem);
|
|
}
|
|
|
|
.surroundings .slick-next {
|
|
order: 3;
|
|
margin: 2.5rem 7rem 0 0;
|
|
}
|
|
|
|
.surroundings .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: 1;
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
.icon_bicycle {
|
|
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="%23000000" height="32" width="32"%3E%3Cpath d="M208,116a43.66,43.66,0,0,0-18.62,4.15L159,68h33a12,12,0,0,1,12,12,4,4,0,0,0,8,0,20,20,0,0,0-20-20H152a4,4,0,0,0-3.46,6L163.7,92H97L79.46,62A4,4,0,0,0,76,60H48a4,4,0,0,0,0,8H73.7L89.89,95.76,70.57,122.25A44.21,44.21,0,1,0,77,127L94.29,103.3,128.54,162a4,4,0,0,0,3.46,2,4.11,4.11,0,0,0,2-.54,4,4,0,0,0,1.44-5.48l-33.83-58h66.74l14.11,24.19A44,44,0,1,0,208,116ZM84,160a36,36,0,1,1-18.16-31.25L44.77,157.64a4,4,0,0,0,6.46,4.72l21.07-28.9A35.92,35.92,0,0,1,84,160Zm124,36a36,36,0,0,1-21.47-64.88l18,30.9a4,4,0,0,0,3.46,2,4.11,4.11,0,0,0,2-.54,4,4,0,0,0,1.44-5.48l-18-30.89A36,36,0,1,1,208,196Z"/%3E%3C/svg%3E');
|
|
}
|
|
|
|
.icon_route {
|
|
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="%23000000" height="32" width="32"%3E%3Cpath d="M226.46,52.85a4,4,0,0,0-3.43-.73L160.47,67.76,97.79,36.42a4,4,0,0,0-2.76-.3l-64,16A4,4,0,0,0,28,56V200a4,4,0,0,0,5,3.88l62.56-15.64,62.68,31.34a4,4,0,0,0,2.76.3l64-16a4,4,0,0,0,3-3.88V56A4,4,0,0,0,226.46,52.85ZM100,46.47l56,28V209.53l-56-28ZM36,59.12l56-14V180.88l-56,14ZM220,196.88l-56,14V75.12l56-14Z"/%3E%3C/svg%3E');
|
|
}
|
|
|
|
.icon_outing {
|
|
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="%23000000" height="32" width="32"%3E%3Cpath d="M164,44.17V32a20,20,0,0,0-20-20H112A20,20,0,0,0,92,32V44.17A52.05,52.05,0,0,0,44,96V216a12,12,0,0,0,12,12H200a12,12,0,0,0,12-12V96A52.05,52.05,0,0,0,164,44.17ZM112,20h32a12,12,0,0,1,12,12V44H100V32A12,12,0,0,1,112,20Zm60,144H84V152a12,12,0,0,1,12-12h64a12,12,0,0,1,12,12Zm-88,8h56v12a4,4,0,0,0,8,0V172h24v48H84Zm120,44a4,4,0,0,1-4,4H180V152a20,20,0,0,0-20-20H96a20,20,0,0,0-20,20v68H56a4,4,0,0,1-4-4V96A44.05,44.05,0,0,1,96,52h64a44.05,44.05,0,0,1,44,44ZM148,88a4,4,0,0,1-4,4H112a4,4,0,0,1,0-8h32A4,4,0,0,1,148,88Z"/%3E%3C/svg%3E');
|
|
}
|
|
|
|
.icon_kayak {
|
|
background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 29.52905 28.08545" xmlns="http://www.w3.org/2000/svg" id="uuid-87ec619a-4896-40b8-8478-aa076dee3f7c"%3E%3Cpath stroke-width="0" d="m29.46728,11.26074l-.57617-2.15186c-.08398-.31299-.24609-.59229-.45801-.78613-.26758-.24658-.59863-.3418-.90625-.25879l-3.4834.93213c-.26953.07227-.48535.26807-.6084.54932l-.5752,1.30713c-.0719.16376-.10333.34686-.10742.53485l-3.05627.81787c-.23956-3.37067-1.03204-8.79126-2.35193-10.66425l-.22363-.31836C16.58057.45752,15.69971.00049,14.76318,0h-.00049c-.94873,0-1.80566.44434-2.35156,1.21875-1.71973,2.44043-2.65771,9.75146-2.65771,12.82422,0,.24457.00812.52399.0199.81769l-3.25604.87134c-.09741-.16071-.21613-.30347-.36005-.40924l-1.15088-.84424c-.24854-.18213-.53125-.24463-.80127-.17236l-3.48389.93164c-.56689.15234-.85693.84961-.65918,1.58691l.57617,2.15137c.0835.31348.24561.59277.45654.78613.20508.18848.4458.28809.68506.28809.07471,0,.14893-.00879.22168-.02832l3.48486-.93359c.26807-.07227.48389-.26758.60693-.54883l.57568-1.30664c.07172-.16357.10309-.3465.10718-.5343l3.05591-.81793c.25531,3.52673,1.14368,8.94983,2.5791,10.98602.5459.77441,1.40332,1.21875,2.35205,1.21875.93652,0,1.81738-.45703,2.35645-1.22266l.22461-.31738c1.60352-2.27637,2.43066-9.79492,2.43066-12.50244,0-.23499-.00854-.51709-.021-.81805l3.25732-.87183c.09747.16071.21625.30347.36035.40912l1.15039.84473c.18066.13281.38086.20166.5791.20166.07422,0,.14941-.00977.22168-.0293l3.48535-.93262c.56641-.15234.85645-.84863.65918-1.58594Zm-24.24072,6.86182l-3.41602.93262c-.03516-.01465-.14844-.12109-.20654-.33691l-.57617-2.15137c-.05713-.21484-.01318-.3623-.04688-.3623h-.00098l3.4165-.93164s.00586.00293.01709.01074c.00049,0,.00098.00098.00098.00098l1.00842.74017-1.90881.5108c-.2666.07227-.4248.3457-.35352.6123.05957.22363.26172.37109.48242.37109.04297,0,.08643-.00586.12988-.0166l1.91559-.5127-.46198,1.13281Zm5.52686-4.07959c0-3.07959.93994-10.06934,2.4751-12.24805.35596-.50488.91504-.79492,1.53418-.79492.62109.00049,1.18213.2915,1.54053.79932l.22266.31689c1.17902,1.67261,1.96533,7.08936,2.18457,10.35278l-1.50305.40228c-.19397-2.55505-1.02423-4.83514-2.44324-4.83514-1.63379,0-2.48828,3.02197-2.48828,6.00684,0,.04913.00214.09814.00262.14728l-1.51538.40552c-.00574-.19403-.0097-.38147-.0097-.5528Zm2.52692-.12079c.02441-2.93951.89984-4.88605,1.48383-4.88605.53003,0,1.29828,1.6062,1.45496,4.09961l-2.93878.78644Zm2.96765.24115c-.02441,2.93933-.89978,4.88599-1.48383,4.88599-.53003,0-1.29834-1.60632-1.45496-4.09937l2.93878-.78662Zm2.52692-.12036c0,2.66846-.84961,9.94092-2.24902,11.92725l-.22363.31641c-.71387,1.01367-2.36084,1.01562-3.07373.00391-1.31152-1.86127-2.18622-7.22681-2.414-10.67285l1.50641-.4032c.19397,2.55505,1.02417,4.83484,2.44324,4.83484,1.63379,0,2.48828-3.02148,2.48828-6.00635,0-.04926-.00214-.09845-.00262-.14777l1.51514-.40558c.00659.20087.00995.38617.00995.55334Zm6.35742-1.23047s-.00684-.00293-.01855-.01123l-1.00897-.74091,1.90936-.51105c.26758-.07129.42578-.34521.35449-.6123-.07227-.26562-.3418-.42725-.6123-.35352l-1.91577.5127.46069-1.13379,3.41699-.93164c.03516.01416.14844.12012.20605.33691l.57617,2.15186c.05957.21973.01953.36816.04883.36133l-3.41699.93164Z"/%3E%3C/svg%3E');
|
|
}
|
|
|
|
.outside_activities {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.outside_activities h3 {
|
|
font-size: calc(2.2rem + 4vw);
|
|
font-weight: 600;
|
|
line-height: .9em;
|
|
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%;
|
|
}
|
|
|
|
.outside_activities > div:last-child p {
|
|
margin-bottom: 1.5em;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
footer {
|
|
font-size: 1.5rem;
|
|
text-align: center;
|
|
padding: 2.5rem;
|
|
}
|