/* ============================================================================
ACOPERIȘ SIGUR — DESIGN TOKENS (Brand v6.0 · "Systematic. Brutal. Scalable.")
----------------------------------------------------------------------------
Canonical single source of truth for the AcoperiÈ™ Sigur installer-network brand.
Every other layer (reset, base, components, sections) imports from these tokens.
DO NOT hardcode colors, fonts, radii, shadows, or spacing downstream — use vars.
Namespace ...... --as-* (AcoperiÈ™ Sigur)
Aesthetic ...... navy + amber keystone, sky support, slate ramp.
Space Grotesk display / Inter body / mono technical labels.
High-contrast, architectural, sharp data / warm CTAs.
Brand-swap ..... sister sites override only --as-accent + --as-accent-2
via [data-brand="..."] on (see overrides at bottom).
Supersedes ..... the legacy generic --vm-* system (Rubik / Playfair / soft SaaS).
============================================================================ */
:root {
/* ────────────────────────────────────────────────────────────────────────
1. CORE BRAND COLORS — the anchors. Never altered.
──────────────────────────────────────────────────────────────────────── */
--as-navy: #0F172A; /* primary dark — brutalist background, headings on light */
--as-navy-deep: #0A1424; /* deepest section / blueprint base */
--as-navy-soft: #1E293B; /* raised dark surface, card on dark */
--as-amber: #FFB627; /* THE KEYSTONE — action / accent / "SIGUR" wordmark */
--as-amber-dark: #E89E15; /* hover / pressed amber FILL (NOT for text on light: 2.25:1) */
--as-amber-light: #FFC757; /* highlights, amber glow tint */
--as-amber-text: #8A5A00; /* WCAG-AA amber for TEXT on light (amber-900-ish, 5.6:1) */
--as-sky: #0EA5E9; /* secondary accent — Acoperiș right pillar, icons (FILL ONLY) */
--as-sky-deep: #0284C7; /* sky hover / pressed */
--as-sky-text: #0369A1; /* WCAG-AA sky for TEXT/links on light (sky-700, 5.4:1) */
/* ────────────────────────────────────────────────────────────────────────
2. SLATE NEUTRAL RAMP — the structural greys (Tailwind slate, locked).
──────────────────────────────────────────────────────────────────────── */
--as-slate-900: #0F172A; /* == navy; ramp top */
--as-slate-800: #1E293B;
--as-slate-700: #334155;
--as-slate-600: #475569;
--as-slate-500: #64748B; /* concrete — muted text */
--as-slate-400: #94A3B8; /* placeholder / disabled / meta on light */
--as-slate-300: #CBD5E1; /* hairline / scrollbar */
--as-slate-200: #E2E8F0; /* default border */
--as-slate-100: #F1F5F9;
--as-slate-50: #F8FAFC; /* page background */
--as-white: #FFFFFF;
/* ────────────────────────────────────────────────────────────────────────
3. BRAND-SWAP LAYER — sister sites override these TWO vars only.
--as-accent = the keystone action color (stays amber across network)
--as-accent-2 / --as-accent-3 = the divisional support pillars.
Default = AcoperiÈ™ (sky pillars). See [data-brand] overrides below.
──────────────────────────────────────────────────────────────────────── */
--as-accent: var(--as-amber); /* shared keystone — same for whole network */
--as-accent-dark: var(--as-amber-dark);
--as-accent-2: var(--as-sky); /* divisional support pillar (right block) */
--as-accent-3: var(--as-white); /* divisional support pillar (left block) */
/* ────────────────────────────────────────────────────────────────────────
4. SEMANTIC COLOR TOKENS — what components actually reference.
──────────────────────────────────────────────────────────────────────── */
--as-bg: var(--as-slate-50); /* page canvas */
--as-bg-dark: var(--as-navy); /* dark sections (footer, hero, ticker) */
--as-surface: var(--as-white); /* cards, panels, inputs */
--as-surface-2: var(--as-slate-100); /* subtle raised / striped table row */
--as-surface-dark: var(--as-navy-soft); /* cards on dark sections */
--as-text: var(--as-slate-800); /* body copy */
--as-text-strong: var(--as-navy); /* headings on light */
--as-text-muted: var(--as-slate-500); /* captions, meta, secondary */
--as-text-faint: var(--as-slate-400); /* placeholders, disabled */
--as-border: var(--as-slate-200); /* default 1px hairline */
--as-border-strong: var(--as-slate-300); /* emphasized divider */
--as-border-dark: var(--as-slate-800); /* dividers on dark sections */
--as-action: var(--as-accent); /* primary CTA fill */
--as-action-hover: var(--as-accent-dark); /* primary CTA hover/pressed */
--as-action-text: var(--as-navy); /* text ON amber CTA (navy = max contrast) */
--as-on-dark: var(--as-white); /* text/icons on navy surfaces */
--as-on-dark-muted: var(--as-slate-400); /* secondary text on navy */
--as-on-amber: var(--as-navy); /* text on amber blocks/badges */
--as-link: var(--as-sky-text); /* AA-safe sky-700 for link TEXT on light (5.9:1) */
--as-link-hover: #075985; /* sky-800 — AA on light (7.6:1) */
--as-focus-ring: var(--as-sky); /* :focus-visible outline color */
/* Status (kept slate-disciplined, used for trust/inclusion tables) */
--as-success: #059669; /* fill / dot only — as TEXT on white = 3.77:1 (sub-AA) */
--as-success-text: #047857; /* WCAG-AA emerald-700 for success TEXT on light (5.5:1) */
--as-danger: #DC2626; /* AA as text on white (4.83:1) */
/* Blueprint texture inks (subtle grid motif on dark) */
--as-blueprint-bg: var(--as-navy-deep);
--as-blueprint-line: rgba(14, 165, 233, .15); /* sky grid lines @ low opacity */
/* ────────────────────────────────────────────────────────────────────────
5. TYPOGRAPHY — FONT FAMILIES
──────────────────────────────────────────────────────────────────────── */
--as-font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; /* headings, logo, numbers, eyebrows, buttons */
--as-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* paragraphs, UI text */
--as-font-mono: ui-monospace, 'JetBrains Mono', 'SFMono-Regular', Menlo,
Consolas, monospace; /* kN/mp, px, timestamps, technical labels */
/* FONT WEIGHTS (semantic) */
--as-fw-body: 400;
--as-fw-medium: 500; /* Inter UI / Space Grotesk sub-headlines */
--as-fw-semibold: 600; /* buttons, UI emphasis */
--as-fw-bold: 700; /* standard headlines */
/* NOTE: Space Grotesk (display face) tops out at 700 on Google Fonts —
it has NO 800/900 master. Requesting 800/900 = browser faux-bold
(smeared, cheap). So the display "heavy" tier is capped at 700; the
premium weight comes from 700 + tight tracking + scale, not a heavier
master. Inter (body) DOES ship 700/800, but these tokens drive display
elements, so 700 is the honest ceiling. */
--as-fw-extrabold: 700; /* high-impact H1/H2, "ACOPERIȘ" (SG max) */
--as-fw-black: 700; /* "SIGUR", hero numbers (SG max) */
/* ────────────────────────────────────────────────────────────────────────
6. TYPE SCALE — fluid clamp() sizing, mobile→desktop.
Display tier = Space Grotesk; text tier = Inter.
──────────────────────────────────────────────────────────────────────── */
--as-fs-eyebrow: clamp(0.6875rem, 0.62rem + 0.34vw, 0.8125rem); /* 11→13 uppercase label */
--as-fs-meta: clamp(0.75rem, 0.71rem + 0.20vw, 0.8125rem); /* 12→13 mono meta */
--as-fs-caption: clamp(0.8125rem,0.78rem + 0.17vw, 0.875rem); /* 13→14 */
--as-fs-body-sm: clamp(0.875rem, 0.85rem + 0.13vw, 0.9375rem); /* 14→15 */
--as-fs-body: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem); /* 16→17 base reading */
--as-fs-body-lg: clamp(1.125rem, 1.08rem + 0.23vw, 1.25rem); /* 18→20 lead paragraph */
--as-fs-h6: clamp(1rem, 0.96rem + 0.21vw, 1.125rem); /* 16→18 */
--as-fs-h5: clamp(1.125rem, 1.06rem + 0.31vw, 1.3125rem); /* 18→21 */
--as-fs-h4: clamp(1.25rem, 1.13rem + 0.59vw, 1.625rem); /* 20→26 */
--as-fs-h3: clamp(1.5rem, 1.30rem + 1.00vw, 2.125rem); /* 24→34 */
--as-fs-h2: clamp(1.875rem, 1.50rem + 1.88vw, 3rem); /* 30→48 */
--as-fs-h1: clamp(2.5rem, 1.85rem + 3.25vw, 4.5rem); /* 40→72 hero display */
--as-fs-display: clamp(3rem, 2.00rem + 5.00vw, 6rem); /* 48→96 oversized hero */
/* LINE HEIGHTS */
--as-lh-display: 0.95; /* oversized hero, tight */
--as-lh-tight: 1.05; /* H1/H2 display */
--as-lh-heading: 1.2; /* H3–H6 */
--as-lh-snug: 1.4; /* leads, UI */
--as-lh-body: 1.7; /* reading copy */
/* LETTER SPACING */
--as-ls-display: -0.03em; /* big Space Grotesk headlines, tight */
--as-ls-tight: -0.015em; /* H3/H4 */
--as-ls-normal: 0;
--as-ls-wide: 0.08em; /* eyebrows */
--as-ls-wider: 0.16em; /* uppercase tracking labels / badges */
--as-ls-mono: 0.02em; /* technical mono labels */
/* ────────────────────────────────────────────────────────────────────────
7. SPACING SCALE — 4px base, geometric vertical rhythm.
──────────────────────────────────────────────────────────────────────── */
--as-s-1: 4px;
--as-s-2: 8px;
--as-s-3: 12px;
--as-s-4: 16px;
--as-s-5: 24px;
--as-s-6: 32px;
--as-s-7: 48px;
--as-s-8: 64px;
--as-s-9: 80px;
--as-s-10: 96px;
--as-s-11: 128px;
--as-s-12: 160px;
--as-s-13: 192px;
--as-s-14: 224px;
--as-s-15: 256px;
--as-s-16: 320px;
/* Section rhythm (generous whitespace, fluid) */
--as-section-y: clamp(4rem, 2.5rem + 7.5vw, 8rem); /* 64→128 vertical section pad */
--as-section-y-sm: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);/* 40→72 compact section */
--as-gutter: clamp(1.25rem, 0.5rem + 3.75vw, 4rem);/* 20→64 horizontal page pad */
--as-stack: clamp(1rem, 0.85rem + 0.75vw, 1.5rem);/* default content stack gap */
/* ────────────────────────────────────────────────────────────────────────
8. RADII — consistent scale. Sharp where technical, soft only at CTAs/cards.
──────────────────────────────────────────────────────────────────────── */
--as-r-xs: 4px; /* badges, chips, inline tags */
--as-r-sm: 8px; /* inputs, small buttons */
--as-r-md: 12px; /* buttons, cards */
--as-r-lg: 16px; /* feature panels, image frames */
--as-r-xl: 20px; /* large hero/feature containers */
--as-r-2xl: 28px; /* full-bleed showcase blocks */
--as-r-pill: 9999px; /* pills, fully-round chips */
--as-r-sharp: 0px; /* brutalist hard edges — data tables, blueprints */
/* ────────────────────────────────────────────────────────────────────────
9. ELEVATION / SHADOWS — disciplined scale + gold glow for CTAs.
──────────────────────────────────────────────────────────────────────── */
--as-elev-1: 0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.07);
--as-elev-2: 0 4px 6px -1px rgba(15,23,42,.06), 0 10px 20px -5px rgba(15,23,42,.09);
--as-elev-3: 0 10px 25px -5px rgba(15,23,42,.11), 0 20px 40px -10px rgba(15,23,42,.13);
--as-elev-4: 0 24px 48px -12px rgba(15,23,42,.18), 0 40px 80px -20px rgba(15,23,42,.22);
--as-elev-gold: 0 8px 24px -4px rgba(255,182,39,.38), 0 4px 8px rgba(255,182,39,.20); /* CTA glow */
--as-elev-gold-sm: 0 4px 12px rgba(255,182,39,.40);
--as-elev-inset: inset 0 1px 0 rgba(255,255,255,.18); /* top sheen on raised buttons */
--as-elev-focus: 0 0 0 4px rgba(14,165,233,.18); /* focus halo (sky) */
/* ────────────────────────────────────────────────────────────────────────
10. BORDERS
──────────────────────────────────────────────────────────────────────── */
--as-bw-hair: 1px;
--as-bw-strong: 2px;
--as-bw-brutal: 3px; /* heavy brutalist accent border */
--as-border-hair: var(--as-bw-hair) solid var(--as-border);
--as-border-strong-line: var(--as-bw-strong) solid var(--as-border-strong);
--as-border-amber: var(--as-bw-strong) solid var(--as-accent);
--as-border-dark-line: var(--as-bw-hair) solid var(--as-border-dark);
/* ────────────────────────────────────────────────────────────────────────
11. TRANSITIONS / MOTION
──────────────────────────────────────────────────────────────────────── */
--as-ease-out: cubic-bezier(.4, 0, .2, 1);
--as-ease-in-out:cubic-bezier(.65, 0, .35, 1);
--as-ease-snap: cubic-bezier(.2, .9, .3, 1.2); /* slight overshoot for tactile CTAs */
--as-dur-fast: .15s;
--as-dur-base: .25s;
--as-dur-slow: .35s;
--as-t-fast: all var(--as-dur-fast) var(--as-ease-out);
--as-t-base: all var(--as-dur-base) var(--as-ease-out);
--as-t-transform:transform var(--as-dur-base) var(--as-ease-out), box-shadow var(--as-dur-base) ease;
/* ────────────────────────────────────────────────────────────────────────
12. LAYOUT — container max-widths
──────────────────────────────────────────────────────────────────────── */
--as-container: 1240px; /* default content max width */
--as-container-wide: 1440px; /* full showcase / hero band */
--as-container-narrow: 760px; /* article / reading column */
--as-container-form: 560px; /* forms / single-column CTA */
/* ────────────────────────────────────────────────────────────────────────
13. Z-INDEX LAYERS — named stacking contexts.
──────────────────────────────────────────────────────────────────────── */
--as-z-base: 0;
--as-z-ticker: 100; /* scrolling marquee / trust ticker */
--as-z-sticky: 200; /* sticky in-page sub-nav / sidebars */
--as-z-header: 1000; /* primary site header */
--as-z-wa: 1100; /* WhatsApp / floating contact bubble */
--as-z-menu: 1200; /* mobile nav drawer (over header) */
--as-z-cookie: 1300; /* cookie consent banner */
--as-z-modal: 1400; /* dialogs / lightbox */
--as-z-toast: 1500; /* toasts / top-most */
}
/* ============================================================================
BRAND-SWAP OVERRIDES — sister network sites.
Apply on the root element, e.g. .
Each division overrides ONLY its support pillars; the amber keystone
(--as-accent) stays constant across the whole "Sigure" network so the
trust mark reads consistently. Uncomment per deployment.
Palettes sourced from the v6.0 brand spec "Network Extension" section.
============================================================================ */
/* GEAMURI SIGURE — glass / teal + cyan
[data-brand="geamuri"] {
--as-accent-2: #06B6D4; /* glass cyan (right pillar) */
--as-accent-3: #0F766E; /* glass dark teal (left) */
--as-sky: #06B6D4; /* re-point secondary accent */
--as-sky-deep: #0E7490;
--as-link: #0E7490;
--as-blueprint-line: rgba(6,182,212,.15);
}
*/
/* CONSTRUCȚII SIGURE — concrete / slate
[data-brand="constructii"] {
--as-accent-2: #64748B; /* concrete (right pillar) */
--as-accent-3: #1E293B; /* asphalt slate (left) */
--as-sky: #64748B;
--as-sky-deep: #475569;
--as-link: #475569;
--as-blueprint-line: rgba(100,116,139,.18);
}
*/
/* IZOLAȚII SIGURE — insulation / rust + orange
[data-brand="izolatii"] {
--as-accent-2: #F97316; /* insulation orange (right) */
--as-accent-3: #9A3412; /* rust (left) */
--as-sky: #F97316;
--as-sky-deep: #C2410C;
--as-link: #C2410C;
--as-blueprint-line: rgba(249,115,22,.15);
}
*/
/* GARDURI SIGURE — fence / olive + lime
[data-brand="garduri"] {
--as-accent-2: #65A30D; /* lime (right pillar) */
--as-accent-3: #3F6212; /* olive (left) */
--as-sky: #65A30D;
--as-sky-deep: #4D7C0F;
--as-link: #4D7C0F;
--as-blueprint-line: rgba(101,163,13,.15);
}
*/
/* ===== SECTION: base + reset ===== */
/* ============================================================================
ACOPERIȘ SIGUR — BASE + RESET LAYER (Brand v6.0 · "Systematic. Brutal. Scalable.")
----------------------------------------------------------------------------
Foundational layer: imports brand fonts, normalizes box-model, sets the
html/body canvas (Inter body on slate-50, Space Grotesk reserved for the
heading layer), selection + focus-visible + scrollbar + reduced-motion,
:target scroll-margin, base media/table reset, and the .sr-only primitive.
Loads AFTER 00-tokens.css — references --as-* vars only, never raw hex that
duplicates a token. Supersedes the legacy --vm-* base block in the DOM
(#vm-global-polish / #vm-premium-v7), which used Karla/Rubik + duplicate
--vm-text tokens. !important is used ONLY to defeat Astra theme defaults and
Google-Fonts-injected Karla on (homepage.html:23/26), and is flagged
inline each time.
FONT LOADING: the mu-plugin (as-core.php) enqueues Space Grotesk (500;600;700),
Inter (400;500;600;700) and JetBrains Mono (400;500;600;700) via a single
in wp_head priority 2 — this is the SINGLE source of font loading.
The previous render-blocking @import here has been removed: it requested only
SG 500;700 (missing 600) and is redundant with the enqueue. Space Grotesk has
NO 800/900 master (max 700), which is why the weight tokens cap at 700.
============================================================================ */
/* ----------------------------------------------------------------------------
1. BOX MODEL — universal border-box + margin/padding zero-out.
---------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
/* ----------------------------------------------------------------------------
2. ROOT / HTML — smooth scroll, consistent text-size, tap behaviour.
---------------------------------------------------------------------------- */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
/* anchor scrolling clears the sticky Astra header (#masthead) + topbar */
scroll-padding-top: 96px;
tab-size: 4;
}
/* Honor users who prefer no motion — kill smooth scroll too. */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* ----------------------------------------------------------------------------
3. BODY — the canvas. Inter body copy on slate-50, premium smoothing.
!important defeats Astra's Karla body rule (homepage.html:23) +
the Google-Fonts Karla|Rubik enqueue (homepage.html:26).
---------------------------------------------------------------------------- */
body {
font-family: var(--as-font-body) !important; /* override Astra Karla */
font-size: var(--as-fs-body);
font-weight: var(--as-fw-body);
line-height: var(--as-lh-body);
letter-spacing: var(--as-ls-normal);
color: var(--as-text);
background-color: var(--as-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
min-height: 100vh;
/* Romanian copy — keep diacritics + wrapping sane */
overflow-wrap: break-word;
-webkit-tap-highlight-color: rgba(15, 23, 42, 0.12); /* navy @ low alpha */
}
/* Astra page wrapper / main column inherit the canvas cleanly. */
.hfeed.site,
#page,
#content,
#main {
background-color: transparent;
}
/* ----------------------------------------------------------------------------
4. MONO TECHNICAL LABEL — opt-in utility for kN/mp, px, timestamps, meta.
Applied by component/section layers via .as-mono; defined here so the
mono accent has a single canonical definition.
---------------------------------------------------------------------------- */
.as-mono,
[data-as-mono] {
font-family: var(--as-font-mono);
font-size: var(--as-fs-meta);
letter-spacing: var(--as-ls-mono);
font-variant-numeric: tabular-nums;
}
/* ----------------------------------------------------------------------------
5. SELECTION — amber keystone highlight, navy text for max contrast.
---------------------------------------------------------------------------- */
::selection {
background-color: var(--as-accent);
color: var(--as-on-amber);
text-shadow: none;
}
::-moz-selection {
background-color: var(--as-accent);
color: var(--as-on-amber);
text-shadow: none;
}
/* ----------------------------------------------------------------------------
6. FOCUS-VISIBLE — accessible amber ring. Keyboard users only (no mouse halo).
Amber on light + the sky focus halo token for depth; WCAG 2.2 friendly.
---------------------------------------------------------------------------- */
:focus:not(:focus-visible) {
outline: none;
}
:focus-visible {
outline: var(--as-bw-strong) solid var(--as-accent);
outline-offset: 2px;
border-radius: var(--as-r-xs);
}
/* Interactive elements get a touch more breathing room + the sky halo. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.wp-block-button__link:focus-visible,
.ast-button:focus-visible {
outline-offset: 3px;
box-shadow: var(--as-elev-focus);
}
/* ----------------------------------------------------------------------------
7. SCROLLBAR — subtle navy/slate, desktop only (don't fight mobile native UI).
---------------------------------------------------------------------------- */
@media (min-width: 768px) {
/* Firefox */
html {
scrollbar-width: thin;
scrollbar-color: var(--as-slate-300) transparent;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background-color: var(--as-slate-100);
}
::-webkit-scrollbar-thumb {
background-color: var(--as-slate-300);
border-radius: var(--as-r-pill);
border: 2px solid var(--as-slate-100); /* inset look */
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--as-slate-500);
}
::-webkit-scrollbar-thumb:active {
background-color: var(--as-navy);
}
::-webkit-scrollbar-corner {
background-color: transparent;
}
}
/* ----------------------------------------------------------------------------
8. :TARGET — anchor jumps clear the sticky header (defensive duplicate of
html scroll-padding for old engines + per-element control).
---------------------------------------------------------------------------- */
:target {
scroll-margin-top: 96px;
}
/* ----------------------------------------------------------------------------
9. MEDIA — responsive by default, no inline-gap baseline jitter.
---------------------------------------------------------------------------- */
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
max-width: 100%;
}
img,
video {
height: auto;
}
/* Preserve intrinsic SVG sizing when used as inline icons. */
svg {
fill: currentColor;
}
/* Decorative lazy images: gentle placeholder tint while loading. */
img[loading='lazy'] {
background-color: var(--as-surface-2);
}
/* ----------------------------------------------------------------------------
10. FORM CONTROLS — inherit brand typography (browsers default to system UI).
Sizing/borders/states are owned by the components layer; this is the
baseline so unstyled native controls still read as brand.
---------------------------------------------------------------------------- */
input,
button,
select,
textarea,
optgroup {
font-family: inherit;
font-size: 100%;
line-height: inherit;
color: inherit;
letter-spacing: inherit;
}
textarea {
resize: vertical;
}
::placeholder {
color: var(--as-text-faint);
opacity: 1; /* normalize Firefox */
}
/* ----------------------------------------------------------------------------
11. LINK BASELINE — sky link, no underline-by-default (components own CTAs).
Scoped tight so it never touches Astra menu links / buttons.
---------------------------------------------------------------------------- */
a {
color: var(--as-link);
text-decoration-color: color-mix(in srgb, var(--as-link) 45%, transparent);
text-underline-offset: 0.18em;
transition: var(--as-t-fast);
}
a:hover {
color: var(--as-link-hover);
}
/* ----------------------------------------------------------------------------
12. TABLE BASELINE — collapse borders, brutalist sharp edges for data.
Components layer styles trust/inclusion tables; this is the reset.
---------------------------------------------------------------------------- */
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
th,
td {
text-align: left;
vertical-align: top;
padding: 0;
}
th {
font-family: var(--as-font-display);
font-weight: var(--as-fw-bold);
color: var(--as-text-strong);
}
/* Lists used as semantic content keep markers; UI lists opt out via component. */
ul,
ol {
list-style-position: outside;
}
/* Horizontal rule = hairline divider in the slate ramp. */
hr {
border: 0;
border-top: var(--as-border-hair);
margin-block: var(--as-s-6);
}
/* ----------------------------------------------------------------------------
13. .sr-only / SCREEN-READER — visually hidden but accessible.
Provide both the brand .sr-only and harden Astra/WP .screen-reader-text
(used on the .skip-link at homepage.html:2919) so it can't leak on focus.
---------------------------------------------------------------------------- */
.sr-only,
.screen-reader-text {
position: absolute !important; /* must beat theme defaults to stay hidden */
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Allow re-exposing on focus (skip-links). */
.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
position: static !important;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
clip-path: none;
white-space: normal;
}
/* ----------------------------------------------------------------------------
14. SKIP LINKS — both the custom .vm-skip-link (href #main, homepage.html:428)
and Astra's .skip-link.screen-reader-text (href #content,
homepage.html:2919). Rebrand to navy bar + amber text, reveal on focus.
---------------------------------------------------------------------------- */
.vm-skip-link,
.skip-link.screen-reader-text {
position: absolute;
top: -120px;
left: var(--as-s-2);
z-index: var(--as-z-toast);
padding: var(--as-s-3) var(--as-s-5);
background-color: var(--as-bg-dark);
color: var(--as-accent) !important; /* beat .screen-reader-text color rules */
font-family: var(--as-font-display);
font-weight: var(--as-fw-bold);
font-size: var(--as-fs-body-sm);
letter-spacing: var(--as-ls-wide);
text-transform: uppercase;
text-decoration: none;
border-radius: var(--as-r-sm);
box-shadow: var(--as-elev-3);
transition: top var(--as-dur-base) var(--as-ease-out);
}
.vm-skip-link:focus,
.skip-link.screen-reader-text:focus {
/* override .screen-reader-text's absolute-hide so it appears on Tab */
top: var(--as-s-2);
width: auto !important;
height: auto !important;
margin: 0 !important;
clip: auto !important;
clip-path: none !important;
overflow: visible !important;
outline: var(--as-bw-strong) solid var(--as-accent);
outline-offset: 2px;
}
/* ----------------------------------------------------------------------------
15. REDUCED MOTION — collapse animation/transition durations site-wide.
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important; /* must beat per-component animations */
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ----------------------------------------------------------------------------
16. RESPONSIVE — tighten anchor offset on small screens (shorter header).
---------------------------------------------------------------------------- */
@media (max-width: 768px) {
html {
scroll-padding-top: 72px;
}
:target {
scroll-margin-top: 72px;
}
}
/* ============================================================================
15 — UTILITY SUBSET (replaces the Tailwind Play CDN, which is DEV-ONLY:
it JIT-compiles in the browser → FOUC + ships a global preflight reset that
fought Astra/master alignment site-wide. This is the exact finite subset the
site uses (98 classes), defined statically = production-grade, no FOUC, no reset.
Brand colors map to current tokens; font-heading/body map to Space Grotesk/Inter
(the live brand) instead of the config's stale Rubik/Karla.
============================================================================ */
/* ---- display / layout ---- */
.block{display:block}
.inline{display:inline}
.flex{display:flex}
.grid{display:grid}
.hidden{display:none}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.items-stretch{align-items:stretch}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.relative{position:relative}
.absolute{position:absolute}
.w-full{width:100%}
.w-5{width:20px}.h-5{height:20px}
.w-2\.5{width:10px}.h-2\.5{height:10px}
.h-2{height:8px}
.mx-auto{margin-left:auto;margin-right:auto}
/* ---- gaps / spacing ---- */
.gap-6{gap:24px}
.gap-x-8{column-gap:32px}
.gap-y-3{row-gap:12px}
.space-y-2>*+*{margin-top:8px}
.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}
.mb-5{margin-bottom:20px}.mb-8{margin-bottom:32px}.mb-10{margin-bottom:40px}.mb-12{margin-bottom:48px}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-8{margin-top:32px}
.mr-3{margin-right:12px}.ml-1{margin-left:4px}.mx-2{margin-left:8px;margin-right:8px}
.p-4{padding:16px}.p-6{padding:24px}
.px-4{padding-left:16px;padding-right:16px}.px-6{padding-left:24px;padding-right:24px}
.py-3{padding-top:12px;padding-bottom:12px}.py-4{padding-top:16px;padding-bottom:16px}
/* ---- max widths ---- */
.max-w-2xl{max-width:42rem}
.max-w-5xl{max-width:64rem}
.max-w-6xl{max-width:72rem}
/* ---- type ---- */
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.font-medium{font-weight:500}
.font-bold{font-weight:700}
.font-extrabold{font-weight:800}
.font-heading{font-family:var(--as-font-display)}
.font-body{font-family:var(--as-font-body)}
.uppercase{text-transform:uppercase}
.italic{font-style:italic}
.text-center{text-align:center}
.leading-none{line-height:1}
.leading-tight{line-height:1.25}
.leading-relaxed{line-height:1.625}
.tracking-wider{letter-spacing:.05em}
.tracking-\[3px\]{letter-spacing:3px}
/* ---- colors (brand) ---- */
.text-white{color:#fff}
.text-white\/70{color:rgba(255,255,255,.70)}
.text-white\/50{color:rgba(255,255,255,.50)}
.text-white\/20{color:rgba(255,255,255,.20)}
.text-accent{color:var(--as-accent,#FFB627)}
.text-primary{color:var(--as-sky,#0EA5E9)}
.text-text-dark{color:#1A202C}
.text-text-muted{color:#4A5568}
.text-text-light{color:#94A3B8}
.bg-white{background-color:#fff}
.bg-white\/5{background-color:rgba(255,255,255,.05)}
.bg-white\/10{background-color:rgba(255,255,255,.10)}
.bg-accent{background-color:var(--as-accent,#FFB627)}
.bg-primary{background-color:var(--as-sky,#0EA5E9)}
.bg-gray-50{background-color:#F9FAFB}
/* ---- radius / border / shadow / blur ---- */
.rounded-lg{border-radius:8px}
.rounded-xl{border-radius:12px}
.rounded-2xl{border-radius:16px}
.rounded-full{border-radius:9999px}
.border{border-width:1px;border-style:solid}
.border-2{border-width:2px;border-style:solid}
.border-l-4{border-left-width:4px;border-left-style:solid}
.border-primary{border-color:var(--as-sky,#0EA5E9)}
.border-white\/10{border-color:rgba(255,255,255,.10)}
.shadow-vm-card{box-shadow:0 1px 3px rgba(15,23,42,.04)}
.shadow-vm-cta{box-shadow:0 8px 20px rgba(14,165,233,.35)}
.backdrop-blur{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* ---- responsive md: (>=768px) ---- */
@media (min-width:768px){
.md\:inline{display:inline}
.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.md\:gap-8{gap:32px}
.md\:p-8{padding:32px}
.md\:text-base{font-size:1rem;line-height:1.5rem}
.md\:text-lg{font-size:1.125rem;line-height:1.75rem}
.md\:text-2xl{font-size:1.5rem;line-height:2rem}
.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}
.md\:text-5xl{font-size:3rem;line-height:1}
}
/* ---- previously-missing utilities (caused: amber radio dots, dead button hovers) ---- */
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.appearance-none{-webkit-appearance:none;appearance:none;}
.accent-accent{accent-color:var(--as-accent,#FFB627);}
.cursor-pointer{cursor:pointer;}
.transform{transform:translate(0,0);}
.transition-all{transition:all .2s cubic-bezier(.4,0,.2,1);}
.transition-opacity{transition:opacity .2s cubic-bezier(.4,0,.2,1);}
.hover\:-translate-y-0\.5:hover{transform:translateY(-2px);}
.hover\:bg-cyan-600:hover{background-color:#0284C7;}
.hover\:bg-white\/10:hover{background-color:rgba(255,255,255,.10);}
.hover\:border-primary\/60:hover{border-color:rgba(14,165,233,.60);}
.hover\:shadow-vm-card-hover:hover{box-shadow:0 20px 40px rgba(15,23,42,.10);}
/* ---- BULLETPROOF alignment/layout: utilities must win over Astra/theme specificity
(these are authoritative layout intents — the user reported sections looking
off-center; force the win so it can never lose a specificity battle) ---- */
.text-center{text-align:center !important;}
.mx-auto{margin-left:auto !important;margin-right:auto !important;}
.max-w-2xl{max-width:42rem !important;}
.max-w-5xl{max-width:64rem !important;}
.max-w-6xl{max-width:72rem !important;}
.flex{display:flex !important;}
.grid{display:grid !important;}
.hidden{display:none !important;}
.items-center{align-items:center !important;}
.items-stretch{align-items:stretch !important;}
.justify-center{justify-content:center !important;}
.justify-between{justify-content:space-between !important;}
@media (min-width:768px){
.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
.md\:inline{display:inline !important;}
}
/* ---- DYNAMIC classes from Alpine :class bindings (not in static class= attrs, so the
earlier scan missed them). opacity-0 is what hides the unselected radio dot. ---- */
.opacity-0{opacity:0;}
.opacity-100{opacity:1;}
.border-accent{border-color:var(--as-accent,#FFB627);}
.border-primary\/60{border-color:rgba(14,165,233,.60);}
.border-white\/30{border-color:rgba(255,255,255,.30);}
.bg-primary\/15{background-color:rgba(14,165,233,.15);}
.bg-cyan-600{background-color:#0284C7;}
.shadow-vm-card-hover{box-shadow:0 20px 40px rgba(15,23,42,.10);}
.text-2xl{font-size:1.5rem;line-height:2rem;}
.text-4xl{font-size:2.25rem;line-height:2.5rem;}
.text-5xl{font-size:3rem;line-height:1;}
.gap-8{gap:32px;}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.p-8{padding:32px;}
/* ===== SECTION: typography ===== */
/* ============================================================================
ACOPERIȘ SIGUR — TYPOGRAPHY LAYER (Brand v6.0 · "Systematic. Brutal. Scalable.")
----------------------------------------------------------------------------
Site-wide type system. Supersedes the legacy 5-family sprawl
(Karla / Rubik / Playfair / Inter-ghost / JetBrains Mono) with the
canonical pairing:
DISPLAY → Space Grotesk (headings, logo, numbers, eyebrows, buttons)
BODY → Inter (paragraphs, UI text)
MONO → JetBrains Mono / ui-monospace (technical labels: kN/mp, px, meta)
All values reference tokens from 00-tokens.css. No hardcoded hex/px that
duplicates a token. !important is used ONLY where it must beat:
- Astra theme base rules (the giant inline stylesheet, font-family: Karla)
- prior override hooks 2562/2814/2826/2831/2832 (font-family: Rubik/Playfair !important)
- Tailwind CDN utilities on the homepage hero (font-heading, text-* utilities)
- WordPress inline style="font-family:'Playfair Display'..." on stat numbers
Each !important block notes WHY inline. Real selectors only — confirmed
against homepage.html + service.html + blogpost.html DOM snapshots.
============================================================================ */
/* ────────────────────────────────────────────────────────────────────────────
0. BODY DEFAULT — Inter reading copy.
The canonical body base typography (font-family/size/weight/line-height/
color/letter-spacing + smoothing/rendering) lives ONCE in 10-base.css §3
(the canvas owner). It is intentionally NOT re-declared here to avoid a
duplicate body{} rule. Only the form-control inheritance is set below,
since Astra hardcodes Karla on UI controls too.
──────────────────────────────────────────────────────────────────────────── */
/* Form controls inherit Inter too (Astra sets these to Karla as well). */
button,
input,
select,
optgroup,
textarea,
.ast-button,
.menu-link {
font-family: var(--as-font-body) !important; /* beats Astra inline Karla on UI controls */
}
/* ────────────────────────────────────────────────────────────────────────────
1. HEADINGS — Space Grotesk display family, fluid scale, tight tracking.
Covers native h1–h6 + every heading class found in the DOM:
.wp-block-heading (Gutenberg) .section-headline
.vm-vs-title .vm-mat-title .vm-bh-title .widget-title
.entry-title .font-heading (Tailwind util, homepage hero)
!important is required because hooks 2562/2814/2826/2831 set
`font-family:'Rubik' !important` on these same selectors.
──────────────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.entry-title,
.widget-title,
.section-headline,
.vm-vs-title,
.vm-mat-title,
.vm-bh-title,
.font-heading {
font-family: var(--as-font-display) !important; /* beats hook Rubik !important + Astra base */
font-weight: var(--as-fw-bold);
line-height: var(--as-lh-heading);
letter-spacing: var(--as-ls-tight);
color: var(--as-text-strong);
text-wrap: balance; /* prevents orphan words on multi-line heads */
-webkit-font-smoothing: antialiased;
}
/* Per-level fluid sizing, weight & rhythm.
Native + Gutenberg + custom heading classes share each tier so the scale
is consistent regardless of which builder authored the block. */
h1,
.entry-title,
.vm-bh-title {
font-size: var(--as-fs-h1);
font-weight: var(--as-fw-extrabold);
line-height: var(--as-lh-tight);
letter-spacing: var(--as-ls-display);
margin-bottom: var(--as-s-5);
}
h2,
.section-headline,
.vm-vs-title,
.vm-mat-title {
font-size: var(--as-fs-h2);
font-weight: var(--as-fw-extrabold);
line-height: var(--as-lh-tight);
letter-spacing: var(--as-ls-display);
margin-bottom: var(--as-s-5);
}
h3 {
font-size: var(--as-fs-h3);
font-weight: var(--as-fw-bold);
line-height: var(--as-lh-heading);
margin-bottom: var(--as-s-4);
}
h4,
.widget-title {
font-size: var(--as-fs-h4);
font-weight: var(--as-fw-bold);
line-height: var(--as-lh-heading);
margin-bottom: var(--as-s-3);
}
h5 {
font-size: var(--as-fs-h5);
font-weight: var(--as-fw-semibold);
line-height: var(--as-lh-heading);
margin-bottom: var(--as-s-3);
}
h6 {
font-size: var(--as-fs-h6);
font-weight: var(--as-fw-semibold);
line-height: var(--as-lh-snug);
margin-bottom: var(--as-s-2);
}
/* Headings rendered on dark/navy sections (Gutenberg `has-white-color`,
hero h1/h2, footer widget titles) read in white. Confirmed classes:
`has-white-color has-text-color` on hero/CTA h1/h2. */
.has-white-color.has-text-color,
.ast-builder-html-element h2,
[style*="color:#FFFFFF"] h2,
.site-footer .widget-title,
.ast-footer-widget .widget-title {
color: var(--as-on-dark);
}
/* In-heading amber accent. The DOM convention is a
or inside titles (e.g. "numere reale", .vm-mat-title em, .vm-vs-title span).
Re-point those to the keystone token; keep them in the display family (drop
the old Playfair italic — brand v6.0 has no serif).
!important overrides the inline style="color:#FFB627;font-style:italic" and
hook 2826/2831 `font-style:italic !important`. */
/* Accent words on LIGHT sections: bright amber #FFB627 on white = 1.75:1, which
FAILS even the 3:1 large-text bar. Use the AA-safe deep-amber text token so the
keystone "accent word" stays warm/gold but is actually readable (5.9:1). */
.section-headline span[style*="FFB627" i],
.section-headline span[style*="ffb627" i],
.vm-vs-title span,
.vm-mat-title em,
.wp-block-heading em,
h1 em, h2 em, h3 em {
color: var(--as-amber-text) !important; /* AA on light (bright amber was 1.75:1) */
font-family: inherit !important; /* kill prior Playfair on accents */
font-style: normal !important; /* kill prior forced italic */
font-weight: var(--as-fw-black);
}
/* Accent word on the DARK blog hero keeps the bright keystone amber (AA on navy). */
.vm-bh-title span {
color: var(--as-accent) !important;
font-family: inherit !important;
font-style: normal !important;
font-weight: var(--as-fw-black);
}
/* ────────────────────────────────────────────────────────────────────────────
2. EYEBROWS / KICKERS — uppercase, wide tracking, amber, display family.
Real classes: .vm-vs-eyebrow .vm-mat-eyebrow .vm-bh-eyebrow .eyebrow
+ the Tailwind kicker pattern
`.text-accent ... uppercase tracking-[3px] font-heading`.
NOTE: .section-eyebrow is intentionally NOT in this list — it has its single
canonical definition in 50-components.css §14 (section-header primitives) to
avoid a duplicate .section-eyebrow rule. The four classes below share the
same eyebrow styling here.
Several live eyebrows are authored sky-blue (.vm-mat-eyebrow color:#0EA5E9);
we unify on the AA-safe sky text token; the architectural "tick" rule stays.
──────────────────────────────────────────────────────────────────────────── */
.vm-vs-eyebrow,
.vm-mat-eyebrow,
.vm-bh-eyebrow,
.eyebrow {
font-family: var(--as-font-display) !important; /* beats hook Rubik !important */
font-weight: var(--as-fw-bold);
font-size: var(--as-fs-eyebrow);
line-height: var(--as-lh-snug);
text-transform: uppercase;
letter-spacing: var(--as-ls-wider) !important; /* beats hook letter-spacing:.25em !important */
/* AA fix: amber #FFB627 as eyebrow TEXT on white = 1.75:1 (FAIL). These eyebrows sit on
light sections, so use the AA-safe sky text token. Eyebrows on DARK sections
(.vm-bh-eyebrow) are re-set to amber in 80-blog.css where amber-on-navy passes. */
color: var(--as-sky-text) !important;
margin: 0 0 var(--as-s-3);
}
/* Architectural lead-in tick — preserve the existing ::before hairline on
.vm-mat-eyebrow (DOM authored it), re-tinted to the keystone. */
.vm-mat-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--as-s-2);
}
.vm-mat-eyebrow::before {
content: "";
width: 24px;
height: 1px;
background: currentColor;
}
/* ────────────────────────────────────────────────────────────────────────────
3. LEAD / SUBHEAD PARAGRAPHS — Inter, larger, comfortable measure.
Real classes: .section-lead .vm-vs-lead .vm-mat-lead .vm-bh-lead
.vm-map-sub .lead
──────────────────────────────────────────────────────────────────────────── */
.section-lead,
.vm-vs-lead,
.vm-mat-lead,
.vm-bh-lead,
.vm-map-sub,
.lead {
font-family: var(--as-font-body) !important; /* beats Astra Karla base */
font-size: var(--as-fs-body-lg);
font-weight: var(--as-fw-body);
line-height: var(--as-lh-snug);
color: var(--as-text-muted);
max-width: 64ch;
margin: 0 auto var(--as-s-7);
}
/* Centered leads keep their auto margins; left-aligned section leads
(.vm-mat-lead .vm-vs-lead — left-aligned in DOM) reset to flush-left. */
.vm-mat-lead,
.vm-vs-lead {
margin-left: 0;
margin-right: 0;
}
/* ────────────────────────────────────────────────────────────────────────────
4. PARAGRAPHS & READING COPY.
Base p + the article body (.entry-content). Tighter editorial measure
on single-post / page reading columns.
──────────────────────────────────────────────────────────────────────────── */
p {
margin: 0 0 var(--as-s-5);
line-height: var(--as-lh-body);
}
.entry-content p,
.single-post .entry-content p,
.page-template-default .entry-content p {
font-family: var(--as-font-body) !important; /* beats Astra/hook base on article body */
font-size: var(--as-fs-body);
line-height: var(--as-lh-body);
color: var(--as-text);
margin: 0 0 var(--as-s-5);
}
/* Long-form reading column gets a constrained measure for legibility. */
.single-post .entry-content,
.page .entry-content {
max-width: var(--as-container-narrow);
}
.single-post .entry-content > .alignfull,
.single-post .entry-content > .alignwide {
max-width: none; /* full/wide blocks escape the reading measure */
}
/* First-paragraph emphasis on articles — subtle lead-in. */
.single-post .entry-content > p:first-of-type {
font-size: var(--as-fs-body-lg);
color: var(--as-text-strong);
line-height: var(--as-lh-snug);
}
/* ────────────────────────────────────────────────────────────────────────────
5. LINKS — body/article links get the animated amber underline.
Uses background-size on a gradient so the underline grows on hover
(tasteful, not a hard text-decoration jump). Excludes buttons, menu
links, and theme/UI link patterns so we don't underline CTAs/nav.
──────────────────────────────────────────────────────────────────────────── */
.entry-content a:not(.wp-block-button__link):not(.wp-element-button):not([class*="btn"]):not([class*="ast-button"]):not(.menu-link):not([class*="vm-"]) {
color: var(--as-link);
text-decoration: none;
font-weight: var(--as-fw-medium);
background-image: linear-gradient(var(--as-accent), var(--as-accent));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0% var(--as-bw-strong); /* underline hidden at rest */
padding-bottom: 1px;
transition: background-size var(--as-dur-base) var(--as-ease-out),
color var(--as-dur-fast) var(--as-ease-out);
}
.entry-content a:not(.wp-block-button__link):not(.wp-element-button):not([class*="btn"]):not([class*="ast-button"]):not(.menu-link):not([class*="vm-"]):hover,
.entry-content a:not(.wp-block-button__link):not(.wp-element-button):not([class*="btn"]):not([class*="ast-button"]):not(.menu-link):not([class*="vm-"]):focus-visible {
color: var(--as-text-strong);
background-size: 100% var(--as-bw-strong); /* underline sweeps in on hover */
}
/* Blog index / archive post titles are links — keep them in the display family,
navy at rest, amber on hover (no creeping underline on headline links). */
.archive .entry-title a,
body.blog .entry-title a {
color: var(--as-text-strong);
text-decoration: none;
transition: color var(--as-dur-fast) var(--as-ease-out);
}
.archive .entry-title a:hover,
body.blog .entry-title a:hover {
color: var(--as-amber-text); /* amber-700 — AA on light cards (amber-dark was 2.25:1) */
}
/* ────────────────────────────────────────────────────────────────────────────
6. STRONG / EM / SMALL.
appears throughout body + injected widgets (FAQ answers, ticker,
footer). outside headings reads as warm amber emphasis.
──────────────────────────────────────────────────────────────────────────── */
strong,
b,
.entry-content strong {
font-weight: var(--as-fw-bold);
color: var(--as-text-strong);
}
/* On dark sections strong should stay readable (white, not navy). */
.has-white-color strong,
.site-footer strong,
[style*="color:#FFFFFF"] strong {
color: inherit;
}
em,
i {
font-style: italic;
}
/* Body-copy emphasis (not inside a heading) → keystone amber, upright-ish. */
.entry-content em {
color: var(--as-amber-text); /* amber-700 — true AA on light (amber-dark was 2.25:1) */
font-style: italic;
font-weight: var(--as-fw-medium);
}
small,
.text-sm {
font-size: var(--as-fs-caption);
color: var(--as-text-muted);
}
/* ────────────────────────────────────────────────────────────────────────────
7. LISTS — comfortable rhythm in article body.
Real selectors: .entry-content ul / ol (Gutenberg .wp-block-list maps here).
──────────────────────────────────────────────────────────────────────────── */
.entry-content ul,
.entry-content ol,
.single-post .entry-content ul,
.single-post .entry-content ol {
font-family: var(--as-font-body) !important; /* beats Astra Karla base */
font-size: var(--as-fs-body);
line-height: var(--as-lh-body);
color: var(--as-text);
margin: 0 0 var(--as-s-5);
padding-left: var(--as-s-6);
}
.entry-content li {
margin-bottom: var(--as-s-2);
}
.entry-content li::marker {
color: var(--as-accent); /* amber bullets/numbers — keystone touch */
}
.entry-content ul {
list-style: disc;
}
.entry-content ol {
list-style: decimal;
}
/* Nested lists tighten a level. */
.entry-content li > ul,
.entry-content li > ol {
margin: var(--as-s-2) 0 var(--as-s-2);
}
/* ────────────────────────────────────────────────────────────────────────────
8. BLOCKQUOTE — refined, architectural. Amber left rule, Space Grotesk pull,
navy-soft tint panel. No serif (brand v6.0 has none). Premium, not cheap.
Targets Gutenberg .wp-block-quote + article blockquote.
──────────────────────────────────────────────────────────────────────────── */
.entry-content blockquote,
.single-post .entry-content blockquote,
blockquote.wp-block-quote {
font-family: var(--as-font-display);
font-weight: var(--as-fw-medium);
font-size: var(--as-fs-h5);
line-height: var(--as-lh-snug);
letter-spacing: var(--as-ls-tight);
color: var(--as-text-strong);
margin: var(--as-s-7) 0;
padding: var(--as-s-5) var(--as-s-6);
background: var(--as-surface-2);
border-left: var(--as-bw-brutal) solid var(--as-accent); /* 3px keystone rule */
border-radius: 0 var(--as-r-md) var(--as-r-md) 0;
position: relative;
}
/* Oversized opening quotation glyph — display-font, faint amber, behind text. */
.entry-content blockquote::before,
blockquote.wp-block-quote::before {
content: "\201C"; /* left double quote */
position: absolute;
top: calc(-1 * var(--as-s-2));
left: var(--as-s-4);
font-family: var(--as-font-display);
font-weight: var(--as-fw-black);
font-size: 4rem;
line-height: 1;
color: var(--as-accent);
opacity: .22;
pointer-events: none;
}
.entry-content blockquote p,
blockquote.wp-block-quote p {
font-family: inherit !important; /* keep display family inside quote (beats .entry-content p) */
font-size: inherit;
color: inherit;
margin-bottom: var(--as-s-3);
}
.entry-content blockquote p:last-child {
margin-bottom: 0;
}
/* Citation — mono technical voice, muted, uppercase tracking. */
.entry-content blockquote cite,
blockquote.wp-block-quote cite,
.wp-block-quote__citation,
blockquote .wp-block-quote__citation {
display: block;
margin-top: var(--as-s-3);
font-family: var(--as-font-mono);
font-style: normal;
font-size: var(--as-fs-meta);
font-weight: var(--as-fw-medium);
letter-spacing: var(--as-ls-mono);
text-transform: uppercase;
color: var(--as-text-muted);
}
.entry-content blockquote cite::before,
blockquote.wp-block-quote cite::before {
content: "\2014\00A0"; /* em-dash + nbsp, encoding-proof */
color: var(--as-accent);
}
/* ────────────────────────────────────────────────────────────────────────────
9. TECHNICAL / MONO LABELS & NUMBERS.
Keep JetBrains Mono ONLY for genuinely technical meta (timestamps, units,
.meta, .portfolio-meta) — NOT for headings/body. This corrects the
off-positioning where mono leaked into general UI.
──────────────────────────────────────────────────────────────────────────── */
.meta,
.portfolio-meta,
.entry-meta,
.posted-on,
time.entry-date {
font-family: var(--as-font-mono);
font-size: var(--as-fs-meta);
font-weight: var(--as-fw-medium);
letter-spacing: var(--as-ls-mono);
color: var(--as-text-muted);
text-transform: uppercase;
}
/* Stat / counter numerals → display family, tabular, tight. The DOM ships
these as inline style="font-family:'Playfair Display'...font-style:italic"
on .vm-counter-num, plus hook 2826 forces Playfair on .vm-stat-num/.vm-tech-val.
!important is required to beat that inline style + hook.
We keep tabular-nums + tight tracking but swap to Space Grotesk (brand). */
.vm-counter-num,
.vm-stat-num,
.vm-tech-val,
.stat-number,
.stats-number {
font-family: var(--as-font-display) !important; /* beats inline Playfair + hook 2826 */
font-style: normal !important; /* kill inline italic */
font-weight: var(--as-fw-black);
font-variant-numeric: tabular-nums lining-nums;
letter-spacing: var(--as-ls-display);
}
/* ────────────────────────────────────────────────────────────────────────────
10. SELECTION & MISC.
──────────────────────────────────────────────────────────────────────────── */
::selection {
background: var(--as-accent);
color: var(--as-on-amber);
}
hr,
.wp-block-separator {
border: 0;
border-top: var(--as-border-hair);
margin: var(--as-s-7) 0;
}
.wp-block-separator.is-style-wide {
border-top: var(--as-border-strong-line);
}
/* Inline code / kbd — mono, subtle chip (used in technical guides). */
.entry-content code,
.entry-content kbd {
font-family: var(--as-font-mono);
font-size: 0.9em;
background: var(--as-surface-2);
color: var(--as-text-strong);
padding: 2px 6px;
border-radius: var(--as-r-xs);
border: var(--as-border-hair);
}
/* ────────────────────────────────────────────────────────────────────────────
11. RESPONSIVE — tablet / mobile rhythm.
The clamp() type scale already fluidly shrinks; these tighten margins
and the blockquote glyph on small screens.
──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
h1, .entry-title, .vm-bh-title,
h2, .section-headline, .vm-vs-title, .vm-mat-title {
margin-bottom: var(--as-s-4);
}
.section-lead,
.vm-vs-lead,
.vm-mat-lead,
.vm-bh-lead,
.vm-map-sub,
.lead {
margin-bottom: var(--as-s-6);
}
.entry-content blockquote,
blockquote.wp-block-quote {
padding: var(--as-s-4) var(--as-s-5);
margin: var(--as-s-6) 0;
}
.entry-content blockquote::before,
blockquote.wp-block-quote::before {
font-size: 3rem;
}
}
@media (max-width: 480px) {
.entry-content ul,
.entry-content ol {
padding-left: var(--as-s-5);
}
/* Slightly looser body line-height on narrow screens for readability. */
.entry-content p {
line-height: var(--as-lh-body);
}
}
/* ────────────────────────────────────────────────────────────────────────────
12. REDUCED MOTION — disable the animated underline sweep.
──────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.entry-content a {
transition: none;
}
}
/* ===== SECTION: layout ===== */
/* ============================================================================
ACOPERIȘ SIGUR — LAYOUT (Brand v6.0 · "Systematic. Brutal. Scalable.")
----------------------------------------------------------------------------
Owns: page shell, containers, full/wide alignment, section vertical rhythm,
Gutenberg group/column spacing, gap scale, vertical rhythm between blocks.
Root cause being fixed: every block hard-codes inline `padding:80px 24px`
(or 100px) so the previously-defined clamp() rhythm was purely decorative.
This layer re-establishes ONE fluid section rhythm via --as-section-y and
defeats the inline padding only where it exists (inline style => must use
!important to win the cascade; nowhere else).
Theme context (confirmed from DOM):
#content.site-content > .ast-container > #primary.content-area.primary
> #main.site-main > article > .entry-content.clear > [blocks]
Astra 4.13 · ast-page-builder-template · ast-no-sidebar (full-width)
Pages: homepage = body.page-id-2477 (.home) · county-hub = .page-id-2709
============================================================================ */
/* ────────────────────────────────────────────────────────────────────────
1. PAGE SHELL — kill horizontal overflow, neutralize Astra's own padded
container so our full-bleed blocks can truly span edge-to-edge.
──────────────────────────────────────────────────────────────────────── */
html,
body {
overflow-x: hidden; /* belt-and-suspenders against full-bleed math */
max-width: 100vw;
}
/* Astra's full-width builder template already removes the sidebar; we want the
content column itself to be edge-to-edge so alignfull works without seams. */
.ast-page-builder-template .site-content > .ast-container {
max-width: 100%;
padding-left: 0;
padding-right: 0;
display: block; /* drop Astra's grid so content-area is full */
}
.ast-page-builder-template .content-area.primary,
.ast-page-builder-template #primary,
.ast-page-builder-template .site-main,
.ast-page-builder-template .ast-article-single,
.ast-page-builder-template .entry-content.clear {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
/* The block-editor content stream itself is the layout root for the page. */
.entry-content.clear {
display: flow-root; /* contain block margins, no rhythm collapse */
}
/* ────────────────────────────────────────────────────────────────────────
2. CONTAINER PRIMITIVES — reusable max-width + horizontal gutter.
Centers content; gutter is fluid (--as-gutter = 20→64px).
──────────────────────────────────────────────────────────────────────── */
.as-container,
.as-container-wide,
.as-container-narrow,
.as-container-form {
width: 100%;
margin-inline: auto;
padding-inline: var(--as-gutter);
}
.as-container { max-width: var(--as-container); } /* 1240 default */
.as-container-wide { max-width: var(--as-container-wide); } /* 1440 showcase */
.as-container-narrow { max-width: var(--as-container-narrow); } /* 760 article */
.as-container-form { max-width: var(--as-container-form); } /* 560 form / CTA */
/* ────────────────────────────────────────────────────────────────────────
3. GUTENBERG ALIGNMENT — full-bleed + wide, the WP way.
.alignfull spans the viewport; its INNER constrained content is centered
at --as-container. .alignwide caps at --as-container-wide.
──────────────────────────────────────────────────────────────────────── */
/* Full-bleed band — escape any centered parent, span the whole viewport. */
.entry-content .alignfull {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* Wide band — wider than reading column but not full bleed. */
.entry-content .alignwide {
max-width: var(--as-container-wide);
margin-left: auto;
margin-right: auto;
}
/* Constrained groups center their own content at the default container width.
WP exposes this via --wp--style--global--content-size / wide-size; we pin it
to our tokens so every constrained block lines up on the same grid. */
.entry-content .is-layout-constrained {
--wp--style--global--content-size: var(--as-container);
--wp--style--global--wide-size: var(--as-container-wide);
}
/* The inner constrained children of a full-bleed group get centered + gutter,
so a full-width navy band still keeps its text on the 1240 grid. */
.entry-content .alignfull.is-layout-constrained > :where(:not(.alignfull):not(.alignwide)) {
max-width: var(--as-container);
margin-left: auto;
margin-right: auto;
}
.entry-content .alignfull.is-layout-constrained > .alignwide {
max-width: var(--as-container-wide);
margin-left: auto;
margin-right: auto;
}
/* Cover blocks: keep the inner container on-grid + horizontally gutter-padded. */
.entry-content .wp-block-cover.alignfull > .wp-block-cover__inner-container {
width: 100%;
max-width: var(--as-container);
margin-inline: auto;
padding-inline: var(--as-gutter);
}
/* Tailwind-utility inner wrappers used by the calculator / custom sections
(max-w-5xl mx-auto etc.) — make sure they still get the page gutter so they
never kiss the viewport edge on mid-size screens. */
.entry-content .alignfull > .mx-auto[class*="max-w-"] {
padding-inline: var(--as-gutter);
}
/* ────────────────────────────────────────────────────────────────────────
4. SECTION VERTICAL RHYTHM — the core fix.
ONE fluid scale for every top-level band. !important is required ONLY
because the bands carry inline `padding:80px 24px` / `padding-top:100px`
that would otherwise win. We keep horizontal padding on the token gutter
and let the rhythm token drive the vertical.
──────────────────────────────────────────────────────────────────────── */
/* Standard full-bleed / cover bands and constrained groups in the flow. */
.entry-content > .alignfull,
.entry-content > .wp-block-group.alignfull,
.entry-content > .wp-block-cover.alignfull:not(.is-hero),
.entry-content > .wp-block-uagb-container[data-block-type="container"] {
padding-top: var(--as-section-y) !important; /* override inline 80/100px */
padding-bottom: var(--as-section-y) !important;
padding-left: var(--as-gutter) !important;
padding-right: var(--as-gutter) !important;
}
/* Hero cover keeps a taller, intentional rhythm (it sets the page's first
impression). Still token-driven, never an arbitrary inline number. */
.entry-content > .wp-block-cover.is-hero {
padding-top: calc(var(--as-section-y) * 1.15) !important;
padding-bottom: calc(var(--as-section-y) * 1.15) !important;
padding-left: var(--as-gutter) !important;
padding-right: var(--as-gutter) !important;
}
/* Custom vm-* bands that are also full-bleed sections (counter, marquee).
The trust-strip is a compact band, so it uses the small rhythm. */
.entry-content > .vm-counter-section.alignfull {
padding-top: var(--as-section-y) !important;
padding-bottom: var(--as-section-y) !important;
padding-left: var(--as-gutter) !important;
padding-right: var(--as-gutter) !important;
}
.entry-content > .vm-trust-strip {
padding-block: var(--as-section-y-sm);
padding-inline: var(--as-gutter);
}
/* Marquee is a thin moving strip — no big vertical pad, just breathing room. */
.entry-content > .vm-marquee.alignfull {
padding-block: var(--as-s-5);
}
/* ────────────────────────────────────────────────────────────────────────
5. VERTICAL RHYTHM BETWEEN BLOCKS — kill stray block margins so the
section padding (above) is the single source of inter-section spacing.
Adjacent same-color bands shouldn't double their gap, and the WP default
top-margin on blocks must not fight our padding rhythm.
──────────────────────────────────────────────────────────────────────── */
.entry-content > * {
margin-block: 0; /* sections butt cleanly; padding owns rhythm */
}
/* Re-establish a calm flow gap ONLY for loose blocks that are NOT full bands
(e.g. a stray paragraph/heading dropped straight in the stream). */
.entry-content > :where(p, h2, h3, h4, ul, ol):not(.alignfull):not(.alignwide) {
max-width: var(--as-container);
margin-inline: auto;
margin-block: var(--as-stack);
padding-inline: var(--as-gutter);
}
/* ────────────────────────────────────────────────────────────────────────
6. GUTENBERG GROUP / COLUMNS — consistent gap scale + inner container.
Inner constrained containers stay on the grid; columns use one gap token.
──────────────────────────────────────────────────────────────────────── */
/* Inner container of a constrained group = the on-grid content column. */
.entry-content .wp-block-group__inner-container,
.entry-content .wp-block-group.is-layout-constrained > :where(:not(.alignfull):not(.alignwide)) {
margin-inline: auto;
}
/* Columns: single horizontal+vertical gap token (no per-block ad-hoc gaps). */
.entry-content .wp-block-columns {
display: flex;
flex-wrap: wrap;
gap: var(--as-s-6); /* 32px desktop column gutter */
align-items: stretch;
margin-block: 0;
}
.entry-content .wp-block-columns.alignwide {
max-width: var(--as-container-wide);
margin-inline: auto;
}
/* A single column flexes by its set width or fills evenly when unflagged. */
.entry-content .wp-block-column {
flex-basis: 0;
flex-grow: 1;
min-width: 0; /* allow shrink; prevent overflow on long text */
margin: 0;
}
/* Honor explicit column flex-basis (WP inline width) but never overflow. */
.entry-content .wp-block-column[style*="flex-basis"] {
flex-grow: 0;
}
/* Stack gap inside groups/columns: normalize WP block-gap to our stack token
so content rhythm inside a panel matches the rest of the system. */
.entry-content .wp-block-group.is-layout-constrained,
.entry-content .wp-block-column.is-layout-flow {
--wp--style--block-gap: var(--as-stack);
}
/* ────────────────────────────────────────────────────────────────────────
7. MEDIA — never let an image/iframe/table blow out a column.
──────────────────────────────────────────────────────────────────────── */
.entry-content img,
.entry-content video,
.entry-content iframe,
.entry-content figure,
.entry-content table {
max-width: 100%;
}
/* ────────────────────────────────────────────────────────────────────────
8. PAGE-SPECIFIC — homepage (2477) + county-hub (2709) share the same
stream layout; alternating soft surface on adjacent plain bands gives
a quiet vertical rhythm without random backgrounds.
──────────────────────────────────────────────────────────────────────── */
.page-id-2477 .entry-content > .wp-block-group.alignfull:not(.has-background):nth-of-type(even),
.page-id-2709 .entry-content > .wp-block-group.alignfull:not(.has-background):nth-of-type(even) {
background-color: var(--as-surface-2); /* slate-100 — token, not a hex */
}
/* ────────────────────────────────────────────────────────────────────────
9. RESPONSIVE — tighten gutters & rhythm on tablet / phone, stack columns.
Breakpoints: 768 (tablet), 480 (phone). The clamp tokens already scale
smoothly; these rules handle structural collapse only.
──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* Columns stack to a single column below tablet. */
.entry-content .wp-block-columns {
flex-direction: column;
gap: var(--as-s-5); /* 24px stacked gutter */
}
.entry-content .wp-block-column {
flex-basis: auto !important; /* override WP inline flex-basis when stacked */
width: 100% !important;
}
}
@media (max-width: 480px) {
/* Trim the section rhythm a touch on phones so bands don't feel cavernous;
still token-derived, still consistent. !important to beat inline padding. */
.entry-content > .alignfull,
.entry-content > .wp-block-group.alignfull,
.entry-content > .wp-block-cover.alignfull:not(.is-hero),
.entry-content > .vm-counter-section.alignfull {
padding-top: var(--as-section-y-sm) !important;
padding-bottom: var(--as-section-y-sm) !important;
padding-left: var(--as-s-4) !important; /* 16px — tight phone gutter */
padding-right: var(--as-s-4) !important;
}
.entry-content > .wp-block-cover.is-hero {
padding-top: var(--as-section-y) !important;
padding-bottom: var(--as-section-y) !important;
padding-left: var(--as-s-4) !important;
padding-right: var(--as-s-4) !important;
}
/* Inner gutters follow the tight phone gutter too. */
.entry-content .wp-block-cover.alignfull > .wp-block-cover__inner-container,
.entry-content .alignfull > .mx-auto[class*="max-w-"],
.as-container,
.as-container-wide,
.as-container-narrow,
.as-container-form {
padding-inline: var(--as-s-4);
}
}
/* ===== SECTION: BUTTONS & CTA SYSTEM ===== */
/* ----------------------------------------------------------------------------
Acoperiș Sigur — Brand v6.0 "Systematic. Brutal. Scalable."
The conversion layer. One disciplined button primitive, mapped onto the real
live classes (Astra .ast-custom-button-link / WP .wp-block-button__link /
custom .vm-*). Primary = amber keystone + navy text + Space Grotesk 700 +
gold-glow on hover + tactile press. Secondary = navy. Ghost = outline-on-dark.
Sizes sm / base / lg. Icon+label flex-aligned. Tap target >= 44px everywhere.
!important is used ONLY where Astra/WP ship competing inline styles or theme
defaults we must override (color tokens on .has-*-color, inline border-radius,
per-block inline padding). Each such use is annotated.
---------------------------------------------------------------------------- */
/* ============================================================================
1. SHARED BUTTON PRIMITIVE
The single source of truth for every clickable CTA. Real classes share it.
============================================================================ */
.wp-block-button__link,
.wp-element-button,
a.ast-custom-button-link .ast-custom-button,
.vm-header-cta,
.vm-cta-btn,
a.vm-cta-yellow,
a.vm-cta-outline,
input[type="submit"],
button[type="submit"],
.srfm-submit-btn,
.srfm-submit-richtext-container button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--as-s-2); /* icon ↔ label rhythm */
font-family: var(--as-font-display); /* Space Grotesk — kills Rubik */
font-weight: var(--as-fw-bold); /* 700 */
font-size: var(--as-fs-body-sm);
line-height: 1;
letter-spacing: var(--as-ls-tight);
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
border: 0;
border-radius: var(--as-r-md); /* 12px — one CTA radius, network-wide */
/* 44px+ tap target: 15px block padding + ~17px cap height ≈ 47px */
padding: 15px var(--as-s-6);
min-height: 48px;
position: relative;
isolation: isolate;
-webkit-appearance: none;
appearance: none;
transition: var(--as-t-transform),
background-color var(--as-dur-base) var(--as-ease-out),
border-color var(--as-dur-base) var(--as-ease-out),
color var(--as-dur-base) var(--as-ease-out);
will-change: transform;
}
/* Icon sizing inside any button (emoji or inline SVG) */
.wp-block-button__link svg,
.wp-element-button svg,
.vm-header-cta svg,
.vm-cta-btn svg {
width: 1.15em;
height: 1.15em;
flex: 0 0 auto;
fill: currentColor;
}
/* ============================================================================
2. PRIMARY — AMBER KEYSTONE (the money button)
Amber fill, navy text, Space Grotesk 700, gold glow on hover, tactile press.
Maps onto: amber WP buttons, the legacy yellow aliases, custom .vm-cta-btn,
and the SureForms submit. This is the default for solid (non-outline) WP btns.
============================================================================ */
.wp-block-button:not(.is-style-outline):not(.is-style-outline--1):not(.is-style-outline--2) .wp-block-button__link,
.wp-block-button__link.has-vivid-yellow-background-color,
.wp-block-button__link[style*="background-color:#FFB627"],
.wp-block-button__link[style*="background-color:#ffb627"],
.vm-cta-btn,
.vm-header-cta,
a.vm-cta-yellow,
input[type="submit"],
button[type="submit"],
.srfm-submit-btn,
.srfm-submit-richtext-container button {
/* !important: overrides Astra/WP inline background-color + .has-*-color tokens */
background: var(--as-action) !important;
color: var(--as-action-text) !important; /* navy on amber = max contrast */
box-shadow: var(--as-elev-gold-sm), var(--as-elev-inset);
}
.wp-block-button:not(.is-style-outline):not(.is-style-outline--1):not(.is-style-outline--2) .wp-block-button__link:hover,
.wp-block-button__link.has-vivid-yellow-background-color:hover,
.wp-block-button__link[style*="background-color:#FFB627"]:hover,
.vm-cta-btn:hover,
.vm-header-cta:hover,
a.vm-cta-yellow:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.srfm-submit-btn:hover,
.srfm-submit-richtext-container button:hover {
background: var(--as-action-hover) !important; /* amber-dark */
color: var(--as-action-text) !important;
transform: translateY(-2px);
box-shadow: var(--as-elev-gold), var(--as-elev-inset);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:active,
.vm-cta-btn:active,
.vm-header-cta:active,
input[type="submit"]:active,
button[type="submit"]:active,
.srfm-submit-btn:active {
transform: translateY(0); /* tactile press settle */
box-shadow: var(--as-elev-gold-sm);
transition-duration: var(--as-dur-fast);
}
/* ============================================================================
3. SECONDARY — CYAN-BLUE WP buttons re-skinned to NAVY (architectural)
Solid navy fill, white text, sky accent on hover. The "second" action.
Targets the cyan-blue blocks shipped in the DOM (hero left/contact strip).
============================================================================ */
.wp-block-button__link.has-vivid-cyan-blue-background-color,
.wp-block-button__link[style*="background-color:#0EA5E9"] {
/* !important: overrides WP .has-vivid-cyan-blue-background-color token */
background: var(--as-navy) !important;
color: var(--as-on-dark) !important;
box-shadow: var(--as-elev-2);
}
.wp-block-button__link.has-vivid-cyan-blue-background-color:hover,
.wp-block-button__link[style*="background-color:#0EA5E9"]:hover {
background: var(--as-navy-soft) !important;
color: var(--as-on-dark) !important;
transform: translateY(-2px);
box-shadow: var(--as-elev-3), inset 0 0 0 1px var(--as-accent-2); /* sky hairline rim */
}
.wp-block-button__link.has-vivid-cyan-blue-background-color:active {
transform: translateY(0);
box-shadow: var(--as-elev-2);
transition-duration: var(--as-dur-fast);
}
/* ============================================================================
4. GHOST / OUTLINE-ON-DARK
WP outline blocks (is-style-outline + brand variants --1 / --2) live mostly
on dark hero/cover bands. Sky-tinted outline, white text, fills softly on hover.
============================================================================ */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline--1 .wp-block-button__link,
.wp-block-button.is-style-outline--2 .wp-block-button__link,
a.vm-cta-outline {
/* !important: overrides WP/Astra inline border + background:transparent none */
background: transparent !important;
color: var(--as-on-dark) !important;
border: var(--as-bw-strong) solid rgba(255, 255, 255, .45) !important;
box-shadow: none;
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline--1 .wp-block-button__link:hover,
.wp-block-button.is-style-outline--2 .wp-block-button__link:hover,
a.vm-cta-outline:hover {
background: rgba(255, 255, 255, .10) !important;
border-color: var(--as-white) !important;
color: var(--as-white) !important;
transform: translateY(-2px);
}
.wp-block-button.is-style-outline .wp-block-button__link:active,
a.vm-cta-outline:active {
transform: translateY(0);
transition-duration: var(--as-dur-fast);
}
/* Ghost on LIGHT background (when an outline button sits on the page canvas):
slate outline + navy text, amber wash on hover. */
.entry-content :not(.wp-block-cover):not([class*="navy"]):not([class*="dark"]) > .wp-block-button.is-style-outline .wp-block-button__link {
color: var(--as-text-strong) !important;
border-color: var(--as-border-strong) !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.entry-content :not(.wp-block-cover):not([class*="navy"]):not([class*="dark"]) > .wp-block-button.is-style-outline .wp-block-button__link:hover {
border-color: var(--as-accent) !important;
background: rgba(255, 182, 39, .10) !important; /* amber wash — token-derived tint */
color: var(--as-text-strong) !important;
}
/* ============================================================================
5. ASTRA HEADER CTA — .ast-custom-button-link (desktop "Cere ofertă")
Astra wraps a label div .ast-custom-button inside the anchor. Style the inner
div as the visible pill; neutralise the duplicate .menu-link sibling.
============================================================================ */
a.ast-custom-button-link {
display: inline-flex;
text-decoration: none;
line-height: 1;
}
a.ast-custom-button-link .ast-custom-button {
/* !important: overrides Astra header-button theme color/padding defaults */
background: var(--as-action) !important;
color: var(--as-action-text) !important;
font-family: var(--as-font-display);
font-weight: var(--as-fw-bold);
font-size: var(--as-fs-body-sm) !important;
letter-spacing: var(--as-ls-tight);
padding: 11px 22px !important;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--as-r-sm) !important; /* 8px — compact header scale */
box-shadow: var(--as-elev-gold-sm), var(--as-elev-inset);
transition: var(--as-t-transform), background-color var(--as-dur-base) var(--as-ease-out);
}
a.ast-custom-button-link:hover .ast-custom-button {
background: var(--as-action-hover) !important;
transform: translateY(-2px);
box-shadow: var(--as-elev-gold);
}
a.ast-custom-button-link:active .ast-custom-button {
transform: translateY(0);
transition-duration: var(--as-dur-fast);
}
/* Astra ships a duplicate plain-text .menu-link beside the button — hide it */
.ast-builder-button-wrap > a.menu-link {
display: none;
}
/* Header CTA injected variant: compact, amber, never wraps */
.vm-header-cta {
margin-left: var(--as-s-4);
padding: 11px 20px;
min-height: 44px;
border-radius: var(--as-r-sm) !important; /* 8px header scale */
font-size: var(--as-fs-body-sm);
}
/* ============================================================================
6. SIZE MODIFIERS — sm / base / lg (base = primitive default above)
Apply alongside any CTA class, e.g. .
WP custom-font-size blocks set inline font-size; we govern padding/min-height.
============================================================================ */
.vm-btn-sm,
.wp-block-button.is-style-sm .wp-block-button__link {
padding: 10px var(--as-s-4) !important;
min-height: 44px; /* WCAG floor even at "sm" */
font-size: var(--as-fs-caption);
border-radius: var(--as-r-sm) !important; /* 8px */
}
.vm-btn-lg,
.wp-block-button.is-style-lg .wp-block-button__link {
padding: 19px var(--as-s-7) !important;
min-height: 60px;
font-size: var(--as-fs-body-lg);
border-radius: var(--as-r-lg) !important; /* 16px */
}
.vm-btn-block,
.wp-block-button.is-style-block .wp-block-button__link {
display: flex;
width: 100%;
}
/* ============================================================================
7. COVER / HERO buttons — keep gold-glow legibility on dark imagery
Real selector: .wp-block-cover .wp-block-button__link
============================================================================ */
.wp-block-cover .wp-block-button:not(.is-style-outline) .wp-block-button__link {
box-shadow: var(--as-elev-gold); /* stronger glow lifts off photo */
}
.wp-block-cover .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
box-shadow: var(--as-elev-gold), 0 0 0 1px rgba(255, 255, 255, .12);
}
/* ============================================================================
8. MOBILE STICKY ACTION BAR — #vm-mobile-sticky (phone / WhatsApp / form)
Three equal CTAs pinned bottom on mobile. Sharp, branded, >=48px tall.
============================================================================ */
#vm-mobile-sticky a {
display: flex;
align-items: center;
justify-content: center;
gap: var(--as-s-1);
flex: 1;
min-height: 48px;
font-family: var(--as-font-display);
font-weight: var(--as-fw-extrabold); /* 800 — small label, needs weight */
font-size: var(--as-fs-caption);
letter-spacing: var(--as-ls-tight);
line-height: 1.05;
text-align: center;
text-decoration: none;
border-radius: var(--as-r-sm); /* 8px */
transition: transform var(--as-dur-fast) var(--as-ease-out);
}
#vm-mobile-sticky .vm-sticky-phone {
background: var(--as-action);
color: var(--as-action-text);
}
#vm-mobile-sticky .vm-sticky-whatsapp {
background: #25D366; /* WhatsApp brand green — external mark */
color: var(--as-white);
}
#vm-mobile-sticky .vm-sticky-form {
background: var(--as-sky-text); /* sky-700 fill so white label passes AA (5.9:1; #0EA5E9 was 2.77:1) */
color: var(--as-on-dark);
}
#vm-mobile-sticky a:active {
transform: scale(.96); /* tactile tap feedback */
}
/* Floating sticky form (desktop) submit — JS injects