:root {
--cwa-teal: #4db9bd;
--cwa-teal-dark: #319fa3;
--cwa-pink: #ec4b84;
--cwa-text: #1f2937;
--cwa-muted: #6b7280;
--cwa-paper: #f8f3e8;
--cwa-border: rgba(77, 185, 189, 0.14);
--cwa-shadow-soft: 0 5px 20px rgba(31, 41, 55, 0.035);
} .cwa-discover-section h2,
.cwa-theme-heading,
.cwa-showcase-heading {
display: flex;
min-width: 0;
margin: 0;
align-items: center;
gap: 10px;
color: var(--cwa-text);
font-size: 30px;
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.015em;
text-align: left;
}
.cwa-showcase-heading {
margin-bottom: 18px;
}
.cwa-theme-heading {
margin-bottom: 20px;
} .cwa-discover-section h2::before,
.cwa-theme-heading::before {
content: "";
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
border: 0;
border-radius: 0;
background: var(--cwa-pink);
opacity: 0.9;
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M532.8 134.464c-12.16-35.392-32-35.328-44.032.128l-67.84 200c-12.096 35.456-50.88 74.24-86.336 86.336L136.064 488.448c-35.456 12.032-35.52 32-.192 44.288l197.376 68.672c35.328 12.288 74.24 51.328 86.4 86.72l68.864 200.192c12.16 35.392 31.872 35.328 43.84-.128l67.264-199.36c11.968-35.456 50.688-74.368 86.08-86.464l201.664-69.12c35.392-12.096 35.392-31.808-.064-43.776l-198.464-67.2c-35.456-11.968-74.432-50.688-86.592-86.08L532.8 134.464z'/%3E%3Cpath d='M883.648 111.552c-3.456-10.112-9.152-10.112-12.608 0l-19.392 57.216a44.672 44.672 0 0 1-24.64 24.64l-56.704 19.264c-10.112 3.456-10.176 9.152 0 12.672l56.32 19.648a45.44 45.44 0 0 1 24.704 24.768l19.648 57.216c3.52 10.112 9.152 10.048 12.544-.064l19.2-56.96a44.672 44.672 0 0 1 24.64-24.704l57.6-19.712c10.112-3.52 10.112-9.152 0-12.544l-56.704-19.2a44.8 44.8 0 0 1-24.768-24.576l-19.84-57.6z'/%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M532.8 134.464c-12.16-35.392-32-35.328-44.032.128l-67.84 200c-12.096 35.456-50.88 74.24-86.336 86.336L136.064 488.448c-35.456 12.032-35.52 32-.192 44.288l197.376 68.672c35.328 12.288 74.24 51.328 86.4 86.72l68.864 200.192c12.16 35.392 31.872 35.328 43.84-.128l67.264-199.36c11.968-35.456 50.688-74.368 86.08-86.464l201.664-69.12c35.392-12.096 35.392-31.808-.064-43.776l-198.464-67.2c-35.456-11.968-74.432-50.688-86.592-86.08L532.8 134.464z'/%3E%3Cpath d='M883.648 111.552c-3.456-10.112-9.152-10.112-12.608 0l-19.392 57.216a44.672 44.672 0 0 1-24.64 24.64l-56.704 19.264c-10.112 3.456-10.176 9.152 0 12.672l56.32 19.648a45.44 45.44 0 0 1 24.704 24.768l19.648 57.216c3.52 10.112 9.152 10.048 12.544-.064l19.2-56.96a44.672 44.672 0 0 1 24.64-24.704l57.6-19.712c10.112-3.52 10.112-9.152 0-12.544l-56.704-19.2a44.8 44.8 0 0 1-24.768-24.576l-19.84-57.6z'/%3E%3C/svg%3E")
center / contain no-repeat;
transform: translateY(-1px);
} .cwa-discover-section h2::before {
width: 22px;
height: 22px;
flex-basis: 22px;
background: var(--cwa-pink);
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M926.08 211.648l-96.32-91.648a27.904 27.904 0 0 0-39.552 0L134.016 789.44a93.696 93.696 0 0 0 1.792 132.992 95.04 95.04 0 0 0 133.952-1.856l656.192-669.44a27.84 27.84 0 0 0 0.128-39.488z m-167.552 128.448l-52.096-52.096 105.856-106.112a3.456 3.456 0 0 1 4.992 0l47.168 47.168c1.28 1.344 1.28 3.52 0 4.864l-105.92 106.176zM455.04 259.968L328.576 329.344 259.52 456l-69.12-126.72L64 260.096 190.336 190.72 259.52 64l69.12 126.784L455.04 260.032z m216.128 476.864l83.84-24.512-24.576 83.968 24.576 84.032-83.84-24.704-83.84 24.64 24.704-84.032-24.64-83.968 83.84 24.64z m205.056-228.608L960 483.712l-24.448 84.032 24.448 83.968-83.84-24.768-83.776 24.768 24.704-83.968-24.704-84.032 83.84 24.512z'/%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M926.08 211.648l-96.32-91.648a27.904 27.904 0 0 0-39.552 0L134.016 789.44a93.696 93.696 0 0 0 1.792 132.992 95.04 95.04 0 0 0 133.952-1.856l656.192-669.44a27.84 27.84 0 0 0 0.128-39.488z m-167.552 128.448l-52.096-52.096 105.856-106.112a3.456 3.456 0 0 1 4.992 0l47.168 47.168c1.28 1.344 1.28 3.52 0 4.864l-105.92 106.176zM455.04 259.968L328.576 329.344 259.52 456l-69.12-126.72L64 260.096 190.336 190.72 259.52 64l69.12 126.784L455.04 260.032z m216.128 476.864l83.84-24.512-24.576 83.968 24.576 84.032-83.84-24.704-83.84 24.64 24.704-84.032-24.64-83.968 83.84 24.64z m205.056-228.608L960 483.712l-24.448 84.032 24.448 83.968-83.84-24.768-83.776 24.768 24.704-83.968-24.704-84.032 83.84 24.512z'/%3E%3C/svg%3E")
center / contain no-repeat;
} .cwa-popular-heading::before,
.cwa-newly-heading::before {
content: "";
display: block;
width: 21px;
height: 21px;
flex: 0 0 21px;
border: 0;
border-radius: 0;
opacity: 1;
transform: translateY(-1px);
}
.cwa-popular-heading::before {
width: 25px;
height: 25px;
flex-basis: 25px;
background: #ee6193;
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M510.1 510.1l3.8 3.8-3.8-3.8zM514.3 509.6l-4.7 4.7c1.9-1.5 3.4-3 4.7-4.7z'/%3E%3Cpath d='M712.2 230.6c21.3 47.2 24.5 125.2-19.6 162.7C621 118.1 442 64.4 442 64.4c21.3 139.9-74.8 293-169.2 408.4-3.2-55.3-6.6-92.7-37.4-149.7C228.8 425.6 150.8 507 128 609.5c-27.6 141.6 22.8 240.9 214.7 350-60.2-125.2-27.6-196.9 19.6-261.9 50.4-74.8 63.6-146.5 63.6-146.5s40.6 50.4 24.5 130.1c68.2-78 81.4-203.5 71.7-249 156.1 109.1 226 350 135 524.1 481.4-275 118.5-683.5 55.1-725.7z'/%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M510.1 510.1l3.8 3.8-3.8-3.8zM514.3 509.6l-4.7 4.7c1.9-1.5 3.4-3 4.7-4.7z'/%3E%3Cpath d='M712.2 230.6c21.3 47.2 24.5 125.2-19.6 162.7C621 118.1 442 64.4 442 64.4c21.3 139.9-74.8 293-169.2 408.4-3.2-55.3-6.6-92.7-37.4-149.7C228.8 425.6 150.8 507 128 609.5c-27.6 141.6 22.8 240.9 214.7 350-60.2-125.2-27.6-196.9 19.6-261.9 50.4-74.8 63.6-146.5 63.6-146.5s40.6 50.4 24.5 130.1c68.2-78 81.4-203.5 71.7-249 156.1 109.1 226 350 135 524.1 481.4-275 118.5-683.5 55.1-725.7z'/%3E%3C/svg%3E")
center / contain no-repeat;
}
.cwa-newly-heading::before {
background: var(--cwa-teal);
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M511.913993 63.989249c-247.012263 0-447.924744 200.912481-447.924744 447.924744s200.912481 447.924744 447.924744 447.924744 447.924744-200.912481 447.924744-447.924744S758.926256 63.989249 511.913993 63.989249zM671.199059 575.903242 480.263397 575.903242c-17.717453 0-32.166639-14.449185-32.166639-32.166639L448.096758 289.15572c0-17.717453 14.277171-31.994625 31.994625-31.994625s31.994625 14.277171 31.994625 31.994625l0 222.930287 159.285066 0c17.717453 0 31.994625 14.277171 31.994625 31.994625S688.916513 575.903242 671.199059 575.903242z'/%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M511.913993 63.989249c-247.012263 0-447.924744 200.912481-447.924744 447.924744s200.912481 447.924744 447.924744 447.924744 447.924744-200.912481 447.924744-447.924744S758.926256 63.989249 511.913993 63.989249zM671.199059 575.903242 480.263397 575.903242c-17.717453 0-32.166639-14.449185-32.166639-32.166639L448.096758 289.15572c0-17.717453 14.277171-31.994625 31.994625-31.994625s31.994625 14.277171 31.994625 31.994625l0 222.930287 159.285066 0c17.717453 0 31.994625 14.277171 31.994625 31.994625S688.916513 575.903242 671.199059 575.903242z'/%3E%3C/svg%3E")
center / contain no-repeat;
} .cwa-discover-section {
position: relative;
} @media (max-width: 1380px) {
.cwa-discover-section,
.cwa-discover-section.wp-block-group {
box-sizing: border-box;
width: calc(100% - 48px) !important;
max-width: 1200px !important;
margin-right: auto !important;
margin-left: auto !important;
}
}
.cwa-discover-section::before {
content: "";
display: block;
width: 100%;
height: 1px;
margin: 0 auto 28px;
background: rgba(77, 185, 189, 0.18);
}
.cwa-discover-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 20px;
width: 100%;
margin-top: 20px;
}
.cwa-discover-card {
display: flex;
min-width: 0;
flex-direction: column;
color: var(--cwa-teal);
text-align: center;
text-decoration: none;
transition: transform 0.2s ease, color 0.2s ease;
}
.cwa-discover-card__picture {
display: block;
width: 100%;
aspect-ratio: 232 / 300;
overflow: hidden;
border: 1px solid rgba(77, 185, 189, 0.22);
border-radius: 10px;
background: #fff;
box-shadow: 0 3px 12px rgba(31, 41, 55, 0.06);
transition: box-shadow 0.2s ease;
}
.cwa-discover-card__picture img {
display: block;
width: 100%;
height: 100%;
margin: 0;
object-fit: contain;
background: #fff;
}
.cwa-discover-card__title {
display: block;
margin-top: 10px;
color: var(--cwa-teal-dark);
font-size: 16px;
font-weight: 500;
line-height: 1.35;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
} .cwa-discover-refresh {
appearance: none;
display: inline-flex;
box-sizing: border-box;
min-height: 34px;
padding: 0 14px;
align-items: center;
justify-content: center;
gap: 7px;
border: 1px solid rgba(77, 185, 189, 0.5);
border-radius: 999px;
background: rgba(255, 255, 255, 0.96);
color: var(--cwa-teal-dark);
font: inherit;
font-size: 13.5px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
box-shadow:
0 2px 7px rgba(31, 41, 55, 0.045);
cursor: pointer;
transition:
color 0.18s ease,
background-color 0.18s ease,
border-color 0.18s ease,
box-shadow 0.18s ease,
transform 0.18s ease;
}
.cwa-discover-refresh__icon {
display: inline-flex;
width: 14px;
height: 14px;
flex: 0 0 14px;
align-items: center;
justify-content: center;
}
.cwa-discover-refresh__icon svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
fill: currentColor;
stroke: none;
}
.cwa-discover-refresh:hover {
border-color: rgba(49, 159, 163, 0.72);
background: rgba(241, 252, 252, 0.98);
color: #278d92;
box-shadow:
0 5px 13px rgba(31, 41, 55, 0.075);
transform: translateY(-1px);
}
.cwa-discover-refresh:active {
box-shadow:
0 2px 6px rgba(31, 41, 55, 0.05);
transform: translateY(0);
}
.cwa-discover-refresh:focus-visible {
outline: 3px solid rgba(77, 185, 189, 0.25);
outline-offset: 3px;
}
.cwa-discover-refresh:disabled,
.cwa-discover-refresh.is-disabled {
opacity: 0.58;
cursor: default;
pointer-events: none;
transform: none;
} .cwa-discover-refresh.is-loading
.cwa-discover-refresh__icon {
animation:
cwa-discover-refresh-spin 0.65s linear infinite;
}
@keyframes cwa-discover-refresh-spin {
to {
transform: rotate(1turn);
}
}
@media (prefers-reduced-motion: reduce) {
.cwa-discover-refresh,
.cwa-discover-refresh__icon {
transition: none;
animation: none !important;
}
}
@media (max-width: 640px) {
.cwa-discover-refresh {
min-height: 32px;
padding: 0 11px;
gap: 6px;
font-size: 12.5px;
}
.cwa-discover-refresh__icon {
width: 14px;
height: 14px;
flex-basis: 14px;
}
} .cwa-showcase-section {
box-sizing: border-box;
width: calc(100% - 48px);
max-width: 1200px;
margin: 32px auto 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.cwa-showcase-layout,
.cwa-showcase-layout.wp-block-group,
.cwa-showcase-layout.wp-block-group.is-layout-flex {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 32px !important;
width: 100% !important;
align-items: stretch !important;
}
.cwa-showcase-popular,
.cwa-showcase-new {
box-sizing: border-box;
display: flex;
width: 100% !important;
max-width: none !important;
min-width: 0;
margin: 0 !important;
padding: 32px !important;
flex-direction: column;
align-items: stretch;
border-radius: 16px !important;
box-shadow: var(--cwa-shadow-soft);
}
.cwa-showcase-popular {
border: 1px solid rgba(236, 75, 132, 0.14);
background: linear-gradient(
135deg,
rgba(255, 246, 250, 0.98) 0%,
rgba(255, 251, 253, 0.96) 48%,
rgba(255, 255, 255, 0.94) 100%
);
}
.cwa-showcase-new {
border: 1px solid rgba(77, 185, 189, 0.16);
background: linear-gradient(
135deg,
rgba(241, 252, 252, 0.98) 0%,
rgba(248, 254, 254, 0.96) 48%,
rgba(255, 255, 255, 0.94) 100%
);
} .cwa-showcase-popular > *,
.cwa-showcase-new > * {
width: 100% !important;
max-width: none !important;
margin-right: 0 !important;
margin-left: 0 !important;
}
.cwa-showcase-heading {
margin-bottom: 24px !important;
} .cwa-popular-grid,
.cwa-new-list,
.cwa-new-list.wp-block-post-template {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
grid-auto-rows: 1fr;
gap: 24px !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
align-items: stretch !important;
list-style: none;
}
.cwa-popular-card,
.cwa-new-item,
.cwa-new-item.wp-block-group {
box-sizing: border-box;
width: 100% !important;
height: 100%;
min-width: 0;
margin: 0 !important;
overflow: hidden;
border: 1px solid rgba(77, 185, 189, 0.13);
border-radius: 16px !important;
background: rgba(255, 255, 255, 0.88);
color: var(--cwa-text);
box-shadow: 0 2px 10px rgba(31, 41, 55, 0.04);
transition:
transform 0.2s ease,
border-color 0.2s ease,
background-color 0.2s ease,
box-shadow 0.2s ease;
} .cwa-popular-card {
position: relative;
display: flex;
flex-direction: column;
text-decoration: none;
}
.cwa-popular-card:visited {
color: var(--cwa-text);
}
.cwa-popular-card__image {
display: block;
width: 100%;
aspect-ratio: 1200 / 628;
overflow: hidden;
border-radius: 15px 15px 0 0 !important;
background: var(--cwa-paper);
}
.cwa-popular-card__image img {
display: block;
width: 100%;
height: 100%;
margin: 0;
object-fit: cover;
object-position: center;
transition: transform 0.25s ease;
} .cwa-popular-card__title {
position: relative;
display: grid !important;
box-sizing: border-box;
height: 72px !important;
min-height: 72px !important;
margin: 0;
padding: 16px 40px 16px 16px !important;
overflow: hidden;
align-items: center;
color: var(--cwa-text);
font-size: 15px !important;
font-weight: 500;
line-height: 20px !important;
text-decoration: none;
}
.cwa-popular-card__title-text {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.cwa-popular-card__title::after {
content: "›";
position: absolute;
top: 50%;
right: 16px;
color: var(--cwa-teal-dark);
font-size: 17px;
font-weight: 400;
line-height: 1;
opacity: 0.78;
transform: translateY(-53%);
transition: transform 0.2s ease, color 0.2s ease;
} .cwa-showcase-new .wp-block-query {
width: 100%;
margin: 0;
}
.cwa-new-list > li {
box-sizing: border-box;
display: flex;
width: 100%;
height: 100%;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
list-style: none;
}
.cwa-new-item,
.cwa-new-item.wp-block-group {
position: relative;
display: flex !important;
padding: 0 !important;
flex-direction: column;
align-items: stretch;
gap: 0 !important;
cursor: pointer;
}
.cwa-new-item__image,
.cwa-new-item__image.wp-block-post-featured-image {
position: relative;
isolation: isolate;
display: block;
width: 100% !important;
aspect-ratio: 1200 / 628;
margin: 0 !important;
overflow: hidden;
border: 0;
border-radius: 15px 15px 0 0 !important;
background: var(--cwa-paper);
box-shadow: none;
}
.cwa-new-item__image > a {
position: relative;
z-index: 1;
display: block !important;
width: 100% !important;
height: 100% !important;
cursor: pointer;
}
.cwa-new-item__image img {
display: block;
width: 100%;
height: 100%;
margin: 0;
object-fit: cover;
object-position: center;
background: var(--cwa-paper);
transition: transform 0.22s ease;
}
.cwa-new-item__content,
.cwa-new-item__content.wp-block-group {
display: flex !important;
box-sizing: border-box;
width: 100% !important;
min-width: 0;
min-height: 96px;
margin: 0 !important;
padding: 16px !important;
flex: 1 1 auto;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 8px !important;
}
.cwa-new-item__title,
.cwa-new-item__title.wp-block-post-title {
display: block !important;
box-sizing: border-box;
width: 100%;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
color: var(--cwa-text);
font-family: inherit !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 20px !important;
text-decoration: none;
}
.cwa-new-item__title a {
position: relative !important;
z-index: 1;
display: -webkit-box !important;
overflow: hidden;
color: var(--cwa-text) !important;
font: inherit;
text-decoration: none;
cursor: pointer;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
} .cwa-new-item__title a::after {
content: none !important;
display: none !important;
} .cwa-new-item__meta,
.cwa-new-item__meta.wp-block-group,
.cwa-new-item__meta.wp-block-group.is-layout-flex {
display: flex !important;
box-sizing: border-box;
width: 100% !important;
min-height: 24px;
margin: 0 !important;
padding: 0 !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
}
.cwa-new-item__date,
.cwa-new-item__date.wp-block-post-date {
margin: 0 !important;
padding: 0 !important;
color: var(--cwa-muted);
font-family: inherit !important;
font-size: 13px !important;
font-weight: 400;
line-height: 24px !important;
text-align: left !important;
white-space: nowrap;
}
.cwa-new-item__date time {
color: inherit;
font: inherit;
} .cwa-new-badge {
display: block;
width: 24px;
height: 24px;
color: var(--cwa-teal);
pointer-events: none;
filter: drop-shadow(0 2px 3px rgba(31, 41, 55, 0.1));
}
.cwa-new-item__meta .cwa-new-badge {
position: static !important;
z-index: 3;
margin: 0 0 0 auto;
flex: 0 0 24px;
}
.cwa-new-badge svg {
display: block;
width: 100%;
height: 100%;
} .cwa-showcase-new .cwa-preview-button {
display: none !important;
}
.cwa-popular-card:focus-visible,
.cwa-new-item:focus-within,
.cwa-new-item.wp-block-group:focus-within {
outline: 3px solid rgba(77, 185, 189, 0.3);
outline-offset: 3px;
} .cwa-theme-section {
box-sizing: border-box;
width: calc(100% - 48px);
max-width: 1200px;
margin: 28px auto 36px;
padding: 24px 26px 26px;
border: 1px solid rgba(77, 185, 189, 0.14);
border-radius: 18px;
background: linear-gradient(
120deg,
rgba(236, 75, 132, 0.035) 0%,
rgba(255, 255, 255, 0.72) 46%,
rgba(77, 185, 189, 0.045) 100%
);
box-shadow: var(--cwa-shadow-soft);
}
.cwa-theme-grid {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 16px;
width: 100%;
}
.cwa-theme-card {
--theme-color: #319fa3;
--theme-bg: rgba(77, 185, 189, 0.1);
--theme-bg-hover: rgba(77, 185, 189, 0.15);
--theme-ring: rgba(77, 185, 189, 0.18);
box-sizing: border-box;
display: flex;
min-width: 0;
min-height: 108px;
padding: 16px 9px 14px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 9px;
border: 1px solid var(--theme-ring);
border-radius: 16px;
background: var(--theme-bg);
color: #374151;
text-align: center;
text-decoration: none;
box-shadow: 0 2px 10px rgba(31, 41, 55, 0.035);
transition:
transform 0.2s ease,
border-color 0.2s ease,
background-color 0.2s ease,
box-shadow 0.2s ease;
}
.cwa-theme-card:visited {
color: #374151;
}
.cwa-theme-card__icon {
box-sizing: border-box;
display: flex;
width: 40px;
height: 40px;
padding: 0;
align-items: center;
justify-content: center;
flex: 0 0 auto;
border: 0;
border-radius: 0;
background: transparent;
color: var(--theme-color);
box-shadow: none;
transition:
transform 0.2s ease,
color 0.2s ease;
}
.cwa-theme-card__icon svg {
display: block;
width: 34px;
height: 34px;
max-width: 100%;
max-height: 100%;
flex: 0 0 auto;
overflow: visible;
}
.cwa-theme-card__icon:not(.cwa-theme-card__icon--filled) svg {
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.cwa-theme-card__icon--filled svg {
fill: currentColor;
stroke: none;
}
.cwa-theme-card__title {
display: block;
color: #374151;
font-size: 13.5px;
font-weight: 500;
line-height: 1.25;
text-decoration: none;
white-space: normal;
transition: color 0.2s ease;
}
.cwa-theme-card--fantasy {
--theme-color: #dc6095;
--theme-bg: rgba(236, 75, 132, 0.09);
--theme-bg-hover: rgba(236, 75, 132, 0.15);
--theme-ring: rgba(236, 75, 132, 0.17);
}
.cwa-theme-card--games {
--theme-color: #2f9fa5;
--theme-bg: rgba(77, 185, 189, 0.14);
--theme-bg-hover: rgba(77, 185, 189, 0.21);
--theme-ring: rgba(77, 185, 189, 0.22);
}
.cwa-theme-card--nature {
--theme-color: #57985f;
--theme-bg: rgba(102, 187, 106, 0.14);
--theme-bg-hover: rgba(102, 187, 106, 0.21);
--theme-ring: rgba(102, 187, 106, 0.21);
}
.cwa-theme-card--cute {
--theme-color: #cf78a7;
--theme-bg: rgba(221, 145, 189, 0.11);
--theme-bg-hover: rgba(221, 145, 189, 0.18);
--theme-ring: rgba(221, 145, 189, 0.2);
}
.cwa-theme-card--vehicles {
--theme-color: #d88940;
--theme-bg: rgba(255, 173, 96, 0.12);
--theme-bg-hover: rgba(255, 173, 96, 0.19);
--theme-ring: rgba(255, 173, 96, 0.21);
}
.cwa-theme-card--heroes {
--theme-color: #4b8fca;
--theme-bg: rgba(103, 163, 214, 0.14);
--theme-bg-hover: rgba(103, 163, 214, 0.21);
--theme-ring: rgba(103, 163, 214, 0.22);
}
.cwa-theme-card--sports {
--theme-color: #bf8f1f;
--theme-bg: rgba(241, 193, 72, 0.13);
--theme-bg-hover: rgba(241, 193, 72, 0.2);
--theme-ring: rgba(241, 193, 72, 0.22);
}
.cwa-theme-card--flowers {
--theme-color: #8767ad;
--theme-bg: rgba(158, 123, 200, 0.11);
--theme-bg-hover: rgba(158, 123, 200, 0.18);
--theme-ring: rgba(158, 123, 200, 0.2);
}
.cwa-theme-card:focus-visible {
outline: 3px solid rgba(77, 185, 189, 0.3);
outline-offset: 3px;
} .cwa-preview-button {
appearance: none;
position: absolute;
right: 8px;
bottom: 8px;
z-index: 3;
display: grid !important;
box-sizing: border-box !important;
width: 34px;
height: 34px;
padding: 0 !important;
place-items: center !important;
border: 1px solid rgba(77, 185, 189, 0.3);
border-radius: 999px;
background: rgba(255, 255, 255, 0.95);
color: #4db9bd;
box-shadow: 0 3px 12px rgba(31, 41, 55, 0.15);
cursor: zoom-in;
font-size: 0 !important;
line-height: 0 !important;
opacity: 0;
transform: translateY(3px);
transition:
opacity 0.18s ease,
transform 0.18s ease,
background-color 0.18s ease,
box-shadow 0.18s ease,
color 0.18s ease;
}
.cwa-preview-button svg {
display: block !important;
width: 18px !important;
height: 18px !important;
margin: 0 !important;
fill: currentColor;
stroke: none;
} .cwa-sidebar-image-preview li:hover .cwa-preview-button,
.cwa-sidebar-image-preview li:focus-within .cwa-preview-button,
.cwa-preview-button:focus-visible {
opacity: 1;
transform: translateY(0);
}
.cwa-preview-button:hover {
background: #fff;
color: #319fa3;
box-shadow: 0 5px 15px rgba(31, 41, 55, 0.2);
}
.cwa-preview-button:focus-visible {
opacity: 1;
transform: translateY(0);
outline: 3px solid rgba(77, 185, 189, 0.32);
outline-offset: 2px;
}
.cwa-hover-preview {
position: fixed;
top: 0;
left: 0;
z-index: 99998;
width: clamp(400px, 42vw, 520px);
aspect-ratio: 1200 / 628;
overflow: hidden;
border: 1px solid rgba(77, 185, 189, 0.22);
border-radius: 16px;
background: var(--cwa-paper);
box-shadow: 0 18px 45px rgba(31, 41, 55, 0.22);
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translateY(5px);
transition:
opacity 0.12s ease,
visibility 0.12s ease,
transform 0.12s ease;
}
.cwa-hover-preview.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.cwa-hover-preview img {
display: block;
width: 100%;
height: 100%;
margin: 0;
object-fit: contain;
object-position: center;
background: var(--cwa-paper);
}
html.cwa-preview-open {
overflow: hidden;
}
.cwa-preview-dialog {
width: min(920px, calc(100vw - 32px));
max-width: none;
max-height: calc(100vh - 32px);
margin: auto;
padding: 0;
overflow: visible;
border: 0;
border-radius: 19px;
background: transparent;
}
.cwa-preview-dialog::backdrop {
background: rgba(17, 24, 39, 0.58);
backdrop-filter: blur(3px);
}
.cwa-preview-dialog__panel {
position: relative;
overflow: hidden;
border: 1px solid rgba(77, 185, 189, 0.2);
border-radius: 19px;
background: #fff;
box-shadow: 0 24px 65px rgba(17, 24, 39, 0.3);
}
.cwa-preview-dialog__image-wrap {
width: 100%;
aspect-ratio: 1200 / 628;
background: var(--cwa-paper);
}
.cwa-preview-dialog__image {
display: block;
width: 100%;
height: 100%;
margin: 0;
object-fit: contain;
object-position: center;
}
.cwa-preview-dialog__footer {
display: flex;
gap: 20px;
padding: 17px 20px 19px;
align-items: center;
justify-content: space-between;
}
.cwa-preview-dialog__title {
min-width: 0;
margin: 0;
color: var(--cwa-text);
font-size: 18px;
font-weight: 600;
line-height: 1.35;
}
.cwa-preview-dialog__link {
display: inline-flex;
min-height: 42px;
padding: 0 17px;
flex: 0 0 auto;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--cwa-teal);
color: #fff;
font-size: 14px;
font-weight: 600;
line-height: 1;
text-decoration: none;
transition: background-color 0.18s ease, transform 0.18s ease;
}
.cwa-preview-dialog__link:hover {
background: var(--cwa-teal-dark);
color: #fff;
transform: translateY(-1px);
}
.cwa-preview-dialog__close {
appearance: none;
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
display: inline-flex;
width: 38px;
height: 38px;
padding: 0;
align-items: center;
justify-content: center;
border: 1px solid rgba(31, 41, 55, 0.12);
border-radius: 999px;
background: rgba(255, 255, 255, 0.94);
color: var(--cwa-text);
box-shadow: 0 3px 12px rgba(31, 41, 55, 0.14);
cursor: pointer;
}
.cwa-preview-dialog__close svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
} .cwa-sidebar-image-preview .wp-block-latest-posts__featured-image {
position: relative;
isolation: isolate;
}
.cwa-sidebar-image-preview .wp-block-latest-posts__featured-image img {
display: block;
}
.cwa-sidebar-image-preview .wp-block-latest-posts__featured-image > a {
position: relative;
z-index: 1;
}
.cwa-sidebar-image-preview .cwa-preview-button {
right: 7px;
bottom: 7px;
z-index: 3;
width: 32px;
height: 32px;
}
.cwa-sidebar-image-preview .cwa-preview-button svg {
width: 17px !important;
height: 17px !important;
} @media (hover: hover) {
.cwa-discover-card:hover {
transform: translateY(-3px);
}
.cwa-discover-card:hover .cwa-discover-card__title {
color: #2f8f94;
}
.cwa-discover-card:hover .cwa-discover-card__picture {
box-shadow: 0 7px 18px rgba(31, 41, 55, 0.1);
}
.cwa-popular-card:hover {
border-color: rgba(77, 185, 189, 0.28);
box-shadow: 0 8px 20px rgba(31, 41, 55, 0.075);
transform: translateY(-2px);
}
.cwa-popular-card:hover .cwa-popular-card__image img {
transform: scale(1.008);
}
.cwa-popular-card:hover .cwa-popular-card__title {
color: var(--cwa-teal-dark);
}
.cwa-popular-card:hover .cwa-popular-card__title::after {
color: #2f8f94;
transform: translate(2px, -53%);
}
.cwa-new-item:hover,
.cwa-new-item.wp-block-group:hover {
border-color: rgba(77, 185, 189, 0.2);
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 6px 16px rgba(31, 41, 55, 0.05);
transform: translateY(-1px);
}
.cwa-new-item:hover .cwa-new-item__image img {
transform: scale(1.01);
}
.cwa-new-item:hover .cwa-new-item__title a {
color: var(--cwa-teal-dark) !important;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.cwa-theme-card:hover {
border-color: var(--theme-ring);
background: var(--theme-bg-hover);
box-shadow: 0 8px 20px rgba(31, 41, 55, 0.07);
transform: translateY(-3px);
}
.cwa-theme-card:hover .cwa-theme-card__icon {
background: transparent;
box-shadow: none;
transform: translateY(-2px) scale(1.08);
}
.cwa-theme-card:hover .cwa-theme-card__title {
color: var(--theme-color);
}
}
@media (hover: none), (pointer: coarse) {
.cwa-sidebar-image-preview .cwa-preview-button {
opacity: 1;
transform: none;
}
} @media (max-width: 1024px) {
.cwa-discover-section,
.cwa-discover-section.wp-block-group {
width: calc(100% - 32px) !important;
}
.cwa-discover-section h2,
.cwa-theme-heading,
.cwa-showcase-heading {
font-size: 28px;
}
.cwa-discover-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.cwa-theme-section {
width: calc(100% - 32px);
margin-top: 24px;
margin-bottom: 30px;
padding: 22px 18px 24px;
border-radius: 16px;
}
.cwa-theme-heading {
margin-bottom: 18px;
}
.cwa-theme-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cwa-theme-card {
min-height: 104px;
}
} @media (max-width: 1023px) {
.cwa-showcase-section {
width: calc(100% - 32px);
margin-top: 30px;
}
.cwa-showcase-popular,
.cwa-showcase-new {
padding: 24px !important;
}
.cwa-popular-grid,
.cwa-new-list,
.cwa-new-list.wp-block-post-template {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 16px !important;
}
}
@media (max-width: 767px) {
.cwa-hover-preview {
display: none;
}
.cwa-sidebar-image-preview .cwa-preview-button {
display: none !important;
}
} @media (max-width: 640px) {
.cwa-discover-section,
.cwa-discover-section.wp-block-group {
width: calc(100% - 20px) !important;
}
.cwa-discover-section h2,
.cwa-theme-heading,
.cwa-showcase-heading {
gap: 9px;
font-size: 25px;
}
.cwa-discover-section h2::before,
.cwa-theme-heading::before,
.cwa-popular-heading::before,
.cwa-newly-heading::before {
width: 22px;
height: 22px;
flex-basis: 22px;
}
.cwa-discover-section h2::before {
width: 19px;
height: 19px;
flex-basis: 19px;
} .cwa-popular-heading::before {
width: 21px;
height: 21px;
flex-basis: 21px;
}
.cwa-discover-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 14px;
margin-top: 16px;
}
.cwa-discover-card__title {
margin-top: 8px;
font-size: 14px;
}
.cwa-discover-refresh {
font-size: 14px;
}
.cwa-showcase-section {
width: calc(100% - 20px);
margin-top: 26px;
}
.cwa-showcase-layout,
.cwa-showcase-layout.wp-block-group,
.cwa-showcase-layout.wp-block-group.is-layout-flex {
gap: 32px !important;
}
.cwa-showcase-popular,
.cwa-showcase-new {
padding: 16px !important;
border-radius: 16px !important;
}
.cwa-showcase-heading {
margin-bottom: 16px !important;
}
.cwa-popular-grid,
.cwa-new-list,
.cwa-new-list.wp-block-post-template {
grid-template-columns: minmax(0, 1fr) !important;
gap: 16px !important;
}
.cwa-popular-card__title {
padding-right: 40px !important;
}
.cwa-new-item__content,
.cwa-new-item__content.wp-block-group {
padding: 16px !important;
}
.cwa-theme-section {
width: calc(100% - 20px);
margin-top: 20px;
margin-bottom: 26px;
padding: 18px 12px 20px;
border-radius: 14px;
}
.cwa-theme-heading {
margin-bottom: 16px;
}
.cwa-theme-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.cwa-theme-card {
min-height: 98px;
padding: 13px 8px 12px;
border-radius: 14px;
}
.cwa-theme-card__icon {
width: 36px;
height: 36px;
padding: 0;
}
.cwa-theme-card__icon svg {
width: 31px;
height: 31px;
}
.cwa-preview-button {
right: 6px;
bottom: 6px;
width: 31px;
height: 31px;
}
.cwa-preview-dialog {
width: calc(100vw - 20px);
max-height: calc(100vh - 20px);
}
.cwa-preview-dialog__panel {
border-radius: 15px;
}
.cwa-preview-dialog__footer {
flex-direction: column;
gap: 13px;
padding: 15px;
align-items: stretch;
}
.cwa-preview-dialog__title {
padding-right: 30px;
font-size: 16px;
}
.cwa-preview-dialog__link {
width: 100%;
}
.cwa-preview-dialog__close {
top: 9px;
right: 9px;
width: 35px;
height: 35px;
}
} @media (prefers-reduced-motion: reduce) {
.cwa-discover-card,
.cwa-discover-card__picture,
.cwa-popular-card,
.cwa-popular-card__image img,
.cwa-popular-card__title::after,
.cwa-new-item,
.cwa-new-item__image img,
.cwa-theme-card,
.cwa-theme-card__icon,
.cwa-theme-card__title,
.cwa-preview-button,
.cwa-hover-preview,
.cwa-preview-dialog__link {
transition: none;
}
} :root {
--cwa-home-container-max: 1200px;
--cwa-home-container-space: 48px;
} .cwa-hero-section,
.cwa-hero-section.wp-block-group,
.cwa-discover-section,
.cwa-discover-section.wp-block-group,
.cwa-showcase-section,
.cwa-showcase-section.wp-block-group,
.cwa-theme-section,
.cwa-theme-section.wp-block-group {
box-sizing: border-box !important;
width: calc(
100% - var(--cwa-home-container-space)
) !important;
max-width: var(
--cwa-home-container-max
) !important;
margin-right: auto !important;
margin-left: auto !important;
min-width: 0 !important;
} .cwa-hero-layout,
.cwa-hero-layout.wp-block-columns {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-right: 0 !important;
margin-left: 0 !important;
} .cwa-hero-layout > .wp-block-column,
.cwa-hero-copy,
.cwa-hero-media {
box-sizing: border-box !important;
min-width: 0 !important;
max-width: 100% !important;
} @media (min-width: 782px) {
.cwa-hero-media,
.cwa-hero-media.wp-block-column {
align-self: center !important;
}
.cwa-hero-media > figure,
.cwa-hero-media > .wp-block-image {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
} .cwa-hero-media figure,
.cwa-hero-media .wp-block-image,
.cwa-hero-media picture {
box-sizing: border-box !important;
max-width: 100% !important;
min-width: 0 !important;
}
.cwa-hero-media img {
display: block;
max-width: 100% !important;
height: auto !important;
} @media (max-width: 1024px) {
:root {
--cwa-home-container-space: 32px;
}
} @media (max-width: 640px) {
:root {
--cwa-home-container-space: 20px;
}
}