Dome
d925911261
This commit introduces a major internal refactor of the theme, replacing all dynamic styling mechanisms with a fully static, CSS-based system. The previous implementation relied on WordPress Customizer settings, PHP-based style generation, and inline CSS injection for fonts, colors, and header behavior. These systems have been completely removed and replaced with a deterministic architecture using CSS variables and dedicated stylesheets. Key changes: - Removed dynamic font system (Google/local/inline CSS) - Removed dynamic color system and Customizer controls - Removed legacy compatibility layer (legacy-aliases.php) - Removed custom header support and related UI (header image, text color) - Eliminated inline <style> injection in wp_head - Introduced static typography system via fonts.css - Introduced static color system via colors.css - Refactored style.css to rely entirely on CSS variables - Cleaned up conflicting font declarations and redundant rules - Simplified theme structure and reduced PHP overhead - Aligned translation template with theme slug (zeitfresser.pot) Result: - Improved frontend performance and caching behavior - Reduced PHP execution and complexity - Fully deterministic rendering without runtime style mutations - Cleaner, more maintainable codebase No visual changes intended.
2165 lines
43 KiB
CSS
2165 lines
43 KiB
CSS
@charset "UTF-8";
|
||
/*!
|
||
Theme Name: Zeitfresser
|
||
Author: Zeitfresser
|
||
Author URI: https://ztfr.eu/
|
||
Theme URI: https://ztfr.eu/
|
||
Description: Zeitfresser Hard Cleanup & Core Web Vitals Edition
|
||
Version: 2.1.0
|
||
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
|
||
*/
|
||
/*** normalize ***/
|
||
/*--------------------------------------------------------------
|
||
# Generic
|
||
--------------------------------------------------------------*/
|
||
/* Normalize
|
||
--------------------------------------------- */
|
||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||
/* Document
|
||
========================================================================== */
|
||
/**
|
||
* 1. Correct the line height in all browsers.
|
||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||
*/
|
||
html {
|
||
line-height: 1.15;
|
||
-webkit-text-size-adjust: 100%;
|
||
}
|
||
|
||
/* Sections
|
||
========================================================================== */
|
||
/**
|
||
* Remove the margin in all browsers.
|
||
*/
|
||
body {
|
||
margin: 0;
|
||
}
|
||
|
||
/**
|
||
* Render the `main` element consistently in IE.
|
||
*/
|
||
main {
|
||
display: block;
|
||
}
|
||
|
||
/**
|
||
* Correct the font size and margin on `h1` elements within `section` and
|
||
* `article` contexts in Chrome, Firefox, and Safari.
|
||
*/
|
||
h1 {
|
||
font-size: 2em;
|
||
margin: 0.67em 0;
|
||
}
|
||
|
||
/* Grouping content
|
||
========================================================================== */
|
||
/**
|
||
* 1. Add the correct box sizing in Firefox.
|
||
* 2. Show the overflow in Edge and IE.
|
||
*/
|
||
hr {
|
||
box-sizing: content-box;
|
||
height: 0;
|
||
overflow: visible;
|
||
}
|
||
|
||
/**
|
||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||
* 2. Correct the odd `em` font sizing in all browsers.
|
||
*/
|
||
pre {
|
||
font-family: monospace, monospace;
|
||
font-size: 1em;
|
||
}
|
||
|
||
/* Text-level semantics
|
||
========================================================================== */
|
||
/**
|
||
* Remove the gray background on active links in IE 10.
|
||
*/
|
||
a {
|
||
background-color: transparent;
|
||
}
|
||
|
||
/**
|
||
* 1. Remove the bottom border in Chrome 57-
|
||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||
*/
|
||
abbr[title] {
|
||
border-bottom: none;
|
||
text-decoration: underline;
|
||
-webkit-text-decoration: underline dotted;
|
||
text-decoration: underline dotted;
|
||
}
|
||
|
||
/**
|
||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||
*/
|
||
b,
|
||
strong {
|
||
font-weight: bolder;
|
||
}
|
||
|
||
/**
|
||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||
* 2. Correct the odd `em` font sizing in all browsers.
|
||
*/
|
||
code,
|
||
kbd,
|
||
samp {
|
||
font-family: monospace, monospace;
|
||
font-size: 1em;
|
||
}
|
||
|
||
/**
|
||
* Add the correct font size in all browsers.
|
||
*/
|
||
small {
|
||
font-size: 80%;
|
||
}
|
||
|
||
/**
|
||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||
* all browsers.
|
||
*/
|
||
sub,
|
||
sup {
|
||
font-size: 75%;
|
||
line-height: 0;
|
||
position: relative;
|
||
vertical-align: baseline;
|
||
}
|
||
|
||
sub {
|
||
bottom: -0.25em;
|
||
}
|
||
|
||
sup {
|
||
top: -0.5em;
|
||
}
|
||
|
||
/* Embedded content
|
||
========================================================================== */
|
||
/**
|
||
* Remove the border on images inside links in IE 10.
|
||
*/
|
||
img {
|
||
border-style: none;
|
||
}
|
||
|
||
/* Forms
|
||
========================================================================== */
|
||
/**
|
||
* 1. Change the font styles in all browsers.
|
||
* 2. Remove the margin in Firefox and Safari.
|
||
*/
|
||
button,
|
||
input,
|
||
optgroup,
|
||
select,
|
||
textarea {
|
||
font-family: inherit;
|
||
font-size: 100%;
|
||
line-height: 1.15;
|
||
margin: 0;
|
||
}
|
||
|
||
/**
|
||
* Show the overflow in IE.
|
||
* 1. Show the overflow in Edge.
|
||
*/
|
||
button,
|
||
input {
|
||
overflow: visible;
|
||
}
|
||
|
||
/**
|
||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||
* 1. Remove the inheritance of text transform in Firefox.
|
||
*/
|
||
button,
|
||
select {
|
||
text-transform: none;
|
||
}
|
||
|
||
/**
|
||
* Correct the inability to style clickable types in iOS and Safari.
|
||
*/
|
||
button,
|
||
[type=button],
|
||
[type=reset],
|
||
[type=submit] {
|
||
-webkit-appearance: button;
|
||
}
|
||
|
||
/**
|
||
* Remove the inner border and padding in Firefox.
|
||
*/
|
||
button::-moz-focus-inner,
|
||
[type=button]::-moz-focus-inner,
|
||
[type=reset]::-moz-focus-inner,
|
||
[type=submit]::-moz-focus-inner {
|
||
border-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
/**
|
||
* Restore the focus styles unset by the previous rule.
|
||
*/
|
||
button:-moz-focusring,
|
||
[type=button]:-moz-focusring,
|
||
[type=reset]:-moz-focusring,
|
||
[type=submit]:-moz-focusring {
|
||
outline: 1px dotted ButtonText;
|
||
}
|
||
|
||
/**
|
||
* Correct the padding in Firefox.
|
||
*/
|
||
fieldset {
|
||
padding: 0.35em 0.75em 0.625em;
|
||
}
|
||
|
||
/**
|
||
* 1. Correct the text wrapping in Edge and IE.
|
||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||
* 3. Remove the padding so developers are not caught out when they zero out
|
||
* `fieldset` elements in all browsers.
|
||
*/
|
||
legend {
|
||
box-sizing: border-box;
|
||
color: inherit;
|
||
display: table;
|
||
max-width: 100%;
|
||
padding: 0;
|
||
white-space: normal;
|
||
}
|
||
|
||
/**
|
||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||
*/
|
||
progress {
|
||
vertical-align: baseline;
|
||
}
|
||
|
||
/**
|
||
* Remove the default vertical scrollbar in IE 10+.
|
||
*/
|
||
textarea {
|
||
overflow: auto;
|
||
}
|
||
|
||
/**
|
||
* 1. Add the correct box sizing in IE 10.
|
||
* 2. Remove the padding in IE 10.
|
||
*/
|
||
[type=checkbox],
|
||
[type=radio] {
|
||
box-sizing: border-box;
|
||
padding: 0;
|
||
}
|
||
|
||
/**
|
||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||
*/
|
||
[type=number]::-webkit-inner-spin-button,
|
||
[type=number]::-webkit-outer-spin-button {
|
||
height: auto;
|
||
}
|
||
|
||
/**
|
||
* 1. Correct the odd appearance in Chrome and Safari.
|
||
* 2. Correct the outline style in Safari.
|
||
*/
|
||
[type=search] {
|
||
-webkit-appearance: textfield;
|
||
outline-offset: -2px;
|
||
}
|
||
|
||
/**
|
||
* Remove the inner padding in Chrome and Safari on macOS.
|
||
*/
|
||
[type=search]::-webkit-search-decoration {
|
||
-webkit-appearance: none;
|
||
}
|
||
|
||
/**
|
||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||
* 2. Change font properties to `inherit` in Safari.
|
||
*/
|
||
::-webkit-file-upload-button {
|
||
-webkit-appearance: button;
|
||
font: inherit;
|
||
}
|
||
|
||
/* Interactive
|
||
========================================================================== */
|
||
/*
|
||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||
*/
|
||
details {
|
||
display: block;
|
||
}
|
||
|
||
/*
|
||
* Add the correct display in all browsers.
|
||
*/
|
||
summary {
|
||
display: list-item;
|
||
}
|
||
|
||
/* Misc
|
||
========================================================================== */
|
||
/**
|
||
* Add the correct display in IE 10+.
|
||
*/
|
||
template {
|
||
display: none;
|
||
}
|
||
|
||
/**
|
||
* Add the correct display in IE 10.
|
||
*/
|
||
[hidden] {
|
||
display: none;
|
||
}
|
||
|
||
/* Box sizing
|
||
--------------------------------------------- */
|
||
/* Inherit box-sizing to more easily change it's value on a component level.
|
||
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: inherit;
|
||
}
|
||
|
||
html {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/*--------------------------------------------------------------
|
||
# Base
|
||
--------------------------------------------------------------*/
|
||
/* Typography
|
||
--------------------------------------------- */
|
||
body,
|
||
button,
|
||
input,
|
||
select,
|
||
optgroup,
|
||
textarea {
|
||
color: #404040;
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||
}
|
||
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
clear: both;
|
||
}
|
||
|
||
p {
|
||
margin-bottom: 1.5em;
|
||
}
|
||
|
||
dfn,
|
||
cite,
|
||
em,
|
||
i {
|
||
font-style: italic;
|
||
}
|
||
|
||
blockquote {
|
||
margin: 0 1.5em;
|
||
}
|
||
|
||
address {
|
||
margin: 0 0 1.5em;
|
||
}
|
||
|
||
pre {
|
||
background: #eee;
|
||
font-family: "Courier 10 Pitch", courier, monospace;
|
||
line-height: 1.6;
|
||
margin-bottom: 1.6em;
|
||
max-width: 100%;
|
||
overflow: auto;
|
||
padding: 1.6em;
|
||
}
|
||
|
||
code,
|
||
kbd,
|
||
tt,
|
||
var {
|
||
font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
|
||
}
|
||
|
||
abbr,
|
||
acronym {
|
||
border-bottom: 1px dotted #666;
|
||
cursor: help;
|
||
}
|
||
|
||
mark,
|
||
ins {
|
||
background: #fff9c0;
|
||
text-decoration: none;
|
||
}
|
||
|
||
big {
|
||
font-size: 125%;
|
||
}
|
||
|
||
/* Elements
|
||
--------------------------------------------- */
|
||
body {
|
||
background: #fff;
|
||
}
|
||
|
||
hr {
|
||
background-color: #ccc;
|
||
border: 0;
|
||
height: 1px;
|
||
margin-bottom: 1.5em;
|
||
}
|
||
|
||
ul,
|
||
ol {
|
||
margin: 0 3em 1.5em 0;
|
||
}
|
||
|
||
ul {
|
||
list-style: disc;
|
||
}
|
||
|
||
ol {
|
||
list-style: decimal;
|
||
}
|
||
|
||
li > ul,
|
||
li > ol {
|
||
margin-bottom: 0;
|
||
margin-right: 1.5em;
|
||
}
|
||
|
||
dt {
|
||
font-weight: 700;
|
||
}
|
||
|
||
dd {
|
||
margin: 0 1.5em 1.5em;
|
||
}
|
||
|
||
/* Make sure embeds and iframes fit their containers. */
|
||
embed,
|
||
iframe,
|
||
object {
|
||
max-width: 100%;
|
||
}
|
||
|
||
img {
|
||
height: auto;
|
||
max-width: 100%;
|
||
}
|
||
|
||
figure {
|
||
margin: 1em 0;
|
||
}
|
||
|
||
table {
|
||
margin: 0 0 1.5em;
|
||
width: 100%;
|
||
}
|
||
|
||
/* Links
|
||
--------------------------------------------- */
|
||
a {
|
||
color: #4169e1;
|
||
}
|
||
|
||
a:visited {
|
||
color: #800080;
|
||
}
|
||
|
||
a:hover,
|
||
a:focus,
|
||
a:active {
|
||
color: #191970;
|
||
}
|
||
|
||
a:focus {
|
||
outline: thin dotted;
|
||
}
|
||
|
||
a:hover,
|
||
a:active {
|
||
outline: 0;
|
||
}
|
||
|
||
/* Forms
|
||
--------------------------------------------- */
|
||
button,
|
||
input[type=button],
|
||
input[type=reset],
|
||
input[type=submit] {
|
||
border: 1px solid;
|
||
border-color: #ccc #ccc #bbb;
|
||
border-radius: 3px;
|
||
background: #e6e6e6;
|
||
color: rgba(0, 0, 0, 0.8);
|
||
line-height: 1;
|
||
padding: 0.6em 1em 0.4em;
|
||
}
|
||
|
||
button:hover,
|
||
input[type=button]:hover,
|
||
input[type=reset]:hover,
|
||
input[type=submit]:hover {
|
||
border-color: #ccc #bbb #aaa;
|
||
}
|
||
|
||
button:active,
|
||
button:focus,
|
||
input[type=button]:active,
|
||
input[type=button]:focus,
|
||
input[type=reset]:active,
|
||
input[type=reset]:focus,
|
||
input[type=submit]:active,
|
||
input[type=submit]:focus {
|
||
border-color: #aaa #bbb #bbb;
|
||
}
|
||
|
||
input[type=text],
|
||
input[type=email],
|
||
input[type=url],
|
||
input[type=password],
|
||
input[type=search],
|
||
input[type=number],
|
||
input[type=tel],
|
||
input[type=range],
|
||
input[type=date],
|
||
input[type=month],
|
||
input[type=week],
|
||
input[type=time],
|
||
input[type=datetime],
|
||
input[type=datetime-local],
|
||
input[type=color],
|
||
textarea {
|
||
color: #666;
|
||
border: 1px solid #ccc;
|
||
border-radius: 3px;
|
||
padding: 3px;
|
||
}
|
||
|
||
input[type=text]:focus,
|
||
input[type=email]:focus,
|
||
input[type=url]:focus,
|
||
input[type=password]:focus,
|
||
input[type=search]:focus,
|
||
input[type=number]:focus,
|
||
input[type=tel]:focus,
|
||
input[type=range]:focus,
|
||
input[type=date]:focus,
|
||
input[type=month]:focus,
|
||
input[type=week]:focus,
|
||
input[type=time]:focus,
|
||
input[type=datetime]:focus,
|
||
input[type=datetime-local]:focus,
|
||
input[type=color]:focus,
|
||
textarea:focus {
|
||
color: #111;
|
||
}
|
||
|
||
select {
|
||
border: 1px solid #ccc;
|
||
}
|
||
|
||
textarea {
|
||
width: 100%;
|
||
}
|
||
|
||
/*--------------------------------------------------------------
|
||
# Layouts
|
||
--------------------------------------------------------------*/
|
||
/*--------------------------------------------------------------
|
||
# Components
|
||
--------------------------------------------------------------*/
|
||
/* Posts and pages
|
||
--------------------------------------------- */
|
||
.sticky {
|
||
display: block;
|
||
}
|
||
|
||
.post,
|
||
.page {
|
||
margin: 0;
|
||
}
|
||
|
||
.updated:not(.published) {
|
||
display: none;
|
||
}
|
||
|
||
.page-content,
|
||
.entry-content,
|
||
.entry-summary {
|
||
margin: 1.5em 0 0;
|
||
}
|
||
|
||
.page-links {
|
||
clear: both;
|
||
margin: 0 0 1.5em;
|
||
}
|
||
|
||
/* Comments
|
||
--------------------------------------------- */
|
||
.comment-content a {
|
||
word-wrap: break-word;
|
||
}
|
||
|
||
.bypostauthor {
|
||
display: block;
|
||
}
|
||
|
||
/* Widgets
|
||
--------------------------------------------- */
|
||
.widget {
|
||
margin: 0 0 1.5em;
|
||
}
|
||
|
||
.widget select {
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* Media
|
||
--------------------------------------------- */
|
||
.page-content .wp-smiley,
|
||
.entry-content .wp-smiley,
|
||
.comment-content .wp-smiley {
|
||
border: none;
|
||
margin-bottom: 0;
|
||
margin-top: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* Make sure logo link wraps around logo image. */
|
||
.custom-logo-link {
|
||
display: inline-block;
|
||
}
|
||
|
||
/* Captions
|
||
--------------------------------------------- */
|
||
.wp-caption {
|
||
margin-bottom: 1.5em;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.wp-caption img[class*=wp-image-] {
|
||
display: block;
|
||
margin-right: auto;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.wp-caption .wp-caption-text {
|
||
margin: 0.8075em 0;
|
||
}
|
||
|
||
.wp-caption-text {
|
||
text-align: center;
|
||
}
|
||
|
||
/* Galleries
|
||
--------------------------------------------- */
|
||
.gallery {
|
||
margin-bottom: 1.5em;
|
||
display: grid;
|
||
grid-gap: 1.5em;
|
||
}
|
||
|
||
.gallery-item {
|
||
display: inline-block;
|
||
text-align: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.gallery-columns-2 {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.gallery-columns-3 {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
|
||
.gallery-columns-4 {
|
||
grid-template-columns: repeat(4, 1fr);
|
||
}
|
||
|
||
.gallery-columns-5 {
|
||
grid-template-columns: repeat(5, 1fr);
|
||
}
|
||
|
||
.gallery-columns-6 {
|
||
grid-template-columns: repeat(6, 1fr);
|
||
}
|
||
|
||
.gallery-columns-7 {
|
||
grid-template-columns: repeat(7, 1fr);
|
||
}
|
||
|
||
.gallery-columns-8 {
|
||
grid-template-columns: repeat(8, 1fr);
|
||
}
|
||
|
||
.gallery-columns-9 {
|
||
grid-template-columns: repeat(9, 1fr);
|
||
}
|
||
|
||
.gallery-caption {
|
||
display: block;
|
||
}
|
||
|
||
/*--------------------------------------------------------------
|
||
# Plugins
|
||
--------------------------------------------------------------*/
|
||
/* Jetpack infinite scroll
|
||
--------------------------------------------- */
|
||
/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
|
||
.infinite-scroll .posts-navigation,
|
||
.infinite-scroll.neverending .site-footer {
|
||
display: none;
|
||
}
|
||
|
||
/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
|
||
.infinity-end.neverending .site-footer {
|
||
display: block;
|
||
}
|
||
|
||
/*--------------------------------------------------------------
|
||
# Utilities
|
||
--------------------------------------------------------------*/
|
||
/* Accessibility
|
||
--------------------------------------------- */
|
||
/* Text meant only for screen readers. */
|
||
.screen-reader-text {
|
||
border: 0;
|
||
clip: rect(1px, 1px, 1px, 1px);
|
||
-webkit-clip-path: inset(50%);
|
||
clip-path: inset(50%);
|
||
height: 1px;
|
||
margin: -1px;
|
||
overflow: hidden;
|
||
padding: 0;
|
||
position: absolute !important;
|
||
width: 1px;
|
||
word-wrap: normal !important;
|
||
}
|
||
|
||
.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;
|
||
right: 5px;
|
||
line-height: normal;
|
||
padding: 15px 23px 14px;
|
||
text-decoration: none;
|
||
top: 5px;
|
||
width: auto;
|
||
z-index: 100000;
|
||
}
|
||
|
||
/* Do not show the outline on the skip link target. */
|
||
#primary[tabindex="-1"]:focus {
|
||
outline: 0;
|
||
}
|
||
|
||
/* Alignments
|
||
--------------------------------------------- */
|
||
.alignleft {
|
||
float: left;
|
||
margin-right: 1.5em;
|
||
margin-bottom: 1.5em;
|
||
}
|
||
|
||
.alignright {
|
||
float: right;
|
||
margin-left: 1.5em;
|
||
margin-bottom: 1.5em;
|
||
}
|
||
|
||
.aligncenter {
|
||
clear: both;
|
||
display: block;
|
||
margin-right: auto;
|
||
margin-left: auto;
|
||
margin-bottom: 1.5em;
|
||
}
|
||
|
||
/*** normalize ***/
|
||
/*** Global ***/
|
||
body {
|
||
font-family: var(--secondary-font);
|
||
line-height: var(--line-height);
|
||
font-weight: var(--font-weight);
|
||
color: var(--dark-color);
|
||
}
|
||
|
||
.container {
|
||
max-width: var(--container-width);
|
||
margin: 0 auto;
|
||
padding: 0 70px;
|
||
}
|
||
@media only screen and (max-width: 800px) {
|
||
.container {
|
||
padding: 0 20px;
|
||
}
|
||
}
|
||
|
||
a,
|
||
a:visited {
|
||
transition: all 0.2s ease;
|
||
color: var(--primary-color);
|
||
text-decoration: none;
|
||
background: linear-gradient(var(--secondary-color), var(--secondary-color));
|
||
background-size: 0 1px;
|
||
background-position: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
}
|
||
a:hover, a:focus, a:active,
|
||
a:visited:hover,
|
||
a:visited:focus,
|
||
a:visited:active {
|
||
color: var(--secondary-color);
|
||
background-size: 100% 1px;
|
||
}
|
||
|
||
.main-wrapper {
|
||
display: grid;
|
||
grid-template-columns: 9fr 3fr;
|
||
-moz-column-gap: 80px;
|
||
column-gap: 80px;
|
||
row-gap: 40px;
|
||
margin: 3rem 0;
|
||
}
|
||
@media only screen and (max-width: 900px) {
|
||
.main-wrapper {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
.archive-wrapper {
|
||
margin: 2rem 0;
|
||
}
|
||
|
||
.page-title {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.widget-title,
|
||
.widget_block h2 {
|
||
font-size: 1.2rem;
|
||
margin: 0 0 1.5rem 0;
|
||
font-family: var(--primary-font);
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
h1,
|
||
h2,
|
||
h3 {
|
||
font-family: var(--primary-font);
|
||
}
|
||
|
||
h1 {
|
||
font-size: 2.488rem;
|
||
font-weight: 400;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 2.074rem;
|
||
line-height: 1.2;
|
||
font-weight: 400;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 1.6rem;
|
||
line-height: 1.2;
|
||
font-weight: 400;
|
||
}
|
||
|
||
h4 {
|
||
font-size: 1.44rem;
|
||
font-weight: 400;
|
||
}
|
||
|
||
h5 {
|
||
font-size: 1.2rem;
|
||
font-weight: 400;
|
||
}
|
||
|
||
h6 {
|
||
font-size: 1rem;
|
||
line-height: 1.3;
|
||
font-weight: 400;
|
||
}
|
||
|
||
@media only screen and (max-width: 900px) {
|
||
h1 {
|
||
font-size: 1.802rem;
|
||
}
|
||
h2 {
|
||
font-size: 1.5rem;
|
||
}
|
||
h3 {
|
||
font-size: 1.424rem;
|
||
}
|
||
h4 {
|
||
font-size: 1.266rem;
|
||
}
|
||
h4 {
|
||
font-size: 1.125rem;
|
||
}
|
||
h4 {
|
||
font-size: 1rem;
|
||
}
|
||
}
|
||
@media only screen and (max-width: 500px) {
|
||
h1 {
|
||
font-size: 1.383rem;
|
||
}
|
||
h2 {
|
||
font-size: 1.296rem;
|
||
}
|
||
h3 {
|
||
font-size: 1.215rem;
|
||
}
|
||
h4 {
|
||
font-size: 1.138rem;
|
||
}
|
||
h4 {
|
||
font-size: 1.067rem;
|
||
}
|
||
h4 {
|
||
font-size: 1rem;
|
||
}
|
||
}
|
||
.wp-block-search__button,
|
||
input[type=submit],
|
||
input[type=button] {
|
||
background-color: var(--primary-color);
|
||
border: none;
|
||
color: var(--light-color);
|
||
padding: 1.25rem 3rem;
|
||
border-radius: 0;
|
||
cursor: pointer;
|
||
}
|
||
.wp-block-search__button:hover,
|
||
input[type=submit]:hover,
|
||
input[type=button]:hover {
|
||
background-color: var(--secondary-color);
|
||
}
|
||
|
||
.error-404 {
|
||
height: 80vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
flex-direction: column;
|
||
}
|
||
.error-404 h1 {
|
||
margin: 0;
|
||
}
|
||
.error-404 .search-form {
|
||
text-align: center;
|
||
}
|
||
.error-404 .search-form .search-field {
|
||
padding: 18px 18px 19px 18px;
|
||
border-radius: 0;
|
||
}
|
||
@media only screen and (max-width: 500px) {
|
||
.error-404 .search-form .search-field {
|
||
width: 100%;
|
||
}
|
||
}
|
||
@media only screen and (max-width: 500px) {
|
||
.error-404 .search-form input[type=submit] {
|
||
width: 100%;
|
||
margin-top: 15px;
|
||
}
|
||
}
|
||
|
||
/*** Global ***/
|
||
/*** navigation ***/
|
||
/*--------------------------------------------------------------
|
||
## Menus
|
||
--------------------------------------------------------------*/
|
||
.main-navigation ul {
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
.main-navigation ul ul {
|
||
text-align: right;
|
||
transition: all 500ms ease;
|
||
-webkit-transition: all 500ms ease;
|
||
-moz-transition: all 500ms ease;
|
||
-o-transition: all 500ms ease;
|
||
-ms-transition: all 500ms ease;
|
||
top: 100%;
|
||
right: 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: scale(1, 0);
|
||
display: block;
|
||
opacity: 0;
|
||
background-color: var(--light-color);
|
||
}
|
||
.main-navigation ul ul ul {
|
||
right: 100%;
|
||
top: 0;
|
||
right: 100%;
|
||
top: 0;
|
||
}
|
||
.main-navigation ul ul li:hover > ul {
|
||
opacity: 1;
|
||
right: 100%;
|
||
}
|
||
.main-navigation ul li:hover > ul {
|
||
display: block;
|
||
opacity: 1;
|
||
z-index: 1000;
|
||
transform: scale(1, 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: scale(1, 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: all 0.3s 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: "▾";
|
||
left: 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 {
|
||
left: 20px;
|
||
top: 10px;
|
||
transform: rotate(90deg);
|
||
}
|
||
.main-navigation ul li ul li.menu-item-has-children > a::before {
|
||
content: "›";
|
||
left: 15px;
|
||
}
|
||
.main-navigation ul li.focus > ul {
|
||
display: block;
|
||
opacity: 1;
|
||
z-index: 1000;
|
||
transform: scale(1, 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;
|
||
right: 0;
|
||
z-index: 999;
|
||
background: var(--light-color);
|
||
}
|
||
.main-navigation ul li.page_item_has_children > a::before {
|
||
content: "▾";
|
||
position: absolute;
|
||
left: 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;
|
||
left: 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) {
|
||
/*navigation responsive*/
|
||
/*hamburger style*/
|
||
.menu-toggle {
|
||
display: block;
|
||
background: none;
|
||
padding: 0;
|
||
z-index: 999;
|
||
margin: 0 auto;
|
||
}
|
||
.navbar-toggler {
|
||
margin: 0 auto 0 0;
|
||
border: 0;
|
||
border-radius: 0;
|
||
padding: 0;
|
||
}
|
||
#nav-icon {
|
||
width: 26px;
|
||
height: 24px;
|
||
position: relative;
|
||
margin: 0 auto;
|
||
transform: rotate(0deg);
|
||
cursor: pointer;
|
||
}
|
||
#nav-icon span {
|
||
display: block;
|
||
position: absolute;
|
||
height: 1px;
|
||
width: 100%;
|
||
opacity: 1;
|
||
right: 0;
|
||
transform: rotate(0deg);
|
||
background: var(--primary-color);
|
||
}
|
||
#nav-icon span:nth-child(1) {
|
||
top: 0px;
|
||
}
|
||
#nav-icon span:nth-child(2), #nav-icon span:nth-child(3) {
|
||
top: 9px;
|
||
}
|
||
#nav-icon span:nth-child(4) {
|
||
top: 18px;
|
||
}
|
||
/* Icon 3 */
|
||
.main-navigation.toggled #nav-icon span:nth-child(1) {
|
||
top: 7px;
|
||
width: 0%;
|
||
right: 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%;
|
||
right: 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 {
|
||
left: 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 {
|
||
left: 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 {
|
||
content: "▾";
|
||
}
|
||
.main-navigation ul ul {
|
||
visibility: initial;
|
||
opacity: 1;
|
||
transition: initial;
|
||
top: initial;
|
||
right: 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: #fff;
|
||
margin: 0;
|
||
}
|
||
.main-navigation li {
|
||
display: block;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
.main-navigation .nav-menu {
|
||
display: none;
|
||
position: absolute;
|
||
top: 100%;
|
||
right: 0;
|
||
left: 0;
|
||
background: #fff;
|
||
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 {
|
||
right: initial;
|
||
top: initial;
|
||
border-style: solid none none;
|
||
border-top: 1px solid #ddd;
|
||
}
|
||
/*end hamburger*/
|
||
.header .header-wrapper {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
.header-wrapper .main-navigation ul {
|
||
float: none;
|
||
}
|
||
/*end navigation responsive*/
|
||
}
|
||
.post-navigation .nav-links {
|
||
display: flex;
|
||
}
|
||
.post-navigation .nav-links .nav-previous {
|
||
flex: 1 0 50%;
|
||
}
|
||
.post-navigation .nav-links .nav-previous:before {
|
||
content: "←";
|
||
margin-left: 5px;
|
||
}
|
||
.post-navigation .nav-links .nav-next {
|
||
text-align: end;
|
||
flex: 1 0 50%;
|
||
}
|
||
.post-navigation .nav-links .nav-next:after {
|
||
content: "→";
|
||
margin-right: 5px;
|
||
}
|
||
|
||
/* Icon 2 */
|
||
#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(--primary-color);
|
||
border-radius: 9px;
|
||
opacity: 1;
|
||
right: 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%;
|
||
right: 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%;
|
||
right: 50%;
|
||
}
|
||
|
||
/*** navigation ***/
|
||
/*** header ***/
|
||
header a {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
header.site-header {
|
||
padding: 0;
|
||
position: relative;
|
||
background: var(--light-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 .nav-social-links {
|
||
display: flex;
|
||
align-items: center;
|
||
grid-gap: 20px;
|
||
}
|
||
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(--site-title-color);
|
||
font-weight: 500;
|
||
}
|
||
header.site-header .header-wrapper .site-header-wrapper .site-branding .site-identity .site-title .logo:hover {
|
||
color: var(--secondary-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;
|
||
}
|
||
@media only screen and (max-width: 768px) {
|
||
header.site-header .social-links {
|
||
display: none;
|
||
}
|
||
}
|
||
header.site-header .social-links svg {
|
||
fill: var(--primary-color);
|
||
max-width: 1rem;
|
||
height: 1rem;
|
||
}
|
||
header.site-header .social-links svg:hover {
|
||
fill: var(--secondary-color);
|
||
}
|
||
|
||
.top-bar {
|
||
background-color: var(--secondary-color);
|
||
min-height: 32px;
|
||
}
|
||
.top-bar .social-links {
|
||
justify-content: flex-end;
|
||
padding: 0.5rem 0;
|
||
}
|
||
.top-bar .top-wrapper {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
}
|
||
|
||
.logged-in header.sticky-header {
|
||
top: 32px;
|
||
}
|
||
|
||
#breadcrumbs {
|
||
list-style: none;
|
||
margin: 3rem 0 1rem 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
font-size: 0.75rem;
|
||
text-transform: uppercase;
|
||
}
|
||
#breadcrumbs li {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
margin-left: 15px;
|
||
}
|
||
#breadcrumbs li.separator {
|
||
font-size: 18px;
|
||
font-weight: 100;
|
||
color: #ccc;
|
||
}
|
||
|
||
.site-header .search-form {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
}
|
||
@media only screen and (max-width: 500px) {
|
||
.site-header .search-form {
|
||
right: -20px;
|
||
left: -20px;
|
||
}
|
||
}
|
||
|
||
.site-header .search-field {
|
||
background-color: transparent;
|
||
background-image: url(images/search.svg);
|
||
background-position: 5px center;
|
||
background-repeat: no-repeat;
|
||
background-size: 20px;
|
||
border: none;
|
||
cursor: pointer;
|
||
height: 32px;
|
||
margin: 0 0;
|
||
padding: 0 45px 0 5px;
|
||
border-radius: 0;
|
||
position: relative;
|
||
transition: width 400ms ease, background 400ms ease;
|
||
width: 0;
|
||
color: var(--dark-color) !important;
|
||
}
|
||
@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(--dark-color) !important;
|
||
font-weight: 300;
|
||
}
|
||
.site-header .search-field::placeholder {
|
||
color: var(--dark-color) !important;
|
||
font-weight: 300;
|
||
}
|
||
.site-header .search-submit {
|
||
display: none;
|
||
}
|
||
|
||
/*** header ***/
|
||
/*** archive ***/
|
||
.news-snippet .news-title {
|
||
margin-top: 0.3rem;
|
||
margin-bottom: 0.7rem;
|
||
}
|
||
.news-snippet .featured-image {
|
||
background: none;
|
||
margin: 0;
|
||
display: flex;
|
||
}
|
||
.news-snippet .summary .excerpt {
|
||
margin: 0.5rem 0;
|
||
font-family: var(--secondary-font);
|
||
color: #555;
|
||
}
|
||
.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 0.5rem 0.5rem;
|
||
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;
|
||
left: -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(--secondary-color);
|
||
border-color: var(--secondary-color);
|
||
}
|
||
|
||
/*masorny*/
|
||
.custom-grid-view {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||
grid-gap: 70px;
|
||
}
|
||
@media screen and (max-width: 500px) {
|
||
.custom-grid-view {
|
||
grid-gap: 40px;
|
||
}
|
||
}
|
||
|
||
/*masorny*/
|
||
.readmore {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
font-family: var(--primary-font);
|
||
}
|
||
.readmore svg {
|
||
height: 19px;
|
||
fill: var(--primary-color);
|
||
}
|
||
.readmore svg:hover {
|
||
fill: var(--dark-color);
|
||
}
|
||
|
||
.info {
|
||
font-size: 0.85rem;
|
||
color: var(--grey-color);
|
||
}
|
||
.info .post-author {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 0.5rem;
|
||
}
|
||
.info .post-author:before {
|
||
content: "";
|
||
background-color: var(--grey-color);
|
||
height: 1px;
|
||
width: 20px;
|
||
display: inline-block;
|
||
margin-left: 0.5rem;
|
||
}
|
||
.info .comments {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
font-style: normal;
|
||
font-family: var(--primary-font);
|
||
margin: 0.5rem 0;
|
||
}
|
||
.info .comments a {
|
||
background: none;
|
||
color: var(--grey-color);
|
||
}
|
||
.info .comments a:hover {
|
||
color: var(--primary-color);
|
||
}
|
||
.info .comments svg {
|
||
fill: var(--primary-color);
|
||
}
|
||
.info.ifoot {
|
||
text-transform: uppercase;
|
||
font-size: 0.9rem;
|
||
margin: 1.3rem 0;
|
||
}
|
||
.info.ihead, .info.ifoot {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
@media only screen and (max-width: 500px) {
|
||
.info.ihead, .info.ifoot {
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
}
|
||
|
||
.list-inline {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.list-inline li {
|
||
color: var(--dark-color);
|
||
}
|
||
.list-inline a {
|
||
background: none;
|
||
color: var(--dark-color);
|
||
display: inline-flex;
|
||
margin: 0.5rem 0;
|
||
}
|
||
.list-inline a:hover {
|
||
color: var(--secondary-color);
|
||
}
|
||
|
||
.main-wrapper .category,
|
||
.main-wrapper .tags {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
margin: 1rem 0;
|
||
font-family: var(--secondary-font);
|
||
font-weight: 400;
|
||
font-size: 0.85rem;
|
||
text-transform: uppercase;
|
||
}
|
||
.main-wrapper .category a,
|
||
.main-wrapper .tags a {
|
||
display: flex;
|
||
align-items: center;
|
||
background: none;
|
||
color: var(--dark-color);
|
||
position: relative;
|
||
margin: 0 0 0.5rem 0.5rem;
|
||
}
|
||
.main-wrapper .category a:before,
|
||
.main-wrapper .tags a:before {
|
||
content: ",";
|
||
position: absolute;
|
||
left: -6px;
|
||
}
|
||
.main-wrapper .category a:last-child:before,
|
||
.main-wrapper .tags a:last-child:before {
|
||
content: none;
|
||
}
|
||
.main-wrapper .category a:hover,
|
||
.main-wrapper .tags a:hover {
|
||
color: var(--secondary-color);
|
||
border-color: var(--secondary-color);
|
||
}
|
||
|
||
.social-share .list-inline {
|
||
gap: 7px;
|
||
}
|
||
.social-share .list-inline li {
|
||
display: inline-flex;
|
||
font-family: var(--primary-font);
|
||
}
|
||
.social-share .list-inline li svg {
|
||
height: 1rem;
|
||
width: auto;
|
||
fill: var(--secondary-color);
|
||
}
|
||
.social-share .list-inline li svg:hover {
|
||
fill: var(--primary-color);
|
||
}
|
||
|
||
.related-posts {
|
||
margin: 4rem 0;
|
||
}
|
||
.related-posts .post-holder {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
grid-column-gap: 2rem;
|
||
}
|
||
@media only screen and (max-width: 500px) {
|
||
.related-posts .post-holder {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
.related-posts .post-holder .news-snippet {
|
||
margin-bottom: 1rem;
|
||
flex-wrap: nowrap;
|
||
flex-direction: column;
|
||
}
|
||
.related-posts .post-holder .news-snippet .featured-image {
|
||
display: flex;
|
||
width: 100%;
|
||
}
|
||
.related-posts .post-holder .news-snippet h5 {
|
||
margin: 1rem 0;
|
||
line-height: 1.25;
|
||
font-family: var(--primary-font);
|
||
}
|
||
|
||
.posts-navigation .nav-links {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.pagination {
|
||
margin-top: 2rem;
|
||
}
|
||
.pagination ul {
|
||
display: flex;
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
justify-content: center;
|
||
gap: 1rem;
|
||
}
|
||
.pagination ul .active a {
|
||
color: var(--dark-color);
|
||
}
|
||
|
||
/*** archive ***/
|
||
/*** sidebar ***/
|
||
@media only screen and (max-width: 900px) {
|
||
.widget-area {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 2rem;
|
||
}
|
||
}
|
||
@media only screen and (max-width: 500px) {
|
||
.widget-area {
|
||
grid-template-columns: 1fr;
|
||
gap: 1rem;
|
||
}
|
||
}
|
||
.widget-area .widget {
|
||
padding: 1.5rem;
|
||
border: 1px dotted #bbb;
|
||
font-family: var(--secondary-font);
|
||
}
|
||
.widget-area .widget .widget-title {
|
||
font-family: var(--primary-font);
|
||
margin: 0 0 1.5rem;
|
||
text-transform: uppercase;
|
||
font-size: 1.2rem;
|
||
}
|
||
.widget-area .widget ul,
|
||
.widget-area .widget ol {
|
||
padding: 0;
|
||
margin: 0;
|
||
list-style: none;
|
||
}
|
||
.widget-area .widget.widget_archive li, .widget-area .widget.widget_categories li, .widget-area .widget.widget_recent_comments li, .widget-area .widget.widget_meta li, .widget-area .widget.widget_recent_entries li, .widget-area .widget.widget_block li {
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.1098039216);
|
||
padding-bottom: 0.5rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
.widget-area .widget.widget_archive li:last-child, .widget-area .widget.widget_categories li:last-child, .widget-area .widget.widget_recent_comments li:last-child, .widget-area .widget.widget_meta li:last-child, .widget-area .widget.widget_recent_entries li:last-child, .widget-area .widget.widget_block li:last-child {
|
||
margin-bottom: 0;
|
||
border: none;
|
||
}
|
||
.widget-area .widget .info {
|
||
font-family: var(--secondary-font);
|
||
margin: 0.5rem 0 0;
|
||
}
|
||
.widget-area .widget.widget_search .wp-block-search__label {
|
||
display: none;
|
||
}
|
||
.widget-area .widget.widget_search .wp-block-search__inside-wrapper {
|
||
display: grid;
|
||
grid-template-columns: 4fr 1fr;
|
||
}
|
||
@media only screen and (max-width: 1200px) {
|
||
.widget-area .widget.widget_search .wp-block-search__inside-wrapper {
|
||
display: block;
|
||
}
|
||
}
|
||
@media only screen and (max-width: 900px) {
|
||
.widget-area .widget.widget_search .wp-block-search__inside-wrapper {
|
||
display: grid;
|
||
}
|
||
}
|
||
.widget-area .widget.widget_search .wp-block-search__inside-wrapper input[type=search] {
|
||
height: 100%;
|
||
width: 100%;
|
||
border-radius: 0;
|
||
padding: 1rem 1.5rem;
|
||
}
|
||
.widget-area .widget.widget_search .wp-block-search__inside-wrapper input[type=submit],
|
||
.widget-area .widget.widget_search .wp-block-search__inside-wrapper .wp-block-search__button {
|
||
padding: 1rem 2rem;
|
||
width: 100%;
|
||
}
|
||
.widget-area .widget.widget_daisy_blog_widget_author_profile .graphthemes-widget-author-bio-holder {
|
||
text-align: center;
|
||
font-family: var(--secondary-font);
|
||
}
|
||
.widget-area .widget.widget_daisy_blog_widget_author_profile .graphthemes-widget-author-bio-holder .image-holder img {
|
||
border-radius: 50%;
|
||
width: 150px;
|
||
height: 150px;
|
||
-o-object-fit: cover;
|
||
object-fit: cover;
|
||
}
|
||
.widget-area .widget.widget_daisy_blog_widget_author_profile .graphthemes-widget-author-bio-holder h5 {
|
||
margin: 1rem 0;
|
||
font-family: var(--primary-font);
|
||
font-weight: 400;
|
||
}
|
||
.widget-area .widget.widget_daisy_blog_widget_author_profile .graphthemes-widget-author-bio-holder .author-bio-content {
|
||
margin: 1rem 0 2rem 0;
|
||
}
|
||
.widget-area .widget.widget_daisy_blog_widget_author_profile .graphthemes-widget-author-bio-holder .btn-readmore {
|
||
background-color: var(--primary-color);
|
||
color: var(--light-color);
|
||
padding: 0.5rem 3rem;
|
||
display: inline-block;
|
||
background-size: 0;
|
||
}
|
||
.widget-area .widget.widget_daisy_blog_widget_author_profile .graphthemes-widget-author-bio-holder .btn-readmore:hover {
|
||
background-color: var(--secondary-color);
|
||
}
|
||
.widget-area .widget.widget_daisy_blog_widget_author_profile .graphthemes-widget-author-bio-holder .social-share {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 1.5rem;
|
||
}
|
||
.widget-area .widget.widget_daisy_blog_widget_author_profile .graphthemes-widget-author-bio-holder .social-share ul {
|
||
gap: 1rem;
|
||
}
|
||
.widget-area .widget.widget_daisy_blog_widget_popular_post ul li, .widget-area .widget.widget_daisy_blog_widget_recent_post ul li {
|
||
display: flex;
|
||
margin-bottom: 1rem;
|
||
}
|
||
.widget-area .widget.widget_daisy_blog_widget_popular_post ul li:last-child, .widget-area .widget.widget_daisy_blog_widget_recent_post ul li:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
.widget-area .widget.widget_daisy_blog_widget_popular_post ul li .post-thumbnail, .widget-area .widget.widget_daisy_blog_widget_recent_post ul li .post-thumbnail {
|
||
margin: 2px 0 0 15px;
|
||
flex-shrink: 0;
|
||
flex-basis: 100px;
|
||
background: none;
|
||
}
|
||
.widget-area .widget.widget_daisy_blog_widget_popular_post ul li .post-thumbnail img, .widget-area .widget.widget_daisy_blog_widget_recent_post ul li .post-thumbnail img {
|
||
height: 70px;
|
||
-o-object-fit: cover;
|
||
object-fit: cover;
|
||
}
|
||
.widget-area .widget.widget_daisy_blog_widget_popular_post ul li .entry-header, .widget-area .widget.widget_daisy_blog_widget_recent_post ul li .entry-header {
|
||
flex: auto;
|
||
}
|
||
.widget-area .widget.widget_daisy_blog_widget_popular_post ul li h6, .widget-area .widget.widget_daisy_blog_widget_recent_post ul li h6 {
|
||
margin: 0;
|
||
font-weight: 400;
|
||
font-family: var(--primary-font);
|
||
}
|
||
|
||
/*** sidebar ***/
|
||
/*** single page ***/
|
||
.inside-page .inner-article-content {
|
||
font-family: var(--secondary-font);
|
||
}
|
||
.inside-page .inner-article-content a {
|
||
background-size: 100% 1px;
|
||
color: var(--secondary-color);
|
||
}
|
||
.inside-page .inner-article-content a:hover {
|
||
background-size: 0 1px;
|
||
color: var(--primary-color);
|
||
}
|
||
.inside-page .entry-footer a {
|
||
color: var(--secondary-color);
|
||
}
|
||
|
||
/*** single page ***/
|
||
/*** single post ***/
|
||
header.page-header {
|
||
margin-bottom: 2rem;
|
||
color: var(--secondary-color);
|
||
}
|
||
header.page-header h1 {
|
||
font-size: 1rem;
|
||
margin: 0;
|
||
}
|
||
header.page-header .archive-description {
|
||
color: var(--dark-color);
|
||
}
|
||
|
||
.entry-header h1.entry-title {
|
||
margin: 0 0 2rem 0;
|
||
line-height: 1.2;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.entry-content a {
|
||
background-size: 100% 1px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
.entry-content a:hover, .entry-content a:focus {
|
||
background-image: linear-gradient(var(--dark-color), var(--dark-color));
|
||
}
|
||
|
||
.featured-image {
|
||
background-size: 0 !important;
|
||
}
|
||
.featured-image img {
|
||
width: 100%;
|
||
}
|
||
|
||
.single-post ol,
|
||
.single-post ul {
|
||
margin-right: 0;
|
||
}
|
||
.single-post .wp-block-pullquote {
|
||
margin: 4rem 0 1rem 0;
|
||
}
|
||
.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;
|
||
font-size: 10rem;
|
||
color: var(--primary-color);
|
||
position: absolute;
|
||
top: -8rem;
|
||
}
|
||
.single-post .wp-block-quote {
|
||
margin: 2rem;
|
||
border-right: 5px solid var(--primary-color);
|
||
padding-right: 2rem;
|
||
}
|
||
.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(--light-color);
|
||
}
|
||
|
||
.author-post {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
background: var(--light-color);
|
||
align-items: flex-start;
|
||
gap: 1rem;
|
||
margin-bottom: 2rem;
|
||
font-family: var(--primary-font);
|
||
}
|
||
.author-post .author-image {
|
||
width: 20%;
|
||
}
|
||
.author-post .author-image a {
|
||
background: none;
|
||
display: block;
|
||
}
|
||
.author-post .author-image a img {
|
||
width: 100%;
|
||
display: block;
|
||
}
|
||
.author-post .author-details {
|
||
width: 80%;
|
||
padding: 20px 0;
|
||
}
|
||
.author-post h4 {
|
||
margin: 0 0 1rem 0;
|
||
line-height: 1;
|
||
}
|
||
|
||
.comments-area {
|
||
margin-top: 4rem;
|
||
}
|
||
.comments-area .comments-title {
|
||
font-size: 1.5rem;
|
||
}
|
||
.comments-area .comment-form a {
|
||
color: var(--secondary-color);
|
||
}
|
||
.comments-area ol {
|
||
list-style: none;
|
||
}
|
||
.comments-area ol.comment-list {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
.comments-area ol.comment-list .thread-even {
|
||
background: #ffffff;
|
||
padding: 2rem;
|
||
font-family: var(--primary-font);
|
||
}
|
||
.comments-area ol.comment-list .thread-odd {
|
||
background: rgba(255, 255, 255, 0.4392156863);
|
||
padding: 2rem;
|
||
}
|
||
.comments-area ol.comment-list .children {
|
||
margin-top: 1rem;
|
||
}
|
||
.comments-area .comment-author {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
margin-bottom: 5px;
|
||
}
|
||
.comments-area .comment-author img {
|
||
height: 2.5rem;
|
||
width: 2.5rem;
|
||
}
|
||
.comments-area .comment-metadata {
|
||
font-size: 0.75rem;
|
||
text-transform: uppercase;
|
||
display: flex;
|
||
align-items: stretch;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
/*** single post ***/
|
||
/*** footer ***/
|
||
footer.site-footer {
|
||
background-color: var(--dark-color);
|
||
color: var(--light-color);
|
||
padding: 2rem 0 1rem 0;
|
||
}
|
||
footer.site-footer .site-info {
|
||
font-size: 1rem;
|
||
align-items: center;
|
||
text-align: center;
|
||
padding: 1rem 0;
|
||
}
|
||
footer.site-footer .site-info a {
|
||
color: var(--light-color);
|
||
}
|
||
footer.site-footer .site-info a:hover {
|
||
text-decoration: none;
|
||
color: var(--grey-color);
|
||
}
|
||
footer.site-footer .site-info a.footer-brand {
|
||
text-decoration: underline;
|
||
}
|
||
footer.site-footer .site-info a.footer-brand:hover {
|
||
text-decoration: none;
|
||
}
|
||
|
||
.social-links {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
.social-links ul li {
|
||
display: flex;
|
||
}
|
||
.social-links ul li a {
|
||
margin: 0 0.5rem;
|
||
}
|
||
.social-links ul li a svg {
|
||
fill: var(--light-color);
|
||
max-width: 1rem;
|
||
height: 1rem;
|
||
}
|
||
.social-links ul li a svg:hover {
|
||
fill: var(--grey-color);
|
||
}
|
||
|
||
.scroll-to-top {
|
||
width: 2.5rem;
|
||
height: 2.5rem;
|
||
display: inline-block;
|
||
position: fixed;
|
||
left: 2rem;
|
||
bottom: 2rem;
|
||
border-radius: 50%;
|
||
background: var(--secondary-color);
|
||
cursor: pointer;
|
||
}
|
||
.scroll-to-top svg {
|
||
width: 100%;
|
||
fill: var(--light-color);
|
||
}
|
||
.scroll-to-top:hover {
|
||
background: var(--grey-color);
|
||
transform: scale(0.9);
|
||
}
|
||
|
||
/*** footer ***/ |