@font-face { font-family: "Lato"; font-weight: 300; font-style: normal; font-display: swap; src: url(//runningonsmiles.com/wp-content/themes/runonsmiles/assets/fonts/lato-300.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lato"; font-weight: 300; font-style: normal; font-display: swap; src: url(//runningonsmiles.com/wp-content/themes/runonsmiles/assets/fonts/lato-300-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lato"; font-weight: 400; font-style: normal; font-display: swap; src: url(//runningonsmiles.com/wp-content/themes/runonsmiles/assets/fonts/lato-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lato"; font-weight: 400; font-style: normal; font-display: swap; src: url(//runningonsmiles.com/wp-content/themes/runonsmiles/assets/fonts/lato-400-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lato"; font-weight: 700; font-style: normal; font-display: swap; src: url(//runningonsmiles.com/wp-content/themes/runonsmiles/assets/fonts/lato-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lato"; font-weight: 700; font-style: normal; font-display: swap; src: url(//runningonsmiles.com/wp-content/themes/runonsmiles/assets/fonts/lato-700-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto Slab"; font-weight: 400 700; font-style: normal; font-display: swap; src: url(//runningonsmiles.com/wp-content/themes/runonsmiles/assets/fonts/roboto-slab.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto Slab"; font-weight: 400 700; font-style: normal; font-display: swap; src: url(//runningonsmiles.com/wp-content/themes/runonsmiles/assets/fonts/roboto-slab-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root {
--c-page: #effbfb;
--c-surface: #fff;
--c-ink: #282123;
--c-muted: #6b6b6b;
--c-soft: #f0f0f0;
--c-line: #e0e0e0;
--c-teal: #28b0ae;
--c-teal-text: #167f7d;
--c-purple: #3b28b0;
--c-purple-dark: #291e6f;
--c-danger: #cb2028;
--font-body: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-head: "Roboto Slab", Georgia, "Times New Roman", serif;
--container: 1100px;
--sidebar: 320px;
--gap: 30px;
--header-h: 76px;
--radius: 2px;
--ease: 0.3s ease-in-out;
} *,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
padding: 30px 30px 0;
background: var(--c-page);
color: var(--c-ink);
font-family: var(--font-body);
font-weight: 300;
font-size: 18px;
line-height: 1.6;
}
img,
video,
iframe,
svg {
max-width: 100%;
}
img {
height: auto;
display: block;
}
a {
color: var(--c-teal-text);
text-decoration: none;
transition: color var(--ease), background-color var(--ease);
}
a:hover {
color: var(--c-purple);
}
:focus-visible {
outline: 3px solid var(--c-purple);
outline-offset: 2px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 0.6em;
font-family: var(--font-head);
font-weight: 700;
line-height: 1.2;
letter-spacing: -1px;
}
p {
margin: 0 0 1.5em;
}
ul,
ol {
margin: 0 0 1.5em;
padding-left: 1.4em;
}
hr {
border: 0;
border-top: 1px solid var(--c-line);
margin: 0 0 30px;
}
button {
font: inherit;
cursor: pointer;
}
.icon {
flex: none;
vertical-align: -0.125em;
} .screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.screen-reader-text:focus,
.skip-link:focus {
position: fixed !important;
top: 8px;
left: 8px;
z-index: 100000;
width: auto;
height: auto;
margin: 0;
padding: 12px 20px;
clip-path: none;
background: var(--c-surface);
color: var(--c-ink);
box-shadow: 0 0 0 3px var(--c-purple);
}
.container {
width: min(100%, calc(var(--container) + 60px));
margin-inline: auto;
padding-inline: 30px;
}
.button {
display: inline-block;
padding: 15px 30px;
border-radius: var(--radius);
background: var(--c-line);
color: var(--c-ink);
text-align: center;
line-height: 1.3;
transition: color var(--ease), background-color var(--ease);
}
.button:hover,
.button:focus-visible {
background: var(--c-purple-dark);
color: var(--c-soft);
}
.button--block {
display: block;
}
.more-link-row {
margin: 45px 0 0;
} .site {
max-width: 1440px;
margin-inline: auto;
background: var(--c-surface);
}
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--c-surface);
transition: box-shadow var(--ease);
}
.site-header.is-stuck {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.site-header__inner {
display: flex;
align-items: center;
gap: 30px;
min-height: var(--header-h);
padding: 15px 30px;
}
.site-logo {
display: flex;
align-items: center;
gap: 12px;
color: #9c9c9c;
}
.site-logo img {
width: auto;
height: 45px;
padding-right: 12px;
border-right: 1px solid var(--c-line);
}
.site-logo .custom-logo-link {
display: block;
}
.site-tagline {
font-size: 16px;
line-height: 1.2;
color: var(--c-muted);
}
.site-logo:hover .site-tagline {
color: var(--c-teal-text);
}
.main-navigation {
flex: 1;
}
.main-navigation .menu {
display: flex;
flex-wrap: wrap;
gap: 0 30px;
margin: 0;
padding: 0;
list-style: none;
}
.main-navigation li {
position: relative;
}
.main-navigation a {
display: block;
padding: 8px 0;
font-size: 14px;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 1.5;
}
.main-navigation .menu-item-has-children > a::after {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin: 0 0 3px 8px;
border: solid currentColor;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.main-navigation .sub-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 10;
display: none;
min-width: 280px;
margin: 0;
padding: 0;
list-style: none;
background: var(--c-surface);
border: 1px solid var(--c-page);
border-bottom: 0;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}
.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu,
.main-navigation li.is-open > .sub-menu {
display: block;
}
.main-navigation .sub-menu a {
padding: 9px 15px;
border-bottom: 1px solid var(--c-page);
font-size: 13px;
}
.main-navigation .sub-menu a:hover {
background: var(--c-soft);
}
.header-tools {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
.search-toggle,
.nav-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 4px;
border: 0;
background: transparent;
color: var(--c-teal-text);
font-size: 14px;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
}
.search-toggle:hover,
.nav-toggle:hover {
color: var(--c-purple);
}
.nav-toggle {
display: none;
color: var(--c-ink);
font-size: 28px;
}
.header-search {
padding: 0 30px 15px;
}
.header-search[hidden] {
display: none;
} .site-header__post {
display: none;
flex: 1;
align-items: center;
gap: 20px;
min-width: 0;
}
.site-header__post-title {
flex: 1;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--font-head);
font-size: 24px;
font-weight: 700;
letter-spacing: -1px;
} .hero {
position: relative;
height: clamp(260px, 46vw, 640px);
margin: 30px 0 0;
overflow: hidden;
background: var(--c-soft);
}
.hero img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero__bar,
.card__overlay {
position: absolute;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0 20px;
padding: 15px 15px 0;
background: rgba(0, 0, 0, 0.45);
} .site-main {
padding: 0 0 30px;
}
.site-main > .container {
padding-top: 60px;
}
.layout {
display: grid;
grid-template-columns: minmax(0, 1fr) var(--sidebar);
gap: 45px;
align-items: start;
}
.layout--single {
grid-template-columns: minmax(0, 1fr);
}
.section-title {
margin: 0 0 30px;
padding: 15px;
border-left: 15px double var(--c-page);
font-size: 28px;
font-variant: small-caps;
}
.more-posts,
.related,
.author-box,
.comments {
margin-top: 60px;
} .card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 45px var(--gap);
}
.card {
display: flex;
flex-direction: column;
min-width: 0;
}
.card__media {
position: relative;
display: block;
margin-bottom: 20px;
background: var(--c-soft);
border-radius: var(--radius);
overflow: hidden;
}
.card__media img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
transition: transform 0.6s ease;
}
a.card__media:hover img {
transform: scale(1.03);
}
.card__body {
display: flex;
flex: 1;
flex-direction: column;
}
.card__title {
margin-bottom: 8px;
font-size: 22px;
line-height: 1.25;
}
.card__title a {
color: var(--c-ink);
}
.card__title a:hover {
color: var(--c-teal-text);
}
.card__excerpt p {
margin-bottom: 10px;
font-size: 17px;
line-height: 1.55;
}
.card__more {
margin: auto 0 0;
font-size: 16px;
}
.card--large {
margin-bottom: 60px;
}
.card--large .card__media {
margin-bottom: 30px;
}
.card--large .card__title {
font-size: clamp(28px, 4vw, 44px);
line-height: 1.2;
}
.card--large .card__title a {
border-bottom: 1px solid var(--c-soft);
}
.card--large .card__body {
padding: 0 30px 0 0;
}
.card--large .card__excerpt p {
font-size: 18px;
}
.card--large .card__more {
margin-top: 15px;
text-align: right;
} .entry-meta {
display: flex;
flex-wrap: wrap;
gap: 0 12px;
margin: 0 0 15px;
font-size: 12px;
line-height: 26px;
letter-spacing: 1px;
text-transform: uppercase;
}
.entry-meta--end {
justify-content: flex-end;
margin-left: auto;
}
.entry-meta--center {
justify-content: center;
width: 100%;
}
.meta-link {
color: var(--c-ink);
font-weight: 400;
white-space: nowrap;
}
.meta-link:hover {
color: var(--c-teal-text);
}
.hero__bar .meta-link,
.card__overlay .meta-link {
color: #fff;
}
.hero__bar .meta-link:hover,
.card__overlay .meta-link:hover {
color: var(--c-teal);
} .page-header {
margin-bottom: 45px;
}
.page-title {
margin: 0;
padding-bottom: 15px;
border-bottom: 1px solid var(--c-soft);
font-size: clamp(30px, 5vw, 44px);
text-transform: none;
}
.page-title::first-letter {
text-transform: uppercase;
}
.page-subtitle {
margin: 10px 0 0;
font-size: 12px;
font-weight: 400;
letter-spacing: 1px;
line-height: 24px;
text-transform: uppercase;
}
.page-description {
margin-top: 20px;
}
.page-description p:last-child {
margin-bottom: 0;
}
.archive-years {
display: flex;
flex-wrap: wrap;
gap: 5px 15px;
margin: 15px 0 0;
padding: 0;
list-style: none;
} .entry-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 20px;
}
.entry-topbar__cats {
margin: 0;
font-size: 16px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.entry-header {
margin-bottom: 30px;
}
.entry-title {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid var(--c-soft);
font-size: clamp(30px, 5vw, 44px);
}
.entry-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin: 10px 0 0;
}
.entry-tags a {
padding: 0 10px;
border-radius: var(--radius);
background: var(--c-line);
color: var(--c-ink);
font-size: 12px;
font-weight: 400;
letter-spacing: 1px;
line-height: 26px;
text-transform: uppercase;
}
.entry-tags a:hover {
background: var(--c-purple-dark);
color: var(--c-soft);
}
.entry-content {
overflow-wrap: break-word;
}
.entry-content > *:last-child {
margin-bottom: 0;
}
.entry-content a {
font-weight: 700;
}
.entry-content h2 {
margin-top: 1.5em;
font-size: clamp(26px, 4vw, 38px);
}
.entry-content h3 {
margin-top: 1.4em;
font-size: 24px;
letter-spacing: -1px;
}
.entry-content h4 {
font-size: 18px;
font-weight: 400;
}
.entry-content h5,
.entry-content h6 {
font-family: var(--font-body);
font-size: 14px;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
}
.entry-content li {
margin-bottom: 0.4em;
}
.entry-content blockquote {
margin: 0 0 30px;
padding: 15px 15px 15px 30px;
border: 0;
border-left: 20px double var(--c-page);
font-style: italic;
}
.entry-content blockquote p {
font-size: 24px;
line-height: 1.4;
}
.entry-content blockquote p:last-child {
margin-bottom: 0;
}
.entry-content blockquote cite {
display: block;
font-size: 14px;
font-style: normal;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
}
.entry-content table {
width: 100%;
margin-bottom: 30px;
border-collapse: collapse;
border-top: 2px solid var(--c-ink);
}
.entry-content th {
padding: 15px;
background: var(--c-ink);
color: var(--c-soft);
font-weight: 400;
text-align: left;
}
.entry-content td {
padding: 15px;
font-size: 16px;
border-bottom: 1px solid var(--c-line);
}
.entry-content tr:nth-child(even) td {
background: var(--c-soft);
}
.entry-content iframe {
border: 0;
}
.entry-content figure {
margin: 0 0 30px;
}
.entry-content figcaption {
padding: 8px 0;
font-size: 13px;
line-height: 1.4;
text-align: center;
}
.page-links {
margin-top: 30px;
font-weight: 400;
}
.translator {
margin-top: 30px;
}
.entry--page .entry-title {
margin-bottom: 30px;
} .share {
margin-bottom: 30px;
padding: 5px 15px 15px;
background: #f9f9f9;
border-bottom: 1px solid var(--c-line);
}
.share__label {
margin: 10px 0 8px;
font-size: 12px;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
}
.share-list,
.follow-list {
display: flex;
flex-wrap: wrap;
gap: 1px;
margin: 0;
padding: 0;
list-style: none;
}
.share-link,
.follow-link {
display: flex;
align-items: center;
justify-content: center;
min-width: 60px;
min-height: 54px;
padding: 15px;
background: var(--c-purple-dark);
color: #fff;
font-size: 24px;
}
.share-link:hover,
.follow-link:hover {
background: var(--c-ink);
color: #fff;
}
.share-link--facebook,
.follow-link--facebook { background: #3b5999; }
.share-link--twitter,
.follow-link--twitter { background: #1f7ab8; }
.share-link--instagram,
.follow-link--instagram { background: #405de6; }
.share-link--email { background: #2c9178; }
.follow-link--feed { background: #b8620f; }
.share-list--compact .share-link {
min-width: 44px;
min-height: 44px;
padding: 8px;
font-size: 20px;
} .author-box__inner {
display: grid;
grid-template-columns: 140px 1fr;
gap: 30px;
align-items: center;
padding: 30px;
background: var(--c-soft);
border-radius: var(--radius);
}
.author-box__inner img {
border-radius: 50%;
}
.author-box__name {
margin: 0 0 8px;
font-family: var(--font-body);
font-size: 16px;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
}
.author-box__inner p {
margin: 0;
font-size: 16px;
line-height: 1.5;
}
.comments-note {
font-size: 16px;
}
.comment-list,
.comment-list .children {
margin: 0;
padding: 0;
list-style: none;
}
.comment-list .children {
margin-left: 20px;
}
.comment-body {
position: relative;
margin: 0 0 15px;
padding: 20px 20px 5px 120px;
background: var(--c-soft);
border-radius: var(--radius);
font-size: 16px;
line-height: 1.5;
min-height: 130px;
}
.comment-body .avatar {
position: absolute;
top: 20px;
left: 20px;
width: 80px;
height: 80px;
border-radius: 50%;
}
.comment-meta {
margin-bottom: 8px;
}
.comment-author .fn {
font-family: var(--font-body);
font-size: 16px;
font-style: normal;
font-weight: 700;
}
.comment-author .says {
display: none;
}
.comment-metadata {
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
}
.comment-metadata a {
color: var(--c-muted);
}
.reply {
position: absolute;
top: 15px;
right: 15px;
margin: 0;
}
.comment-reply-link {
padding: 4px 9px;
border-radius: var(--radius);
background: var(--c-ink);
color: var(--c-soft);
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
}
.comment-reply-link:hover {
background: var(--c-teal-text);
color: #fff;
}
.comment-awaiting-moderation {
font-style: italic;
}
.comment-respond {
margin-top: 45px;
}
.comment-reply-title {
font-size: 14px;
font-family: var(--font-body);
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
} .sidebar {
padding: 30px 30px 1px;
background: var(--c-soft);
}
.sidebar p,
.sidebar li {
font-size: 16px;
line-height: 1.5;
}
.sidebar-widget {
margin-bottom: 30px;
}
.sidebar-title {
margin: 0 0 25px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
font-family: var(--font-body);
font-size: 18px;
font-weight: 300;
letter-spacing: 1px;
text-align: center;
text-transform: uppercase;
}
.sidebar-about__photo img {
width: 160px;
height: 160px;
margin-inline: auto;
border-radius: 50%;
object-fit: cover;
}
.popular-list {
margin: 0;
padding: 0;
list-style: none;
}
.popular-list__item {
display: grid;
grid-template-columns: 1fr 40%;
gap: 15px;
align-items: center;
margin-bottom: 15px;
padding-bottom: 15px;
}
.popular-list__title {
color: var(--c-ink);
font-size: 14px;
font-weight: 700;
line-height: 1.4;
text-transform: uppercase;
}
.popular-list__title:hover {
color: var(--c-teal-text);
}
.popular-list__thumb img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.follow-list {
gap: 8px;
}
.follow-list li {
flex: 1 1 60px;
}
.follow-link {
width: 100%;
}
.instagram-widget {
max-width: 100%;
overflow-x: hidden;
}
.instagram {
overflow: hidden;
} .site-footer {
background: var(--c-ink);
color: var(--c-soft);
}
.footer-columns {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 30px;
padding: 30px 30px 15px;
}
.footer-title {
margin: 0 0 15px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
}
.footer-title::first-letter {
font-size: 14px;
font-weight: 400;
border-bottom: 1px solid var(--c-soft);
}
.footer-menu {
margin: 0;
padding: 0;
list-style: none;
}
.footer-menu li {
margin: 0 0 3px;
padding-bottom: 3px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
font-size: 13px;
line-height: 1.6;
}
.footer-menu li:last-child {
margin: 0;
padding: 0;
border: 0;
}
.site-footer a {
display: block;
color: var(--c-soft);
}
.site-footer a:hover {
color: #b5b5b5;
}
.site-footer .newsletter p,
.site-footer .newsletter label {
font-size: 12px;
line-height: 1.5;
}
.copyright {
padding: 15px 30px 30px;
color: #b5b5b5;
font-size: 12px;
line-height: 1.6;
text-align: center;
}
.copyright p {
margin: 0;
font-style: italic;
}
.legal-menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0 8px;
margin: 0 0 8px;
padding: 0;
list-style: none;
}
.legal-menu li:not(:last-child)::after {
content: "\2022";
margin-left: 8px;
}
.legal-menu li {
display: inline-flex;
}
.copyright .legal-menu a {
display: inline;
color: var(--c-teal);
font-style: normal;
}
.copyright .legal-menu a:hover {
color: #fff;
} .back-top {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 90;
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
background: rgba(239, 251, 251, 0.95);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
color: var(--c-ink);
font-size: 24px;
opacity: 0;
visibility: hidden;
transition: opacity var(--ease), visibility var(--ease), color var(--ease);
}
.back-top.is-visible {
opacity: 1;
visibility: visible;
}
.post-nav {
display: none;
}
.post-nav__link {
position: fixed;
top: 45%;
z-index: 80;
display: block;
width: 200px;
opacity: 0;
visibility: hidden;
transition: opacity var(--ease), visibility var(--ease);
}
.post-nav__link--prev {
left: 0;
}
.post-nav__link--next {
right: 0;
}
.post-nav.is-visible .post-nav__link {
opacity: 1;
visibility: visible;
}
.post-nav__link img {
width: 100%;
height: 135px;
object-fit: cover;
border: 15px solid var(--c-page);
}
.post-nav__link span {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
background: var(--c-page);
color: var(--c-ink);
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
transition: opacity var(--ease);
}
.post-nav__link:hover span,
.post-nav__link:focus-visible span {
opacity: 0;
} input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--c-line);
border-radius: var(--radius);
background: var(--c-surface);
color: var(--c-ink);
font: inherit;
font-size: 16px;
font-weight: 300;
}
input:focus,
textarea:focus,
select:focus {
border-color: var(--c-teal);
outline: 2px solid var(--c-teal);
outline-offset: 0;
}
textarea {
min-height: 180px;
}
label {
display: block;
margin-bottom: 4px;
font-size: 13px;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
}
input[type="submit"],
button[type="submit"]:not(.search-submit),
.comment-button,
.newsletter-button {
width: auto;
padding: 11px 24px;
border: 0;
border-radius: 22px;
background: #0f0f0f;
color: var(--c-soft);
font-size: 12px;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
transition: background-color var(--ease);
}
input[type="submit"]:hover,
button[type="submit"]:not(.search-submit):hover,
.comment-button:hover,
.newsletter-button:hover {
background: var(--c-teal-text);
}
.comment-form p {
margin-bottom: 15px;
}
.comment-form-cookies-consent {
display: flex;
gap: 8px;
align-items: baseline;
}
.comment-form-cookies-consent label {
margin: 0;
text-transform: none;
letter-spacing: 0;
}
.comment-form-cookies-consent input {
width: auto;
}
.search-form {
position: relative;
display: flex;
max-width: 420px;
}
.header-search .search-form {
max-width: none;
}
.search-field {
padding-right: 48px;
}
.search-submit {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 44px;
border: 0;
background: transparent;
color: var(--c-teal-text);
font-size: 18px;
}
.search-submit:hover {
color: var(--c-purple);
}
.newsletter p {
margin-bottom: 12px;
}
.newsletter label {
margin-top: 8px;
}
.newsletter .newsletter-note {
margin-top: 12px;
line-height: 1.4;
}
.newsletter-button {
width: 100%;
padding: 12px;
border-radius: var(--radius);
}
.site-footer .newsletter-text {
padding: 6px 9px;
}
.cm-form-error p {
margin: 0 0 8px;
padding: 5px;
border: 1px solid var(--c-danger);
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
}
.cm-invalid-field,
.wpcf7-not-valid {
border-color: var(--c-danger) !important;
} .contact .wpcf7 label {
margin-top: 15px;
text-transform: none;
letter-spacing: 0;
}
.contact .wpcf7 input[type="text"],
.contact .wpcf7 input[type="email"],
.contact .wpcf7 textarea {
padding: 12px;
font-size: 18px;
}
.wpcf7-not-valid-tip {
margin-top: 5px;
color: var(--c-danger);
font-size: 13px;
}
.wpcf7 form .wpcf7-response-output {
margin: 20px 0 0;
padding: 15px;
border: 1px double var(--c-teal);
font-weight: 700;
text-align: center;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
border-color: var(--c-danger);
} .pagination,
.page-numbers {
font-size: 16px;
}
.pagination {
margin-top: 45px;
}
.pagination .nav-links,
ul.page-numbers {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin: 45px 0 0;
padding: 0;
list-style: none;
}
.pagination .nav-links {
margin: 0;
}
a.page-numbers,
span.page-numbers {
display: inline-block;
min-width: 44px;
padding: 10px 14px;
border-radius: var(--radius);
background: var(--c-line);
color: var(--c-ink);
text-align: center;
}
a.page-numbers:hover {
background: var(--c-purple-dark);
color: var(--c-soft);
}
span.page-numbers.current {
background: var(--c-ink);
color: #fff;
}
.sitemap {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 45px;
}
.sitemap ul {
font-size: 16px;
}
.sitemap .section-title {
margin-top: 30px;
}
.sitemap .section-title:first-child {
margin-top: 0;
} .alignleft {
float: left;
margin: 8px 30px 20px 0;
}
.alignright {
float: right;
margin: 8px 0 20px 30px;
}
.aligncenter {
display: block;
margin-inline: auto;
}
.alignwide,
.alignfull {
max-width: 100%;
}
.wp-caption {
max-width: 100%;
margin-bottom: 30px;
border-bottom: 2px solid var(--c-soft);
}
.wp-caption img {
margin-bottom: 0;
}
.wp-caption-text,
.gallery-caption,
.wp-element-caption {
margin: 0;
padding: 10px 0 7px;
font-size: 13px;
line-height: 1.4;
text-align: center;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
margin-bottom: 30px;
}
.gallery-item {
margin: 0;
}
.sticky,
.bypostauthor {
display: block;
} @media (min-width: 900px) {
.is-deep .site-header__post {
display: flex;
}
.is-deep .main-navigation {
display: none;
}
}
@media (min-width: 1280px) {
.post-nav {
display: block;
}
}
@media (max-width: 992px) {
.layout {
grid-template-columns: minmax(0, 1fr);
}
.footer-columns {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sitemap {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 899px) {
.nav-toggle {
display: inline-flex;
}
.search-toggle span {
display: none;
}
.site-header__inner {
flex-wrap: wrap;
gap: 10px 15px;
}
.main-navigation {
order: 3;
display: none;
flex-basis: 100%;
padding: 10px 15px;
background: var(--c-page);
}
.main-navigation.is-open {
display: block;
}
.main-navigation .menu {
flex-direction: column;
gap: 0;
}
.main-navigation .sub-menu {
position: static;
min-width: 0;
border: 0;
box-shadow: none;
}
.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu {
display: none;
}
.main-navigation li.is-open > .sub-menu {
display: block;
}
.site-tagline {
display: none;
}
}
@media (max-width: 768px) {
body {
padding: 0;
font-size: 17px;
}
.container {
padding-inline: 15px;
}
.site-main > .container {
padding-top: 30px;
}
.site-header__inner {
padding: 12px 15px;
}
.header-search {
padding: 0 15px 12px;
}
.hero {
margin-top: 0;
}
.card--large .card__body {
padding-right: 0;
}
.layout {
gap: 30px;
}
.sidebar {
padding: 20px 15px 1px;
}
.author-box__inner {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
padding: 20px;
}
.comment-body {
padding: 20px 15px 5px;
}
.comment-body .avatar {
position: static;
margin-bottom: 10px;
}
.comment-list .children {
margin-left: 10px;
}
.alignleft,
.alignright {
float: none;
display: block;
margin: 0 auto 20px;
}
.footer-columns {
padding: 30px 15px 15px;
}
.entry-topbar {
flex-direction: column;
align-items: flex-start;
}
.back-top {
right: 12px;
bottom: 12px;
}
}
@media (max-width: 520px) {
.footer-columns {
grid-template-columns: minmax(0, 1fr);
}
.card-grid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
[id="content"],
[id="entry"],
[id="comments"] {
scroll-margin-top: calc(var(--header-h) + 15px);
}#wpadminbar :after,#wpadminbar :before,.dashicons{font-family:Dashicons!important}.fa{font-family:FontAwesome!important}.oi{font-family:icons!important}