/* Site CSS for what theme.json can't express (look 1 "Schemă", BRIEF.md section 10). Tokens, element and block styles
live in theme.json and styles/blocks/; the drawings' paint in ub-site's ub/drawing block. */
/* Focus: a 2 px ring in ink (on-deep on the dark band). UB Kit's ring (kit.css) is 3 px and !important. */
:root { --ub-focus: var(--wp--preset--color--ink); }
:is(.is-style-ub-dark, .has-deep-background-color) { --ub-focus: var(--wp--preset--color--on-deep); }
html :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-width: 2px !important; }
h1, h2, h3, .wp-block-heading { text-wrap: balance; }
/* Keep a few words on one line (e.g. Cluj-Napoca in an eyebrow) */
.ub-nowrap { white-space: nowrap; }
/* Phones and tablets: UB Kit's call bar (below 782 px, its default) already carries WhatsApp, so WP Chat App's floating
bubble steps out there; on desktop, where there's no bar, the bubble stays (qa-report Q2; as upperbiz-ro does) */
@media (width < 782px) { #wa { display: none !important; } }
p { text-wrap: pretty; }
/* ---- Header: sticky, white, a hairline under it ------------------------------------------------------------------ */
header.wp-block-template-part {
position: sticky;
top: var(--wp-admin--admin-bar--height, 0px);
z-index: 50;
}
.ub-header { border-block-end: 1px solid var(--wp--preset--color--line); }
.ub-header .wp-block-site-logo { flex: none; line-height: 0; }
.ub-header .wp-block-site-logo img { inline-size: 170px; block-size: auto; }
/* The descriptor beside the logo, from 1280 px, after a hairline */
.ub-header__descriptor { display: none; margin: 0; padding-inline-start: var(--wp--preset--spacing--30); border-inline-start: 1px solid var(--wp--preset--color--line); line-height: 1.35; white-space: nowrap; }
@media (width >= 1280px) { .ub-header__descriptor { display: block; } }
.ub-header__phone > .wp-block-button__link { gap: 0.5rem; font-weight: 500; color: var(--wp--preset--color--ink); text-decoration: none; white-space: nowrap; }
.ub-header__phone > .wp-block-button__link:hover { color: var(--wp--preset--color--accent); text-decoration: underline; }
.ub-header__phone .ub-ico { inline-size: 1.25rem; block-size: 1.25rem; color: var(--wp--preset--color--accent); }
.ub-header__cta > .wp-block-button__link { white-space: nowrap; }
/* Below the menu's breakpoint the menu button goes last (logo · phone · button · menu) */
@media (width < 1024px) { .ub-header .ub-nav { order: 2; } }
/* Phones: logo, phone icon, menu (the call bar carries "Cere ofertă") */
@media (width < 782px) {
.ub-header .wp-block-site-logo img { inline-size: 128px; }
.ub-header .ub-header__phone > .wp-block-button__link:has(.ub-ico) { inline-size: 2.75rem; justify-content: center; gap: 0; font-size: 0; }
.ub-header__phone .ub-ico { inline-size: 1.5rem; block-size: 1.5rem; }
}
@media (width < 600px) { .wp-block-buttons > .wp-block-button.ub-header__cta { display: none; } }
/* ---- The header's menu (.ub-nav) ---------------------------------------------------------------------------------
From theme.json custom.header.menuBreakpoint up it sits in the bar; below it, the menu button opens core's overlay
(functions.php writes that media query; core's own is fixed at 600 px: upperbiz-ro H14). A submenu's class lands on
its and on its inner too (core copies it), so style a submenu as li.my-class, never .my-class alone. */
.ub-nav .wp-block-navigation__responsive-container-open { inline-size: 2.75rem; block-size: 2.75rem; align-items: center; justify-content: center; }
.ub-nav .wp-block-navigation__submenu-container { border: 1px solid var(--wp--preset--color--line) !important; border-radius: 8px; padding-block: 0.375rem; }
.ub-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 0.5rem 1rem; }
.ub-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--accent); }
/* In the overlay each submenu folds behind its own button (assets/nav.js; core keeps every submenu open there:
upperbiz-ro H27). Without JavaScript there are no buttons and every submenu stays open, as core shows it. */
.ub-nav__fold { display: none; }
.ub-nav .wp-block-navigation__responsive-container.is-menu-open li.has-child.ub-nav__folds { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 0.25rem; }
.ub-nav .wp-block-navigation__responsive-container.is-menu-open li.ub-nav__folds > .wp-block-navigation__submenu-container { flex-basis: 100%; }
.ub-nav .wp-block-navigation__responsive-container.is-menu-open li.ub-nav__folds:not(.ub-nav__open) > ul.wp-block-navigation__submenu-container { display: none; }
.ub-nav .wp-block-navigation__responsive-container.is-menu-open li.ub-nav__folds > button.wp-block-navigation-item__content.wp-block-navigation-submenu__toggle { display: none; }
.ub-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { border: 0 !important; }
.ub-nav .is-menu-open .ub-nav__fold {
display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-block-size: 2.75rem; min-inline-size: 2.75rem;
margin: 0; padding: 0 0.5rem; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.ub-nav .is-menu-open .ub-nav__fold::after {
content: ""; inline-size: 0.5rem; block-size: 0.5rem; border: solid currentColor; border-width: 0 2px 2px 0;
transform: translateY(-25%) rotate(45deg);
}
.ub-nav .is-menu-open .ub-nav__open > .ub-nav__fold::after { transform: translateY(25%) rotate(-135deg); }
.ub-nav .is-menu-open .ub-nav__fold:hover { background: var(--wp--preset--color--base); }
/* ---- Sections ------------------------------------------------------------------------------------------------------ */
/* Full-width sections touch each other (no root block gap between them) */
.wp-site-blocks > main > .alignfull, .entry-content > .alignfull { margin-block-start: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }
/* Buttons never shrink under 48 px; a text-link button (styles/blocks/button-link.json, what ub/contact bindings
fill: only a button's URL can be bound) stays a 44 px target in the text's flow */
.wp-element-button, .wp-block-button__link { min-block-size: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.wp-block-button.is-style-ub-link > .wp-block-button__link { min-block-size: 44px; justify-content: flex-start; }
.wp-block-button.is-style-ub-link > .wp-block-button__link:hover { background: transparent; text-decoration: none; }
/* Icons put into links and paragraphs (functions.php: class ub-icon-): the svg-designer's 24-grid icons, in the
text's colour */
.ub-ico { display: inline-flex; flex: none; inline-size: 1.25em; block-size: 1.25em; vertical-align: -0.25em; }
.ub-ico svg { inline-size: 100%; block-size: 100%; overflow: visible; }
.ub-ico :is(.dg-line, .dg-box, .dg-soft) { fill: none; stroke: currentColor; stroke-width: 1.75px; stroke-linecap: round; stroke-linejoin: round; }
.ub-ico :is(.dg-node, .dg-signal) { fill: currentColor; stroke: none; }
p:has(> .ub-ico) { display: flex; align-items: center; gap: 0.5rem; }
li:has(> .ub-ico) { display: flex; align-items: flex-start; gap: 0.625rem; }
li > .ub-ico { margin-block-start: 0.15em; }
/* Drafting grid (styles/blocks/grid.json): faint dots every 24 px, like an engineer's sheet */
.is-style-ub-grid {
background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--wp--preset--color--muted) 28%, transparent) 1px, transparent 1.5px);
background-size: 24px 24px;
}
/* Lists without bullets (styles/blocks/plain-list.json) */
.is-style-ub-plain { list-style: none; }
.is-style-ub-plain > li + li { margin-block-start: 0.5rem; }
/* ---- The dark band (styles/blocks/dark.json) and the footer ---------------------------------------------------------- */
.is-style-ub-dark p.is-style-ub-eyebrow { color: var(--wp--preset--color--deep-accent); }
.is-style-ub-dark :is(.has-muted-color) { color: var(--wp--preset--color--deep-muted) !important; }
.is-style-ub-dark .wp-block-button.is-style-ub-link > .wp-block-button__link { color: var(--wp--preset--color--deep-accent); }
.is-style-ub-dark .wp-block-button:not(.is-style-outline, .is-style-ub-link) > .wp-block-button__link:is(:hover, :focus) {
color: var(--wp--preset--color--deep); background-color: var(--wp--preset--color--deep-accent); border-color: var(--wp--preset--color--deep-accent);
}
.is-style-ub-dark .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--wp--preset--color--on-deep); border-color: var(--wp--preset--color--on-deep); }
.is-style-ub-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover { color: var(--wp--preset--color--deep); background-color: var(--wp--preset--color--on-deep); }
/* UB Kit's call bar is placed in the footer's markup but is a light bar of its own: its buttons keep the light colours */
.wp-block-ub-call-bar { --ub-focus: var(--wp--preset--color--ink); }
.is-style-ub-dark .wp-block-ub-call-bar .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); }
.is-style-ub-dark .wp-block-ub-call-bar .wp-block-button.is-style-outline > .wp-block-button__link:hover { color: var(--wp--preset--color--surface); background-color: var(--wp--preset--color--ink); }
.is-style-ub-dark .wp-block-ub-call-bar .wp-block-button:not(.is-style-outline, .is-style-ub-link) > .wp-block-button__link:is(:hover, :focus) {
color: var(--wp--preset--color--on-accent); background-color: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent);
}
/* The highlighted card on the dark band: a teal-tinted deep with a teal edge */
.is-style-ub-dark .is-style-ub-card-accent {
background-color: color-mix(in srgb, var(--wp--preset--color--deep-accent) 9%, var(--wp--preset--color--deep));
border-color: var(--wp--preset--color--deep-accent);
color: var(--wp--preset--color--on-deep);
}
/* A card on the dark band: a slightly lighter deep, a faint light edge */
.is-style-ub-dark .is-style-ub-card {
background-color: color-mix(in srgb, var(--wp--preset--color--on-deep) 5%, var(--wp--preset--color--deep));
border-color: color-mix(in srgb, var(--wp--preset--color--on-deep) 18%, var(--wp--preset--color--deep));
color: var(--wp--preset--color--on-deep);
}
.ub-footer a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--on-deep); text-decoration: none; }
.ub-footer a:where(:not(.wp-element-button)):hover { color: var(--wp--preset--color--deep-accent); text-decoration: underline; }
.ub-footer .wp-block-button.is-style-ub-link > .wp-block-button__link { color: var(--wp--preset--color--on-deep); text-decoration: none; }
.ub-footer .wp-block-button.is-style-ub-link > .wp-block-button__link:hover { color: var(--wp--preset--color--deep-accent); text-decoration: underline; }
.ub-footer .ub-ico { color: var(--wp--preset--color--deep-accent); }
.ub-footer { border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--on-deep) 12%, transparent); }
.ub-footer__name { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
.ub-footer__links { margin-block-end: 0; }
.ub-footer__links li { min-block-size: 1.75rem; }
/* The Contact column's rows on the link lists' rhythm (a 28 px row, 8 px apart): the phone, WhatsApp and e-mail are
text-link buttons, whose 44 px floor made that column's rows 52 px apart (qa-report Q8). 28 px is still above the
24 px target minimum, and the rows don't touch. */
.ub-footer__contact .wp-block-button.is-style-ub-link > .wp-block-button__link { display: flex; min-block-size: 1.75rem; } /* flex, not inline-flex: no line box adding 5 px under it */
.ub-footer__hours { margin: 0; min-block-size: 1.75rem; }
.ub-footer__todo { display: block; font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--deep-muted); }
.ub-footer__legal { padding-block-start: var(--wp--preset--spacing--40); border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--on-deep) 16%, transparent); }
.ub-footer__legal p { margin: 0; }
.ub-footer__identity { column-gap: var(--wp--preset--spacing--40) !important; }
.ub-footer__identity > .wp-block-group { display: block; }
.ub-footer__identity > .wp-block-group > p { display: inline; }
.ub-footer__identity > .wp-block-group > p + p { margin-inline-start: 0.35em; }
.ub-footer__meta > * { margin: 0; min-block-size: 44px; display: flex; align-items: center; }
.ub-footer__meta a:where(:not(.wp-element-button)) { text-decoration: underline; }
/* 2 × 2 from 600 px to 1023 px (core stacks columns under 782 px with an !important rule of its own) */
@media (600px <= width < 1024px) {
.ub-footer .wp-block-columns.ub-footer__cols { flex-wrap: wrap !important; }
.ub-footer .wp-block-columns.ub-footer__cols > .wp-block-column { flex-basis: calc(50% - var(--wp--preset--spacing--50)) !important; flex-grow: 0; }
}
/* ---- Home page sections (patterns/) --------------------------------------------------------------------------------- */
/* Hero (hero-schema): two columns from 1024 px, stacked below (core's columns stack only under 782 px) */
@media (width < 1024px) {
.ub-hero__cols { flex-wrap: wrap !important; }
.ub-hero__cols > .wp-block-column { flex-basis: 100% !important; }
}
.ub-hero__note { display: flex; align-items: center; gap: 0.5rem; }
/* Fact strip: four in a row, 2 × 2 on tablets, a list on phones; hairlines between */
.ub-facts { gap: 0 !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.ub-facts > * { margin: 0 !important; padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); border-inline-start: 1px solid var(--wp--preset--color--line); }
.ub-facts > :first-child { border-inline-start: 0; padding-inline-start: 0; }
.ub-facts p { margin: 0; }
.ub-facts p + p { margin-block-start: 0.375rem; }
.ub-facts .is-style-ub-eyebrow { display: flex; align-items: center; gap: 0.5rem; color: var(--wp--preset--color--ink); }
.ub-facts .is-style-ub-eyebrow::before { content: ""; flex: none; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--wp--preset--color--primary); }
@media (width < 1024px) {
.ub-facts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.ub-facts > :nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
.ub-facts > :nth-child(n + 3) { border-block-start: 1px solid var(--wp--preset--color--line); }
}
@media (width < 600px) {
.ub-facts { grid-template-columns: minmax(0, 1fr) !important; }
.ub-facts > * { border-inline-start: 0; padding-inline: 0; }
.ub-facts > * + * { border-block-start: 1px solid var(--wp--preset--color--line); }
}
/* Service cards (services-grid): the whole card opens its page through its heading's link (one real link per card);
hover and keyboard focus turn its edge and its drawing teal */
.ub-service { position: relative; display: flex; flex-direction: column; }
.ub-service > .wp-block-ub-drawing { margin-block-end: var(--wp--preset--spacing--10); }
.ub-service h3 a { color: inherit; text-decoration: none; }
.ub-service h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ub-service .ub-more { margin-block-start: auto; padding-block-start: var(--wp--preset--spacing--20); color: var(--wp--preset--color--accent); font-weight: 500; }
.ub-service:has(h3 a):hover { border-color: var(--wp--preset--color--accent); }
.ub-service:has(h3 a):hover .wp-block-ub-drawing { --dg-ink: var(--wp--preset--color--accent); }
.ub-service:has(h3 a):hover h3 a { text-decoration: underline; }
.ub-service:has(h3 a:focus-visible) { outline: 2px solid var(--ub-focus); outline-offset: 2px; }
.ub-service:has(h3 a:focus-visible) h3 a:focus-visible { outline: none !important; }
/* The ring sits on the card; the link itself also changes (underlined), so its own look shows focus too (ub check's
menu check reads the element and its near boxes, not the card: manager, 2026-11-07) */
.ub-service h3 a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
@media (prefers-reduced-motion: no-preference) {
.ub-service { transition: border-color 150ms ease-out; }
}
.ub-service.ub-service-start { justify-content: center; }
.ub-service-start .wp-block-buttons { padding-block-start: var(--wp--preset--spacing--20); }
/* Kept places (clients-placeholder): the case drawing quiet and grey, the facts as empty dashed lines */
.is-style-ub-placeholder .wp-block-ub-drawing {
--dg-ink: var(--wp--preset--color--deep-muted); --dg-node: var(--wp--preset--color--line); --dg-signal: var(--wp--preset--color--line);
--dg-body: transparent; --dg-soft: var(--wp--preset--color--line);
}
.is-style-ub-placeholder p.is-style-ub-eyebrow { color: var(--wp--preset--color--muted); }
.ub-blank-lines { margin: 0; }
.ub-blank-lines li { padding-block: 0.25rem; border-block-end: 1px dashed var(--wp--preset--color--deep-muted); color: var(--wp--preset--color--deep-muted); }
.ub-blank-lines li:nth-child(2) { inline-size: 80%; }
.ub-blank-lines li:nth-child(3) { inline-size: 60%; }
/* Two ways (ways-band): the price line in mono; the plan's items with teal check marks */
.ub-price { font-variant-numeric: tabular-nums; line-height: 1.2; }
.ub-checks .ub-ico { color: var(--wp--preset--color--deep-accent); }
.ub-more a { display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 44px; text-decoration: none; font-weight: 500; }
/* The second column holds the on-request card and the free audit under it, stretched to the plan card's height, so
the two columns end together (qa-report Q4) */
.ub-ways__cards { align-items: stretch; }
.ub-ways__side > .ub-ways__audit { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
.ub-more a:hover { text-decoration: underline; }
/* Contact (contact): the form on a light panel with white fields; details as icon · label over value */
.ub-contact__form .wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) { background: var(--wp--preset--color--surface); }
/* Contact details: icon · label over value */
.ub-detail { align-items: flex-start !important; }
.ub-detail > .wp-block-ub-drawing.is-icon { margin-block-start: 0.125rem; color: var(--wp--preset--color--accent); }
.ub-detail p { margin: 0; }
.ub-detail .wp-block-buttons { margin: 0; }
.ub-detail .wp-block-button.is-style-ub-link > .wp-block-button__link { min-block-size: 32px; }