style.css

/*
Theme Name: Uncoder
Theme URI: https://uncoderbuilder.com/
Author: Uncoder
Author URI: https://uncoderbuilder.com/
Description: The free companion theme for the Uncoder visual website builder. A clean, fast canvas that gets out of the way: pages built with Uncoder get the full width, Theme Builder headers, footers and layouts replace the theme's own, and posts and pages written in the block editor get readable typography that follows your Uncoder Design System colors and fonts. It also works without the plugin.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Update URI: https://github.com/UncoderBuilder/uncoder-theme
Text Domain: uncoder-theme
Domain Path: /languages
Tags: one-column, custom-logo, custom-menu, editor-style, featured-images, threaded-comments, translation-ready, wide-blocks, block-styles, blog

Uncoder WordPress theme, (C) 2026 Uncoder.
Distributed under the terms of the GNU GPL v2 or later.

This file is the readable source. The front end loads assets/css/theme.min.css,
built from it by tools/build.py (this file is loaded instead when SCRIPT_DEBUG is on).
*/

/* Tokens: the Uncoder Design System variables when the builder is active, fallbacks otherwise. */
body {
	--ut-bg: #fff;
	--ut-text: var(--uncoder-c-text, #374151);
	--ut-heading: var(--uncoder-c-heading, #0f172a);
	--ut-muted: var(--uncoder-c-muted, #6b7280);
	--ut-primary: var(--uncoder-c-primary, #2b59ff);
	--ut-surface: var(--uncoder-c-surface, #f5f7fb);
	--ut-border: var(--uncoder-c-border, #e5e7eb);
	--ut-font: var(--uncoder-f-body, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
	--ut-font-heading: var(--uncoder-f-heading, var(--ut-font));
	--ut-content: var(--wp--style--global--content-size, 720px);
	--ut-wide: var(--wp--style--global--wide-size, 1200px);
	--ut-gutter: var(--uncoder-gutter, clamp(16px, 4vw, 24px));
	--ut-fluid: calc(100% - 2 * var(--ut-gutter));
	--ut-line: 1px solid var(--ut-border);
	--ut-radius: 12px;
	display: flex;
	flex-direction: column;
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	margin: 0;
	color: var(--ut-text);
	background: var(--ut-bg);
	font: 1.0625rem/1.65 var(--ut-font);
	overflow-wrap: break-word;
}

/* Reset: zero specificity, so builder content always wins. */
*, ::before, ::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
:where(img, video) { max-width: 100%; height: auto; }
:where(iframe) { max-width: 100%; }
:where(a) { color: var(--ut-primary); text-underline-offset: .15em; }
:where(h1, h2, h3, h4, h5, h6) { color: var(--ut-heading); font-family: var(--ut-font-heading); font-weight: 700; line-height: 1.2; }
:where(h1) { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); }
:where(h2) { font-size: clamp(1.6rem, 1.35rem + 1vw, 2rem); }
:where(h3) { font-size: 1.4rem; }
:where(h4) { font-size: 1.2rem; }
:where(h5, h6) { font-size: 1rem; }
:where(code, kbd, pre, samp) { font-family: ui-monospace, Consolas, monospace; }
:where(pre) { overflow: auto; padding: 1em 1.25em; background: var(--ut-surface); border-radius: var(--ut-radius); }
:where(hr) { border: 0; border-top: var(--ut-line); }
:where(table) { border-collapse: collapse; }
:where(input, button, textarea, select) { font: inherit; }
:where(input:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=reset], [type=range], [type=color]), textarea, select) {
	max-width: 100%;
	padding: .65em .85em;
	color: var(--ut-text);
	background: var(--ut-bg);
	border: var(--ut-line);
	border-radius: 8px;
}
:where(input, textarea, select):focus-visible { outline: 2px solid var(--ut-primary); outline-offset: 1px; }
:where(figcaption), .wp-caption-text, .gallery-caption { color: var(--ut-muted); font-size: .875rem; }
/* Classic [gallery] shortcode: a grid of N columns (gallery-columns-N), two on phones. */
.gallery { display: grid; grid-template-columns: repeat(var(--ut-gallery-cols, 3), minmax(0, 1fr)); gap: 1rem; margin-block: 1.5em; }
.gallery-columns-1 { --ut-gallery-cols: 1; } .gallery-columns-2 { --ut-gallery-cols: 2; } .gallery-columns-4 { --ut-gallery-cols: 4; } .gallery-columns-5 { --ut-gallery-cols: 5; }
.gallery-columns-6 { --ut-gallery-cols: 6; } .gallery-columns-7 { --ut-gallery-cols: 7; } .gallery-columns-8 { --ut-gallery-cols: 8; } .gallery-columns-9 { --ut-gallery-cols: 9; }
.gallery-item { margin: 0; }
.gallery-item img { display: block; width: 100%; height: auto; border-radius: 8px; }
@media (max-width: 600px) { .gallery:not(.gallery-columns-1) { --ut-gallery-cols: 2; } }

/* Buttons. With Uncoder active, .uncoder-btn takes the Design System button style instead. */
:where(.ut-btn, .post-password-form [type=submit]) {
	display: inline-flex;
	align-items: center;
	padding: .8em 1.5em;
	color: #fff;
	background-color: var(--ut-primary);
	border: 0;
	border-radius: 8px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}
:where(.ut-btn, .post-password-form [type=submit]):hover { color: #fff; background-color: color-mix(in srgb, var(--ut-primary) 86%, #000); }

/* WordPress classes. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}
.screen-reader-text:focus { top: .5rem; left: .5rem; z-index: 100000; width: auto; height: auto; padding: .75em 1.25em; color: var(--ut-heading); background: var(--ut-bg); clip-path: none; outline: 2px solid var(--ut-primary); }
.skip-link:focus { position: fixed !important; }
.alignleft { float: left; margin: .35em 1.5em 1em 0; }
.alignright { float: right; margin: .35em 0 1em 1.5em; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.sticky.ut-card { border-color: var(--ut-primary); }
.bypostauthor > .comment-body .fn { color: var(--ut-primary); }

/* Layout. The body is a flex column so the footer stays at the bottom of short pages. */
.ut-wide, .ut-narrow, .post-navigation { width: min(var(--ut-fluid), var(--ut-wide)); margin-inline: auto; }
.ut-narrow, .post-navigation { width: min(var(--ut-fluid), var(--ut-content)); }
#content { flex-grow: 1; }
.site-main { display: block; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.site-main--builder { padding-block: 0; }
.site-main--builder > :not(article) { margin-block: 3rem; }

/* Header. */
.site-header { position: relative; z-index: 20; background: var(--ut-bg); border-bottom: var(--ut-line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; min-height: 4.5rem; padding-block: .75rem; }
/* Component headings: (0,2,0) beats the Design System's "apply to the whole site" heading styles. */
.site-header .site-title { margin: 0; font: 700 1.25rem/1.2 var(--ut-font-heading); letter-spacing: normal; }
.site-title a { color: var(--ut-heading); text-decoration: none; }
.custom-logo { display: block; width: auto; max-height: 3rem; }
.ut-menu, .ut-menu ul { margin: 0; padding: 0; list-style: none; }
.site-nav .ut-menu a { display: block; padding: .5rem 0; color: var(--ut-heading); font-weight: 500; text-decoration: none; }
.site-nav :is(a:hover, .current-menu-item > a) { color: var(--ut-primary); }
.ut-nav-toggle, .ut-nav-close { display: none; align-items: center; gap: .5rem; padding: .5rem 1rem; color: var(--ut-heading); background: none; border: var(--ut-line); border-radius: 99px; font-weight: 600; cursor: pointer; }

@media (min-width: 861px) {
	.ut-nav-panel { display: block; position: static; width: auto; height: auto; margin: 0; padding: 0; overflow: visible; color: inherit; background: none; border: 0; }
	.site-nav .ut-menu { display: flex; flex-wrap: wrap; column-gap: 1.75rem; }
	.site-nav li { position: relative; }
	.site-nav .sub-menu { position: absolute; top: 100%; inset-inline-start: -1rem; z-index: 30; min-width: 14rem; padding: .5rem 0; background: var(--ut-bg); border: var(--ut-line); border-radius: var(--ut-radius); box-shadow: 0 16px 40px -16px #0f172a40; opacity: 0; visibility: hidden; }
	.site-nav li:is(:hover, :focus-within) > .sub-menu { opacity: 1; visibility: visible; }
	.site-nav .sub-menu a { padding-inline: 1rem; }
}

/* Mobile menu: a popover panel, no JavaScript. */
@media (max-width: 860px) {
	.ut-nav-toggle { display: inline-flex; }
	.ut-nav-panel:not(:popover-open) { display: none; }
	.ut-nav-panel:popover-open { inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 4.5rem var(--ut-gutter) 2rem; color: var(--ut-text); background: var(--ut-bg); border: 0; }
	.ut-nav-close { display: inline-flex; position: absolute; top: 1rem; inset-inline-end: var(--ut-gutter); padding: .5rem; }
	.site-nav .ut-menu a { padding-block: .8rem; font-size: 1.125rem; border-bottom: var(--ut-line); }
	.site-nav .sub-menu { padding-inline-start: 1rem; }
	body:has(.ut-nav-panel:popover-open) { overflow: hidden; }
}
@supports not selector(:popover-open) {
	.ut-nav-toggle { display: none !important; }
}

/* Footer. */
.site-footer { padding-block: 2.5rem; color: var(--ut-muted); background: var(--ut-surface); font-size: .9375rem; }
.site-footer__inner, .footer-nav .ut-menu { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; }
.site-footer__copy { margin: 0; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--ut-heading); }

/* Titles and meta. */
.page-header { margin-bottom: clamp(2rem, 4vw, 3rem); }
.page-title, .entry-title { margin: 0; }
.archive-description { margin-top: .75rem; color: var(--ut-muted); }
.entry-header { margin-bottom: 2rem; }
.entry-header--builder { margin-bottom: 0; padding-block: clamp(2rem, 5vw, 3.5rem) 1.5rem; }
.entry-meta, .ut-card__meta, .entry-footer { display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--ut-muted); font-size: .9375rem; }
.entry-meta { margin-top: 1rem; }
:is(.entry-meta, .ut-card__meta, .entry-footer) a { color: inherit; }
.post-thumbnail { margin: 0 auto 2.5rem; }
.post-thumbnail img { display: block; width: 100%; border-radius: var(--ut-radius); }

/* Post and page content (not built with Uncoder). */
.entry-content::after { display: table; clear: both; content: ""; }
.entry-content > * { max-width: min(var(--ut-fluid), var(--ut-content)); margin-block: 0; margin-inline: auto; }
.entry-content > * + * { margin-top: 1.25em; }
.entry-content > :is(h2, h3, h4, h5, h6) { margin-top: 1.75em; }
.entry-content > :is(h1, h2, h3, h4, h5, h6) + * { margin-top: .6em; }
.entry-content > .alignwide { max-width: min(var(--ut-fluid), var(--ut-wide)); }
.entry-content > .alignfull { max-width: none; }
.entry-content > .alignleft { margin-inline: max(var(--ut-gutter), 50% - var(--ut-content) / 2) 1.5em; }
.entry-content > .alignright { margin-inline: 1.5em max(var(--ut-gutter), 50% - var(--ut-content) / 2); }
.entry-content :is(ul, ol) { padding-inline-start: 1.4em; }
.entry-content blockquote { padding-inline-start: 1.25em; border-inline-start: 3px solid var(--ut-primary); }
.entry-footer { margin-top: 2.5rem; padding-top: 1.25rem; border-top: var(--ut-line); }

/* Post cards. */
.ut-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.ut-card { display: flex; flex-direction: column; overflow: hidden; border: var(--ut-line); border-radius: var(--ut-radius); }
.ut-card__thumb img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ut-card__body { display: flex; flex: 1; flex-direction: column; gap: .6rem; padding: 1.5rem; }
.ut-card .ut-card__title { margin: 0; font-size: 1.25rem; line-height: 1.3; letter-spacing: normal; }
.ut-card__title a { color: inherit; text-decoration: none; }
.ut-card__title a:hover { text-decoration: underline; }
.ut-card__excerpt p { margin: 0; }

/* Navigation between pages and posts. */
.pagination { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; height: 2.75rem; padding: 0 1rem; color: var(--ut-heading); border: var(--ut-line); border-radius: 99px; text-decoration: none; }
.page-numbers.current { color: var(--ut-bg); background: var(--ut-heading); }
.page-numbers.dots { border-color: transparent; }
.post-navigation .nav-links { justify-content: space-between; }
.post-navigation a { display: block; padding: 1rem 1.25rem; border: var(--ut-line); border-radius: var(--ut-radius); text-decoration: none; }
.post-navigation .nav-next { margin-inline-start: auto; text-align: end; }
.meta-nav { display: block; color: var(--ut-muted); font-size: .875rem; }

/* Comments. */
.comments-area { margin-top: 3.5rem; padding-top: 2.5rem; border-top: var(--ut-line); }
.comments-area :is(.comments-title, .comment-reply-title) { margin: 0 0 1.5rem; font-size: 1.5rem; }
.comment-list, .comment-list .children { margin: 0; padding: 0; list-style: none; }
.comment-list .children { padding-inline-start: 1.5rem; }
.comment-body { padding-block: 1.25rem; border-bottom: var(--ut-line); }
.comment-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; font-size: .9375rem; }
.comment-author .avatar { margin-inline-end: .5rem; vertical-align: middle; border-radius: 50%; }
.comment-author .says { display: none; }
.comment-metadata a, :is(.comment-notes, .logged-in-as, .no-comments) { color: var(--ut-muted); }
.reply { font-size: .875rem; font-weight: 600; }
.comment-form label { display: block; font-weight: 600; }
.comment-form :is(input:not([type=checkbox], [type=submit]), textarea) { width: 100%; }
.comment-form-cookies-consent label { display: inline; font-weight: 400; }

/* Search and 404. */
.search-form { display: flex; gap: .5rem; max-width: 32rem; margin-block: 1.5rem; }
.search-field { flex: 1; min-width: 0; }
.error-404 { text-align: center; }
.error-404__code { margin: 0; color: var(--ut-primary); font: 800 clamp(4rem, 12vw, 7rem)/1 var(--ut-font-heading); }
.error-404 .search-form { margin-inline: auto; }