/*
Theme Name: UXAR Studio
Theme URI: https://uxar.studio
Author: UXAR LLC
Description: Minimal block theme for uxar.studio. Same typographic system as cassinelli.com.ar (Instrument Sans + Inter, sharp 2px radii, flat by default), inverted color scheme — graphite-dominant instead of light-dominant. See UXAR-DESIGN.md.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: uxar-studio
*/
/* Fonts load via a separately enqueued (functions.php), not an
@import here — @import is render-blocking in a way a same-priority
discovered from the HTML isn't: the browser can't even
see this request until style.css itself has already downloaded, turning
what should be a parallel fetch into a serial chain. See functions.php
for the fix and why it also needed a matching editor-only enqueue. */
/* Global box-sizing reset. Without this, any element that gets padding
added later (a mobile media query override, for example) can silently
grow past its declared width instead of the padding being absorbed —
exactly what happened with .faq-section (padding-left/right: 16px each
pushed it to 100% + 32px). Root-cause fix, not a patch on that one rule. */
*,
*::before,
*::after {
box-sizing: border-box;
}
.wp-block-button__link,
.wp-block-navigation-item__content {
border-radius: var(--wp--custom--rounded--sharp);
}
/* --- Mobile nav overlay ---
core/navigation renders one shared
for both the compact inline
desktop nav and the full-screen mobile dialog — the SAME markup, with
WP's own CSS just toggling which presentation is visible at which width.
.wp-block-navigation__responsive-dialog exists in the DOM at every
width, so scoping to that class alone isn't enough to keep this out of
desktop (confirmed: it leaked there first, full-width rows and all —
and inside the still-narrow, compact-nav-sized desktop container,
"Our Services" wrapped to two lines while the shorter labels didn't,
which is what made the rows uneven height). Gating on the theme's own
mobile breakpoint fixes both at once: at mobile widths the row is the
full viewport, wide enough that none of these short labels wrap. */
.wp-block-navigation-item__icon {
display: none;
}
@media (max-width: 782px) {
.wp-block-navigation__responsive-container-content {
display: block;
padding: 8px 0 0;
}
.wp-block-navigation__responsive-dialog .wp-block-navigation__container {
display: block;
width: 100%;
}
.wp-block-navigation__responsive-dialog .wp-block-navigation-item {
display: block;
width: 100%;
border-top: 1px solid var(--wp--preset--color--border);
}
.wp-block-navigation__responsive-dialog .wp-block-navigation-item:last-child {
border-bottom: 1px solid var(--wp--preset--color--border);
}
.wp-block-navigation__responsive-dialog .wp-block-navigation-item__content {
display: flex !important;
align-items: center;
justify-content: flex-start !important;
gap: 14px;
width: 100%;
min-height: 44px;
padding: 12px 16px !important;
font-size: 18px !important;
white-space: nowrap;
box-sizing: border-box;
}
.wp-block-navigation__responsive-dialog .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-dialog .wp-block-navigation-item__content:focus-visible {
background: var(--wp--preset--color--surface);
}
.wp-block-navigation__responsive-dialog .wp-block-navigation-item__icon {
display: inline-flex;
/* Hidden until functions.php's async tabler-icons load flags
— otherwise a menu opened
before that finishes renders each in whatever glyph the
fallback font maps those private-use codepoints to: not blank,
not a matching placeholder, just an arbitrary, inconsistently-
sized character per icon. Reserving the space (visibility, not
display) keeps the row layout identical either way. */
visibility: hidden;
flex: none;
font-size: 20px;
color: var(--wp--preset--color--text-secondary);
}
.tabler-icons-ready .wp-block-navigation__responsive-dialog .wp-block-navigation-item__icon {
visibility: visible;
}
}
/* Sticky header — needs its own opaque background since a sticky element
sits above whatever scrolls underneath it (page bg isn't automatically
painted behind it), and a z-index above every other positioned element
on the site: Our Services' scroll sections use position:sticky/absolute
internally for the scroll-jacking effect (.svc-sticky, .svc-index, the
slider's prev/next buttons), and without this the header would scroll
under them instead of staying on top.
wp:template-part auto-wraps the header in its own box, sized to fit only its one child —
exactly as tall as .site-header itself. A sticky element's "stuck" range
is bounded by its immediate parent's box, so a same-height parent leaves
zero room to actually stick (confirmed: without this, scrollY and the
header's offset moved 1:1, i.e. it never stuck at all). display:contents
removes that wrapper from the box model so .site-header's effective
parent becomes wp-site-blocks — the full page — instead. Scoped to the
header's own tag (not `footer.wp-block-template-part`, which wraps the
footer via the same class). */
header.wp-block-template-part {
display: contents;
}
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--wp--preset--color--page);
}
.wp-block-button__link {
text-transform: uppercase;
}
.wp-block-group.is-style-panel {
border-radius: var(--wp--custom--rounded--panel);
}
.wp-block-image img,
.wp-block-cover {
border-radius: var(--wp--custom--rounded--media);
}
.wp-block-site-logo img {
width: 88px;
height: auto;
}
.hero-particles-host {
position: relative;
box-sizing: border-box;
}
.hero-particles-host canvas {
pointer-events: none;
}
.eyebrow {
font-size: 11px;
font-weight: 500;
letter-spacing: 1.3px;
text-transform: uppercase;
margin-bottom: 16px;
}
.service-row {
display: flex;
flex-direction: column;
gap: 4px;
}
.service-name {
font-size: 15px;
font-weight: 500;
color: var(--wp--preset--color--ink);
margin: 0;
}
.service-desc {
font-size: 14px;
margin: 0;
}
.cta-link-text a {
color: var(--wp--preset--color--signal-blue-soft);
font-size: 11px;
font-weight: 500;
letter-spacing: 1.3px;
text-transform: uppercase;
text-decoration: none;
}
.cta-link-text a:hover {
color: var(--wp--preset--color--ink);
}
.wp-block-button.is-style-cta-link .wp-block-button__link {
background: transparent;
color: var(--wp--preset--color--signal-blue-soft);
padding: 12px 0;
font-size: 11px;
font-weight: 500;
letter-spacing: 1.3px;
text-transform: uppercase;
}
.wp-block-button.is-style-cta-link .wp-block-button__link:hover {
background: transparent;
color: var(--wp--preset--color--ink);
}
/* --- Our Services page: page-our-services.html uses `flow` (not
`constrained`) on main/post-content, so the page-title and intro
paragraph need their own reading-width constraint — everything else
(the scroll sections, the FAQ) wants full-bleed instead. --- */
.svc-page-title,
.our-services-intro {
max-width: 740px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.our-services-intro {
margin-bottom: var(--wp--preset--spacing--section-md);
}
/* --- Our Services: "Also available" — sits between the last full-bleed
scroll section and the FAQ, bounded to the same reading canvas as the
heading (760px) rather than breaking full-bleed. Prev/next buttons page
by a full container width; the dot row below is the paginator; CSS
scroll-snap just makes each jump land cleanly instead of stopping
mid-card — touch/trackpad drag still works as a bonus. Icons are the
Tabler webfont (enqueued in functions.php, this page only), matching
what was already shown as a reference. --- */
.svc-more-services {
max-width: 760px;
margin-left: auto;
margin-right: auto;
padding-top: var(--wp--preset--spacing--section-md);
box-sizing: border-box;
}
.svc-more-slider {
position: relative;
max-width: 760px;
margin-left: auto;
margin-right: auto;
padding: 24px 0 8px;
box-sizing: border-box;
}
.svc-more-track {
width: 100%;
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
box-sizing: border-box;
}
.svc-more-track::-webkit-scrollbar {
display: none;
}
.svc-more-card {
flex: 0 0 240px;
scroll-snap-align: start;
border: 1px solid var(--wp--preset--color--border);
border-radius: var(--wp--custom--rounded--sharp);
padding: 20px;
box-sizing: border-box;
}
.svc-more-icon {
display: block;
/* Same fallback-glyph race as the mobile nav icons (see style.css's
nav section) — reserve the space, don't show a wrong glyph while
waiting on the async tabler-icons load. */
visibility: hidden;
font-size: 22px;
line-height: 1;
color: var(--wp--preset--color--text-secondary);
margin-bottom: 14px;
}
.tabler-icons-ready .svc-more-icon {
visibility: visible;
}
.svc-more-card .service-name {
margin: 0 0 8px;
}
.svc-more-card .service-desc {
margin: 0 0 12px;
}
.svc-more-duration {
font-size: 11px;
font-weight: 500;
letter-spacing: 1.3px;
text-transform: uppercase;
color: var(--wp--preset--color--text-tertiary);
margin: 0;
}
.svc-more-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: var(--wp--preset--color--ink);
color: var(--wp--preset--color--page);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
padding: 0;
}
.svc-more-nav svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.svc-more-nav:hover {
background: var(--wp--preset--color--signal-blue-soft);
color: var(--wp--preset--color--page);
}
.svc-more-nav:disabled {
opacity: 0.3;
cursor: default;
pointer-events: none;
}
.svc-more-prev {
left: -20px;
}
.svc-more-next {
right: -20px;
}
.svc-more-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 8px;
}
.svc-more-dot {
width: 8px;
height: 8px;
padding: 0;
border: none;
border-radius: 50%;
background: var(--wp--preset--color--border);
cursor: pointer;
}
.svc-more-dot.is-active {
background: var(--wp--preset--color--signal-blue-soft);
}
.svc-more-cta {
max-width: 760px;
margin-left: auto;
margin-right: auto;
padding: var(--wp--preset--spacing--lg) 0 var(--wp--preset--spacing--section-md);
box-sizing: border-box;
}
/* --- Our Story: page-our-story.html also uses `flow`, so the title and
body need their own width. Title and the two-column body share the same
980px measure for a common left/right edge. --- */
.story-page-title {
max-width: 980px;
margin-left: auto;
margin-right: auto;
font-size: clamp(44px, 6vw, 72px);
line-height: 1.03;
letter-spacing: -1.5px;
margin-bottom: var(--wp--preset--spacing--section-md);
}
.story-columns {
max-width: 980px;
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: repeat(2, minmax(0, 450px));
justify-content: center;
gap: 80px;
}
.story-columns > .wp-block-group > p {
margin: 0 0 20px;
}
.story-columns > .wp-block-group > p:last-child {
margin-bottom: 0;
}
.story-below {
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
/* Tool row: AI-native tooling badges inside Approach */
.story-tools {
display: flex;
gap: 12px;
margin-top: 28px;
flex-wrap: wrap;
}
.story-tool {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: 72px;
}
/* Real product icons (Claude, Cursor, Codex, Grok) — each ships its own
shape and color already, so no extra badge box around it, just size and
a touch of rounding to catch any icon whose corners aren't pre-rounded. */
.story-tool-icon {
width: 44px;
height: 44px;
border-radius: 10px;
display: block;
}
.story-tool-label {
font-size: 11px;
letter-spacing: 0.2px;
color: var(--wp--preset--color--text-tertiary);
text-align: center;
line-height: 1.3;
}
/* --- Our Services: scroll-driven service sections --- */
/* full-bleed via width:100% — page-our-services.html's uses `flow`
with no lateral padding of its own, so 100% already reaches the real
viewport edge. (100vw was the fix on Home, where the parent still had a
`constrained` layout imposing max-width — not the case here. 100vw also
has a known bug: it can include the scrollbar's width, leaving a gap on
one side — width:100% doesn't have that problem and is simpler whenever
the parent has no constraint to escape from.) */
.svc-scroll,
.faq-section {
width: 100%;
}
.svc-scroll {
position: relative;
height: 300vh;
}
.svc-sticky {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.svc-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
.svc-fade {
position: absolute;
inset: 0;
background: var(--wp--preset--color--page);
opacity: 0;
pointer-events: none;
}
.svc-title-wrap {
position: relative;
z-index: 2;
text-align: center;
padding: 0 24px;
}
.svc-title,
.svc-title-solid {
font-size: clamp(48px, 11vw, 160px);
font-weight: 500;
letter-spacing: -2px;
line-height: 0.98;
margin: 0;
text-wrap: balance;
background-size: cover;
background-position: center;
}
.svc-title {
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.svc-title-solid {
position: absolute;
inset: 0;
color: var(--wp--preset--color--ink);
opacity: 0;
}
.svc-index {
position: absolute;
/* .svc-sticky is itself position:sticky/top:0, same as the header — with
the header now sticky too (and stacked above, z-index:100), its ~62px
would otherwise cover this. */
top: calc(40px + 62px);
left: 40px;
z-index: 2;
font-size: 13px;
color: var(--wp--preset--color--text-secondary);
letter-spacing: 1px;
font-variant-numeric: tabular-nums;
}
.svc-scroll-hint {
position: fixed;
bottom: 36px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 500;
letter-spacing: 1.3px;
text-transform: uppercase;
color: var(--wp--preset--color--text-tertiary);
transition: opacity 0.3s ease;
}
.svc-scroll-hint::after {
content: "";
width: 1px;
height: 22px;
background: var(--wp--preset--color--text-tertiary);
animation: svc-hint-drop 1.6s ease-in-out infinite;
}
@keyframes svc-hint-drop {
0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
40% { transform: scaleY(1); transform-origin: top; opacity: 1; }
60% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.svc-scroll-hint::after { animation: none; }
}
.svc-desc {
position: absolute;
left: 0;
right: 0;
bottom: 10%;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 24px;
opacity: 0;
transform: translateY(24px);
}
.svc-desc .svc-lead {
max-width: 520px;
text-align: center;
font-size: 21px;
line-height: 1.45;
color: var(--wp--preset--color--ink);
margin: 0;
}
.svc-desc .svc-more {
max-width: 460px;
text-align: center;
font-size: 15px;
line-height: 1.6;
color: var(--wp--preset--color--text-secondary);
margin: 14px 0 0;
}
.svc-desc .svc-cta {
display: block;
margin-top: 24px;
font-size: 11px;
font-weight: 500;
letter-spacing: 1.3px;
text-transform: uppercase;
color: var(--wp--preset--color--signal-blue-soft);
text-decoration: none;
}
/* --- Our Services: FAQ, light section --- */
.faq-section {
background: var(--wp--preset--color--contrast-page);
color: var(--wp--preset--color--page);
padding: 120px 24px 140px;
}
.faq-inner {
max-width: 760px;
margin: 0 auto;
}
.faq-header {
margin-bottom: 56px;
}
.faq-header .eyebrow {
color: #4a5264;
margin-bottom: 16px;
}
.faq-header h2 {
font-size: clamp(32px, 5vw, 52px);
font-weight: 500;
letter-spacing: -0.8px;
margin: 0;
color: var(--wp--preset--color--page);
}
.faq-item {
border-top: 1px solid var(--wp--preset--color--border-light);
}
.faq-item:last-child {
border-bottom: 1px solid var(--wp--preset--color--border-light);
}
.faq-q {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
background: none;
border: none;
text-align: left;
padding: 26px 0;
cursor: pointer;
font-family: inherit;
color: var(--wp--preset--color--page);
}
.faq-q .q-text {
font-size: 19px;
font-weight: 500;
letter-spacing: -0.2px;
min-width: 0;
overflow-wrap: break-word;
}
.faq-q .icon {
flex: none;
position: relative;
width: 20px;
height: 20px;
}
.faq-q .icon::before,
.faq-q .icon::after {
content: "";
position: absolute;
background: var(--wp--preset--color--signal-blue-soft);
transition: transform 0.3s ease;
}
.faq-q .icon::before {
left: 0;
top: 9px;
width: 20px;
height: 2px;
}
.faq-q .icon::after {
left: 9px;
top: 0;
width: 2px;
height: 20px;
}
.faq-item.is-open .faq-q .icon::after {
transform: rotate(90deg);
opacity: 0;
}
.faq-a-wrap {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.35s ease;
}
.faq-item.is-open .faq-a-wrap {
grid-template-rows: 1fr;
}
.faq-a-inner {
overflow: hidden;
}
.faq-a {
max-width: 620px;
font-size: 16px;
line-height: 1.6;
color: #4a5264;
margin: 0;
padding-bottom: 28px;
}
.faq-close {
text-align: center;
margin-top: 64px;
}
.faq-close p {
color: #4a5264;
font-size: 15px;
margin: 0 0 16px;
}
.faq-close .faq-cta-solid {
display: inline-block;
background: var(--wp--preset--color--page);
color: var(--wp--preset--color--contrast-page);
font-size: 11px;
font-weight: 500;
letter-spacing: 1.3px;
text-transform: uppercase;
text-decoration: none;
padding: 14px 24px;
border-radius: var(--wp--custom--rounded--sharp);
}
/* --- Contact Us: WPForms (wpforms-lite) embed --- its own default styles
assume a light page: near-black label text (unreadable on this theme's
dark background) and a generic blue submit button that clashes with the
site's own flat/uppercase button system. Inputs themselves already sit on
white, so their text is left alone — only the surrounding chrome (which
sits directly on the dark page background) needs the theme's tokens. */
.wpforms-field-label,
.wpforms-field-label-inline,
legend.wpforms-field-label {
color: var(--wp--preset--color--text-secondary) !important;
font-weight: 500 !important;
}
.wpforms-field-sublabel {
color: var(--wp--preset--color--text-tertiary) !important;
}
.wpforms-field-description {
color: var(--wp--preset--color--text-tertiary) !important;
}
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="url"],
.wpforms-container input[type="number"],
.wpforms-container textarea,
.wpforms-container select {
border-radius: var(--wp--custom--rounded--sharp) !important;
border-color: var(--wp--preset--color--border) !important;
}
.wpforms-container input:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus {
border-color: var(--wp--preset--color--signal-blue-soft) !important;
outline: none !important;
box-shadow: 0 0 0 1px var(--wp--preset--color--signal-blue-soft) !important;
}
.wpforms-submit {
background: var(--wp--preset--color--ink) !important;
color: var(--wp--preset--color--page) !important;
border: none !important;
border-radius: var(--wp--custom--rounded--sharp) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 1.3px !important;
line-height: 16px !important;
text-transform: uppercase !important;
padding: 12px 20px !important;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.wpforms-submit:hover {
background: var(--wp--preset--color--signal-blue-soft) !important;
color: var(--wp--preset--color--page) !important;
}
@media (prefers-reduced-motion: reduce) {
.svc-scroll { height: auto; }
.svc-sticky { position: relative; height: auto; padding: 96px 24px; flex-direction: column; gap: 32px; }
.svc-title { opacity: 0; }
.svc-title-solid { position: relative; opacity: 1 !important; }
.svc-desc { position: relative; opacity: 1 !important; transform: none !important; bottom: auto; }
}
@media (max-width: 782px) {
:root {
--wp--preset--spacing--page-x: 16px !important;
--wp--preset--spacing--section-lg: 48px !important;
--wp--preset--spacing--section-md: 48px !important;
}
.home-section {
padding-left: var(--wp--preset--spacing--page-x);
padding-right: var(--wp--preset--spacing--page-x);
}
.svc-title-wrap,
.svc-desc,
.svc-page-title,
.our-services-intro,
.svc-more-services,
.svc-more-slider,
.svc-more-cta,
.faq-section,
.story-page-title,
.story-columns,
.story-below {
padding-left: var(--wp--preset--spacing--page-x);
padding-right: var(--wp--preset--spacing--page-x);
}
.svc-more-nav {
width: 34px;
height: 34px;
}
.svc-more-nav svg {
width: 15px;
height: 15px;
}
/* The desktop -20px outward offset would push these past the viewport
edge here — .svc-more-slider's own edge already sits flush with the
screen on mobile (its padding-box IS the page-x margin), so there's
no room outside it to push into. */
.svc-more-prev {
left: 0;
}
.svc-more-next {
right: 0;
}
h1 {
font-size: 48px !important;
line-height: 56px !important;
}
h2 {
font-size: 36px !important;
line-height: 44px !important;
}
/* .svc-title is also an
— the generic mobile h2 override above
(!important) would otherwise win over the clamp() below regardless of
selector specificity. Needs its own !important to hold its size. */
.svc-title,
.svc-title-solid {
font-size: clamp(50px, 13vw, 160px) !important;
line-height: 1.02 !important;
text-align: center;
}
/* .story-page-title is also an