/*
Theme Name: Blocksy Child — Reclamații Bănci
Theme URI: https://www.reclamatiibanci.ro
Description: Child theme for Reclamații Bănci. Adds an admin-editable top banner slot, a tag block and a newsletter slot, styled to match ghiseulbancar.ro.
Author: Dehalo
Template: blocksy
Version: 1.11.0
Text Domain: blocksy-child
*/
/* =========================================================================
TOKENS
Retune here, not further down. Values inherit from Blocksy's palette where
possible so the theme's own colour settings still drive the site.
====================================================================== */
:root {
--rb-accent: var(--theme-palette-color-1, #2563eb);
--rb-ink: var(--theme-headings-color, #12172a);
--rb-muted: #5b6478;
--rb-hairline: #e6e9ef;
/* Green CTA — sample the exact value from the header PSD. */
--rb-green: #16a34a;
--rb-green-dark: #15803d;
/* Card / content surfaces — stay white. */
--rb-surface: #ffffff;
/* Inset panels sitting ON a white card (newsletter box, tag pills). */
--rb-surface-alt: #f5f7fa;
/* Page background BEHIND the white cards. Set this darker than
--rb-surface-alt or the article cards lose their edge.
Client specified #ededed (round 2, point 1). */
--rb-page: #ededed;
--rb-radius: 8px;
--rb-radius-lg: 12px;
--rb-gap: 14px;
--rb-block-space: 40px;
}
/* =========================================================================
PAGE BACKGROUND
====================================================================== */
body {
background-color: var(--rb-page);
}
/* Round 2, point 3: "round corners to the big boxes also (same with the
right column)". 12px matches the sidebar widget radius.
overflow:hidden clips the featured image to the card corner. If it crops
something you need, drop it and round the image separately instead:
.entries .ct-media-container img { border-radius: var(--rb-radius-lg); } */
.entries [class*="entry-card"],
.entries article,
.search-results [class*="entry-card"],
.search-results article {
background-color: var(--rb-surface);
border-radius: var(--rb-radius-lg);
overflow: hidden;
}
/* =========================================================================
HEADER
Matches reclamatii-head.jpg / the supplied PSD.
STRUCTURE — Blocksy header builder, middle row:
Start zone — Logo (site title only, no image)
Middle zone — HTML element, Stretch Container ON, holding .rb-header
End zone — empty, hidden by CSS below
Everything except the wordmark lives inside the single HTML element,
because Blocksy only allows one instance of each element type per header
and the design needs a real search input rather than the icon element.
====================================================================== */
.site-branding {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}
/* Header padding */
#header .ct-container {
padding: 20px 0;
}
/* Let the middle zone take all remaining width. The end zone is unused in
this design, so the grid only needs two tracks — and the empty third
child has to be removed or it wraps to a second row.
The #header.ct-header prefix (1,3,0) out-specifies Blocksy's inline
rules, which would otherwise win on load order.
NOTE: this targets the desktop header. Blocksy renders a separate
[data-device="mobile"] header — configure that under the
"Tablet / Mobile Header" tab in the builder. */
#header.ct-header [data-row="middle"] .ct-container {
grid-template-columns: auto minmax(0, 1fr);
}
#header.ct-header [data-row="middle"] [data-column="end"] {
display: none;
}
/* Outer flex row — intro left, actions right */
.rb-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
width: 100%;
}
.rb-header__actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
}
/* Intro block — photo + strapline */
.rb-intro {
display: flex;
align-items: center;
gap: 18px;
}
/* Round 6: "man image is distorsed, make it displayed 1:1".
The extra selectors catch the photo even if the header HTML element holds a
bare ![]()
without the class. aspect-ratio + equal width/height + cover
guarantee a square crop regardless of the source file's proportions —
object-fit:cover is what stops the stretch. */
.rb-intro__photo,
.rb-intro__link img,
.rb-intro > img {
flex: 0 0 auto;
width: 120px;
height: 120px;
aspect-ratio: 1 / 1;
border-radius: 50%;
object-fit: cover;
object-position: center;
min-width: 120px;
}
.rb-intro__text {
margin: 0;
font-size: 20px;
font-weight: 500;
line-height: 1.5;
color: var(--rb-accent);
}
.rb-intro__text strong {
font-weight: 600;
}
/* Green CTA — "Adauga intrebarea ta" */
.rb-cta-green,
.rb-cta-green a,
a.rb-cta-green {
display: inline-block;
padding: 12px 24px;
background: var(--rb-green);
border: 0;
border-radius: 6px;
color: #fff;
font-size: 15px;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
transition: background-color 0.18s ease;
}
.rb-cta-green:hover,
.rb-cta-green a:hover,
a.rb-cta-green:hover {
background: var(--rb-green-dark);
color: #fff;
}
/* Search — underline only, per the PSD. No box, no fill.
The !important flags from the Additional CSS version are gone: they were
only needed to beat the old .ct-header form[role="search"] rule, which
has been removed. */
.rb-search {
display: flex;
align-items: center;
min-width: 230px;
padding: 0 5px;
border: 0;
border-bottom: 1px solid #d9dee6;
border-radius: 0;
background: none;
}
.rb-search input[type="search"] {
flex: 1;
padding: 9px 0;
border: 0;
background: none;
font-size: 14px;
outline: none;
}
.rb-search button {
padding: 4px;
border: 0;
background: none;
color: var(--rb-muted);
cursor: pointer;
line-height: 0;
}
/* -------------------------------------------------------------------------
RESPONSIVE
The PSD is desktop-only, so this is my default, not the client's decision.
Below 780px the photo and strapline are hidden and the CTA sits beside the
search. Send them a phone screenshot before signing this off.
---------------------------------------------------------------------- */
/* =========================================================================
BANNERS
Only the sitewide top banner is theme-rendered. Sidebar banners are
ordinary Custom HTML widgets dragged into Blocksy's own sidebar.
====================================================================== */
.rb-banner {
margin: 0 0 var(--rb-block-space);
}
.rb-banner img {
display: block;
max-width: 100%;
height: auto;
border-radius: var(--rb-radius);
}
.rb-banner a {
display: block;
text-decoration: none;
}
.rb-banner--top {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
min-height: 150px;
margin-top: 60px;
margin-bottom: 0;
}
.rb-banner--top img {
margin-inline: auto;
}
/* Round 6: desktop vs mobile top banner. These toggle classes only exist when
BOTH banner slots are filled (see section 3 of functions.php); a solo banner
ships with the plain .rb-banner--top class and shows at every width. Keep
this 780px in step with the header breakpoint below. */
.rb-banner--mobile {
display: none;
}
@media (max-width: 780px) {
.rb-banner--desktop {
display: none;
}
.rb-banner--mobile {
display: block;
width: 100%;
}
.rb-banner--top {
margin-top: 0;
}
.rb-banner--top img {
width: 100%;
}
}
.rb-banner iframe {
max-width: 100%;
}
#sidebar .rb-widget img,
#sidebar .widget_custom_html img {
display: block;
width: 100%;
height: auto;
border-radius: var(--rb-radius);
}
/* =========================================================================
TAGS ("Taguri:")
====================================================================== */
.rb-tags {
margin: var(--rb-block-space) 0 0;
padding-top: 22px;
border-top: 1px solid var(--rb-hairline);
}
.rb-tags__title {
margin: 0 0 12px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--rb-ink);
}
.rb-tags__list {
display: flex;
flex-wrap: wrap;
gap: var(--rb-gap);
margin: 0;
padding: 0;
list-style: none;
}
.rb-tags__list li {
margin: 0;
}
.rb-tags__list a {
display: inline-block;
padding: 5px 12px;
border: 1px solid var(--rb-hairline);
border-radius: 999px;
background: var(--rb-surface-alt);
color: var(--rb-muted);
font-size: 13px;
line-height: 1.4;
text-decoration: none;
transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.rb-tags__list a:hover,
.rb-tags__list a:focus-visible {
background: var(--rb-accent);
border-color: var(--rb-accent);
color: #fff;
}
/* =========================================================================
NEWSLETTER
Container only — the form itself comes from the MC4WP widget.
====================================================================== */
.rb-newsletter {
margin: var(--rb-block-space) 0;
padding: 28px;
border: 1px solid var(--rb-hairline);
border-radius: var(--rb-radius);
background: var(--rb-surface-alt);
}
.rb-newsletter .rb-widget__title {
margin: 0 0 6px;
font-size: 20px;
font-weight: 600;
color: var(--rb-ink);
}
.rb-newsletter input[type="email"],
.rb-newsletter input[type="text"] {
width: 100%;
padding: 11px 14px;
border: 1px solid var(--rb-hairline);
border-radius: 6px;
background: var(--rb-surface);
font-size: 15px;
}
.rb-newsletter .rb-nl__row p {
display: block;
width: 100%;
}
.rb-newsletter input[type="submit"],
.rb-newsletter button[type="submit"] {
margin-top: 10px;
padding: 11px 22px;
border: 0;
border-radius: 6px;
background: var(--rb-accent);
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
margin-top: 10px !important;
}
@media (min-width: 600px) {
.rb-newsletter form {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: flex-start;
}
.rb-newsletter form > * {
flex: 1 1 220px;
}
.rb-newsletter input[type="submit"],
.rb-newsletter button[type="submit"] {
flex: 0 0 auto;
margin-top: 0;
}
}
/* -------------------------------------------------------------------------
NEWSLETTER — Contact Form 7 variant (client request, round 7)
The newsletter block is now a CF7 form so its submissions can be piped to
the mailing platform. CF7 emits ;
the input and submit styling above already applies (CF7 uses real
/ ). These rules only handle the
CF7-specific wrappers and OVERRIDE the generic ".rb-newsletter form" flex
above, so the heading and intro aren't dragged into the input row.
---------------------------------------------------------------------- */
.rb-newsletter .wpcf7 form {
display: block;
}
.rb-nl__title {
margin: 0 0 6px;
font-size: 20px;
font-weight: 600;
color: var(--rb-ink);
}
.rb-nl__intro {
margin: 0 0 16px;
color: var(--rb-muted);
line-height: 1.5;
}
/* The input + button row. CF7 wraps each control in
.wpcf7-form-control-wrap, so the flex targets that, not the input. */
.rb-newsletter .rb-nl__row {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: flex-start;
}
.rb-newsletter .rb-nl__row .wpcf7-form-control-wrap {
flex: 1 1 220px;
}
.rb-newsletter .rb-nl__row input[type="submit"] {
flex: 0 0 auto;
margin-top: 0;
}
/* Inline validation + the "message sent" / error line CF7 prints. */
.rb-newsletter .wpcf7-not-valid-tip {
margin-top: 6px;
font-size: 13px;
color: #dc2626;
}
.rb-newsletter .wpcf7-not-valid {
border-color: #dc2626;
}
.rb-newsletter .wpcf7-response-output {
margin: 14px 0 0;
padding: 8px 12px;
border-radius: 6px;
font-size: 14px;
}
/* CF7's AJAX spinner sits inline next to the button. */
.rb-newsletter .wpcf7-spinner {
margin: 0 0 0 8px;
}
/* =========================================================================
ARTICLE CARD IMAGES (homepage / archives)
SHIPPED AS: Image Ratio = Original + object-fit: contain.
Nothing crops; the image sizes to its own proportions.
Two things here are load-bearing:
1. The two-class selector (0,3,1). Blocksy prints `object-fit: cover` from
inline CSS in , which beats an equally specific rule from an
enqueued stylesheet regardless of load order.
2. `height: auto`. `height: 100%` forces the media column to stretch to
the text column and produces a letterboxed 332x487 box.
Column WIDTH is Blocksy's, not ours:
Customize → Blog Posts → Card Options → Featured Image → Image Width.
====================================================================== */
.entries article .ct-media-container img,
.entries .entry-card .ct-media-container img {
width: 100%;
height: auto;
object-fit: contain;
object-position: center;
/* Round 6: round the thumbnail to match the card ("like the right
column"). --rb-radius-lg is the card's own 12px. */
border-radius: var(--rb-radius-lg);
}
.entries .ct-media-container {
background-color: var(--rb-surface);
/* Round 6: inset the thumbnail so it no longer bleeds to the card edge
("leave a padding ... of the images"). Padding is on all four sides so
the rounded corners read evenly; the card surface (white, same as this
background) shows through the inset. Reduce to `padding-left` alone if
the client only wants the left gap. */
padding: 16px;
}
/* Round 2, point 4: client marked the button at roughly double its
previous footprint. */
.entries .ct-button,
.entries .wp-element-button {
padding: 15px 32px;
font-size: 16px;
font-weight: 600;
border-radius: 6px;
}
/* =========================================================================
SIDEBAR
Sidebar WIDTH is a Customizer setting: Customize → Sidebar → Sidebar Width.
Post thumbnails are switched off in the Posts block's own settings.
====================================================================== */
#sidebar .ct-sidebar {
font-family: 'Inter', system-ui, sans-serif;
}
#sidebar .ct-widget {
margin-bottom: 32px;
padding: 20px;
background: var(--rb-surface);
border: 1px solid #eef0f3;
border-radius: var(--rb-radius-lg);
}
#sidebar .wp-block-heading {
font-size: 16px !important;
font-weight: 600;
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 2px solid #f0f2f5;
color: #1a1a2e;
}
#sidebar .ct-search-form-inner {
border-radius: var(--rb-radius);
border: 1px solid #e2e5ea;
}
#sidebar .wp-block-post {
padding-bottom: 14px;
margin-bottom: 14px;
border-bottom: 1px solid #f2f2f2;
}
#sidebar .wp-block-post:last-child {
border-bottom: 0;
margin: 0;
padding: 0;
}
#sidebar .wp-block-post h2 a {
color: #1a1a2e;
transition: color 0.2s;
}
#sidebar .wp-block-post h2 a:hover {
color: var(--rb-accent);
}
#sidebar .ct-dynamic-media img {
border-radius: var(--rb-radius);
}
/* -------------------------------------------------------------------------
CATEGORY LIST
Interim only. The real fix is reducing ~700 categories to a curated list —
this caps the visual height but the links still ship in the HTML on every
page. A scrollable region also needs tabindex="0" (WCAG 2.1.1).
---------------------------------------------------------------------- */
#sidebar .wp-block-categories {
max-height: 320px;
overflow-y: auto;
padding-right: 8px;
}
#sidebar .wp-block-categories li {
padding: 4px 0;
font-size: 14px;
border-bottom: 1px solid #f4f5f7;
}
#sidebar .wp-block-categories li:last-child {
border-bottom: 0;
}
/* =========================================================================
SHARE BUTTONS (AddToAny)
The card share row is pinned bottom-right, so .card-content must stay
positioned. These two rules depend on each other.
====================================================================== */
.card-content {
position: relative;
}
.addtoany_header {
margin:0;
}
a.a2a_dd.addtoany_share_save.addtoany_share {
display: none;
}
.addtoany_share_save_container {
margin: 18px 0 0;
}
/* =========================================================================
BLOCK CONTENT
====================================================================== */
figure.wp-block-pullquote.has-palette-color-8-color.has-palette-color-1-background-color.has-text-color.has-background {
padding: 50px;
}
/* =========================================================================
SINGLE POST
PREREQUISITE — not a CSS job:
Customize → General → Content Area Style → Boxed
====================================================================== */
.single .entry-header .ct-meta-element,
.single .entry-header .post-meta {
font-size: 13px;
letter-spacing: 0.02em;
}
.single .entry-header .post-meta + .post-meta {
margin-top: 6px;
line-height: 1.6;
}
/* -------------------------------------------------------------------------
Comments — core WordPress classes, so they survive theme updates.
---------------------------------------------------------------------- */
#comments,
.comment-respond {
margin-top: var(--rb-block-space);
padding: 32px;
background: var(--rb-surface);
border: 1px solid var(--rb-hairline);
border-radius: var(--rb-radius-lg);
}
#comments .comment-respond {
margin-top: 24px;
padding: 0;
background: none;
border: 0;
border-radius: 0;
}
.comment-reply-title,
#comments > .ct-module-title {
margin: 0 0 8px;
font-size: 20px;
font-weight: 600;
color: var(--rb-ink);
}
.comment-notes,
.logged-in-as {
margin: 0 0 24px;
font-size: 14px;
color: var(--rb-muted);
}
.comment-form label {
display: block;
margin-bottom: 6px;
font-size: 14px;
font-weight: 600;
color: var(--rb-ink);
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
width: 100%;
padding: 11px 14px;
background: var(--rb-surface);
border: 1px solid #d9dee6;
border-radius: 6px;
font-size: 15px;
line-height: 1.5;
color: var(--rb-ink);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
border-color: var(--rb-accent);
box-shadow: 0 0 0 3px rgb(37 99 235 / 0.12);
outline: none;
}
.comment-form textarea {
min-height: 160px;
resize: vertical;
}
.comment-form p {
margin-bottom: 20px;
}
.comment-form .cf7-captcha,
.comment-form [class*="captcha"] input[type="text"],
.comment-form [class*="captcha"] input[type="number"] {
display: inline-block;
width: 90px;
margin-right: 10px;
text-align: center;
vertical-align: middle;
}
.comment-form #submit,
.comment-form input[type="submit"] {
padding: 12px 26px;
background: var(--rb-accent);
border: 0;
border-radius: 6px;
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: opacity 0.18s ease;
}
.comment-form #submit:hover,
.comment-form input[type="submit"]:hover {
opacity: 0.9;
}
.comment-list {
margin: 0 0 32px;
padding: 0;
list-style: none;
}
.comment-list .comment-body {
padding: 20px 0;
border-bottom: 1px solid var(--rb-hairline);
}
.comment-list > li:last-child > .comment-body {
border-bottom: 0;
}
.comment-list .children {
margin-left: 28px;
padding-left: 20px;
border-left: 2px solid var(--rb-hairline);
list-style: none;
}
.comment-author .fn {
font-weight: 600;
color: var(--rb-ink);
}
.comment-metadata,
.comment-metadata a {
font-size: 13px;
color: var(--rb-muted);
text-decoration: none;
}
.comment-content {
margin-top: 8px;
line-height: 1.65;
}
.reply a {
display: inline-block;
margin-top: 8px;
font-size: 13px;
font-weight: 600;
color: var(--rb-accent);
text-decoration: none;
}
/* =========================================================================
BASELINE
====================================================================== */
/* :is() rather than :where() — :where() has zero specificity, so a focus ring
written with it loses to every themed link and button on the site. */
:is(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--rb-accent);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.rb-tags__list a {
transition: none;
}
}
/* =========================================================================
QUARANTINE — VERIFY BEFORE KEEPING
Carried over from Additional CSS. Both blocks below are unscoped and their
purpose isn't determinable from the CSS alone.
====================================================================== */
/* -------------------------------------------------------------------------
1. ELEMENTOR — "about us page"
Elementor does not appear in the plugin list on this install. If it isn't
active, these rules match nothing and should be deleted outright.
---------------------------------------------------------------------- */
.ct-custom.elementor-widget-image-box,
.ct-custom .elementor-widget-container {
height: 100%;
}
.ct-custom .elementor-widget-container {
overflow: hidden;
}
.ct-custom .elementor-image-box-content {
padding: 0 30px;
}
/* -------------------------------------------------------------------------
2. COLUMN BLOCK OVERRIDES — highest-risk rules in this file.
These hide the FIRST COLUMN of every flow-layout columns block on the
entire site, and force any vertically-centred column to full width. They
were almost certainly written for one specific page, and will silently
break the next two-column Gutenberg layout anyone builds.
Fix: scope to the page's body class, e.g.
.page-id-123 .wp-block-column:first-child { display: none; }
then delete the unscoped versions below.
---------------------------------------------------------------------- */
.wp-block-column.is-layout-flow.wp-block-column-is-layout-flow:first-child {
display: none;
}
.wp-block-column.is-vertically-aligned-center.is-layout-flow.wp-block-column-is-layout-flow {
flex-basis: 100% !important;
}
.card-content {
position: relative;
}
.addtoany_share_save_container.addtoany_content.addtoany_content_bottom {
position: absolute;
bottom: -15px;
right: 0;
display: flex;
gap:10px;
}
.entries .addtoany_share_save_container {
text-align: left;
}
/* =========================================================================
WPFORMS — /adauga-o-intrebare/
Append to style.css, above the QUARANTINE section.
Uses WPForms' own classes rather than the form ID, so this survives the
form being rebuilt or duplicated.
====================================================================== */
.wpforms-container {
max-width: 100%;
margin-inline: 0;
}
/* Field spacing */
.wpforms-container .wpforms-field {
padding: 0 0 22px;
}
/* Labels */
.wpforms-container .wpforms-field-label {
display: block;
margin-bottom: 6px;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: var(--rb-ink);
}
.wpforms-container .wpforms-required-label {
color: #d0342c;
font-weight: 400;
}
/* Inputs — matches the comment form so the whole site reads as one system */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="url"],
.wpforms-container input[type="tel"],
.wpforms-container select,
.wpforms-container textarea,
.wpforms-container input[type="number"] {
width: 100%;
max-width: 100%;
padding: 11px 14px;
background: var(--rb-surface);
border: 1px solid #d9dee6;
border-radius: 6px;
font-size: 15px;
line-height: 1.5;
color: var(--rb-ink);
box-shadow: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.wpforms-container input[type="text"]:focus,
.wpforms-container input[type="email"]:focus,
.wpforms-container input[type="url"]:focus,
.wpforms-container input[type="tel"]:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
border-color: var(--rb-accent);
box-shadow: 0 0 0 3px rgb(37 99 235 / 0.12);
outline: none;
}
.wpforms-container textarea {
min-height: 200px;
resize: vertical;
}
/* Submit — same shape as the archive "Citeste raspunsul" button */
.wpforms-container button[type="submit"],
.wpforms-container .wpforms-submit {
padding: 15px 32px;
background: var(--rb-accent);
border: 0;
border-radius: 6px;
color: #fff;
font-size: 16px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: opacity 0.18s ease;
}
.wpforms-container button[type="submit"]:hover,
.wpforms-container .wpforms-submit:hover {
background: var(--rb-accent);
opacity: 0.9;
}
.wpforms-container .wpforms-submit-container {
padding-top: 4px;
}
/* Validation */
.wpforms-container label.wpforms-error {
margin-top: 6px;
font-size: 13px;
color: #d0342c;
}
.wpforms-container input.wpforms-error,
.wpforms-container textarea.wpforms-error {
border-color: #d0342c;
}
/* Confirmation message after submit */
.wpforms-confirmation-container-full {
padding: 20px 24px;
background: var(--rb-surface-alt);
border: 1px solid var(--rb-hairline);
border-radius: var(--rb-radius);
color: var(--rb-ink);
}
/* reCAPTCHA — breathing room once the keys are in */
.wpforms-container .wpforms-recaptcha-container {
padding-bottom: 22px;
}
.single .post {
background: #fff;
border-radius: 6px;
padding: 20px;
height: fit-content;
}
.single .post .entry-header {
max-width: 100%;
}
/* -------------------------------------------------------------------------
The share row doesn't belong on a form page. Uncomment if the client
agrees — or better, untick "Display at the bottom of pages" in
Settings → AddToAny, which fixes it without CSS.
.page .addtoany_share_save_container {
display: none;
}
---------------------------------------------------------------------- */
.hero-section.is-width-constrained > header {
max-width: 640px;
margin: 0 auto;
}
.site-title > a:hover {
color: unset;
}
@media (max-width:1000px) {
.rb-banner--top {
min-height: 50px
}
.site-title {
font-size: 24px;
}
#header.ct-header [data-row="middle"] [data-column="end"] {
display: block;
min-width: unset;
}
#header [data-column-set="2"]>div {
display: flex;
flex-direction: column;
}
#header.ct-header [data-row="middle"] .ct-container {
width: 100%;
padding: 20px 20px;
}
.rb-intro__text br {
display: none;
}
.rb-intro__text {
display: flex;
flex-direction: column;
}
.rb-intro__text strong {
display: block;
}
a.rb-cta-green {
width: fit-content;
}
.rb-intro__photo {
width: 84px;
height: 84px;
}
.rb-intro__text {
font-size: 20px;
}
.rb-search {
min-width: 180px;
}
}
@media (max-width: 780px) {
.rb-intro {
display: flex;
}
#header.ct-header [data-row="middle"] .ct-container {
display: block;
}
.ct-header-text {
margin: 0 !important;
}
/* Round 6: stack the whole header on phones to match the mockup —
intro row (photo + strapline), then a full-width green CTA, then the
underline search on its own row. */
.rb-header {
flex-direction: column;
align-items: stretch;
gap: 16px;
}
.rb-header__actions {
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 12px;
}
a.rb-cta-green {
display: block;
width: 100%;
text-align: center;
}
.rb-search {
width: 100%;
min-width: 0;
}
}
@media (max-width:576px) {
.rb-banner--top {
min-height: 50px
margin-top:0;
}
html {
padding-top: 0 !important;
}
a.rb-cta-green {
display: block;
width: calc(100% - 40px);
text-align: center;
position: absolute;
bottom: 70px;
left: 20px;
}
.rb-header__actions {
margin-top: 50px;
}
.site-title {
font-size: 32px;
}
}
.wprm-wrapper,
#wprmenu_bar {
display: none !important;
}
body.cbp-spmenu-push,
body.admin-bar.cbp-spmenu-push {
padding-top: 0 !important;
}
a.rb-cta-green {
margin-top: 10px;
}
/* -------------------------------------------------------------------------
CATEGORIES + TAGS BELOW THE ARTICLE
Both groups sit inside the existing .rb-tags shell, so there is one
hairline and one top margin for the pair, not two.
---------------------------------------------------------------------- */
.rb-terms__group + .rb-terms__group {
margin-top: 22px;
}
/* Categories are the coarser taxonomy — outlined, so tags stay the louder of
the two. Swap the fills if the client wants the emphasis reversed. */
.rb-tags__list--cats a {
background: transparent;
border-color: #cfd6e2;
color: var(--rb-ink);
font-weight: 500;
}
.rb-tags__list--cats a:hover,
.rb-tags__list--cats a:focus-visible {
background: var(--rb-accent);
border-color: var(--rb-accent);
color: #fff;
}
/* =========================================================================
READER QUESTION + "RASPUNS" HEADING (single posts)
Prepended to the_content by section 4b of functions.php. Only exists on
posts carrying the ACF `intrebare` field — news articles have neither.
====================================================================== */
.rb-question {
margin: 0 0 28px;
}
/* The field already contains its own quote marks, so nothing is added here.
Italic + muted colour separate the reader's words from Vasile's answer
without using a blockquote, which would inherit Blocksy's quote styling
and fight the theme. */
.rb-question p {
margin: 0 0 14px;
font-style: italic;
color: var(--rb-muted);
}
.rb-question p:last-child {
margin-bottom: 0;
}
.rb-answer-heading {
margin: 0 0 18px;
color: var(--rb-green);
font-size: 26px;
line-height: 1.25;
}
.comment-form-cookies-consent {
display: flex;
margin-bottom:10px;
}
.comment-form p {
margin-bottom:10px;
}
.search-results .entry-header .page-title {
text-align: center;
}
/* =========================================================================
SEARCH — NO RESULTS
Renders only when a search returns nothing (`.ct-no-results`). Blocksy's
own markup, so verify the class names in devtools if the theme updates.
`.hero-section.is-width-constrained` belongs to this state — it was the
unexplained rule in QUARANTINE. The 640px cap is redundant now that the
panel itself is capped, so it can be deleted from there.
====================================================================== */
.ct-no-results {
max-width: 720px;
margin: 0 auto;
padding: 48px 40px 52px;
background: var(--rb-surface);
border-radius: var(--rb-radius-lg);
text-align: center;
}
.ct-no-results .hero-section,
.ct-no-results .entry-header {
margin: 0;
padding: 0;
}
.ct-no-results .page-title {
margin: 0 0 12px;
color: var(--rb-ink);
font-size: 28px;
line-height: 1.25;
}
.ct-no-results .page-description {
margin: 0;
color: var(--rb-muted);
font-size: 16px;
line-height: 1.6;
}
/* Blocksy ships this with .ct-hidden-sm, which hides the only explanatory
text on phones and leaves a bare heading and an input. Put it back. */
.ct-no-results .page-description.ct-hidden-sm {
display: block;
}
/* -------------------------------------------------------------------------
Search form. Blocksy styles .ct-pseudo-input inline in , so these
need the .ct-no-results prefix to out-specify it — don't reach for
!important here.
---------------------------------------------------------------------- */
.ct-no-results .entry-content {
margin-top: 28px;
}
.ct-no-results .ct-search-form {
max-width: 420px;
margin: 0 auto;
}
.ct-no-results .ct-search-form .ct-search-form-inner {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 4px 4px 18px;
background: var(--rb-surface-alt);
border: 1px solid var(--rb-hairline);
border-radius: 999px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
/* Focus ring on the wrapper, not the input — the input's own outline is
removed below, so without this there is no visible focus state at all. */
.ct-no-results .ct-search-form .ct-search-form-inner:focus-within {
border-color: var(--rb-accent);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.ct-no-results .ct-search-form input[type="search"] {
flex: 1 1 auto;
min-width: 0;
padding: 10px 0;
border: 0;
background: transparent;
color: var(--rb-ink);
font-size: 15px;
line-height: 1.4;
}
.ct-no-results .ct-search-form input[type="search"]:focus {
outline: none;
box-shadow: none;
}
.ct-no-results .ct-search-form button[type="submit"] {
display: inline-flex;
flex: 0 0 40px;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
right:-4px;
border: 0;
border-radius: 999px;
background: var(--rb-green);
color: #fff;
cursor: pointer;
transition: background-color 0.18s ease;
}
.ct-no-results .ct-search-form button[type="submit"]:hover {
background: var(--rb-green-dark);
}
.ct-no-results .ct-search-form .ct-icon {
fill: currentColor;
}
@media (max-width: 600px) {
.ct-no-results {
padding: 32px 20px 36px;
}
.ct-no-results .page-title {
font-size: 22px;
}
}
/* =========================================================================
COMMENTS (moved into the content column — see section 5b)
====================================================================== */
.rb-comments {
margin-top: var(--rb-block-space);
}
/* Blocksy's own instance is full-bleed because it sits outside the grid.
Ours is inside it, so the width constraint it carries is unnecessary and
would fight the column. */
.rb-comments,
.rb-comments .ct-container {
width: 100%;
max-width: none;
margin-inline: 0;
padding-inline: 0;
}
/* -------------------------------------------------------------------------
Header photo now links to the homepage (client feedback, round 3).
line-height:0 stops the anchor's inline box adding a few px under the img.
---------------------------------------------------------------------- */
.rb-intro__link {
display: block;
line-height: 0;
}
/* -------------------------------------------------------------------------
CARD META ROW 1 — Categoria + Etichete on separate rows
Blocksy renders both as inside one
, display:inline-block with a 9px
gap, so they run together on a wrapped line.
data-id="meta_1" is Blocksy's identifier for the FIRST meta row; meta_2 is
the date/comments row and must stay inline. Blocksy renumbers these when
meta rows are added or removed in Card Options — re-check in devtools if
the card meta is ever rebuilt.
The slash divider between them is turned off per card panel at
Card Options → Post Meta (first one) → Items Divider → none. That is a
separate setting on Blog Posts, Search Page, Categories and Author Page —
Blocksy does not share it. This CSS covers all of them at once.
---------------------------------------------------------------------- */
.entries .entry-meta[data-id="meta_1"] > li.meta-categories {
display: block;
/* Blocksy sets 9px via .entry-meta li:not(:last-of-type); pointless once
these are block-level. */
margin-inline-end: 0;
}
.entries .entry-meta[data-id="meta_1"] > li.meta-categories + li.meta-categories {
margin-top: 14px;
}
/* =========================================================================
SHARE ROW (single posts — see section 4c)
====================================================================== */
.rb-share {
display: flex;
align-items: center;
gap: 14px;
margin-top: var(--rb-block-space);
}
.rb-share__label {
color: var(--rb-muted);
font-size: 15px;
}
.rb-share__links {
display: flex;
align-items: center;
gap: 10px;
}
.rb-share__link {
display: inline-flex;
align-items: center;
justify-content: center;
/* 40px keeps the tap target at the 44px-ish minimum once the gap is
counted — don't shrink these below 40. */
width: 40px;
height: 40px;
border-radius: 8px;
color: #fff;
text-decoration: none;
transition: opacity 0.18s ease;
}
.rb-share__link:hover,
.rb-share__link:focus-visible {
opacity: 0.85;
color: #fff;
}
/* Brand colours — these are the platforms' own, not theme tokens, so they
stay literal rather than becoming --rb-* variables. */
.rb-share__link--facebook {
background: #1877f2;
}
.rb-share__link--whatsapp {
background: #25d366;
}
.rb-share__link--email {
background: var(--rb-muted);
}
/* =========================================================================
COMMENTS — layout
Blocksy's own markup (.ct-comment-inner / .ct-comment-meta /
.ct-media-container), but its comment stylesheet is not loading now that
its Comments element is off and section 5b renders them instead. So the
layout is set here rather than inherited.
NOTE: the avatar ![]()
carries NO class — it must be selected through the
figure. A `.avatar` selector matches nothing on this build.
====================================================================== */
.rb-comments .ct-comment-inner {
padding: 24px 0;
}
/* Avatar spans both rows on the left; author and date stack to its right. */
.rb-comments .ct-comment-meta {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
column-gap: 14px;
align-items: center;
margin-bottom: 12px;
}
.rb-comments .ct-comment-meta .ct-media-container {
grid-column: 1;
grid-row: 1 / span 2;
/* figure carries a UA margin of 1em 40px — reset or it shoves the
column across. */
margin: 0;
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
}
.rb-comments .ct-comment-meta .ct-media-container img {
display: block;
width: 48px;
height: 48px;
object-fit: cover;
}
.rb-comments .ct-comment-author {
grid-column: 2;
margin: 0;
font-size: 16px;
line-height: 1.3;
}
.rb-comments .ct-comment-author cite {
font-style: normal;
}
.rb-comments .ct-comment-meta-data {
grid-column: 2;
/* Was rendering as "3:57 PM Edit Reply" with no separation. */
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 13px;
}
.rb-comments .ct-comment-meta-data a {
color: var(--rb-muted);
text-decoration: none;
}
.rb-comments .ct-comment-meta-data a:hover,
.rb-comments .ct-comment-meta-data a:focus-visible {
color: var(--rb-accent);
text-decoration: underline;
}
.rb-comments .ct-comment-content {
margin: 0;
}
.rb-comments .ct-comment-content p:last-child {
margin-bottom: 0;
}
#footer .ct-container {
padding: 25px 0;
}
nav#footer-menu {
margin-top: 2px;
}
.single-post .addtoany_share_save_container.addtoany_content.addtoany_content_bottom {
display: none;
}
/* Featured image on single posts. `height: auto` + `object-fit: contain`
are what stop Blocksy cropping the top and bottom — the max-width alone
left the crop in place. If it is STILL cut, the Image Ratio setting is
forcing an aspect ratio: Customize → Single Post → Featured Image →
Image Ratio → Original. */
.single-post figure.ct-featured-image {
margin-inline: auto;
max-width: 400px;
}
.single-post figure.ct-featured-image img {
display: block;
width: 100%;
max-width: 400px;
height: auto;
margin: 0 auto;
object-fit: contain;
}
.addtoany_share_save_container.addtoany_content.addtoany_content_bottom {
display: none;
}
.blog .addtoany_share_save_container.addtoany_content.addtoany_content_bottom {
display: flex;
}
.single .ct-featured-image figcaption,
.single .ct-featured-image .wp-caption-text {
display: none;
}
ul.children {padding-left: 30px;}
.ct-comment-list li {
border-bottom: 1px solid var(--rb-hairline);
}
.ct-comment-list li:last-child {
border-bottom: 0;
}
.ct-comment-list li:first-child article {
padding-top: 0;
}
/* =========================================================================
ANSWER COUNTER (see section 3b)
====================================================================== */
.rb-counter {
margin: 0 0 var(--rb-block-space);
color: var(--rb-ink);
font-size: 16px;
line-height: 1.4;
margin-top: 40px;
margin-bottom: 0;
}
@media (max-width: 600px) {
.rb-counter {
padding: 12px 16px;
font-size: 15px;
}
}
/* The counter reuses .ct-container for its width, so it needs no padding of
its own — the container already supplies it. */
.rb-counter-wrap {
margin-bottom: -20px;
}
.page article .entry-content.is-layout-flow,
.page article .entry-content.is-layout-constrained {
max-width: 860px;
margin-inline: auto;
padding: 40px;
background: var(--rb-surface);
border-radius: var(--rb-radius-lg);
}
.page .entry-content > p {
margin: 0 0 18px;
line-height: 1.7;
}
.page .entry-content > p:last-child {
margin-bottom: 0;
}
/* Clause headings: smaller than an article title, with clear separation
above so each section reads as a block. */
.page .entry-content > h2 {
margin: 36px 0 14px;
padding-top: 24px;
border-top: 1px solid var(--rb-hairline);
font-size: 21px;
line-height: 1.3;
}
.page .entry-content > h2:first-child {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
/* The "Caracter informativ:" style lead-ins. */
.page .entry-content strong {
color: var(--rb-ink);
}
@media (max-width: 600px) {
.page .entry-content {
padding: 24px 20px;
}
.page .entry-content > h2 {
margin-top: 28px;
padding-top: 20px;
font-size: 19px;
}
}
[data-cards=boxed] .entry-card, [data-cards=cover] .entry-card {
border-radius: var(--rb-radius-lg) !important;
}