/* ==========================================================================
Themecut section styles — section backgrounds, grid layout, card variants.
Uses TT25 color preset variables throughout so Phase 4 token overrides
propagate automatically without touching this file.
========================================================================== */
/* --- Ripple effect --------------------------------------------------------- */
/* Buttons need a stacking context for the wave to be clipped */
.wp-block-button__link,
.tc-ripple {
position: relative;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
}
.tc-ripple-wave {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.28);
transform: scale(0);
pointer-events: none;
animation: tc-ripple-expand 550ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes tc-ripple-expand {
to {
transform: scale(1);
opacity: 0;
}
}
/* Sustained glow while the button is held down */
.wp-block-button__link.tc-held,
.tc-ripple.tc-held {
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
transition: box-shadow 80ms ease;
}
/* --- Scroll animations (tc-hidden / tc-visible) --------------------------- */
/* Initial hidden state — set by JS, so no FOUC if JS is disabled */
.tc-hidden {
opacity: 0;
transition:
opacity var(--tc-fade-dur, 600ms) ease,
transform var(--tc-fade-dur, 600ms) ease;
}
.tc-hidden[data-tc-dir="up"] { transform: translateY(28px); }
.tc-hidden[data-tc-dir="down"] { transform: translateY(-28px); }
.tc-hidden[data-tc-dir="left"] { transform: translateX(28px); }
.tc-hidden[data-tc-dir="right"] { transform: translateX(-28px); }
.tc-visible {
opacity: 1 !important;
transform: none !important;
}
/* --- Outline button section-aware colours ---------------------------------- */
/* On light sections (1, 2) outline buttons use the primary brand colour so
they are always visible against the light background. */
.tc-section.is-style-section-1 .wp-block-button.is-style-outline .wp-block-button__link,
.tc-section.is-style-section-2 .wp-block-button.is-style-outline .wp-block-button__link {
color: var(--wp--preset--color--accent-1) !important;
border-color: var(--wp--preset--color--accent-1) !important;
background: transparent !important;
}
.tc-section.is-style-section-1 .wp-block-button.is-style-outline .wp-block-button__link:hover,
.tc-section.is-style-section-2 .wp-block-button.is-style-outline .wp-block-button__link:hover {
background: color-mix(in srgb, var(--wp--preset--color--accent-1) 10%, transparent) !important;
}
/* On dark/brand sections (3, 4, 5) outline buttons always use white so they
stay legible regardless of what the primary colour is. */
.tc-section.is-style-section-3 .wp-block-button.is-style-outline .wp-block-button__link,
.tc-section.is-style-section-4 .wp-block-button.is-style-outline .wp-block-button__link,
.tc-section.is-style-section-5 .wp-block-button.is-style-outline .wp-block-button__link {
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.75) !important;
background: transparent !important;
}
.tc-section.is-style-section-3 .wp-block-button.is-style-outline .wp-block-button__link:hover,
.tc-section.is-style-section-4 .wp-block-button.is-style-outline .wp-block-button__link:hover,
.tc-section.is-style-section-5 .wp-block-button.is-style-outline .wp-block-button__link:hover {
background: rgba(255, 255, 255, 0.12) !important;
}
/* --- Generated page layout ------------------------------------------------ */
/* Remove WP's default block-gap between full-width sections so they tile
flush against each other. The 1.2rem blockGap in theme.json is intentional
for blog content but wrong for landing-page section layouts. */
.wp-block-post-content > .alignfull.tc-section {
margin-block-start: 0 !important;
}
/* WP's .is-layout-flow adds margin-block-start:1.2rem to every child except
:first-child. In CSS grids this means column 2+ in row 1 get extra top margin,
making the first row taller than necessary and cards misaligned.
Zero it out on every Themecut grid/flex container's direct children. */
.tc-grid > *,
.tc-menu-grid > *,
.tc-icon-row-grid > *,
.tc-gallery-mosaic-grid > *,
.tc-bento-grid > *,
.tc-services-list > *,
.tc-review-cards > *,
.tc-portfolio-items > *,
.tc-pt-grid > *,
.tc-pt-steps-list > *,
.tc-footer-top > *,
.tc-footer-links-grid > * {
margin-block-start: 0;
}
/* --- Section backgrounds -------------------------------------------------- */
.tc-section.is-style-section-1 {
background-color: var(--wp--preset--color--base);
color: var(--wp--preset--color--contrast);
}
.tc-section.is-style-section-2 {
background-color: var(--wp--preset--color--accent-5);
color: var(--wp--preset--color--contrast);
}
.tc-section.is-style-section-3 {
background-color: var(--wp--preset--color--accent-3);
color: var(--wp--preset--color--base);
}
.tc-section.is-style-section-4 {
background-color: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base);
}
.tc-section.is-style-section-5 {
background-color: #0a0a0a;
color: #f8fafc; /* hardcoded: section-5 is always near-black regardless of base override */
}
/* Pull headings to base color on dark/accent backgrounds */
.tc-section.is-style-section-3 .wp-block-heading,
.tc-section.is-style-section-4 .wp-block-heading,
.tc-section.is-style-section-5 .wp-block-heading {
color: inherit;
}
/* --- Grid layout ---------------------------------------------------------- */
/* tc-grid is the inner card container; column count comes from
tc-cols-N on the outer section via descendant selector. */
.tc-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(1rem, 2.5vw, 2rem);
width: 100%;
}
@media (min-width: 640px) {
.tc-cols-2 .tc-grid { grid-template-columns: repeat(2, 1fr); }
.tc-cols-3 .tc-grid { grid-template-columns: repeat(2, 1fr); }
.tc-cols-4 .tc-grid { grid-template-columns: repeat(2, 1fr); }
.tc-cols-6 .tc-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
.tc-cols-2 .tc-grid { grid-template-columns: repeat(2, 1fr); }
.tc-cols-3 .tc-grid { grid-template-columns: repeat(3, 1fr); }
.tc-cols-4 .tc-grid { grid-template-columns: repeat(4, 1fr); }
.tc-cols-6 .tc-grid { grid-template-columns: repeat(6, 1fr); }
}
/* --- Card variants -------------------------------------------------------- */
.tc-card {
padding: 1rem;
}
/* Team card: WP image block inside a card — remove default figure margin */
.tc-team-card .wp-block-image {
margin: 0;
width: 100%;
}
.tc-team-card .wp-block-image img {
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
display: block;
}
.tc-team-role {
color: rgba(0, 0, 0, .55);
}
.tc-section.is-style-section-3 .tc-team-role,
.tc-section.is-style-section-4 .tc-team-role,
.tc-section.is-style-section-5 .tc-team-role {
color: rgba(255, 255, 255, .65);
}
/* --- Team: hover-reveal card — bio slides up over the photo on hover ------- */
.tc-team-hover-photo-wrap {
position: relative;
overflow: hidden;
border-radius: 12px;
aspect-ratio: 3/4;
}
.tc-team-hover-photo-wrap .wp-block-image {
margin: 0;
height: 100%;
}
.tc-team-hover-photo-wrap .wp-block-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.tc-team-hover-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .2) 55%, transparent 100%);
display: flex;
align-items: flex-end;
padding: 20px;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.tc-team-hover-card:hover .tc-team-hover-overlay {
opacity: 1;
transform: translateY(0);
}
.tc-team-hover-bio {
color: #fff;
font-size: 0.9375rem;
line-height: 1.5;
margin: 0;
}
.tc-team-hover-name {
font-weight: 700;
font-size: 1.0625rem;
margin: 16px 0 2px;
padding-top: 16px;
border-top: 1px solid rgba(0, 0, 0, .08);
}
.tc-section.is-style-section-3 .tc-team-hover-name,
.tc-section.is-style-section-4 .tc-team-hover-name,
.tc-section.is-style-section-5 .tc-team-hover-name {
border-top-color: rgba(255, 255, 255, .12);
}
.tc-team-hover-role {
color: var(--wp--preset--color--accent-4);
font-size: 0.875rem;
margin: 0;
}
.tc-section.is-style-section-3 .tc-team-hover-role,
.tc-section.is-style-section-4 .tc-team-hover-role,
.tc-section.is-style-section-5 .tc-team-hover-role {
color: rgba(255, 255, 255, .65);
}
/* --- Team: large portrait — editorial grayscale-to-colour on hover --------- */
.tc-team-portrait-row {
gap: 32px;
}
.tc-team-portrait-card {
flex: 1 1 280px;
max-width: 360px;
}
.tc-team-portrait-card .wp-block-image {
margin: 0;
border-radius: 4px;
overflow: hidden;
aspect-ratio: 3/4;
}
.tc-team-portrait-card .wp-block-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: grayscale(100%);
transition: filter 0.4s ease;
}
.tc-team-portrait-card:hover .wp-block-image img {
filter: grayscale(0%);
}
.tc-team-portrait-caption {
margin-top: 20px;
}
.tc-team-portrait-name {
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.01em;
margin: 0 0 2px;
}
.tc-team-portrait-role {
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--wp--preset--color--accent-4);
margin: 0;
}
.tc-section.is-style-section-3 .tc-team-portrait-role,
.tc-section.is-style-section-4 .tc-team-portrait-role,
.tc-section.is-style-section-5 .tc-team-portrait-role {
color: rgba(255, 255, 255, .65);
}
.tc-card-boxed .tc-card {
background-color: var(--wp--preset--color--accent-5); /* surface token — elevates above base in both light and dark schemes */
border-radius: 10px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .10), 0 1px 2px -1px rgba(0, 0, 0, .07);
padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.tc-card-bordered .tc-card {
border: 1px solid rgba(0, 0, 0, .10);
border-radius: 10px;
padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
/* Cards inside dark-background sections */
.tc-section.is-style-section-3 .tc-card-boxed .tc-card,
.tc-section.is-style-section-4 .tc-card-boxed .tc-card,
.tc-section.is-style-section-5 .tc-card-boxed .tc-card {
background-color: rgba(255, 255, 255, .08);
box-shadow: none;
}
.tc-section.is-style-section-3 .tc-card-bordered .tc-card,
.tc-section.is-style-section-4 .tc-card-bordered .tc-card,
.tc-section.is-style-section-5 .tc-card-bordered .tc-card {
border-color: rgba(255, 255, 255, .15);
}
/* --- Pricing grid --------------------------------------------------------- */
.tc-pricing-grid {
align-items: stretch;
}
.tc-pricing-card {
display: flex;
flex-direction: column;
border: 1px solid rgba(0,0,0,.1);
border-top: 3px solid var(--wp--preset--color--accent-1);
border-radius: 12px;
padding: 32px 28px;
background: var(--wp--preset--color--accent-5);
position: relative;
}
/* Same fix as .tc-pt-card / .tc-ps-card — own surface, own matched text color. */
.tc-pricing-tiered .tc-pricing-card {
color: var(--wp--preset--color--contrast);
}
/* Badge pill — hidden when empty */
.tc-pricing-badge {
display: inline-block !important;
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
background: var(--wp--preset--color--accent-1);
color: var(--wp--preset--color--base);
padding: 3px 12px;
border-radius: 99px;
margin-bottom: 16px;
width: fit-content;
}
.tc-pricing-badge:empty { display: none !important; }
.tc-pricing-card .tc-price-period {
color: var(--wp--preset--color--accent-4) !important;
margin-left: 6px;
font-size: .9rem;
align-self: flex-end;
padding-bottom: .4rem;
}
.tc-pricing-card .tc-card-desc {
color: var(--wp--preset--color--accent-4) !important;
font-size: .9rem;
}
.tc-pricing-divider {
border-top: 1px solid rgba(0,0,0,.1) !important;
border-bottom: none !important;
opacity: .6;
margin-top: 20px !important;
margin-bottom: 20px !important;
}
/* Highlighted plan (highlight knob → tc-highlight-middle / tc-highlight-last) */
.tc-highlight-middle .tc-pricing-grid > .wp-block-group:nth-child(2),
.tc-highlight-last .tc-pricing-grid > .wp-block-group:last-child {
background-color: var(--wp--preset--color--accent-1);
color: #fff;
border-color: transparent;
border-top-color: var(--wp--preset--color--accent-2);
box-shadow: 0 12px 48px rgba(0, 0, 0, .22);
transform: scale(1.04);
z-index: 1;
}
.tc-highlight-middle .tc-pricing-grid > .wp-block-group:nth-child(2) .tc-price-period,
.tc-highlight-last .tc-pricing-grid > .wp-block-group:last-child .tc-price-period,
.tc-highlight-middle .tc-pricing-grid > .wp-block-group:nth-child(2) .tc-card-desc,
.tc-highlight-last .tc-pricing-grid > .wp-block-group:last-child .tc-card-desc {
color: rgba(255, 255, 255, .7) !important;
}
.tc-highlight-middle .tc-pricing-grid > .wp-block-group:nth-child(2) .tc-pricing-badge,
.tc-highlight-last .tc-pricing-grid > .wp-block-group:last-child .tc-pricing-badge {
background: rgba(255,255,255,.25);
color: #fff;
}
.tc-highlight-middle .tc-pricing-grid > .wp-block-group:nth-child(2) .tc-pricing-divider,
.tc-highlight-last .tc-pricing-grid > .wp-block-group:last-child .tc-pricing-divider {
border-top-color: rgba(255,255,255,.3) !important;
opacity: 1;
}
.tc-highlight-middle .tc-pricing-grid > .wp-block-group:nth-child(2) .tc-feature-list li::before,
.tc-highlight-last .tc-pricing-grid > .wp-block-group:last-child .tc-feature-list li::before {
color: #fff;
}
/* --- Stats bar ------------------------------------------------------------ */
.tc-stats-row {
flex-wrap: wrap;
gap: clamp(1rem, 4vw, 3rem);
}
.tc-stat-number {
line-height: 1;
}
/* --- Stats cards — icon badge, gradient number, hover lift ----------------- */
.tc-stat-card {
text-align: center;
padding: clamp(1.5rem, 3vw, 2.25rem) 1.5rem;
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, .08);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tc-stat-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, .10);
}
.tc-stat-card-icon {
width: 48px;
height: 48px;
border-radius: 999px;
background: color-mix(in srgb, var(--wp--preset--color--accent-1) 12%, transparent);
color: var(--wp--preset--color--accent-1);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.tc-stat-card-icon svg {
width: 22px;
height: 22px;
}
.tc-stat-card-number {
font-size: clamp(2rem, 4.5vw, 3rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1;
margin: 0 0 8px;
background: linear-gradient(135deg, var(--wp--preset--color--accent-1) 0%, var(--wp--preset--color--accent-2) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.tc-stat-card-label {
font-size: 0.9375rem;
color: var(--wp--preset--color--accent-4);
margin: 0;
}
/* On section-3 (solid brand-colour bg) and section-4/5 (dark), the accent-1-based
icon tint, gradient number, and muted accent-4 label all collapse into the
background — same fix pattern as .tc-style-gradient: switch to white-based. */
.tc-section.is-style-section-3 .tc-stat-card,
.tc-section.is-style-section-4 .tc-stat-card,
.tc-section.is-style-section-5 .tc-stat-card {
background: rgba(255, 255, 255, .08);
border-color: rgba(255, 255, 255, .15);
}
.tc-section.is-style-section-3 .tc-stat-card-icon,
.tc-section.is-style-section-4 .tc-stat-card-icon,
.tc-section.is-style-section-5 .tc-stat-card-icon {
background: rgba(255, 255, 255, .14);
color: #fff;
}
.tc-section.is-style-section-3 .tc-stat-card-number,
.tc-section.is-style-section-4 .tc-stat-card-number,
.tc-section.is-style-section-5 .tc-stat-card-number {
background: linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, #ffffff 70%, var(--wp--preset--color--accent-2)) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.tc-section.is-style-section-3 .tc-stat-card-label,
.tc-section.is-style-section-4 .tc-stat-card-label,
.tc-section.is-style-section-5 .tc-stat-card-label {
color: rgba(255, 255, 255, .7);
}
/* --- Testimonial card ----------------------------------------------------- */
.tc-quote {
font-style: italic;
margin-bottom: 1.5rem !important;
}
.tc-author-name,
.tc-author-meta {
margin-bottom: 0 !important;
}
.tc-author-meta {
opacity: 0.65;
}
/* --- Trust badges --------------------------------------------------------- */
.tc-badges-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(0.75rem, 2vw, 1.5rem);
}
.tc-badge {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 20px 28px;
}
.tc-badge-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: color-mix(in srgb, var(--wp--preset--color--accent-1) 12%, transparent);
color: var(--wp--preset--color--accent-1);
display: flex;
align-items: center;
justify-content: center;
}
.tc-section.is-style-section-3 .tc-badge-icon,
.tc-section.is-style-section-4 .tc-badge-icon,
.tc-section.is-style-section-5 .tc-badge-icon {
background: rgba(255, 255, 255, .14);
color: #fff;
}
.tc-badge-label {
font-size: .875rem;
font-weight: 600;
text-align: center;
}
/* --- Logos row ------------------------------------------------------------ */
.tc-logos-list {
flex-wrap: wrap;
gap: clamp(1rem, 3vw, 3rem);
}
.tc-logo-img img {
max-height: 48px;
width: auto;
object-fit: contain;
filter: grayscale(1);
opacity: .55;
transition: opacity .25s, filter .25s;
}
.tc-logo-img img:hover {
filter: none;
opacity: 1;
}
/* --- FAQ accordion -------------------------------------------------------- */
.tc-faq-list {
width: 100%;
}
.tc-faq-item {
border-bottom: 1px solid rgba(0, 0, 0, .10);
}
.tc-section.is-style-section-3 .tc-faq-item,
.tc-section.is-style-section-4 .tc-faq-item,
.tc-section.is-style-section-5 .tc-faq-item {
border-bottom-color: rgba(255, 255, 255, .15);
}
.tc-faq-item > summary {
font-weight: 600;
cursor: pointer;
padding: 1rem 2rem 1rem 0;
position: relative;
list-style: none;
}
.tc-faq-item > summary::-webkit-details-marker {
display: none;
}
.tc-faq-item > summary::after {
content: '+';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 1.25rem;
line-height: 1;
transition: transform .2s;
}
.tc-faq-item[open] > summary::after {
transform: translateY(-50%) rotate(45deg);
}
.tc-faq-item .wp-block-paragraph {
padding: 0 0 1rem;
margin: 0;
}
/* --- Footer columns ------------------------------------------------------- */
.tc-footer-top {
gap: clamp(2rem, 5vw, 4rem);
}
.tc-footer-links-grid {
flex-wrap: wrap;
gap: clamp(1.5rem, 4vw, 3rem);
}
.tc-footer-link-list {
list-style: none !important;
padding: 0 !important;
margin-top: .75rem !important;
display: flex;
flex-direction: column;
gap: .5rem;
}
.tc-footer-link-list li {
padding: 0 !important;
}
/* Global fallback footer — dark via is-style-section-5 on the outer group */
.tc-site-footer .wp-block-site-title a {
text-decoration: none;
color: inherit;
}
.tc-site-footer .wp-block-navigation a {
font-size: .875rem;
color: rgba(255, 255, 255, .5);
text-decoration: none;
}
.tc-site-footer .wp-block-navigation a:hover {
color: #fff;
}
/* Footer bottom bar: thin rule + muted copyright line */
.tc-footer-bar {
border-top: 1px solid rgba(255, 255, 255, .1);
margin-top: 28px;
padding-top: 20px;
}
.tc-footer-bar p {
font-size: 0.8125rem;
color: rgba(255, 255, 255, .35);
margin: 0;
}
.tc-footer-bar a {
color: rgba(255, 255, 255, .5);
text-decoration: none;
}
.tc-footer-bar a:hover {
color: rgba(255, 255, 255, .85);
}
/* Footer muted text — opacity-based so it works on any section background */
.tc-footer-tagline {
opacity: 0.6;
}
.tc-footer-copyright {
opacity: 0.5;
}
.tc-label-muted {
opacity: 0.65;
}
.tc-welcome-footer h5.wp-block-heading {
color: rgba(255, 255, 255, .35);
}
.tc-footer-plain-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.tc-footer-plain-list li {
padding: 5px 0 !important;
}
.tc-footer-plain-list a {
font-size: 0.9rem;
color: rgba(255, 255, 255, .55);
text-decoration: none;
transition: color 150ms;
}
.tc-footer-plain-list a:hover {
color: #fff;
}
/* --- About / image layout knobs ------------------------------------------ */
/* image-right flips the two-column order */
.tc-image-right .tc-about-image-col { order: 2; }
.tc-image-right .tc-about-content-col { order: 1; }
/* --- Process steps -------------------------------------------------------- */
.tc-step-number {
opacity: .25;
line-height: 1;
margin-bottom: .5rem !important;
}
/* --- Feather icon in feature/service cards -------------------------------- */
.tc-icon {
margin-bottom: .75rem !important;
line-height: 1;
}
.tc-icon svg {
width: 32px;
height: 32px;
stroke: var(--wp--preset--color--accent-3);
stroke-width: 1.5;
fill: none;
}
/* On dark/accent section backgrounds invert to white */
.tc-section.is-style-section-3 .tc-icon svg,
.tc-section.is-style-section-4 .tc-icon svg,
.tc-section.is-style-section-5 .tc-icon svg {
stroke: var(--wp--preset--color--base);
}
/* --- Contact form --------------------------------------------------------- */
/* Card that wraps the form fields */
.tc-contact-form-only .tc-form-card {
color: var(--wp--preset--color--contrast);
}
.tc-form-card {
background: var(--wp--preset--color--accent-5);
border: 1px solid rgba(0,0,0,.08);
border-radius: 20px;
padding: clamp(28px, 5vw, 48px);
box-shadow: 0 4px 40px rgba(0,0,0,.07);
}
.tc-contact-form label {
display: block;
font-size: .8125rem;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
opacity: .7;
margin-bottom: 7px;
}
.tc-contact-form input,
.tc-contact-form textarea {
width: 100%;
padding: 12px 16px;
border: 1.5px solid rgba(0,0,0,.14);
border-radius: 10px;
font-size: 1rem;
font-family: inherit;
box-sizing: border-box;
background: var(--wp--preset--color--base);
color: inherit;
transition: border-color .15s, box-shadow .15s;
}
.tc-contact-form input:focus,
.tc-contact-form textarea:focus {
outline: 2px solid var(--wp--preset--color--accent-1);
outline-offset: 0;
border-color: var(--wp--preset--color--accent-1);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent-1) 18%, transparent);
}
.tc-contact-form textarea {
resize: vertical;
min-height: 140px;
}
.tc-contact-form .tc-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1rem;
}
@media (max-width: 540px) {
.tc-contact-form .tc-form-row { grid-template-columns: 1fr; }
}
.tc-contact-form .tc-form-group {
margin-bottom: 1rem;
}
/* Full-width submit button */
.tc-form-submit {
width: 100%;
display: block;
text-align: center;
margin-top: 8px;
cursor: pointer;
border: none;
}
/* Contact info — two-line layout (meta label + value) */
.tc-contact-info-item {
align-items: flex-start !important;
}
.tc-contact-icon {
margin-top: 2px;
}
.tc-contact-detail {
display: flex;
flex-direction: column;
gap: 2px;
}
.tc-contact-meta {
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
opacity: .5;
}
.tc-contact-value {
font-weight: 500;
font-size: .9375rem;
}
/* Contact info list — Feather icon + text rows */
.tc-contact-info {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.tc-contact-info-item,
.tc-loc-detail {
display: flex;
align-items: center;
gap: 12px;
font-size: .9375rem;
margin: 0 0 .5rem !important;
}
.tc-contact-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 8px;
background: color-mix(in srgb, var(--wp--preset--color--accent-1) 12%, transparent);
color: var(--wp--preset--color--accent-1);
display: flex;
align-items: center;
justify-content: center;
}
.tc-section.is-style-section-3 .tc-contact-icon,
.tc-section.is-style-section-4 .tc-contact-icon,
.tc-section.is-style-section-5 .tc-contact-icon {
background: rgba(255, 255, 255, .14);
color: #fff;
}
.tc-contact-link,
.tc-loc-detail a {
color: inherit;
text-decoration: none;
}
.tc-contact-link:hover,
.tc-loc-detail a:hover {
color: var(--wp--preset--color--accent-1);
}
.tc-loc-hours { opacity: .8; }
/* --- Transparent nav hero ------------------------------------------------- */
/*
* When a page opens with a tc-transparent-nav cover block, the site header
* floats over the hero image instead of sitting above it.
*
* Class applied to: the wp:cover block's outer div (via className in block attrs).
* Selector strategy: body:has() detects when that element is the first child
* of the post content area, then repositions the header template part.
*
* Works in all browsers that support :has() (Chrome 105+, Firefox 121+, Safari 15.4+).
* On older browsers the header remains in normal flow — graceful degradation.
*/
body:has(.wp-block-post-content > .wp-block-cover.tc-transparent-nav:first-child) header.wp-block-template-part {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: transparent !important;
}
/* The inner .tc-header-bar div has its own background-color — must clear it too
since CSS backgrounds don't inherit from parent to child. */
body:has(.wp-block-post-content > .wp-block-cover.tc-transparent-nav:first-child) header.wp-block-template-part .tc-header-bar {
background: transparent !important;
border-bottom-color: rgba(255, 255, 255, .1) !important;
}
/* Make nav links and site title white so they're legible over the image */
body:has(.wp-block-post-content > .wp-block-cover.tc-transparent-nav:first-child) header.wp-block-template-part a,
body:has(.wp-block-post-content > .wp-block-cover.tc-transparent-nav:first-child) header.wp-block-template-part .wp-block-site-title,
body:has(.wp-block-post-content > .wp-block-cover.tc-transparent-nav:first-child) header.wp-block-template-part .wp-block-navigation-item__content {
color: #fff !important;
}
/* Compensate: the body needs top padding equal to header height so content
below the hero is not hidden. TT25 header is typically 72–80px. */
body:has(.wp-block-post-content > .wp-block-cover.tc-transparent-nav:first-child) {
padding-top: 0 !important;
}
/* When WP admin bar is visible (32px fixed at top), push floating header down
so it doesn't sit behind the admin bar. */
.admin-bar body:has(.wp-block-post-content > .wp-block-cover.tc-transparent-nav:first-child) header.wp-block-template-part {
top: 32px;
}
@media screen and (max-width: 782px) {
.admin-bar body:has(.wp-block-post-content > .wp-block-cover.tc-transparent-nav:first-child) header.wp-block-template-part {
top: 46px; /* admin bar collapses to 46px on mobile */
}
}
/* --- nav.variant: transparent — header overlays the first section ---------- */
/*
* When the backend renderer uses nav.variant: "transparent", the header template
* part gets the class tc-header-transparent on its inner .tc-header-bar div.
* The header template part is shared site-wide (one WP template part, every
* page), but the overlay + white-text treatment is only correct on the front
* page — subpages normally open with page-hero-inner (light background, no
* image underneath), so forcing white nav text there makes it invisible.
* WordPress adds body.home only on the actual front page, so scoping every
* rule here to body.home restricts the effect to where a dark hero actually
* exists, with zero dependency on what Claude generates per page.
*/
body.home:has(header .tc-header-transparent) header.wp-block-template-part {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: transparent !important;
box-shadow: none !important;
}
body.home:has(header .tc-header-transparent) header.wp-block-template-part .tc-header-bar {
background: transparent !important;
border-bottom-color: rgba(255, 255, 255, .1) !important;
}
body.home:has(header .tc-header-transparent) header.wp-block-template-part a,
body.home:has(header .tc-header-transparent) header.wp-block-template-part .wp-block-site-title,
body.home:has(header .tc-header-transparent) header.wp-block-template-part .wp-block-navigation-item__content {
color: #fff !important;
}
body.home:has(header .tc-header-transparent) {
padding-top: 0 !important;
}
.admin-bar body.home:has(header .tc-header-transparent) header.wp-block-template-part {
top: 32px;
}
@media screen and (max-width: 782px) {
.admin-bar body.home:has(header .tc-header-transparent) header.wp-block-template-part {
top: 46px;
}
}
/* --- nav.variant: centered — logo + nav stacked and centered --------------- */
.tc-header-centered .wp-block-site-title {
text-align: center;
}
/* --- Header auto-matches the colour of the first page section -------------- */
/*
* When a generated page opens with a dark or brand-coloured section, the
* header picks up the same background so there is no white bar breaking the
* immersive design. Requires CSS :has() (Chrome 105+, Firefox 121+, Safari 15.4+).
*
* section-3 (brand primary) → accent-3 bg
* section-4 (contrast) → contrast bg (dark in light schemes, light in dark schemes)
* section-5 (near-black) → always #0a0a0a
*/
body:has(.wp-block-post-content > .alignfull.is-style-section-3:first-child) header.wp-block-template-part {
background-color: var(--wp--preset--color--accent-3) !important;
color: var(--wp--preset--color--base);
}
body:has(.wp-block-post-content > .alignfull.is-style-section-3:first-child) header.wp-block-template-part .tc-header-bar {
background-color: var(--wp--preset--color--accent-3) !important;
}
body:has(.wp-block-post-content > .alignfull.is-style-section-3:first-child) header.wp-block-template-part a,
body:has(.wp-block-post-content > .alignfull.is-style-section-3:first-child) header.wp-block-template-part .wp-block-site-title {
color: var(--wp--preset--color--base) !important;
}
body:has(.wp-block-post-content > .alignfull.is-style-section-4:first-child) header.wp-block-template-part {
background-color: var(--wp--preset--color--contrast) !important;
color: var(--wp--preset--color--base);
}
body:has(.wp-block-post-content > .alignfull.is-style-section-4:first-child) header.wp-block-template-part .tc-header-bar {
background-color: var(--wp--preset--color--contrast) !important;
}
body:has(.wp-block-post-content > .alignfull.is-style-section-4:first-child) header.wp-block-template-part a,
body:has(.wp-block-post-content > .alignfull.is-style-section-4:first-child) header.wp-block-template-part .wp-block-site-title {
color: var(--wp--preset--color--base) !important;
}
body:has(.wp-block-post-content > .alignfull.is-style-section-5:first-child) header.wp-block-template-part:not(:has(.tc-header-transparent)) {
background-color: #0a0a0a !important;
color: #f8fafc;
}
body:has(.wp-block-post-content > .alignfull.is-style-section-5:first-child) header.wp-block-template-part:not(:has(.tc-header-transparent)) .tc-header-bar {
background-color: #0a0a0a !important;
}
body:has(.wp-block-post-content > .alignfull.is-style-section-5:first-child) header.wp-block-template-part:not(:has(.tc-header-transparent)) a,
body:has(.wp-block-post-content > .alignfull.is-style-section-5:first-child) header.wp-block-template-part:not(:has(.tc-header-transparent)) .wp-block-site-title {
color: #f8fafc !important;
}
/* --- Hero centered --------------------------------------------------------- */
.tc-hero-centered {
text-align: center;
min-height: 100dvh;
display: flex;
align-items: center;
}
/* Eyebrow label — small uppercase label above the main heading */
.tc-eyebrow {
opacity: 0.6;
}
/* --- Style knob: gradient — gradient text on the section heading ----------- */
.tc-style-gradient .wp-block-heading {
background: linear-gradient(135deg, var(--wp--preset--color--accent-1) 0%, var(--wp--preset--color--accent-2) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* On sections that already have a coloured bg, use light/white gradient */
.tc-section.is-style-section-3 .tc-style-gradient .wp-block-heading,
.tc-section.is-style-section-4 .tc-style-gradient .wp-block-heading,
.tc-section.is-style-section-5 .tc-style-gradient .wp-block-heading {
background: linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, #ffffff 70%, var(--wp--preset--color--accent-2)) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* --- Style knob: bold — maximum typographic weight on headings ------------- */
.tc-style-bold .wp-block-heading {
font-weight: 800 !important;
letter-spacing: -0.035em !important;
}
/* --- Heading style knob: typographic character per section ---------------- */
.tc-hs-editorial .wp-block-heading {
font-weight: 900 !important;
letter-spacing: -0.05em !important;
}
.tc-hs-heavy .wp-block-heading {
font-weight: 800 !important;
letter-spacing: -0.02em !important;
}
.tc-hs-grounded .wp-block-heading {
font-weight: 700 !important;
letter-spacing: 0 !important;
}
.tc-hs-uppercase .wp-block-heading {
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
}
/* --- Accent-top card variant ---------------------------------------------- */
.tc-card-accent-top .tc-card {
border-top: 3px solid var(--wp--preset--color--accent-1);
border-radius: 0 0 10px 10px;
background-color: var(--wp--preset--color--accent-5);
padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.tc-section.is-style-section-3 .tc-card-accent-top .tc-card,
.tc-section.is-style-section-4 .tc-card-accent-top .tc-card,
.tc-section.is-style-section-5 .tc-card-accent-top .tc-card {
background-color: rgba(255, 255, 255, .08);
border-top-color: var(--wp--preset--color--accent-2);
}
/* --- Icon-circle card variant ---------------------------------------------- */
.tc-card-icon-circle .tc-icon {
width: 52px;
height: 52px;
border-radius: 50%;
background-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 15%, transparent);
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
margin-bottom: 1.25rem !important;
}
/* --- Pricing feature list — checkmarks, no bullets ------------------------- */
.tc-feature-list {
list-style: none !important;
padding-left: 0 !important;
margin: 0 0 1.5rem !important;
}
.tc-feature-list li {
padding-left: 1.75rem !important;
position: relative;
margin-bottom: .5rem;
}
.tc-feature-list li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--wp--preset--color--accent-1);
font-weight: 700;
}
/* Pricing card on dark section backgrounds — restore text-period and desc contrast */
.tc-section.is-style-section-3 .tc-pricing-card .tc-price-period,
.tc-section.is-style-section-3 .tc-pricing-card .tc-card-desc,
.tc-section.is-style-section-4 .tc-pricing-card .tc-price-period,
.tc-section.is-style-section-4 .tc-pricing-card .tc-card-desc,
.tc-section.is-style-section-5 .tc-pricing-card .tc-price-period,
.tc-section.is-style-section-5 .tc-pricing-card .tc-card-desc {
color: rgba(255, 255, 255, .65) !important;
}
/* ============================================================
PROCESS TERMINAL
Two-column layout: numbered steps (left) + terminal window (right).
============================================================ */
.tc-process-terminal .tc-pt-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2.5rem, 5vw, 4rem);
align-items: center;
}
.tc-pt-steps-list {
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.tc-pt-step {
display: flex;
gap: 1.25rem;
align-items: flex-start;
}
.tc-pt-num {
flex-shrink: 0;
width: 2.25rem !important;
height: 2.25rem;
border-radius: 50%;
background: var(--wp--preset--color--accent-1);
color: #fff;
font-weight: 700;
font-size: 0.8125rem !important;
display: flex;
align-items: center;
justify-content: center;
margin: 0 !important;
line-height: 1 !important;
padding: 0 !important;
}
.tc-pt-step-body h4 {
margin-bottom: 0.375rem;
font-size: 1.0625rem;
}
.tc-pt-step-body p {
margin: 0;
font-size: 0.9375rem;
opacity: 0.8;
}
/* Terminal window */
.tc-terminal {
border-radius: 12px;
overflow: hidden;
background: #0d1117;
font-family: 'Fira Code', 'Cascadia Code', 'Consolas', 'Monaco', monospace;
font-size: clamp(0.75rem, 1.4vw, 0.875rem);
line-height: 1.7;
box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06);
}
.tc-terminal-bar {
background: #21262d;
padding: 12px 16px;
display: flex;
align-items: center;
gap: 6px;
}
.tc-terminal-dot {
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
}
.tc-dot-red { background: #ff5f57; }
.tc-dot-yellow { background: #febc2e; }
.tc-dot-green { background: #28c840; }
.tc-terminal-title {
margin-left: auto;
margin-right: auto;
color: #8b949e;
font-size: 0.75rem;
}
.tc-terminal-body {
padding: 20px 24px;
color: #e6edf3;
}
.tc-t-prompt { color: #39d353; }
.tc-t-cmd { color: #e6edf3; }
.tc-t-comment { color: #8b949e; font-style: italic; }
.tc-t-key { color: #79c0ff; }
.tc-t-colon { color: #8b949e; }
.tc-t-val { color: #a5d6ff; }
.tc-t-ok { color: #39d353; }
.tc-cursor {
display: inline-block;
width: 8px;
height: 1em;
background: #58a6ff;
margin-left: 3px;
vertical-align: text-bottom;
animation: tc-blink 1.1s steps(2) infinite;
}
@keyframes tc-blink { 50% { opacity: 0; } }
@media (max-width: 860px) {
.tc-process-terminal .tc-pt-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
PORTFOLIO GRID
Image cards with hover overlay revealing caption + link.
============================================================ */
.tc-portfolio-items {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.tc-cols-2.tc-portfolio-grid .tc-portfolio-items { grid-template-columns: repeat(2, 1fr); }
.tc-portfolio-item { width: 100%; }
.tc-portfolio-thumb {
position: relative;
overflow: hidden;
border-radius: 10px;
aspect-ratio: 4 / 3;
background: var(--wp--preset--color--accent-5);
}
.tc-portfolio-thumb .wp-block-image,
.tc-portfolio-thumb figure {
margin: 0;
width: 100%;
height: 100%;
display: block;
}
.tc-portfolio-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 500ms ease;
}
.tc-portfolio-item:hover .tc-portfolio-thumb img { transform: scale(1.05); }
.tc-portfolio-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 55%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 1.5rem;
opacity: 0;
transition: opacity 300ms ease;
}
.tc-portfolio-item:hover .tc-portfolio-overlay { opacity: 1; }
.tc-portfolio-caption {
color: #fff;
font-weight: 600;
font-size: 1rem;
margin: 0 0 0.4rem !important;
}
.tc-portfolio-link {
display: inline-block;
color: var(--wp--preset--color--accent-1);
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
transition: opacity 200ms;
}
.tc-portfolio-link:hover { opacity: .75; }
@media (max-width: 768px) {
.tc-portfolio-items { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.tc-portfolio-items { grid-template-columns: 1fr; }
}
/* ============================================================
BUTTON STYLE VARIANTS
Fallback CSS — primary control is via DesignApplicator →
wp_global_styles styles.elements.button.border.radius.
These classes are set on if button_style is applied.
============================================================ */
/* ============================================================
MENU SLIDER
Tab-filtered menu grid for restaurants / cafes.
Tabs are injected by JS (initMenuFilter). Items use
data-category attr; JS shows/hides them on tab click.
============================================================ */
/* Tab nav — injected by JS before .tc-menu-grid */
.tc-menu-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
margin-bottom: 2.5rem;
}
.tc-menu-tab {
background: transparent;
border: 1.5px solid var(--wp--preset--color--accent-1);
border-radius: 100px;
color: var(--wp--preset--color--accent-1);
cursor: pointer;
font-family: inherit;
font-size: 0.875rem;
font-weight: 500;
padding: 0.4rem 1.1rem;
transition: background 180ms ease, color 180ms ease;
}
.tc-menu-tab:hover,
.tc-menu-tab.is-active {
background: var(--wp--preset--color--accent-1);
color: #fff;
}
/* On dark section backgrounds */
.tc-section.is-style-section-3 .tc-menu-tab,
.tc-section.is-style-section-4 .tc-menu-tab,
.tc-section.is-style-section-5 .tc-menu-tab {
border-color: rgba(255, 255, 255, .5);
color: rgba(255, 255, 255, .85);
}
.tc-section.is-style-section-3 .tc-menu-tab:hover,
.tc-section.is-style-section-3 .tc-menu-tab.is-active,
.tc-section.is-style-section-4 .tc-menu-tab:hover,
.tc-section.is-style-section-4 .tc-menu-tab.is-active,
.tc-section.is-style-section-5 .tc-menu-tab:hover,
.tc-section.is-style-section-5 .tc-menu-tab.is-active {
background: rgba(255, 255, 255, .15);
border-color: #fff;
color: #fff;
}
/* Menu item grid */
.tc-menu-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.tc-cols-2.tc-menu-section .tc-menu-grid { grid-template-columns: repeat(2, 1fr); }
.tc-menu-item {
display: flex;
flex-direction: column;
margin-block-start: 0;
}
/* wp:html blocks inside the grid may get a .wp-block-html wrapper — ensure it fills the cell */
.tc-menu-grid .wp-block-html {
display: contents;
}
.tc-menu-section .tc-menu-card {
color: var(--wp--preset--color--contrast);
}
.tc-menu-card {
border-radius: 10px;
background: var(--wp--preset--color--accent-5);
padding: clamp(1.1rem, 2vw, 1.5rem);
height: 100%;
display: flex;
flex-direction: column;
gap: 0.5rem;
transition: box-shadow 200ms ease, transform 200ms ease;
}
.tc-menu-card:hover {
box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
transform: translateY(-2px);
}
/* Dark section overrides */
.tc-section.is-style-section-3 .tc-menu-card,
.tc-section.is-style-section-4 .tc-menu-card,
.tc-section.is-style-section-5 .tc-menu-card {
background: rgba(255, 255, 255, .07);
}
.tc-menu-item-header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.75rem;
flex-wrap: wrap;
}
.tc-menu-item-name {
font-size: 1rem !important;
font-weight: 600 !important;
margin: 0 !important;
flex: 1;
}
.tc-menu-price {
font-size: 1rem;
font-weight: 700;
color: var(--wp--preset--color--accent-1);
white-space: nowrap;
flex-shrink: 0;
}
.tc-menu-item-desc {
font-size: 0.9rem;
opacity: 0.75;
margin: 0 !important;
flex: 1;
}
.tc-menu-cat-badge {
display: inline-block;
background: color-mix(in srgb, var(--wp--preset--color--accent-1) 12%, transparent);
color: var(--wp--preset--color--accent-1);
border-radius: 100px;
font-size: 0.75rem;
font-weight: 600;
padding: 0.2rem 0.65rem;
margin-top: 0.25rem;
align-self: flex-start;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.tc-section.is-style-section-3 .tc-menu-cat-badge,
.tc-section.is-style-section-4 .tc-menu-cat-badge,
.tc-section.is-style-section-3 .tc-menu-cat-badge,
.tc-section.is-style-section-4 .tc-menu-cat-badge,
.tc-section.is-style-section-5 .tc-menu-cat-badge {
background: rgba(255, 255, 255, .12);
color: #fff;
}
@media (max-width: 768px) {
.tc-menu-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ==========================================================================
IMAGE SLIDER
Centered viewport slider with prev/next arrows and dot indicators.
JS (initSlider) builds the dots and drives slide transitions.
========================================================================== */
.tc-slider {
position: relative;
overflow: hidden;
border-radius: 12px;
max-width: 1200px;
margin: 0 auto;
outline: none;
background: var(--wp--preset--color--accent-5);
}
.tc-slider-track {
display: flex;
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.tc-slide {
min-width: 100%;
position: relative;
overflow: hidden;
flex-shrink: 0;
}
.tc-slide-img {
width: 100%;
height: clamp(280px, 50vw, 560px);
object-fit: cover;
display: block;
}
/* Caption overlay — gradient from bottom, hidden when empty */
.tc-slide-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 100%);
color: #fff;
padding: 40px 32px 20px;
font-size: .9375rem;
font-weight: 500;
margin: 0;
}
.tc-slide-caption:empty { display: none; }
/* Arrow buttons */
.tc-slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,.92);
color: #111;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 14px rgba(0,0,0,.22);
z-index: 10;
transition: background .18s, transform .18s;
padding: 0;
}
.tc-slider-btn:hover {
background: #fff;
transform: translateY(-50%) scale(1.1);
}
.tc-slider-prev { left: 16px; }
.tc-slider-next { right: 16px; }
/* Dot indicators — built by JS */
.tc-slider-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
padding: 16px 0 4px;
}
.tc-slider-dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: none;
background: var(--wp--preset--color--accent-4);
opacity: .35;
cursor: pointer;
padding: 0;
transition: opacity .2s, transform .2s, background .2s;
}
.tc-slider-dot.is-active {
background: var(--wp--preset--color--accent-1);
opacity: 1;
transform: scale(1.4);
}
/* Hide arrows when only one slide */
.tc-slider[data-single] .tc-slider-btn { display: none; }
@media (max-width: 600px) {
.tc-slider-btn { width: 38px; height: 38px; }
.tc-slider-prev { left: 8px; }
.tc-slider-next { right: 8px; }
}
/* ==========================================================================
Blog — post card grid, single post, navigation, comments
========================================================================== */
/* ── Blog / archive hero header ──────────────────────────────────────────── */
/* Centres all content and ensures heading + eyebrow colour inherit from the
dark section-4 background. The eyebrow colour override is inline via the
pattern's style attribute; this rule just ensures the heading stays white. */
.tc-blog-hero {
text-align: center;
}
.tc-blog-subtitle {
opacity: 0.65;
}
.tc-blog-hero .wp-block-heading,
.tc-blog-hero .wp-block-query-title {
color: inherit;
}
/* ── Post grid ────────────────────────────────────────────────────────────── */
.tc-post-grid.wp-block-post-template {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
list-style: none;
margin: 0;
padding: 0;
}
/* ── Post card ────────────────────────────────────────────────────────────── */
.tc-post-card {
background: var(--wp--preset--color--accent-5);
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 240ms ease, box-shadow 240ms ease;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}
.tc-post-card:hover {
transform: translateY(-5px);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
}
/* Featured image with zoom-on-hover */
.tc-post-card__image.wp-block-post-featured-image {
overflow: hidden;
margin: 0;
flex-shrink: 0;
}
.tc-post-card__image.wp-block-post-featured-image img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
transition: transform 400ms ease;
}
.tc-post-card:hover .tc-post-card__image img {
transform: scale(1.06);
}
/* Card body */
.tc-post-card__body {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
/* Category badge */
.tc-post-card__cat.wp-block-post-terms a {
display: inline-block;
background: color-mix(in srgb, var(--wp--preset--color--accent-1) 12%, transparent);
color: var(--wp--preset--color--accent-1);
border-radius: 100px;
font-size: 0.7rem;
font-weight: 700;
padding: 3px 10px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.06em;
transition: background 200ms;
}
.tc-post-card__cat.wp-block-post-terms a:hover {
background: color-mix(in srgb, var(--wp--preset--color--accent-1) 20%, transparent);
}
/* Title */
.tc-post-card .wp-block-post-title a {
color: inherit;
text-decoration: none;
transition: color 200ms;
}
.tc-post-card .wp-block-post-title a:hover {
color: var(--wp--preset--color--accent-1);
}
/* Excerpt — clamp to 3 lines */
.tc-post-card__excerpt.wp-block-post-excerpt p,
.tc-post-card__excerpt.wp-block-post-excerpt .wp-block-post-excerpt__excerpt {
font-size: 0.9rem;
opacity: 0.7;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Footer row: date + read-more */
.tc-post-card__footer.wp-block-group {
margin-top: auto;
padding-top: 14px;
border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}
.tc-post-card__footer .wp-block-post-date {
font-size: 0.8rem;
opacity: 0.5;
}
.tc-post-card__footer .tc-post-card__readmore.wp-block-read-more {
font-size: 0.82rem;
font-weight: 700;
color: var(--wp--preset--color--accent-1);
text-decoration: none;
letter-spacing: 0.01em;
}
/* Smaller variant used in "more posts" section */
.tc-post-card--sm {
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
/* ── Pagination ───────────────────────────────────────────────────────────── */
.wp-block-query-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 14px;
border-radius: 10px;
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
color: inherit;
border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
transition: background 200ms, color 200ms, border-color 200ms;
}
.wp-block-query-pagination .page-numbers.current,
.wp-block-query-pagination .page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
background: var(--wp--preset--color--accent-1);
color: #fff;
border-color: transparent;
}
/* ── Single post ──────────────────────────────────────────────────────────── */
/* Article header area */
.tc-single-header {
border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent);
}
.tc-single-cat.wp-block-post-terms a {
display: inline-block;
color: var(--wp--preset--color--accent-1);
text-decoration: none;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* Featured image — full bleed, fixed height */
.wp-block-post-featured-image.alignfull img {
width: 100%;
height: 480px;
object-fit: cover;
display: block;
}
/* Post content — nice prose rhythm (blog posts only, not generated pages) */
.single .wp-block-post-content {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.wp-block-post-content p {
font-size: 1.0625rem;
line-height: 1.8;
}
.wp-block-post-content h2 {
margin-top: 2.5em;
margin-bottom: 0.6em;
}
.wp-block-post-content h3 {
margin-top: 2em;
margin-bottom: 0.5em;
}
.wp-block-post-content img:not(.wp-block-cover__image-background) {
border-radius: 10px;
}
.wp-block-post-content blockquote {
border-left: 3px solid var(--wp--preset--color--accent-1);
margin-left: 0;
padding-left: 24px;
font-style: italic;
opacity: 0.85;
}
/* ── Post navigation ──────────────────────────────────────────────────────── */
.tc-post-nav .wp-block-group {
border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}
.tc-post-nav .wp-block-post-navigation-link a {
color: inherit;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
transition: color 200ms;
}
.tc-post-nav .wp-block-post-navigation-link a:hover {
color: var(--wp--preset--color--accent-1);
}
/* ── More posts ───────────────────────────────────────────────────────────── */
.tc-more-posts {
background: var(--wp--preset--color--accent-5);
border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent);
}
/* ── Comments ─────────────────────────────────────────────────────────────── */
.tc-comments-section {
border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent);
}
.tc-comment {
border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent);
}
.tc-comment:last-child {
border-bottom: none;
}
.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"],
.wp-block-post-comments-form input[type="url"],
.wp-block-post-comments-form textarea {
width: 100%;
padding: 10px 14px;
border-radius: 8px;
border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
background: transparent;
color: inherit;
font-size: 0.9375rem;
transition: border-color 200ms;
}
.wp-block-post-comments-form input:focus,
.wp-block-post-comments-form textarea:focus {
outline: 2px solid var(--wp--preset--color--accent-1);
outline-offset: 0;
border-color: var(--wp--preset--color--accent-1);
}
.wp-block-post-comments-form .submit {
background: var(--wp--preset--color--accent-1);
color: #fff;
border: none;
border-radius: 8px;
padding: 11px 28px;
font-weight: 700;
font-size: 0.9rem;
cursor: pointer;
transition: opacity 200ms;
}
.wp-block-post-comments-form .submit:hover {
opacity: 0.85;
}
/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
.tc-post-grid.wp-block-post-template {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.tc-post-grid.wp-block-post-template {
grid-template-columns: 1fr;
}
.wp-block-post-featured-image.alignfull img {
height: 260px;
}
}
@media (max-width: 480px) {
.tc-menu-grid { grid-template-columns: 1fr; }
}
/* ============================================================
FOOTER SOCIAL ICONS
Feather icons in a row. a[href=""] hidden via attr selector
so unfilled platforms simply disappear.
============================================================ */
.tc-footer-social {
display: flex;
gap: 0.75rem;
align-items: center;
margin-top: 1.25rem;
flex-wrap: wrap;
}
.tc-social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
background: rgba(255, 255, 255, .08);
color: inherit;
text-decoration: none;
transition: background 200ms ease, transform 200ms ease;
}
.tc-social-icon:hover {
background: var(--wp--preset--color--accent-1);
color: #fff;
transform: translateY(-2px);
}
.tc-social-icon svg { display: block; }
/* Hide icons whose URL was not provided (renderer sets href to "") */
a.tc-social-icon[href=""] { display: none !important; }
/* --- Testimonials Marquee -------------------------------------------------- */
.tc-marquee-outer {
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.tc-marquee-inner {
display: flex;
width: max-content;
gap: 20px;
animation: tc-marquee 44s linear infinite;
}
.tc-marquee-outer:hover .tc-marquee-inner {
animation-play-state: paused;
}
@keyframes tc-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.tc-testimonials-marquee .tc-marquee-card {
color: var(--wp--preset--color--contrast);
}
.tc-marquee-card {
flex-shrink: 0;
width: 320px;
background: var(--wp--preset--color--accent-5, rgba(255, 255, 255, .05));
border: 1px solid rgba(0, 0, 0, .07);
border-radius: 14px;
padding: 24px 28px;
}
.is-style-section-3 .tc-marquee-card,
.is-style-section-4 .tc-marquee-card,
.is-style-section-5 .tc-marquee-card {
border-color: rgba(255, 255, 255, .1);
}
.tc-marquee-quote {
font-size: .9375rem;
line-height: 1.75;
font-style: italic;
margin: 0 0 14px;
opacity: .85;
}
.tc-marquee-author {
font-size: .8125rem;
font-weight: 500;
margin: 0;
opacity: .6;
}
/* --- Split Features -------------------------------------------------------- */
.tc-split-feature-list {
display: flex;
flex-direction: column;
gap: 80px;
}
.tc-split-feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: center;
}
.tc-split-feature:nth-child(even) {
direction: rtl;
}
.tc-split-feature:nth-child(even) > * {
direction: ltr;
}
.tc-split-feature__img img {
width: 100%;
border-radius: 16px;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
}
.tc-split-eyebrow {
font-size: .75rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--wp--preset--color--accent-1);
margin: 0 0 12px;
}
.tc-split-heading {
font-size: clamp(1.375rem, 2.5vw, 1.875rem);
font-weight: 700;
line-height: 1.2;
margin: 0 0 16px;
}
.tc-split-body {
font-size: 1rem;
line-height: 1.8;
opacity: .75;
margin: 0 0 24px;
}
.tc-split-link {
font-size: .9375rem;
font-weight: 600;
color: var(--wp--preset--color--accent-1);
text-decoration: none;
}
.tc-split-link:hover { text-decoration: underline; }
a.tc-split-link[href=""] { display: none; }
@media (max-width: 768px) {
.tc-split-feature,
.tc-split-feature:nth-child(even) {
grid-template-columns: 1fr;
gap: 32px;
direction: ltr;
}
}
/* Ripple: slightly more vivid on accent-1 buttons */
.tc-ripple-wave {
background: rgba(255, 255, 255, .35);
}
.wp-block-button__link.tc-held,
.tc-ripple.tc-held {
box-shadow: 0 0 0 4px rgba(255, 255, 255, .22), 0 4px 20px rgba(0, 0, 0, .25);
}
/* ==========================================================================
Header
========================================================================== */
/* Prevent WP's 1.2rem block-gap from appearing above main content and footer.
Covers: inline main/footer (front-page.html), template-part footer (all other templates). */
:where(.wp-site-blocks) > main.wp-block-group,
:where(.wp-site-blocks) > footer.wp-block-group,
:where(.wp-site-blocks) > .wp-block-template-part {
margin-block-start: 0;
}
/* Themecut branded header */
.tc-header-bar {
background-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 5%, var(--wp--preset--color--base));
position: sticky;
top: 0;
z-index: 100;
}
/* 2px gradient accent stripe at the very top — immediate visual separation from TT25 */
header.wp-block-template-part:has(.tc-header-bar)::before {
content: '';
display: block;
height: 2px;
background: linear-gradient(90deg, var(--wp--preset--color--accent-1) 0%, var(--wp--preset--color--accent-2) 100%);
}
/* Primary-coloured logo text — instantly brands the header */
.tc-header-bar .wp-block-site-title a {
color: var(--wp--preset--color--accent-1);
}
/* Nav links: slide-in primary underline on hover + active page */
.tc-header-bar .wp-block-navigation-item .wp-block-navigation-item__content {
position: relative;
font-weight: 500;
}
/* --- nav.link_style knob — nav link typography, mirrors heading_style ------ */
.tc-nav-editorial .wp-block-navigation-item__content {
font-weight: 700 !important;
letter-spacing: -0.01em !important;
}
.tc-nav-heavy .wp-block-navigation-item__content {
font-weight: 600 !important;
}
.tc-nav-grounded .wp-block-navigation-item__content {
font-weight: 500 !important;
}
.tc-nav-uppercase .wp-block-navigation-item__content {
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
font-size: 0.8125rem !important;
}
.tc-header-bar .wp-block-navigation-item .wp-block-navigation-item__content::after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
right: 0;
height: 2px;
border-radius: 1px;
background: var(--wp--preset--color--accent-1);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.2s ease;
}
.tc-header-bar .wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.tc-header-bar .current-menu-item .wp-block-navigation-item__content::after {
transform: scaleX(1);
}
/* Navigation dropdown submenus — override WP default white background */
.wp-block-navigation .wp-block-navigation__submenu-container {
background-color: var(--wp--preset--color--base) !important;
border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
padding: 6px;
min-width: 180px;
}
/* Force submenu text to contrast color — overrides dark/transparent header white-text rules */
.wp-block-navigation .wp-block-navigation__submenu-container a,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
color: var(--wp--preset--color--contrast) !important;
border-radius: 6px;
padding: 8px 12px;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
background-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 10%, transparent);
color: var(--wp--preset--color--accent-1) !important;
}
/* Suppress top stripe on transparent header (it floats over hero images) — home page only, see the nav.variant: transparent block above */
body.home:has(header .tc-header-transparent) header.wp-block-template-part::before {
display: none;
}
/* CTA button in header — smaller than the default WP button, with left gap to
separate it visually from the nav links. */
.tc-header-bar .tc-header-cta .wp-block-button__link {
padding: 0.55em 1.25em;
font-size: 0.9375rem;
font-weight: 600;
margin-left: 1.25rem;
}
/* WP admin bar is 32px tall (46px on mobile ≤782px). Offset sticky/absolute headers so they
don't hide behind it. WordPress exposes .admin-bar on when the bar is visible. */
.admin-bar .tc-header-bar,
.admin-bar .tc-welcome-header {
top: 32px;
}
@media screen and (max-width: 782px) {
.admin-bar .tc-header-bar,
.admin-bar .tc-welcome-header {
top: 46px;
}
}
/* Dark section headers — readable border, white logo */
.tc-section.is-style-section-4 .tc-header-bar,
.tc-section.is-style-section-5 .tc-header-bar {
border-bottom-color: rgba(255, 255, 255, .1) !important;
}
/* --- nav.variant: floating — pill header with a gap from the top edge ------ */
.tc-header-bar.tc-header-floating {
background: transparent !important;
border-bottom: none !important;
/* position:sticky only pulls the header to `top` once scrolling would carry
it past that point — on first paint (no scroll yet) it sits wherever it
falls in normal flow, flush against the very top with no gap. margin-top
gives it that gap in its resting position too, not just while stuck. */
margin-top: 16px;
top: 16px;
padding-top: 0;
padding-bottom: 0;
}
.tc-floating-pill {
background-color: var(--wp--preset--color--base);
border-radius: 999px;
box-shadow: 0 8px 30px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .06);
border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
}
header.wp-block-template-part:has(.tc-header-floating)::before {
display: none;
}
.admin-bar .tc-header-bar.tc-header-floating {
top: 48px;
}
@media screen and (max-width: 782px) {
.admin-bar .tc-header-bar.tc-header-floating {
top: 62px;
}
}
/* --- nav.variant: grouped — nav links inside a segmented pill box ---------- */
.tc-nav-pillbox {
background-color: var(--wp--preset--color--accent-5);
border-radius: 999px;
padding: 6px 8px;
}
.tc-nav-pillbox .wp-block-navigation-item__content {
border-radius: 999px;
padding: 8px 16px;
transition: background-color 0.2s ease, color 0.2s ease;
}
.tc-nav-pillbox .wp-block-navigation-item__content::after {
display: none;
}
.tc-nav-pillbox .wp-block-navigation-item:hover .wp-block-navigation-item__content,
.tc-nav-pillbox .current-menu-item .wp-block-navigation-item__content {
background-color: var(--wp--preset--color--base);
color: var(--wp--preset--color--accent-1) !important;
}
/* --- nav.phone — optional click-to-call badge in the header ---------------- */
.tc-header-phone {
margin: 0;
font-size: 0.9375rem;
font-weight: 600;
white-space: nowrap;
}
.tc-header-phone a {
color: var(--wp--preset--color--contrast);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.tc-header-phone a:hover {
color: var(--wp--preset--color--accent-1);
}
.tc-header-phone svg {
width: 14px;
height: 14px;
}
/* ==========================================================================
Welcome / front-page template
========================================================================== */
/* Muted subtitle in hero */
.tc-hero-sub {
opacity: 0.7;
}
/* Stats row in hero */
.tc-welcome-stats {
gap: 0 56px;
}
.tc-welcome-stats .wp-block-group {
text-align: center;
}
/* Thin vertical divider between stats */
.tc-stat-divider {
width: 1px;
height: 44px;
background: rgba(255, 255, 255, .18);
align-self: center;
}
/* Step numbers — large ghost numbers in contrast color */
.tc-step-num {
color: var(--wp--preset--color--contrast);
font-family: var(--wp--preset--font-family--syne);
opacity: 0.18;
}
/* Eyebrow label — use primary button colour so it respects the active variation */
.tc-eyebrow {
color: var(--wp--preset--color--accent-1);
text-transform: uppercase;
}
/* On section-3 (brand-colour bg), an accent-1 eyebrow collapses into the
background — same fix pattern used throughout: switch to white-based. */
.tc-section.is-style-section-3 .tc-eyebrow,
.tc-section.is-style-section-4 .tc-eyebrow,
.tc-section.is-style-section-5 .tc-eyebrow {
color: rgba(255, 255, 255, .85);
}
/* CTA section inverse button (white bg, primary text) */
.tc-btn-cta-inverse .wp-block-button__link {
background-color: #ffffff !important;
color: var(--wp--preset--color--accent-3) !important;
border-color: #ffffff !important;
}
.tc-btn-cta-inverse .wp-block-button__link:hover {
background-color: rgba(255, 255, 255, .9) !important;
}
/* Welcome template: transparent header floats over dark hero */
.tc-welcome-header {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: transparent !important;
border-bottom-color: rgba(255, 255, 255, .1) !important;
}
/* Make all text/links white so they read against the dark hero */
.tc-welcome-header .wp-block-site-title a,
.tc-welcome-header .wp-block-navigation-item__content,
.tc-welcome-header .wp-block-navigation__submenu-icon {
color: #fff !important;
}
/* Cap logo height so it doesn't stretch the header */
.tc-welcome-header .wp-block-site-logo img,
.tc-header-bar .wp-block-site-logo img {
max-height: 36px;
width: auto;
}
/* "Generate Site →" button: frosted glass pill against dark hero */
.tc-welcome-nav-btn .wp-block-button__link {
background: rgba(255, 255, 255, .12) !important;
border: 1px solid rgba(255, 255, 255, .28) !important;
color: #fff !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.tc-welcome-nav-btn .wp-block-button__link:hover {
background: rgba(255, 255, 255, .22) !important;
}
/* Hero always fills the viewport so the section below never peeks in */
.tc-welcome-hero {
min-height: 100vh;
min-height: 100dvh; /* dynamic viewport height: correct on mobile with browser chrome */
box-sizing: border-box;
}
.admin-bar .tc-welcome-hero {
min-height: calc(100vh - 32px);
min-height: calc(100dvh - 32px);
}
@media screen and (max-width: 782px) {
.admin-bar .tc-welcome-hero {
min-height: calc(100dvh - 46px);
}
}
/* Abstract dark gradient hero — radial glows over near-black base */
.tc-welcome-hero.tc-section.is-style-section-4 {
background:
radial-gradient(ellipse 80% 100% at 10% 55%, rgba(88, 42, 170, 0.5) 0%, transparent 60%),
radial-gradient(ellipse 60% 80% at 90% 10%, rgba(20, 52, 130, 0.45) 0%, transparent 58%),
radial-gradient(ellipse 45% 55% at 65% 90%, rgba(130, 28, 72, 0.25) 0%, transparent 58%),
#06080f;
}
/* Gradient headline — white → orange → violet sweep */
.tc-gradient-headline {
background: linear-gradient(110deg, #ffffff 10%, #ff6b35 55%, #c084fc 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Pill badge above the hero headline */
.tc-hero-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 107, 53, 0.1);
border: 1px solid rgba(255, 107, 53, 0.28);
color: #ff8255;
padding: 6px 16px;
border-radius: 100px;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.02em;
margin-bottom: 28px;
}
@media (max-width: 600px) {
.tc-welcome-stats {
gap: 32px 0;
flex-direction: column;
}
.tc-stat-divider {
width: 44px;
height: 1px;
background: rgba(255, 255, 255, .18);
}
}
/* ============================================================
HERO ILLUSTRATED
Two-column hero with CSS blob/card composition — no image.
Decorative visual adapts to any palette via color tokens.
============================================================ */
/* Layout now handled by WP Columns block */
.tc-hero-illus-inner {
align-items: center;
}
.tc-hero-illus-text .tc-eyebrow {
display: inline-block;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--wp--preset--color--accent-1);
margin-bottom: 18px;
}
.tc-hero-illus-heading {
font-size: clamp(2.25rem, 5vw, 3.75rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0 0 20px;
}
.tc-hero-illus-sub {
font-size: 1.125rem;
line-height: 1.7;
color: var(--wp--preset--color--accent-4);
margin: 0 0 36px;
}
.tc-section.is-style-section-3 .tc-hero-illus-sub,
.tc-section.is-style-section-4 .tc-hero-illus-sub,
.tc-section.is-style-section-5 .tc-hero-illus-sub {
color: rgba(255, 255, 255, .7);
}
.tc-hero-illus-btns {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
}
.tc-hero-illus-btn-primary {
display: inline-flex;
align-items: center;
padding: 13px 28px;
background: var(--wp--preset--color--accent-1);
color: #fff !important;
border-radius: var(--wp--style--global--button-radius, 8px);
font-weight: 600;
text-decoration: none;
font-size: 0.9375rem;
transition: opacity 150ms ease, transform 150ms ease;
}
.tc-hero-illus-btn-primary:hover {
opacity: 0.85;
transform: translateY(-1px);
}
.tc-hero-illus-btn-ghost {
display: inline-flex;
align-items: center;
padding: 11px 28px;
border: 2px solid currentColor;
color: var(--wp--preset--color--contrast) !important;
border-radius: var(--wp--style--global--button-radius, 8px);
font-weight: 600;
text-decoration: none;
font-size: 0.9375rem;
opacity: 0.6;
transition: opacity 150ms ease;
}
.tc-hero-illus-btn-ghost:hover { opacity: 1; }
/* Illustrated composition — two bordered image frames in a stacked collage */
.tc-hero-illus-visual {
position: relative;
height: 460px;
flex-shrink: 0;
}
.tc-illus-frame {
position: absolute;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
}
.tc-illus-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Primary frame — dominant, anchored top-right */
.tc-illus-frame--1 {
width: 70%;
height: 78%;
top: 0;
right: 0;
border: 3px solid var(--wp--preset--color--accent-1);
}
/* Secondary frame — smaller, anchored bottom-left, overlaps primary but neither is hidden */
.tc-illus-frame--2 {
width: 56%;
height: 60%;
bottom: 0;
left: 0;
border: 3px solid var(--wp--preset--color--accent-2);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}
/* Decorative accent ring behind the frames */
.tc-illus-accent-ring {
position: absolute;
width: 44%;
height: 44%;
border: 1.5px dashed var(--wp--preset--color--accent-1);
border-radius: 50%;
bottom: 2%;
right: 2%;
opacity: 0.18;
pointer-events: none;
}
@media (max-width: 840px) {
.tc-hero-illus-visual { height: 240px; }
.tc-illus-frame--1 { width: 68%; height: 80%; }
.tc-illus-frame--2 { width: 54%; height: 62%; }
}
/* ============================================================
PAGE HERO INNER
Compact centred hero for subpages.
Eyebrow gets accent rule lines via ::before / ::after.
============================================================ */
.tc-page-hero-inner .tc-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--wp--preset--color--accent-1);
}
.tc-page-hero-inner .tc-eyebrow::before,
.tc-page-hero-inner .tc-eyebrow::after {
content: '';
display: inline-block;
width: 28px;
height: 2px;
background: var(--wp--preset--color--accent-1);
border-radius: 2px;
flex-shrink: 0;
}
.tc-page-hero-inner .wp-block-heading {
margin-bottom: 16px;
}
.tc-page-hero-sub {
max-width: 560px;
margin: 0 auto;
color: var(--wp--preset--color--accent-4);
}
.tc-section.is-style-section-3 .tc-page-hero-sub,
.tc-section.is-style-section-4 .tc-page-hero-sub,
.tc-section.is-style-section-5 .tc-page-hero-sub {
color: rgba(255, 255, 255, .7);
}
/* ============================================================
PAGE HERO SPLIT
Compact subpage hero — text left, image right.
============================================================ */
.tc-page-hero-split .tc-page-hero-sub {
margin: 0;
max-width: 480px;
}
/* ============================================================
PAGE HERO QUIET
Left-aligned, no eyebrow ornament — editorial/understated subpage hero.
============================================================ */
.tc-page-hero-quiet .tc-page-hero-sub {
margin: 0;
max-width: 520px;
}
/* ============================================================
ABOUT SPLIT BLOCKS
Text + layered color-block collage. Image-free — palette-driven.
============================================================ */
/* Layout now handled by WP Columns block */
.tc-about-split-blocks-inner {
align-items: center;
}
.tc-split-blocks-text .tc-eyebrow {
display: inline-block;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--wp--preset--color--accent-1);
margin-bottom: 16px;
}
.tc-split-blocks-heading {
font-size: clamp(1.75rem, 3.5vw, 2.75rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
margin: 0 0 16px;
}
.tc-split-blocks-sub {
font-size: 1.125rem;
font-weight: 500;
line-height: 1.5;
margin: 0 0 14px;
}
.tc-split-blocks-body {
font-size: 1rem;
line-height: 1.75;
color: var(--wp--preset--color--accent-4);
margin: 0 0 32px;
}
.tc-section.is-style-section-3 .tc-split-blocks-body,
.tc-section.is-style-section-4 .tc-split-blocks-body,
.tc-section.is-style-section-5 .tc-split-blocks-body {
color: rgba(255, 255, 255, .7);
}
.tc-split-blocks-cta {
display: inline-flex;
align-items: center;
padding: 12px 26px;
background: var(--wp--preset--color--accent-1);
color: #fff !important;
border-radius: var(--wp--style--global--button-radius, 8px);
font-weight: 600;
text-decoration: none;
font-size: 0.9375rem;
transition: opacity 150ms ease;
}
.tc-split-blocks-cta:hover { opacity: 0.85; }
/* Visual collage */
.tc-split-blocks-visual {
position: relative;
height: 400px;
}
.tc-vis-block {
position: absolute;
border-radius: 16px;
background-size: cover;
background-position: center;
overflow: hidden;
}
/* Color tint overlay — renders over any background image; acts as block fill when no image */
.tc-vis-block::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.tc-vis-block--1 {
width: 70%;
height: 72%;
top: 0;
right: 0;
}
.tc-vis-block--1::before {
background: var(--wp--preset--color--accent-1);
opacity: 0;
}
.tc-vis-block--2 {
width: 62%;
height: 66%;
border: 1px solid rgba(128, 128, 128, 0.15);
top: 10%;
right: 8%;
display: flex;
align-items: flex-end;
padding: 20px 22px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.tc-vis-block--2::before {
background: var(--wp--preset--color--accent-5);
opacity: 0;
}
.tc-vis-block--3 {
width: 52%;
height: 55%;
bottom: 0;
left: 0;
border-radius: 12px;
}
.tc-vis-block--3::before {
background: var(--wp--preset--color--accent-2);
opacity: 0;
}
.tc-vis-quote {
position: relative;
z-index: 2;
font-size: 0.9375rem;
font-style: italic;
line-height: 1.55;
color: var(--wp--preset--color--contrast);
background: var(--wp--preset--color--accent-5);
opacity: 0.8;
padding: 4px;
border-radius: 4px;
}
/* blocks-right knob: flip visual to left, text to right */
.tc-blocks-right .tc-split-blocks-text { order: 2; }
.tc-blocks-right .tc-split-blocks-visual { order: 1; }
@media (max-width: 840px) {
.tc-about-split-blocks-inner {
gap: 40px;
}
.tc-split-blocks-visual { height: 280px; }
.tc-blocks-right .tc-split-blocks-text { order: 1; }
.tc-blocks-right .tc-split-blocks-visual { order: 2; }
}
/* ============================================================
GALLERY MOSAIC
CSS grid with nth-child row-spanning for asymmetric mosaic.
============================================================ */
.tc-gallery-mosaic-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 240px;
gap: 12px;
}
.tc-gallery-mosaic-item {
position: relative;
overflow: hidden;
border-radius: 12px;
}
/* Every 4th item (1st, 5th, 9th…) spans 2 rows */
.tc-gallery-mosaic-item:nth-child(4n+1) { grid-row: span 2; }
/* WP Image block wraps ![]()
in — stretch it to fill the grid cell */
.tc-gallery-mosaic-item .wp-block-image {
height: 100%;
margin: 0;
}
.tc-gallery-mosaic-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 500ms ease;
}
.tc-gallery-mosaic-item:hover img { transform: scale(1.05); }
.tc-gallery-mosaic-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 16px 18px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
color: #fff;
font-size: 0.875rem;
font-weight: 500;
opacity: 0;
transform: translateY(6px);
transition: opacity 250ms ease, transform 250ms ease;
}
.tc-gallery-mosaic-item:hover .tc-gallery-mosaic-caption {
opacity: 1;
transform: translateY(0);
}
/* Hide empty captions so the gradient doesn't show on uncaptioned items */
.tc-gallery-mosaic-caption:empty { display: none; }
@media (max-width: 768px) {
.tc-gallery-mosaic-grid {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 180px;
}
}
@media (max-width: 480px) {
.tc-gallery-mosaic-grid {
grid-template-columns: 1fr;
grid-auto-rows: 220px;
}
.tc-gallery-mosaic-item:nth-child(4n+1) { grid-row: span 1; }
}
/* ============================================================
FEATURES ICON ROW
Horizontal icon + text list. No card box — clean editorial rows.
============================================================ */
.tc-icon-row-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 32px 48px;
}
.tc-icon-row-item {
display: flex;
gap: 18px;
align-items: flex-start;
}
.tc-icon-row-icon {
flex-shrink: 0;
width: 52px;
height: 52px;
border-radius: 14px;
background: var(--wp--preset--color--accent-1);
display: flex;
align-items: center;
justify-content: center;
}
.tc-icon-row-icon svg {
width: 22px;
height: 22px;
stroke: #fff;
fill: none;
}
.tc-icon-row-heading {
font-size: 1.0625rem;
font-weight: 700;
margin: 4px 0 6px;
line-height: 1.3;
}
.tc-icon-row-body {
font-size: 0.9375rem;
line-height: 1.65;
opacity: 0.72;
margin: 0;
}
/* ============================================================
BENTO GRID
Mixed-size card grid. First card spans 2 cols in accent colour.
Ideal: 5 items (2-card first row, 3-card second row).
============================================================ */
.tc-bento-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.tc-bento-grid-section .tc-bento-card {
color: var(--wp--preset--color--contrast);
}
.tc-bento-card {
background: var(--wp--preset--color--accent-5);
border-radius: 20px;
padding: 36px 32px;
transition: transform 0.2s ease;
}
.tc-bento-card:hover { transform: translateY(-3px); }
.tc-bento-card:nth-child(1) {
grid-column: span 2;
/* !important: this cell's identity as a solid, vivid accent block is
structural, not decorative — a section-level custom css (same
specificity, but loaded later as an appended inline