/*
CSS definitions for sagi, in addition to base-layout.css
created 2022 by daniel.ammann@n3xt.ch
source_date = "2022-12-03T11:53:19.000Z"
file_version = 555;
*/
/* ========== Fonts ============= */
/* https://hanken.co/collections/free/products/hk-grotesk */
@font-face {
font-family: 'HKGrotesk';
src: url('/assets/fonts/HKGrotesk/HKGrotesk-Thin.woff') format('woff');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'HKGrotesk';
src: url('/assets/fonts/HKGrotesk/HKGrotesk-ExtraLight.woff') format('woff');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'HKGrotesk';
src: url('/assets/fonts/HKGrotesk/HKGrotesk-Light.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'HKGrotesk';
src: url('/assets/fonts/HKGrotesk/HKGrotesk-Regular.woff') format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'HKGrotesk';
src: url('/assets/fonts/HKGrotesk/HKGrotesk-Medium.woff') format('woff');
font-weight: 550;
font-style: normal;
}
@font-face {
font-family: 'HKGrotesk';
src: url('/assets/fonts/HKGrotesk/HKGrotesk-SemiBold.woff') format('woff');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'HKGrotesk';
src: url('/assets/fonts/HKGrotesk/HKGrotesk-Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'HKGrotesk';
src: url('/assets/fonts/HKGrotesk/HKGrotesk-ExtraBold.woff') format('woff');
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: 'HKGrotesk';
src: url('/assets/fonts/HKGrotesk/HKGrotesk-Black.woff') format('woff');
font-weight: 900;
font-style: normal;
}
/* END Fonts section
*/
/* ========== Colors & Typo ========== */
:root {
--background-color: white; /* sawblade lightgrey #d1d1d1 */
--font-color: #0d0d19; /* sawblade darkgrey */
--font-size: 0.75rem;
--accent-color: #deaf79; /* plank light */
--selection-color: #deaf7990;
--tablerow-hover-color: #deaf7930;
--font-family: "HKGrotesk",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; /* doron brayer @https://github.com/necolas/normalize.css/issues/665#issue-218860829*/
--icon-menu:url("data:image/svg+xml;utf8,");
/*--column-padding: -22%;*/
/*--column-padding-inner-factor: 1.5;*/
--img-sawteeth: url("data:image/svg+xml;utf8,");
--icon-menu:url("data:image/svg+xml;utf8,");
--icon-filter-accent:url("data:image/svg+xml;utf8,");
--editor-backgroundcolor:url("data:image/svg+xml;utf8,");
--font-color-not-edited: #ca9affc2; /* greenish #4dacbfa8; /*#6fe7ff70;*/ /*violet: #ca9affc2;*/
--editor-tablerow-hover-color: #7800b440;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #0d0d19; /* darkgrey sawblade */
--font-color: white;
--accent-color: #88653d /* plank dark */;
--tablerow-hover-color: #deaf7930;
--img-sawteeth:url("data:image/svg+xml;utf8,");
--icon-menu:url("data:image/svg+xml;utf8,");
--icon-filter-accent:url("data:image/svg+xml;utf8,");
}
}
body {
padding: 0;
font-family: var(--font-family, sans-serif);
color: var(--font-color);
background-color: var(--background-color);
}
body:not(.ready) #content {
filter: brightness(0);
transition: filter .3s;
}
body:not(.ready) nav {
filter: brightness(1);
transition: filter 0s;
}
.plank {
/*contains :before and :after with the fixed plank image on the left and right*/
display: block;
position: fixed;
z-index: -1;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
}
.plank:before,
.plank:after {
content: "\200b";
display: block;
position: fixed;
height: 100%;
width: 95%;
background-image: url("/assets/img/plank.jpg"), url("/assets/img/plank-blurred.jpg");
background-repeat-x: no-repeat;
background-position: left;
}
.plank:after {
right: -10%;
background-position: right;
width: 60%;
visibility: hidden;
}
article.content,
article.booking {
/* contains the main content of the page, which is centered and has the sawteeth ornament on the right */
position: absolute; /* Safari on iPhone adds -8px margin-right for relative positioned nodes */
z-index: 1;
top: 0;
width: 98.2%;
min-height: 100vh;
margin: 0% 5%;
margin-left: 0%;
padding: 0.4em 1em 2em 3em;
/*background-color: var(--background-color);*/
}
article.content:before {
/* solid background to cover eventual gaps between background images in Safari */
--sawblade-width: calc( 1008 / 1024 ); /* in SVG, the sawteeth background width is 1024, the teeth go back to 1008 */
content: "\200b";
display: block;
position: absolute;
top: -25%;
z-index: -1;
width: calc(99.8% * var(--sawblade-width));
min-height: 125%;
margin-left: -3em;
background-color: var(--background-color);
}
article.content:after {
/* background repeated images for sawteeth */
content: "\200b";
position: absolute;
top: 0;
right: 0;
z-index: -1;
min-height: calc(100% + 0.5em);
width: 99.9%;
width: 100%%;
margin: -0.5em 0em 0 -22%;
background-image: var(--img-sawteeth);
background-repeat-x: no-repeat;
background-position: right;
background-size: 100%;
}
article header {
position: absolute;
z-index: 9;
height: 2em;
width: 90%;
padding: 0.4em 0.5em 2em 2em;
}
article footer {
}
article.booking {
display: none;
}
article.booking.show {
position: fixed;
z-index: 100;
display: block;
height: 100%;
overflow-y: scroll;
background-color: var(--background-color);
}
article.booking,
.booking input {
color: #877c72; /* darker than input text #bbad9f */
}
.booking fieldset,
.booking fieldset input,
.booking fieldset textarea {
font-size: 1.5em;
}
.booking fieldset {
border: none;
transition: height 0.5s ease-out;
}
.booking fieldset h3 {
margin-top: 0;
outline: none;
}
.booking fieldset h3:before {
content: ">";
color: transparent;
position: absolute;
display: block;
/*float: right;*/
margin-left: -2em;
/*margin-right: -0.3em;*/
width: 1.5em;
background-image: var(--icon-unfold-less-horizontal);
background-repeat: no-repeat;
background-size: contain;
}
.booking fieldset h3:hover:before,
.booking fieldset h3:focus:before {
background-image: var(--icon-unfold-less-horizontal);
}
.booking fieldset h3:before {
filter: brightness(0.4) sepia(1);
}
.booking fieldset h3:hover:before,
.booking fieldset h3:focus:before {
background-image: var(--icon-unfold-less-horizontal);
cursor: pointer;
filter: none;
}
/*.booking fieldset.collapsed:not(:focus-within) {
height: 3em;
}
.booking fieldset.collapsed:focus-within * {
visibility: visible;
position: absolute;
}*/
.booking fieldset.collapsed > :not(h3) {
display: none;
}
.booking fieldset.collapsed + fieldset h3 {
/*margin-top: -1em;*/
}
fieldset h3:hover {
color: var(--font-color);
cursor: pointer;
}
fieldset:focus-within h3,
.booking label:focus-within {
color: var(--font-color);
}
.booking label {
display: block;
clear: both;
text-align: left;
font-size: 0.7em;
line-height: 1.5em;
margin-bottom: 1em;
min-height: 3em;
}
.booking label * {
font-size: initial;
}
.booking label > * {
display: block;
text-align: left;
}
.booking label > span {
display: contents;
}
.booking input,
.booking textarea {
color: #bbad9f;
margin-top: -0.1em;
margin-left -1px;
background-color: transparent;
padding: 0;
border: 0px solid transparent;
border-radius: 0em;
border-bottom: 2px solid #877c72;
line-height: 1.4em;
opacity: 0.7;
/* for mobile browsers */
width: -webkit-fill-available;
/*max-width: 20em;*/
margin-right: 1em;
}
.booking input:active,
.booking input:focus,
.booking textarea:active,
.booking textarea:focus {
opacity: 1;
border-color: var(--font-color);
outline: none;
}
.booking label:focus-within,
.booking input:focus,
.booking textarea:focus {
/*border-left: 1em solid white;
margin-left: -2em;
padding-left: 1em;*/
color: var(--font-color);
}
.booking input:-webkit-autofill,
.booking input:-webkit-autofill:focus,
.booking textarea:-webkit-autofill,
.booking textarea:-webkit-autofill:focus {
/* prevent yellow (darkmode: lightgrey) background when autofilled */
transition: background-color 600000s 0s, color 600000s 0s;
}
.booking input:-webkit-autofill:focus,
.booking textarea:-webkit-autofill:focus {
filter: contrast(3.5) brightness(5.5);
}
input[type="checkbox"] {
float: left;
line-height: initial;
margin: 0;
margin-top: 0.0em;
margin-right: 0.8em;
width: 1.1em;
height: 1.5em;
accent-color: lightgreen;
opacity: 0.3;
}
input[type="checkbox"]:checked {
opacity: 1;
}
.booking input + button {
position: absolute;
visibility: hidden;
}
.booking label .tip {
display: none;
}
label:before {
/* was bezweckt dieses element ?? */
content: "?";
color: transparent;
display: inline-block;
float: right;
margin-top: 1.8em;
margin-right: -0.3em;
width: 1.2em;
/*background-image: var(--icon-check-1);*/
background-repeat: no-repeat;
background-size: contain;
}
label.valid:before {
background-image: var(--icon-check-1);
filter: brightness(0.8);
transition: filter 1s ease-out;
}
label.invalid:before {
background-image: var(--icon-alert-circle);
transition: filter 0s;
}
label.uploaded:before {
background-image: var(--icon-check-2);
opacity: 0.85; /* start near the opacity of the finished valid animation */
filter: grayscale(100%) brightness(30%);
transition: filter 2s ease-out;
}
fieldset.invalid h3 {
color: var(--color-error);
opacity: 1;
}
label.invalid {
color: var(--color-error);
opacity: 1;
font-weight: 400;
}
/*input:invalid,*/
label.invalid input {
color: var(--color-error);
border-bottom-color: var(--color-error);
font-weight: var(--font-weight);
}
nav {
left: 0;
padding-left: 2.5em;
}
nav:before {
background-image: var(--icon-menu);
}
#content {
/*display: none;*/
margin-top: 0.5em;
}
h1 {
text-transform: uppercase;
font-size: 1.5em;
letter-spacing: 0.13em;
}
h2 {
text-transform: uppercase;
font-size: 1.3em;
letter-spacing: 0.13em;
}
h2, h3, h4, h5, h6 {
/* to align the baseline with the menu icon when jumping to a section anchor */
padding-top: 0.8em;
}
.request-toggles {
float: right;
}
label.tableheader {
display: inline-block;
/* float: right;*/
margin: 0;
margin-right: 1em;
padding: 0;
}
label.tableheader:last-child {
margin-right: -1em;
}
label.tableheader input[type="checkbox"] {
float: right;
/* padding-left: 0; */
margin-left: 0.5em;
margin-right: 0;
/* width: 1.1em; */
}
a,
a:link,
a:visited {
color: var(--fontcolor);
text-decoration-color: var(--accent-color);
hyphens: manual;
}
a.btn {
background-color: #a87e53;
color: #0d0d19;
padding: 0.2em 1.2em;
margin-top: 1em;
margin-right: 1em;
display: inline-block;
width: auto;
height: 2em;
min-width: 9.3em; /* 2 buttons on iPhone SE (3rd Gen with front facing round TouchID button) */
/*width: 17%;*/
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-weight: 700;
vertical-align: top; /* without vertical align, rounding errors in Safari may cause buttons to jump on hover */
}
a.btn.light {
line-height: 1.7em;
color: var(--font-color);
border: 1px solid var(--font-color);
background-color: transparent;
}
a.btn:hover {
filter: brightness(1.2);
}
a.btn.light:hover {
background-color: var(--selection-color);
}
a.btn[href^="http"]:hover:after {
/* reminder: an attribute is added by the md converter, but removed over js fo local links */
content: "➝";
position: absolute;
margin-left: 0.1em;
transform: rotate(-45deg);
}
a.btn[href^="#"]:hover:after {
content: "➝";
position: absolute;
transform: rotate(90deg);
margin-left: 0.1em;
}
strong {
/*white-space: nowrap;*/
}
#cookie_dump {
/*position: absolute;*/
display: block;
/*float: left;*/
/*bottom: 0px;*/
/*background-color: #8c6e53;*/
/*padding: 0 1em;*/
padding: 0 !important;
line-height: 1.3em;
/*border-top: 1px solid white;*/
margin-top: 1em;
margin-bottom: 1em;
}
#cookie_dump pre {
/*font-size: 0.8em;*/
width: inherit;
width: --webkit-fill-available;
}
#cookie_dump div {
display: inline-grid;
}/*
#cookie_dump a.btn.icon-only {
background-color: transparent;
width: var(--icon-size);
min-width: initial;
padding: 0;
float: right;
margin-right: 0;
}*/
#cookie_dump a.btn:hover:after {
display: none;
}
dd.inactive #content.nobefore {
/* without :before */
padding: 0.4em 1.5em 2em 1.5em;
/* background-color: var(--background-color); */
/* content: "\200b"; */
/* position: absolute; */
z-index: -1;
min-height: 110vh;
width: 92%;
/* margin: -0.5em 0em 0 -2em; */
/* width: 100%; */
background-image: var(--img-sawteeth);
background-repeat-x: no-repeat;
background-position: right;
background-size: 200%;
overflow: hidden;
}
dd.inactive #content.nobefore:before {
visibility: none;
}
:root {
/* set default height */
--cookie-banner-min-height: 4em;
}
#footer {
padding-bottom: 2em;
/*transition: padding-bottom 1s ease;*/
}
body.show-cookie-banner #footer {
/* make space at the bottom for the fixed cookie panel */
padding-bottom: calc(var(--cookie-banner-min-height) + 0.5em);
}
body #cookie_toggle:after {
content: " anzeigen";
}
body.show-cookie-banner #cookie_toggle:after {
content: " ausblenden";
}
footer#cookie-banner {
position: fixed;
z-index: 200;
left: 0;
bottom: -300px;
width: 100vw;
height: auto;
min-height: var(--cookie-banner-min-height);
background-color: var(--accent-color);
margin: 0;
padding: 0;
padding-left: 1em;
padding-bottom: 0.8em;
transition: bottom 1s ease;
font-size: 0.9em;
line-height: 1.7em;
}
.cookie-banner,
#cookie_dump {
height: auto;
display: flex;
flex-direction: row;
/* override respionsive paddings based on var(--column-padding-inner-factor) */
padding: 0em 1em 0em 0em !important;
}
.cookie-banner > p{
display: block;
}
.cookie-banner a, {
white-space: nowrap;
}
.cookie-banner a.btn,
#cookie_dump a.btn {
line-height: 1.7em;
color: var(--font-color);
border: 1px solid var(--font-color);
background-color: transparent;
min-width: 12.8em;
margin: 0.5em 0em 0.5em 2em;
/*margin-left: 2em;
margin-right: 0em;
margin-top: 0.5em;
margin-bottom: 0.5em;*/
/*align-self: flex-end;*/
white-space: nowrap;
}
.cookie-banner a.btn:hover,
.cookie-banner a.btn:active {
background-color: var(--selection-color);
}
.cookie-banner a.btn:after {
content: '';
display: none;
}
#cookie_toggle {
padding-left: 0.25em;
}
#footer + #cookie_toggle {
/* hide cookie-toggle as long as it's autside the footer. will be inserted on load */
display: none;
}
body.show-cookie-banner #cookie-banner {
bottom: 0;
}
body.show-cookie-banner #footer {
margin-bottom: var(--cookie-banner-min-height);
}
/* #editor-dim {
display: block;
z-index: 100;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: var(--editor-backgroundcolor);
background-blend-mode: multiply;
} */
html:not(.admin) [contenteditable] {
cursor: default;
}
[contenteditable] {
-webkit-user-select: text;
user-select: text;
}
[contenteditable="true"]:focus {
outline: none;
border-color: inherit;
-webkit-box-shadow: none;
box-shadow: none;
}
span.state {
display: inline-block;
font-size: 80%;
width: 1.5em;
height: 1.5em;
background-color: #dada64;
border: 1px solid black;
color: black;
line-height: 1.5em;
text-align: center;
letter-spacing: -0.0em;
font-weight: bold;
border-radius: 0.25em;
margin: 0px 0.15em;
margin-right: 0.45em;
}
span.state.state2 { background-color: #fbf289 }
span.state.state3 { background-color: #a0d4b1 }
span.state.state4 { background-color: #03b3b3 } /* zu grün #57bc92 */
span.state.state7 { background-color: #27aae1 }
/* .data.table Table editor for admins */
.data-table th,
.data-table td {
font-weight: normal;
white-space: nowrap;
text-overflow: ellipsis;
width: fit-content;
transition: border 0.3s 0.3s ease-out;
}
.data-table col.hide {
width: 0% !important;
}
.data-table tr.filter th {
/* will be disabled in the labels column if others are shown*/
/* border-top: 1px solid var(--font-color);*/
display: none;
}
.data-table .filter-btn.active ~ table .labels th {
/* make line from .filter below visible */
border: none;
}
.data-table tr.line th {
border-bottom: 2px solid var(--font-color);
}
.data-table tr.filter th {
display: none; /* table-row; */
}
.data-table .filter-btn.active ~ table tr.filter th,
.data-table .filter-btn.active ~ table tr.filter:hover th {
display: table-cell; /* table-row; */
border-top: 2px solid var(--filter-accent-color);
border-bottom: 2px solid var(--filter-accent-color);
cursor: text;
}
.data-table th:empty::before {
/* pseudo-placeholder */
/* force display of empty foilter cells */
content:'filtertext';
overflow: hidden;
opacity: 0;
margin-right: -1.7em;
}
.data-table td:empty::before {
/* force display of empty foilter cells */
content:'x';
visibility: hidden;
}
.data-table tr:not(:focus-within) th:hover:empty::before,
.data-table tr th:focus:empty::before {
/* force display of empty foilter cells */
opacity: 0.2;
}
.data-table .spacer {
transform: translateY(-2px);
cursor: row-resize;
}
.data-table .spacer th {
font-size: 0px;
line-height: 4px;
border: none;
}
.data-table .filter-btn.active:not(:hover):not(.hover) ~ table tr.filter:not(:hover) th:empty {
border-color: grey;
}
.data-table .filter-btn.active ~ table tr.filter th:hover {
background-color: var(--editor-backgroundcolor);
}
.data-table tr.filter th:not(:empty):not(:focus) {
color: var(--filter-accent-color);
}
.db-table .filter-btn.active ~ table tr.line th {
border-bottom-width: 0px;
}
.data-table th {
transition: border-color 0.3s 0.3s ease-out;
}
.data-table tr:hover td {
transition: background-color 0.1s ease-out;
}
.data-table .filter th {
border-bottom: 2px;
}
/*.data-table .filter-btn.collapsed .filter th {
display: none;
}*/
.data-table td {
border-bottom: 1px solid transparent;
transition: background-color 0.3s 0.1s ease-out;
}
.data-table td.btn {
cursor: pointer;
}
.data-table td.btn:hover,
.data-table td.btn:focus-within {
background-color: var(--accent-color);
}
.data-table td a.btn {
margin-top: -0.4em;
margin-left: -2px;
}
.data-table td a.btn:focus {
background-color: var(--accent-color);
outline: none;
}
.data-table td a.btn:hover:after {
content: "";
}
.data.table tr.hover td {
background-color: var(--tablerow-hover-color);
}
.data-table .editor:focus-within ~ table tr:hover td {
/* remove default from base-layout.css*/
background-color: transparent;
}
.data-table .edit-btn.active ~ table tr.hover td,
.data-table .editor:not(:focus-within) .edit-btn.active ~table tr:hover td {
background-color: var(--editor-tablerow-hover-color);
transition: background-color 0.1s ease-out;
}
.data-table .filter-btn,
.data-table .edit-btn,
.data-table .options {
position: absolute;
width: 2em;
height: 2em;
background-size: 1.2em;
background-position: center center;
background-repeat: no-repeat;
opacity: 0.2;
transition: opacity 0.3s 0.3s ease-out, background-color 0.3s 0.6s ease-out;
cursor: pointer;
}
.data-table .filter-btn {
margin-top: 1em;
margin-left: -3em;
background-image: var(--icon-filter);
}
.data-table .filter-btn:hover,
.data-table .filter-btn.hover,
.data-table .filter-btn.active {
opacity: 1;
/* filter: invert(100%);*/
background-color: var(--filter-accent-color); /* #B40082; */
transition: opacity 0.1s ease-out, background-color 0.1s ease-out;
}
.data-table .filter-btn:hover ~ table th,
.data-table .filter-btn.hover ~ table th,
.data-table .filter-btn.active ~ table th {
border-color: var(--filter-accent-color);
transition: border-color 0.1s ease-out;
}
.data-table td.filtered,
.data-table col.filtered {
color: var(--font-tableedit-filtercol);
}
.data-table .spacer tr {
border-bottom: 12px solid transparent;
}
.data-table .edit-btn {
/* shares a lot with .filter-btn */
margin-top: 3em;
margin-left: -3em;
background-image: var(--icon-pencil);
background-size: 67%;
}
/* .data-table .edit-btn {
}
*/ .data-table .edit-btn:hover,
.data-table .edit-btn.active {
opacity: 1;
background-color: #7800b4; /* violet, not fuchsia #B40082; */
transition: opacity 0.1s ease-out, background-color 0.1s ease-out;
}
.data-table .edit-btn.active:hover {
background-color: transparent;
}
.data-table .edit-btn:not(.active):hover ~ table tbody,
.data-table .edit-btn ~ .editor:focus-within ~ table tbody {
color: var(--font-color-not-edited);
}
.data-table .edit-btn.active ~ .editor {
}
.data-table .options {
/* shares a lot with .filter-btn */
right: 2em;
margin-top: 1em;
margin-left: -3em;
background-image: var(--icon-dots-horizontal);
}
.data-table .options:hover,
/* .data-table .options.hover,*/
.data-table .options.active {
opacity: 1;
/* filter: invert(100%);*/
background-color: var(--accent-color); /* #B40082; */
transition: opacity 0.1s ease-out, background-color 0.1s ease-out;
}
/* .data-table .edit-btn ~ .editor:focus-within ~ table tbody {
color: var(--font-color-not-edited);
}
*/ .editor {
display: none;
position: absolute;
z-index: 1000;
}
.data-table .edit-btn.active ~ .editor {
display: block;
}
/* .data-table .edit-btn:not(.active) .editor:hover tr.hover td{
}*/
.editor .td {
display: table-cell;
padding: 1px;
padding-left: 0.15em;
outline: none;
border-color: inherit;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-user-select: text;
user-select: text;
color: transparent;
}
.editor .td:focus {
color: var(--font-color);
}
/* sagi homepage banner pan*/
.banner {
overflow: hidden;
max-height: 16em;
height: 10em;
margin-right: 2em;
margin-bottom: -1em;
}
.banner img {
/*width: 250%;*/
/*height: auto;*/
width: auto;
height: 190%;
float: right;
max-width: initial;
max-height: initial;
margin-top: -1em;
transform: translateX(20px);
}
.banner + p {
display: flex;
margin-right: 0em;
/* on small screens, only two buttons are displayed (left aligned) */
/*justify-content: space-between;*/
/*flex-wrap: wrap;*/
}
/* page editor, only needed for administrators */
/* needs rework. content editor should use .ce instead of .admin */
/* the Admin Backend uses the same md-parser.html which will be extended by admin.js */
html:not(.admin) .admin {
display: none;
}
html.admin footer {
/* display: none;*/
}
html.admin nav .admin {
/* only for nav menu?? */
color: var(--font-color-not-edited);
color: var(--accent-color);
}
html.admin nav li.admin:before {
content: "lock";
color: transparent;
display: inline-block;
float: right;
width: 1em;
height: 1em;
overflow: hidden;
background-repeat: no-repeat;
background-size: 1em;
background-image: var(--icon-locked);
filter: hue-rotate(49deg) opacity(0.76) brightness(1.6) saturate(0.45)
}
.admin #content section:first-of-type h1 {
margin-top: 1.5em;
}
.hide_on_portrait_phones {
/*display: none !important;*/
position: absolute;
left: -1000em;
}
.hide_on_smartphones {
/* display: none;*/
visibility: hidden;
}
.show_on_portrait_smartphones_only {
/*display: inherit;*/
}
.show_on_smartphones_only {
/*display: inherit;*/
}
.show_on_desktop_only {
/* display: none !important;*/
visibility: hidden;
}
@media (prefers-color-scheme: dark) {
.plank:after {
visibility: visible;
}
article.content,
article.booking,
#cookie-banner > div {
width: 96%;
}
a.btn {
background-color: #a3aaa5 /*#0d0d19;*/
}
}
@media only screen and (min-width: 652px) {
/* smartphones in landscape (iPhone SE landscape = 653px) */
:root {
--font-size: 0.8rem;
--min-width: initial;
--max-width: initial;
}
article.content:before {
width: calc(99.7% * var(--sawblade-width));
}
.hide_on_portrait_phones {
position: inherit;
left: auto;
}
.show_on_portrait_smartphones_only {
display: none !important;
}
.banner + p {
/* on portrait ipads and landscape phones, four buttons are displayed on one line */
justify-content: space-between;
/*flex-wrap: wrap;*/
}
}
@media only screen and (min-width: 740px) {
/* Tablets in portrait (iPad mini 6 portrait 744*1090 */
:root {
--font-size: 1rem; /* weird sizing on iphoneX and newer in landscape */
--font-size: 1.55vw; /* let it grow respecting the four buttons on index.html */
/*--font-size: 70%;*/
--min-width: initial;
--max-width: initial;
--column-padding: 7vw;
--column-padding-inner-factor: 1.5;
--icon-menu:url("data:image/svg+xml;utf8,")
}
nav:before {
opacity: 1;
transform: scale(1.5);
transform-origin: top left;
}
h1 {
margin-top: 2em;
}
a.btn {
/*width: 17%;*/
}
.plank:after {
visibility: visible;
}
article.content,
article.booking,
#cookie-banner > div {
width: calc(98% - (1.5 * var(--column-padding)) - (env(safe-area-inset-right) * 0.4));
margin-left: var(--column-padding);
padding: 0% calc( var(--column-padding) * var(--column-padding-inner-factor));
padding-right: var(--column-padding);
/*padding-right: 2em;*/
}
/*background-color: var(--background-color);*/
article.content:before {
width: calc(99.9% * var(--sawblade-width));
margin-left: calc(var(--column-padding) * -1 * var(--column-padding-inner-factor) );
}
article.content:after {
/*margin-right: calc( var(--column-padding) * 1.5);*/
margin-left: calc( var(--column-padding) * -1 * var(--column-padding-inner-factor) );
background-size: 80%;
}
.cookie-banner a.btn,
#cookie_dump a.btn {
min-width: 13em;
}
.hide_on_smartphones {
display: inherit;
}
.show_on_smartphones_only {
display: none !important;
}
.banner + p {
/* on landscape ipads and small desktop screens, the font size and with it, the button width increases,
for those, the buttons are left aligned again */
justify-content: initial;
flex-wrap: wrap;
}
}
@media only screen and (min-width: 1024px) {
/* tablets in landscape */
:root{
--font-size: 1rem; /* weird sizing on iphoneX and newer in landscape */
}
h1 {
margin-top: 4em;
}
a.btn {
margin-right: 0.9em;
}
#cookie_dump pre {
font-size: 0.8em;
}
.banner + p {
/* on medium desktop screens, the buttons are justified on one line again */
justify-content: space-between;
flex-wrap: no-wrap;
}
}
@media only screen and (min-width: 1200px) {
:root {
--column-padding: 8vw;
--column-padding-inner-factor: 1.7;
--font-size: 1.1rem;
}
.show_on_desktop_only {
/* display: initial !important;*/
visibility: visible;
}
.hide_on_desktop_only {
/* display: none;*/
visibility: hidden;
}
article.content,
article.booking,
#cookie-banner > div {
padding: 0% calc( var(--column-padding) * var(--column-padding-inner-factor));
/*width: calc(70% - env(safe-area-inset-right)*0.4);*/
/*margin-left: 10%;*/
/*padding-right: 2em;*/
/*padding-left: 10%;*/
}
article.content:before {
width: calc(95.1% * var(--sawblade-width));
margin-left: calc( var(--column-padding) * -1 * var(--column-padding-inner-factor));
/*margin-left: -10%;*/
}
article.content:after {
margin-left: calc( var(--column-padding) * -1 * var(--column-padding-inner-factor));
background-size: 66%;
}
}