:root { --intimfokus-primary: #bd2848;
--intimfokus-primary-hover: #a3223e;
--intimfokus-secondary: #f4e9eb;
--intimfokus-text: #000000;
--intimfokus-white: #ffffff;
--intimfokus-shadow: rgba(0, 0, 0, 0.1);
}
.intimfokus-cookie-banner,
.intimfokus-cookie-banner * {
box-sizing: border-box;
}
.intimfokus-cookie-banner {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 90%;
max-width: 1000px;
background-color: var(--intimfokus-white);
border-radius: 12px;
padding: 24px 32px;
z-index: 999999;
box-shadow: 0 4px 24px var(--intimfokus-shadow);
display: none; font-family: "DM Sans", sans-serif;
border: 1px solid rgba(0,0,0,0.05);
animation: slideUp 0.5s ease-out forwards;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translate(-50%, 20px);
}
to {
opacity: 1;
transform: translate(-50%, 0);
}
}
.intimfokus-cookie-content {
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
}
.intimfokus-cookie-content p {
margin: 0;
font-size: 15px;
color: var(--intimfokus-text);
line-height: 1.6;
font-weight: 400;
flex: 1; }
.intimfokus-cookie-buttons {
display: flex;
gap: 15px;
flex-shrink: 0;
}
.intimfokus-btn-accept,
.intimfokus-btn-deny {
padding: 12px 28px;
border-radius: 50px; cursor: pointer;
font-size: 15px;
font-weight: 600;
transition: all 0.2s ease;
border: 2px solid transparent;
font-family: "DM Sans", sans-serif;
white-space: nowrap;
text-align: center;
min-width: 100px;
}
.intimfokus-btn-accept {
background-color: var(--intimfokus-primary);
color: var(--intimfokus-white);
border-color: var(--intimfokus-primary);
}
.intimfokus-btn-accept:hover {
background-color: var(--intimfokus-primary-hover);
border-color: var(--intimfokus-primary-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(189, 40, 72, 0.2);
}
.intimfokus-btn-deny {
background-color: transparent;
color: var(--intimfokus-text);
border-color: #e0e0e0;
}
.intimfokus-btn-deny:hover {
background-color: #f5f5f5;
border-color: #d0d0d0;
color: var(--intimfokus-primary);
} @media (max-width: 992px) {
.intimfokus-cookie-banner {
width: 95%;
padding: 20px;
}
.intimfokus-cookie-content {
gap: 20px;
}
} @media (max-width: 768px) {
.intimfokus-cookie-banner {
bottom: 0;
left: 0;
transform: none;
width: 100%;
max-width: none;
border-radius: 16px 16px 0 0; padding: 24px 20px 30px 20px; animation: slideUpMobile 0.4s ease-out forwards;
box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
}
@keyframes slideUpMobile {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
.intimfokus-cookie-content {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.intimfokus-cookie-content p {
font-size: 14px; width: 100%;
}
.intimfokus-cookie-buttons {
width: 100%;
flex-direction: column; gap: 12px;
}
.intimfokus-btn-accept,
.intimfokus-btn-deny {
width: 100%;
padding: 14px; font-size: 16px; } .intimfokus-btn-accept {
order: 1;
}
.intimfokus-btn-deny {
order: 2;
}
}:root { --color-white: #ffffff;
--color-black: #000000;
--color-primary: #bd2848;
--color-primary-rgb: 189, 40, 72;
--color-secondary: #f4e9eb;
--color-secondary-rgb: 244, 233, 235;
--color-complementary: #8c0f33;
--color-complementary-rgb: 140, 15, 51;
--color-link: #314f72;
--color-link-hover: #446e9f; --font-main: "Sen", sans-serif;
--font-body: "Sen", sans-serif; --header-height: 90px;
--container-width: 1400px;
} .main-wrapper.single-article-container {
max-width: 1010px;
width: 100%;
margin-left: auto;
margin-right: auto;
} .single-featured-image {
width: 100%;
margin-bottom: 30px;
border-radius: 2px;
overflow: hidden;
}
.single-featured-image img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
max-height: 500px; } .single-content-wrapper {
max-width: 680px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.article-content h1,
.single-title {
font-size: clamp(1.5rem, 4vw + 0.5rem, 2.3rem);
font-weight: 800;
line-height: 1.2;
margin: 0 0 1.5rem 0;
letter-spacing: -1px;
color: var(--color-black);
text-align: left;
text-wrap: balance;
} .single-breadcrumbs-container {
width: 100%; margin-top: 20px;
margin-bottom: 0;
display: flex;
justify-content: flex-start; }
.single-breadcrumbs-container .rank-math-breadcrumb p {
justify-content: flex-start;
}
body {
margin: 0;
padding: 0;
font-family: var(--font-body);
background-color: var(--color-white);
color: var(--color-black);
overflow-x: hidden;
line-height: 1.6;
} h1, h2, h3 {
color: var(--color-black);
font-family: var(--font-main);
text-wrap: balance;
line-height: 1.2;
}
h4, h5, h6 {
color: var(--color-black);
font-family: var(--font-main);
text-wrap: balance;
} ul li::marker {
color: var(--color-primary);
}
body.menu-open {
overflow: hidden;
}
header {
background-color: var(--color-primary);
height: auto;
min-height: var(--header-height);
box-shadow: 0 2px 4px rgba(var(--color-primary-rgb), 0.1);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1200;
display: flex;
flex-direction: column;
align-items: center;
transition: transform 0.3s ease-in-out;
}
.top-bar-container {
width: 100%;
background-color: var(--color-secondary);
color: var(--color-black);
text-align: center;
padding: 8px 20px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.5px;
position: relative;
z-index: 1210;
box-sizing: border-box;
transition: all 0.5s ease;
overflow: hidden;
}
.top-bar-container.closed {
opacity: 0;
height: 0;
padding: 0;
pointer-events: none;
}
.close-top-bar {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
color: inherit;
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.6;
transition: opacity 0.2s, transform 0.2s;
z-index: 1220;
}
.close-top-bar:hover {
opacity: 1;
transform: translateY(-50%) scale(1.1);
}
.top-bar-container p {
margin: 0;
display: inline-block;
}
.top-bar-container a {
color: var(--color-primary);
text-decoration: underline;
font-weight: 700;
margin-left: 5px;
}
.top-bar-container a:hover {
color: var(--color-black);
text-decoration: none;
}
header.header-hidden {
transform: translateY(-100%);
}
.header-inner {
max-width: var(--container-width);
width: 100%;
min-height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 40px;
box-sizing: border-box;
flex-wrap: wrap;
}
.header-spacer {
height: var(--header-actual-height, var(--header-height));
transition: height 0.3s ease; } .left-section {
display: flex;
align-items: center;
order: 1;
}
.logo-link {
display: flex;
align-items: center;
text-decoration: none;
gap: 8px;
}
.logo-img {
height: 24px;
width: auto;
display: block;
max-width: 100%;
transition: height 0.3s ease;
} .right-section {
display: flex;
align-items: center;
gap: 0;
order: 3;
}
.menu-button {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
color: var(--color-white);
transition: opacity 0.2s;
flex-shrink: 0;
order: 2;
z-index: 1300;
background: none;
border: none;
padding: 0;
}
.hamburger-icon {
width: 30px;
height: 22px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.3s ease;
}
.hamburger-icon span {
display: block;
width: 100%;
height: 2.5px;
background-color: currentColor;
border-radius: 4px;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
.menu-open-active .hamburger-icon span:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
.menu-open-active .hamburger-icon span:nth-child(2) { opacity: 0; transform: translateX(-10px); }
.menu-open-active .hamburger-icon span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }
.menu-text {
font-family: var(--font-main);
font-weight: 700;
font-size: 18px;
letter-spacing: 0.5px;
text-transform: uppercase;
} .search-container {
display: flex;
align-items: center;
position: relative;
order: 2;
flex: 1;
max-width: 600px;
margin: 0 40px;
width: 100%;
box-sizing: border-box; }
.search-input-wrapper {
width: 100%;
display: flex;
align-items: center;
position: relative;
box-sizing: border-box;
}
.search-input {
width: 100%;
padding: 12px 50px 12px 20px;
border: 2px solid var(--color-secondary);
border-radius: 30px;
background: var(--color-white);
color: var(--color-black);
font-size: 16px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
box-sizing: border-box; }
.search-input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}
.internal-search-btn {
position: absolute;
right: 15px;
background: none;
border: none;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
color: var(--color-black);
}
.internal-search-btn:hover {
color: var(--color-complementary);
}
.search-trigger {
display: none;
} .search-suggestions {
position: absolute;
top: 100%;
left: 0;
width: 100%; background: #ffffff;
border: 1px solid rgba(var(--color-primary-rgb), 0.15);
border-radius: 8px;
box-shadow: 0 6px 16px rgba(var(--color-primary-rgb), 0.1);
z-index: 100;
margin-top: 8px;
display: none;
max-height: 300px;
overflow-y: auto;
text-align: left;
}
.search-suggestions.active {
display: block;
}
.suggestion-item {
padding: 12px 18px;
cursor: pointer;
font-size: 15px;
color: var(--color-black);
border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.1);
transition: background-color 0.1s ease;
}
.suggestion-item:last-child {
border-bottom: none;
}
.suggestion-item:hover {
background-color: var(--color-secondary);
color: var(--color-black);
}
.suggestion-match {
font-weight: 700;
} .menu-backdrop {
position: fixed;
top: var(--header-actual-height, var(--header-height));
left: 0;
width: 100%;
height: calc(100vh - var(--header-actual-height, var(--header-height)));
background: rgba(0, 0, 0, 0.3);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s;
z-index: 800;
}
.menu-backdrop.active { opacity: 1; visibility: visible; }
.menu-overlay {
position: fixed;
top: var(--header-actual-height, var(--header-height));
right: 0;
width: 450px; 
max-width: 100%;
height: calc(100vh - var(--header-actual-height, var(--header-height)));
background-color: var(--color-primary);
color: var(--color-white);
z-index: 900;
display: flex;
flex-direction: column;
padding: 0; 
box-sizing: border-box;
transform: translateX(100%); 
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto;
box-shadow: -5px 0 15px rgba(0,0,0,0.2);
}
.menu-overlay.active { transform: translateX(0); }
.menu-list { list-style: none; padding: 0; margin: 0; }
.menu-item { border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.menu-header-link {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 40px;
text-decoration: none;
color: var(--color-white);
font-weight: 800;
font-size: 1rem;
text-transform: uppercase;
cursor: pointer;
user-select: none;
font-family: var(--font-main);
}
.menu-header-link:hover { color: var(--color-secondary); }
.submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
background-color: #ce5164;
}
.menu-item.expanded .submenu { max-height: 1200px; }
.submenu-list { list-style: none; padding: 10px 40px 10px 40px; margin: 0; }
.submenu-item { padding: 12px 0; }
.submenu-link { text-decoration: none; color: var(--color-white); font-weight: 700; font-size: 17px; transition: color 0.2s; display: block; font-family: var(--font-main); }
.submenu-link:hover { color: var(--color-secondary); }
.icon-arrow { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.5; fill: none; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.menu-item.expanded .icon-arrow { transform: rotate(180deg); } .main-wrapper {
max-width: var(--container-width);
margin: 60px auto;
padding: 0 40px;
box-sizing: border-box;
}
.main-wrapper.with-sidebar {
display: grid;
grid-template-columns: 1fr 400px;
gap: 60px;
}
.article-content { min-width: 0; 
max-width: 100%;
}
.page-content {
min-width: 0;
max-width: 100%;
} .category-wrapper {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 30px;
display: block;
color: var(--color-primary);
}
.category-link {
color: var(--color-primary);
text-decoration: none;
transition: all 0.2s ease;
display: inline-block;
border-bottom: 2px solid transparent;
}
.category-link:hover {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
opacity: 0.8;
}
.article-intro {
font-size: 20px;
line-height: 1.6;
font-weight: 600;
color: var(--color-black);
margin-bottom: 40px;
} .article-facts { margin-top: 60px; line-height: 1.7; }
.article-facts h2 { font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; color: var(--color-black); }
.article-facts p { margin-bottom: 20px; font-size: 17px; } .article-content a:not(.article-card):not(.filter-btn):not(.category-pill):not(.breadcrumbs a):not(.hero-card) {
color: var(--color-link);
text-decoration: underline;
transition: color 0.2s ease;
}
.article-content a:not(.article-card):not(.filter-btn):not(.category-pill):not(.breadcrumbs a):not(.hero-card):hover {
color: var(--color-link-hover);
background-color: transparent;
text-decoration: underline;
} .entry-content a {
color: var(--color-link);
text-decoration: underline;
transition: color 0.2s ease;
}
.entry-content a:hover {
color: var(--color-link-hover);
background-color: transparent;
text-decoration: underline;
} .site-header a:not(.filter-btn):not(.category-pill),
.bg-secondary a {
color: var(--color-complementary);
}
.site-header a:not(.filter-btn):not(.category-pill):hover,
.bg-secondary a:hover {
color: var(--color-link-hover);
}
.meta-updated { margin-top: 60px; padding: 25px 0; border-top: 1px solid rgba(var(--color-primary-rgb), 0.1); border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.1); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-black); font-family: var(--font-main); }
.breadcrumbs { 
margin-top: 0; 
margin-bottom: 20px; padding-top: 0;
border-top: none;
font-size: 13px; 
color: var(--color-primary); 
display: flex;
align-items: center; flex-wrap: nowrap;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; -ms-overflow-style: none;  max-width: 100%;
width: 100%;
font-family: var(--font-main);
}
.breadcrumbs::-webkit-scrollbar { 
display: none; }
.breadcrumbs a { 
text-decoration: none; 
color: var(--color-primary); 
font-weight: 600;
opacity: 0.6;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
padding: 2px 6px;
margin: 0 -6px;
border-radius: 4px;
flex-shrink: 0; }
.breadcrumbs a:hover { 
opacity: 1;
background-color: var(--color-secondary);
color: var(--color-black);
transform: translateY(-1px);
}
.breadcrumbs .separator {
margin: 0 10px;
color: var(--color-black);
opacity: 0.5;
font-size: 14px;
flex-shrink: 0;
}
.breadcrumbs .current {
font-weight: 700;
color: var(--color-black);
opacity: 0.9;
flex-shrink: 0;
padding-right: 20px;
} .rank-math-breadcrumb { margin-top: 0;
margin-bottom: 20px;
width: 100%;
}
.rank-math-breadcrumb p {
margin: 0;
padding: 0;
font-size: 13px; 
color: var(--color-primary); 
display: flex;
align-items: center;
flex-wrap: nowrap;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
max-width: 100%;
width: 100%;
line-height: 1.5;
font-family: var(--font-main);
}
.rank-math-breadcrumb::-webkit-scrollbar, .rank-math-breadcrumb p::-webkit-scrollbar { 
display: none; 
}
.rank-math-breadcrumb a {
text-decoration: none; 
color: var(--color-primary); 
font-weight: 600;
opacity: 0.6;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
padding: 0px 2px;
margin: 0; border-radius: 0;
flex-shrink: 0;
}
.rank-math-breadcrumb .separator {
margin: 0 10px;
color: var(--color-black);
opacity: 0.5;
font-size: 14px;
flex-shrink: 0;
}
.rank-math-breadcrumb .last {
font-weight: 700;
color: var(--color-black);
opacity: 0.9;
flex-shrink: 0;
padding-right: 20px;
} .sidebar {
background-color: var(--color-white);
padding: 30px;
border-radius: 4px;
align-self: start;
position: -webkit-sticky;
position: sticky;
top: 120px;
}
.sidebar-title {
font-size: 14px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 25px;
border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.1);
padding-bottom: 10px;
display: block;
}
.sidebar-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 25px;
}
.sidebar-item {
display: grid;
grid-template-columns: 80px 1fr;
gap: 15px;
text-decoration: none;
color: inherit;
}
.sidebar-image {
width: 80px;
height: 80px;
background-color: var(--color-secondary);
border-radius: 4px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.sidebar-image svg { color: var(--color-black); opacity: 0.7; }
.sidebar-info .item-category {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 4px;
display: block;
}
.sidebar-info .item-title {
font-size: 16px;
font-weight: 800;
line-height: 1.3;
margin: 0;
}
.social-footer { margin-top: auto; padding: 40px; display: flex; gap: 20px; }
.social-icon { color: var(--primary-color); transition: color 0.2s, transform 0.2s; display: flex; align-items: center; justify-content: center; }
.social-icon:hover { color: var(--accent-red); transform: translateY(-3px); }
.social-icon svg { width: 28px; height: 28px; stroke: currentColor; stroke-width: 2; fill: none; } .site-footer {
background-color: var(--color-primary);
color: var(--color-white);
padding: 80px 0 40px 0;
margin-top: 80px;
}
.footer-inner {
max-width: var(--container-width);
width: 100%; margin: 0 auto;
padding: 0 40px;
box-sizing: border-box; }
.footer-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); gap: 40px;
margin-bottom: 60px;
}
.footer-col h3,
.footer-col .widget-title {
font-size: 16px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0 0 25px 0;
color: var(--color-white);
}
.footer-links,
.footer-col .widget ul,
.footer-col .widget ol {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-links .menu-item {
border-bottom: none;
}
.footer-links li a,
.footer-col .widget ul li a,
.footer-col .widget ol li a {
text-decoration: none;
color: var(--color-white);
font-size: 15px;
font-weight: 500;
transition: color 0.2s, transform 0.2s;
display: inline-block;
}
.footer-links li a:hover,
.footer-col .widget ul li a:hover,
.footer-col .widget ol li a:hover {
color: var(--color-secondary);
text-decoration: underline;
} .social-list-item a {
display: flex;
align-items: center;
gap: 10px;
}
.social-list-item svg {
width: 20px;
height: 20px;
fill: currentColor;
} .footer-social-icons {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.footer-social-icons li a {
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
transition: all 0.2s ease;
}
.footer-social-icons li a:hover {
color: var(--color-secondary);
transform: translateY(-3px);
}
.footer-social-icons svg {
width: 24px;
height: 24px;
}
.footer-copyright {
border-top: 1px solid rgba(255, 255, 255, 0.2);
padding-top: 30px;
text-align: center;
font-size: 12px;
color: rgba(255, 255, 255, 0.8);
opacity: 0.6;
font-weight: 500;
} .faq-section {
margin-top: 60px;
border-top: 1px solid rgba(var(--color-primary-rgb), 0.1);
padding-top: 50px;
}
.faq-section h2 {
font-size: 24px;
font-weight: 800;
text-transform: uppercase;
margin-bottom: 30px;
color: var(--color-black);
letter-spacing: 0.5px;
}
.faq-item {
border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.1);
}
.faq-item:last-child {
border-bottom: none;
}
.faq-summary {
padding: 22px 0;
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 700;
font-size: 18px;
color: var(--color-black);
transition: color 0.2s ease;
}
.faq-summary::-webkit-details-marker {
display: none;
}
.faq-summary:hover {
color: var(--color-primary);
}
.faq-answer {
padding-bottom: 25px;
line-height: 1.7;
font-size: 17px;
color: var(--color-black);
opacity: 0.9;
max-width: 90%;
}
.faq-icon {
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 2.5;
fill: none;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
color: inherit;
flex-shrink: 0;
}
details[open] .faq-icon {
transform: rotate(180deg);
color: var(--color-primary);
}
details[open] .faq-summary {
color: var(--color-primary);
}  .inspiration-header {
text-align: center;
font-size: 48px;
font-weight: 800;
line-height: 1.2;
margin: 0 0 40px 0;
letter-spacing: -1px;
color: var(--color-black);
} .filter-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-bottom: 60px;
}
.filter-btn, .category-pill { display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none; padding: 12px 24px;
border-radius: 50px; border: 1px solid var(--color-primary); font-family: var(--font-main);
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
color: var(--color-primary);
background-color: transparent;  cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.filter-btn:hover, .category-pill:hover {
border-color: var(--color-primary);
background-color: rgba(var(--color-primary-rgb), 0.05);
color: var(--color-primary);
transform: translateY(-1px);
}
.filter-btn.active, .category-pill.active {
background-color: var(--color-primary);
color: var(--color-white);
border-color: var(--color-primary);
} .hero-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 80px;
}
.hero-column {
display: flex;
flex-direction: column;
gap: 20px;
}
.hero-card {
position: relative;
display: block;
overflow: hidden;
text-decoration: none;
color: #ffffff !important; border: none !important; border-radius: 2px;
transition: opacity 0.2s ease; aspect-ratio: 16/9;
}
.hero-card:hover {
opacity: 0.85; } .hero-bg {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hero-content {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 30px;
box-sizing: border-box;
background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
z-index: 2;
}
.hero-content h2 {
font-size: 28px;
font-weight: 800;
margin: 0 0 10px 0;
line-height: 1.2;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
color: #ffffff !important; }
.hero-card.small .hero-content h2 {
font-size: 20px;
}
.read-more {
font-family: var(--font-main);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #ffffff !important;
border: none !important;
text-decoration: none !important;
}  .inspiration-section {
text-align: left;
margin: 60px auto 40px auto;
padding: 0 40px;
max-width: var(--container-width);
box-sizing: border-box;
}
.inspiration-content-wrapper {
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.inspiration-section h2, 
.inspiration-section .section-description { margin-left: 0;
margin-right: 0;
max-width: 100%;
}
.inspiration-section h2 {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
color: var(--color-black);
margin: 0 0 15px 0;
letter-spacing: -0.5px;
line-height: 1.2;
}
.section-description {
font-size: 1.125rem;
line-height: 1.6;
color: var(--color-black);
opacity: 0.85;
margin: 0 0 20px 0;
max-width: 700px;
} .article-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
margin-bottom: 80px;
}
.article-card {
display: flex;
flex-direction: column;
text-decoration: none; color: inherit; transition: opacity 0.2s ease; }
.article-card:hover {
opacity: 0.85; } .card-image-link, .card-image-wrapper {
display: block;
overflow: hidden;
margin-bottom: 20px;
aspect-ratio: 16/9;
border-radius: 2px;
}
.card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.card-body {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.card-title {
margin: 0 0 15px 0;
line-height: 1.3;
font-size: 20px;
font-weight: 800;
color: var(--color-black); }
.card-excerpt {
font-size: 16px;
line-height: 1.6;
color: var(--color-black);
margin: 0 0 20px 0;
opacity: 0.85;
flex-grow: 1;
}
.card-read-more {
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-primary);
text-decoration: none;
border-bottom: none !important; display: inline-block;
margin-bottom: 15px;
transition: color 0.2s;
pointer-events: none; }
.card-read-more:hover {
text-decoration: none; }
.card-category {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-primary);
display: block;
} @media (max-width: 1024px) {
.main-wrapper { margin: 40px auto; 
}
.main-wrapper.with-sidebar { grid-template-columns: 1fr; 
gap: 40px; 
}
.sidebar { width: auto; } .hero-grid { grid-template-columns: 1fr; }
.hero-column { flex-direction: row; }
.hero-card.large { height: 400px; }
.hero-card.small { height: 300px; } .article-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.footer-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 768px) {
:root { --header-height: 60px; }
.logo-img { height: 18px; }
.header-inner { 
padding: 1.15rem 0 .5rem 0; gap: 0;
}
.left-section {
padding-left: 0;
}
.right-section {
padding-right: 0;
order: 2;
}
.search-container {
order: 3;
width: 100%;
max-width: none;
flex: 0 0 100%; margin: 8px 0 0 0; padding: 10px 0; background-color: var(--bg-color); 
box-sizing: border-box; 
}
.search-input {
padding: 8px 40px 8px 15px; font-size: 14px; }
.internal-search-btn {
right: 12px;
}
.internal-search-btn svg {
width: 18px; height: 18px;
}
.menu-text { 
display: block; 
font-size: 13px; }
.menu-button {
gap: 8px; }
.hamburger-icon {
width: 24px; height: 18px;
} .menu-open-active .hamburger-icon span:nth-child(1) { transform: translateY(7.75px) rotate(45deg); }
.menu-open-active .hamburger-icon span:nth-child(2) { opacity: 0; transform: translateX(-10px); }
.menu-open-active .hamburger-icon span:nth-child(3) { transform: translateY(-7.75px) rotate(-45deg); }
.article-content h1 { font-size: 28px; } .main-wrapper { padding: 0 20px; } .single-featured-image {
width: calc(100% + 40px);
margin-left: -20px;
margin-right: -20px;
border-radius: 0;
}
.tool-grid { grid-template-columns: 1fr; gap: 20px; }
.ovulation-tool { padding: 30px 20px; } .inspiration-header { font-size: 28px; }  .hero-column { flex-direction: column; }
.hero-card.large, .hero-card.small { 
height: 300px;
flex: none; width: 100%;
} .article-grid { grid-template-columns: 1fr; } .hero-content h2 {
font-size: 22px; }
}
@media (max-width: 500px) {
.footer-grid { grid-template-columns: 1fr; }
} .hero-section {
width: 100%;
background-color: var(--color-primary); padding: 100px 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
color: var(--color-white); overflow: hidden; }
.hero-container {
max-width: var(--container-width);
width: 100%;
margin: 0 auto; box-sizing: border-box;
display: block; position: relative; }
.hero-text-content {
text-align: left;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 800px; width: 100%; margin-left: 0;
margin-right: auto;
position: relative;
z-index: 2; }
.hero-title {
font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
font-weight: 800;
line-height: 1.1;
margin: 0 0 20px 0;
color: var(--color-white); letter-spacing: -1px;
text-shadow: none;
}
.hero-subtitle {
font-family: var(--font-main);
color: rgba(255, 255, 255, 0.9); font-size: 1.5rem;
font-weight: 700;
display: block;
margin-bottom: 10px;
line-height: 1.4;
letter-spacing: 0.5px;
}
.hero-description {
font-size: 1.2rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.9); margin-bottom: 40px;
max-width: 90%;
} .hero-section .rank-math-breadcrumb,
.hero-section .breadcrumbs,
.hero-section .pillar-breadcrumbs,
.hero-section #breadcrumbs {
color: var(--color-white);
margin-bottom: 20px;
}
.hero-section .rank-math-breadcrumb p,
.hero-section .rank-math-breadcrumb a,
.hero-section .rank-math-breadcrumb span,
.hero-section .rank-math-breadcrumb .separator,
.hero-section .rank-math-breadcrumb .last,
.hero-section .breadcrumbs a,
.hero-section .breadcrumbs .separator,
.hero-section .breadcrumbs .current,
.hero-section .pillar-breadcrumbs p,
.hero-section .pillar-breadcrumbs a,
.hero-section .pillar-breadcrumbs span,
.hero-section #breadcrumbs a,
.hero-section #breadcrumbs span {
color: var(--color-white);
opacity: 0.9;
}
.hero-section .rank-math-breadcrumb a:hover,
.hero-section .breadcrumbs a:hover,
.hero-section .pillar-breadcrumbs a:hover,
.hero-section #breadcrumbs a:hover {
color: var(--color-white);
opacity: 1;
background-color: rgba(255, 255, 255, 0.2);
} .hero-quick-links {
display: flex;
flex-wrap: wrap;
gap: 15px; margin-top: 30px;
width: 100%;
max-width: 100%; position: relative;
z-index: 2; }
.quick-link-box {
display: flex;
align-items: center;
background-color: var(--color-white);
color: var(--color-black); padding: 10px 14px; text-decoration: none;
border-radius: 14px; font-weight: 700;
font-size: 0.95rem; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);   flex: 0 0 calc((100% - 45px) / 4);
max-width: calc((100% - 45px) / 4);
min-height: 60px; position: relative;
border: 1px solid rgba(0,0,0,0.03); justify-content: space-between; box-sizing: border-box;
}
.quick-link-box:hover {
transform: translateY(-4px);
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12);
border-color: rgba(0,0,0,0.08);
} .quick-link-icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
background-color: #fff0f3; border-radius: 10px;
margin-right: 12px;
flex-shrink: 0;
}
.quick-link-icon {
width: 20px; height: 20px;
object-fit: contain;
}
.quick-link-text {
flex-grow: 1;
text-align: left;
margin-right: 8px;
line-height: 1.2;
font-weight: 700; color: var(--color-black);
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.quick-link-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 28px; height: 28px;
background-color: #fff0f3; border-radius: 50%;
color: var(--color-primary); transition: background 0.3s, color 0.3s;
flex-shrink: 0;
}
.quick-link-arrow svg {
width: 16px;
height: 16px;
stroke-width: 2.5px; } .quick-link-box:hover .quick-link-arrow {
background-color: var(--color-secondary);
}
@media (max-width: 1100px) {
.quick-link-box { flex: 0 0 calc((100% - 15px) / 2);
max-width: calc((100% - 15px) / 2);
}
}
@media (max-width: 600px) {
.quick-link-box { flex: 0 0 100%;
max-width: 100%;
}
}
.hero-image-wrapper {
position: absolute;
right: -50px; top: 50%;
transform: translateY(-50%);
width: 45%; height: 100%; z-index: 1;
pointer-events: none; display: flex;
align-items: center;
justify-content: center;
}
.hero-image {
width: 100%;
height: auto;
max-height: 100%; object-fit: contain;
display: block;
border-radius: 0;
opacity: .85;
}
@media (max-width: 900px) {
.hero-section {
padding: 60px 0;
}
.hero-container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.hero-text-content {
max-width: 100%;
text-align: center;
align-items: center;
margin-bottom: 40px;
}
.hero-image-wrapper {
position: relative;
right: auto;
top: auto;
transform: none;
width: 80%;
max-width: 300px;
margin-top: 20px;
order: -1; display: none; }
.hero-quick-links {
justify-content: center;
}
}
.intro-section {
max-width: 1400px;
margin: 80px auto; padding-left: max(20px, env(safe-area-inset-left));
padding-right: max(20px, env(safe-area-inset-right));
text-align: left;
box-sizing: border-box;
}
.intro-section .entry-content {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.intro-section h2 {
font-size: 42px;
margin-bottom: 25px;
font-weight: 800;
color: var(--color-black);
letter-spacing: 1px;
line-height: 1.2;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.intro-section .entry-content p:first-of-type {
font-weight: 400;
} .intro-section .entry-content > p:first-of-type {
font-family: var(--font-body);
}
.image-grid-section {
max-width: 1400px; margin: 0 auto 80px auto;
padding: 0 40px; box-sizing: border-box; display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.image-card {
display: block;
width: 100%;
text-decoration: none;
overflow: hidden;
border-radius: 4px; transition: transform 0.3s ease;
}
.image-card:hover {
transform: scale(1.02);
}
.image-card img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.inspiration-grid {
max-width: 1400px;
margin: 0 auto 80px auto;
padding: 0 40px;
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.inspiration-card {
aspect-ratio: 16/9;
height: auto;
}
.view-all-container {
text-align: center;
margin-bottom: 80px;
}
.view-all-link { display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 12px 30px;
border-radius: 50px;
border: 1px solid var(--color-primary);
font-family: var(--font-main);
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-primary);
background-color: transparent;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.view-all-link:hover {
background-color: var(--color-primary);
color: var(--color-white);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(189, 40, 72, 0.15);
}
@media (max-width: 1024px) {
.inspiration-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.hero-subtitle {
font-size: 1rem;
letter-spacing: 2px;
}
.intro-section h2, .intro-section .entry-content h2 {
font-size: 26px; }
.image-grid-section {
grid-template-columns: 1fr;
padding: 0 20px; }
.inspiration-grid {
grid-template-columns: 1fr;
padding: 0 20px;
}
.inspiration-card {
height: auto;
}
}
@media (max-width: 480px) {
.intro-section h2, .intro-section .entry-content h2 {
font-size: 22px; }
.intro-section p {
font-size: 16px;
} .hero-quick-links {
gap: 10px;
}
.quick-link-box {
padding: 12px 10px;
font-size: 0.9rem;
min-height: 50px;
}
} .main-wrapper-home {
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}  .page-hero-wrapper {
max-width: 1010px;
width: 100%;
margin: 0 auto 30px auto;
}
.page-hero-image {
width: 100%;
height: auto;
border-radius: 2px;
margin-bottom: 30px;
display: block;
}
.content-centered-narrow {
max-width: 800px; margin: 0 auto;
box-sizing: border-box;
} .clinics-section {
text-align: center;
margin-bottom: 80px;
}
.clinics-header {
font-size: 36px;
font-weight: 800;
color: var(--color-black);
margin-bottom: 15px;
letter-spacing: 1px;
margin-top: 0;
line-height: 1.2;
}
.clinics-subtitle {
font-size: 18px;
color: var(--color-black);
max-width: 700px;
margin: 0 auto 40px auto;
line-height: 1.5;
font-weight: 500;
} .city-filter-container {
max-width: 400px;
margin: 0 auto 60px auto;
position: relative;
text-align: left;
}
.city-select-wrapper {
position: relative;
} .city-select-button {
width: 100%;
padding: 15px 20px;
background-color: #fff;
border: 2px solid var(--color-primary);
border-radius: 4px;
font-size: 16px;
font-weight: 600;
color: var(--color-black);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
}
.city-select-button:hover {
background-color: #f9f9f9;
}
.city-dropdown-menu {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: #fff;
border: 1px solid rgba(var(--color-primary-rgb), 0.2);
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
z-index: 100;
margin-top: 8px;
display: none;
overflow: hidden;
}
.city-dropdown-menu.active {
display: block;
}
.city-search-box {
padding: 10px;
border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.1);
background: #f9f9f9;
}
.city-search-input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
box-sizing: border-box;
outline: none;
}
.city-search-input:focus {
border-color: var(--color-primary);
}
.city-options-list {
max-height: 250px;
overflow-y: auto;
}
.city-option {
padding: 12px 20px;
cursor: pointer;
transition: background 0.2s;
font-size: 15px;
color: var(--color-black);
}
.city-option:hover {
background-color: var(--color-white);
color: var(--color-secondary);
}
.city-option.selected {
background-color: var(--color-primary);
color: #fff;
} .resellers-grid {
display: flex;
flex-direction: column;
gap: 40px;
text-align: left;
max-width: 700px;
margin: 0 auto;
}
.city-group {
margin-bottom: 30px;
scroll-margin-top: 120px; }
.column-header {
font-size: 20px;
font-weight: 800;
text-transform: uppercase;
color: var(--color-black);
border-bottom: 2px solid var(--color-secondary);
padding-bottom: 8px;
margin-bottom: 20px;
letter-spacing: 1px;
display: inline-block;
}
.clinic-list {
list-style: none;
padding: 0;
margin: 0;
}
.clinic-list li {
margin-bottom: 15px;
line-height: 1.6;
padding-bottom: 15px;
border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.1); }
.clinic-list li:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
} .article-content a.clinic-link:not(.article-card) {
text-decoration: none;
color: var(--color-primary);
display: block; 
transition: opacity 0.2s ease;
border-bottom: none; padding-bottom: 0;
}
.article-content a.clinic-link:not(.article-card):hover {
background-color: transparent !important; color: var(--color-primary) !important; border-radius: 0;
opacity: 0.7; }
.clinic-name {
font-weight: 700;
font-size: 17px;
display: block; color: var(--color-black);
margin-bottom: 4px;
}
.clinic-desc {
font-weight: 400;
font-size: 15px;
color: var(--color-black);
opacity: 0.85;
display: block; }
@media (max-width: 768px) {
.clinics-header { font-size: 28px; }
.clinics-subtitle { margin-bottom: 40px; }
.city-filter-container {
box-sizing: border-box;
max-width: 100%;
}
}   .contact-info-section {
margin-bottom: 40px;
font-size: 17px;
line-height: 1.6;
color: var(--color-black);
}
.contact-label {
font-weight: 800;
text-transform: uppercase;
font-size: 14px;
margin-bottom: 5px;
display: block;
color: var(--color-primary);
}
.contact-value {
margin-bottom: 25px;
display: block;
}
.contact-value a {
color: var(--color-primary);
text-decoration: underline;
}
.section-header {
font-size: 16px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 40px;
margin-bottom: 15px;
color: var(--color-black);
}    .entry-content {
margin-top: 30px; 
line-height: 1.6;
font-size: clamp(1rem, 2vw + 0.1rem, 1.25rem); 
color: var(--color-black);
}
.entry-content p {
margin-bottom: 20px;
font-size: clamp(1rem, 2vw + 0.1rem, 1.25rem);
} .entry-content h2 {
font-size: clamp(1.2rem, 3vw + 0.5rem, 1.6rem); 
font-weight: 800;
letter-spacing: 1px;
margin-top: 40px;
margin-bottom: 20px;
color: var(--color-black);
line-height: 1.2;
}
.entry-content h3 {
font-size: clamp(1.2rem, 3vw + 0.5rem, 1.6rem);
font-weight: 800;
color: var(--color-black);
margin-top: 30px;
margin-bottom: 15px;
line-height: 1.2;
}
.entry-content h4, .entry-content h5, .entry-content h6 {
font-weight: 700;
color: var(--color-black);
margin-top: 25px;
margin-bottom: 10px;
} .entry-content > p:first-of-type {
font-family: var(--font-main);
font-size: clamp(1.1rem, 2vw + 0.5rem, 1.4rem); 
line-height: 1.6;
font-weight: 600;
color: var(--color-black);
margin-bottom: 40px;
} .entry-content ul, .entry-content ol {
margin-bottom: 20px;
padding-left: 20px;
}
.entry-content li {
margin-bottom: 10px;
}
.entry-content ul {
list-style-type: disc;
}
.entry-content ol {
list-style-type: decimal;
} .entry-content blockquote {
border-left: 4px solid var(--color-secondary);
padding-left: 20px;
margin: 30px 0;
font-style: italic;
color: var(--color-black);
font-size: 18px;
} .hero-bg-img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 1;
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hero-card:hover .hero-bg-img {
transform: scale(1.05);
} .hero-content {
z-index: 2;
}  .intro-section .entry-content h2 {
font-size: 42px;
margin-bottom: 25px;
font-weight: 800;
color: var(--color-black);
letter-spacing: 1px;
line-height: 1.2;
margin-top: 0; } .intro-section .entry-content h3 {
font-size: 28px;
margin-bottom: 20px;
font-weight: 800;
color: var(--color-black);
letter-spacing: 1px;
line-height: 1.2;
margin-top: 30px; } .intro-section .entry-content h2:not(:first-child) {
margin-top: 40px;
}  img, video, iframe, canvas, svg {
max-width: 100%;
height: auto;
} body {
overflow-wrap: break-word;
word-wrap: break-word; } .main-wrapper, .header-inner, .site-footer .footer-inner, .hero-container {
padding-left: max(20px, env(safe-area-inset-left));
padding-right: max(20px, env(safe-area-inset-right));
}
@media (min-width: 768px) {
.main-wrapper, .header-inner, .site-footer .footer-inner, .hero-container {
padding-left: max(40px, env(safe-area-inset-left));
padding-right: max(40px, env(safe-area-inset-right));
}
} h1, h2, h3, h4, h5, h6 {
text-wrap: balance; } .hero-text-overlay h1 {
font-size: clamp(2.5rem, 6vw + 1rem, 5rem); }
.intro-section h2 {
font-size: clamp(1.75rem, 4vw + 1rem, 2.625rem); }
.inspiration-header {
font-size: clamp(2rem, 5vw + 1rem, 3rem); } p {
text-wrap: pretty; } @media (max-width: 768px) {
.hero-text-overlay {
padding: 20px;
width: 100%;
box-sizing: border-box;
}
} .article-tags {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-top: 40px;
margin-bottom: 30px;
display: block;
}
.tag-link {
color: var(--color-primary);
text-decoration: none;
transition: all 0.2s ease;
display: inline-block;
border-bottom: 2px solid transparent;
}
.tag-link:hover {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
opacity: 0.8;
} @media (max-width: 768px) {
.hero-text-overlay h1 {
font-size: 2rem !important; }
.intro-section h2, 
.intro-section .entry-content h2 {
font-size: 26px !important;
}
.inspiration-header {
font-size: 28px !important;
}
.hero-content h2 {
font-size: 22px !important;
}
}
@media (max-width: 480px) {
.hero-text-overlay h1 {
font-size: 1.75rem !important; }
.intro-section h2, 
.intro-section .entry-content h2 {
font-size: 22px !important;
}
.intro-section p {
font-size: 16px;
}
} .article-references {
margin-top: 60px;
padding-top: 40px;
border-top: 1px solid rgba(var(--color-primary-rgb), 0.1);
font-size: 0.95em;
color: var(--color-black);
}
.article-references h3 {
font-size: 18px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 20px;
color: var(--color-black);
}
.article-references ol {
list-style: none;
padding: 0;
margin: 0;
counter-reset: references-counter;
font-size: 80%;
}
.article-references li {
position: relative;
padding-left: 30px;
margin-bottom: 12px;
line-height: 1.5; scroll-margin-top: calc(var(--header-height) + 40px);
}
.article-references li::before {
counter-increment: references-counter;
content: counter(references-counter) ".";
position: absolute;
left: 0;
top: 0;
font-weight: 700;
color: var(--color-primary);
}
.reference-text {
display: inline;
}
.ref-icon {
width: 1em;
height: 1em;
stroke: currentColor; flex-shrink: 0;
} sup.reference {
line-height: 0;
position: relative;
vertical-align: baseline;
top: -0.5em;
margin-left: 0; scroll-margin-top: calc(var(--header-height) + 40px);
font-size: 80%;
}
sup.reference a {
text-decoration: none;
color: var(--color-primary);
font-weight: 700;
padding: 0 2px;
border-bottom: none !important; transition: color 0.2s;
}
sup.reference a:hover {
color: var(--color-secondary);
background-color: transparent !important;
} a.reference-link {
text-decoration: none;
color: var(--color-primary);
border-bottom: 1px dotted var(--color-primary) !important;
font-weight: 500;
transition: all 0.2s ease; scroll-margin-top: calc(var(--header-height) + 40px);
display: inline-block; }
a.reference-link:hover {
color: var(--color-secondary);
border-bottom-color: var(--color-secondary) !important;
background-color: transparent !important;
} :target {
animation: highlight-reference 2s ease-out;
}
@keyframes highlight-reference {
0% { background-color: rgba(var(--color-primary-rgb), 0.1); }
100% { background-color: transparent; }
}  .entry-content img,
.page-content img,
.entry-content figure,
.page-content figure {
max-width: 100%;
height: auto;
} .wp-caption {
width: 100% !important;
max-width: 100%;
} .entry-content figure,
.page-content figure,
.wp-caption {
margin: 30px 0;
display: block;
} .entry-content figcaption,
.page-content figcaption,
.entry-content .wp-caption-text,
.page-content .wp-caption-text,
.wp-caption-text {
font-family: var(--font-main);
font-size: 14px;
color: var(--color-black);
opacity: 0.7;
text-align: center;
margin-top: 12px;
font-style: italic;
line-height: 1.5;
display: block;
margin-bottom: 0; } .aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.alignleft {
float: left;
margin-right: 30px;
margin-bottom: 30px;
max-width: 50%;
}
.alignright {
float: right;
margin-left: 30px;
margin-bottom: 30px;
max-width: 50%;
} .entry-content::after,
.page-content::after {
content: "";
display: table;
clear: both;
}
@media (max-width: 768px) {
.alignleft, .alignright {
float: none;
margin: 20px auto;
max-width: 100%;
display: block;
}
} .category-section {
max-width: 1400px;
margin: 60px auto; padding-left: max(20px, env(safe-area-inset-left));
padding-right: max(20px, env(safe-area-inset-right));
box-sizing: border-box;
text-align: left; }
.category-section h2 {
font-size: clamp(2rem, 3vw, 2.5rem);
font-weight: 800;
margin-bottom: 15px;
color: var(--color-black);
line-height: 1.3;
max-width: 800px; margin-left: auto; margin-right: auto; text-wrap: balance;
}
.category-description {
font-size: 1.125rem;
line-height: 1.6;
color: var(--color-black);
max-width: 800px; margin: 0 auto 40px auto; opacity: 0.85;
} .category-section .filter-buttons {
justify-content: flex-start; gap: 15px;
flex-wrap: wrap;
max-width: 800px; margin-left: auto; margin-right: auto; }
.filter-btn, .category-pill { display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
gap: 8px;  padding: 12px 24px;
border-radius: 50px; border: 1px solid rgba(var(--color-primary-rgb), 0.2); font-family: var(--font-main);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.5px;
color: var(--color-primary);
background-color: transparent; cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.filter-btn:hover, .category-pill:hover {
border-color: var(--color-primary);
background-color: var(--color-primary);
color: var(--color-white);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(189, 40, 72, 0.15);
}
.category-count {
font-size: 11px;
background-color: rgba(var(--color-primary-rgb), 0.1);
color: var(--color-primary);
padding: 2px 8px;
border-radius: 10px;
font-weight: 800;
transition: all 0.2s ease;
}
.filter-btn:hover .category-count, .category-pill:hover .category-count {
background-color: var(--color-white);
color: var(--color-primary);
}
@media (max-width: 768px) {
.category-section {
padding: 0 20px;
margin-bottom: 60px;
}
.category-section h2 {
font-size: 26px;
}
} .archive-hero {
text-align: left;
margin-bottom: 60px;
padding-bottom: 40px;
border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.1);
}
.archive-header-content {
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.archive-title {
font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem); font-weight: 800;
line-height: 1.1;
margin: 10px 0 25px 0;
letter-spacing: -1px;
color: var(--color-black); text-align: left;
}
.archive-description {
font-size: 1.1rem;
line-height: 1.6;
color: var(--color-black);
opacity: 0.85;
margin: 0 0 30px 0;
text-align: left;
} .archive-hero #breadcrumbs-wrapper {
margin-bottom: 10px;
} .filter-buttons {
justify-content: flex-start; } .video-section-container {
display: flex;
flex-direction: row;
background-color: var(--color-secondary);
border-radius: 8px;
overflow: hidden;
margin: 40px 0;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.video-wrapper {
flex: 1;
position: relative;
min-height: 300px;
background-color: #000;
}
.video-overlay-image {
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
display: block;
position: absolute;
top: 0;
left: 0;
}
.video-play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background: rgba(0,0,0,0.6);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
pointer-events: none; transition: background 0.3s, transform 0.2s;
z-index: 5;
}
.video-wrapper:hover .video-play-button {
background: rgba(var(--color-primary-rgb), 0.9);
transform: translate(-50%, -50%) scale(1.1);
} .video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.video-content {
flex: 1;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.video-content h3 {
font-size: 24px;
font-weight: 800;
margin-top: 0;
margin-bottom: 15px;
color: var(--color-primary);
line-height: 1.2;
}
.video-content p {
font-size: 16px;
line-height: 1.6;
margin-bottom: 25px;
color: var(--color-black);
}
.video-link {
font-weight: 700;
text-transform: uppercase;
color: var(--color-link);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
width: fit-content;
}
.video-link:hover {
color: var(--color-link-hover);
text-decoration: underline;
}
@media (max-width: 768px) {
.video-section-container {
flex-direction: column;
}
.video-wrapper {
min-height: 250px;
flex: none; width: 100%;
aspect-ratio: 16/9;
}
.video-content {
padding: 30px 20px;
}
} .lightbox-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
z-index: 2000;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
padding: 40px;
box-sizing: border-box;
}
.lightbox-overlay.active {
opacity: 1;
visibility: visible;
}
.lightbox-content {
position: relative;
max-width: 100%;
max-height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.lightbox-image {
max-width: 90vw;
max-height: 90vh;
object-fit: contain;
border-radius: 4px;
box-shadow: 0 5px 25px rgba(0,0,0,0.5);
transform: scale(0.95);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.lightbox-overlay.active .lightbox-image {
transform: scale(1);
}
.lightbox-close {
position: absolute;
top: 20px;
right: 20px;
background: rgba(255, 255, 255, 0.1);
border: none;
color: #ffffff;
cursor: pointer;
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, transform 0.2s;
z-index: 2010;
}
.lightbox-close:hover {
background: rgba(255, 255, 255, 0.25);
transform: scale(1.1);
}
.lightbox-close svg {
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 2.5;
}
body.lightbox-open {
overflow: hidden;
} .entry-content img.lightbox-trigger {
cursor: zoom-in;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.entry-content img.lightbox-trigger:hover {
opacity: 0.9;
transform: scale(1.01);
}  .hero-text-content .pillar-meta {
justify-content: flex-start; margin-bottom: 20px;
padding-left: 0;
}
.pillar-intro p {
font-size: clamp(1rem, 1.2vw + 0.5rem, 1.25rem);
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
font-family: var(--font-main);
font-weight: 500;
margin-top: 0;
}
.pillar-intro {
font-size: clamp(1rem, 1.2vw + 0.5rem, 1.25rem);
} .pillar-feature-block {
display: flex;
align-items: center;
background-color: var(--color-secondary);
color: var(--color-black);
padding: 40px;
border-radius: 12px;
margin-bottom: 80px;
gap: 40px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.feature-title {
font-size: 2rem;
margin-bottom: 15px;
color: var(--color-primary);
font-weight: 800;
}
.feature-desc {
font-size: 1.1rem;
margin-bottom: 25px;
}
.btn-feature {
display: inline-block;
background-color: var(--color-primary);
color: var(--color-white);
padding: 12px 25px;
border-radius: 6px;
text-decoration: none;
font-weight: 700;
transition: background 0.3s;
}
.btn-feature:hover {
background-color: var(--color-complementary);
color: var(--color-white);
}
.feature-icon svg {
width: 120px;
height: 120px;
opacity: 0.8;
}
@media (max-width: 768px) {
.pillar-feature-block {
flex-direction: column;
text-align: center;
padding: 30px;
}
.feature-icon svg {
width: 80px;
height: 80px;
}
} .text-only-card {
padding: 30px;
background-color: var(--color-white);
border: 1px solid rgba(var(--color-primary-rgb), 0.1);
border-radius: 8px;
transition: all 0.3s ease;
height: 100%;
box-sizing: border-box;
justify-content: center; justify-content: flex-start;
}
.text-only-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.05);
border-color: var(--color-primary);
opacity: 1; }
.text-only-card .card-title {
font-size: 1.5rem;
margin-bottom: 15px;
color: var(--color-primary);
}
.text-only-card .card-excerpt {
color: var(--color-text-main);
margin-bottom: 20px;
}
.text-only-card .card-read-more {
margin-top: auto; font-weight: 700;
color: var(--color-link);
} .section-divider {
text-align: center;
margin: 60px 0 40px 0;
}
.section-divider h2 {
font-size: 24px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-black);
margin: 0;
}
@media (max-width: 900px) {
body.archive .hero-container {
display: block;
text-align: left;
}
body.archive .hero-text-content {
text-align: left;
align-items: flex-start;
}
body.archive .hero-quick-links {
justify-content: flex-start;
}
body.archive .pillar-breadcrumbs,
body.archive .pillar-breadcrumbs p {
text-align: left;
justify-content: flex-start;
}
} .horizontal-scroll-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 30px;
border-radius: 8px;
border: 1px solid rgba(var(--color-primary-rgb), 0.1);
box-shadow: 0 4px 12px rgba(0,0,0,0.03);
background-color: var(--color-white);
}
.horizontal-scroll-wrapper table {
width: 100%;
min-width: 600px; border-collapse: collapse;
font-family: var(--font-body);
color: var(--color-black);
}
.horizontal-scroll-wrapper thead th {
background-color: var(--color-secondary);
color: var(--color-black);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 13px;
padding: 18px 20px;
text-align: left;
border-bottom: 2px solid rgba(var(--color-primary-rgb), 0.2);
white-space: nowrap; }
.horizontal-scroll-wrapper tbody td {
padding: 16px 20px;
font-size: 15px;
line-height: 1.5;
border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.08);
vertical-align: top;
transition: background-color 0.2s ease;
}
.horizontal-scroll-wrapper tbody tr:last-child td {
border-bottom: none;
}
.horizontal-scroll-wrapper tbody tr:hover td {
background-color: rgba(var(--color-secondary-rgb), 0.5);
} .horizontal-scroll-wrapper tbody td:first-child {
font-weight: 700;
color: var(--color-primary); } @media (max-width: 768px) {
.horizontal-scroll-wrapper {
margin-left: -20px;
width: calc(100% + 40px);
border-radius: 0;
border-left: none;
border-right: none;
}
.horizontal-scroll-wrapper table {
padding: 0 20px; }
.horizontal-scroll-wrapper thead th:first-child,
.horizontal-scroll-wrapper tbody td:first-child {
padding-left: 20px;
}
.horizontal-scroll-wrapper thead th:last-child,
.horizontal-scroll-wrapper tbody td:last-child {
padding-right: 20px;
}
} .article-toc {
background-color: var(--color-secondary);
border-radius: 4px;
padding: 12px 16px;
margin-bottom: 30px;
border: 1px solid rgba(var(--color-primary-rgb), 0.15);
font-family: var(--font-main);
}
.toc-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 10px;
padding-bottom: 10px;
cursor: pointer;
}
.toc-title {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-black);
margin: 0;
}
.toc-toggle {
background: none;
border: none;
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
transition: transform 0.3s ease;
}
.toc-toggle .toc-icon {
width: 8px;
height: 8px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 0.3s ease;
margin-top: -3px; } .article-toc[data-open="true"] .toc-toggle .toc-icon {
transform: rotate(225deg);
margin-top: 3px;
} .article-toc[data-open="false"] .toc-toggle .toc-icon {
transform: rotate(45deg);
margin-top: -3px;
} .toc-content-wrapper {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.2s ease-out;
overflow: hidden;
row-gap: 0;
height: 0;
}
.article-toc[data-open="true"] .toc-content-wrapper {
grid-template-rows: 1fr;
height: auto;
}
.toc-list {
list-style: none;
padding: 0;
margin: 0;
overflow: hidden; min-height: 0; } .toc-item {
margin-bottom: 6px;
line-height: 1.3;
}
.toc-item:last-child {
margin-bottom: 0;
}
.toc-link {
text-decoration: none;
color: var(--color-black);
font-size: 14px;
font-weight: 600;
transition: color 0.2s ease;
display: block;
border-bottom: 1px solid transparent; }
.toc-link:hover,
.toc-link.active {
color: var(--color-primary);
text-decoration: none;
background-color: transparent;
} .toc-level-3 {
padding-left: 20px;
font-size: 14px;
font-weight: 500;
}
.toc-sub-list {
list-style: none;
padding: 0;
margin: 8px 0;
} @media (min-width: 1024px) {
.article-toc {
float: none;
max-width: 100%;
margin-left: 0;
margin-bottom: 30px;
position: static;  }
} .entry-content::after {
content: "";
display: table;
clear: both;
}