@charset "UTF-8"; /*! Theme Name: Zeitfresser Author: Zeitfresser Author URI: https://ztfr.eu/ Theme URI: https://ztfr.eu/ Description: Zeitfresser Wordpress Theme Version: 2.8 Tested up to: 6.2 Requires PHP: 7.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: zeitfresser Tags: blog, custom-colors, custom-header, editor-style, flexible-header, footer-widgets, right-sidebar, two-columns, custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, theme-options, sticky-post This theme is a modified version (fork) of the "Daisy Blog" theme. Original Work: Daisy Blog, Copyright 2022 Graphthemes Modifications: Zeitfresser WordPress Theme, Copyright 2026 Zeitfresser This theme, like WordPress, is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License (v2 or later). Use it to make something cool, have fun, and share what you've learned!*/ /*-------------------------------------------------------------- # 1. ROOT / TOKENS --------------------------------------------------------------*/ :root { --space-md: 1.5rem; --space-lg: 2rem; --zeitfresser-toc-top-offset: 10px; --zeitfresser-toc-width: 230px; } /*-------------------------------------------------------------- # 2. BASE (Reset, HTML Elements) --------------------------------------------------------------*/ /* Reset / Box sizing */ *, *::before, *::after { box-sizing: border-box; } /* Global */ body { margin: 0; background: var(--dark-color); font-family: var(--secondary-font); line-height: var(--line-height); font-weight: var(--font-weight); color: var(--light-color); overflow-x: hidden; } /* Header */ body header.site-header { position: relative; background: var(--dark-color); } .site-header { position: relative; background: var(--dark-color); } .site-header.sticky-header { position: sticky; top: 0; z-index: 100; } .logged-in .site-header.sticky-header { top: 32px; } /* Links */ a { text-decoration: none; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; color: var(--hover-color); } .entry-content a, .post-content a { color: var(--light-color); text-decoration: none; background: linear-gradient(currentColor, currentColor); background-size: 100% 1px; /* always visible */ background-position: 0 100%; background-repeat: no-repeat; transition: color 0.2s ease, opacity 0.2s ease; } .entry-content a:hover, .entry-content a:focus, .post-content a:hover, .post-content a:focus { color: var(--hover-color); background-size: 0 1px; } /* Media (img, iframe) */ embed, iframe, object { max-width: 100%; } img { display: block; max-width: 100%; height: auto; } figure { margin: 1em 0; } table { width: 100%; margin-bottom: var(--space-md); } /* Forms base */ button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { border-color: #ccc #bbb #aaa; } button:focus, button:active, input[type="button"]:focus, input[type="button"]:active, input[type="reset"]:focus, input[type="reset"]:active, input[type="submit"]:focus, input[type="submit"]:active { border-color: #aaa #bbb #bbb; } input, textarea, select { border-radius: 3px; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], textarea { color: #666; border: 1px solid #ccc; padding: 3px; } input:focus, textarea:focus { color: #111; } textarea { width: 100%; } /*-------------------------------------------------------------- # 3. LAYOUT --------------------------------------------------------------*/ /* Grid */ .main-wrapper { display: grid; grid-template-columns: 9fr 3fr; gap: 40px 80px; margin: 1.5rem 0; } .custom-grid-view { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: clamp(40px, 6vw, 70px); /* fluid instead of breakpoint */ align-items: start; } @media (max-width: 900px) { .main-wrapper { grid-template-columns: 1fr; } } /* Container */ .container { max-width: var(--container-width); margin: 0 auto; padding-inline: 70px; } @media (max-width: 800px) { .container { padding-inline: 20px; } } /* Page spacing */ .archive-wrapper { margin: 2rem 0; } .page-title { margin-top: 0; } .page-content, .entry-content, .entry-summary { margin: 0; } /* Article Justifiy */ .entry-content p, .post-content p { text-align: justify; hyphens: auto; word-break: normal; overflow-wrap: break-word; } /* Header Wrapper */ .header-wrapper { padding: 3rem 0; } @media (max-width: 900px) { .header-wrapper { padding: 1rem 0; } .site-header { margin-bottom: 30px; } } .site-header-wrapper { display: flex; align-items: center; justify-content: space-between; } /* Sidebar Layout */ @media (max-width: 900px) { .widget-area { margin-top: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } } @media (max-width: 500px) { .widget-area { grid-template-columns: 1fr; gap: 1rem; } } .widget-area ul, .widget-area ol { list-style: none; margin: 0; padding: 0; } .widget-area .info { font-family: var(--secondary-font); margin-top: 0.5rem; } /* Sidebar Widgets */ .widget { background-color: var(--footer-color); color: var(--light-color); border-radius: 0; border: 1px solid rgba(248, 248, 242, 0.08); padding: 1rem; margin-bottom: 1rem; } .widget ul li { margin-bottom: 0.9rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.08); } .widget ul li:last-child { margin-bottom: 0; border-bottom: none; } .widget a { color: var(--light-color); text-decoration: none; background: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: color 0.2s ease, background-size 0.2s ease; } .widget a:hover, .widget a:focus { color: var(--hover-color); background-size: 100% 1px; } .widget-title, .widget h2, .widget h3 { color: var(--hover-color); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.5px; } /*-------------------------------------------------------------- # 4. TYPOGRAPHY / BUTTONS --------------------------------------------------------------*/ /* Typography */ .widget-title, .widget_block h2 { font: 400 1.2rem var(--primary-font); text-transform: uppercase; margin-top: 0; margin-bottom: 1rem; } h1, h2, h3 { font-family: var(--primary-font); font-weight: 400; } h1 { font-size: 2.488rem; line-height: 1.4; } h2 { font-size: 2.074rem; line-height: 1.2; } h3 { font-size: 1.6rem; line-height: 1.2; } h4 { font-size: 1.44rem; } h5 { font-size: 1.2rem; } h6 { font-size: 1rem; line-height: 1.3; } @media (max-width: 900px) { h1 { font-size: 1.802rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.424rem; } h4 { font-size: 1rem; } } @media (max-width: 500px) { h1 { font-size: 1.383rem; } h2 { font-size: 1.296rem; } h3 { font-size: 1.215rem; } h4 { font-size: 1rem; } } /* Buttons */ .wp-block-search__button, input[type=submit], input[type=button] { background: var(--light-color); color: var(--dark-color); border: none; padding: 1.25rem 3rem; cursor: pointer; } .wp-block-search__button:hover, input[type=submit]:hover, input[type=button]:hover { background: var(--hover-color); } /* Content Lists */ .post-content > ul, .post-content > ol { padding-left: 1.75em; } .post-content > li { padding-left: 0.35em; } /*-------------------------------------------------------------- # 5. COMPONENTS --------------------------------------------------------------*/ /* Main Navigation */ .main-navigation a { color: var(--light-color); text-decoration: none; background: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: color 0.2s ease, background-size 0.2s ease; } .main-navigation a:hover, .main-navigation a:focus { color: var(--hover-color); background-size: 100% 1px; } .main-navigation ul ul a { background: none !important; } .main-navigation ul { padding: 0; margin: 0; } .main-navigation ul ul { text-align: left; transition: transform 0.3s ease, opacity 0.2s ease; top: 100%; left: 0; box-shadow: 0 0px 20px rgba(166, 166, 166, 0.25); width: 220px; position: absolute; z-index: 999; transform-origin: top; animation-fill-mode: forwards; transform: scaleY(0); display: block; opacity: 0; background-color: var(--dark-color); } .main-navigation ul ul ul { left: 100%; top: 0; } .main-navigation ul ul li:hover > ul { opacity: 1; left: 100%; } .main-navigation ul li:hover > ul { display: block; opacity: 1; z-index: 1000; transform: scaleY(1); transition: transform 0.3s ease, opacity 0.2s ease 0.1s; -webkit-transition: -webkit-transform 0.3s ease, opacity 0.2s ease 0.1s; } .main-navigation ul li:focus > ul { display: block; opacity: 1; z-index: 1000; transform: scaleY(1); transition: transform 0.3s ease, opacity 0.2s ease 0.1s; -webkit-transition: -webkit-transform 0.3s ease, opacity 0.2s ease 0.1s; } .main-navigation ul li li:last-child > a { border: none; } .main-navigation ul li li a:hover:after { display: none; } .main-navigation ul li a { font-family: var(--secondary-font); display: block; padding: 8px 20px; position: relative; z-index: 99; transition: color 0.2s ease, background-size 0.2s ease; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; } .main-navigation ul li ul li a { padding: 10px 20px !important; } .main-navigation ul li ul li.page_item_has_children > a::before { content: "▾"; right: 15px; } .main-navigation ul li ul li.page_item_has_children > a::before, .main-navigation ul li ul li.menu-item-has-children > a::before { right: 20px; top: 10px; transform: rotate(-90deg); } .main-navigation ul li ul li.menu-item-has-children > a::before { content: "›"; right: 15px; } .main-navigation ul li.focus > ul { display: block; opacity: 1; z-index: 1000; transform: scaleY(1); transition: transform 0.3s ease, opacity 0.2s ease 0.1s; -webkit-transition: -webkit-transform 0.3s ease, opacity 0.2s ease 0.1s; } .main-navigation ul > li:hover > ul { opacity: 1; left: 0; z-index: 999; background: var(--dark-color); } .main-navigation ul li.page_item_has_children > a::before { content: "▾"; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; } .main-navigation ul li.menu-item-has-children > a::before { content: "▾"; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; } .main-navigation li { position: relative; display: inline-block; margin-bottom: 0; } .main-navigation li li { float: none; display: block; } .main-navigation li > a { position: relative; } .main-navigation li li.current_page_item > a:after { display: none; } .main-navigation li li.current-menu-item > a:after { display: none; } .main-navigation .dropdown-toggle::after { display: none !important; } @media screen and (min-width: 37.5em) { .menu-toggle { display: none; } } @media screen and (max-width: 1200px) { .menu-toggle { display: block; background: none; padding: 0; z-index: 999; margin: 0 auto; } .navbar-toggler { margin: 0 0 0 auto; border: 0; border-radius: 0; padding: 0; } .main-navigation.toggled #nav-icon span:nth-child(1) { top: 7px; width: 0%; left: 50%; } .main-navigation.toggled #nav-icon span:nth-child(2) { transform: rotate(45deg); } .main-navigation.toggled #nav-icon span:nth-child(3) { transform: rotate(-45deg); } .main-navigation.toggled #nav-icon span:nth-child(4) { top: 7px; width: 0%; left: 50%; } .main-navigation ul li a { padding: 10px 15px; width: 100%; } .main-navigation ul li.page_item_has_children > a::before, .main-navigation ul li.menu-item-has-children > a::before { right: 15px; } .main-navigation ul li ul li.page_item_has_children > a::before, .main-navigation ul li ul li.menu-item-has-children > a::before { right: 15px; } .main-navigation ul ul { visibility: initial; opacity: 1; transition: initial; top: initial; left: initial; width: 100%; position: static; z-index: 999; transform-origin: initial; animation-fill-mode: initial; transform: initial; box-shadow: initial; height: 0; overflow: hidden; background-color: var(--dark-color); margin: 0; } .main-navigation li { display: block; border-bottom: 1px solid #eee; } .main-navigation .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--dark-color); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); z-index: 999; margin: 0; } .main-navigation.toggled .nav-menu { display: block; z-index: 999; } .main-navigation ul li:hover > ul, .main-navigation ul li:focus > ul, .main-navigation ul li.focus > ul { height: auto; overflow: visible; z-index: 1000; } .main-navigation ul ul ul { left: initial; top: initial; border-style: solid none none; border-top: 1px solid #ddd; } .header .header-wrapper { display: flex; flex-wrap: wrap; } .header-wrapper .main-navigation ul { float: none; } } /* Social Navigation */ .nav-social-links { display: flex; align-items: center; gap: 35px; } .social-links { display: flex; justify-content: center; } .social-links li { display: flex; } .social-links a { display: inline-flex; margin: 0 0.2rem; background: none; } .social-links svg { width: 1rem; height: 1rem; fill: var(--light-color); transition: fill 0.2s ease; transform: translateY(-1.5px); } .social-links a:hover svg { fill: var(--hover-color); } /* Navigation Icons */ #nav-icon3 { width: 40px; height: 30px; position: relative; transform: rotate(0deg); transition: 0.5s ease-in-out; cursor: pointer; border: none; } #nav-icon3 span { display: block; position: absolute; height: 3px; width: 100%; background: var(--light-color); border-radius: 9px; opacity: 1; left: 0; transform: rotate(0deg); transition: 0.25s ease-in-out; } #nav-icon3 span:nth-child(1) { top: 0px; } #nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3) { top: 11px; } #nav-icon3 span:nth-child(4) { top: 22px; } #nav-icon3.open span:nth-child(1) { top: 11px; width: 0%; left: 50%; } #nav-icon3.open span:nth-child(2) { transform: rotate(45deg); } #nav-icon3.open span:nth-child(3) { transform: rotate(-45deg); } #nav-icon3.open span:nth-child(4) { top: 11px; width: 0%; left: 50%; } /* Header */ header a { transition: color 0.3s ease, background 0.3s ease; } header.site-header { padding: 0; position: relative; background: var(--dark-color); } @media screen and (max-width: 900px) { header.site-header { margin: 0 0 30px; } } header.site-header .header-wrapper { padding: 3rem 0; } @media screen and (max-width: 900px) { header.site-header .header-wrapper { padding: 1rem 0; } } header.site-header .header-wrapper .site-header-wrapper { display: flex; align-items: center; justify-content: space-between; } header.site-header .header-wrapper .site-header-wrapper .site-branding { min-width: var(--logo-size); display: flex; align-items: center; gap: 10px; width: 350px; } header.site-header .header-wrapper .site-header-wrapper .site-branding .custom-logo-link { background: none; } header.site-header .header-wrapper .site-header-wrapper .site-branding .custom-logo-link img { width: var(--logo-size); max-width: none; } header.site-header .header-wrapper .site-header-wrapper .site-branding .site-identity { width: -moz-max-content; width: max-content; } header.site-header .header-wrapper .site-header-wrapper .site-branding .site-identity .site-title { font-size: var(--site-identity-font-size); font-family: var(--site-identity-font-family); line-height: 1.25em; width: -moz-max-content; width: max-content; } header.site-header .header-wrapper .site-header-wrapper .site-branding .site-identity .site-title .logo { color: var(--light-color); font-weight: 500; } header.site-header .header-wrapper .site-header-wrapper .site-branding .site-identity .site-title .logo:hover { color: var(--hover-color); } header.site-header .header-wrapper .site-header-wrapper .site-branding .site-identity .site-description { font-size: 1rem; width: -moz-max-content; width: max-content; } header.site-header.sticky-header { position: sticky; top: 0; z-index: 100; } .site-title .logo { text-decoration: none; background: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: color 0.2s ease, background-size 0.2s ease; } .site-title .logo:hover, .site-title .logo:focus { color: var(--hover-color); background-size: 100% 1px; } /* Social Links */ @media only screen and (max-width: 768px) { header.site-header .social-links { display: none; } } header.site-header .social-links svg { fill: var(--light-color); max-width: 1rem; height: 1rem; } header.site-header .social-links svg:hover { fill: var(--hover-color); } .logged-in header.sticky-header { top: 32px; } /* Search */ .site-header .search-form { position: absolute; left: 0; top: 0; } @media only screen and (max-width: 500px) { .site-header .search-form { left: -20px; right: -20px; } } .site-header .search-field { width: 2rem; min-width: 2rem; height: 32px; padding-left: 45px; background: transparent url(images/search.svg) no-repeat 5px center; background-size: 20px; border: none; border-radius: 0; cursor: pointer; position: relative; color: var(--light-color); transition: width 0.4s ease, background 0.4s ease; } @media only screen and (max-width: 500px) { .site-header .search-field { background-position: 15px center; } } .site-header .search-field:focus { background-color: rgba(255, 255, 255, 0.85); background-image: url(images/search-b.svg); border: none; cursor: text; outline: 0; width: 320px; } @media only screen and (max-width: 500px) { .site-header .search-field:focus { width: 100%; } } .site-header .search-field::-moz-placeholder { color: var(--light-color) !important; font-weight: 300; } .site-header .search-field::placeholder { color: var(--dark-color) !important; font-weight: 300; } .site-header .search-submit { display: none; } /* News Snippet */ .news-snippet .news-title { margin-top: 0.3rem; margin-bottom: 0.7rem; } .news-snippet .featured-image { aspect-ratio: 1 / 1; overflow: hidden; flex-shrink: 0; } .news-snippet .featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .news-snippet .summary .excerpt { margin: 0.5rem 0; font-family: var(--secondary-font); color: var(--light-color); } .news-snippet .summary { margin-top: 1rem; } .news-snippet .summary .category, .news-snippet .summary .tags { font-family: var(--secondary-font); font-weight: 400; font-size: 0.7rem; } .news-snippet .summary .category a, .news-snippet .summary .tags a { margin: 0 0.5rem 0.5rem 0; display: inline-block; vertical-align: top; text-transform: uppercase; background: none; position: relative; } .news-snippet .summary .category a:before, .news-snippet .summary .tags a:before { content: ","; position: absolute; right: -6px; } .news-snippet .summary .category a:last-child:before, .news-snippet .summary .tags a:last-child:before { content: none; } .news-snippet .summary .category a:hover, .news-snippet .summary .tags a:hover { color: var(--hover-color); border-color: var(--light-color); } .custom-grid-view { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 70px; align-items: start; } @media screen and (max-width: 500px) { .custom-grid-view { grid-gap: 40px; } } /* Post Navigation */ .news-snippet .news-title a { color: var(--light-color); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: color 0.2s ease, background-size 0.2s ease; } .news-snippet .news-title a:hover, .news-snippet .news-title a:focus { color: var(--hover-color); background-size: 100% 1px; } .post-navigation { margin-bottom: var(--space-lg); } .post-navigation .nav-links { display: flex; } .post-navigation .nav-previous, .post-navigation .nav-next { flex: 1; } .post-navigation .nav-next { text-align: right; } .post-navigation .nav-previous::before { content: "←"; margin-right: 5px; } .post-navigation .nav-next::after { content: "→"; margin-left: 5px; } .post-navigation a { color: var(--light-color); text-decoration: none; background: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: color 0.2s ease, background-size 0.2s ease; } .post-navigation a:hover, .post-navigation a:focus { color: var(--hover-color); background-size: 100% 1px; } .custom-box { background-color: var(--footer-color); border-radius: 0; border: 1px solid rgba(248, 248, 242, 0.08); padding: 0.1rem 1rem; margin: 1rem 0; } /* Search Widget */ .widget_search .wp-block-search__label { display: none; } .widget_search .wp-block-search__inside-wrapper { display: grid; grid-template-columns: 1fr auto; gap: 0; background: transparent; border: none; overflow: hidden; } .widget_search .wp-block-search__input, .sidebar .wp-block-search__input { width: 100%; height: 36px; padding: 0 12px; background-color: rgba(255,255,255,0.04) !important; color: var(--light-color); border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; transition: border-color 0.2s ease, background-color 0.2s ease; appearance: none; } .widget_search .wp-block-search__input:focus, .sidebar .wp-block-search__input:focus { border-color: var(--hover-color) !important; outline: none !important; box-shadow: none !important; } .widget_search .wp-block-search__input::placeholder, .sidebar .wp-block-search__input::placeholder { color: rgba(248,248,242,0.5); } .widget_search .wp-block-search__button { height: 36px; padding: 0 14px; border: none; border-radius: 0; background-color: var(--footer-color); color: var(--light-color); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; cursor: pointer; } .widget_search .wp-block-search__button:hover { background-color: var(--hover-color); color: var(--dark-color); } /* Empty State (404 + Search) */ .error-404, .search-no-results .no-results { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .error-404 .page-content, .search-no-results .page-content { background-color: var(--footer-color); border-radius: 0; border: 1px solid rgba(248, 248, 242, 0.08); padding: 2rem; margin: 1.5rem auto 0; max-width: 500px; width: 100%; box-sizing: border-box; } .error-404 h1, .search-no-results h1, .search-no-results h2 { margin-bottom: 1.5rem; } .search-no-results p { margin-bottom: 1rem; } .error-404 .search-form, .search-no-results .search-form { display: flex; justify-content: center; gap: 0.75rem; margin-top: 1rem; } .error-404 .search-field, .search-no-results .search-field { flex: 1; padding: 0.75rem 1rem; background-color: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: var(--light-color); transition: color 0.2s ease, background-size 0.2s ease, border-color 0.2s ease; } .error-404 .search-field:focus, .search-no-results .search-field:focus { outline: none; border-color: var(--hover-color); } .error-404 .search-submit, .search-no-results .search-submit { background-color: var(--light-color); color: var(--dark-color); border: 1px solid rgba(255,255,255,0.15); padding: 0.75rem 1.5rem; font-weight: bold; cursor: pointer; } .error-404 .search-submit:hover, .search-no-results .search-submit:hover { background-color: var(--hover-color); color: var(--dark-color); } @media (max-width: 500px) { .error-404 .search-form, .search-no-results .search-form { flex-direction: column; } .error-404 .search-submit, .search-no-results .search-submit { width: 100%; } } /* Posts and Pages */ .sticky { display: block; } .post, .page { margin: 0; } .updated:not(.published) { display: none; } .entry-content, .post-content, .inner-article-content { max-width: 100%; } .page-links { clear: both; margin-bottom: var(--space-md); } .single-post .entry-content > * + * { margin-top: var(--space-md); } .single-post .entry-content .wp-block > * + * { margin-top: var(--space-md); } .single-post .entry-content > *:first-child { margin-top: 0; } .single-post .entry-content h2, .single-post .entry-content h3 { margin-top: calc(var(--space-md) * 1.5); } .inside-page .inner-article-content { font-family: var(--secondary-font); } .inside-page .entry-footer a { color: var(--light-color); } /* Single Posts */ header.page-header { margin-bottom: var(--space-lg); } header.page-header h1 { margin: 0; } .entry-header .entry-title { margin: 0 0 2rem; line-height: 1.2; } .single-post .entry-content ol, .single-post .entry-content ul { margin-left: 0; } .single-post .wp-block-pullquote { margin: 4rem 0 1rem; } .single-post .wp-block-pullquote blockquote { position: relative; } .single-post .wp-block-pullquote blockquote p { font-style: italic; font-size: 1.5rem; } .single-post .wp-block-pullquote blockquote::before { content: open-quote; position: absolute; top: -8rem; left: 0; font-size: 10rem; color: var(--light-color); } .single-post .wp-block-quote { margin: 2rem; padding-left: 2rem; border-left: 5px solid var(--light-color); } .single-post .wp-block-quote p { font-style: italic; font-size: 1.5rem; } .single-post .wp-block-preformatted, .single-post .wp-block-verse { background: var(--dark-color); } .author-post { display: flex; gap: 1rem; margin-bottom: var(--space-lg); background: var(--dark-color); font-family: var(--primary-font); } .author-post .author-image { flex: 0 0 80px; } .author-post .author-image img { width: 100%; display: block; } .author-post .author-details { flex: 1; } .author-post h4 { margin: 0 0 1rem; line-height: 1; } /* Archive */ .news-snippet { display: flex; flex-direction: column; contain: content; } /* Media */ .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } .entry-content img, .post-content img { max-width: 100%; height: auto !important; } .main-wrapper > * { min-width: 0; } .entry-content figure, .entry-content .wp-block-image, .post-content figure, .post-content .wp-block-image { max-width: 100%; width: 100%; margin-left: 0; margin-right: 0; } .entry-content, .post-content { overflow-x: hidden; } /* Galleries */ .gallery { display: grid; gap: 1rem; } /* Captions */ .wp-caption { max-width: 100%; margin-bottom: var(--space-md); } .wp-caption img { display: block; margin-inline: auto; } .wp-caption-text { text-align: center; margin: 0.8em 0; } /* Links */ .category a, .tags a { position: relative; display: inline-block; margin: 0 0.5rem 0.5rem 0; text-transform: uppercase; color: var(--light-color); background: none; } /* Author */ .post-author { display: flex; align-items: center; gap: 0.5rem; } .post-author::before { content: ""; width: 20px; height: 1px; background-color: currentColor; } /* Comments */ .comments { display: flex; align-items: center; gap: 0.3rem; font-family: var(--primary-font); margin: 0.5rem 0; } .comments a { background: none; color: inherit; transform: translateY(-0.5px); } .comments svg { fill: currentColor; } /* Category Tags */ .category, .tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0; font: 400 0.85rem var(--secondary-font); text-transform: uppercase; } /* Related Posts */ .related-posts { margin: 2rem 0; } .related-posts .post-holder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } @media (max-width: 500px) { .related-posts .post-holder { grid-template-columns: 1fr; } } .related-posts h5 { margin: 1rem 0; line-height: 1.25; font-family: var(--primary-font); } .related-posts .post-holder > * { min-width: 0; } /* Navigation Posts */ .posts-navigation .nav-links { display: flex; justify-content: space-between; gap: 1rem; } /* Pagnation */ .pagination a { color: var(--light-color); text-decoration: none; background: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: color 0.2s ease, background-size 0.2s ease; } .pagination a:hover, .pagination a:focus { color: var(--hover-color); background-size: 100% 1px; } .pagination { margin-top: 2rem; } .pagination ul { display: flex; justify-content: center; gap: 1rem; list-style: none; margin: 0; padding: 0; } .pagination .active a { color: var(--light-color); } /* Header / Footer Meta */ .info.ihead, .info.ifoot { display: flex; justify-content: space-between; align-items: center; } .info.ifoot { margin: 1.3rem 0; font-size: 0.9rem; text-transform: uppercase; } /* Meta Info */ .info { font-size: 0.85rem; color: var(--light-color); } /* General Comments */ .comments-area { margin-top: 0; } .comments-title { font-size: 1.5rem; margin-top: 3rem; } .comment-list { list-style: none; margin: 0; padding: 0; } .comment-list .comment { background-color: var(--footer-color); color: var(--light-color); border-radius: 0; border: 1px solid rgba(248, 248, 242, 0.08); padding: 20px; margin-bottom: 15px; border-left: 4px solid var(--hover-color); } .comment-list .children { margin-top: 1rem; list-style: none; padding-left: 0; margin-left: 0; } .comment-author { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; } .comment-author img { width: 2.5rem; height: 2.5rem; } .comment-metadata { display: flex; justify-content: space-between; font-size: 0.75rem; text-transform: uppercase; } .comments-area a { color: var(--light-color); } .comments-area a:hover { color: var(--hover-color); } .comment-list .reply a { color: var(--hover-color); font-weight: 700; } /* Comments CF7 Form */ .comment-respond { background-color: var(--dark-color); color: var(--light-color); margin-bottom: var(--space-lg); padding: 20px 0; } .comment-form input:not([type="submit"]), .comment-form textarea, .wpcf7 input:not([type="submit"]), .wpcf7 textarea { width: 100%; padding: 1rem; background-color: rgba(255,255,255,0.04); color: var(--light-color); border: 1px solid rgba(255,255,255,0.1); transition: border-color 0.2s ease, background-color 0.2s ease; } .comment-form input:not([type="submit"]):focus, .comment-form textarea:focus, .wpcf7 input:not([type="submit"]):focus, .wpcf7 textarea:focus { outline: none; border-color: var(--hover-color); } .comment-form textarea, .wpcf7 textarea { min-height: 150px; resize: vertical; } .comment-form input[type="submit"], .wpcf7 input[type="submit"] { background-color: var(--light-color); color: var(--dark-color); border: none; padding: 0.75rem 1.5rem; font-weight: bold; cursor: pointer; } .comment-form input[type="submit"]:hover, .wpcf7 input[type="submit"]:hover { background-color: var(--hover-color); } .wpcf7 p { margin-bottom: 1rem; } /* Footer */ .site-footer { background-color: var(--footer-color); color: var(--light-color); padding: 2rem 0; margin-top: 3rem; border-radius: 0; border-top: 1px solid rgba(248, 248, 242, 0.08); } .site-footer .site-info { text-align: center; padding: 1rem 0; font-size: 1rem; } .site-footer a { color: inherit; border-bottom: 1px solid rgba(255,255,255,0.2); } .site-footer a:hover { color: var(--hover-color); border-bottom-color: var(--hover-color); } .site-footer .footer-brand { text-decoration: underline; } .site-footer .footer-brand:hover { text-decoration: none; } .site-footer .social-links a { background: none; border-bottom: none; text-decoration: none; } /*-------------------------------------------------------------- # 6. UTILITIES / FIXES --------------------------------------------------------------*/ /* TOC */ :root { --toc-viewport-offset: calc( var(--zeitfresser-toc-top, 100px) + var(--zeitfresser-toc-top-offset) ); } .zeitfresser-floating-toc { position: fixed; top: calc(var(--toc-viewport-offset)); left: var(--zeitfresser-toc-left, 24px); width: var(--zeitfresser-toc-width); max-height: calc(100vh - var(--toc-viewport-offset) - 36px); background: transparent; border: none; box-shadow: none; overflow: visible; z-index: 80; opacity: 0; transition: opacity 0.12s ease-out; } .zeitfresser-floating-toc.is-visible { opacity: 1; } .zeitfresser-floating-toc__header { margin-bottom: 10px; } .zeitfresser-floating-toc__title { font-family: var(--primary-font); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(247, 247, 250, 0.76); } .zeitfresser-floating-toc__progress { height: 2px; margin-bottom: 16px; border-radius: 999px; background: rgba(189, 147, 249, 0.18); overflow: hidden; } .zeitfresser-floating-toc__progress-bar { display: block; height: 100%; width: 0; background: var(--hover-color); transition: width 0.18s ease; } .zeitfresser-floating-toc__nav { max-height: calc(100vh - var(--toc-viewport-offset) - 46px); overflow-y: auto; padding-right: 8px; scrollbar-width: none; } .zeitfresser-floating-toc__nav::-webkit-scrollbar { display: none; } .zeitfresser-floating-toc__list { list-style: none; margin: 0; padding: 0; } .zeitfresser-floating-toc__item { margin-bottom: 10px; } .zeitfresser-floating-toc__item a { transform: translateZ(0); display: block; border-left: 3px solid transparent; color: var(--light-color); font-size: 0.92rem; line-height: 1.35; text-decoration: none; transition: color 0.18s ease, border-color 0.18s ease; } .zeitfresser-floating-toc__item.level-2 a { padding-left: 14px; font-weight: 700; } .zeitfresser-floating-toc__item.level-3 a { padding-left: 18px; } .zeitfresser-floating-toc__item.level-4 a { padding-left: 22px; } .zeitfresser-floating-toc__item a:hover, .zeitfresser-floating-toc__item a.is-active, .zeitfresser-floating-toc__item a[aria-current="true"] { color: var(--hover-color); border-left-color: var(--hover-color); } @media (max-width: 1650px) { .zeitfresser-floating-toc { display: none; } } /* Accessibility */ .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; -webkit-clip-path: none; clip-path: none; color: #21759b; display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* Widgets */ .widget select { max-width: 100%; } /* Media Fixes */ .wp-smiley { border: 0; margin: 0; padding: 0; } /* Logo wrapper fix */ .custom-logo-link { display: inline-block; } /* Screen Reader */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip-path: inset(50%); } .screen-reader-text:focus { position: absolute; top: 5px; left: 5px; width: auto; height: auto; padding: 15px 23px; background: #f1f1f1; color: #21759b; font-size: 0.875rem; font-weight: 700; z-index: 100000; clip-path: none; box-shadow: 0 0 2px 2px rgba(0,0,0,0.6); } /* Alignments WordPress Core */ .alignleft { float: left; margin: 0 1.5em 1.5em 0; } .alignright { float: right; margin: 0 0 1.5em 1.5em; } .aligncenter { display: block; margin: 0 auto 1.5em; clear: both; } /* Meta Fix */ .info.ihead .list-inline { margin: 0; padding: 0; } /* Comma separator */ .category a::after, .tags a::after { content: ","; position: absolute; right: -6px; } .category a:last-child::after, .tags a:last-child::after { content: none; } .category a:hover, .tags a:hover { color: var(--hover-color); } /* List Inline (Generic Utility) */ .list-inline { display: flex; align-items: center; gap: 0.5rem; list-style: none; margin: 0; padding: 0; } .list-inline li { color: var(--light-color); } .list-inline a { display: inline-flex; align-items: center; color: inherit; background: none; } /* Meta Fixes */ .info.ihead { gap: 0.5rem; } @media (max-width: 500px) { .info.ihead, .info.ifoot { flex-wrap: wrap; gap: 0.5rem; } } /* Comma separator */ .category a:not(:last-child)::after, .tags a:not(:last-child)::after { content: ","; margin-left: 0.2rem; } .category a:hover, .tags a:hover { color: var(--hover-color); } /* Scroll to Top */ .scroll-to-top { position: fixed; right: 2rem; bottom: 2rem; width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--light-color); cursor: pointer; transition: transform 0.2s ease, background 0.2s ease; } .scroll-to-top svg { width: 100%; fill: var(--dark-color); } .scroll-to-top:hover { background: var(--hover-color); transform: scale(0.9); } /* Focus / Anchor Reset */ .entry-content:target, .post-content:target, .inner-article-content:target, .entry-content:focus, .post-content:focus, .inner-article-content:focus { background: transparent; outline: none; box-shadow: none; border: none; } /* Anchor Offset (Sticky Header Fix) */ .entry-content h2, .entry-content h3, .entry-content h4, .inner-article-content h2, .inner-article-content h3, .inner-article-content h4 { scroll-margin-top: 88px; } /* Global Scroll Behavior */ html { scroll-behavior: smooth; scrollbar-gutter: stable; font-synthesis: none; } /* Accessibility: Reduced motion */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }