, which broke
as soon as the gutter changed. */
.thn-menu-inner {
max-width: var(--shell-max);
margin: 0 auto;
padding: 0 var(--gutter);
}
@media only screen and (min-width: 768px) {
.thn-menu-inner {
padding: 0 var(--gutter-lg);
}
}
.thn-menu-list {
list-style: none;
margin: 0;
padding: 0;
float: left;
}
.thn-menu-list li {
float: left;
position: relative;
letter-spacing: .3px;
border-bottom: 4px solid transparent;
transition: border-color .1s ease-in-out;
white-space: nowrap;
line-height: 46px;
height: 46px;
padding: 0 20px;
}
/* The gutter now lives on .thn-menu-inner, so the first item needs none. */
.thn-menu-list li:first-child {
padding-left: 0;
}
.thn-menu-list li:hover,
.thn-menu-list li.current-menu-item,
.thn-menu-list li.current-menu-ancestor,
.thn-menu-list li.current_page_item {
border-bottom-color: var(--brand-primary);
}
.thn-menu-list li a {
color: var(--text-secondary);
display: inline-block;
font-weight: 500;
text-decoration: none;
}
.thn-menu-list li a:hover {
color: var(--brand-primary);
}
/* Dropdowns */
.thn-menu-list ul.sub-menu {
position: absolute;
top: 46px;
left: 0;
min-width: 210px;
background: var(--surface);
border: 1px solid var(--border-color);
box-shadow: 0 8px 20px rgba(59, 53, 174, .10);
list-style: none;
margin: 0;
padding: 6px 0;
z-index: 50;
display: none;
}
.thn-menu-list li:hover > ul.sub-menu,
.thn-menu-list li:focus-within > ul.sub-menu {
display: block;
}
.thn-menu-list ul.sub-menu li {
float: none;
height: auto;
line-height: 1.4;
padding: 0;
border: 0;
}
.thn-menu-list ul.sub-menu li a {
display: block;
padding: 9px 18px;
font-weight: 400;
}
.thn-menu-list ul.sub-menu li a:hover {
background: var(--background);
}
.thn-menu-more {
float: right;
line-height: 46px;
height: 46px;
/* Right gutter comes from .thn-menu-inner now. */
padding: 0 0 0 25px;
}
.thn-menu-more button {
background: none;
border: 0;
padding: 0;
cursor: pointer;
color: var(--text-secondary);
line-height: inherit;
}
.thn-menu-more i {
margin-left: 10px;
font-size: 18px;
color: var(--text-secondary);
}
.thn-menu-more:hover i {
color: var(--brand-primary);
}
@media only screen and (min-width: 768px) {
.thn-menu-more { padding-right: 0; }
}
/* ── 5. Slide-down search ───────────────────────────────────────── */
.thn-search-box {
background: var(--surface-muted);
display: none;
border-bottom: 1px solid var(--border-color);
}
.thn-search-box.is-open {
display: block;
}
.thn-search-inner {
max-width: var(--shell-max);
margin: 0 auto;
padding: 16px var(--gutter-lg) 20px;
}
.thn-search-inner input[type="search"] {
width: 100%;
border: 2px solid var(--border-color);
outline: 0;
background: var(--surface);
padding: 10px 12px;
border-radius: 4px;
color: var(--text-secondary);
font-size: 14px;
}
.thn-search-inner input[type="search"]:focus {
border-color: var(--brand-primary);
}
.thn-search-inner ::-webkit-input-placeholder { color: var(--text-secondary); }
.thn-search-inner ::placeholder { color: var(--text-secondary); }
/* ── 6. Feed layout ─────────────────────────────────────────────── */
/* Reference .main-box: 766px on phones, 1152px from 768px up. */
.main-box {
max-width: 766px;
margin: 0 auto;
}
@media only screen and (min-width: 768px) {
.main-box {
max-width: var(--shell-max);
}
}
.main-left-right {
padding: 0 var(--gutter);
position: relative;
}
.left-box {
width: 100%;
float: none;
margin: 0 auto;
padding: 0;
}
.rightbx {
width: 100%;
float: none;
padding: 15px 0;
position: relative;
display: none;
}
@media only screen and (min-width: 768px) {
.main-left-right { padding: 0 var(--gutter-lg); }
}
@media only screen and (min-width: 889px) {
.left-box {
width: calc(100% - 300px);
float: left;
padding: 0 24px 0 0;
}
.rightbx {
width: 300px;
float: left;
padding: 0;
display: block;
}
/* On an article the rail sits in the same band as the title, which is
full-width — so the widget started flush against the headline. The
reference avoids that with a 250px ad slot above the widget; pushing
the rail past the meta row gives the same breathing room without
reserving space for an ad that may never load. */
.single-post .rightbx {
padding-top: 48px;
}
}
@media only screen and (min-width: 1220px) {
.left-box {
width: 768px;
padding: 0 var(--gutter-lg) 0 0;
}
.rightbx {
width: 320px;
float: right;
}
}
/* ── 7. Post card ───────────────────────────────────────────────── */
/* No top padding — the 32px now comes from .site-content, so adding it
here would double the gap the reference has. */
.blog-posts {
list-style: none;
margin: 0;
padding: 0;
}
.body-post {
border-radius: 4px;
background: linear-gradient(0deg, #f2f6fc 0%, var(--surface) 8%);
margin-bottom: 24px;
padding: 0 0 16px;
}
.story-link,
.story-link:hover,
.story-link:focus {
text-decoration: none;
display: block;
color: inherit;
}
.home-post-box {
display: block;
}
.home-post-box::after {
content: '';
display: block;
clear: both;
}
.home-img {
width: 100%;
float: left;
overflow: hidden;
}
/* Fixed aspect box keeps the feed from shifting as images decode. */
.img-ratio {
padding-bottom: 52.2875817%;
position: relative;
background: linear-gradient(rgb(242, 242, 242) 66%, rgba(242, 242, 242, 0));
border-radius: 10px;
}
.home-img img {
max-width: 100%;
border-radius: 4px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 2;
transition: transform .8s cubic-bezier(.165, .84, .44, 1) 0s;
}
.story-link:hover .home-img img,
.story-link:focus .home-img img {
transform: scale(1.05);
}
.home-right {
float: left;
padding: 16px 8px 0;
width: 100%;
}
.home-title {
color: var(--text-heading);
font-weight: 700;
line-height: 27px;
font-size: 17px;
margin: 0;
letter-spacing: -.1px;
}
.story-link:hover .home-title {
text-decoration: underline;
}
.item-label {
color: var(--text-secondary);
font-size: 11px;
padding: 4px 0;
display: flex;
align-items: center;
line-height: 24px;
flex-wrap: wrap;
}
.item-label i {
margin-right: 7px;
}
.item-label .h-tags {
margin-left: 20px;
}
.item-label .h-tags a {
color: var(--text-secondary);
}
.item-label .h-tags a:hover {
color: var(--brand-primary);
text-decoration: underline;
}
.home-desc {
font-size: 13px;
line-height: 21px;
color: var(--text-secondary);
padding: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
@media only screen and (min-width: 600px) {
.body-post {
box-shadow: none;
border-radius: 0;
background: none;
padding: 0;
}
.home-img { width: 34.51%; }
.home-right {
width: 65.49%;
padding: 0 0 0 24px;
}
.home-desc {
-webkit-line-clamp: 2;
line-clamp: 2;
padding-right: 6%;
}
}
@media only screen and (min-width: 768px) {
.home-right { padding: 0 0 0 24px; }
}
@media only screen and (min-width: 889px) {
/* Reference hides the meta row on tablet widths. */
.item-label { display: none; }
.home-desc { margin-top: 10px; }
}
@media only screen and (min-width: 1220px) {
.item-label { display: flex; }
.home-desc { margin-top: 0; }
}
/* Section heading above a feed (category / archive view).
The gutter comes from .main-left-right, so the heading must not add
side margins of its own — that pushed it 24px right of the story
thumbnails, which is where the reference aligns it. */
.label-name {
text-transform: capitalize;
font-size: 20px;
font-weight: 900;
border-bottom: 1px solid var(--border-color);
color: var(--text-heading);
margin: 0 0 24px;
padding: 0 0 8px;
}
@media only screen and (min-width: 768px) {
.label-name {
font-size: 22px;
margin: 0 0 24px;
}
}
/* Empty state */
.thn-no-results {
padding: 48px 0 56px;
text-align: center;
color: var(--text-secondary);
}
.thn-no-results i {
font-size: 34px;
color: var(--border-color);
display: block;
margin-bottom: 14px;
}
.thn-no-results h2 {
color: var(--text-heading);
font-size: 20px;
font-weight: 700;
margin: 0 0 8px;
}
.thn-no-results p {
margin: 0;
font-size: 14px;
}
/* ── 8. Pagination ──────────────────────────────────────────────── */
.thn-pagination {
margin: 8px 0 32px;
clear: both;
}
.thn-pagination ul.page-numbers,
.navigation.pagination ul.page-numbers,
.storefront-pagination ul.page-numbers {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
flex-wrap: wrap;
}
.thn-pagination ul.page-numbers li,
.navigation.pagination ul.page-numbers li,
.storefront-pagination ul.page-numbers li {
float: none;
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
/* Storefront's icons.css injects a folder glyph into list items — the
pager is a
list, so it has to be cleared here too. */
.thn-pagination ul.page-numbers li::before,
.thn-pagination ul.page-numbers li::after,
.navigation.pagination ul.page-numbers li::before,
.navigation.pagination ul.page-numbers li::after {
content: none;
display: none;
}
/* `a`/`span` qualified so the wrapper
is not
matched — it shares the class with its own children. */
.thn-pagination a.page-numbers,
.thn-pagination span.page-numbers,
.navigation.pagination a.page-numbers,
.navigation.pagination span.page-numbers,
.storefront-pagination a.page-numbers,
.storefront-pagination span.page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 34px;
padding: 0 9px;
border: 1px solid var(--border-color);
border-radius: 4px;
color: var(--text-secondary);
font-size: 13px;
font-weight: 500;
background: var(--surface);
transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.thn-pagination .page-numbers i,
.navigation.pagination .page-numbers i {
font-size: 10px;
}
.thn-pagination a.page-numbers:hover,
.navigation.pagination a.page-numbers:hover,
.storefront-pagination a.page-numbers:hover {
border-color: var(--brand-primary);
color: var(--brand-primary);
}
.thn-pagination span.page-numbers.current,
.navigation.pagination span.page-numbers.current,
.storefront-pagination span.page-numbers.current {
background: var(--brand-primary);
border-color: var(--brand-primary);
color: var(--surface);
font-weight: 600;
}
.thn-pagination span.page-numbers.dots,
.navigation.pagination span.page-numbers.dots {
border-color: transparent;
background: none;
color: var(--text-secondary);
min-width: 20px;
padding: 0 3px;
}
/* ── 9. Single article ──────────────────────────────────────────── */
.single-post .site-content,
.archive .site-content,
.blog .site-content,
.home .site-content {
background: var(--surface);
}
/* The reference puts the title above .main-left-right, so it carries its
own gutter instead of inheriting the column's padding. */
.story-title {
line-height: 34px;
font-size: 22px;
font-weight: 700;
letter-spacing: -.1px;
color: var(--text-heading);
margin: 0;
padding: 0 var(--gutter);
}
.story-title a {
color: var(--text-heading);
}
/* Reference .postmeta is a plain inline row on a 40px line — author and
date share .p-author, the section sits in .p-tags.
No side padding: the meta row already sits inside the padded column,
and the reference lines its text up with the title and body copy. */
.postmeta {
line-height: 40px;
color: var(--text-secondary);
font-size: 12px;
padding: 0 0 8px;
}
.postmeta i {
margin-right: 6px;
}
.postmeta .author {
color: var(--text-secondary);
margin-right: 15px;
}
.postmeta a.author:hover {
color: var(--brand-primary);
}
.postmeta .p-tags {
padding: 0 5px;
margin-left: 20px;
}
/* Hero image bleeds past the column gutter, matching the reference
`.separator { margin: 0 -24px 24px }` (reset to 0 from 600px up). */
.separator,
#articlebody > img:first-child {
display: block;
width: calc(100% + var(--gutter) * 2);
max-width: none;
height: auto;
margin: 0 calc(var(--gutter) * -1) 24px;
border-radius: 0;
}
.separator img,
#articlebody > img:first-child {
display: block;
width: 100%;
height: auto;
border-radius: 0;
}
.separator img {
width: 100%;
height: auto;
display: block;
border-radius: 0;
}
.tr-caption {
font-size: 13px;
color: var(--text-secondary);
letter-spacing: .2px;
text-align: left;
}
/* Measured on the reference: 15px on a 26px line, no horizontal padding
(the gutter comes from .main-left-right). */
#articlebody {
color: var(--articletext-color);
font-size: 15px;
line-height: 26px;
padding: 0 0 8px;
}
#articlebody p,
#articlebody br {
max-width: 80ch;
margin: 24px 0;
display: block;
}
/* Padding/margin geometry follows the reference; the weight is set to 600
for every heading level by request (the reference uses 900). The
margin-top reset matters — Storefront's global heading rule adds ~50px,
which collapsed with the paragraph's 24px bottom margin and left a huge
gap before every heading. */
#articlebody h2,
#articlebody h3,
#articlebody h4,
#articlebody h5,
#articlebody h6 {
font-weight: 600;
color: var(--text-heading);
padding-top: 10px;
margin-top: 0;
margin-bottom: -10px;
}
#articlebody h2 { font-size: 22px; line-height: 34px; }
#articlebody h3 { font-size: 20px; line-height: 32px; }
#articlebody h4 { font-size: 18px; line-height: 30px; }
#articlebody a,
#articlebody a:link,
#articlebody a:visited {
color: var(--link-color);
font-weight: 500;
transition: all .2s linear;
}
#articlebody a:hover {
text-decoration: underline;
}
#articlebody ul {
list-style-type: circle;
margin: 24px 40px;
padding: 0;
}
#articlebody ol {
list-style-type: decimal;
margin: 25px 10px 25px 30px;
padding: 0;
}
#articlebody ol li,
#articlebody ul li {
margin-bottom: 8px;
}
#articlebody blockquote {
padding: 28px;
background: var(--surface-alt);
border: 1px solid #d9deff;
margin: 24px 0;
}
#articlebody blockquote p {
margin: 0 0 12px;
}
#articlebody blockquote p:last-child {
margin-bottom: 0;
}
#articlebody img {
max-width: 100%;
height: auto;
border-radius: 4px;
}
#articlebody table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
#articlebody td,
#articlebody th {
padding: 6px 12px;
text-align: left;
border: 1px solid var(--border-color);
}
#articlebody tbody tr:first-child {
font-weight: 500;
}
#articlebody code {
background: var(--background);
border: 1px solid var(--border-color);
border-radius: 3px;
padding: 2px 6px;
font-size: .92em;
}
#articlebody pre {
background: var(--surface-alt);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 16px 18px;
overflow-x: auto;
margin: 24px 0;
}
#articlebody pre code {
background: none;
border: 0;
padding: 0;
}
@media only screen and (min-width: 768px) {
.story-title {
line-height: 43px;
font-size: 30px;
padding: 0 var(--gutter-lg);
}
.postmeta {
font-size: 13px;
padding: 0 0 8px;
}
/* Reference resets the bleed at this breakpoint: the hero sits flush
with the column content instead of spanning the full box. */
.separator,
#articlebody > img:first-child {
width: auto;
margin-left: 0;
margin-right: 0;
}
#articlebody table {
display: table;
overflow-x: visible;
white-space: normal;
}
}
@media only screen and (min-width: 1220px) {
.story-title {
line-height: 48px;
font-size: 32px;
}
}
/* Static pages reuse the article typography without the meta row. */
.static_title {
padding-bottom: 10px;
margin-bottom: 10px;
font-weight: 900;
line-height: 45px;
font-size: 35px;
color: var(--text-heading);
}
/* ── 9b. Article tags ───────────────────────────────────────────── */
/* The reference ships this block but hides it (`.tags { display:none }`);
here it is shown, using the same class names so the markup matches. */
/* Bottom margin matters: the comments band starts immediately after
.left-box, so without it the pills sit flush against the band edge. */
.tags {
display: block;
clear: both;
margin: 28px 0 32px;
padding: 0;
}
.tags .categ {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.tags .tags-list {
display: inline-block;
padding: 5px 12px;
border: 1px solid var(--border-color);
border-radius: 4px;
background: var(--surface-alt);
font-size: 12px;
font-weight: 500;
line-height: 1.4;
letter-spacing: .2px;
color: var(--text-secondary);
text-transform: capitalize;
text-decoration: none;
transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.tags .tags-list:hover {
background: var(--brand-primary);
border-color: var(--brand-primary);
color: var(--surface);
text-decoration: none;
}
/* ── 9c. Latest News band (reference .below-post) ───────────────── */
/* Full-width white band under the article, outside . The reference
uses floats at 47% / 23.345% with a ~24px gutter; a grid gives the same
geometry without the nth-child margin resets. */
.below-post {
background: var(--surface);
clear: both;
}
.below-post-box {
max-width: var(--shell-max);
margin: 0 auto;
padding: 0 var(--gutter) var(--gutter);
}
.latest-box {
padding-top: var(--gutter);
}
.below-post .latest-title {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 16px;
font-size: 18px;
font-weight: 600;
line-height: 26px;
color: var(--text-heading);
}
.below-post .latest-title i {
font-size: 15px;
color: var(--brand-primary);
}
.latest-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.latest {
margin: 0;
padding: 0;
background: none;
border: 0;
}
.latest-link {
display: block;
text-decoration: none;
color: inherit;
}
.latest-link:hover {
text-decoration: none;
}
/* Fixed 16:10 box so every card is the same height regardless of the
uploaded image ratio — without it, portrait screenshots made one card
tower over its neighbours. `cover` crops instead of stretching. */
.latest-thumb {
overflow: hidden;
border-radius: 4px;
aspect-ratio: 16 / 10;
background: var(--surface-muted);
}
.latest-thumb img {
display: block;
width: 100%;
max-width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
transition: transform .3s ease;
}
.latest-link:hover .latest-thumb img {
transform: scale(1.03);
}
/* Reference .latest-h3: 13px/21px at 500, 15px/24px from 768px. */
.latest-h3 {
padding: 15px 0 10px;
font-size: 13px;
font-weight: 500;
line-height: 21px;
color: var(--text-heading);
}
.latest-link:hover .latest-h3 {
text-decoration: underline;
}
/* Reference hides the standfirst below 889px (see the media query below). */
.latest-desc {
display: none;
font-size: 13px;
line-height: 22px;
color: var(--text-secondary);
overflow: hidden;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
}
@media only screen and (min-width: 768px) {
.below-post-box {
padding: 0 var(--gutter-lg) var(--gutter-lg);
}
.latest-box {
padding-top: var(--gutter-lg);
}
.latest-grid {
grid-template-columns: repeat(4, 1fr);
}
.latest-h3 {
font-size: 15px;
line-height: 24px;
min-height: 60px;
}
}
@media only screen and (min-width: 889px) {
.latest-desc {
display: -webkit-box;
}
}
/* ── 10. Comments ───────────────────────────────────────────────── */
/* Comments band — gradient strip across the whole viewport, same colours
as the page background behind the footer.
The band itself stays at the normal column width; only its ::before is
blown out to 100vw. Doing it this way keeps the layout box untouched,
so the form still lines up with the article — a 100vw box would shift
everything by half the scrollbar width. */
.comments-band {
position: relative;
padding: 40px 0;
clear: both;
background: none;
}
.comments-band::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 100vw;
transform: translateX(-50%);
background: linear-gradient(90deg, #fff 0%, var(--background) 35%, #f5f7fb 65%, #fff 100%);
pointer-events: none;
}
/* Content lines up with the article column, not centred on the page:
same shell, same gutter, same 768px story measure. */
.comments-band-inner {
position: relative;
z-index: 1;
max-width: var(--shell-max);
margin: 0 auto;
padding: 0 var(--gutter);
}
@media only screen and (min-width: 768px) {
.comments-band-inner {
padding: 0 var(--gutter-lg);
}
}
#comments,
.comments-area {
max-width: 768px;
margin: 0;
background: none;
padding: 0;
border-radius: 0;
}
/* The reply form is the white card inside the band. Storefront styles it
with the ID selector `#respond`, so the class alone would lose. */
.comment-respond,
#respond {
background: var(--surface);
border: 1px solid var(--border-color);
border-radius: 3px;
padding: 24px;
margin-top: 0;
}
/* Centred heading with a rule either side, as in the reference. */
#comments .comments-title,
.comment-respond .comment-reply-title {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin: 0 0 24px;
padding: 0;
border: 0;
font-size: 20px;
font-weight: 900;
line-height: 27px;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
color: var(--text-heading);
}
#comments .comments-title::before,
#comments .comments-title::after,
.comment-respond .comment-reply-title::before,
.comment-respond .comment-reply-title::after {
content: '';
display: block;
flex: 1 1 0;
height: 0;
border-bottom: 1px solid #d9deff;
}
/* WordPress always prints the cancel-reply wrapper and hides only the
anchor inside it (style="display:none"). Left in the flex row, that
empty item adds a gap and shifts the heading 12px off centre. */
.comment-reply-title small:empty,
.comment-reply-title small:has(a[style*="display:none"]) {
display: none;
}
.comment-reply-title small a {
font-size: 12px;
font-weight: 400;
letter-spacing: normal;
text-transform: none;
color: var(--link-color);
}
/* Comment cards inside the band stay white so they read as cards. */
#comments .comment-body {
background: var(--surface);
}
.comment-respond #comment {
background: var(--surface);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 10px 12px;
font-size: 14px;
color: var(--articletext-color);
}
.comment-respond #comment:focus {
border-color: var(--brand-primary);
outline: 0;
}
.comment-respond .submit {
background: var(--brand-primary);
color: var(--surface);
border: 0;
border-radius: 4px;
padding: 10px 20px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background .2s ease;
}
.comment-respond .submit:hover {
background: var(--brand-dark);
}
#comments ol.comment-list {
list-style: none;
margin: 0;
padding: 0;
}
#comments .comment {
margin: 0 0 20px;
padding: 0;
border: 0;
}
#comments .comment-body {
background: var(--surface-alt);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 16px 18px;
}
#comments .comment-meta {
font-size: 13px;
color: var(--text-secondary);
margin-bottom: 8px;
}
#comments .comment-author {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: var(--text-heading);
}
#comments .comment-author .avatar {
border-radius: 50%;
width: 32px;
height: 32px;
}
#comments .comment-metadata a {
color: var(--text-secondary);
font-size: 12px;
}
#comments .children {
list-style: none;
margin: 16px 0 0 24px;
padding: 0;
}
#comments .reply a {
font-size: 13px;
font-weight: 500;
color: var(--link-color);
}
/* The rail is already hidden below 889px by .rightbx's own rules. */
/* ── 11. Sidebar rail ───────────────────────────────────────────── */
/* The reference rail is unboxed: a heading, then a flat list. No card,
no border, no panel background. These rules target stock WordPress
widgets (Categories, Recent Posts, …) so whatever is dropped into
the Sidebar widget area inherits the reference look automatically. */
.rightbx .widget,
.rightbx .latest-widget {
background: none;
border: 0;
border-radius: 0;
padding: 0;
margin: 0 0 28px;
}
/* Storefront renders widget titles as `span.gamma.widget-title`; themes
and plugins may emit h3/h4 instead, so all of them are covered. */
.rightbx .widget-title,
.rightbx .widgettitle,
.rightbx .widget-title.gamma,
.rightbx .latest-title {
display: block;
margin: 0 0 16px;
padding: 0;
border: 0;
font-size: 18px;
font-weight: 600;
line-height: 26px;
color: var(--text-heading);
text-transform: none;
letter-spacing: normal;
}
.rightbx .widget ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Storefront's icons.css injects a folder glyph into every category /
archive / menu list item, positioned with margin-left:-1.618em. Inside
the rail that pushes it ~21px outside the column, so it reads as a
stray grey square hanging off the left edge. The reference rail has no
item icons — remove it rather than re-position it. */
.rightbx .widget ul li::before,
.rightbx .widget ul li::after {
content: none;
display: none;
}
/* Storefront also sets margin-bottom:1em on these items, which stacked
on top of the padding below and opened a ~25px gap per row. */
.rightbx .widget ul li {
display: block;
margin: 0;
padding: 4px 0;
font-size: 13px;
line-height: 1.5;
color: var(--text-secondary);
}
/* Categories ship a trailing "(12)" count as a bare text node. */
.rightbx .widget ul li a {
color: var(--text-secondary);
font-weight: 500;
}
.rightbx .widget ul li a:hover {
color: var(--brand-primary);
text-decoration: underline;
}
.rightbx .widget ul li.current-cat > a,
.rightbx .widget ul li.current-menu-item > a {
color: var(--brand-primary);
font-weight: 600;
}
.rightbx .widget ul ul {
margin: 4px 0 4px 14px;
}
/* ── Thumb + title row (reference .pop-article) ── */
.pop-article {
margin-bottom: 16px;
overflow: hidden;
}
.pop-article::after {
content: '';
display: block;
clear: both;
}
.side-pop-image {
float: left;
width: 60px;
overflow: hidden;
border-radius: 4px;
}
.pop-image {
margin: 0;
}
.pop-image img {
display: block;
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 4px;
}
.pop-desc {
float: left;
width: calc(100% - 60px);
padding-left: 16px;
overflow: hidden;
line-height: 21px;
font-weight: 500;
font-size: 13px;
margin-top: -2px;
}
.pop-title {
color: var(--text-secondary);
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
margin: -1px 0 0;
}
.pop-link {
text-decoration: none;
display: block;
}
.pop-link:hover .pop-title {
text-decoration: underline;
}
/* ── 12. Footer ─────────────────────────────────────────────────── */
/* Transparent on purpose — the reference footer lets the body gradient
show through instead of painting its own flat panel.
The top hairline fades out at both ends via border-image, which a plain
`border-top` cannot do. */
.thn-footer {
background: transparent;
border-top: 1px solid transparent;
border-image: linear-gradient(
to right,
transparent 5%,
var(--border-color) 50%,
transparent 95%
) 1;
border-image-slice: 1 0 0 0;
}
.thn-footer-gap {
height: var(--gutter-lg);
background: var(--surface);
}
/* Bottom padding is 0 — the copyright note owns the space beneath itself
so its own padding can stay symmetric. */
.thn-footer-stuff {
max-width: var(--shell-max);
margin: 0 auto;
padding: var(--gutter) var(--gutter) 0;
}
/* WordPress prints this as a
, so Storefront's global
`p { margin-bottom: 1.41575em }` adds ~14px under the line and pushed
the text up inside its band. Zero the bottom margin and pad evenly so
the line sits optically centred between the rule and the footer edge. */
.thn-footer-note {
margin: 20px 0 0;
padding: 12px 0;
font-size: 10px;
line-height: 1.6;
color: var(--text-secondary);
border-top: 1px solid var(--border-color);
text-align: center;
}
.thn-footer-note a {
color: var(--text-secondary);
}
.thn-footer-note a:hover {
color: var(--brand-primary);
}
@media only screen and (min-width: 768px) {
.thn-footer-stuff { padding: var(--gutter-lg) var(--gutter-lg) 0; }
}
/* ── 13. WooCommerce bridge ─────────────────────────────────────── */
/* The shop keeps its behaviour; only the surface adopts the palette. */
.woocommerce .woocommerce-breadcrumb {
font-size: 12px;
color: var(--text-secondary);
padding: 0 0 8px;
margin: 0 0 16px;
border-bottom: 1px solid var(--border-color);
}
.woocommerce .woocommerce-breadcrumb a {
color: var(--text-secondary);
}
.post-type-archive-product .page-title,
.tax-product_cat .page-title {
font-size: 20px;
font-weight: 900;
color: var(--text-heading);
border-bottom: 1px solid var(--border-color);
padding-bottom: 8px;
margin-bottom: 24px;
}
.woocommerce ul.products li.product {
background: var(--surface);
border: 1px solid var(--border-color);
border-radius: 4px;
overflow: hidden;
transition: border-color .2s ease, transform .2s ease;
}
.woocommerce ul.products li.product:hover {
border-color: var(--brand-primary);
transform: translateY(-2px);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
color: var(--text-heading);
font-size: 15px;
font-weight: 700;
line-height: 1.45;
padding: 12px 14px 0;
}
.woocommerce ul.products li.product .price {
color: var(--brand-primary);
font-weight: 700;
padding: 0 14px;
}
.woocommerce ul.products li.product .button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
background: var(--brand-primary);
color: var(--surface);
border-radius: 4px;
font-weight: 500;
transition: background .2s ease;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
background: var(--brand-dark);
color: var(--surface);
}
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
color: var(--highlight);
}
/* ── 14. Legacy grid neutralised ────────────────────────────────── */
/* The old 3-column card grid is superseded by the single-column feed. */
.kiosmerdeka-blog-grid {
display: block;
}
.kiosmerdeka-blog-grid .kiosmerdeka-post-card {
width: 100%;
float: none;
margin: 0 0 24px;
}
/* The feed renders its own .label-name heading. A legacy .page-header is
neutralised rather than hidden, so any template still using it stays
readable. */
.page-header {
border: 0;
margin: 0 0 16px;
padding: 0;
}
.page-header .page-title {
margin: 0;
padding-bottom: 8px;
font-size: 20px;
font-weight: 900;
color: var(--text-heading);
border-bottom: 1px solid var(--border-color);
}
/* Cards without a thumbnail use the full column width. */
.body-post.no-thumb .home-right {
width: 100%;
padding: 0;
}
/* ── 15. Mobile menu panel ──────────────────────────────────────── */
/* The reference swaps its tab bar for a full-screen overlay; a
disclosure panel keeps the same header weight with none of the
focus-trap and scroll-lock machinery that overlay would need. */
@media only screen and (max-width: 767px) {
.thn-menu {
display: none;
box-shadow: none;
}
.thn-menu.is-open {
display: block;
padding-bottom: 8px;
}
.thn-menu-list {
float: none;
}
/* The active marker is an inset shadow, not a border: a 4px left border
shifted every label 4px right of the logo and the content below. */
.thn-menu-list li {
float: none;
width: 100%;
height: auto;
line-height: 1.4;
padding: 0;
border-bottom: 1px solid var(--border-color);
border-left: 0;
box-shadow: inset 4px 0 0 transparent;
}
.thn-menu-list li:first-child {
padding-left: 0;
}
.thn-menu-list li:hover,
.thn-menu-list li.current-menu-item,
.thn-menu-list li.current-menu-ancestor,
.thn-menu-list li.current_page_item {
border-bottom-color: var(--border-color);
box-shadow: inset 4px 0 0 var(--brand-primary);
}
.thn-menu-list li a {
display: block;
width: 100%;
padding: 13px var(--gutter);
}
.thn-menu-list ul.sub-menu {
position: static;
display: block;
min-width: 0;
border: 0;
box-shadow: none;
background: transparent;
padding: 0 0 6px 16px;
}
.thn-menu-list ul.sub-menu li {
border-bottom: 0;
}
.thn-menu-list ul.sub-menu li a {
padding: 8px var(--gutter);
}
.thn-menu-more {
display: none;
}
}
/* ── 16. Top-bar social widget ──────────────────────────────────── */
.thn-topbar-follow .widget {
margin: 0;
padding: 0;
background: none;
border: 0;
}
.thn-topbar-follow .widget-title {
display: none;
}
/* Footer link columns — the reference's .f-menu-box / .f-menu-cl-* /
.f-menu-list. Column widths step 2 → 3 → 4 tracks, headings are
16px/900 and links are 13px on a 25px line. */
.thn-footer-stuff .footer-widgets {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
border: 0;
padding: 0;
margin: 0 0 8px;
text-align: left;
}
/* Storefront floats .block and forces percentage widths; the grid owns
layout here. */
.thn-footer-stuff .footer-widgets .block,
.thn-footer-stuff .footer-widgets .block.footer-widget-2,
.thn-footer-stuff .footer-widgets .block.footer-widget-3,
.thn-footer-stuff .footer-widgets .block.footer-widget-4 {
float: none;
width: auto;
margin-right: 0;
}
/* Reference .footer-box-h5 */
.thn-footer-stuff .footer-widgets .widget-title {
display: inline-block;
margin: 0 0 5px;
font-size: 16px;
font-weight: 900;
line-height: 20px;
color: var(--text-heading);
}
.thn-footer-stuff .footer-widgets ul,
.thn-footer-stuff .footer-widgets ul.menu {
list-style: none;
margin: 0;
padding: 0;
}
/* Reference .f-menu-list li — 13px on 25px. Storefront's icons.css also
adds `padding-left:1.618em` plus a floating glyph to nav-menu items,
which is what pushed these links 26px right. Neither belongs here. */
.thn-footer-stuff .footer-widgets ul li,
.thn-footer-stuff .footer-widgets ul.menu li {
margin: 0;
padding: 0;
border: 0;
font-size: 13px;
line-height: 25px;
}
.thn-footer-stuff .footer-widgets ul li::before,
.thn-footer-stuff .footer-widgets ul li::after {
content: none;
display: none;
}
.thn-footer-stuff .footer-widgets ul li a,
.thn-footer-stuff .footer-widgets ul.menu li a {
display: inline;
padding: 0;
font-size: 13px;
line-height: 25px;
font-weight: 400;
color: var(--text-secondary);
text-decoration: none;
}
.thn-footer-stuff .footer-widgets ul li a:hover {
color: var(--brand-primary);
text-decoration: underline;
}
/* The footer has four widget areas (footer-1 … footer-4), so the grid
always reserves four tracks at desktop width — empty areas simply stay
empty, exactly like the reference's .f-menu-cl-1…4 at 25% each. */
@media only screen and (min-width: 768px) {
.thn-footer-stuff .footer-widgets {
grid-template-columns: repeat(3, 1fr);
}
}
@media only screen and (min-width: 1220px) {
.thn-footer-stuff .footer-widgets {
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
}
/* The footer template prints its own note, so the legacy credit row
must not reappear if the override is ever re-hooked. */
.kiosmerdeka-footer-credit {
display: none;
}
/* ═══════════════════════════════════════════════════════════════════
17. SHOP — product archive
-------------------------------------------------------------------
Same visual language as the story feed: hairline-bordered white
cards on a white field, a 46px tab bar for categories, a single
compact filter row, and brand-coloured prices.
Every existing behaviour is preserved — category tabs, result
count, sort dropdown, sale flash, Eksplor button, pagination.
═══════════════════════════════════════════════════════════════════ */
/* ── Category tabs (reference .menu bar) ────────────────────────── */
.kiosmerdeka-category-bar {
background: var(--surface);
border-bottom: 1px solid var(--border-color);
padding: 0;
margin: 0 0 20px;
}
.category-bar-inner {
display: flex;
align-items: stretch;
gap: 0;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
.category-bar-inner::-webkit-scrollbar {
display: none;
}
.category-item {
display: inline-flex;
align-items: center;
gap: 6px;
height: 46px;
padding: 0 18px;
border: 0;
border-bottom: 4px solid transparent;
background: none;
color: var(--text-secondary);
font-size: 14px;
font-weight: 500;
line-height: 46px;
white-space: nowrap;
text-decoration: none !important;
transition: color .15s ease, border-color .15s ease;
}
.category-item:first-child {
padding-left: 0;
}
.category-item:hover {
background: none;
color: var(--brand-primary);
border-bottom-color: rgba(59, 53, 174, .3);
}
.category-item.active {
background: none;
color: var(--brand-primary);
font-weight: 600;
border-bottom-color: var(--brand-primary);
}
.category-item .count {
font-size: 11px;
font-weight: 400;
opacity: .65;
}
/* ── Filter row ─────────────────────────────────────────────────── */
.kiosmerdeka-filter-bar {
margin: 0 0 20px;
padding: 0 0 12px;
border-bottom: 1px solid var(--border-color);
}
.filter-bar-inner,
.filter-controls {
display: block;
}
/* Storefront wraps the count and the sort select in .storefront-sorting
and stacks them with a 36px bottom margin. One row reads better and
keeps the filter strip a single line. */
.woocommerce .storefront-sorting {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
/* Storefront prints an empty notices div as the first child. As a flex
item it took the left slot, so space-between pushed the sort select
into the middle and the result count to the right. Drop it from the
flow and pin the two real children in order. */
.woocommerce .storefront-sorting .woocommerce-notices-wrapper:empty {
display: none;
}
.woocommerce .storefront-sorting .woocommerce-result-count {
order: 1;
float: none;
margin: 0;
}
/* Allow the select to shrink so count + sort share one row even on a
narrow phone instead of wrapping into two stacked lines. The select
itself needs width:100% — a