/** * OptimWP — Elementor native bridge. * * The homepage (and, later, other pages) is rebuilt with NATIVE Elementor containers + * heading/text-editor widgets that reuse the code-first classes (owp-section, owp-container, * owp-cards, owp-feature, owp-service, owp-review, owp-guarantee, owp-about, owp-cta-banner) * as the visual skin. * * Elementor's `.e-con` container base sets `margin:0`, `padding:10px`, `border-radius:0` and * `text-align:start` on EVERY container. Those load after our sections.css and, at equal * specificity, win — so our classes' margins/padding/radius/alignment silently lose (max-width * survives only because Elementor never sets it). This file re-asserts what our design intends, * scoped under `.owp-page` so specificity (0,2,0) beats `.e-con` (0,1,0) regardless of load order. * * Do NOT redefine owp-* component *looks* here (colors, fonts, hovers come from the shared CSS) — * only re-assert the box-model/layout properties Elementor's container base clobbers. */ /* -------------------------------------------------- centering (margin:auto clobbered). padding-block 0 kills Elementor's default 10px `.e-con` padding; keep the 1rem gutter. The homepage hero's inner column is excluded: it carries its width, its centering and its gutter as NATIVE container settings now (Layout > Width, Advanced > Margin / Padding). Elementor consumes those through `.e-con{margin-inline-*:var(--margin-inline-*)}`, which is (0,1,0); this rule is (0,2,0) and would silently outrank the panel. `:where()` inside the `:not()` keeps the selector at its original (0,2,0) — see the note on `.owp-page .owp-section` below for why raising it would be a bug. */ .owp-page .owp-container:not(:where(.owp-hero__inner)) { margin-inline: auto; padding: 0 1rem; } .owp-page .owp-head { margin-inline: auto; text-align: center; } .owp-page .owp-cta-banner { text-align: center; } /* -------------------------------------------------- section vertical rhythm (padding clobbered). Ceiling stays 6rem (96px) at desktop, matched to the reference's py-24 -- that earlier decision is unchanged. What moved is the FLOOR: the reference never drops a section below 5rem at any width (py-24 is unconditional, py-20 is its smallest responsive step), while this clamp bottomed out at 3.5rem and only reached 6rem past a 1371px viewport. Phones and tablets were 40-56px short per section. 5rem floor, and 8vw now reaches the ceiling at 1200px. The hero is excluded — its vertical padding is a NATIVE container setting now (Advanced > Padding, custom unit: `clamp(3.5rem, 7vw, 6rem)` top / `2rem` bottom / `0px` sides). Elementor consumes it through `.e-con-full{padding-block-*:var(--padding-block-*)}`, which is (0,1,0); this rule is (0,2,0) and would silently outrank the panel value. The hero closes tighter than a normal section on purpose: the tech-chip band above the divider gets 2rem of padding-top, so the hero's own bottom padding matches it and the band stays optically symmetric (2rem above the chips / 2rem below). The exclusion is written `:not(:where(...))` and not `:not(...)` on purpose: `:where()` scores zero, so the selector keeps the exact (0,2,0) it had before the hero was carved out. A plain `:not(.owp-hero)` would take it to (0,3,0) and it would start beating `.owp-page .owp-section--flush-top` (0,2,0) further down this file, silently putting 96px back on top of every flush-top section on the other pages. */ .owp-page .owp-section:not(:where(.owp-hero)) { padding-block: clamp(5rem, 8vw, 6rem); padding-inline: 0; } /* -------------------------------------------------- page-hero (inner pages) as native container: re-assert its own padding / centering / text-align that Elementor's `.e-con` base clobbers. */ .owp-page .owp-page-hero { padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); padding-inline: 0; text-align: center; } /* 54rem = the homepage hero's own inner width, so inner pages open at the same measure. */ .owp-page .owp-page-hero__inner { max-width: 54rem; margin-inline: auto; padding: 0; } /* -------------------------------------------------- section heading treatment matched to vercel: 36px / line-height 1.25 (vs our 40px/1.15), and NO 42rem cap so long headings stay on one line. Targets the native

(`.elementor-heading-title`). The subtitle measure is NOT set here. It used to say `max-width:42rem`, but that rule is (0,2,0) and Elementor's own `.elementor.elementor .e-con>.elementor-widget{max-width:100%}` is (0,4,0) and loads after us, so the cap never applied to any of the 45 native subtitle widgets -- it only bit the handful still written as raw HTML, which is why the homepage looked inconsistent with itself: three subtitles full width, one boxed at 672px. Both kinds are now capped at 52rem, by a rule written at (0,5,0) at the FOOT of this file, where it can actually win. `margin-inline:auto` stays here for the raw-HTML subtitles. */ .owp-page .owp-head { max-width: none; } /* letter-spacing is restated here for the same reason the font-size is: the native section titles are `.elementor-heading-title`, and Elementor's global typography rule for them is (0,2,0) and prints after our sheets, so anything we want guaranteed on them has to be at least that specific. -0.025em = the reference's `tracking-tight`, the same value base.css now gives every h1/h2. */ .owp-page .owp-head .elementor-heading-title, .owp-page .owp-head__title { font-size: clamp(2rem, 3.6vw, 2.5rem); line-height: 1.25; letter-spacing: -.025em; } .owp-page .owp-head__subtitle { margin-inline: auto; } /* -------------------------------------------------- hero tech-chips matched to vercel: a divider + "Tehnologii pe care le folosim" label + chips (normal case, 14px, icon+text). (Elementor-only for now; mirror to code-first sections.css when the sites are synced.) The band's own top margin, top padding and divider line USED to live here; on the homepage they are native container settings now (see the HOMEPAGE HERO block at the foot of this file). */ .owp-body .owp-hero__techlabel { margin: 0 0 1.25rem; font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: var(--owp-muted); } .owp-body .owp-hero__tech { margin-top: 0; gap: 1rem 2.5rem; font-size: 1rem; text-transform: none; letter-spacing: normal; } .owp-body .owp-hero__tech span { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; } .owp-body .owp-hero__tech svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; color: var(--owp-brand); } .owp-body .owp-hero__tech-wp { font-weight: 700; color: color-mix(in oklab, var(--owp-fg) 85%, transparent); } .owp-body .owp-btn__arrow { width: 1.05rem; height: 1.05rem; flex-shrink: 0; } /* -------------------------------------------------- card box (feature/service/review) = NATIVE Elementor settings now (bg/border/radius/padding, panel-editable) — no bridge needed for them. These one-off boxes stay class/bridge driven (clamp/gradient values can't be native settings). */ .owp-page .owp-guarantee__box { padding: clamp(2rem, 5vw, 3.5rem); border-radius: var(--owp-radius-3xl); } .owp-page .owp-about__quotecard{ padding: 2rem; border-radius: var(--owp-radius-3xl); } .owp-page .owp-cta-banner { padding: clamp(3rem, 6vw, 5rem) 2rem; border-radius: var(--owp-radius-3xl); } /* -------------------------------------------------- structural containers keep NO inner padding */ .owp-page .owp-cards, .owp-page .owp-services__grid, .owp-page .owp-reviews__grid, .owp-page .owp-steps, .owp-page .owp-contact__cards, .owp-page .owp-contact__grid, .owp-page .owp-about__grid, .owp-page .owp-about__grid > .e-con:first-child, .owp-page .owp-head, .owp-page .owp-guarantee__inner, .owp-page .owp-guarantee__inner > .e-con, .owp-page .owp-cta-banner__inner, .owp-page .owp-services__more { padding: 0; } /* -------------------------------------------------- card rows are CSS grids, not flex. margin-top (head→grid gap) is on these grid containers in sections.css; Elementor's `.e-con{margin:0}` collapses it → the whole page reads cramped. Re-assert it here. */ .owp-page .owp-cards { display: grid; gap: 1.25rem; margin-top: 3.5rem; } .owp-page .owp-services__grid { display: grid; gap: 1.25rem; margin-top: 3.5rem; } .owp-page .owp-reviews__grid { display: grid; gap: 1.5rem; margin-top: 3.5rem; } .owp-page .owp-about__grid { display: grid; gap: 3rem; align-items: stretch; } /* About left column: equal height with the quote card; push the "Află mai multe" button to the bottom so it lines up with the quote card's bottom edge, and give it a bit more padding. */ .owp-page .owp-about__grid > .e-con:first-child { display: flex; flex-direction: column; } .owp-page .owp-about__grid > .e-con:first-child > .elementor-widget-html:last-child { margin-top: auto; } /* Same bottom-alignment for the RAW-HTML about section (generic-converted pages), where the left column is a plain
and the button is a direct child. MUST stay `> a.owp-btn`: a bare `> .owp-btn` also matched the NATIVE button widget's wrapper (Elementor puts owp-btn on the wrapper div), whose 1.9rem side padding then indented the "Află mai multe despre noi" button ~30px away from the column's left edge. */ .owp-page .owp-about__grid > div:first-child { display: flex; flex-direction: column; } .owp-page .owp-about__grid > div:first-child > a.owp-btn { margin-top: auto; padding: .75rem 1.5rem; font-size: 1rem; line-height: 1.5; } /* About CTA (native button widget) — vercel metrics: flush left, 28px under the copy, 12px/24px padding, 16px label. */ .owp-page .owp-about__grid .elementor-widget-button.owp-btn { margin-top: 1.75rem; text-align: left; } .owp-page .owp-about__grid .elementor-widget-button.owp-btn .elementor-button-wrapper { text-align: left; } .owp-page .owp-about__grid .elementor-widget-button.owp-btn .elementor-button { padding: .75rem 1.5rem; font-size: 1rem; line-height: 1.5; } /* "Vezi toate serviciile" — vercel metrics: 48px above the button, 14px/28px padding, 16px label. */ .owp-page .owp-services__more { margin-top: 3rem; } .owp-page .owp-services__more .elementor-widget-button.owp-btn .elementor-button { padding: .875rem 1.75rem; font-size: 1rem; line-height: 1.5; } /* -------------------------------------------------- widget wrappers must not add spacing */ .owp-page .e-con .elementor-widget-container { margin: 0; padding: 0; } /* -------------------------------------------------- heading/subtitle alignment inside a head */ .owp-page .owp-head .elementor-widget-heading, .owp-page .owp-head .elementor-heading-title, .owp-page .owp-head .elementor-widget-text-editor { text-align: center; } .owp-page .elementor-widget-heading .elementor-heading-title { color: inherit; } /* Closing CTA band: its heading must stay white on the violet gradient, in BOTH themes, exactly as on the code-first build. The rule above (`color: inherit`, 0,3,0) makes the heading inherit the body colour, which on the LIGHT theme is near-black -> dark title on a violet band. Repaired by specificity only (0,4,0 beats 0,3,0), never with `!important`, and no other value is changed. */ .owp-page .owp-cta-banner .elementor-widget-heading .elementor-heading-title { color: #fff; } /* (service description styling now scoped to .owp-service__desc p — the old broad `.owp-service .elementor-widget-text-editor p` rule was removed: it also hit the num/icon widgets.) */ /* -------------------------------------------------- reviews: quote grows so footers align */ .owp-page .owp-review { display: flex; flex-direction: column; } .owp-page .owp-review > .elementor-widget-text-editor { flex: 1; } /* -------------------------------------------------- service card number (01–06). Elementor sets `.elementor-widget{position:relative}`, so the absolute `.owp-service__num` was anchoring to its little icon widget instead of the card corner. Make the card's html widgets static → the number falls back to `.owp-service` (position:relative) = card corner, like code-first. Keep the card clipping the oversized number. */ .owp-page .owp-service .elementor-widget-html { position: static; } .owp-page .owp-service { overflow: hidden; } /* -------------------------------------------------- guarantee: icon keeps its fixed size */ .owp-page .owp-guarantee__inner > .elementor-widget-html { flex-shrink: 0; } /* -------------------------------------------------- CTA banner: keep the button block centered */ .owp-page .owp-cta-banner__inner .elementor-widget-html { text-align: center; } /* ---- Native-widget bridges (converted from HTML widgets, keep the owp look) ---- */ /* Checklist = native Elementor icon-list (.owp-checklist-el) styled like .owp-checklist */ .owp-checklist-el .elementor-icon-list-items { display: grid; grid-template-columns: 1fr; gap: .75rem 2rem; margin-top: 2.5rem; } @media (min-width: 640px) { .owp-checklist-el .elementor-icon-list-items { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .owp-checklist-el .elementor-icon-list-items { grid-template-columns: 1fr 1fr 1fr; } } .owp-checklist-el .elementor-icon-list-item { align-items: flex-start; padding: 0 !important; } .owp-checklist-el .elementor-icon-list-item > a { align-items: flex-start; } .owp-checklist-el .elementor-icon-list-icon { padding-top: .15rem; } .owp-checklist-el .elementor-icon-list-icon i, .owp-checklist-el .elementor-icon-list-icon svg { color: var(--owp-success); fill: var(--owp-success); font-size: 1rem; width: 1.1rem; height: 1.1rem; } .owp-checklist-el .elementor-icon-list-text { font-size: 1rem; color: color-mix(in oklab, var(--owp-fg) 92%, transparent); padding-left: .6rem; } /* Head -> checklist gap. The 2.5rem above is the code-first value (sections.css .owp-checklist), but it never reached the page: widget-icon-list.min.css ships `.elementor-widget .elementor-icon-list-items{margin:0}` at the SAME specificity (0,2,0) and is enqueued AFTER elementor-native.css (widget CSS loads on render), so it won the tie and the space under the section subtitle collapsed to 0. Re-assert it at (0,3,0) — order-independent. `display:grid` and `gap` survived because Elementor's rule only resets `margin`. */ .owp-page .owp-checklist-el .elementor-icon-list-items { margin-top: 2.5rem; } /* Steps = native container(.owp-steps) with per-step containers(.owp-step) + a native num badge */ .owp-page .owp-steps { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 3rem; } @media (min-width: 768px) { .owp-page .owp-steps { grid-template-columns: repeat(3, 1fr); } } /* Four-step sections lay out 2x2 instead of 3+1 (orphan 4th card on its own row). `:has(> :nth-child(4):last-child)` selects only grids whose 4th child is also the last, so the twelve 3-card grids cannot match. Specificity (0,4,0) -- `:has()` takes the specificity of its most specific argument, the compound `:nth-child(4):last-child` at (0,2,0), on top of `.owp-page .owp-steps` -- which beats every Elementor selector that could reach this container (`.e-con` (0,1,0); a generated per-element rule would be (0,3,0)). Verified against the served sheets: elementor/assets/css/frontend.min.css and uploads/elementor/css/base-desktop.css contain zero `owp-` selectors, so nothing here is contested. No max-width cap on the grid: cards widen from ~360px to ~550px, deliberately. */ @media (min-width: 768px) { .owp-page .owp-steps:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } } /* Step card box: the only card family without a bridge — `.e-con` was giving it the 10px fallback padding and no radius. Match code-first sections.css:248 (border + background already survive). */ /* `display` is NOT set here: the card interior is laid out by the "STEP CARD INTERIOR" block at the end of this file, which has to sit after the `gap: 0` normalization further down. */ .owp-page .owp-step { padding: 1.75rem; border-radius: var(--owp-radius-xl); } /* -aa, matching sections.css: the number inside is white text. */ .owp-step .owp-step__num.elementor-element { display: inline-flex; align-self: flex-start; width: 2.5rem; height: 2.5rem; border-radius: var(--owp-radius-lg); background-image: var(--owp-gradient-brand-aa); } .owp-step .owp-step__num > .elementor-widget-container { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .owp-step .owp-step__num p { margin: 0; color: #fff; font-family: var(--wp--preset--font-family--heading, Poppins), sans-serif; font-weight: 800; line-height: 1; } /* Step titles that still wrap must wrap readably. Elementor's `.elementor-heading-title{line-height:1}` (frontend.min.css) beats base.css's `h1..h6{line-height:1.12}`, so a 2-line title had its lines touching. Specificity here is (0,3,1) — it beats `.elementor-heading-title` (0,1,0) and `h1..h6` (0,0,1) whatever the load order, so widget-heading.min.css loading later cannot undo it. `text-wrap: balance` already comes from base.css:33; restated locally so the wrap behaviour of these cards is readable in one place (and survives a narrowing of the global rule). It is what keeps the 768-1023px tablet band clean: there the 3-card grids give the title a 174px column at 768px, and plain greedy wrapping would leave last lines as short as "site" or "fixes". Balanced, all 52 step titles break into at most two lines with no orphan at any width in the band (measured against the shipped Poppins 700 metrics, 1px steps). `overflow-wrap: break-word` never fires on today's corpus (longest single word 129px vs a 174px column); it is there so a future longer word breaks instead of spilling out of the card. */ .owp-page .owp-step h3.elementor-heading-title { line-height: 1.25; text-wrap: balance; overflow-wrap: break-word; } /* ---- Button = native Elementor button widget carrying owp-btn class on the wrapper ---- Elementor puts .owp-btn on the widget wrapper; the real is .elementor-button. Re-skin the to the owp-btn look (ghost by default; gradient/outline via modifier classes). */ /* The owp-btn / owp-btn--primary / owp-btn--outline classes sit on the widget WRAPPER, so the base component rules would paint the wrapper as a second full-width button. Neutralize the wrapper; the real look lives on the inner .elementor-button below. */ .owp-page .elementor-widget-button.owp-btn { display: block; text-align: inherit; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; } .owp-page .elementor-widget-button.owp-btn .elementor-button-wrapper { display: inline-block; } /* Size and weight mirror `.owp-btn` in components.css and must stay in step with it — one button size across the whole site, and the same size the code-first build uses. The four-class selector is what keeps us ahead of Elementor's own `.elementor-widget-button .elementor-button` typography rule, which loads later — specificity, not `!important`. Contrast is handled by the gradient below, not by this size: the primary variant paints --owp-gradient-brand-aa (6% darker), which clears 4.5:1 at normal text size. */ .owp-page .elementor-widget-button.owp-btn .elementor-button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.4rem; border-radius: var(--owp-radius-pill); font-weight: 600; font-size: 1rem; line-height: 1; border: 1px solid transparent; background: transparent; color: var(--owp-fg); box-shadow: none; text-decoration: none; transition: transform .15s ease, background-color .15s ease, border-color .15s ease, filter .15s ease; } .owp-page .elementor-widget-button.owp-btn .elementor-button:active { transform: translateY(1px); } .owp-page .elementor-widget-button.owp-btn--primary .elementor-button { background-image: var(--owp-gradient-brand-aa); color: #fff; box-shadow: var(--owp-shadow-brand); } .owp-page .elementor-widget-button.owp-btn--primary .elementor-button:hover { filter: brightness(1.07); color: #fff; } .owp-page .elementor-widget-button.owp-btn--outline .elementor-button { border-color: var(--owp-border); } .owp-page .elementor-widget-button.owp-btn--outline .elementor-button:hover { border-color: color-mix(in oklab, var(--owp-brand) 55%, transparent); background: color-mix(in oklab, var(--owp-brand) 9%, transparent); } /* Arrow on the section CTA buttons (`owp-btn--arrow`). The native button widget can only hold plain text, so the arrow is a decorative pseudo-element: the exact lucide `arrow-right` used by the reference, drawn with a CSS mask so it takes the brand violet (the label text stays a plain, client-editable string in the Elementor panel). */ .owp-page .owp-btn--arrow .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: .5rem; } .owp-page .owp-btn--arrow .elementor-button-content-wrapper::after { content: ""; width: 1rem; height: 1rem; flex: 0 0 auto; background-color: var(--owp-brand); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; } /* CTA banner button = solid black (Vercel-style), overriding the ghost base skin. */ /* px-8 py-3.5 at 16px/1.5, the reference's banner button -- the only standalone CTA it sets wider than px-7. Without this the widget fell back to the ghost base (0.7rem/1.4rem at 15.2px/1) set further up, i.e. about 25% smaller than the design and smaller than the hero pair it echoes. */ .owp-page .owp-cta-banner .owp-btn .elementor-button { background: #000; background-image: none; color: #fff; box-shadow: none; border-color: transparent; padding: .875rem 2rem; font-size: 1rem; line-height: 1.5; } .owp-page .owp-cta-banner .owp-btn .elementor-button:hover { background: #262626; color: #fff; filter: none; } /* ---- Review card = native container(.owp-review) with text widgets + unicode stars + avatar ---- */ .owp-page .owp-reviews__grid--single { grid-template-columns: 1fr; max-width: 40rem; margin-inline: auto; } .owp-page .owp-review { padding: 1.5rem; border: 1px solid var(--owp-border); background: var(--owp-card); border-radius: var(--owp-radius-2xl); } .owp-page .owp-review__quote .elementor-widget-container { flex: 1; } /* Footer row: 24px of air above the divider + 16px below it, like the reference figcaption (`mt-6 pt-4`). The margin-top has to be re-asserted here because Elementor's `.e-con{margin:0}` wipes the one sections.css puts on .owp-review__foot — without it the divider sat flush against the quote in the card with the longest quote. */ .owp-page .owp-review__foot { flex-direction: row; align-items: center; margin-top: 1.5rem; padding: 1rem 0 0; } .owp-page .owp-review__meta { padding: 0; gap: 0; } /* flex:0 0 auto — as a flex item the avatar was shrinking to 34px wide (an oval, not a circle). */ /* -aa, matching sections.css: the initial inside is white text. */ .owp-page .owp-avatar { width: 2.5rem; height: 2.5rem; flex: 0 0 auto; background-image: var(--owp-gradient-brand-aa); color: #fff; } .owp-page .owp-avatar .elementor-widget-container { display: contents; } .owp-page .owp-review p, .owp-page .owp-avatar p { margin: 0; } /* ---- Feature cards = native container(.owp-feature): icon(text w/ svg) + heading + text ---- */ .owp-page .owp-cards--4 { display: grid; } @media (min-width: 640px) { .owp-page .owp-cards--4 { grid-template-columns: repeat(2, 1fr); } } /* Four across only from 1200px (mirrors sections.css). At 1024 the four tracks were ~228px wide, leaving ~180px of text inside the 1.5rem card padding: titles broke mid-word and the body copy dropped to roughly three words a line. */ @media (min-width: 1200px) { .owp-page .owp-cards--4 { grid-template-columns: repeat(4, 1fr); } } .owp-page .owp-feature { gap: 0; padding: 1.5rem; border: 1px solid var(--owp-border); background: var(--owp-card); border-radius: var(--owp-radius-2xl); } .owp-page .owp-feature__icon, .owp-page .owp-service__icon { align-self: flex-start; width: 3rem; height: 3rem; flex: 0 0 auto; } .owp-page .owp-feature__icon .elementor-widget-container, .owp-page .owp-service__icon .elementor-widget-container { display: contents; } .owp-page .owp-feature__desc p { margin: 0; } /* ---- Service blocks = native container(.owp-service): num badge + icon + heading + desc + icon-list ---- */ .owp-page .owp-service { gap: 0; position: relative; overflow: hidden; padding: 1.5rem; border: 1px solid var(--owp-border); background: var(--owp-card); border-radius: var(--owp-radius-2xl); } /* Number aligned with the icon: same 1.5rem inset as the card's padding on both sides, and the 3rem/line-height:1 text box is exactly as tall as the 3rem icon, so the two read as symmetric. */ .owp-page .owp-service__num { position: absolute; right: 1.5rem; top: 1.5rem; z-index: 0; pointer-events: none; } .owp-page .owp-service__num, .owp-page .owp-service__num p { margin: 0; font-family: var(--wp--preset--font-family--heading, Poppins), sans-serif; font-size: 3rem; font-weight: 800; line-height: 1; color: color-mix(in oklab, var(--owp-fg) 6%, transparent) !important; } .owp-page .owp-service__desc p { margin: .5rem 0 0; font-size: 1rem; line-height: 1.6; color: var(--owp-muted); } /* Native service card renders the number/description straight into the text-editor div (no

, no .owp-service__desc class), so scope colour + spacing to the direct children — keeps the 01-06 numbers faint and the copy muted, with the same vertical rhythm as optimwp.local (code-first). */ .owp-page .owp-service > .elementor-widget-heading { margin-top: 1.25rem; } /* BUGFIX (docs/13 §2.5): the "01/02/03" watermark is ALSO a text-editor widget and, on /servicii/, /en/ and /en/services/, a DIRECT child of .owp-service -- so this rule (0,3,0 / 0,3,1) was beating `.owp-page .owp-service__num` (0,2,0 / 0,2,1) and rendering the 48px numeral at the card-body size. Excluding the numeral widget here is the minimal fix: the selector simply stops matching it, so the numeral rule applies unopposed -- no `!important`, and no escalation on either side. Written `:not(:where(.owp-service__num))` and NOT `:not(.owp-service__num)` on purpose: a bare `:not()` would push this from (0,3,0)/(0,3,1) to (0,4,0)/(0,4,1) and start out-ranking Elementor's own per-widget page CSS. `:where()` carries zero specificity, so these three lines score exactly what they scored before the fix. (Same trap as §6 note 3 in docs/12.) */ .owp-page .owp-service > .elementor-widget-text-editor:not(:where(.owp-service__num)), .owp-page .owp-service > .elementor-widget-text-editor:not(:where(.owp-service__num)) p { color: var(--owp-muted); font-size: 1rem; line-height: 1.6; } .owp-page .owp-service > .elementor-widget-text-editor:not(:where(.owp-service__num)) { margin-top: .5rem; } .owp-page .owp-service__list-el .elementor-icon-list-items { display: flex; flex-direction: column; gap: .65rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--owp-border); } /* Elementor's own `.elementor .elementor-element ul.elementor-icon-list-items{padding:0}` (0,3,1) out-specifies the rule above (0,3,0) and was collapsing the 20px gap UNDER the divider — the list started 1px below the line instead of the reference's 20px. Re-assert it at (0,4,1). */ .owp-page .owp-service .owp-service__list-el ul.elementor-icon-list-items { padding-top: 1.25rem; } .owp-page .owp-service__list-el .elementor-icon-list-item { align-items: flex-start; padding: 0; } .owp-page .owp-service__list-el .elementor-icon-list-icon { padding-top: .1rem; } .owp-page .owp-service__list-el .elementor-icon-list-icon i, .owp-page .owp-service__list-el .elementor-icon-list-icon svg { color: var(--owp-success); fill: var(--owp-success); font-size: .85rem; width: .95rem; height: .95rem; } .owp-page .owp-service__list-el .elementor-icon-list-text { font-size: 1rem; color: color-mix(in oklab, var(--owp-fg) 90%, transparent); padding-left: .5rem; } /* ---- About grid: founder column (label,h2,desc,button) + quote card ---- */ .owp-page .owp-about__col { gap: 0; } .owp-page .owp-about__col > .elementor-widget-button { margin-top: 1.5rem; } /* The quote card is the SHORTER cell of a two-column grid row whose cells stretch, so it is taller than its own content. `justify-content: center` used to park the whole leftover height in two equal lumps -- one ABOVE the quotation mark, one BELOW the founder's name (26.7px each on the RO homepage at 1440px, on top of the card's own 32px padding, so the visible top/bottom gap read 59.7px against 33px at the sides). That centring was the ONLY source of it: no leading on the quotation glyph, no margin, no min-height contributes. Client's instruction (17.08.2026): the gap above the quotation mark and the gap below the name must both equal the 32px side padding, the leftover height goes into the single interior gap, and the separator line sits centred in that gap -- equidistant from the bottom of the quote and the top of the attribution. Mechanism: the line is no longer the attribution's `border-top` (which pinned it hard against the quote, 0px above / 25px below). It is a 25px-tall strip generated as the card's `::after`, ordered between the quote and the attribution, with the 1px rule painted down its middle, and `margin-block: auto`. Flexbox splits free space EQUALLY between two auto margins, so at any row height the line stays exactly midway. The strip is 25px because that is precisely what the old `1px border + 1.5rem padding-top` occupied -- total content height is unchanged, so no card changes height at any width. `justify-content: center` is kept as the fallback for a browser that fails to generate the pseudo-element; auto margins outrank justify-content, so it does not affect what renders now. It has to be restated in THIS sheet, because `.e-con.e-flex{justify-content:var(--justify-content)}` in Elementor's frontend.min.css is (0,2,0) and prints after sections.css. `::after` (not `::before`): Elementor already owns `.e-con:before` for the background overlay, where it is `position:absolute`; `.e-con:after` is untouched by Elementor. */ .owp-page .owp-about__quotecard { gap: 0; position: relative; justify-content: center; padding: 2rem; border: 1px solid var(--owp-border); background: var(--owp-card); border-radius: var(--owp-radius-3xl); } .owp-page .owp-about__quotecard::after { content: ""; order: 1; flex: 0 0 auto; align-self: stretch; height: 25px; margin-block: auto; background: linear-gradient(var(--owp-border), var(--owp-border)) center / 100% 1px no-repeat; } /* The attribution moves after the strip and gives up the rule + top padding it used to carry. */ .owp-page .owp-about__quotecard > .owp-about__person { order: 2; border-top: 0; padding-top: 0; } .owp-page .owp-quote-mark .elementor-widget-container { display: contents; } .owp-page .owp-quote-mark svg { width: 2.5rem; height: 2.5rem; color: color-mix(in oklab, var(--owp-brand) 40%, transparent); } .owp-page .owp-about__label p { margin: 0; } /* "Despre noi" eyebrow stays violet — the text-editor global colour would otherwise inherit white. */ .owp-page .owp-about__label, .owp-page .owp-about__label p { color: var(--owp-brand); } .owp-page .owp-about__desc p { margin: 0; } .owp-page .owp-about__quote p { margin: 0; } .owp-page .owp-about__person { flex-direction: row; gap: 1rem; padding: 1.5rem 0 0; } .owp-page .owp-about__person .owp-avatar { width: 3rem; height: 3rem; font-size: 1.125rem; } /* Service card head fragment (RO home): wrapper vanishes so the absolute num anchors to the card, not the wrapper */ .owp-page .owp-service__head { display: contents; } /* ---- Contact grid: native info cards + form kept as an HTML widget ---- */ .owp-page .owp-contact__grid { display: grid; } /* `center`, not `start`: the left column is three short info cards against a full message form, so at `start` it hung from the top of a much taller row with a large gap beneath it. */ @media (min-width: 900px) { .owp-page .owp-contact__grid { grid-template-columns: 1fr 1.2fr; align-items: center; } } .owp-page .owp-contact__cards { gap: 1rem; } .owp-page .owp-contact-card { flex-direction: row; align-items: flex-start; gap: 1rem; padding: 1.35rem; border: 1px solid var(--owp-border); background: var(--owp-card); border-radius: var(--owp-radius-xl); } .owp-page .owp-contact-card__icon { align-self: flex-start; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; } .owp-page .owp-contact-card__icon .elementor-widget-container { display: contents; } .owp-page .owp-contact-card__body { gap: 0; } .owp-page .owp-contact-card__val a, .owp-page .owp-contact-card__val p { margin: .25rem 0 0; } /* ---- FAQ = native Nested Accordion (Elementor 4.x,

-based) skinned like .owp-faq ---- */ /* beat Elementor's `.elementor.elementor .e-con > .elementor-widget{max-width:100%}` (0,4,0) */ .owp-page .owp-container.e-con > .elementor-widget.owp-faq { max-width: 48rem; margin-inline: auto; } .owp-page .owp-faq { --n-accordion-title-text-color: var(--owp-fg); --n-accordion-title-text-color-hover: var(--owp-brand); --n-accordion-title-text-color-active: var(--owp-fg); --n-accordion-border-width: 0; --n-accordion-padding: 0; --n-accordion-item-title-space-between: 0; } .owp-page .owp-faq .e-n-accordion { display: flex; flex-direction: column; gap: .75rem; } .owp-page .owp-faq details.e-n-accordion-item { border: 1px solid var(--owp-border); background: var(--owp-card); border-radius: var(--owp-radius-lg); overflow: hidden; } .owp-page .owp-faq .e-n-accordion-item-title { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.35rem; cursor: pointer; } .owp-page .owp-faq .e-n-accordion-item-title-header, .owp-page .owp-faq .e-n-accordion-item-title-text { margin: 0; font-weight: 600; font-size: 1.25rem; line-height: 1.4; color: var(--owp-fg); } .owp-page .owp-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-text { color: var(--owp-brand); } .owp-page .owp-faq .e-n-accordion-item-title-icon { display: none; } /* replace chevron with +/- */ .owp-page .owp-faq .e-n-accordion-item-title::after { content: "+"; margin-left: auto; font-size: 1.4rem; line-height: 1; color: var(--owp-brand); flex-shrink: 0; } .owp-page .owp-faq details[open].e-n-accordion-item .e-n-accordion-item-title::after { content: "\2212"; } .owp-page .owp-faq .owp-faq__answer-el { padding: 0 1.35rem 1.25rem; } .owp-page .owp-faq .owp-faq__answer-el, .owp-page .owp-faq .owp-faq__answer-el p { font-size: 1.125rem; color: var(--owp-muted); line-height: 1.65; } .owp-page .owp-faq .owp-faq__answer-el p { margin: 0; } /* ---- eyebrow label as a native Text widget ---- */ .owp-page .owp-eyebrow .elementor-widget-container { display: contents; } .owp-page .owp-eyebrow p { margin: 0; } .owp-page .owp-page-hero .owp-eyebrow, .owp-page .owp-hero .owp-eyebrow { align-self: center; } /* Elementor zeroes widget spacing, so force the eyebrow-to-title gap to match code-first (abonamente). */ .owp-page .owp-page-hero .owp-eyebrow { margin-bottom: 1rem !important; } /* The HOMEPAGE hero's eyebrow no longer needs its own line: the 20px it used to force is now the TITLE widget's native top margin (Advanced > Layout > Margin), which is how the hero's other three gaps already work — every gap is the top margin of the element below it. It had to move there rather than stay a bottom margin on the eyebrow, because helpers.css carries `.owp-page .elementor-widget { margin-bottom: 0 !important }` for the whole build: no widget on any `.owp-page` can render a bottom margin, from the panel or from anywhere else. */ /* ---- guarantee icon/badge as native Text widgets (glow/blob are empty native containers) ---- */ .owp-page .owp-guarantee__icon { width: 5rem; height: 5rem; flex: 0 0 auto; } .owp-page .owp-guarantee__icon .elementor-widget-container { display: contents; } .owp-page .owp-guarantee__badge { align-self: flex-start; } .owp-page .owp-guarantee__badge .elementor-widget-container { display: contents; } .owp-page .owp-guarantee__badge p { margin: 0; } /* ===== FIXES: native-conversion regressions vs the code-first reference ===== */ /* Decorative empty containers must stay ABSOLUTE. Elementor's .e-con forces position:relative, which turned the aspect-ratio:1 hero glow into a ~1900px in-flow block that pushed the whole page down. */ .owp-page .owp-page-hero__glow { position: absolute; top: -30%; left: 50%; transform: translateX(-50%); width: min(38rem, 100%); padding: 0; } .owp-page .owp-guarantee__blob { position: absolute; right: -4rem; top: -4rem; width: 14rem; height: 14rem; padding: 0; } .owp-page .owp-hero__glow { position: absolute; } /* eyebrow pill (green dot + text) — re-assert the inline-flex layout Elementor's widget defaults clobber */ .owp-page .elementor-widget.owp-eyebrow { display: inline-flex; align-items: center; gap: .5rem; } .owp-page .owp-eyebrow .elementor-widget-container { display: contents; } /* ===== Container GAP normalization — match code-first rhythm exactly ===== Elementor gives every flex container a default gap (~16–20px) that DOUBLES with the margin-based spacing the code-first design uses (e.g. .owp-review__quote{margin-top:1rem}, .owp-step h3{margin-top:1rem}). Zero it on the margin-based containers so the code-first margins alone define the rhythm; the flex-gap containers below re-assert the exact gap value code-first uses (their base rules lose to Elementor's). */ .owp-page .owp-section, .owp-page .owp-container, .owp-page .owp-page-hero, .owp-page .owp-page-hero__inner, .owp-page .owp-head, .owp-page .owp-review, .owp-page .owp-step, .owp-page .owp-about__quotecard, .owp-page .owp-about__col, .owp-page .owp-guarantee__box, .owp-page .owp-cta-banner__inner { gap: 0; } .owp-page .owp-guarantee__inner { gap: 2rem; } .owp-page .owp-review__foot { gap: .75rem; } .owp-page .owp-about__person { gap: 1rem; } /* ===== FIX round 2 — icon/number centering, title→text spacing, FAQ width ===== */ /* Every icon or number badge was rendering its content top-left. Make the box a centering flex, fill it with the widget-container, and neutralize the wpautop

line-height + svg baseline so content centers. */ .owp-page .owp-feature__icon, .owp-page .owp-service__icon, .owp-page .owp-step__num, .owp-page .owp-guarantee__icon, .owp-page .owp-contact-card__icon, .owp-page .owp-avatar { display: inline-flex; align-items: center; justify-content: center; text-align: center; } .owp-page .owp-feature__icon > .elementor-widget-container, .owp-page .owp-service__icon > .elementor-widget-container, .owp-page .owp-step__num > .elementor-widget-container, .owp-page .owp-guarantee__icon > .elementor-widget-container, .owp-page .owp-contact-card__icon > .elementor-widget-container, .owp-page .owp-avatar > .elementor-widget-container { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; padding: 0; } .owp-page .owp-feature__icon p, .owp-page .owp-service__icon p, .owp-page .owp-step__num p, .owp-page .owp-guarantee__icon p, .owp-page .owp-contact-card__icon p, .owp-page .owp-avatar p { margin: 0; line-height: 1; display: flex; align-items: center; justify-content: center; } .owp-page .owp-feature__icon svg, .owp-page .owp-service__icon svg, .owp-page .owp-guarantee__icon svg, .owp-page .owp-contact-card__icon svg { display: block; } /* A touch more breathing room between card titles and their descriptions */ .owp-page .owp-feature__desc p { margin-top: .65rem; } .owp-page .owp-service__desc p { margin-top: .65rem; } /* FAQ nested-accordion: fill the 48rem container (stays centered) even when all items are closed */ .owp-page .owp-faq .e-n-accordion, .owp-page .owp-faq details.e-n-accordion-item, .owp-page .owp-faq .e-n-accordion-item-title { width: 100%; box-sizing: border-box; } /* ============================================================== CARD HALO — HOVER ONLY Mirror of the block at the end of the code-first theme's sections.css -- same token, same families, same exclusions. The value lives once, in tokens.css as `--owp-shadow-card-violet` (with its own lighter value under :root[data-theme="light"]); change the intensity there. The halo appears on pointer hover and is absent at rest; at rest each family keeps whatever shadow it already had (`.owp-card` its neutral `--owp-shadow-card`, everything else none). HOVER IS POINTER-ONLY: touch screens have no hover state, so on phones and tablets these cards simply never show the halo. Intended, not a regression. Why here and not in sections.css: elementor-native.css is the LAST theme sheet on this site (order: ... components -> sections -> helpers -> elementor/frontend -> elementor-native), so a rule written here lands after both the theme's own card painting and Elementor's frontend CSS. Nothing that loads after it (widget-heading, widget-icon-list, the uploads/elementor kit CSS) declares box-shadow on these elements -- verified against the served files, not assumed. Deliberate exclusions, identical to code-first: - `.owp-plan--featured` keeps its amber "recommended" glow (box-shadow does not accumulate across rules, so including it would silently replace the amber, at rest and on hover alike). - `.owp-feature:hover` / `.owp-service:hover` declare their own hover halo in sections.css at (0,2,0) and are NOT listed below, so the service cards keep their stronger lift. - Chrome/controls are not cards: header, footer, menus, cookie bar, modal, floating buttons, pricing toggle, filter/tag pills, section backgrounds. The FAQ is a native nested-accordion here (not `.owp-faq__item`), so it needs its own selector at the specificity the existing accordion rule uses. `.owp-cta-banner` (the closing "Hai sa-ti punem site-ul la punct!" band) is included by the brief: not a card, but it takes the same hover halo. It appears on most pages. */ .owp-card, .owp-step, .owp-plan:not(.owp-plan--featured), .owp-faq__item, .owp-contact-card, .owp-contact__formbox, .owp-guarantee__box, .owp-about__quotecard, .owp-article-cta, .owp-article-fig, .owp-cta-banner { transition: box-shadow .2s ease; } .owp-page .owp-faq details.e-n-accordion-item { transition: box-shadow .2s ease; } /* `.owp-review` is absent from the transition lists above and present below: its transition is declared with its base rule in sections.css so that `border-color` survives (note is there). */ .owp-card:hover, .owp-step:hover, .owp-review:hover, .owp-plan:not(.owp-plan--featured):hover, .owp-faq__item:hover, .owp-contact-card:hover, .owp-contact__formbox:hover, .owp-guarantee__box:hover, .owp-about__quotecard:hover, .owp-article-cta:hover, .owp-article-fig:hover, .owp-cta-banner:hover { box-shadow: var(--owp-shadow-card-violet); } .owp-page .owp-faq details.e-n-accordion-item:hover { box-shadow: var(--owp-shadow-card-violet); } /* ============================================================== STEP CARD INTERIOR Mirror of the block in the code-first theme's sections.css: the title and body sit BESIDE the number instead of under it. Three inherited variables drive it, set on `.owp-steps`: --owp-step-cols track list 1 track = stacked, 2 tracks = side by side --owp-step-text-col column for the text 1 = under the number, 2 = beside it --owp-step-title-gap h3 margin-top 1rem when stacked, 0 when beside (it is on row 1) The defaults ARE the stacked layout, so any width no media query opts in keeps the old look. Why at the very end of the file: `.owp-page .owp-step` appears in the "Container GAP normalization" list above with `gap: 0`, at the same (0,2,0) specificity. A `column-gap` written next to the card's padding rule (line ~173) would be reset by it; written here it wins on source order. `display` is declared here for the same reason -- one place only. Elementor's own container layout (`.elementor-element:where(.e-con-full,...)` at (0,1,0), and `.e-con` which only sets custom properties) is beaten by every selector below. */ .owp-page .owp-step { display: grid; grid-template-columns: var(--owp-step-cols, minmax(0, 1fr)); column-gap: 1rem; row-gap: 0; } .owp-page .owp-step > .owp-step__num { grid-column: 1; grid-row: 1; } .owp-page .owp-step > :not(.owp-step__num) { grid-column: var(--owp-step-text-col, 1); min-width: 0; } /* The widget right after the number is the heading; centring it in its row lines a one-line title up with the middle of the 2.5rem badge. A no-op once the title wraps, and in the stacked layout. This beats the `align-self: flex-start` that the badge rule sets on itself -- different element, no conflict -- and Elementor's `--container-widget-align-self: initial`. */ .owp-page .owp-step > .owp-step__num + * { align-self: center; } /* Side-by-side is opted into only where the text column stays readable. Measured against the 72rem container (1120px of content), the card's 1.75rem padding + 1px border, the 2.5rem number and the 1rem gap -- i.e. the text column is (card width - 114px): one column, >= 360px viewport : card 328px -> text 214px (~29 chars of 0.9rem body) two columns, >= 768px viewport : card 358px -> text 244px, growing to 436px at 1152px three columns, >=1024px viewport : card 317px -> text 203px, growing to 246px at 1152px Below those widths the stacked default stays. Three columns on a 768px tablet would leave a 118px text column (~12 characters), which is why the 3-card grids wait for 1024px; a 320px phone keeps the stack for the same reason. */ @media (min-width: 360px) and (max-width: 767.98px) { .owp-page .owp-steps { --owp-step-cols: auto minmax(0, 1fr); --owp-step-text-col: 2; --owp-step-title-gap: 0; } } @media (min-width: 768px) { .owp-page .owp-steps:has(> :nth-child(4):last-child) { --owp-step-cols: auto minmax(0, 1fr); --owp-step-text-col: 2; --owp-step-title-gap: 0; } } @media (min-width: 1024px) { .owp-page .owp-steps { --owp-step-cols: auto minmax(0, 1fr); --owp-step-text-col: 2; --owp-step-title-gap: 0; } } /* The 1rem that separates a stacked number from its title lives on the h3's margin-top (sections.css `.owp-step h3`). Restated at (0,3,1) so the variable can zero it when the title moves onto row 1 -- and so no later Elementor sheet can reintroduce a margin here. */ .owp-page .owp-step h3.elementor-heading-title { margin-top: var(--owp-step-title-gap, 1rem); } /* ================================================================================== SECTION HEADS REBUILT AS NATIVE WIDGETS The score sections, the two form boxes and the About trust note used to be raw HTML with their sizing and alignment written inline on the element. Their heads are now `.owp-head` containers holding a real Heading widget, so the look comes from here. Only the interactive bodies (score rings, contact forms) are still raw markup. ================================================================================== */ /* Left-aligned head. `.owp-head--left` is defined in sections.css at (0,1,0) and loses to the centering block near the top of this file; restated at matching specificity, later in source order, so the modifier actually wins. Used by the About/Despre trust note (which has no title and was left-aligned before the rebuild) and by the two contact form boxes. */ .owp-page .owp-head--left { margin-inline: 0; text-align: left; } .owp-page .owp-head--left .elementor-widget-heading, .owp-page .owp-head--left .elementor-heading-title, .owp-page .owp-head--left .elementor-widget-text-editor { text-align: left; } /* The form box is a container now, so Elementor's 10px `.e-con` padding and its 20px widget gap have to be overridden with the values sections.css already declares for the box. */ .owp-page .owp-contact__formbox { padding: clamp(1.5rem, 3vw, 2.25rem); gap: 0; } /* Form-box head: a smaller title and a tighter subtitle than a page section head. These two values used to live in `style="font-size:1.5rem"` / `style="margin-top:.5rem"` on the raw elements; they belong in the sheet. Written at (0,4,0)/(0,3,0) so they beat the generic `.owp-page .owp-head ...` title rule regardless of source order. */ .owp-page .owp-contact__formbox .owp-head .elementor-heading-title, .owp-page .owp-contact__formbox .owp-head__title { font-size: 1.625rem; } .owp-page .owp-contact__formbox .owp-head__subtitle { margin-top: .5rem; } /* Two modifiers that replace inline styles on the audit-page form section: it butts straight against the section above it, and its container is narrower than the 72rem default. */ .owp-page .owp-section--flush-top { padding-top: 0; } .owp-page .owp-container--narrow { max-width: 40rem; } /* ============================================================================================== ROUND: nine screen-review defects. Everything below exists because a rule that reads correctly in sections.css is silently outranked on this build. The load order on every page is: inline element CSS -> block-library -> fonts,tokens,base,components,sections,helpers -> elementor/frontend.min.css -> THIS FILE -> widget-heading, widget-icon-list -> kit CSS. So a rule here beats frontend.min.css at equal specificity, and the two widget sheets and the kit sheet that follow were checked against the served files: neither declares any of the properties below on any of these selectors. ============================================================================================== */ /* -- 3. Horizontal scrollbar below 1024px ------------------------------------------------------ The violet blob in the guarantee box is `right:-4rem; top:-4rem`, i.e. 64px outside the box on two sides, and sections.css clips it with `.owp-guarantee__box{overflow:hidden}` -- (0,1,0). Elementor's `.e-con{overflow:var(--overflow)}` with `--overflow:visible` is ALSO (0,1,0) and prints later, so on this build the clip never applied and the blob pushed 64px past the right edge of the container. Below 1024px the container has only ~16px of side padding to absorb it, so the document itself grew wider than the viewport and every page carrying the box slid sideways. Restated at (0,2,0), and the custom property is set too so the value survives even if the shorthand is ever taken over by an element setting from the editor. */ .owp-page .owp-guarantee__box { overflow: hidden; --overflow: hidden; } /* -- 5. Guarantee box: centre the icon + copy pair -------------------------------------------- The copy beside the shield icon is a nested container, and `.e-con{width:var(--width)}` gives every container `width:100%` -- so the copy column always fills whatever is left of the row and `justify-content` on its own has nothing to distribute. Capping the ROW at 52rem is what actually balances the box: 832px, the same optical column the subtitles and lead-ins use, with the paragraph's own 44rem measure sitting comfortably inside it. */ .owp-page .owp-guarantee__inner { max-width: 52rem; margin-inline: auto; } @media (min-width: 768px) { .owp-page .owp-guarantee__inner { justify-content: center; } } /* -- 4. Prose measures ------------------------------------------------------------------------- Section subtitles and money-page lead-ins are TEXT WIDGETS on this build, and Elementor's `.elementor.elementor .e-con>.elementor-widget{max-width:100%}` is (0,4,0) -- it beats any plain class rule in sections.css no matter what that rule says. These two are written at (0,5,0) and (0,5,1) so the measures actually apply, and they carry `margin-inline:auto` so the capped block stays centred in its container instead of hugging the left edge. The `:not(:has())` guard on the lead-in mirrors sections.css: only a prose block that is nothing but paragraphs is a lead-in; the legal documents (which are raw HTML here, not widgets) keep the 46rem document measure. */ .owp-page .elementor .e-con > .elementor-widget.owp-head__subtitle { max-width: 52rem; margin-inline: auto; } /* Lead-in width, client decision 18 August 2026: the intro paragraph block on the money pages (and /despre/) is capped at 85 CHARACTERS PER LINE. It was 54rem/864px until 16 August, then the full 1120px of its container (~129 characters), which is what this line said. The measure itself -- how 85 characters becomes 738px, and why it is written as a multiple of the paragraph size rather than a flat length -- is derived in sections.css on `.owp-prose`; `--owp-prose-measure` is declared there, on this very element, so it resolves here with no duplication. `margin-inline:auto` keeps the narrower block centred in the 1120px container. The legal documents are raw HTML, not widgets, so they are untouched and keep 46rem. */ .owp-page .elementor .e-con > .elementor-widget.owp-prose:not(:has(:is(h1, h2, h3, h4, h5, h6, ul, ol, table, dl))) { max-width: var(--owp-prose-measure); margin-inline: auto; } /* -- 8. Service checklists start at the same height -------------------------------------------- The service card is a flex column and the cards in a grid row are all the same height, so pushing the tick list to the bottom of the card lines every list up: each card carries exactly four ticks, so equal bottoms mean equal tops. `margin-top:auto` on the list widget takes the leftover height; the 1.25rem gap above the divider lives on the