, which paints its own chevron in :before /
:after and restyles the select through `.select_container select` - a
`background` shorthand and a `padding-right: 3em !important`, from a
stylesheet enqueued AFTER this one. So the rules below address the wrapped
select (two classes, which outranks the theme's one), the background and
padding-right repeat the theme's !important since specificity cannot beat
that, and the wrapper's two glyph pseudos are switched off. The bare
`select` selector is there for the instant before skin.js has run, so
nothing jumps. */
.job-application__label {
display: block;
margin: 6px 0 -4px;
font-size: 15px;
line-height: 1.4em;
color: var(--theme-color-text);
}
.job-application select,
.job-application .select_container select {
width: 100%;
height: var(--form-field-h);
padding: 0 26px;
padding-right: 52px !important;
border: none;
border-radius: var(--form-field-radius);
background: var(--form-field-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 24px center !important;
font-size: 16px;
line-height: var(--form-field-h);
color: var(--theme-color-text);
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
.job-application select:focus,
.job-application .select_container select:focus {
background-color: var(--form-field-bg) !important; /* theme sets a focus bg !important too */
outline: 2px solid var(--carp-lime);
outline-offset: -2px;
}
.job-application .select_container:before,
.job-application .select_container:after {
display: none;
}
/* The closing notes under the job and volunteer forms' button */
.job-application__notes {
margin-top: 32px;
font-size: 13px;
line-height: 1.45em;
color: var(--theme-color-text);
}
.job-application__notes p {
margin: 0 0 12px;
}
.job-application__notes p:last-child {
margin-bottom: 0;
}
.job-application__notes a {
color: var(--carp-lime);
}
.job-application__notes a:hover {
color: var(--carp-dark-green);
}
.job-application input::placeholder {
color: var(--theme-color-text);
opacity: 1;
}
/* Drop zone */
.job-application .codedropz-upload-container {
margin-top: var(--form-gap);
padding: 44px 20px;
border: 2px dashed var(--form-drop-line);
border-radius: 6px;
background-color: transparent;
text-align: center;
}
.job-application .codedropz-upload-handler {
border: none;
padding: 0;
}
.job-application .codedropz-upload-inner {
font-size: 16px;
line-height: 1.5em;
color: var(--theme-color-text_dark);
}
.job-application .codedropz-upload-inner .codedropz-btn-wrap a {
color: var(--carp-dark-green);
}
/* Dragging a file over it */
.job-application .codedropz-upload-container.codedropz-dragover {
border-color: var(--carp-lime);
background-color: rgba(140, 198, 63, .06);
}
.job-application__hint {
margin: 10px 0 0;
font-size: 14px;
line-height: 1.4em;
color: var(--theme-color-text);
text-align: center;
}
/* One row per file: name, size, progress, remove */
.job-application .dnd-upload-status {
margin-top: 14px;
}
.job-application .dnd-upload-details {
font-size: 15px;
}
.job-application .dnd-progress-bar span {
background-color: var(--carp-lime);
}
.job-application .dnd-icon-remove {
color: var(--theme-color-text);
}
.job-application .dnd-icon-remove:hover {
color: var(--carp-dark-green);
}
.job-application__actions {
margin-top: 28px;
text-align: center;
}
/* The skin wraps every submit in
and appends
carrying a paper-plane glyph (skin.js:526),
and colours it through `.wpcf7 .wpcf7-submit` - two classes, which outranks
the plain input[type=submit] in the button block above. Hence the repeated
class here, and the icon goes since the design has none. */
/* The submit button is two elements, not one. skin.js:526 wraps every
.wpcf7-submit in and appends
; the theme then makes the real input
transparent (contact-form-7.css:183) and paints the visible button on that
trailing span, which also carries a paper-plane glyph in its :before and
64px of left padding on the input to clear it.
So the colour goes on the span, not the input - hiding the span removes the
button altogether. The theme's own selectors are three classes deep and its
stylesheet is enqueued AFTER the child one, hence the repeated class. */
.job-application.job-application .wpcf7-submit-style .submit-style-in {
background-color: var(--carp-lime);
color: var(--carp-white);
}
.job-application.job-application .wpcf7-submit-style:hover .submit-style-in,
.job-application.job-application .wpcf7-submit-style:focus .submit-style-in,
.job-application.job-application .wpcf7-submit-style:hover .wpcf7-submit + .submit-style-in,
.job-application.job-application .wpcf7-submit-style:focus .wpcf7-submit + .submit-style-in {
background-color: var(--carp-dark-green);
color: var(--carp-white);
}
/* No icon in the design, so the glyph goes and the label re-centres */
.job-application.job-application .wpcf7-submit-style .submit-style-in:before {
display: none;
}
.job-application.job-application .wpcf7-submit-style .wpcf7-submit {
padding: 17px 40px !important; /* theme sets 64px on the left, !important */
color: var(--carp-white);
}
/* Fallback for before skin.js has wrapped it (or if that changes) */
.job-application.job-application .wpcf7-submit {
padding: 17px 40px;
border: none;
border-radius: 0;
color: var(--carp-white);
}
/* CF7's own validation text.
trx_addons hides every per-field message outright
(`span.wpcf7-not-valid-tip { display: none }`, __styles-full.css) and the
theme only puts it back for its own `.form-style-N` markup, which this form
does not use. The result was a form that refused to submit while showing
nothing but "One or more fields have an error" - the real message ("upload
both the CV and the cover letter") was in the DOM but invisible.
Two classes beat the plugin's tag+class, so no !important is needed. */
.job-application .wpcf7-not-valid-tip {
display: block;
margin-top: 8px;
color: #FF5B4A;
}
.job-application .wpcf7-not-valid-tip,
.job-application .wpcf7-response-output {
font-size: 14px;
line-height: 1.4em;
}
/* The uploader's message belongs under the drop zone, level with the hint */
.job-application .wpcf7-form-control-wrap[data-name="cv-files"] .wpcf7-not-valid-tip {
margin-top: 12px;
text-align: center;
}
@media (max-width: 767px) {
.job-application .codedropz-upload-container {
padding: 28px 14px;
}
/* The label is long enough that the button outgrew the form: 40px of padding
each side plus `white-space: nowrap` gave the input an intrinsic width of
397px inside a 335px form. `width: 100%` alone did nothing about it - the
wrapper span is inline-block, so it shrink-wrapped to that 397px and the
input's 100% resolved against the overflowing parent. The wrapper has to be
block-level first, and the label has to be allowed to wrap. */
.job-application__actions .wpcf7-submit-style {
display: block;
width: 100%;
}
.job-application__actions .wpcf7-submit,
.job-application.job-application .wpcf7-submit-style .wpcf7-submit {
width: 100%;
white-space: normal;
padding-left: 16px !important; /* theme sets the padding !important */
padding-right: 16px !important;
}
}
/* A job page borrows the theme's blog single template, which brings blog
furniture with it. None of it belongs on a job posting. Comments are also
closed in PHP so nothing is merely hidden while still accepting input.
Volunteer positions (.single-voluntariat) render through the same template
and get the same treatment. */
body.single-cpt_team .author_info,
body.single-cpt_team .nav-links-single,
body.single-cpt_team .comments_wrap,
body.single-voluntariat .author_info,
body.single-voluntariat .nav-links-single,
body.single-voluntariat .comments_wrap {
display: none;
}
/* The title block comes with the blog byline attached ("12 hours ago", author,
share). A job posting is not authored content, so the meta goes and the
heading keeps its spacing. */
body.single-cpt_team .post_header_wrap .post_meta,
body.single-voluntariat .post_header_wrap .post_meta {
display: none;
}
body.single-cpt_team .post_header_wrap .post_title,
body.single-voluntariat .post_header_wrap .post_title {
margin-bottom: 0;
}
/* ==========================================================================
CONTACT FORM (main) - CF7 form #5, rebuilt to the XD design
Single column of pill fields, a rounded message box, a GDPR consent line
and a lime submit. Deliberately parallel to the JOB APPLICATION FORM block
above: same field metrics, same submit treatment, same reason for the
validation-tip rule. The two blocks are kept separate rather than merged
because the job form's submit needs a doubled-class selector that would not
survive being folded into a shared :is() list.
========================================================================== */
.contact-form {
--form-field-bg: #F4F4F4;
--form-field-radius: 999px;
--form-field-h: 52px;
--form-gap: 16px;
--form-area-radius: 26px;
--form-area-h: 300px;
}
.contact-form__fields {
display: flex;
flex-direction: column;
gap: var(--form-gap);
}
.contact-form .wpcf7-form-control-wrap {
display: block;
}
.contact-form input[type=text],
.contact-form input[type=tel],
.contact-form input[type=email] {
width: 100%;
height: var(--form-field-h);
padding: 0 26px;
border: none;
border-radius: var(--form-field-radius);
background-color: var(--form-field-bg);
font-size: 16px;
line-height: var(--form-field-h);
}
/* `.wpcf7 textarea { height: 20.9em }` in the theme's contact-form-7.css has
the same weight and, on pages that enqueue it late (the donation page), wins;
the extra class keeps the height ours. */
.contact-form textarea.wpcf7-textarea {
display: block;
width: 100%;
height: var(--form-area-h);
padding: 18px 26px;
border: none;
border-radius: var(--form-area-radius);
background-color: var(--form-field-bg);
font-size: 16px;
line-height: 1.6em;
resize: vertical;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
color: var(--theme-color-text);
opacity: 1;
}
/* Consent line. The theme draws its own tick on a :before and hides the real
box (style.css:3379); the design wants a plain square, so the input is shown
and the decoration dropped. */
.contact-form__consent {
margin-top: 22px;
}
.contact-form__consent .wpcf7-list-item {
margin: 0;
}
.contact-form__consent label {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 15px;
line-height: 1.5em;
font-weight: 400;
cursor: pointer;
}
.contact-form__consent input[type=checkbox] {
flex: 0 0 auto;
width: 16px;
height: 16px;
margin: 3px 0 0;
padding: 0;
border: 1px solid var(--theme-color-bd_color);
border-radius: 2px;
background-color: var(--carp-white);
appearance: auto;
opacity: 1;
position: static;
}
.contact-form__consent input[type=checkbox]:before,
.contact-form__consent input[type=checkbox]:after {
display: none;
}
.contact-form__consent a {
color: inherit;
text-decoration: underline;
}
.contact-form__consent a:hover {
color: var(--carp-dark-green);
}
/* Submit. As on the job form, skin.js:526 wraps the input and appends
- that span is the visible button, the input
itself is transparent, so the colour goes on the span and the paper-plane
glyph in its :before is dropped. */
.contact-form__actions {
margin-top: 28px;
}
.contact-form.contact-form .wpcf7-submit-style .submit-style-in {
background-color: var(--carp-lime);
color: var(--carp-white);
}
.contact-form.contact-form .wpcf7-submit-style:hover .submit-style-in,
.contact-form.contact-form .wpcf7-submit-style:focus .submit-style-in {
background-color: var(--carp-dark-green);
color: var(--carp-white);
}
.contact-form.contact-form .wpcf7-submit-style .submit-style-in:before {
display: none;
}
.contact-form.contact-form .wpcf7-submit-style .wpcf7-submit {
padding: 17px 40px !important; /* theme sets 64px on the left, !important */
color: var(--carp-white);
}
.contact-form.contact-form .wpcf7-submit {
padding: 17px 40px;
border: none;
border-radius: 0;
color: var(--carp-white);
}
/* trx_addons hides every per-field message (see the job form block for the
full story); without this the form refuses to submit and says only "One or
more fields have an error". */
.contact-form .wpcf7-not-valid-tip {
display: block;
margin-top: 8px;
color: #FF5B4A;
}
.contact-form .wpcf7-not-valid-tip,
.contact-form .wpcf7-response-output {
font-size: 14px;
line-height: 1.4em;
}
@media (max-width: 767px) {
.contact-form {
--form-area-h: 220px;
}
.contact-form__actions .wpcf7-submit {
width: 100%;
}
}
/* The donor variant (tools/setup-donor-contact-form.php): the same form under
the Filantrop / Moștenire / Partener corporate tabs of the donation pages,
with the Careers fields. It sits inside a tab, so the message box is
shorter and the form keeps its distance from the tab text above. */
.contact-form--donor {
--form-area-h: 180px;
}
.donor_contact {
margin-top: 32px;
}
/* The map beside the form. trx_addons sizes it with `.sc_googlemap > iframe
{ height: 100% }` (googlemap.css:19), but Complianz wraps the iframe in a
.cmplz-placeholder-parent div to block it until consent, so the child
selector misses and the iframe drops to the browser's default 150px.
Before consent the same wrapper is the placeholder, and complianz.js gives
it the placeholder image's aspect ratio (`.cmplz-placeholder-N { height }`,
about 420px here), so it is held to the widget's height too. */
.sc_googlemap > .cmplz-placeholder-parent {
height: 100%;
}
.sc_googlemap > .cmplz-placeholder-parent > iframe {
width: 100%;
height: 100%;
}
/* ==========================================================================
LANGUAGE SWITCHER (header)
The element is the theme's own `trx_sc_layouts_language`, overridden in
skins/default/trx_addons/components/cpt/layouts/shortcodes/language/tpl.default.php
to read Polylang and to render both languages side by side ("EN RO")
instead of as a dropdown.
The template marks the active language `current-menu-item`. The theme does
colour that (style.css:6867) but a header rule overrides it back to black,
so the colour is restated here - together with the weight, because two
two-letter codes side by side need more than a hue shift to read as
"this one is active".
Everything is line-height: 1. Left to the theme's menu line-height the row
grows to 52px and the two languages fall out of line with each other.
========================================================================== */
.sc_layouts_language .sc_layouts_language_inline {
display: flex;
align-items: center;
flex-wrap: nowrap; /* the theme's menu nav wraps; two codes must stay on one line */
white-space: nowrap;
line-height: 1;
gap: .75em; /* the only thing separating the two languages */
}
.sc_layouts_language .sc_layouts_language_inline > li.menu-item {
display: flex;
align-items: center;
float: none;
margin: 0;
padding: 0;
line-height: 1;
}
.sc_layouts_language .sc_layouts_language_inline > li.menu-item > a {
padding: 0;
font-weight: 400; /* the theme's menu weight is 600, heavier than this needs */
}
.sc_layouts_language .sc_layouts_language_inline > li.current-menu-item > a,
.sc_layouts_language .sc_layouts_language_inline > li.current-menu-item > a:hover {
/* !important because the header's own menu colour rule is itself !important
(style.css:6862-6872) and would otherwise repaint this back to black. */
color: var(--theme-color-text_link) !important;
font-weight: 600;
}
/* The right-hand header column now carries three items (search, language,
burger) where the theme planned for two, and
`.sc_layouts_column_align_right .sc_layouts_item` puts 1.2em between each.
Halving it below the tablet breakpoint keeps all three comfortably inside a
360-405px viewport.
Note when checking this: headless Chrome at `--window-size=420` lays the
page out at ~489 CSS px, so max-width queries do not fire and the burger
looks clipped. Measure in a genuinely narrow viewport instead - at 405px
the row is 390px wide with all three items inside it. */
@media (max-width: 767px) {
.sc_layouts_column_align_right .elementor-widget-trx_sc_layouts_language.sc_layouts_item {
margin-left: .5em !important; /* theme rule is .sc_x .sc_item:not():not() - 4 classes */
}
.sc_layouts_language .menu-item-title {
font-size: 13px;
}
.sc_layouts_language .sc_layouts_language_inline {
gap: .5em;
}
}
/* ==========================================================================
HEADER: no transparent overlay below desktop
With "Header position: over", the theme runs the header transparent over the
hero until the page is scrolled:
style.css:5530-5533
.header_position_over:not(.trx_addons_page_scrolled) .top_panel
.sc_layouts_row[class*=scheme_] { background-color: transparent; }
That works over a wide hero but not on a phone, where the logo, menu and
language sit on whatever part of the photo happens to be behind them. Below
the theme's tablet breakpoint the row keeps the background its own colour
scheme gives it - the same one it fades to on scroll - so the header is a
solid bar from the start.
`background-color` rather than `background`, so a row that sets a gradient or
image of its own is left alone. The leading `body` is what wins the cascade:
it makes this 0,5,1 against the theme's 0,5,0, which matters because the
child stylesheet is enqueued BEFORE the parent's and would otherwise lose on
source order. No !important needed.
========================================================================== */
@media (max-width: 1023px) {
body.header_position_over:not(.trx_addons_page_scrolled) .top_panel .sc_layouts_row[class*="scheme_"],
body.header_position_over .top_panel .sc_layouts_row[class*="scheme_"]:not(.sc_layouts_row_fixed_on) {
background-color: var(--theme-color-bg_color);
}
}
/* ==========================================================================
MENU DROPDOWNS: white panel, dark grey text
The theme paints every dropdown from its "extra" palette - the dark half of
the colour scheme:
style.css:6901 background-color: var(--theme-color-extra_bg_color) #0F0F0F
style.css:6911 color: var(--theme-color-extra_text) !important #BDBDBD
style.css:6918 :hover -> var(--theme-color-extra_hover) !important #FFFFFF
Rather than restate those rules - two of them !important, and there are more
like them for the panel menu - redefine the three tokens they read, scoped to
the submenus. Custom properties inherit, so everything inside a dropdown
follows automatically and the theme keeps its own selectors.
`> li ul` limits this to submenu panels: the root of a menu is not a
dropdown and keeps its own background. The dropdowns already carry a
1px 1px 2px rgba(0,0,0,.2) shadow, so a white panel still separates from the
page without adding a border.
========================================================================== */
.sc_layouts_menu_nav > li ul:not(.sc_item_filters_tabs) {
--theme-color-extra_bg_color: #FFFFFF !important;
--theme-color-extra_bg_hover: #F4F4F4 !important;
--theme-color-extra_text: #4A4A4A !important; /* was #BDBDBD - the dropdown body */
--theme-color-extra_dark: #1F1F1F !important; /* was #FFFFFF - invisible on white */
--theme-color-extra_light: #757575 !important; /* was #afafaf - too pale on white */
--theme-color-extra_bd_color: #E6E6E6 !important; /* was #353535 - a black divider */
--theme-color-extra_bd_hover: #CFCFCF !important;
/* Fixed rather than var(--theme-color-text_link): inside the dark-scheme
header row that token is the pale #8CC63F, which is weak on white. */
--theme-color-extra_hover: #1F764D !important; /* was #FFFFFF - invisible on white */
}
/* ==========================================================================
MOBILE MENU: white panel, black and grey text, like the dropdowns
templates/header-navi-mobile.php hard-codes `scheme_dark` on the panel, and
every colour in it is read from the scheme's alter_* tokens (style.css,
from line 9953): alter_bg_color for the panel, alter_text for the links,
alter_dark for the open/current ones, the close cross, the social icons and
the line above them. Same move as the dropdowns above: redefine the tokens
on the panel, as the page's light scheme has them, with the background
white like the desktop dropdown rather than the scheme's #F9F9F9.
`.menu_mobile.scheme_dark` outweighs the theme's `.scheme_dark`, so no
!important is needed.
========================================================================== */
.menu_mobile.scheme_dark {
--theme-color-alter_bg_color: #FFFFFF; /* was #161616 */
--theme-color-alter_bg_hover: #F4F4F4;
--theme-color-alter_bd_color: #E6E6E6;
--theme-color-alter_text: #4A4A4A; /* was #D2D3D5 - the dropdowns' grey */
--theme-color-alter_light: #757575;
--theme-color-alter_dark: #000000; /* was #FFFFFF */
--theme-color-alter_link: #1F764D;
--theme-color-alter_hover: #1F764D;
--theme-color-text: #707070;
--theme-color-text_dark: #000000;
--theme-color-text_link: #1F764D;
--theme-color-text_light: #757575;
--theme-color-bg_color: #FFFFFF;
--theme-color-bd_color: #E6E6E6;
}
/* Top level black, the levels below grey (alter_text), as on desktop */
.menu_mobile .menu_mobile_nav_area > ul > .menu-item > a {
color: #000000;
}
/* Hover and the current page in the brand green, like the dropdowns' hover */
.menu_mobile .menu_mobile_inner a:hover,
.menu_mobile .menu_mobile_inner .current-menu-item > a,
.menu_mobile .menu_mobile_nav_area > ul > .menu-item > a:hover,
.menu_mobile .menu_mobile_nav_area > ul > .current-menu-item > a,
.menu_mobile .menu_mobile_nav_area > ul > .current-menu-ancestor > a {
color: #1F764D;
}
/* The mega menu's section labels ("CE FACEM", "DESPRE NOI"…) are column
headings on desktop and `href="#"` items here: they repeat the parent the
visitor has just opened and lead nowhere. */
.menu_mobile .menu_mobile_nav_area .megamenu-label {
display: none;
}
/* ==========================================================================
IN-PAGE ANCHOR TARGETS
Give an Elementor section a CSS ID and link to it with `#that-id` and the
browser scrolls to it - `scroll-behavior: smooth` is already active on
, so no JS and no plugin is involved.
What that misses is the sticky header: the row is `position: fixed`, so it
is out of flow and the anchor lands underneath it, hiding the first ~79px
of the section. scroll-margin-top reserves that space at the top of the
target.
The height is the theme's own --fixed-rows-height, which trx_addons keeps
updated in JS (trx_addons.front.js) with the fixed rows PLUS the admin bar,
so it stays right when logged in, and at breakpoints where the header is a
different height. The fallback 0px covers the moment before that JS runs.
Scoped to elements that carry an id rather than a blanket [id] so it only
affects things that can actually be scroll targets.
========================================================================== */
.elementor-section[id],
.elementor-container[id],
.e-con[id],
.elementor-widget[id],
.elementor-element[id] {
scroll-margin-top: calc(var(--fixed-rows-height, 0px) + 24px);
}
/* ==========================================================================
HAND-WRITTEN TABLES (Elementor "HTML" widget)
The skin styles every table on a page as a data table
(skins/default/css/style.css): th gets a black background and white 19px
text, td gets the grey body colour at 16px, odd rows get zebra striping,
and __custom.css puts the H5 font on th only - so labels and values do not
even share a family. A table written by hand in an HTML widget is already
styled inline by whoever wrote it, so all of that chrome fights the markup.
That is what turned the species fact sheet into black label cells with
centred grey values instead of the flat two-column list in the design.
Hand the table back to its own inline styles. The theme selectors are
table:not(:where([class*="tribe-events"])) th|td - :where() contributes no
specificity, so they weigh (0,0,2) and one class is enough to beat them.
text-align has to be stated rather than just unset: the Elementor column
around this widget is set to centre, and text-align inherits.
========================================================================== */
/* The cells stay transparent so the table paints one flat white panel
behind them - the section this sits in is the theme's #F8F8F8. */
.elementor-widget-html table {
background-color: #FFFFFF;
}
.elementor-widget-html table th,
.elementor-widget-html table td {
background-color: transparent;
color: inherit;
font-family: inherit;
font-size: inherit;
line-height: inherit;
letter-spacing: normal;
text-align: left;
}
.elementor-widget-html table th {
font-weight: 700;
}
/* Zebra striping: (0,1,3) in the skin, so this needs the extra class too */
.elementor-widget-html table > tbody > tr:nth-child(2n+1) > td {
background-color: transparent;
}
/* ==========================================================================
ICONS "Accent" - the XD project cards
Markup (rendered):
.sc_icons.sc_icons_accent > .trx_addons_columns_wrap
> .trx_addons_column-1_2 > .sc_icons_item.sc_icons_item_linked.with_more
> .sc_icons_icon.sc_icon_type_images > img.sc_icon_as_image
+ .sc_icons_item_details > .sc_icons_item_title
+ .sc_icons_item_more_link
+ .sc_icons_item_link
The theme stacks that: picture on top, title under it, then a "Mai multe"
link whose label is indented out of an overflow:hidden box and only slides
in on hover. The design uses the uploaded picture AS the card - a rounded
square with the title and the link over its bottom-left corner, in white,
both permanently visible.
The picture is pulled out of flow and pushed behind the text with
z-index: -1 rather than being restated as a real background-image, so the
![]()
keeps its alt text, its lazy loading and its srcset. A negative
z-index paints it above the card's own background but below in-flow
content, which is exactly the layer this needs.
.sc_icons_item_details deliberately stays IN flow. The whole-card link
(.sc_icons_item_link) is absolutely positioned by the theme and resolves
against its nearest positioned ancestor - that has to stay .sc_icons_item,
or only the caption strip at the bottom would be clickable.
========================================================================== */
.sc_icons.sc_icons_accent {
--acc-gap: 30px;
--acc-pad: 24px;
--acc-radius: 8px;
--acc-ratio: 1 / 1; /* the uploads are 459x464, so nothing is cropped */
/* Reaches ~110px up the card, which covers the whole caption band -
the title's top edge sits about 75px above the bottom. A negative
spread thins an inset shadow rather than softening it, so the
falloff here comes from the blur alone. */
--acc-shadow: inset 0 -110px 70px 0 rgba(0, 0, 0, .6);
}
/* Tall variant - the "Ce facem" cards on the homepage.
Add the class `icons_tall` to the widget in Elementor (Advanced > CSS
Classes); same two-selector hook as the accent2 `icons_teal` palette,
because Elementor puts the class on the .elementor-element wrapper.
In the XD the five homepage cards are portrait, ~200x300, so the ratio
is 2:3 rather than the square the two-column cards use. object-fit
already crops the 459x464 uploads to that, trimming the sides. The
shadow reaches further up to match: the longest title here ("Suport
pentru dezvoltarea economiei locale") wraps to three lines, which with
the link and the padding puts the caption's top edge ~140px above the
bottom. */
.icons_tall .sc_icons.sc_icons_accent,
.sc_icons.sc_icons_accent.icons_tall {
--acc-ratio: 2 / 3;
--acc-shadow: inset 0 -150px 80px 0 rgba(0, 0, 0, .6);
}
/* Gutters. The theme zeroes both the wrap margin and the column padding for
this layout, because its own cards are held apart by their 3.4em padding -
which is the first thing the design drops. Same negative-margin trick as
the accent2 cards: padding on the column, pulled back on the wrap so the
row still spans the full width. */
.sc_icons.sc_icons_accent .trx_addons_columns_wrap {
margin-right: calc(-1 * var(--acc-gap));
}
.sc_icons.sc_icons_accent .trx_addons_columns_wrap > [class*="trx_addons_column-"] {
padding-right: var(--acc-gap);
padding-bottom: var(--acc-gap);
}
/* ...except that a grid whose items fit one desktop row (the five "Ce facem"
cards) is marked `columns_in_single_row`, and for that the theme zeroes the
columns' bottom padding with rules weightier than the one above, and later
(__plugins.css, and __responsive.css below 1280px). Below 1280px the cards
wrap anyway (2 per row on tablets, 1 on phones), and the rows touched. A flex
row-gap only opens between wrapped rows, so the single desktop row and the
space under the grid are unchanged. */
.sc_icons.sc_icons_accent .trx_addons_columns_wrap.columns_in_single_row {
row-gap: var(--acc-gap);
}
.sc_icons.sc_icons_accent .sc_icons_item {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
aspect-ratio: var(--acc-ratio);
padding: var(--acc-pad);
border-radius: var(--acc-radius);
overflow: hidden;
background-color: transparent;
/* Required, not cosmetic. The picture below sits at z-index: -1, and a
negative z-index escapes to the nearest ancestor stacking context - if
that is not this card, the picture lands behind that ancestor's opaque
background and vanishes. The card only forms one on its own while the
theme's heart-fadeinup entrance animation is holding a translateY on it,
so without this the cards paint for the length of the animation and then
disappear. isolate pins the context for good, whatever the animation is
doing. */
isolation: isolate;
}
/* The theme fills the card with the link colour on hover and drops a shadow;
there is no hover state for these in the design. */
.sc_icons.sc_icons_accent .sc_icons_item:hover {
background-color: transparent;
box-shadow: none;
}
/* The picture becomes the card face */
.sc_icons.sc_icons_accent .sc_icons_icon {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
}
.sc_icons.sc_icons_accent .sc_icons_icon .sc_icon_as_image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* The inner shadow along the bottom edge, which is what keeps the white
caption readable over a pale picture (the Bursele illustration is the
worst case).
It cannot go on .sc_icons_item: an inset shadow paints with the element's
own background, and the picture - a negative z-index child - paints on top
of that layer, so it would be hidden. It goes on a pseudo of the picture's
own wrapper instead. That wrapper carries z-index: -1, which makes it a
stacking context, so the pseudo paints above the ![]()
it contains while
the whole wrapper stays below the in-flow caption. The item's overflow
clips it to the rounded corners. */
.sc_icons.sc_icons_accent .sc_icons_icon:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: var(--acc-shadow);
pointer-events: none;
}
.sc_icons.sc_icons_accent .sc_icons_icon + .sc_icons_item_details {
margin-top: 0;
}
.sc_icons.sc_icons_accent .sc_icons_item_title,
.sc_icons.sc_icons_accent .sc_icons_item_title a,
.sc_icons.sc_icons_accent .sc_icons_item:hover .sc_icons_item_title,
.sc_icons.sc_icons_accent .sc_icons_item:hover .sc_icons_item_title a {
color: #FFFFFF;
font-size: 22px;
line-height: 1.25em;
font-weight: 700;
}
/* "Mai multe". The label is permanently visible here, and the chevron reads
before it - row-reverse flips the painted order without the template's
order having to change. \e836 is the same fontello chevron the
accent2 cards use; the theme's default is \e9a4, a solid arrow. */
.sc_icons.sc_icons_accent .sc_icons_item .sc_icons_item_more_link,
.sc_icons.sc_icons_accent .sc_icons_item:hover .sc_icons_item_more_link {
display: inline-flex;
flex-direction: row-reverse;
align-items: center;
gap: 6px;
margin-top: .5em;
overflow: visible;
color: #FFFFFF;
font-size: 14px;
line-height: 1.4em;
font-weight: 400;
}
.sc_icons.sc_icons_accent .sc_icons_item .sc_icons_item_more_link .link_text {
margin-right: 0;
text-indent: 0;
visibility: visible;
opacity: 1;
}
.sc_icons.sc_icons_accent .sc_icons_item .sc_icons_item_more_link .link_icon {
width: auto;
height: auto;
line-height: 1;
}
.sc_icons.sc_icons_accent .sc_icons_item .sc_icons_item_more_link .link_icon:before {
content: "\e836";
font-size: 14px;
}
/* ==========================================================================
ELEMENTOR TOGGLE - the XD "Cum poți ajuta?" dropdowns
Markup (rendered):
.elementor-widget-toggle > .elementor-widget-container > .elementor-toggle
> .elementor-toggle-item
> .elementor-tab-title[role="button"]
> .elementor-toggle-icon.elementor-toggle-icon-right
+ a.elementor-toggle-title
+ .elementor-tab-content.elementor-clearfix
Elementor draws this as a plain list: a single hairline under each row
(.elementor-tab-title { border-block-end }) and another under the open
panel, with the chevron floated right. The design instead makes every item
a bordered white box with rounded corners, the chevron centred against the
title, and the panel opening inside that same box.
So the border moves up to .elementor-toggle-item and is taken off the row
and the panel. Those two carry the widget's own Style-tab values, which
Elementor writes at (0,4,0) - `.elementor-30426 .elementor-element
.elementor-element-bb543c6 .elementor-tab-title` - so the chain below goes
through .elementor-widget-container to land at (0,5,0) and win outright,
rather than leaning on load order.
The chevron is centred by making the row a flex line. Elementor floats it
right, which pins it to the first line and drifts off-centre as soon as a
title wraps to two lines - which two of these three do. `order` puts it
after the title without the template's span order having to change.
========================================================================== */
.elementor-widget-toggle {
--tog-border: #8CC63F;
--tog-radius: 4px;
--tog-pad-x: 24px;
--tog-pad-y: 20px;
}
/* The box. Item spacing stays on the widget's own "Space Between" control. */
.elementor-widget-toggle .elementor-widget-container .elementor-toggle .elementor-toggle-item {
border: 1px solid var(--tog-border);
border-radius: var(--tog-radius);
background-color: #FFFFFF;
overflow: hidden;
transition: box-shadow .2s ease-out;
}
/* Hover thickens the border. Growing border-width from 1px to 2px would
reflow the box and nudge the title a pixel, so the second pixel is drawn
as an inset shadow just inside the existing border instead - same result,
nothing moves. It follows the border radius on its own. */
.elementor-widget-toggle .elementor-widget-container .elementor-toggle .elementor-toggle-item:hover {
box-shadow: inset 0 0 0 1px var(--tog-border);
}
.elementor-widget-toggle .elementor-widget-container .elementor-toggle .elementor-toggle-item .elementor-tab-title {
display: flex;
align-items: center;
gap: 16px;
padding: var(--tog-pad-y) var(--tog-pad-x);
border: none;
line-height: 1.3;
}
.elementor-widget-toggle .elementor-widget-container .elementor-toggle .elementor-toggle-item .elementor-tab-title.elementor-active {
padding-bottom: calc(var(--tog-pad-y) - 6px);
border: none;
}
.elementor-widget-toggle .elementor-widget-container .elementor-toggle .elementor-toggle-item .elementor-toggle-title {
order: 1;
flex: 1 1 auto;
color: var(--theme-color-text_dark);
font-size: 16px;
font-weight: 700;
}
/* float: none and width: auto undo the theme-independent Elementor defaults
(.elementor-toggle-icon { width: 1em } / .-icon-right { float: right }). */
.elementor-widget-toggle .elementor-widget-container .elementor-toggle .elementor-toggle-item .elementor-toggle-icon {
order: 2;
flex: 0 0 auto;
float: none;
width: auto;
color: var(--tog-border);
font-size: 18px;
line-height: 1;
}
/* The panel opens inside the box, so it keeps the row's side padding and
drops the hairline Elementor puts under it. */
.elementor-widget-toggle .elementor-widget-container .elementor-toggle .elementor-toggle-item .elementor-tab-content {
padding: 0 var(--tog-pad-x) var(--tog-pad-y);
border: none;
}
/* ==========================================================================
TOGGLE AS A BUTTON + the Formular 230 embed
The XD "Redirecționează pentru natură" page shows this toggle as a green
button rather than a bordered row: clicking it opens the formular230.ro
form full width underneath. Add the class `toggle_button` to the widget in
Elementor (Advanced > CSS Classes) to get that variant; toggles without it
keep the bordered-box look above.
The chain repeats .elementor-widget-toggle so this lands one class above
the boxed rules it has to undo, instead of relying on source order.
The iframe sizing lives here, NOT in the widget's Content field. That
field is a TinyMCE editor: it wraps a pasted