/*
Theme Name: SWELL Child
Theme URI: https://otona-hokenshitsu.jp
Description: オトナのお悩み保健室 SWELL子テーマ
Author: Otona Hokenshitsu
Template: swell
Version: 1.0.0
Text Domain: swell-child
*/

:root {
--g-logo: linear-gradient(135deg, #86AEEA 0%, #B088D8 50%, #F79797 100%);
--g-logo-r: linear-gradient(135deg, #F79797 0%, #B088D8 50%, #86AEEA 100%);
--g-hero: linear-gradient(140deg, #EEF4FF 0%, #F4EEFF 45%, #FFF0F8 100%);
--g-warm: linear-gradient(135deg, #FFF0F8 0%, #F8EEFF 50%, #EEF4FF 100%);
--g-sect: linear-gradient(150deg, #F8F0FF 0%, #EEF5FF 50%, #FFF5F8 100%);
--g-cool: linear-gradient(135deg, #EEF4FF 0%, #F0EEFF 60%, #FFF0F8 100%);
--g-badge-h: linear-gradient(135deg, #F79797, #E088C8);
--g-badge-i: linear-gradient(135deg, #B088D8, #8899E8);
--g-badge-c: linear-gradient(135deg, #86AEEA, #88C8D8);
--g-badge-s: linear-gradient(135deg, #88C8B0, #86AEEA);
--logo-blue: #86AEEA;
--logo-mid: #B088D8;
--logo-pink: #F79797;
--ink: #3d3d3d;
--ink-md: #666666;
--ink-lt: #999999;
--bg: #FDFAF8;
--white: #ffffff;
--border: #EDE8E3;
--sh: 0 2px 16px rgba(140, 120, 180, .09);
--sh-md: 0 6px 32px rgba(140, 120, 180, .15);
--r: 14px;
--r-lg: 24px;
--serif: 'Noto Serif JP', serif;
--sans: 'Noto Sans JP', sans-serif;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--sans) !important;
background: var(--bg) !important;
color: var(--ink) !important;
font-size: 15px !important;
line-height: 1.85 !important;
-webkit-font-smoothing: antialiased;
}
*, *: : before, *: : after {
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
a {
transition: color .18s, opacity .18s;
}
#site-header,
.site-header,
header.site-header {
position: sticky !important;
top: 0 !important;
z-index: 200 !important;
background: rgba(253, 250, 248, .92) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
border-bottom: 1px solid rgba(237, 232, 227, .8) !important;
box-shadow: none !important;
}
.site-header .header-inner,
.site-header .site-branding,
.header-wrap {
max-width: 1080px;
margin: 0 auto;
padding: 0 32px;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
}
.site-header .custom-logo,
.site-header .site-logo img,
.site-header img.custom-logo {
height: 36px !important;
width: auto !important;
}
.site-title,
.site-title a {
font-family: var(--serif) !important;
font-size: 17px !important;
font-weight: 600 !important;
background: var(--g-logo) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
text-decoration: none !important;
}
.main-navigation a,
.primary-menu a,
.nav-menu a {
font-family: var(--sans) !important;
font-size: 12px !important;
color: var(--ink-md) !important;
padding: 6px 13px !important;
border-radius: 20px !important;
transition: background .18s, color .18s !important;
text-decoration: none !important;
}
.main-navigation a: hover,
.primary-menu a: hover,
.nav-menu a: hover {
background: #F4EEFF !important;
color: var(--ink) !important;
}
.main-navigation a[href*="lin.ee"],
.nav-menu a[href*="lin.ee"] {
background: linear-gradient(var(--white), var(--white)) padding-box,
var(--g-logo) border-box !important;
border: 1.5px solid transparent !important;
border-radius: 20px !important;
font-size: 11px !important;
color: var(--logo-mid) !important;
padding: 5px 13px !important;
}
.main-navigation a[href*="lin.ee"]: hover,
.nav-menu a[href*="lin.ee"]: hover {
background: linear-gradient(#F8F0FF, #F8F0FF) padding-box,
var(--g-logo) border-box !important;
}
.breadcrumb,
.breadcrumbs,
#breadcrumb,
.yoast-breadcrumb,
.rank-math-breadcrumb {
max-width: 1080px;
margin: 0 auto;
padding: 14px 32px;
font-size: 11px;
color: var(--ink-lt);
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.breadcrumb a,
.breadcrumbs a {
color: var(--ink-lt) !important;
text-decoration: none !important;
}
.breadcrumb a: hover,
.breadcrumbs a: hover {
color: var(--logo-mid) !important;
}
.breadcrumb .breadcrumb_last,
.breadcrumbs .current {
background: var(--g-logo);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.site-main,
.content-area,
#primary,
#main,
.wp-site-blocks {
max-width: 1080px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 32px !important;
padding-right: 32px !important;
}
.single .content-area {
display: grid;
grid-template-columns: 1fr 300px;
gap: 48px;
align-items: start;
}
@media (max-width: 900px) {
.single .content-area {
grid-template-columns: 1fr;
}
}
.badge,
.cat-label,
.entry-category,
.post-category {
display: inline-block !important;
font-size: 9px !important;
font-weight: 500 !important;
letter-spacing: .06em !important;
padding: 3px 10px !important;
border-radius: 20px !important;
margin-bottom: 8px !important;
color: #fff !important;
line-height: 1.6 !important;
}
.post-type-hotness .entry-category,
.category-hotness .entry-category,
[class*="cat-hotness"] {
background: var(--g-badge-h) !important;
}
.post-type-items .entry-category,
.category-items .entry-category,
[class*="cat-items"] {
background: var(--g-badge-i) !important;
}
.post-type-column .entry-category,
.category-column .entry-category,
[class*="cat-column"] {
background: var(--g-badge-c) !important;
}
.post-type-soudan .entry-category,
.category-soudan .entry-category,
[class*="cat-soudan"] {
background: var(--g-badge-s) !important;
}
.post,
article.type-post,
article.type-hotness,
article.type-items,
article.type-column,
article.type-soudan,
.card {
background: var(--white) !important;
border-radius: var(--r) !important;
overflow: hidden !important;
box-shadow: var(--sh) !important;
border: 1px solid rgba(237, 232, 227, .5) !important;
transition: transform .22s ease, box-shadow .22s ease !important;
}
.post: hover,
article.type-post: hover,
article.type-hotness: hover,
article.type-items: hover,
article.type-column: hover,
article.type-soudan: hover {
transform: translateY(-4px) !important;
box-shadow: var(--sh-md) !important;
}
.post-thumbnail img,
.entry-thumbnail img,
.wp-post-image {
width: 100% !important;
aspect-ratio: 16/9 !important;
object-fit: cover !important;
display: block !important;
transition: transform .4s ease !important;
}
.post: hover .post-thumbnail img {
transform: scale(1.04) !important;
}
.entry-header,
.card-body {
padding: 18px 20px 22px !important;
}
.entry-title,
.entry-title a,
.card-title {
font-family: var(--serif) !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.6 !important;
color: var(--ink) !important;
text-decoration: none !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.entry-meta,
.posted-on,
.card-meta {
font-size: 11px !important;
color: var(--ink-lt) !important;
font-weight: 300 !important;
margin-top: 8px !important;
}
.posts-grid,
.archive .site-main,
.home .posts-section {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
gap: 20px !important;
}
.single .article-hero,
.single .post-thumbnail.featured-image {
border-radius: var(--r) !important;
overflow: hidden !important;
margin-bottom: 32px !important;
}
.single .post-thumbnail.featured-image img {
width: 100% !important;
aspect-ratio: 16/9 !important;
object-fit: cover !important;
border-radius: var(--r) !important;
}
.single .article-meta,
.single .entry-meta {
display: flex !important;
align-items: center !important;
gap: 12px !important;
margin-bottom: 20px !important;
flex-wrap: wrap !important;
}
.single .article-date,
.single .posted-on time {
font-size: 12px !important;
color: var(--ink-lt) !important;
font-weight: 300 !important;
}
.single .entry-title,
.single .article-title {
font-family: var(--serif) !important;
font-size: clamp(20px, 3vw, 28px) !important;
font-weight: 700 !important;
line-height: 1.45 !important;
color: var(--ink) !important;
margin-bottom: 12px !important;
}
.article-lead,
.entry-content .lead {
font-size: 14px !important;
font-weight: 300 !important;
color: var(--ink-md) !important;
line-height: 2 !important;
margin-bottom: 32px !important;
padding-bottom: 28px !important;
border-bottom: 1px solid var(--border) !important;
}
#toc_container,
.toc,
.table-of-contents,
.wp-block-table-of-contents {
background: var(--g-sect) !important;
border-radius: var(--r) !important;
padding: 24px 28px !important;
margin-bottom: 36px !important;
border: none !important;
}
#toc_container .toc_title,
.toc .toc-title {
font-family: var(--serif) !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--ink) !important;
margin-bottom: 14px !important;
background: none !important;
}
#toc_container ul,
.toc ol,
.toc ul {
list-style: none !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 7px !important;
counter-reset: toc !important;
}
#toc_container ul li,
.toc li {
counter-increment: toc !important;
display: flex !important;
align-items: baseline !important;
gap: 10px !important;
font-size: 13px !important;
}
#toc_container ul li: : before,
.toc li: : before {
content: counter(toc) !important;
min-width: 20px !important;
height: 20px !important;
border-radius: 50% !important;
background: var(--g-logo) !important;
color: #fff !important;
font-size: 10px !important;
font-weight: 700 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
#toc_container ul li a,
.toc li a {
color: var(--ink-md) !important;
text-decoration: none !important;
transition: color .15s !important;
}
#toc_container ul li a: hover,
.toc li a: hover {
color: var(--logo-mid) !important;
}
.entry-content {
font-size: 15px !important;
line-height: 1.95 !important;
color: var(--ink) !important;
}
.entry-content h2 {
font-family: var(--serif) !important;
font-size: 19px !important;
font-weight: 700 !important;
color: var(--ink) !important;
background: var(--g-sect) !important;
border-radius: var(--r) !important;
padding: 16px 22px !important;
margin: 44px 0 20px !important;
position: relative !important;
border: none !important;
}
.entry-content h2: : before {
content: '' !important;
position: absolute !important;
left: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 4px !important;
height: 60% !important;
background: var(--g-logo) !important;
border-radius: 0 4px 4px 0 !important;
}
.entry-content h3 {
font-family: var(--serif) !important;
font-size: 16px !important;
font-weight: 700 !important;
color: var(--ink) !important;
margin: 32px 0 14px !important;
padding-bottom: 8px !important;
border-bottom: 2px solid !important;
border-image: var(--g-logo) 1 !important;
}
.entry-content h4 {
font-family: var(--serif) !important;
font-size: 15px !important;
font-weight: 700 !important;
color: var(--ink) !important;
margin: 24px 0 10px !important;
}
.entry-content p {
margin-bottom: 20px !important;
}
.entry-content ul,
.entry-content ol {
padding-left: 22px !important;
margin-bottom: 20px !important;
}
.entry-content li {
margin-bottom: 7px !important;
}
.entry-content strong {
font-weight: 700 !important;
background: linear-gradient(transparent 60%, #F0E8FF 60%) !important;
}
.entry-content blockquote {
background: var(--g-sect) !important;
border-radius: var(--r) !important;
border-left: 4px solid !important;
border-image: var(--g-logo) 1 !important;
padding: 20px 24px !important;
margin: 24px 0 !important;
font-style: normal !important;
color: var(--ink-md) !important;
}
.entry-content table {
width: 100% !important;
border-collapse: collapse !important;
margin: 24px 0 !important;
font-size: 13px !important;
border-radius: var(--r) !important;
overflow: hidden !important;
}
.entry-content th {
background: var(--g-sect) !important;
padding: 10px 14px !important;
text-align: left !important;
font-weight: 600 !important;
color: var(--ink) !important;
font-size: 12px !important;
}
.entry-content td {
padding: 10px 14px !important;
border-bottom: 1px solid var(--border) !important;
}
.entry-content hr {
border: none !important;
height: 1px !important;
background: linear-gradient(90deg, transparent, var(--border), transparent) !important;
margin: 36px 0 !important;
}
.entry-content a {
color: var(--logo-mid) !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
.entry-content a: hover {
color: var(--logo-blue) !important;
}
.point-box,
.wp-block-group.point-box {
background: var(--g-warm) !important;
border-radius: var(--r) !important;
padding: 22px 26px !important;
margin: 28px 0 !important;
}
.point-box .point-box-title,
.point-box > p: first-child {
font-family: var(--serif) !important;
font-size: 14px !important;
font-weight: 700 !important;
color: var(--ink) !important;
margin-bottom: 12px !important;
}
.point-box ul {
list-style: none !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
.point-box ul li {
font-size: 14px !important;
display: flex !important;
align-items: baseline !important;
gap: 10px !important;
margin-bottom: 0 !important;
}
.point-box ul li: : before {
content: '✓' !important;
background: var(--g-logo) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
font-weight: 700 !important;
flex-shrink: 0 !important;
}
.expert-voice,
.wp-block-group.expert-voice {
background: var(--g-cool) !important;
border-radius: var(--r) !important;
padding: 22px 26px !important;
margin: 28px 0 !important;
}
.advice-box,
.wp-block-group.advice-box {
background: linear-gradient(135deg, #F0FFF8, #F0F8FF) !important;
border-radius: var(--r) !important;
border-left: 4px solid !important;
border-image: var(--g-logo) 1 !important;
padding: 22px 26px !important;
margin: 28px 0 !important;
}
.caution-box,
.wp-block-group.caution-box {
background: linear-gradient(135deg, #FFF8E0, #FFF0D8) !important;
border-radius: var(--r) !important;
border-left: 4px solid #F0C040 !important;
padding: 18px 22px !important;
margin: 24px 0 !important;
font-size: 13px !important;
color: var(--ink-md) !important;
}
.product-card,
.wp-block-group.product-card {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-radius: var(--r) !important;
overflow: hidden !important;
box-shadow: var(--sh) !important;
margin: 28px 0 !important;
transition: box-shadow .2s !important;
}
.product-card: hover {
box-shadow: var(--sh-md) !important;
}
.product-card .product-card-inner {
display: grid !important;
grid-template-columns: 180px 1fr !important;
gap: 0 !important;
}
.product-card img {
width: 180px !important;
height: 100% !important;
object-fit: cover !important;
}
.product-card .product-body {
padding: 20px 24px !important;
}
.product-card .product-name {
font-family: var(--serif) !important;
font-size: 16px !important;
font-weight: 700 !important;
color: var(--ink) !important;
margin-bottom: 8px !important;
line-height: 1.4 !important;
}
.shopify-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
background: var(--g-badge-i) !important;
color: #fff !important;
font-size: 13px !important;
font-weight: 700 !important;
padding: 12px 28px !important;
border-radius: 28px !important;
box-shadow: 0 3px 16px rgba(160, 100, 200, .2) !important;
transition: transform .2s, box-shadow .2s !important;
width: 100% !important;
text-decoration: none !important;
}
.shopify-btn: hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 24px rgba(160, 100, 200, .3) !important;
color: #fff !important;
}
.amazon-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
background: linear-gradient(135deg, #FFD76E, #FFBA38) !important;
color: #333 !important;
font-size: 13px !important;
font-weight: 700 !important;
padding: 12px 28px !important;
border-radius: 28px !important;
width: 100% !important;
text-decoration: none !important;
transition: transform .2s !important;
}
.amazon-btn: hover {
transform: translateY(-2px) !important;
color: #333 !important;
}
@media (max-width: 680px) {
.product-card .product-card-inner {
grid-template-columns: 1fr !important;
}
.product-card img {
width: 100% !important;
height: 200px !important;
}
}
.q-block {
background: linear-gradient(135deg, #D0E8FF, #C8D0F8) !important;
border-radius: 0 var(--r) var(--r) var(--r) !important;
padding: 28px 32px !important;
margin-bottom: 24px !important;
position: relative !important;
}
.q-block: : before {
content: 'Q' !important;
position: absolute !important;
top: -14px !important;
left: 0 !important;
font-family: var(--serif) !important;
font-size: 28px !important;
font-weight: 700 !important;
background: var(--g-logo) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
line-height: 1 !important;
}
.a-block {
background: linear-gradient(135deg, #FDE8F0, #F0E8FF) !important;
border-radius: var(--r) var(--r) var(--r) 0 !important;
padding: 28px 32px !important;
position: relative !important;
}
.a-block: : before {
content: 'A' !important;
position: absolute !important;
top: -14px !important;
right: 0 !important;
font-family: var(--serif) !important;
font-size: 28px !important;
font-weight: 700 !important;
background: var(--g-warm) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
line-height: 1 !important;
}
.author-box,
.author-profile,
.vk-author-info,
.article-footer-author {
display: flex !important;
gap: 20px !important;
align-items: flex-start !important;
background: var(--g-sect) !important;
border-radius: var(--r) !important;
padding: 24px !important;
margin: 40px 0 !important;
}
.author-box img,
.author-profile img,
.author-avatar img,
.article-footer-av img {
width: 64px !important;
height: 64px !important;
border-radius: 50% !important;
object-fit: cover !important;
flex-shrink: 0 !important;
}
.author-box .author-name,
.author-profile .author-name,
.article-footer-name {
font-family: var(--serif) !important;
font-size: 15px !important;
font-weight: 700 !important;
color: var(--ink) !important;
margin-bottom: 4px !important;
}
.author-box .author-role,
.article-footer-role {
font-size: 11px !important;
color: var(--logo-mid) !important;
margin-bottom: 10px !important;
}
.author-box .author-bio,
.article-footer-bio {
font-size: 13px !important;
color: var(--ink-md) !important;
line-height: 1.85 !important;
font-weight: 300 !important;
}
@media (max-width: 680px) {
.author-box,
.author-profile,
.article-footer-author {
flex-direction: column !important;
}
}
#secondary,
.widget-area,
.sidebar {
position: sticky !important;
top: 80px !important;
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
}
.widget,
.sidebar .widget {
background: var(--white) !important;
border-radius: var(--r) !important;
border: 1px solid var(--border) !important;
box-shadow: var(--sh) !important;
overflow: hidden !important;
margin-bottom: 0 !important;
}
.widget-title,
.widgettitle {
font-family: var(--serif) !important;
font-size: 13px !important;
font-weight: 600 !important;
color: var(--ink) !important;
padding: 14px 18px !important;
background: var(--g-sect) !important;
border-bottom: 1px solid var(--border) !important;
margin: 0 !important;
}
.widget .widget-body,
.widget ul {
padding: 16px 18px !important;
list-style: none !important;
}
.widget ul li {
padding: 8px 0 !important;
border-bottom: 1px solid var(--border) !important;
font-size: 13px !important;
}
.widget ul li: last-child {
border-bottom: none !important;
}
.widget ul li a {
color: var(--ink-md) !important;
text-decoration: none !important;
}
.widget ul li a: hover {
color: var(--logo-mid) !important;
}
.sidebar-cta {
background: var(--g-warm) !important;
border-radius: var(--r) !important;
padding: 22px 20px !important;
text-align: center !important;
}
.sidebar-cta p {
font-size: 12px !important;
color: var(--ink-md) !important;
line-height: 1.8 !important;
margin-bottom: 14px !important;
font-weight: 300 !important;
}
.sidebar-cta a {
display: block !important;
background: var(--white) !important;
color: var(--logo-mid) !important;
font-size: 12px !important;
font-weight: 500 !important;
padding: 10px 16px !important;
border-radius: 24px !important;
box-shadow: 0 2px 12px rgba(140, 120, 180, .12) !important;
text-decoration: none !important;
transition: transform .2s !important;
}
.sidebar-cta a: hover {
transform: translateY(-2px) !important;
}
.line-cta,
.gentle-cta {
background: var(--g-warm) !important;
border-radius: var(--r-lg) !important;
padding: 48px 56px !important;
text-align: center !important;
position: relative !important;
overflow: hidden !important;
margin: 48px 0 !important;
}
.line-cta h2,
.gentle-cta h2 {
font-family: var(--serif) !important;
font-size: clamp(17px, 2.2vw, 21px) !important;
font-weight: 700 !important;
color: var(--ink) !important;
margin-bottom: 10px !important;
line-height: 1.45 !important;
}
.line-cta p,
.gentle-cta p {
font-size: 13px !important;
font-weight: 300 !important;
color: var(--ink-md) !important;
line-height: 1.9 !important;
margin-bottom: 20px !important;
}
.line-cta a,
.gentle-cta a {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
background: linear-gradient(var(--white), var(--white)) padding-box,
var(--g-logo) border-box !important;
border: 1.5px solid transparent !important;
color: var(--logo-mid) !important;
font-size: 13px !important;
font-weight: 500 !important;
padding: 14px 28px !important;
border-radius: 32px !important;
text-decoration: none !important;
box-shadow: 0 3px 18px rgba(140, 120, 180, .15) !important;
transition: transform .2s, box-shadow .2s !important;
}
.line-cta a: hover,
.gentle-cta a: hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 28px rgba(140, 120, 180, .22) !important;
}
a[href*="lin.ee"] img {
border-radius: var(--r) !important;
transition: transform .2s, box-shadow .2s !important;
}
a[href*="lin.ee"] img: hover {
transform: translateY(-3px) !important;
box-shadow: var(--sh-md) !important;
}
.related-posts,
.related-articles,
.wp-related-posts {
margin: 40px 0 !important;
}
.related-posts h3,
.related-articles h3 {
font-family: var(--serif) !important;
font-size: 16px !important;
font-weight: 700 !important;
color: var(--ink) !important;
background: var(--g-logo) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
margin-bottom: 18px !important;
}
.related-posts .posts-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
gap: 16px !important;
}
.pagination,
.nav-links,
.page-numbers-wrap {
display: flex !important;
justify-content: center !important;
gap: 8px !important;
margin: 48px 0 !important;
flex-wrap: wrap !important;
}
.page-numbers,
.pagination a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
font-size: 13px !important;
font-weight: 500 !important;
text-decoration: none !important;
color: var(--ink-md) !important;
background: var(--white) !important;
border: 1px solid var(--border) !important;
transition: all .2s !important;
}
.page-numbers.current,
.pagination a: hover,
.page-numbers: hover {
background: var(--g-logo) !important;
color: #fff !important;
border-color: transparent !important;
}
.archive .page-header,
.archive .archive-header {
background: var(--g-hero) !important;
border-radius: var(--r) !important;
padding: 40px !important;
margin-bottom: 36px !important;
text-align: center !important;
}
.archive .page-title,
.archive .archive-title {
font-family: var(--serif) !important;
font-size: clamp(20px, 4vw, 28px) !important;
font-weight: 700 !important;
background: var(--g-logo) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
.archive .archive-description {
font-size: 14px !important;
color: var(--ink-md) !important;
font-weight: 300 !important;
margin-top: 10px !important;
}
.site-footer,
#colophon {
margin-top: 80px !important;
padding: 56px 32px 40px !important;
border-top: 1px solid var(--border) !important;
background: var(--bg) !important;
}
.site-footer .footer-inner {
max-width: 1080px;
margin: 0 auto;
}
.site-footer .site-title,
.site-footer .footer-logo {
font-family: var(--serif) !important;
font-size: 17px !important;
font-weight: 600 !important;
background: var(--g-logo) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
margin-bottom: 10px !important;
display: inline-block !important;
}
.site-footer .footer-logo img {
height: 28px !important;
width: auto !important;
}
.site-footer p,
.site-footer .footer-desc {
font-size: 12px !important;
font-weight: 300 !important;
color: var(--ink-lt) !important;
line-height: 2 !important;
}
.site-footer a {
color: var(--ink-md) !important;
font-size: 13px !important;
text-decoration: none !important;
transition: color .15s !important;
}
.site-footer a: hover {
color: var(--logo-mid) !important;
}
.site-footer .copyright,
.site-footer .site-info {
font-size: 11px !important;
color: var(--ink-lt) !important;
font-weight: 300 !important;
border-top: 1px solid var(--border) !important;
padding-top: 24px !important;
margin-top: 32px !important;
}
@keyframes hk-fadeUp {
from {
opacity: 0; transform: translateY(16px);
}
to {
opacity: 1; transform: translateY(0);
}
}
.post,
article.type-post,
article.type-hotness,
article.type-items,
article.type-column,
article.type-soudan,
.card,
.widget {
animation: hk-fadeUp .5s ease both;
}
.post: nth-child(2) {
animation-delay: .07s;
}
.post: nth-child(3) {
animation-delay: .14s;
}
.post: nth-child(4) {
animation-delay: .21s;
}
@media (max-width: 960px) {
.single .content-area {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 768px) {
.site-main,
.content-area,
#primary,
#main {
padding-left: 20px !important;
padding-right: 20px !important;
}
.line-cta,
.gentle-cta {
padding: 36px 24px !important;
}
.site-footer,
#colophon {
padding: 48px 20px 32px !important;
}
.breadcrumb,
.breadcrumbs {
padding: 12px 20px !important;
}
}