:root { --highlight-color: rgb(142, 4, 81); --light-color: color-mix(in oklab, var(--highlight-color), white 20%); --header-font: 'Geologica', sans-serif; --body-font: 'Geologica', sans-serif; --font-color: #333333; --menu-bar-height: 50px; } body { margin: 0; padding: 0; overflow-x: hidden; font-family: var(--body-font); color: var(--font-color); hyphens: auto; } #logo { display: block; margin-left: auto; margin-right: auto; width: 70%; box-shadow: unset; margin-bottom: 16px; } @media only screen and (max-width: 800px) { #logo { width: 100%; } } h1, h2, h3, h4, h5, h6, time { font-family: var(--header-font); color: var(--highlight-color); } #container { margin: 0; padding: 0; max-width: 100vw; min-height: calc(100vh - 72px - 85px); display: flex; flex-direction: column; } #container>* { width: 1000px; margin: 0 auto; } @media only screen and (max-width: calc(1000px + 1.2em)) { #container>* { width: auto; margin: 0 1.2em; } } #container main { line-height: 1.5; font-size: 1rem; flex: 1; } #container main section#home ul { margin: 0; padding: 0; list-style: none; } #container main section#home ul li { margin: 0.5em 0; padding-bottom: 0.5em; } #container main section#home ul li h2 { margin: 0.2em 0; } #container main section#home ul li h2 a { color: var(--highlight-color); } #container main section#home span { color: #666666; } #container p a { font-style: italic; text-decoration: underline; } #container main section#list ul { margin: 0; padding: 0; list-style: none; } #container main section#list ul li { display: flex; justify-content: space-between; padding: 0.5em 0; border-bottom: 1px solid #cecece; } #container main section#list ul li time, #container main section#list ul li span.count { float: right; white-space: nowrap; } #container main section#list ul li:last-child { border-bottom: none; } @media only screen and (max-width: 800px) { #container main section#list ul li { font-size: small; } } #container main section.post-nav { margin: 0.5em 0; padding: 0.5em 0; display: flex; justify-content: space-between; border-top: 1px solid #f7f7f7; font-size: 0.9em; } #left-page { text-align: left; } #right-page { text-align: right; } #left-arrow { float: left; padding-right: 5px; } #right-arrow { float: right; padding-left: 5px; } #container main article h2 { color: var(--highlight-color); } .highlight { background: #f8f8f8; } #container main article pre, #container main section pre { overflow-x: auto; padding: 0.8em; box-shadow: 0 -1px 0 #bbbbbb inset; } #container main article p kbd, #container main section p kbd { display: inline-block; padding: 0.2em 0.3em; font-size: 0.8em; line-height: 1em; color: #555555; vertical-align: middle; background-color: #f5f5f5; border-width: 1px; border-style: solid; border-color: #cccccc #cccccc #bbbbbb; border-image: none; border-radius: 3px; box-shadow: 0 -1px 0 #bbbbbb inset; } #container main h1 { margin-bottom: 1rem; } .meta-aside, #container main section#home ul li aside, #container main article aside { margin: 0.5em 0; font-family: var(--header-font); color: #909090; font-size: 0.8em; } .meta-aside ul, #container main section#home ul li aside ul, #container main article aside ul { margin: 0; padding: 0; list-style: none; } .meta-aside ul li, #container main section#home ul li aside ul li, #container main article aside ul li { margin: 0; padding: 0; } a { color: #666666; text-decoration: none; } img { width: 100%; box-shadow: 0 3px 3px #bbbbbb; } ul.pagination { display: flex; justify-content: center; margin: 1em 0 0; padding: 0.5em 0; list-style: none; } ul.pagination li { padding: 0 0.5em; } @media only screen and (max-width: 800px) { ul.pagination li { padding: 0 0.3em; } } ul.pagination li.active { font-weight: bold; } .listmonk-form>div>p { margin: 0; } .listmonk-form>div>p>input { padding: 0; margin: 0px; width: calc(100% - 4px); height: 36px; margin-bottom: 6px; text-indent: 10px; } .listmonk-form>div>input[type="submit"] { width: calc(100%); height: 40px; margin-top: 6px; } .altcha { max-width: unset !important; } .button { background-color: var(--highlight-color); border: none; border-radius: 2px; height: 36px; color: white; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } /* footer */ #container footer { display: flex; justify-content: space-between; gap: 1rem; list-style: none; margin-bottom: 20px; } .social-media { display: flex; list-style: none; padding: 0; margin: 0; gap: 1rem; } .social-media li { display: flex; align-items: center; } @media only screen and (max-width: 800px) { #container footer { flex-direction: column; align-items: center; } } /* navbar */ .header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.5rem; background-color: #f8f9fa; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; position: sticky; top: 0; z-index: 1000; } .logo a img { height: var(--menu-bar-height); width: auto; box-shadow: unset; display: block; } /* Menu and Burger */ .nav-links { display: flex; gap: 1.5rem; list-style: none; } .nav-link { font-size: 24px; text-decoration: none; color: #333; padding-bottom: 4px; transition: border-color 0.3s ease; border-bottom: 2px solid transparent; } .nav-link:hover, .nav-link:focus, .nav-link.active, active { border-color: var(--highlight-color); } /* Hide checkbox */ .menu-toggle { display: none; } /* Burger menu */ .burger { display: none; flex-direction: column; justify-content: space-between; width: 25px; height: 20px; cursor: pointer; } .burger span { height: 3px; background-color: #333; width: 100%; border-radius: 2px; transition: transform 0.4s ease-in-out, opacity 0.3s ease-in-out, background-color 0.3s ease-in-out; transform-origin: center; } /* Responsive styles */ @media (max-width: 1000px) { .burger { display: flex; z-index: 2; } .nav { position: absolute; top: 100%; right: 0; width: 100%; } .nav-links { flex-direction: column; background-color: #f8f9fa; overflow: hidden; max-height: 0; opacity: 0; margin-top: 0; padding: 1rem; transform: translateY(-10px); transition: max-height 1.4s ease, opacity .6s ease, transform 1.3s ease; } /* Show menu when checkbox is checked */ .menu-toggle:checked+.burger+.nav .nav-links { max-height: 500px; /* must be enough to show all items */ opacity: 1; padding: 1rem; transform: translateY(0); } /* Animate burger to X when menu is open */ .menu-toggle:checked+.burger span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); } .menu-toggle:checked+.burger span:nth-child(2) { opacity: 0; } .menu-toggle:checked+.burger span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); } } /* door status */ :root { --open-color: #00be00; --closed-color: #f44336; } #doorStatus { height: 64px; text-align: center; line-height: 64px; color: #333333; border-top: 8px solid #ffc107; padding: 0 1.2em 0 1.2em; } @media only screen and (min-width: 800px) { #doorStatus { font-size: 24px; } } #doorStatus.unknown { border-top: 8px solid #eeeeee; } #doorStatus.unknown::after { content: ' vielleicht offen'; } #doorStatus::before { content: 'Die Essembly ist '; } #doorStatus.open { border-top: 8px solid var(--open-color); } #doorStatus.open::after { content: ' offen'; color: var(--open-color); } #doorStatus.closed { border-top: 8px solid var(--closed-color); } #doorStatus.closed::after { content: ' geschlossen'; color: var(--closed-color); } #doorStatus.open, #doorStatus.closed { animation-delay: 0s; } /* -- Buttons -- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--highlight-color), transparent 40%); background: linear-gradient(180deg, var(--light-color), var(--highlight-color)); color: #fff; font-weight: 700; box-shadow: var(--shadow); transition: transform .06s ease, box-shadow .2s ease; } .btn.secondary { background: transparent; color: var(--highlight-color); border: 1px solid color-mix(in oklab, var(--highlight-color), transparent 80%); box-shadow: none; } /* Hero */ .hero h1 { font-size: clamp(28px, 5vw, 46px); line-height: 1.05; margin-bottom: 0 !important; } .hero p { font-size: clamp(16px, 2.4vw, 18px); margin: 1rem 0 18px; } .hero .actions { display: flex; gap: 12px; flex-wrap: wrap; } /* Sections */ .section-head { margin-top: 60px; margin-bottom: 18px } .section-head>h2 { font-size: clamp(22px, 3.6vw, 32px); margin: 6px 0 8px; } .eyebrow { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--light-color); } .full-width-image { width: 100%; }