*,
*::before,
*::after {
box-sizing: border-box;
}
html {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
}
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
body {
min-height: 100vh;
}
img,
svg {
display: block;
max-width: 100%;
height: auto;
}
button,
input,
select,
textarea {
font: inherit;
}
a {
color: inherit;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
:root {
--pc-color-primary: #16803c;
--pc-color-primary-dark: #0f6630;
--pc-color-primary-soft: #e8f6ee;
--pc-color-background: #f7f9f8;
--pc-color-surface: #ffffff;
--pc-color-surface-alt: #f1f6f3;
--pc-color-text: #111827;
--pc-color-muted: #667085;
--pc-color-border: #d9e1dd;
--pc-color-warning: #d97706;
--pc-color-success: #16803c;
--pc-color-footer: #0b4f2a;
--pc-color-footer-text: #ffffff;
--pc-shadow-soft: 0 12px 32px rgba(17, 24, 39, 0.08);
--pc-shadow-card: 0 18px 45px rgba(17, 24, 39, 0.1);
--pc-font-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--pc-radius: 14px;
--pc-space-1: 0.25rem;
--pc-space-2: 0.5rem;
--pc-space-3: 0.75rem;
--pc-space-4: 1rem;
--pc-space-5: 1.5rem;
--pc-space-6: 2rem;
--pc-container: 1120px;
--pc-container-narrow: 760px;
color-scheme: light;
}
html[data-theme="dark"] {
--pc-color-primary: #34d16f;
--pc-color-primary-dark: #86efac;
--pc-color-primary-soft: #11351f;
--pc-color-background: #07110c;
--pc-color-surface: #101c15;
--pc-color-surface-alt: #15261c;
--pc-color-text: #f3faf5;
--pc-color-muted: #a9b8ae;
--pc-color-border: #294234;
--pc-color-warning: #fbbf24;
--pc-color-success: #34d16f;
--pc-color-footer: #06140c;
--pc-color-footer-text: #f3faf5;
--pc-shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.28);
--pc-shadow-card: 0 22px 54px rgba(0, 0, 0, 0.36);
color-scheme: dark;
}
html[data-accent="blue"] {
--pc-color-primary: #2563eb;
--pc-color-primary-dark: #1d4ed8;
--pc-color-primary-soft: #e8f0ff;
--pc-color-success: #2563eb;
}
html[data-accent="purple"] {
--pc-color-primary: #7c3aed;
--pc-color-primary-dark: #6d28d9;
--pc-color-primary-soft: #f1eaff;
--pc-color-success: #7c3aed;
}
html[data-accent="orange"] {
--pc-color-primary: #ea580c;
--pc-color-primary-dark: #c2410c;
--pc-color-primary-soft: #fff1e8;
--pc-color-success: #ea580c;
}
html[data-accent="red"] {
--pc-color-primary: #dc2626;
--pc-color-primary-dark: #b91c1c;
--pc-color-primary-soft: #ffeaea;
--pc-color-success: #dc2626;
}
html[data-theme="dark"][data-accent="blue"] {
--pc-color-primary: #60a5fa;
--pc-color-primary-dark: #93c5fd;
--pc-color-primary-soft: #10233f;
}
html[data-theme="dark"][data-accent="purple"] {
--pc-color-primary: #c084fc;
--pc-color-primary-dark: #d8b4fe;
--pc-color-primary-soft: #29153d;
}
html[data-theme="dark"][data-accent="orange"] {
--pc-color-primary: #fb923c;
--pc-color-primary-dark: #fdba74;
--pc-color-primary-soft: #3a1d0f;
}
html[data-theme="dark"][data-accent="red"] {
--pc-color-primary: #f87171;
--pc-color-primary-dark: #fca5a5;
--pc-color-primary-soft: #3b1115;
}
body {
background: var(--pc-color-background);
color: var(--pc-color-text);
font-family: var(--pc-font-base);
font-size: 1rem;
transition: background-color 0.2s ease, color 0.2s ease;
}
h1,
h2,
h3,
h4 {
color: var(--pc-color-text);
font-weight: 700;
line-height: 1.2;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
}
h3 {
font-size: 1.25rem;
}
p {
margin-bottom: var(--pc-space-4);
}
.pc-container,
.pc-container-narrow {
width: min(100% - 2rem, var(--pc-container));
margin-inline: auto;
}
.pc-container-narrow {
width: min(100% - 2rem, var(--pc-container-narrow));
}
.pc-section {
padding-block: var(--pc-space-6);
}
.pc-grid {
display: grid;
gap: var(--pc-space-5);
}
.pc-grid-2,
.pc-grid-3,
.pc-grid-4 {
grid-template-columns: 1fr;
}
.pc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.5rem;
padding: 0.55rem 0.9rem;
border: 1px solid transparent;
border-radius: var(--pc-radius);
font-weight: 600;
line-height: 1;
text-decoration: none;
cursor: pointer;
}
.pc-btn-primary {
background: var(--pc-color-primary);
color: #ffffff;
}
.pc-btn-primary:hover,
.pc-btn-primary:focus {
background: var(--pc-color-primary-dark);
}
.pc-btn-ghost {
background: transparent;
border-color: var(--pc-color-border);
color: var(--pc-color-text);
}
.pc-btn-ghost:hover,
.pc-btn-ghost:focus {
border-color: var(--pc-color-primary);
color: var(--pc-color-primary);
}
.pc-card {
background: var(--pc-color-surface);
border: 1px solid var(--pc-color-border);
border-radius: var(--pc-radius);
box-shadow: var(--pc-shadow-soft);
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.pc-card:hover,
.pc-card:focus-within {
border-color: color-mix(in srgb, var(--pc-color-primary) 38%, var(--pc-color-border));
box-shadow: var(--pc-shadow-card);
transform: translateY(-3px);
}
.pc-card-media {
background: var(--pc-color-background);
aspect-ratio: 3 / 2;
}
.pc-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.25s ease;
}
.pc-card:hover .pc-card-media img,
.pc-card:focus-within .pc-card-media img {
transform: scale(1.025);
}
.pc-card-body {
padding: var(--pc-space-5);
}
.pc-card-body > * + * {
margin-top: var(--pc-space-3);
}
.pc-badge {
display: inline-flex;
align-items: center;
width: fit-content;
padding: 0.2rem 0.5rem;
border: 1px solid var(--pc-color-border);
border-radius: 999px;
color: var(--pc-color-primary);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.2;
}
.pc-meta {
color: var(--pc-color-muted);
font-size: 0.875rem;
line-height: 1.4;
}
.pc-section-heading {
margin-bottom: var(--pc-space-5);
}
.pc-section-heading > * + * {
margin-top: var(--pc-space-2);
}
.pc-card-title {
font-size: 1.125rem;
font-weight: 700;
line-height: 1.25;
}
.pc-card-title a {
text-decoration: none;
}
.pc-card-title a:hover,
.pc-card-title a:focus {
color: var(--pc-color-primary);
text-decoration: underline;
}
.pc-card-excerpt {
color: var(--pc-color-muted);
font-size: 0.9375rem;
}
.pc-card-placeholder {
display: grid;
place-items: center;
border-bottom: 1px solid var(--pc-color-border);
background: var(--pc-color-background);
color: var(--pc-color-muted);
font-size: 0.875rem;
font-weight: 600;
text-align: center;
}
.pc-featured-card .pc-card-title {
font-size: 1.5rem;
}
.pc-small-card {
display: grid;
grid-template-columns: 5rem 1fr;
gap: var(--pc-space-3);
align-items: start;
}
.pc-small-card-media {
display: block;
aspect-ratio: 3 / 2;
overflow: hidden;
border-radius: var(--pc-radius);
background: var(--pc-color-background);
}
.pc-small-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pc-small-card-body > * + * {
margin-top: var(--pc-space-1);
}
.pc-small-card .pc-card-title {
font-size: 0.9375rem;
}
.pc-post-meta {
display: flex;
flex-wrap: wrap;
gap: var(--pc-space-2);
align-items: center;
margin-bottom: 0;
}
.pc-category-badge {
text-decoration: none;
}
.pc-category-badge:hover,
.pc-category-badge:focus {
border-color: var(--pc-color-primary);
background: var(--pc-color-background);
}
.pc-category-card .pc-card-title {
font-size: 1rem;
}
.pc-primary-nav ul {
display: flex;
flex-wrap: wrap;
gap: var(--pc-space-3);
padding: 0;
margin: 0;
list-style: none;
}
.pc-primary-nav a {
color: var(--pc-color-text);
font-size: 0.9375rem;
font-weight: 600;
text-decoration: none;
}
.pc-primary-nav a:hover,
.pc-primary-nav a:focus {
color: var(--pc-color-primary);
text-decoration: underline;
}
.pc-header-search .search-form {
display: flex;
gap: var(--pc-space-2);
}
.entry-content > * + * {
margin-top: var(--pc-space-4);
}
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.screen-reader-text:focus {
z-index: 100000;
top: var(--pc-space-3);
left: var(--pc-space-3);
width: auto;
height: auto;
padding: var(--pc-space-2) var(--pc-space-3);
background: var(--pc-color-surface);
clip: auto;
color: var(--pc-color-text);
}
.pc-muted {
color: var(--pc-color-muted);
}
.pc-surface {
background: var(--pc-color-surface);
}
.pc-border {
border: 1px solid var(--pc-color-border);
}
.pc-mt-0 {
margin-top: 0;
}
.pc-mb-0 {
margin-bottom: 0;
}
.pc-text-center {
text-align: center;
}
@media (min-width: 768px) {
.pc-grid-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pc-grid-3,
.pc-grid-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.pc-grid-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pc-grid-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.pc-brand-header {
background:
linear-gradient(180deg, color-mix(in srgb, var(--pc-color-primary-soft) 72%, var(--pc-color-surface)), var(--pc-color-surface));
border-bottom: 1px solid var(--pc-color-border);
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.pc-brand-inner {
position: relative;
display: grid;
gap: var(--pc-space-3);
padding-block: var(--pc-space-6) var(--pc-space-4);
text-align: center;
}
.pc-brand-center {
display: grid;
justify-items: center;
gap: var(--pc-space-1);
}
.pc-brand-title {
margin: 0;
font-size: clamp(2rem, 5vw, 3.25rem);
font-weight: 900;
letter-spacing: 0.02em;
line-height: 1.1;
}
.pc-brand-title a {
color: var(--pc-color-text);
text-decoration: none;
}
.pc-brand-title a::after {
display: block;
width: 4rem;
height: 3px;
margin: 0.65rem auto 0;
border-radius: 999px;
background: var(--pc-color-primary);
content: "";
}
.pc-brand-logo {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 3.375rem;
text-decoration: none;
}
.pc-brand-logo-image {
display: block;
width: auto;
max-width: min(16rem, 72vw);
max-height: 4.5rem;
object-fit: contain;
}
.pc-brand-logo-mobile,
.pc-brand-logo-dark {
display: none;
}
html[data-theme="light"] .pc-brand-logo-default,
html:not([data-theme]) .pc-brand-logo-default {
display: block;
}
html[data-theme="dark"] .pc-brand-logo-has-dark .pc-brand-logo-default {
display: none;
}
html[data-theme="dark"] .pc-brand-logo-dark {
display: block;
}
@media (max-width: 767px) {
.pc-brand-logo-image {
max-height: 3.375rem;
}
.pc-brand-logo-has-mobile .pc-brand-logo-default {
display: none;
}
.pc-brand-logo-has-mobile .pc-brand-logo-mobile {
display: block;
}
html[data-theme="dark"] .pc-brand-logo-has-dark .pc-brand-logo-mobile {
display: none;
}
}
.pc-social-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--pc-space-2);
}
.pc-social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid var(--pc-color-border);
border-radius: 999px;
background: var(--pc-color-surface);
color: var(--pc-color-text);
font-size: 0.75rem;
font-weight: 800;
text-decoration: none;
}
.pc-social-link:hover,
.pc-social-link:focus {
border-color: var(--pc-color-primary);
background: var(--pc-color-primary-soft);
color: var(--pc-color-primary);
}
.pc-nav-row,
.pc-popular-row {
border-top: 1px solid var(--pc-color-border);
background: var(--pc-color-surface);
}
.pc-nav-inner {
display: grid;
gap: var(--pc-space-3);
padding-block: var(--pc-space-3);
}
.pc-primary-nav ul {
justify-content: center;
}
.pc-header-search .search-form {
max-width: 22rem;
margin-inline: auto;
}
.pc-popular-inner {
display: grid;
gap: var(--pc-space-2);
padding-block: var(--pc-space-2);
font-size: 0.875rem;
}
.pc-popular-label {
color: var(--pc-color-primary-dark);
font-weight: 800;
}
.pc-popular-tags {
display: flex;
flex-wrap: wrap;
gap: var(--pc-space-2);
}
.pc-popular-tags a {
color: var(--pc-color-muted);
text-decoration: none;
}
.pc-popular-tags a:hover,
.pc-popular-tags a:focus {
color: var(--pc-color-primary);
text-decoration: underline;
}
.pc-home-layout {
display: grid;
gap: var(--pc-space-5);
}
.pc-home-side,
.pc-popular-card-list {
display: grid;
gap: var(--pc-space-4);
}
.pc-home-popular {
padding: var(--pc-space-4);
border: 1px solid var(--pc-color-border);
border-radius: var(--pc-radius);
background: var(--pc-color-surface);
}
.pc-section-topline {
margin-bottom: var(--pc-space-4);
padding-bottom: var(--pc-space-2);
border-bottom: 1px solid var(--pc-color-border);
}
.pc-section-topline h2 {
font-size: 1.125rem;
}
.pc-featured-card .pc-card-media {
aspect-ratio: 3 / 2;
}
.pc-featured-card .pc-card-body {
padding: var(--pc-space-5);
}
.pc-featured-card .pc-card-title {
font-size: 1.625rem;
}
.pc-article-card .pc-card-body {
padding: var(--pc-space-4);
}
.pc-article-card .pc-card-title {
font-size: 1rem;
}
.pc-article-card .pc-card-excerpt {
font-size: 0.875rem;
}
.pc-ad-slot {
display: grid;
place-items: center;
gap: var(--pc-space-1);
min-height: 5.625rem;
border: 1px dashed var(--pc-color-border);
border-radius: var(--pc-radius);
background: #eef7f1;
color: var(--pc-color-primary-dark);
font-size: 0.875rem;
font-weight: 700;
}
.pc-ad-slot span {
color: var(--pc-color-muted);
font-size: 0.8125rem;
}
.pc-ad-slot-filled {
display: block;
min-height: 0;
padding: var(--pc-space-3);
border-style: solid;
background: var(--pc-color-surface);
color: var(--pc-color-text);
font-weight: 400;
}
.pc-ad-label {
display: block;
margin-bottom: var(--pc-space-2);
color: var(--pc-color-muted);
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
}
.pc-ad-code-mobile {
display: none;
}
.pc-ad-code img,
.pc-ad-code iframe {
max-width: 100%;
}
.pc-header-ad {
padding-block: var(--pc-space-3);
}
.pc-footer-ad {
margin-top: var(--pc-space-5);
}
@media (max-width: 767px) {
.pc-ad-has-mobile .pc-ad-code-desktop {
display: none;
}
.pc-ad-code-mobile {
display: block;
}
}
@media (min-width: 1024px) {
.pc-sidebar-ad-sticky {
position: sticky;
top: 24px;
}
}
.pc-category-card .pc-card-body {
padding: var(--pc-space-4);
}
.pc-site-footer {
background: var(--pc-color-primary-dark);
border-top: 0;
color: #ffffff;
}
.pc-footer-inner {
display: grid;
gap: var(--pc-space-4);
padding-block: var(--pc-space-6);
}
.pc-footer-brand .pc-site-title,
.pc-footer-copy {
color: #ffffff;
font-weight: 800;
}
.pc-footer-brand .pc-site-description {
color: rgba(255, 255, 255, 0.78);
}
.pc-footer-menu ul {
display: flex;
flex-wrap: wrap;
gap: var(--pc-space-3);
padding: 0;
margin: 0;
list-style: none;
}
.pc-footer-menu a {
color: #ffffff;
font-weight: 700;
text-decoration: none;
}
.pc-footer-menu a:hover,
.pc-footer-menu a:focus {
text-decoration: underline;
}
@media (min-width: 768px) {
.pc-nav-inner {
grid-template-columns: 1fr minmax(16rem, 22rem);
align-items: center;
}
.pc-primary-nav ul {
justify-content: flex-start;
}
.pc-header-search .search-form {
margin-inline: 0;
}
.pc-popular-inner {
grid-template-columns: auto 1fr;
align-items: center;
}
.pc-home-layout {
grid-template-columns: minmax(0, 1.4fr) minmax(14rem, 0.8fr);
}
.pc-home-popular {
grid-column: 1 / -1;
}
.pc-footer-inner {
grid-template-columns: 1fr auto;
align-items: center;
}
}
@media (min-width: 1024px) {
.pc-home-layout {
grid-template-columns: minmax(0, 1.45fr) minmax(14rem, 0.75fr) minmax(16rem, 0.8fr);
align-items: start;
}
.pc-home-popular {
grid-column: auto;
}
.pc-footer-inner {
grid-template-columns: 1fr auto auto;
}
}
.pc-brand-inner {
padding-block: var(--pc-space-6) var(--pc-space-4);
}
.pc-social-links {
opacity: 0.82;
}
.pc-social-link {
width: 34px;
height: 34px;
}
.pc-nav-inner {
display: block;
padding-block: 0.9rem;
}
.pc-primary-nav ul {
justify-content: center;
gap: var(--pc-space-5);
}
.pc-primary-nav a {
font-size: 0.8125rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
}
.pc-primary-nav a:hover,
.pc-primary-nav a:focus {
color: var(--pc-color-primary);
}
.pc-search-row {
border-top: 1px solid var(--pc-color-border);
background: var(--pc-color-surface-alt);
}
.pc-search-row .pc-container {
padding-block: var(--pc-space-3);
}
.pc-header-search {
width: 100%;
max-width: 41rem;
margin-inline: auto;
}
.pc-search-tools {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--pc-space-2);
}
.pc-header-search .search-form {
max-width: 100%;
}
.pc-popular-row {
background: color-mix(in srgb, var(--pc-color-surface) 72%, var(--pc-color-primary-soft));
}
.pc-popular-inner {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--pc-space-2) var(--pc-space-4);
padding-block: 0.7rem;
}
.pc-popular-label {
color: var(--pc-color-text);
font-weight: 900;
white-space: nowrap;
}
.pc-popular-tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--pc-space-2) var(--pc-space-4);
padding: 0;
overflow: visible;
}
.pc-popular-menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--pc-space-2) var(--pc-space-4);
padding: 0;
margin: 0;
list-style: none;
}
.pc-popular-menu li {
margin: 0;
}
.pc-popular-menu a,
.pc-popular-tag {
flex: initial;
padding: 0;
border-radius: 0;
background: transparent;
font-size: 0.875rem;
font-weight: 800;
line-height: 1.35;
text-decoration: none;
white-space: normal;
}
.pc-popular-menu a::before,
.pc-popular-tag::before {
content: "#";
}
.pc-popular-menu a:hover,
.pc-popular-menu a:focus,
.pc-popular-tag:hover,
.pc-popular-tag:focus {
text-decoration: underline;
}
.pc-popular-menu li:nth-child(8n+1) a,
.pc-tag-green {
background: transparent;
color: #16803c;
}
.pc-popular-menu li:nth-child(8n+7) a,
.pc-tag-orange {
background: transparent;
color: #c25a00;
}
.pc-popular-menu li:nth-child(8n+3) a,
.pc-popular-menu li:nth-child(8n+8) a,
.pc-tag-blue {
background: transparent;
color: #315f8f;
}
.pc-popular-menu li:nth-child(8n+5) a,
.pc-tag-purple {
background: transparent;
color: #7c3aed;
}
.pc-popular-menu li:nth-child(8n+6) a,
.pc-tag-red {
background: transparent;
color: #c2185b;
}
.pc-popular-menu li:nth-child(8n+4) a,
.pc-tag-teal {
background: transparent;
color: #087a5a;
}
.pc-popular-menu li:nth-child(8n+2) a,
.pc-tag-yellow {
background: transparent;
color: #b77900;
}
@media (min-width: 768px) {
.pc-popular-inner,
.pc-popular-topics {
display: flex;
}
.pc-header-search .search-form {
margin-inline: auto;
}
}
.pc-header-search {
max-width: 41rem;
}
.pc-site-footer {
background:
radial-gradient(circle at 10% 0%, rgba(52, 209, 111, 0.12), transparent 20rem),
linear-gradient(135deg, #062415, #02120b 76%);
}
.pc-footer-inner {
gap: var(--pc-space-5);
padding-block: clamp(2rem, 5vw, 3.25rem) var(--pc-space-4);
}
.pc-footer-grid {
grid-template-columns: 1fr;
gap: var(--pc-space-5);
}
.pc-footer-title {
font-size: 1.1rem;
letter-spacing: 0.02em;
}
.pc-footer-description {
max-width: 26rem;
font-size: 0.925rem;
line-height: 1.65;
}
.pc-footer-column {
gap: var(--pc-space-2);
}
.pc-footer-column h2 {
font-size: 0.82rem;
letter-spacing: 0.06em;
}
.pc-footer-links {
gap: 0.45rem;
}
.pc-footer-links a {
color: rgba(255, 255, 255, 0.68);
font-size: 0.875rem;
font-weight: 600;
}
.pc-footer-bottom {
grid-template-columns: 1fr;
gap: var(--pc-space-2);
padding-top: var(--pc-space-4);
}
.pc-footer-bottom p {
color: rgba(255, 255, 255, 0.56);
}
@media (min-width: 768px) {
.pc-footer-grid {
grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr) minmax(0, 0.9fr);
align-items: start;
}
.pc-footer-bottom {
grid-template-columns: 1fr auto;
align-items: center;
}
}
.pc-site-footer {
background:
radial-gradient(circle at 15% 0%, rgba(52, 209, 111, 0.18), transparent 24rem),
linear-gradient(135deg, #062415, #02120b 72%);
border-top: 1px solid rgba(255, 255, 255, 0.08);
color: #ffffff;
}
.pc-footer-inner {
display: grid;
gap: var(--pc-space-6);
padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--pc-space-5);
}
.pc-footer-grid {
display: grid;
gap: var(--pc-space-6);
}
.pc-footer-brand,
.pc-footer-column {
display: grid;
align-content: start;
gap: var(--pc-space-3);
}
.pc-footer-title {
margin: 0;
color: #ffffff;
font-size: 1.25rem;
font-weight: 900;
letter-spacing: 0.03em;
}
.pc-footer-description {
max-width: 22rem;
margin: 0;
color: rgba(255, 255, 255, 0.72);
line-height: 1.7;
}
.pc-footer-column h2 {
margin: 0;
color: #ffffff;
font-size: 0.9rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.pc-footer-links {
display: grid;
gap: 0.55rem;
padding: 0;
margin: 0;
list-style: none;
}
.pc-footer-links a,
.pc-footer-bottom a {
color: rgba(255, 255, 255, 0.72);
font-weight: 700;
text-decoration: none;
}
.pc-footer-links a:hover,
.pc-footer-links a:focus,
.pc-footer-bottom a:hover,
.pc-footer-bottom a:focus {
color: #86efac;
}
.pc-footer-social {
justify-content: flex-start;
margin-top: var(--pc-space-2);
opacity: 1;
}
.pc-footer-social .pc-social-link {
border-color: rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.06);
color: #ffffff;
}
.pc-footer-social .pc-social-link:hover,
.pc-footer-social .pc-social-link:focus {
border-color: rgba(134, 239, 172, 0.5);
background: rgba(52, 209, 111, 0.14);
color: #86efac;
}
.pc-footer-bottom {
display: grid;
gap: var(--pc-space-3);
padding-top: var(--pc-space-5);
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.6);
font-size: 0.8125rem;
}
.pc-footer-bottom p {
margin: 0;
}
.pc-footer-bottom nav {
display: flex;
flex-wrap: wrap;
gap: var(--pc-space-3);
}
@media (min-width: 768px) {
.pc-footer-grid {
grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
}
.pc-footer-bottom {
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
.pc-footer-bottom nav {
justify-content: center;
}
.pc-footer-bottom p:last-child {
text-align: right;
}
}
.pc-site-header {
position: sticky;
z-index: 900;
top: 0;
transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.pc-header-sticky {
background: color-mix(in srgb, var(--pc-color-surface) 88%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--pc-color-border) 78%, transparent);
box-shadow: 0 14px 34px rgba(17, 24, 39, 0.08);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.pc-header-sticky .pc-brand-header,
.pc-header-sticky .pc-nav-row,
.pc-header-sticky .pc-search-row,
.pc-header-sticky .pc-popular-row {
background: transparent;
}
.pc-header-compact .pc-brand-inner {
padding-block: 0.65rem 0.45rem;
}
.pc-header-compact .pc-brand-title {
font-size: clamp(1.3rem, 2.4vw, 1.8rem);
}
.pc-header-compact .pc-brand-title a::after {
width: 2rem;
height: 2px;
margin-top: 0.35rem;
}
.pc-header-compact .pc-nav-inner {
padding-block: 0.45rem;
}
.pc-header-compact .pc-primary-nav a {
font-size: 0.72rem;
}
.pc-header-compact .pc-search-row .pc-container,
.pc-header-compact .pc-popular-inner {
padding-block: 0.45rem;
}
.pc-header-compact .pc-search-form {
min-height: 2.6rem;
}
.pc-header-compact .pc-search-form input[type="search"] {
min-height: 2.3rem;
}
.pc-header-compact .pc-search-form button,
.pc-header-compact .pc-bookmarks-link,
.pc-header-compact .pc-theme-switcher {
min-height: 38px;
height: 38px;
}
.pc-header-compact .pc-search-form button {
width: 38px;
min-width: 38px;
}
.pc-header-is-hidden {
transform: translateY(calc(-100% + 3rem));
}
html[data-theme="dark"] .pc-header-sticky {
background: color-mix(in srgb, var(--pc-color-surface) 86%, transparent);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}
@media (max-width: 767px) {
.pc-header-compact .pc-popular-row {
display: none;
}
.pc-header-is-hidden {
transform: translateY(calc(-100% + 4rem));
}
}
@media (prefers-reduced-motion: reduce) {
.pc-site-header,
.pc-site-header * {
transition-duration: 0.01ms;
}
}
.pc-search-form {
display: flex;
align-items: center;
min-height: 3.125rem;
padding: 4px;
border: 1px solid var(--pc-color-border);
border-radius: 999px;
background: var(--pc-color-surface);
box-shadow: var(--pc-shadow-soft);
flex: 1;
min-width: min(100%, 16rem);
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.pc-search-form label {
flex: 1;
min-width: 0;
}
.pc-search-form input[type="search"] {
width: 100%;
min-height: 2.75rem;
padding: 0 1rem;
border: 0;
background: transparent;
color: var(--pc-color-text);
outline: 0;
}
.pc-search-form button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
min-width: 46px;
padding: 0;
border: 0;
border-radius: 999px;
background: var(--pc-color-primary);
color: #ffffff;
cursor: pointer;
}
.pc-theme-switcher {
display: inline-flex;
align-items: center;
gap: 2px;
height: 40px;
padding: 2px;
border: 1px solid var(--pc-color-border);
border-radius: 999px;
background: var(--pc-color-surface);
box-shadow: var(--pc-shadow-soft);
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.pc-theme-option {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--pc-color-muted);
font-size: 0.9rem;
font-weight: 800;
cursor: pointer;
transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.pc-theme-option:hover,
.pc-theme-option:focus {
color: var(--pc-color-primary);
}
.pc-theme-option.is-active {
background: color-mix(in srgb, var(--pc-color-primary) 88%, var(--pc-color-surface));
box-shadow: 0 6px 14px color-mix(in srgb, var(--pc-color-primary) 22%, transparent);
color: #ffffff;
}
.pc-search-form:focus-within {
border-color: var(--pc-color-primary);
}
.pc-social-link svg {
display: block;
width: 16px;
height: 16px;
fill: currentColor;
}
.pc-footer-social {
justify-content: flex-start;
opacity: 1;
}
.pc-footer-social .pc-social-link {
border-color: rgba(255, 255, 255, 0.35);
color: #ffffff;
}
.pc-header-social {
justify-content: center;
}
@media (min-width: 768px) {
.pc-header-social {
position: absolute;
top: var(--pc-space-4);
right: 0;
}
}
.pc-search-submit svg {
display: block;
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
}
.pc-card-media,
.pc-article-card .pc-card-media {
display: block;
aspect-ratio: 3 / 2;
overflow: hidden;
}
.pc-card-media img,
.pc-featured-card img,
.pc-small-card-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.pc-featured-card .pc-card-media {
aspect-ratio: 3 / 2;
}
.pc-small-card {
grid-template-columns: 108px 1fr;
align-items: center;
}
.pc-small-card-media {
width: 108px;
height: 72px;
aspect-ratio: auto;
}
.pc-card-placeholder {
min-height: 100%;
}
.pc-grid > .pc-card {
display: flex;
flex-direction: column;
height: 100%;
}
.pc-grid > .pc-card .pc-card-body {
flex: 1;
}
.pc-home-layout {
align-items: stretch;
}
.pc-home-featured .pc-featured-card {
height: 100%;
}
.pc-home-featured .pc-featured-card .pc-card-media {
aspect-ratio: 3 / 2;
}
.pc-home-featured .pc-featured-card .pc-card-body {
padding: clamp(1.25rem, 3vw, 2rem);
}
.pc-home-featured .pc-featured-card .pc-card-title {
font-size: clamp(1.7rem, 3vw, 2.55rem);
line-height: 1.08;
}
.pc-home-side .pc-small-card,
.pc-home-popular .pc-small-card {
border-radius: calc(var(--pc-radius) - 4px);
box-shadow: none;
}
.pc-home-popular {
box-shadow: var(--pc-shadow-soft);
}
.pc-ad-slot {
background: var(--pc-color-primary-soft);
color: var(--pc-color-primary-dark);
}
.pc-site-footer {
background:
linear-gradient(135deg, var(--pc-color-footer), color-mix(in srgb, var(--pc-color-footer) 72%, #000000));
color: var(--pc-color-footer-text);
transition: background-color 0.2s ease, color 0.2s ease;
}
.pc-footer-inner {
align-items: center;
}
.pc-footer-brand .pc-site-title,
.pc-footer-copy,
.pc-footer-menu a {
color: var(--pc-color-footer-text);
}
.pc-footer-brand .pc-site-description {
color: color-mix(in srgb, var(--pc-color-footer-text) 78%, transparent);
}
html[data-theme="dark"] .pc-tag-green,
html[data-theme="dark"] .pc-tag-teal {
color: #6ee7a0;
}
html[data-theme="dark"] .pc-tag-orange,
html[data-theme="dark"] .pc-tag-yellow {
color: #fbbf24;
}
html[data-theme="dark"] .pc-tag-blue {
color: #93c5fd;
}
html[data-theme="dark"] .pc-tag-purple {
color: #c4b5fd;
}
html[data-theme="dark"] .pc-tag-red {
color: #fda4af;
}
.pc-magazine-home .pc-section {
padding-block: var(--pc-space-5);
}
.pc-site-header .pc-brand-inner {
padding-block: var(--pc-space-4) var(--pc-space-3);
}
.pc-site-header .pc-brand-title {
font-size: clamp(1.55rem, 3vw, 2.2rem);
}
.pc-site-header .pc-brand-title a::after {
width: 2.75rem;
margin-top: 0.45rem;
}
.pc-site-header .pc-nav-inner {
padding-block: 0.65rem;
}
.pc-site-header .pc-primary-nav a {
font-size: 0.76rem;
letter-spacing: 0.07em;
}
.pc-site-header .pc-search-row .pc-container {
padding-block: 0.65rem;
}
.pc-site-header .pc-popular-inner {
padding-block: 0.55rem;
}
.pc-magazine-hero {
background: var(--pc-color-surface);
}
.pc-home-hero {
display: grid;
gap: var(--pc-space-5);
}
.pc-home-hero-main,
.pc-home-hero-main .pc-featured-card {
min-height: 100%;
}
.pc-home-hero-side {
display: grid;
gap: var(--pc-space-4);
}
.pc-hero-small-card {
position: relative;
min-height: 12rem;
overflow: hidden;
border: 1px solid var(--pc-color-border);
border-radius: var(--pc-radius);
background: #08110b;
box-shadow: var(--pc-shadow-soft);
color: #ffffff;
}
.pc-hero-small-card::after {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(180deg, transparent 34%, rgba(0, 0, 0, 0.7) 100%),
linear-gradient(90deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.08));
content: "";
pointer-events: none;
}
.pc-hero-small-card-media {
display: block;
width: 100%;
height: 100%;
min-height: inherit;
overflow: hidden;
}
.pc-hero-small-card-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
transition: transform 0.2s ease;
}
.pc-hero-small-card-overlay {
position: absolute;
z-index: 2;
right: 0;
bottom: 0;
left: 0;
display: grid;
gap: var(--pc-space-2);
padding: var(--pc-space-4);
}
.pc-hero-small-card .pc-badge {
background: var(--pc-color-primary);
border-color: transparent;
color: #ffffff;
}
.pc-hero-small-card-title {
margin: 0;
font-size: clamp(1rem, 1.5vw, 1.25rem);
line-height: 1.18;
}
.pc-hero-small-card-title a {
color: #ffffff;
text-decoration: none;
}
.pc-hero-small-card-title a:hover,
.pc-hero-small-card-title a:focus {
color: color-mix(in srgb, var(--pc-color-primary) 72%, #ffffff);
}
.pc-hero-small-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--pc-space-3);
margin: 0;
color: rgba(255, 255, 255, 0.78);
font-size: 0.8125rem;
font-weight: 700;
}
.pc-hero-small-card-meta a {
display: inline-grid;
place-items: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.16);
color: #ffffff;
font-size: 1.3rem;
line-height: 1;
text-decoration: none;
}
.pc-hero-small-card:hover .pc-hero-small-card-media img,
.pc-hero-small-card:focus-within .pc-hero-small-card-media img {
transform: scale(1.03);
}
.pc-weekly-section {
padding-top: 0;
}
.pc-weekly-section .pc-block-heading {
margin-bottom: var(--pc-space-4);
}
.pc-weekly-grid {
display: grid;
gap: var(--pc-space-4);
}
.pc-magazine-hero-grid,
.pc-current-news-layout,
.pc-video-layout {
display: grid;
gap: var(--pc-space-5);
}
.pc-editor-picks,
.pc-latest-rail,
.pc-current-news-rail {
display: grid;
align-content: start;
gap: var(--pc-space-4);
}
.pc-block-heading {
padding-bottom: var(--pc-space-2);
border-bottom: 1px solid var(--pc-color-border);
}
.pc-block-heading h2,
.pc-video-heading h2 {
margin: 0;
font-size: 1rem;
font-weight: 900;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.pc-block-heading-accent {
padding: 0.7rem 0.9rem;
border: 0;
border-radius: calc(var(--pc-radius) - 6px);
background: var(--pc-color-primary);
color: #ffffff;
}
.pc-block-heading-accent h2 {
color: #ffffff;
}
.pc-compact-list,
.pc-news-link-list,
.pc-video-list {
display: grid;
gap: var(--pc-space-3);
}
.pc-news-link-item {
padding-bottom: var(--pc-space-3);
border-bottom: 1px solid var(--pc-color-border);
}
.pc-news-link-item a {
display: block;
color: var(--pc-color-text);
font-size: 0.925rem;
font-weight: 800;
line-height: 1.38;
text-decoration: none;
}
.pc-news-link-item .pc-post-meta,
.pc-news-link-item .pc-meta {
margin-top: var(--pc-space-1);
font-size: 0.75rem;
line-height: 1.35;
}
.pc-news-link-item a:hover,
.pc-news-link-item a:focus {
color: var(--pc-color-primary);
}
.pc-magazine-featured .pc-featured-card {
height: 100%;
}
.pc-magazine-featured .pc-featured-card .pc-card-media {
aspect-ratio: 3 / 2;
}
.pc-magazine-featured .pc-featured-card .pc-card-title {
font-size: clamp(1.8rem, 4vw, 2.75rem);
line-height: 1.05;
}
.pc-magazine-featured .pc-featured-card .pc-card-body {
padding: clamp(1.2rem, 3vw, 2rem);
}
.pc-featured-card-overlay {
position: relative;
min-height: 100%;
background: #08110b;
color: #ffffff;
}
.pc-featured-card-overlay::after {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.48) 100%),
linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.28) 55%, rgba(0, 0, 0, 0.08));
content: "";
pointer-events: none;
}
.pc-featured-card-media {
display: block;
height: 100%;
min-height: clamp(22rem, 42vw, 32rem);
aspect-ratio: 3 / 2;
}
.pc-featured-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.pc-featured-card-content {
position: absolute;
z-index: 2;
right: 0;
bottom: 0;
left: 0;
display: grid;
gap: var(--pc-space-3);
max-width: 42rem;
padding: clamp(1.1rem, 4vw, 2.25rem);
color: #ffffff;
}
.pc-featured-card-content .pc-badge {
background: var(--pc-color-primary);
border-color: transparent;
color: #ffffff;
}
.pc-featured-card-title {
margin: 0;
font-size: clamp(1.75rem, 3.6vw, 3rem);
line-height: 1.05;
}
.pc-featured-card-title a {
color: #ffffff;
text-decoration: none;
}
.pc-featured-card-title a:hover,
.pc-featured-card-title a:focus {
color: color-mix(in srgb, var(--pc-color-primary) 72%, #ffffff);
}
.pc-featured-card-excerpt {
max-width: 34rem;
margin: 0;
color: rgba(255, 255, 255, 0.84);
font-size: 1rem;
}
.pc-featured-card-meta .pc-post-meta,
.pc-featured-card-meta .pc-meta {
color: rgba(255, 255, 255, 0.76);
font-size: 0.875rem;
}
.pc-featured-card-overlay .pc-btn {
width: fit-content;
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.pc-featured-card-overlay .pc-btn:hover,
.pc-featured-card-overlay .pc-btn:focus {
transform: translateY(-1px);
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
}
.pc-featured-card-overlay:hover .pc-featured-card-media img,
.pc-featured-card-overlay:focus-within .pc-featured-card-media img {
transform: scale(1.03);
}
@media (max-width: 640px) {
.pc-featured-card-media {
min-height: 24rem;
}
.pc-featured-card-excerpt {
display: none;
}
.pc-featured-card-content {
gap: var(--pc-space-2);
}
}
.pc-magazine-strip {
padding-top: var(--pc-space-4);
background: var(--pc-color-background);
}
.pc-video-section {
background:
radial-gradient(circle at 20% 20%, rgba(52, 209, 111, 0.14), transparent 26rem),
#070b09;
color: #ffffff;
}
.pc-video-section .pc-card {
background: #101713;
border-color: rgba(255, 255, 255, 0.12);
color: #ffffff;
}
.pc-video-section .pc-card-title,
.pc-video-section .pc-card-title a,
.pc-video-section .pc-meta,
.pc-video-section .pc-card-excerpt {
color: #ffffff;
}
.pc-video-heading {
margin-bottom: var(--pc-space-5);
}
.pc-video-heading p {
max-width: 40rem;
margin-top: var(--pc-space-2);
color: rgba(255, 255, 255, 0.72);
}
.pc-video-feature-grid,
.pc-current-news-grid {
display: grid;
gap: var(--pc-space-5);
}
.pc-video-list .pc-small-card {
background: transparent;
border-color: rgba(255, 255, 255, 0.12);
box-shadow: none;
color: #ffffff;
}
.pc-video-list .pc-card-title a,
.pc-video-list .pc-meta {
color: #ffffff;
}
.pc-current-news {
background: var(--pc-color-surface);
}
.pc-current-news .pc-section-heading {
text-align: center;
}
.pc-home-categories .pc-section-heading {
margin-bottom: var(--pc-space-5);
}
.pc-current-news-rail .pc-sidebar-title {
margin: 0 0 var(--pc-space-3);
padding-bottom: var(--pc-space-2);
border-bottom: 2px solid var(--pc-color-primary);
font-size: 1rem;
}
.pc-editor-picks .pc-small-card,
.pc-latest-rail .pc-small-card,
.pc-current-news-rail .pc-small-card {
box-shadow: none;
}
.pc-editor-picks .pc-small-card,
.pc-current-news-rail .pc-small-card {
align-items: center;
}
.pc-editor-picks .pc-small-card .pc-card-title,
.pc-current-news-rail .pc-small-card .pc-card-title {
line-height: 1.32;
}
.pc-editor-picks .pc-small-card .pc-meta,
.pc-current-news-rail .pc-small-card .pc-meta {
font-size: 0.75rem;
}
.pc-category-card {
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.pc-category-card:hover,
.pc-category-card:focus-within {
border-color: color-mix(in srgb, var(--pc-color-primary) 42%, var(--pc-color-border));
box-shadow: var(--pc-shadow-card);
transform: translateY(-2px);
}
@media (min-width: 768px) {
.pc-weekly-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pc-video-feature-grid,
.pc-current-news-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.pc-home-hero {
grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
align-items: stretch;
}
.pc-home-hero-side {
grid-template-rows: repeat(3, minmax(0, 1fr));
}
.pc-home-hero-side .pc-hero-small-card {
min-height: 0;
}
.pc-weekly-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pc-magazine-hero-grid {
grid-template-columns: minmax(13rem, 0.72fr) minmax(0, 1.55fr) minmax(15rem, 0.82fr);
align-items: stretch;
}
.pc-current-news-layout {
grid-template-columns: minmax(0, 1fr) 19rem;
align-items: start;
}
.pc-current-news-layout--full {
grid-template-columns: minmax(0, 1fr);
}
.pc-video-layout {
grid-template-columns: minmax(0, 1fr) 19rem;
align-items: start;
}
}
.pc-single-wrap {
max-width: 920px;
}
.pc-single-article {
display: grid;
gap: var(--pc-space-5);
}
.pc-breadcrumb {
color: var(--pc-color-muted);
font-size: 0.875rem;
}
.pc-breadcrumb-list {
display: flex;
flex-wrap: wrap;
gap: var(--pc-space-2);
padding: 0;
margin: 0;
list-style: none;
}
.pc-breadcrumb-list li + li::before {
content: ">";
margin-right: var(--pc-space-2);
color: var(--pc-color-border);
}
.pc-breadcrumb a {
text-decoration: none;
}
.pc-single-header {
display: grid;
gap: var(--pc-space-3);
}
.pc-single-title {
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.12;
}
.pc-single-featured {
aspect-ratio: 3 / 2;
margin: 0;
overflow: hidden;
border-radius: var(--pc-radius);
background: var(--pc-color-background);
}
.pc-single-featured img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pc-summary-box,
.pc-toc,
.pc-author-box {
padding: var(--pc-space-5);
border: 1px solid var(--pc-color-border);
border-radius: var(--pc-radius);
background: var(--pc-color-surface);
}
.pc-summary-box h2,
.pc-toc h2,
.pc-author-box h2 {
margin-bottom: var(--pc-space-2);
font-size: 1.125rem;
}
.pc-summary-box p,
.pc-toc p {
margin-bottom: 0;
color: var(--pc-color-muted);
}
.pc-entry-content {
max-width: 800px;
color: var(--pc-color-text);
font-size: 1.0625rem;
line-height: 1.75;
}
.pc-entry-content > * + * {
margin-top: var(--pc-space-5);
}
.pc-entry-content h2,
.pc-entry-content h3 {
margin-top: var(--pc-space-6);
}
.pc-entry-content ul,
.pc-entry-content ol {
padding-left: var(--pc-space-5);
}
.pc-entry-content li + li {
margin-top: var(--pc-space-2);
}
.pc-author-box {
display: grid;
gap: var(--pc-space-4);
}
.pc-author-avatar img {
border-radius: 999px;
}
.pc-author-content p {
color: var(--pc-color-muted);
}
.pc-related-posts {
margin-top: var(--pc-space-6);
}
@media (min-width: 768px) {
.pc-author-box {
grid-template-columns: auto 1fr;
align-items: center;
}
}
.pc-summary-box {
border-left: 4px solid var(--pc-color-primary);
background: #eef8f1;
}
.pc-summary-box h2 {
color: var(--pc-color-primary-dark);
}
.pc-toc-list {
padding-left: 1.25rem;
margin: 0;
}
.pc-toc-list li + li {
margin-top: var(--pc-space-2);
}
.pc-toc-list a {
color: var(--pc-color-text);
text-decoration: none;
}
.pc-toc-list a:hover,
.pc-toc-list a:focus {
color: var(--pc-color-primary);
text-decoration: underline;
}
.pc-single-featured {
border-radius: 14px;
}
.pc-single-featured figcaption {
padding-top: var(--pc-space-2);
color: var(--pc-color-muted);
font-size: 0.875rem;
text-align: center;
}
.pc-entry-content h2 {
padding-top: var(--pc-space-2);
border-top: 1px solid var(--pc-color-border);
font-size: 1.75rem;
}
.pc-entry-content h3 {
font-size: 1.35rem;
}
.pc-entry-content p {
margin-bottom: 0;
}
.pc-entry-content blockquote {
padding: var(--pc-space-4);
border-left: 4px solid var(--pc-color-primary);
background: var(--pc-color-surface);
color: var(--pc-color-muted);
}
.pc-entry-content table {
display: block;
width: 100%;
overflow-x: auto;
border-collapse: collapse;
}
.pc-entry-content th,
.pc-entry-content td {
padding: var(--pc-space-2);
border: 1px solid var(--pc-color-border);
text-align: left;
}
.pc-entry-content figure {
margin: var(--pc-space-5) 0;
}
.pc-entry-content img {
border-radius: var(--pc-radius);
}
.pc-entry-content figcaption {
margin-top: var(--pc-space-2);
color: var(--pc-color-muted);
font-size: 0.875rem;
text-align: center;
}
.pc-author-box {
border-color: transparent;
box-shadow: 0 10px 30px rgba(17, 24, 39, 0.06);
}
.pc-author-content > * + * {
margin-top: var(--pc-space-2);
}
.pc-related-grid {
align-items: stretch;
}
.pc-post-end-cta {
padding: var(--pc-space-5);
border: 1px solid var(--pc-color-border);
border-radius: var(--pc-radius);
background: var(--pc-color-surface);
color: var(--pc-color-primary-dark);
font-weight: 700;
}
.pc-post-end-cta p {
margin: 0;
}
.pc-progress,
.pc-reading-progress {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: var(--pc-color-primary);
transform: scaleX(0);
transform-origin: left center;
}
.pc-single-actions {
display: flex;
flex-wrap: wrap;
gap: var(--pc-space-2);
margin-top: var(--pc-space-3);
}
.pc-reading-mode-toggle,
.pc-bookmark-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.35rem;
padding: 0.45rem 0.8rem;
border: 1px solid var(--pc-color-border);
border-radius: 999px;
background: var(--pc-color-surface);
color: var(--pc-color-text);
font-size: 0.875rem;
font-weight: 800;
cursor: pointer;
}
.pc-reading-mode-toggle:hover,
.pc-reading-mode-toggle:focus,
.pc-bookmark-button:hover,
.pc-bookmark-button:focus,
.pc-bookmark-button.pc-is-bookmarked {
border-color: var(--pc-color-primary);
background: var(--pc-color-primary-soft);
color: var(--pc-color-primary-dark);
}
.pc-reading-mode .pc-site-header,
.pc-reading-mode .pc-site-footer,
.pc-reading-mode .pc-share-box,
.pc-reading-mode .pc-ad-slot,
.pc-reading-mode .pc-related-posts,
.pc-reading-mode .pc-author-box,
.pc-reading-mode .pc-post-end-cta {
display: none;
}
.pc-reading-mode .pc-single-wrap {
max-width: 820px;
}
.pc-reading-mode .pc-single-article {
gap: var(--pc-space-6);
}
.pc-reading-mode .pc-entry-content {
font-size: 1.08rem;
line-height: 1.85;
}
.pc-reading-mode .pc-reading-progress {
height: 4px;
}
.pc-bookmarks-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 0.85rem;
border: 1px solid var(--pc-color-border);
border-radius: 999px;
background: var(--pc-color-surface);
box-shadow: var(--pc-shadow-soft);
color: var(--pc-color-text);
font-size: 0.8125rem;
font-weight: 800;
gap: 0.35rem;
text-decoration: none;
}
.pc-bookmarks-link:hover,
.pc-bookmarks-link:focus,
.pc-bookmarks-link.pc-has-bookmarks {
border-color: var(--pc-color-primary);
color: var(--pc-color-primary);
}
.pc-bookmarks-count {
display: inline-grid;
place-items: center;
min-width: 1.35rem;
height: 1.35rem;
padding-inline: 0.25rem;
border-radius: 999px;
background: var(--pc-color-primary-soft);
color: var(--pc-color-primary-dark);
font-size: 0.75rem;
line-height: 1;
}
.pc-bookmarks-page {
display: grid;
gap: var(--pc-space-5);
}
.pc-bookmarks-toolbar {
display: flex;
justify-content: flex-end;
}
.pc-bookmarks-grid {
display: grid;
gap: var(--pc-space-5);
}
.pc-bookmark-card {
display: grid;
overflow: hidden;
border: 1px solid var(--pc-color-border);
border-radius: var(--pc-radius);
background: var(--pc-color-surface);
box-shadow: var(--pc-shadow-soft);
}
.pc-bookmark-card-media {
display: grid;
place-items: center;
aspect-ratio: 3 / 2;
overflow: hidden;
background: var(--pc-color-primary-soft);
color: var(--pc-color-primary-dark);
font-weight: 800;
text-decoration: none;
}
.pc-bookmark-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pc-bookmark-card-body {
display: grid;
gap: var(--pc-space-4);
padding: var(--pc-space-4);
}
.pc-bookmark-card-actions {
display: flex;
flex-wrap: wrap;
gap: var(--pc-space-2);
}
.pc-bookmark-remove,
.pc-bookmarks-clear {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.4rem;
padding: 0.5rem 0.9rem;
border: 1px solid var(--pc-color-border);
border-radius: 999px;
background: var(--pc-color-surface);
color: var(--pc-color-text);
font-size: 0.875rem;
font-weight: 800;
cursor: pointer;
}
.pc-bookmark-remove:hover,
.pc-bookmark-remove:focus,
.pc-bookmarks-clear:hover,
.pc-bookmarks-clear:focus {
border-color: var(--pc-color-primary);
color: var(--pc-color-primary);
}
.pc-bookmarks-empty {
padding: var(--pc-space-6);
border: 1px dashed var(--pc-color-border);
border-radius: var(--pc-radius);
background: var(--pc-color-surface);
color: var(--pc-color-muted);
text-align: center;
}
@media (min-width: 768px) {
.pc-bookmarks-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.pc-bookmarks-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.pc-share-box {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--pc-space-2);
padding: var(--pc-space-3);
border: 1px solid var(--pc-color-border);
border-radius: var(--pc-radius);
background: var(--pc-color-surface);
}
.pc-share-box > span {
color: var(--pc-color-muted);
font-weight: 800;
}
.pc-share-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 0;
border: 1px solid var(--pc-color-border);
border-radius: 999px;
background: var(--pc-color-surface);
color: var(--pc-color-text);
font-size: 0.875rem;
font-weight: 700;
text-decoration: none;
cursor: pointer;
}
.pc-share-btn svg {
display: block;
width: 18px;
height: 18px;
fill: currentColor;
}
.pc-share-copy {
width: auto;
padding: 0 16px;
color: var(--pc-color-primary-dark);
}
.pc-share-btn:hover,
.pc-share-btn:focus {
border-color: var(--pc-color-primary);
color: var(--pc-color-primary);
}
.pc-share-facebook:hover,
.pc-share-facebook:focus {
border-color: #1877f2;
color: #1877f2;
}
.pc-share-x:hover,
.pc-share-x:focus {
border-color: #111827;
color: #111827;
}
.pc-share-whatsapp:hover,
.pc-share-whatsapp:focus {
border-color: #128c7e;
color: #128c7e;
}
.pc-share-telegram:hover,
.pc-share-telegram:focus {
border-color: #229ed9;
color: #229ed9;
}
.pc-share-copy:hover,
.pc-share-copy:focus {
border-color: var(--pc-color-primary);
color: var(--pc-color-primary);
}
.pc-archive-hero {
display: grid;
gap: var(--pc-space-3);
margin-bottom: var(--pc-space-6);
padding: var(--pc-space-6);
border: 1px solid var(--pc-color-border);
border-radius: var(--pc-radius);
background: var(--pc-color-surface);
}
.pc-archive-hero h1 {
font-size: clamp(2rem, 4vw, 3rem);
}
.pc-archive-hero .archive-description {
max-width: 760px;
color: var(--pc-color-muted);
}
.pc-archive-grid {
display: grid;
gap: var(--pc-space-6);
}
.pc-archive-main {
display: grid;
gap: var(--pc-space-5);
}
.pc-sidebar-widget {
padding: var(--pc-space-4);
border: 1px solid var(--pc-color-border);
border-radius: var(--pc-radius);
background: var(--pc-color-surface);
}
.pc-sidebar,
.pc-sidebar-list {
display: grid;
gap: var(--pc-space-4);
}
.pc-sidebar-title {
margin-bottom: var(--pc-space-4);
font-size: 1.125rem;
}
.pc-sidebar-list {
padding: 0;
margin: 0;
list-style: none;
}
.pc-sidebar-category a {
display: flex;
justify-content: space-between;
gap: var(--pc-space-3);
color: var(--pc-color-text);
font-weight: 700;
text-decoration: none;
}
.pc-sidebar-category a:hover,
.pc-sidebar-category a:focus {
color: var(--pc-color-primary);
}
.pc-sidebar-ad {
min-height: 250px;
}
.pc-pagination {
margin-top: var(--pc-space-5);
}
.pc-pagination ul {
display: flex;
flex-wrap: wrap;
gap: var(--pc-space-2);
justify-content: center;
padding: 0;
margin: 0;
list-style: none;
}
.pc-pagination :is(a, span) {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.4rem;
min-height: 2.4rem;
padding: 0 var(--pc-space-3);
border: 1px solid var(--pc-color-border);
border-radius: 999px;
background: var(--pc-color-surface);
color: var(--pc-color-text);
font-weight: 800;
text-decoration: none;
}
.pc-pagination .current,
.pc-pagination a:hover,
.pc-pagination a:focus {
border-color: var(--pc-color-primary);
background: var(--pc-color-primary);
color: #ffffff;
}
.pc-empty-state {
padding: var(--pc-space-6);
border: 1px solid var(--pc-color-border);
border-radius: var(--pc-radius);
background: var(--pc-color-surface);
text-align: center;
}
.pc-empty-state p {
color: var(--pc-color-muted);
}
@media (min-width: 1024px) {
.pc-archive-grid {
grid-template-columns: minmax(0, 1fr) 320px;
align-items: start;
}
.pc-sidebar {
position: sticky;
top: 24px;
}
}
.pc-toc-level-3 {
margin-left: var(--pc-space-4);
font-size: 0.9375rem;
}
.pc-callout {
--pc-callout-color: var(--pc-color-primary);
padding: var(--pc-space-4);
border: 1px solid color-mix(in srgb, var(--pc-callout-color) 35%, white);
border-left: 4px solid var(--pc-callout-color);
border-radius: var(--pc-radius);
background: color-mix(in srgb, var(--pc-callout-color) 10%, white);
}
.pc-callout strong {
display: block;
margin-bottom: var(--pc-space-2);
color: var(--pc-callout-color);
}
.pc-callout p:last-child {
margin-bottom: 0;
}
.pc-callout-info {
--pc-callout-color: #2563eb;
}
.pc-callout-tip {
--pc-callout-color: #16803c;
}
.pc-callout-warning {
--pc-callout-color: #d97706;
}
.pc-callout-danger {
--pc-callout-color: #be123c;
}
.pc-callout-food {
--pc-callout-color: #ca8a04;
}
.pc-callout-vet {
--pc-callout-color: #7c3aed;
}
.pc-faq {
display: grid;
gap: var(--pc-space-4);
width: 100%;
margin-block: var(--pc-space-5);
}
.pc-faq-list {
display: grid;
gap: var(--pc-space-3);
}
.pc-faq-item {
border: 1px solid var(--pc-color-border);
border-radius: var(--pc-radius);
background: var(--pc-color-surface);
box-shadow: 0 8px 24px rgba(17, 24, 39, 0.05);
overflow: clip;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.pc-faq-item:hover,
.pc-faq-item[open],
.pc-faq-item.is-active {
border-color: color-mix(in srgb, var(--pc-color-primary) 55%, var(--pc-color-border));
box-shadow: var(--pc-shadow-soft);
}
.pc-faq-question {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--pc-space-4);
padding: 1.1rem 1.25rem;
color: var(--pc-color-text);
font-weight: 800;
line-height: 1.45;
list-style: none;
cursor: pointer;
}
.pc-faq-question::-webkit-details-marker {
display: none;
}
.pc-faq-question::marker {
content: "";
}
.pc-faq-question:focus-visible {
outline: 3px solid color-mix(in srgb, var(--pc-color-primary) 38%, transparent);
outline-offset: -3px;
}
.pc-faq-toggle {
position: relative;
flex: 0 0 auto;
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
background: var(--pc-color-primary-soft);
color: var(--pc-color-primary-dark);
}
.pc-faq-toggle::before,
.pc-faq-toggle::after {
position: absolute;
top: 50%;
left: 50%;
width: 0.75rem;
height: 2px;
border-radius: 2px;
background: currentColor;
content: "";
transform: translate(-50%, -50%);
transition: transform 0.2s ease;
}
.pc-faq-toggle::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.pc-faq-item[open] .pc-faq-toggle::after {
transform: translate(-50%, -50%) rotate(0);
}
.pc-faq-answer {
padding: 0 1.25rem 1.25rem;
border-top: 1px solid var(--pc-color-border);
background: linear-gradient(180deg, var(--pc-color-primary-soft), var(--pc-color-surface) 3rem);
color: var(--pc-color-muted);
line-height: 1.75;
}
.pc-faq-answer > div {
padding-top: var(--pc-space-4);
}
.pc-faq-answer > div > :last-child {
margin-bottom: 0;
}
.pc-faq-empty {
padding: var(--pc-space-5);
border: 1px dashed var(--pc-color-border);
border-radius: var(--pc-radius);
background: var(--pc-color-surface-alt);
color: var(--pc-color-muted);
text-align: center;
}
.pc-comments {
width: 100%;
margin-top: var(--pc-space-6);
}
.pc-comments-inner {
padding: var(--pc-space-5);
border: 1px solid var(--pc-color-border);
border-radius: var(--pc-radius);
background: var(--pc-color-surface);
color: var(--pc-color-text);
box-shadow: var(--pc-shadow-soft);
}
html[data-theme="dark"] .pc-faq-item {
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}
@media (max-width: 479px) {
.pc-faq {
margin-block: var(--pc-space-4);
}
.pc-faq-question {
padding: var(--pc-space-4);
font-size: 0.9375rem;
}
.pc-faq-answer {
padding: 0 var(--pc-space-4) var(--pc-space-4);
}
.pc-comments-inner {
padding: var(--pc-space-4);
}
}
.pc-table-wrap,
.pc-entry-content .wp-block-table {
overflow-x: auto;
}
.pc-table,
.pc-entry-content table {
min-width: 100%;
background: var(--pc-color-surface);
}
.pc-social-link-youtube:hover,
.pc-social-link-youtube:focus {
border-color: #ff0000;
color: #ff0000;
}
.pc-social-link-instagram:hover,
.pc-social-link-instagram:focus {
border-color: #c13584;
color: #c13584;
}
.pc-social-link-facebook:hover,
.pc-social-link-facebook:focus {
border-color: #1877f2;
color: #1877f2;
}
.pc-social-link-x:hover,
.pc-social-link-x:focus {
border-color: #111827;
color: #111827;
}
.pc-header-search {
max-width: 37.5rem;
}
.pc-site-footer .pc-footer-inner {
gap: var(--pc-space-5);
padding-block: clamp(2rem, 5vw, 3.25rem) var(--pc-space-4);
}
.pc-site-footer .pc-footer-grid {
grid-template-columns: 1fr;
gap: var(--pc-space-5);
}
.pc-site-footer .pc-footer-title {
font-size: 1.1rem;
}
.pc-site-footer .pc-footer-column h2 {
font-size: 0.82rem;
}
.pc-site-footer .pc-footer-links a {
font-size: 0.875rem;
font-weight: 600;
}
.pc-site-footer .pc-footer-bottom {
grid-template-columns: 1fr;
gap: var(--pc-space-2);
padding-top: var(--pc-space-4);
}
.pc-site-footer .pc-footer-bottom p:last-child {
text-align: left;
}
@media (min-width: 768px) {
.pc-site-footer .pc-footer-grid {
grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr) minmax(0, 0.9fr);
}
.pc-site-footer .pc-footer-bottom {
grid-template-columns: 1fr auto;
}
.pc-site-footer .pc-footer-bottom p:last-child {
text-align: right;
}
}
.pc-site-footer {
background: #f4f7f5;
border-top: 1px solid var(--pc-color-border);
color: var(--pc-color-text);
}
.pc-site-footer .pc-footer-inner {
gap: var(--pc-space-5);
padding-block: clamp(2.5rem, 6vw, 4rem) var(--pc-space-4);
}
.pc-site-footer .pc-footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--pc-space-6);
}
.pc-site-footer .pc-footer-title {
color: var(--pc-color-text);
font-size: 1.125rem;
font-weight: 900;
letter-spacing: 0.02em;
}
.pc-site-footer .pc-footer-description {
max-width: 25rem;
color: var(--pc-color-muted);
font-size: 0.95rem;
line-height: 1.7;
}
.pc-site-footer .pc-footer-column h2 {
position: relative;
width: fit-content;
color: var(--pc-color-text);
font-size: 0.9rem;
font-weight: 900;
letter-spacing: 0.04em;
text-transform: none;
}
.pc-site-footer .pc-footer-column h2::after {
display: block;
width: 3.2rem;
height: 2px;
margin-top: 0.5rem;
background: var(--pc-color-primary);
content: "";
}
.pc-site-footer .pc-footer-links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem var(--pc-space-5);
}
.pc-site-footer .pc-footer-links a {
color: #52637a;
font-size: 0.875rem;
font-weight: 700;
text-decoration: none;
}
.pc-site-footer .pc-footer-links a:hover,
.pc-site-footer .pc-footer-links a:focus {
color: var(--pc-color-primary);
}
.pc-site-footer .pc-footer-social .pc-social-link {
border-color: #dbe3df;
background: #e8eef0;
color: #52637a;
}
.pc-site-footer .pc-footer-social .pc-social-link:hover,
.pc-site-footer .pc-footer-social .pc-social-link:focus {
border-color: color-mix(in srgb, var(--pc-color-primary) 42%, #dbe3df);
background: var(--pc-color-primary-soft);
color: var(--pc-color-primary);
}
.pc-footer-legal {
display: flex;
flex-wrap: wrap;
gap: var(--pc-space-2) var(--pc-space-4);
justify-content: center;
padding-block: var(--pc-space-4);
border-top: 1px solid var(--pc-color-border);
border-bottom: 1px solid var(--pc-color-border);
}
.pc-footer-legal a {
color: #52637a;
font-size: 0.8125rem;
font-weight: 800;
letter-spacing: 0.04em;
text-decoration: none;
}
.pc-footer-legal a:hover,
.pc-footer-legal a:focus {
color: var(--pc-color-primary);
}
.pc-site-footer .pc-footer-bottom {
display: grid;
grid-template-columns: 1fr;
gap: var(--pc-space-2);
padding-top: 0;
border-top: 0;
color: var(--pc-color-muted);
font-size: 0.8125rem;
}
.pc-site-footer .pc-footer-bottom p,
.pc-site-footer .pc-footer-slogan {
color: var(--pc-color-muted);
}
.pc-site-footer .pc-footer-slogan {
font-weight: 800;
letter-spacing: 0.04em;
}
html[data-theme="dark"] .pc-site-footer {
background: #0d1712;
border-top-color: var(--pc-color-border);
}
html[data-theme="dark"] .pc-site-footer .pc-footer-links a,
html[data-theme="dark"] .pc-footer-legal a {
color: var(--pc-color-muted);
}
html[data-theme="dark"] .pc-site-footer .pc-footer-social .pc-social-link {
border-color: var(--pc-color-border);
background: var(--pc-color-surface-alt);
color: var(--pc-color-text);
}
@media (min-width: 768px) {
.pc-site-footer .pc-footer-grid {
grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1.6fr);
align-items: start;
}
.pc-site-footer .pc-footer-links {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pc-site-footer .pc-footer-bottom {
grid-template-columns: 1fr auto;
align-items: center;
}
.pc-site-footer .pc-footer-bottom p:last-child {
text-align: right;
}
}
.pc-site-footer .pc-footer-inner {
padding-block: 3rem 1.5rem;
}
.pc-site-footer .pc-footer-grid {
align-items: start;
gap: clamp(2rem, 6vw, 5rem);
}
.pc-site-footer .pc-footer-brand {
max-width: 23rem;
}
.pc-site-footer .pc-footer-column {
min-width: 0;
}
.pc-site-footer .pc-footer-links {
grid-template-columns: 1fr;
gap: 0.65rem 2.5rem;
max-width: 34rem;
}
.pc-site-footer .pc-footer-links li {
min-width: 0;
}
.pc-site-footer .pc-footer-links a {
display: inline-block;
line-height: 1.35;
overflow-wrap: anywhere;
}
.pc-site-footer .pc-footer-legal {
margin-top: var(--pc-space-4);
padding-block: var(--pc-space-4);
line-height: 1.4;
}
.pc-site-footer .pc-footer-bottom {
padding-top: var(--pc-space-3);
}
@media (min-width: 768px) {
.pc-site-footer .pc-footer-grid {
grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 1.3fr);
}
.pc-site-footer .pc-footer-links {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1180px) {
.pc-site-footer .pc-footer-grid {
grid-template-columns: minmax(18rem, 0.75fr) minmax(0, 1.25fr);
}
}
.pc-site-footer .pc-footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--pc-space-6);
}
.pc-site-footer .pc-footer-column {
min-width: 0;
}
.pc-site-footer .pc-footer-links {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1.4rem;
max-width: none;
}
.pc-site-footer .pc-footer-links li {
width: auto;
min-width: auto;
}
.pc-site-footer .pc-footer-links a {
white-space: nowrap;
word-break: normal;
overflow-wrap: normal;
}
.pc-site-footer .pc-footer-legal {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem 1.25rem;
margin-top: var(--pc-space-5);
padding-block: var(--pc-space-4);
clear: both;
}
.pc-site-footer .pc-footer-bottom {
display: grid;
grid-template-columns: 1fr;
gap: var(--pc-space-2);
}
@media (min-width: 768px) {
.pc-site-footer .pc-footer-grid {
grid-template-columns: minmax(17rem, 0.85fr) minmax(0, 1.45fr);
align-items: start;
}
.pc-site-footer .pc-footer-bottom {
grid-template-columns: 1fr auto;
align-items: center;
}
}
.pc-site-footer {
background: #f4f7f5;
border-top: 1px solid var(--pc-color-border);
color: var(--pc-color-text);
}
.pc-site-footer .pc-footer-inner {
display: block;
padding-block: 3rem 1.5rem;
}
.pc-footer-main {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
.pc-footer-categories {
min-width: 0;
}
.pc-footer-links-wrap {
min-width: 0;
}
.pc-footer-categories h2,
.pc-footer-links-wrap h2 {
position: relative;
margin: 0 0 1.25rem;
color: var(--pc-color-text);
font-size: 0.95rem;
font-weight: 900;
}
.pc-footer-categories h2::after,
.pc-footer-links-wrap h2::after {
display: block;
width: 3.2rem;
height: 2px;
margin-top: 0.55rem;
background: var(--pc-color-primary);
content: "";
}
.pc-footer-category-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem 1.5rem;
padding: 0;
margin: 0;
list-style: none;
}
.pc-footer-category-grid a {
display: inline-block;
color: #52637a;
font-size: 0.875rem;
font-weight: 700;
line-height: 1.35;
text-decoration: none;
}
.pc-footer-category-grid a:hover,
.pc-footer-category-grid a:focus {
color: var(--pc-color-primary);
}
.pc-footer-links,
.pc-footer-legal-menu {
padding: 0;
margin: 0;
list-style: none;
}
.pc-footer-links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem 1.25rem;
}
.pc-footer-links a {
display: inline-block;
color: #52637a;
font-size: 0.875rem;
font-weight: 650;
line-height: 1.35;
text-decoration: none;
}
.pc-footer-links a:hover,
.pc-footer-links a:focus {
color: var(--pc-color-primary);
}
.pc-site-footer .pc-footer-legal {
display: block;
margin-top: 3rem;
padding-block: 1.25rem;
border-top: 1px solid var(--pc-color-border);
border-bottom: 1px solid var(--pc-color-border);
}
.pc-footer-legal-menu {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1.25rem;
justify-content: center;
}
.pc-footer-legal-menu a {
color: #52637a;
font-size: 0.8125rem;
font-weight: 800;
letter-spacing: 0.03em;
text-decoration: none;
white-space: nowrap;
}
.pc-footer-legal-menu a:hover,
.pc-footer-legal-menu a:focus {
color: var(--pc-color-primary);
}
.pc-site-footer .pc-footer-bottom {
display: flex;
flex-direction: column;
gap: 0.5rem;
justify-content: space-between;
margin-top: 1.5rem;
padding-top: 0;
border-top: 0;
color: var(--pc-color-muted);
font-size: 0.8125rem;
}
.pc-site-footer .pc-footer-bottom p {
margin: 0;
color: var(--pc-color-muted);
}
.pc-site-footer .pc-footer-slogan {
font-weight: 800;
letter-spacing: 0.03em;
}
html[data-theme="dark"] .pc-site-footer {
background: var(--pc-color-surface);
}
html[data-theme="dark"] .pc-footer-category-grid a,
html[data-theme="dark"] .pc-footer-links a,
html[data-theme="dark"] .pc-footer-legal-menu a {
color: var(--pc-color-muted);
}
@media (min-width: 768px) {
.pc-footer-main {
grid-template-columns: minmax(220px, 320px) minmax(0, 1fr) minmax(180px, 0.65fr);
gap: 3.5rem;
}
.pc-footer-category-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pc-site-footer .pc-footer-bottom {
flex-direction: row;
align-items: center;
}
}
@media (min-width: 1024px) {
.pc-footer-category-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
} .pc-grid-mobile-1 {
grid-template-columns: minmax(0, 1fr);
}
.pc-grid-mobile-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pc-hero-overlay-40 .pc-featured-card-overlay::after {
background:
linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, 0.3) 100%),
linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.16) 58%, rgba(0, 0, 0, 0.04));
}
.pc-hero-overlay-50 .pc-featured-card-overlay::after {
background:
linear-gradient(180deg, transparent 46%, rgba(0, 0, 0, 0.36) 100%),
linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 58%, rgba(0, 0, 0, 0.05));
}
.pc-hero-overlay-60 .pc-featured-card-overlay::after {
background:
linear-gradient(180deg, transparent 44%, rgba(0, 0, 0, 0.42) 100%),
linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.24) 56%, rgba(0, 0, 0, 0.06));
}
.pc-hero-overlay-70 .pc-featured-card-overlay::after {
background:
linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.48) 100%),
linear-gradient(90deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.28) 55%, rgba(0, 0, 0, 0.08));
}
.pc-hero-text-align-center .pc-featured-card-content {
align-content: end;
justify-items: center;
max-width: 48rem;
margin-inline: auto;
text-align: center;
}
.pc-home-weekly--grid .pc-weekly-grid .pc-small-card {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-content: start;
overflow: hidden;
border: 1px solid var(--pc-color-border);
border-radius: var(--pc-radius);
background: var(--pc-color-surface);
box-shadow: var(--pc-shadow-soft);
}
.pc-home-weekly--grid .pc-small-card-media {
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
border-radius: 0;
}
.pc-home-weekly--grid .pc-small-card-body {
padding: var(--pc-space-4);
}
.pc-weekly-section.pc-card-style--classic .pc-small-card {
padding: var(--pc-space-3);
border: 1px solid var(--pc-color-border);
border-radius: var(--pc-radius);
background: var(--pc-color-surface);
box-shadow: var(--pc-shadow-soft);
}
.pc-weekly-section.pc-card-style--overlay .pc-small-card {
position: relative;
display: grid;
min-height: 11rem;
padding: 0;
overflow: hidden;
border-radius: var(--pc-radius);
background: #07110b;
}
.pc-weekly-section.pc-card-style--overlay .pc-small-card::after {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, 0.82));
content: "";
pointer-events: none;
}
.pc-weekly-section.pc-card-style--overlay .pc-small-card-media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: 0;
}
.pc-weekly-section.pc-card-style--overlay .pc-small-card-body {
position: relative;
z-index: 2;
align-self: end;
padding: var(--pc-space-4);
}
.pc-weekly-section.pc-card-style--overlay .pc-card-title a,
.pc-weekly-section.pc-card-style--overlay .pc-meta {
color: #ffffff;
}
.pc-home-latest--magazine .pc-current-news-grid > .pc-card:first-child,
.pc-magazine-strip.pc-home-latest--magazine .pc-grid > .pc-card:first-child {
grid-column: 1 / -1;
}
.pc-home-latest--magazine .pc-current-news-grid > .pc-card:first-child .pc-card-title {
font-size: 1.35rem;
}
.pc-home-latest--list .pc-current-news-grid,
.pc-magazine-strip.pc-home-latest--list .pc-grid {
grid-template-columns: minmax(0, 1fr);
}
.pc-home-latest--list .pc-article-card {
display: grid;
grid-template-columns: minmax(8rem, 36%) minmax(0, 1fr);
height: auto;
}
.pc-home-latest--list .pc-article-card .pc-card-media {
height: 100%;
min-height: 10rem;
aspect-ratio: auto;
}
.pc-home-latest--list .pc-card-body {
padding: var(--pc-space-4);
}
.pc-magazine-strip.pc-card-style--minimal .pc-card,
.pc-current-news.pc-card-style--minimal .pc-card {
border-color: transparent;
box-shadow: none;
}
.pc-magazine-strip.pc-card-style--minimal .pc-card-body,
.pc-current-news.pc-card-style--minimal .pc-card-body {
padding: var(--pc-space-3) 0;
}
.pc-magazine-strip.pc-card-style--minimal .pc-card-excerpt,
.pc-magazine-strip.pc-card-style--minimal .pc-btn,
.pc-current-news.pc-card-style--minimal .pc-card-excerpt,
.pc-current-news.pc-card-style--minimal .pc-btn {
display: none;
}
.pc-magazine-strip.pc-card-style--overlay .pc-article-card,
.pc-current-news.pc-card-style--overlay .pc-article-card {
position: relative;
display: grid;
min-height: 20rem;
background: #07110b;
}
.pc-magazine-strip.pc-card-style--overlay .pc-article-card::after,
.pc-current-news.pc-card-style--overlay .pc-article-card::after {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, transparent 24%, rgba(0, 0, 0, 0.86));
content: "";
pointer-events: none;
}
.pc-magazine-strip.pc-card-style--overlay .pc-card-media,
.pc-current-news.pc-card-style--overlay .pc-card-media {
position: absolute;
inset: 0;
height: 100%;
}
.pc-magazine-strip.pc-card-style--overlay .pc-card-body,
.pc-current-news.pc-card-style--overlay .pc-card-body {
position: relative;
z-index: 2;
align-self: end;
padding: var(--pc-space-5);
}
.pc-magazine-strip.pc-card-style--overlay .pc-card-title a,
.pc-magazine-strip.pc-card-style--overlay .pc-card-excerpt,
.pc-magazine-strip.pc-card-style--overlay .pc-meta,
.pc-current-news.pc-card-style--overlay .pc-card-title a,
.pc-current-news.pc-card-style--overlay .pc-card-excerpt,
.pc-current-news.pc-card-style--overlay .pc-meta {
color: #ffffff;
}
.pc-magazine-strip.pc-card-style--overlay .pc-card-excerpt,
.pc-magazine-strip.pc-card-style--overlay .pc-btn,
.pc-current-news.pc-card-style--overlay .pc-card-excerpt,
.pc-current-news.pc-card-style--overlay .pc-btn {
display: none;
}
.pc-home-latest--list.pc-card-style--overlay .pc-article-card {
grid-template-columns: minmax(0, 1fr);
}
.pc-dark-section--grid .pc-video-layout,
.pc-dark-section--list .pc-video-layout {
grid-template-columns: minmax(0, 1fr);
}
.pc-dark-section--list .pc-video-list {
grid-template-columns: minmax(0, 1fr);
}
.pc-dark-section--list .pc-small-card {
padding-bottom: var(--pc-space-3);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.pc-dark-card-style--classic .pc-card {
border-color: var(--pc-color-border);
background: var(--pc-color-surface);
color: var(--pc-color-text);
}
.pc-dark-card-style--classic .pc-small-card {
padding: var(--pc-space-3);
border: 1px solid var(--pc-color-border);
border-radius: var(--pc-radius);
background: var(--pc-color-surface);
}
.pc-dark-card-style--classic .pc-card-title a,
.pc-dark-card-style--classic .pc-card-excerpt,
.pc-dark-card-style--classic .pc-meta,
.pc-dark-card-style--classic .pc-small-card .pc-card-title a {
color: var(--pc-color-text);
}
.pc-category-section--circle .pc-category-card {
display: grid;
place-items: center;
aspect-ratio: 1;
border-radius: 50%;
background: color-mix(in srgb, var(--pc-color-primary-soft) 72%, var(--pc-color-surface));
text-align: center;
}
.pc-category-section--circle .pc-category-card .pc-card-body {
padding: var(--pc-space-3);
}
.pc-category-section--compact .pc-category-card {
border-color: transparent;
box-shadow: none;
}
.pc-category-section--compact .pc-category-card .pc-card-body {
padding: var(--pc-space-3);
}
.pc-category-section--compact .pc-category-card .pc-meta {
font-size: 0.75rem;
}
.pc-home-popular--numbered .pc-compact-list {
counter-reset: pc-popular;
}
.pc-home-popular--numbered .pc-small-card {
position: relative;
padding-left: 2rem;
counter-increment: pc-popular;
}
.pc-home-popular--numbered .pc-small-card::before {
position: absolute;
top: 50%;
left: 0;
display: grid;
place-items: center;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background: var(--pc-color-primary);
color: #ffffff;
font-size: 0.75rem;
font-weight: 800;
content: counter(pc-popular);
transform: translateY(-50%);
}
.pc-home-popular--compact .pc-small-card,
.pc-home-popular--no-thumbnail .pc-small-card {
grid-template-columns: minmax(0, 1fr);
}
.pc-home-popular--compact .pc-small-card-media,
.pc-home-popular--no-thumbnail .pc-small-card-media {
display: none;
}
.pc-home-popular--compact .pc-small-card {
padding-block: var(--pc-space-2);
}
@media (min-width: 768px) {
.pc-grid-tablet-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pc-grid-tablet-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pc-home-weekly--horizontal .pc-weekly-grid {
display: flex;
flex-wrap: wrap;
}
.pc-home-weekly--horizontal .pc-small-card {
flex: 1 1 18rem;
}
.pc-dark-section--grid .pc-video-feature-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.pc-grid-desktop-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pc-grid-desktop-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pc-grid-desktop-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pc-grid-desktop-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.pc-grid-desktop-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.pc-home-hero--classic,
.pc-home-hero--split {
grid-template-columns: minmax(0, 1fr);
}
.pc-home-hero--classic .pc-home-hero-side,
.pc-home-hero--split .pc-home-hero-side {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: none;
}
.pc-home-hero--split .pc-featured-card-overlay {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
background: var(--pc-color-surface);
color: var(--pc-color-text);
}
.pc-home-hero--split .pc-featured-card-overlay::after {
display: none;
}
.pc-home-hero--split .pc-featured-card-media {
grid-column: 2;
grid-row: 1;
min-height: 28rem;
}
.pc-home-hero--split .pc-featured-card-content {
position: relative;
grid-column: 1;
grid-row: 1;
align-content: center;
max-width: none;
color: var(--pc-color-text);
}
.pc-home-hero--split .pc-featured-card-title a,
.pc-home-hero--split .pc-featured-card-excerpt,
.pc-home-hero--split .pc-featured-card-meta .pc-meta {
color: var(--pc-color-text);
}
.pc-home-hero--split .pc-featured-card-excerpt,
.pc-home-hero--split .pc-featured-card-meta .pc-meta {
color: var(--pc-color-muted);
}
.pc-dark-section--grid .pc-video-feature-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
} .pc-widget {
margin-block: var(--pc-space-5);
}
.pc-widget-header {
margin-bottom: var(--pc-space-4);
padding-bottom: var(--pc-space-2);
border-bottom: 1px solid var(--pc-color-border);
}
.pc-widget-title {
margin: 0;
font-size: 1.25rem;
}
.pc-widget-items {
display: grid;
gap: var(--pc-space-4);
}
.pc-widget-card {
min-width: 0;
overflow: hidden;
border: 1px solid var(--pc-color-border);
border-radius: var(--pc-radius);
background: var(--pc-color-surface);
box-shadow: var(--pc-shadow-soft);
}
.pc-widget-card-media {
display: block;
aspect-ratio: 3 / 2;
overflow: hidden;
background: var(--pc-color-background);
}
.pc-widget-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.2s ease;
}
.pc-widget-card:hover .pc-widget-card-media img,
.pc-widget-card:focus-within .pc-widget-card-media img {
transform: scale(1.025);
}
.pc-widget-card-body {
display: grid;
gap: var(--pc-space-2);
padding: var(--pc-space-4);
}
.pc-widget-card-body .pc-card-title {
margin: 0;
}
.pc-widget-meta {
display: flex;
flex-wrap: wrap;
gap: var(--pc-space-2);
margin: 0;
color: var(--pc-color-muted);
font-size: 0.8125rem;
}
.pc-widget-list,
.pc-widget-compact {
grid-template-columns: minmax(0, 1fr);
}
.pc-widget-list .pc-widget-card,
.pc-widget-style-horizontal .pc-widget-card {
display: grid;
grid-template-columns: minmax(7rem, 34%) minmax(0, 1fr);
}
.pc-widget-list .pc-widget-card-media,
.pc-widget-style-horizontal .pc-widget-card-media {
height: 100%;
aspect-ratio: auto;
}
.pc-widget-compact .pc-widget-card {
border-color: transparent;
box-shadow: none;
}
.pc-widget-compact .pc-widget-card-media {
display: none;
}
.pc-widget-compact .pc-widget-card-body {
padding: var(--pc-space-2) 0;
border-bottom: 1px solid var(--pc-color-border);
}
.pc-widget-style-minimal .pc-widget-card {
border-color: transparent;
box-shadow: none;
}
.pc-widget-style-minimal .pc-widget-card-body {
padding-inline: 0;
}
.pc-widget-overlay .pc-widget-card,
.pc-widget-style-overlay .pc-widget-card {
position: relative;
display: grid;
min-height: 18rem;
background: #07110b;
}
.pc-widget-overlay .pc-widget-card::after,
.pc-widget-style-overlay .pc-widget-card::after {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, transparent 24%, rgba(0, 0, 0, 0.86));
content: "";
pointer-events: none;
}
.pc-widget-overlay .pc-widget-card-media,
.pc-widget-style-overlay .pc-widget-card-media {
position: absolute;
inset: 0;
height: 100%;
}
.pc-widget-overlay .pc-widget-card-body,
.pc-widget-style-overlay .pc-widget-card-body {
position: relative;
z-index: 2;
align-self: end;
}
.pc-widget-overlay .pc-card-title a,
.pc-widget-overlay .pc-widget-meta,
.pc-widget-style-overlay .pc-card-title a,
.pc-widget-style-overlay .pc-widget-meta {
color: #ffffff;
}
.pc-widget-cta {
display: grid;
gap: var(--pc-space-3);
padding: var(--pc-space-5);
border: 1px solid color-mix(in srgb, var(--pc-color-primary) 32%, var(--pc-color-border));
border-left: 4px solid var(--pc-color-primary);
border-radius: var(--pc-radius);
background: var(--pc-color-primary-soft);
}
.pc-widget-cta .pc-btn {
width: fit-content;
}
.pc-widget-cta-text > :first-child {
margin-top: 0;
}
.pc-widget-cta-text > :last-child {
margin-bottom: 0;
}
.pc-widget-ad {
width: 100%;
}
@media (min-width: 768px) {
.pc-widget-grid,
.pc-widget-overlay {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.pc-widget-grid,
.pc-widget-overlay {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
} .pc-language-switcher {
flex-basis: 100%;
min-width: 0;
}
.pc-language-list {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--pc-space-2);
padding: 0;
margin: 0;
list-style: none;
}
.pc-language-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 2rem;
padding: 0.3rem 0.55rem;
border: 1px solid transparent;
border-radius: 999px;
color: var(--pc-color-muted);
font-size: 0.8125rem;
font-weight: 700;
line-height: 1;
text-decoration: none;
white-space: nowrap;
}
a.pc-language-link:hover,
a.pc-language-link:focus,
.pc-language-item.is-active .pc-language-link {
border-color: color-mix(in srgb, var(--pc-color-primary) 45%, var(--pc-color-border));
background: var(--pc-color-primary-soft);
color: var(--pc-color-primary-dark);
}
.pc-language-flag {
display: block;
width: 20px;
height: 14px;
border-radius: 2px;
object-fit: cover;
}
.pc-language-code {
display: grid;
place-items: center;
min-width: 20px;
height: 14px;
border-radius: 2px;
background: var(--pc-color-background);
color: var(--pc-color-text);
font-size: 0.625rem;
font-weight: 800;
}
@media (min-width: 768px) {
.pc-language-switcher {
flex-basis: auto;
}
} .pc-404 {
background: var(--pc-color-background);
}
.pc-404-hero {
position: relative;
display: grid;
align-items: center;
min-height: 34rem;
padding-block: var(--pc-space-6);
overflow: hidden;
background:
linear-gradient(180deg, var(--pc-color-surface), var(--pc-color-primary-soft));
text-align: center;
}
.pc-404-hero .pc-container-narrow {
position: relative;
}
.pc-404-code {
position: absolute;
z-index: 0;
top: 50%;
left: 50%;
color: var(--pc-color-primary);
font-size: 7rem;
font-weight: 900;
line-height: 1;
opacity: 0.07;
transform: translate(-50%, -50%);
user-select: none;
}
.pc-404-hero-content {
position: relative;
z-index: 1;
display: grid;
justify-items: center;
gap: var(--pc-space-4);
}
.pc-404-icon {
font-size: 3rem;
line-height: 1;
}
.pc-404-title {
max-width: 48rem;
margin: 0;
font-size: 2rem;
line-height: 1.12;
}
.pc-404-description {
max-width: 40rem;
margin: 0;
color: var(--pc-color-muted);
font-size: 1.0625rem;
line-height: 1.7;
}
.pc-404-search {
width: 100%;
max-width: 42rem;
}
.pc-404-search .pc-search-form {
width: 100%;
max-width: none;
background: var(--pc-color-surface);
box-shadow: var(--pc-shadow-card);
}
.pc-404-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--pc-space-3);
}
.pc-404-suggestions {
background: var(--pc-color-background);
}
.pc-404-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--pc-space-5);
}
.pc-404-card {
min-width: 0;
padding: var(--pc-space-5);
border: 1px solid var(--pc-color-border);
border-radius: 8px;
background: var(--pc-color-surface);
box-shadow: var(--pc-shadow-soft);
}
.pc-404-card > h2,
.pc-404-card-header {
margin-bottom: var(--pc-space-4);
padding-bottom: var(--pc-space-2);
border-bottom: 2px solid var(--pc-color-primary);
}
.pc-404-card > h2,
.pc-404-card-header h2 {
margin-top: 0;
font-size: 1.125rem;
}
.pc-404-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--pc-space-3);
}
.pc-404-card-header h2 {
margin-bottom: 0;
}
.pc-404-card-header a {
color: var(--pc-color-primary);
font-size: 0.8125rem;
font-weight: 700;
text-decoration: none;
}
.pc-404-list,
.pc-404-category-grid {
display: grid;
gap: var(--pc-space-3);
}
.pc-404-list .pc-small-card {
padding-bottom: var(--pc-space-3);
border-bottom: 1px solid var(--pc-color-border);
}
.pc-404-list .pc-small-card:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.pc-404-category-grid {
grid-template-columns: minmax(0, 1fr);
}
.pc-404-category-grid .pc-category-card {
box-shadow: none;
}
.pc-404-empty {
margin: 0;
color: var(--pc-color-muted);
}
@media (min-width: 768px) {
.pc-404-code {
font-size: 10rem;
}
.pc-404-title {
font-size: 2.75rem;
}
.pc-404-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pc-404-card-wide {
grid-column: 1 / -1;
}
.pc-404-category-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.pc-404-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pc-404-grid > .pc-404-card-wide {
grid-column: span 2;
}
.pc-404-grid > .pc-404-card:last-child {
grid-column: 1 / -1;
}
.pc-404-category-grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
} .pc-tag-hero {
display: grid;
gap: var(--pc-space-3);
padding: var(--pc-space-6);
margin-bottom: var(--pc-space-4);
border: 1px solid var(--pc-color-border);
border-radius: 8px;
background:
linear-gradient(135deg, var(--pc-color-surface), var(--pc-color-primary-soft));
box-shadow: var(--pc-shadow-soft);
}
.pc-tag-badge {
display: inline-flex;
width: fit-content;
padding: 0.25rem 0.6rem;
border-radius: 999px;
background: var(--pc-color-primary);
color: #ffffff;
font-size: 0.75rem;
font-weight: 800;
}
.pc-tag-title {
margin: 0;
font-size: 2rem;
line-height: 1.15;
}
.pc-tag-description {
max-width: 48rem;
margin: 0;
color: var(--pc-color-muted);
font-size: 1rem;
line-height: 1.7;
}
.pc-tag-stats {
width: fit-content;
margin: 0;
color: var(--pc-color-primary-dark);
font-size: 0.875rem;
font-weight: 800;
}
.pc-related-tags {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--pc-space-2);
margin-bottom: var(--pc-space-6);
}
.pc-related-tags ul {
display: flex;
flex-wrap: wrap;
gap: var(--pc-space-2);
padding: 0;
margin: 0;
list-style: none;
}
.pc-related-tags-label {
color: var(--pc-color-muted);
font-size: 0.8125rem;
font-weight: 700;
}
.pc-related-tag {
display: inline-flex;
padding: 0.3rem 0.65rem;
border: 1px solid var(--pc-color-border);
border-radius: 999px;
background: var(--pc-color-surface);
color: var(--pc-color-text);
font-size: 0.8125rem;
font-weight: 700;
text-decoration: none;
}
.pc-related-tag:hover,
.pc-related-tag:focus {
border-color: var(--pc-color-primary);
background: var(--pc-color-primary-soft);
color: var(--pc-color-primary-dark);
}
.pc-tag-content {
margin-top: var(--pc-space-5);
}
.pc-tag-empty {
display: grid;
justify-items: center;
gap: var(--pc-space-3);
padding-inline: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.pc-empty-icon {
display: grid;
place-items: center;
width: 4rem;
height: 4rem;
border-radius: 50%;
background: var(--pc-color-primary-soft);
color: var(--pc-color-primary);
font-size: 2rem;
font-weight: 900;
}
.pc-empty-title {
margin: 0;
font-size: 1.75rem;
}
.pc-empty-description {
max-width: 44rem;
margin: 0;
color: var(--pc-color-muted);
line-height: 1.7;
}
.pc-empty-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--pc-space-3);
margin-top: var(--pc-space-2);
}
.pc-empty-suggestions {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--pc-space-6);
width: 100%;
margin-top: var(--pc-space-6);
text-align: left;
}
.pc-empty-suggestions > section > h3 {
margin: 0 0 var(--pc-space-4);
padding-bottom: var(--pc-space-2);
border-bottom: 2px solid var(--pc-color-primary);
font-size: 1.125rem;
}
.pc-empty-suggestion-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--pc-space-4);
}
.pc-empty-note {
margin: 0;
color: var(--pc-color-muted);
}
.pc-tag-ad {
margin-top: var(--pc-space-6);
}
@media (max-width: 479px) {
.pc-empty-actions {
width: 100%;
}
.pc-empty-actions .pc-btn {
width: 100%;
}
}
@media (min-width: 768px) {
.pc-tag-title {
font-size: 2.75rem;
}
.pc-empty-suggestion-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.pc-empty-suggestions {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}