/* file: core/csd-theme.css * CSDesign parent theme CSS * * Structura fișierului: * 00. Design tokens * 01. Reset, base și accesibilitate * 02. Tipografie și utilitare de spacing * 03. Layout primitives: container, section, grid, split * 04. Header, topbar și navigație * 05. Sidebar * 06. Conținut editorial: breadcrumb, meta, media, cards, lists, list icons, FAQ, gallery * 07. Archive/cards * 08. Footer * 09. Responsive global * 10. 404 / Not found * 11. Search form * 12. Comments * 13. Buttons * 14. Icon utilities și icon blocks * 15. Back to top * 16. Captions * * Reguli de mentenanță: * - Nu adăuga override-uri la finalul fișierului. * - Modifică selectorul în capitolul lui. * - Dacă apare o variantă responsive, stă lângă componenta ei când este specifică acelei componente. * - Secțiunea responsive globală rămâne doar pentru corecții cross-component. */ /* ========================================================================== 00. DESIGN TOKENS ========================================================================== */ :root { /* SPACING SCALE */ --csd-space-2xs: 4px; --csd-space-xs: 8px; --csd-space-sm: 12px; --csd-space-md: 16px; --csd-space-lg: 24px; --csd-space-xl: 32px; --csd-space-2xl: 48px; --csd-space-3xl: 64px; --csd-space-4xl: 96px; --csd-space-5xl: 128px; /* TYPO SCALE – semantic sizes used in theme.css */ --csd-font-meta: 14px; --csd-font-small: 13px; --csd-font-caption: 12px; --csd-font-size-body: var(--csd-font-p, 16px); --csd-font-size-xs: 13px; --csd-font-size-sm: 14px; --csd-font-size-md: var(--csd-font-p, 16px); --csd-font-size-lg: 18px; /* FORM CONTROLS */ --csd-form-control-height: 46px; --csd-form-control-padding-y: 10px; --csd-form-control-padding-x: 12px; --csd-form-control-border: rgba(15, 23, 42, 0.18); --csd-form-control-border-focus: rgba(15, 23, 42, 0.46); --csd-form-control-focus-ring: rgba(15, 23, 42, 0.10); /* RADIUS */ --csd-radius-sm: 4px; --csd-radius-md: 8px; --csd-radius-lg: 16px; --csd-radius-pill: 999px; /* SHADOW */ --csd-shadow-sm: 0 2px 6px rgba(15,23,42,.06); --csd-shadow-md: 0 8px 24px rgba(15,23,42,.08); /* Z-INDEX SCALE */ --csd-z-base: 1; --csd-z-dropdown: 100; --csd-z-overlay: 1000; --csd-z-offcanvas: 1100; --csd-z-modal: 1200; /* BREAKPOINTS */ --csd-bp-mobile: 767px; --csd-bp-tablet: 768px; --csd-bp-desktop: 1024px; --csd-bp-wide: 1280px; /* LAYOUT */ --csd-grid-gutter: var(--csd-space-lg); --csd-line-height-body: 1.66; --csd-line-height-heading: 1.2; --csd-container-width: 1200px; /* ========================================================================== DERIVED COLOR TOKENS Acestea pornesc din culorile deja setate dinamic în temă: --csd-primary --csd-secondary --csd-accent1 --csd-accent2 --csd-neutral-light --csd-neutral-dark ========================================================================== */ /* Fallback simplu: light = culoarea de bază */ --csd-primary-light: var(--csd-primary); --csd-secondary-light: var(--csd-secondary); --csd-accent1-light: var(--csd-accent1); --csd-accent2-light: var(--csd-accent2); /* BUTTON TOKENS */ --csd-btn-primary-bg-hover: var(--csd-primary-light); --csd-btn-secondary-bg-hover: var(--csd-secondary-light); --csd-btn-accent1-bg-hover: var(--csd-accent1-light); --csd-btn-accent2-bg-hover: var(--csd-accent2-light); --csd-btn-soft-bg: rgba(0,0,0,0.05); --csd-btn-soft-primary-hover-bg: rgba(0,0,0,0.08); --csd-btn-soft-secondary-hover-bg: rgba(0,0,0,0.08); --csd-btn-soft-accent1-hover-bg: rgba(0,0,0,0.08); --csd-btn-soft-accent2-hover-bg: rgba(0,0,0,0.08); /* SOFT COLOR TOKENS – fallback fără color-mix */ --csd-primary-soft: rgba(0,0,0,0.04); --csd-secondary-soft: rgba(0,0,0,0.05); --csd-accent1-soft: rgba(0,0,0,0.04); --csd-accent2-soft: rgba(0,0,0,0.05); /* BADGE TEXT TOKENS * Optional per-site overrides for palettes with light accent colors. */ --csd-badge-primary-text: var(--csd-primary); --csd-badge-secondary-text: var(--csd-secondary); --csd-badge-accent1-text: var(--csd-accent1); --csd-badge-accent2-text: var(--csd-accent2); } @supports (background: color-mix(in srgb, red 10%, white)) { :root { /* Light variants derivate automat din culorile site-ului */ --csd-primary-light: color-mix(in srgb, var(--csd-primary) 82%, white); --csd-secondary-light: color-mix(in srgb, var(--csd-secondary) 82%, white); --csd-accent1-light: color-mix(in srgb, var(--csd-accent1) 82%, white); --csd-accent2-light: color-mix(in srgb, var(--csd-accent2) 82%, white); /* Soft backgrounds */ --csd-primary-soft: color-mix(in srgb, var(--csd-primary) 14%, white); --csd-secondary-soft: color-mix(in srgb, var(--csd-secondary) 10%, white); --csd-accent1-soft: color-mix(in srgb, var(--csd-accent1) 16%, white); --csd-accent2-soft: color-mix(in srgb, var(--csd-accent2) 18%, white); } } /* ========================================================================== 01. RESET, BASE & ACCESSIBILITY ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { /* Nu este acceptabil global: overflow-ul nu se ascunde pe document. */ /* overflow-x: hidden; */ } body { font-family: var(--csd-font-body); font-size: var(--csd-font-size-body); line-height: var(--csd-line-height-body); color: var(--csd-neutral-dark); background: #ffffff; margin: 0; } /* Breakpoints (single source of truth in :root media) - Mobile: max-width: var(--csd-bp-mobile) - Tablet+: min-width: var(--csd-bp-tablet) - Desktop+: min-width: var(--csd-bp-desktop) - XL+: min-width: var(--csd-bp-wide) */ a { color: var(--csd-primary); text-decoration: none; transition: color .2s ease; } a:hover { color: var(--csd-primary); } a:visited, a:active { color: var(--csd-primary); } a:focus { outline: none; } a:focus-visible { outline: 2px solid var(--csd-primary); outline-offset: 2px; } /* ========================================================================== 02. TYPOGRAPHY & SPACING UTILITIES ========================================================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--csd-font-head); line-height: var(--csd-line-height-heading); margin-top: 0; margin-bottom: var(--csd-space-md); } h1 { font-size: var(--csd-font-h1); } h2 { font-size: var(--csd-font-h2); } h3 { font-size: var(--csd-font-h3); } h4 { font-size: var(--csd-font-h4); } h5 { font-size: var(--csd-font-h5); } h6 { font-size: var(--csd-font-h6); } .entry-content > * + h2, .entry-content > * + h3 { margin-top: var(--csd-space-lg); } p { margin-top: 0; margin-bottom: var(--csd-space-md); } p a:hover, .entry-content a:hover { text-decoration: underline; } ul, ol { margin: 0 0 1.5em 0.5em; } img { display: block; max-width: 100%; height: auto; } /* Spacing utilities – token based, generated from 00. Design tokens. */ /* Zero reset helpers */ .csd-p-0 { padding: 0; } .csd-pt-0 { padding-top: 0; } .csd-pr-0 { padding-right: 0; } .csd-pb-0 { padding-bottom: 0; } .csd-pl-0 { padding-left: 0; } .csd-px-0 { padding-left: 0; padding-right: 0; } .csd-py-0 { padding-top: 0; padding-bottom: 0; } .csd-m-0 { margin: 0; } .csd-mt-0 { margin-top: 0; } .csd-mr-0 { margin-right: 0; } .csd-mb-0 { margin-bottom: 0; } .csd-ml-0 { margin-left: 0; } .csd-mx-0 { margin-left: 0; margin-right: 0; } .csd-my-0 { margin-top: 0; margin-bottom: 0; } /* Padding: all / axis / side */ .csd-p-2xs { padding: var(--csd-space-2xs); } .csd-px-2xs { padding-left: var(--csd-space-2xs); padding-right: var(--csd-space-2xs); } .csd-py-2xs, .csd-ptb-2xs { padding-top: var(--csd-space-2xs); padding-bottom: var(--csd-space-2xs); } .csd-pt-2xs { padding-top: var(--csd-space-2xs); } .csd-pr-2xs { padding-right: var(--csd-space-2xs); } .csd-pb-2xs { padding-bottom: var(--csd-space-2xs); } .csd-pl-2xs { padding-left: var(--csd-space-2xs); } .csd-p-xs { padding: var(--csd-space-xs); } .csd-px-xs { padding-left: var(--csd-space-xs); padding-right: var(--csd-space-xs); } .csd-py-xs, .csd-ptb-xs { padding-top: var(--csd-space-xs); padding-bottom: var(--csd-space-xs); } .csd-pt-xs { padding-top: var(--csd-space-xs); } .csd-pr-xs { padding-right: var(--csd-space-xs); } .csd-pb-xs { padding-bottom: var(--csd-space-xs); } .csd-pl-xs { padding-left: var(--csd-space-xs); } .csd-p-sm { padding: var(--csd-space-sm); } .csd-px-sm { padding-left: var(--csd-space-sm); padding-right: var(--csd-space-sm); } .csd-py-sm, .csd-ptb-sm { padding-top: var(--csd-space-sm); padding-bottom: var(--csd-space-sm); } .csd-pt-sm { padding-top: var(--csd-space-sm); } .csd-pr-sm { padding-right: var(--csd-space-sm); } .csd-pb-sm { padding-bottom: var(--csd-space-sm); } .csd-pl-sm { padding-left: var(--csd-space-sm); } .csd-p-md { padding: var(--csd-space-md); } .csd-px-md { padding-left: var(--csd-space-md); padding-right: var(--csd-space-md); } .csd-py-md, .csd-ptb-md { padding-top: var(--csd-space-md); padding-bottom: var(--csd-space-md); } .csd-pt-md { padding-top: var(--csd-space-md); } .csd-pr-md { padding-right: var(--csd-space-md); } .csd-pb-md { padding-bottom: var(--csd-space-md); } .csd-pl-md { padding-left: var(--csd-space-md); } .csd-p-lg { padding: var(--csd-space-lg); } .csd-px-lg { padding-left: var(--csd-space-lg); padding-right: var(--csd-space-lg); } .csd-py-lg, .csd-ptb-lg { padding-top: var(--csd-space-lg); padding-bottom: var(--csd-space-lg); } .csd-pt-lg { padding-top: var(--csd-space-lg); } .csd-pr-lg { padding-right: var(--csd-space-lg); } .csd-pb-lg { padding-bottom: var(--csd-space-lg); } .csd-pl-lg { padding-left: var(--csd-space-lg); } .csd-p-xl { padding: var(--csd-space-xl); } .csd-px-xl { padding-left: var(--csd-space-xl); padding-right: var(--csd-space-xl); } .csd-py-xl, .csd-ptb-xl { padding-top: var(--csd-space-xl); padding-bottom: var(--csd-space-xl); } .csd-pt-xl { padding-top: var(--csd-space-xl); } .csd-pr-xl { padding-right: var(--csd-space-xl); } .csd-pb-xl { padding-bottom: var(--csd-space-xl); } .csd-pl-xl { padding-left: var(--csd-space-xl); } .csd-p-2xl { padding: var(--csd-space-2xl); } .csd-px-2xl { padding-left: var(--csd-space-2xl); padding-right: var(--csd-space-2xl); } .csd-py-2xl, .csd-ptb-2xl { padding-top: var(--csd-space-2xl); padding-bottom: var(--csd-space-2xl); } .csd-pt-2xl { padding-top: var(--csd-space-2xl); } .csd-pr-2xl { padding-right: var(--csd-space-2xl); } .csd-pb-2xl { padding-bottom: var(--csd-space-2xl); } .csd-pl-2xl { padding-left: var(--csd-space-2xl); } .csd-p-3xl { padding: var(--csd-space-3xl); } .csd-px-3xl { padding-left: var(--csd-space-3xl); padding-right: var(--csd-space-3xl); } .csd-py-3xl, .csd-ptb-3xl { padding-top: var(--csd-space-3xl); padding-bottom: var(--csd-space-3xl); } .csd-pt-3xl { padding-top: var(--csd-space-3xl); } .csd-pr-3xl { padding-right: var(--csd-space-3xl); } .csd-pb-3xl { padding-bottom: var(--csd-space-3xl); } .csd-pl-3xl { padding-left: var(--csd-space-3xl); } .csd-p-4xl { padding: var(--csd-space-4xl); } .csd-px-4xl { padding-left: var(--csd-space-4xl); padding-right: var(--csd-space-4xl); } .csd-py-4xl, .csd-ptb-4xl { padding-top: var(--csd-space-4xl); padding-bottom: var(--csd-space-4xl); } .csd-pt-4xl { padding-top: var(--csd-space-4xl); } .csd-pr-4xl { padding-right: var(--csd-space-4xl); } .csd-pb-4xl { padding-bottom: var(--csd-space-4xl); } .csd-pl-4xl { padding-left: var(--csd-space-4xl); } .csd-p-5xl { padding: var(--csd-space-5xl); } .csd-px-5xl { padding-left: var(--csd-space-5xl); padding-right: var(--csd-space-5xl); } .csd-py-5xl, .csd-ptb-5xl { padding-top: var(--csd-space-5xl); padding-bottom: var(--csd-space-5xl); } .csd-pt-5xl { padding-top: var(--csd-space-5xl); } .csd-pr-5xl { padding-right: var(--csd-space-5xl); } .csd-pb-5xl { padding-bottom: var(--csd-space-5xl); } .csd-pl-5xl { padding-left: var(--csd-space-5xl); } /* Margin: all / axis / side */ .csd-m-2xs { margin: var(--csd-space-2xs); } .csd-mx-2xs { margin-left: var(--csd-space-2xs); margin-right: var(--csd-space-2xs); } .csd-my-2xs { margin-top: var(--csd-space-2xs); margin-bottom: var(--csd-space-2xs); } .csd-mt-2xs { margin-top: var(--csd-space-2xs); } .csd-mr-2xs { margin-right: var(--csd-space-2xs); } .csd-mb-2xs { margin-bottom: var(--csd-space-2xs); } .csd-ml-2xs { margin-left: var(--csd-space-2xs); } .csd-m-xs { margin: var(--csd-space-xs); } .csd-mx-xs { margin-left: var(--csd-space-xs); margin-right: var(--csd-space-xs); } .csd-my-xs { margin-top: var(--csd-space-xs); margin-bottom: var(--csd-space-xs); } .csd-mt-xs { margin-top: var(--csd-space-xs); } .csd-mr-xs { margin-right: var(--csd-space-xs); } .csd-mb-xs { margin-bottom: var(--csd-space-xs); } .csd-ml-xs { margin-left: var(--csd-space-xs); } .csd-m-sm { margin: var(--csd-space-sm); } .csd-mx-sm { margin-left: var(--csd-space-sm); margin-right: var(--csd-space-sm); } .csd-my-sm { margin-top: var(--csd-space-sm); margin-bottom: var(--csd-space-sm); } .csd-mt-sm { margin-top: var(--csd-space-sm); } .csd-mr-sm { margin-right: var(--csd-space-sm); } .csd-mb-sm { margin-bottom: var(--csd-space-sm); } .csd-ml-sm { margin-left: var(--csd-space-sm); } .csd-m-md { margin: var(--csd-space-md); } .csd-mx-md { margin-left: var(--csd-space-md); margin-right: var(--csd-space-md); } .csd-my-md { margin-top: var(--csd-space-md); margin-bottom: var(--csd-space-md); } .csd-mt-md { margin-top: var(--csd-space-md); } .csd-mr-md { margin-right: var(--csd-space-md); } .csd-mb-md { margin-bottom: var(--csd-space-md); } .csd-ml-md { margin-left: var(--csd-space-md); } .csd-m-lg { margin: var(--csd-space-lg); } .csd-mx-lg { margin-left: var(--csd-space-lg); margin-right: var(--csd-space-lg); } .csd-my-lg { margin-top: var(--csd-space-lg); margin-bottom: var(--csd-space-lg); } .csd-mt-lg { margin-top: var(--csd-space-lg); } .csd-mr-lg { margin-right: var(--csd-space-lg); } .csd-mb-lg { margin-bottom: var(--csd-space-lg); } .csd-ml-lg { margin-left: var(--csd-space-lg); } .csd-m-xl { margin: var(--csd-space-xl); } .csd-mx-xl { margin-left: var(--csd-space-xl); margin-right: var(--csd-space-xl); } .csd-my-xl { margin-top: var(--csd-space-xl); margin-bottom: var(--csd-space-xl); } .csd-mt-xl { margin-top: var(--csd-space-xl); } .csd-mr-xl { margin-right: var(--csd-space-xl); } .csd-mb-xl { margin-bottom: var(--csd-space-xl); } .csd-ml-xl { margin-left: var(--csd-space-xl); } .csd-m-2xl { margin: var(--csd-space-2xl); } .csd-mx-2xl { margin-left: var(--csd-space-2xl); margin-right: var(--csd-space-2xl); } .csd-my-2xl { margin-top: var(--csd-space-2xl); margin-bottom: var(--csd-space-2xl); } .csd-mt-2xl { margin-top: var(--csd-space-2xl); } .csd-mr-2xl { margin-right: var(--csd-space-2xl); } .csd-mb-2xl { margin-bottom: var(--csd-space-2xl); } .csd-ml-2xl { margin-left: var(--csd-space-2xl); } .csd-m-3xl { margin: var(--csd-space-3xl); } .csd-mx-3xl { margin-left: var(--csd-space-3xl); margin-right: var(--csd-space-3xl); } .csd-my-3xl { margin-top: var(--csd-space-3xl); margin-bottom: var(--csd-space-3xl); } .csd-mt-3xl { margin-top: var(--csd-space-3xl); } .csd-mr-3xl { margin-right: var(--csd-space-3xl); } .csd-mb-3xl { margin-bottom: var(--csd-space-3xl); } .csd-ml-3xl { margin-left: var(--csd-space-3xl); } .csd-m-4xl { margin: var(--csd-space-4xl); } .csd-mx-4xl { margin-left: var(--csd-space-4xl); margin-right: var(--csd-space-4xl); } .csd-my-4xl { margin-top: var(--csd-space-4xl); margin-bottom: var(--csd-space-4xl); } .csd-mt-4xl { margin-top: var(--csd-space-4xl); } .csd-mr-4xl { margin-right: var(--csd-space-4xl); } .csd-mb-4xl { margin-bottom: var(--csd-space-4xl); } .csd-ml-4xl { margin-left: var(--csd-space-4xl); } .csd-m-5xl { margin: var(--csd-space-5xl); } .csd-mx-5xl { margin-left: var(--csd-space-5xl); margin-right: var(--csd-space-5xl); } .csd-my-5xl { margin-top: var(--csd-space-5xl); margin-bottom: var(--csd-space-5xl); } .csd-mt-5xl { margin-top: var(--csd-space-5xl); } .csd-mr-5xl { margin-right: var(--csd-space-5xl); } .csd-mb-5xl { margin-bottom: var(--csd-space-5xl); } .csd-ml-5xl { margin-left: var(--csd-space-5xl); } /* Gap utilities for flex/grid layouts */ .csd-gap-0 { gap: 0; } .csd-row-gap-0 { row-gap: 0; } .csd-col-gap-0 { column-gap: 0; } .csd-gap-2xs { gap: var(--csd-space-2xs); } .csd-row-gap-2xs { row-gap: var(--csd-space-2xs); } .csd-col-gap-2xs { column-gap: var(--csd-space-2xs); } .csd-gap-xs { gap: var(--csd-space-xs); } .csd-row-gap-xs { row-gap: var(--csd-space-xs); } .csd-col-gap-xs { column-gap: var(--csd-space-xs); } .csd-gap-sm { gap: var(--csd-space-sm); } .csd-row-gap-sm { row-gap: var(--csd-space-sm); } .csd-col-gap-sm { column-gap: var(--csd-space-sm); } .csd-gap-md { gap: var(--csd-space-md); } .csd-row-gap-md { row-gap: var(--csd-space-md); } .csd-col-gap-md { column-gap: var(--csd-space-md); } .csd-gap-lg { gap: var(--csd-space-lg); } .csd-row-gap-lg { row-gap: var(--csd-space-lg); } .csd-col-gap-lg { column-gap: var(--csd-space-lg); } .csd-gap-xl { gap: var(--csd-space-xl); } .csd-row-gap-xl { row-gap: var(--csd-space-xl); } .csd-col-gap-xl { column-gap: var(--csd-space-xl); } .csd-gap-2xl { gap: var(--csd-space-2xl); } .csd-row-gap-2xl { row-gap: var(--csd-space-2xl); } .csd-col-gap-2xl { column-gap: var(--csd-space-2xl); } .csd-gap-3xl { gap: var(--csd-space-3xl); } .csd-row-gap-3xl { row-gap: var(--csd-space-3xl); } .csd-col-gap-3xl { column-gap: var(--csd-space-3xl); } .csd-gap-4xl { gap: var(--csd-space-4xl); } .csd-row-gap-4xl { row-gap: var(--csd-space-4xl); } .csd-col-gap-4xl { column-gap: var(--csd-space-4xl); } .csd-gap-5xl { gap: var(--csd-space-5xl); } .csd-row-gap-5xl { row-gap: var(--csd-space-5xl); } .csd-col-gap-5xl { column-gap: var(--csd-space-5xl); } /* Spacer blocks: vertical rhythm helpers */ .csd-spacer-0 { display: block; height: 0; } .csd-spacer-2xs { display: block; height: var(--csd-space-2xs); } .csd-spacer-xs { display: block; height: var(--csd-space-xs); } .csd-spacer-sm { display: block; height: var(--csd-space-sm); } .csd-spacer-md { display: block; height: var(--csd-space-md); } .csd-spacer-lg { display: block; height: var(--csd-space-lg); } .csd-spacer-xl { display: block; height: var(--csd-space-xl); } .csd-spacer-2xl { display: block; height: var(--csd-space-2xl); } .csd-spacer-3xl { display: block; height: var(--csd-space-3xl); } .csd-spacer-4xl { display: block; height: var(--csd-space-4xl); } .csd-spacer-5xl { display: block; height: var(--csd-space-5xl); } @media (max-width: 767px) { .csd-mobile-spacer-0 { display: block; height: 0; } .csd-mobile-spacer-2xs { display: block; height: var(--csd-space-2xs); } .csd-mobile-spacer-xs { display: block; height: var(--csd-space-xs); } .csd-mobile-spacer-sm { display: block; height: var(--csd-space-sm); } .csd-mobile-spacer-md { display: block; height: var(--csd-space-md); } .csd-mobile-spacer-lg { display: block; height: var(--csd-space-lg); } .csd-mobile-spacer-xl { display: block; height: var(--csd-space-xl); } .csd-mobile-spacer-2xl { display: block; height: var(--csd-space-2xl); } .csd-mobile-spacer-3xl { display: block; height: var(--csd-space-3xl); } .csd-mobile-spacer-4xl { display: block; height: var(--csd-space-4xl); } .csd-mobile-spacer-5xl { display: block; height: var(--csd-space-5xl); } } /* Stabilitate */ .csd-topbar-inner > *, .main-navigation > *, .footer-grid > *, .widget > *, .archive-card > * { min-width: 0; } /* Corectie pattern fragil Underscores */ .main-navigation ul ul { left: 0; opacity: 0; visibility: hidden; pointer-events: none; } .main-navigation li:hover > ul, .main-navigation li.focus > ul { opacity: 1; visibility: visible; pointer-events: auto; } /* SVG și media neacoperite complet */ svg { max-width: 100%; height: auto; } /* Breakpoints standard */ .csd-desk-only, .csd-tablet-only, .csd-mobile-only { display: none !important; } /* desktop */ @media (min-width: 1025px) { .csd-desk-only { display: block !important; } } /* tablet */ @media (min-width: 768px) and (max-width: 1024px) { .csd-tablet-only { display: block !important; } } /* mobile */ @media (max-width: 767px) { .csd-mobile-only { display: block !important; } } /* hide desktop */ @media (min-width: 1025px) { .csd-hide-desk { display: none !important; } } /* hide tablet */ @media (min-width: 768px) and (max-width: 1024px) { .csd-hide-tablet { display: none !important; } } /* hide mobile */ @media (max-width: 767px) { .csd-hide-mobile { display: none !important; } } /* Generic radius utilities. Use on existing components when a smaller or * larger corner radius is needed without creating project-specific CSS. */ .csd-radius-0 { border-radius: 0 !important; } .csd-radius-sm { border-radius: var(--csd-radius-sm) !important; } .csd-radius-md { border-radius: var(--csd-radius-md) !important; } .csd-radius-lg { border-radius: var(--csd-radius-lg) !important; } .csd-radius-pill { border-radius: var(--csd-radius-pill) !important; } /* ========================================================================== 03. LAYOUT PRIMITIVES ========================================================================== */ .container { max-width: var(--csd-container-width); margin-inline: auto; padding-inline: var(--csd-space-lg); } .container-fluid { width: 100%; padding-inline: var(--csd-space-lg); } .main-content { min-width: 0; margin: 0; flex: 1 1 auto; } :where(.main-content, .entry-content) section { padding-block: var(--csd-space-2xl); } :where(.main-content, .entry-content) section.compact { padding-block: var(--csd-space-lg); } /* Alias legacy. Pentru pagini noi preferăm .csd-bleed + .csd-bg-neutral */ :where(.main-content, .entry-content) section.accent { background: var(--csd-neutral-light); } :where(.main-content, .entry-content) section + section { border-top: 1px solid rgba(0,0,0,.06); } :where(.main-content, .entry-content) section.hero { padding-block: var(--csd-space-4xl); } :where(.main-content, .entry-content) section.no-divider + section { border-top: 0; } /* ========================================================================== 03.2 GRID & SPLIT SYSTEM ========================================================================== */ .csd-row { display: flex; flex-wrap: wrap; margin-left: calc(-1 * var(--csd-grid-gutter)); margin-right: calc(-1 * var(--csd-grid-gutter)); } .csd-col { flex: 0 0 auto; padding-left: var(--csd-grid-gutter); padding-right: var(--csd-grid-gutter); min-width: 0; } /* 12 grid fractions – stabil flex */ .csd-col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; } .csd-col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; } .csd-col-3 { flex: 0 0 25%; max-width: 25%; } .csd-col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; } .csd-col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; } .csd-col-6 { flex: 0 0 50%; max-width: 50%; } .csd-col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; } .csd-col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; } .csd-col-9 { flex: 0 0 75%; max-width: 75%; } .csd-col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; } .csd-col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; } .csd-col-12 { flex: 0 0 100%; max-width: 100%; } .csd-col-flex { display: flex; flex-direction: column; height: 100%; } .csd-col-flex .csd-col-bottom { margin-top: auto; } /* mobile */ @media (max-width:767px){ .csd-col { flex: 0 0 100%; max-width: 100%; } } .csd-align-top { align-items:flex-start; } .csd-align-center { align-items:center; } .csd-align-bottom { align-items:flex-end; } @media (min-width:1024px){ .csd-row-reverse { flex-direction: row-reverse; } } .csd-split { display: grid; gap: var(--csd-space-2xl); align-items: center; min-width: 0; } .csd-split > * { min-width: 0; } /* important pt texte lungi */ .csd-split-50 { grid-template-columns: 1fr 1fr; } .csd-split-60 { grid-template-columns: 6fr 4fr; } .csd-split-40 { grid-template-columns: 4fr 6fr; } .csd-split-55 { grid-template-columns: 11fr 9fr; } .csd-split-45 { grid-template-columns: 9fr 11fr; } .csd-split-70 { grid-template-columns: 7fr 3fr; } .csd-split-30 { grid-template-columns: 3fr 7fr; } .csd-split-reverse > :first-child { order: 2; } .csd-split-reverse > :last-child { order: 1; } .csd-split-hero { padding-top: var(--csd-space-4xl); padding-bottom: var(--csd-space-4xl); } .csd-split-top { align-items: start; } .csd-split-center { align-items: center; } .csd-split-bottom { align-items: end; } @media (max-width: 767px) { .csd-split { grid-template-columns: 1fr !important; row-gap: var(--csd-space-lg); column-gap: 0; } } /* ========================================================================== 03.3 SECTION SYSTEM ========================================================================== */ /* ============================================================================ 04. HEADER, TOPBAR & NAVIGATION - desktop: logo stanga, meniu dreapta - child 3col: logo / meniu / search - mobil: logo stanga, burger dreapta, drawer scos din flux ============================================================================ */ .csd-topbar { background: var(--csd-neutral-light); border-bottom: 1px solid rgba(0,0,0,0.06); } .csd-topbar-inner { display: flex; align-items: center; justify-content: space-between; min-height: 24px; padding: 3px 0; gap: var(--csd-space-sm); } .csd-menu-top { display: flex; flex-wrap: wrap; gap: var(--csd-space-md); list-style: none; margin: 0; padding: 0; } .csd-menu-top a { display: inline-flex; align-items: center; gap: 5px; padding-block: 2px; color: var(--csd-neutral-dark); font-size: 13px; line-height: 1.25; } .csd-menu-top a:hover { color: var(--csd-primary-light); } .csd-header { background: #ffffff; border-bottom: 1px solid rgba(0,0,0,0.08); } .csd-header-inner { display: flex; align-items: flex-end; justify-content: space-between; min-height: 78px; padding-top: var(--csd-space-md); padding-bottom: var(--csd-space-xs); column-gap: clamp(var(--csd-space-md), 2.2vw, var(--csd-space-xl)); row-gap: 0; } .site-branding { display: flex; align-items: flex-end; min-width: 0; } /* Allow the logo and its link to shrink inside flex/grid headers. */ .site-branding .csd-logo-wrap, .site-branding .custom-logo-link { min-width: 0; max-width: 100%; } .site-branding .custom-logo-link { display: block; } .site-branding img { display: block; width: auto; height: var(--csd-logo-max-height, 64px); max-width: min(100%, var(--csd-logo-max-width, 432px)); max-height: none; object-fit: contain; object-position: left center; } @media (max-width: 600px) { .site-branding img { height: var(--csd-logo-max-height-mobile, 40px); max-width: min(100%, var(--csd-logo-max-width-mobile, 270px)); } } @media (max-width: 359px) { .site-branding img { height: var(--csd-logo-max-height-mobile-small, 32px); max-width: min(100%, var(--csd-logo-max-width-mobile-small, 216px)); } } .site-branding .csd-site-name { font-size: 24px; font-weight: 700; line-height: 1.1; } .site-branding .csd-site-slogan { font-size: 14px; line-height: 1.25; } /* 04.2 Header custom 3 coloane folosit în child: logo / meniu / search */ .csd-header-3col { display: grid; /* Keep room for the menu; the logo column can shrink within its width limit. */ grid-template-columns: minmax(0, auto) minmax(min-content, 1fr) minmax(220px, 280px); align-items: end; column-gap: clamp(var(--csd-space-md), 2vw, var(--csd-space-xl)); row-gap: 0; } .csd-header-3col .hdr-col-1, .csd-header-3col .hdr-col-2, .csd-header-3col .hdr-col-3 { min-width: 0; } .csd-header-3col .hdr-col-2 { display: flex; justify-content: flex-end; align-items: flex-end; } .csd-header-3col .hdr-col-3 { display: flex; justify-content: flex-end; align-items: flex-end; } .csd-header-3col .hdr-search-wrap .search-form, .csd-header-3col .hdr-search-wrap .csd-search-form { max-width: 280px; margin-left: auto; } /* 04.3 Desktop main navigation */ .csd-main-nav { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; position: relative; align-self: stretch; min-width: 0; } .csd-header-menu-top { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 14px; margin-bottom: 6px; font-size: 13px; line-height: 1.3; color: var(--csd-text-muted, rgba(0,0,0,.62)); } .csd-header-menu-top a { color: inherit; text-decoration: none; font-weight: 600; } .csd-header-menu-top a:hover, .csd-header-menu-top a:focus-visible { color: var(--csd-primary); } .csd-main-menu { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: clamp(14px, 1.8vw, 26px); list-style: none; margin: 0; padding: 0; } .csd-main-menu ul { list-style: none; } .csd-main-menu li { position: relative; margin: 0; list-style: none; } .csd-main-menu a { text-decoration: none; } .csd-main-menu > li > a { display: inline-flex; align-items: flex-end; position: relative; margin-bottom: calc(-1 * var(--csd-space-xs)); padding-top: 15px; padding-bottom: var(--csd-space-xs); color: var(--csd-neutral-dark); font-size: 15px; font-weight: 700; line-height: 1.25; text-transform: uppercase; white-space: nowrap; } .csd-main-menu > li > a::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 2px; background: var(--csd-primary); transition: width .18s ease; } .csd-main-menu > li:hover > a, .csd-main-menu > li:focus-within > a, .csd-main-menu li.current-menu-item > a, .csd-main-menu li.current_page_item > a, .csd-main-menu li.current-menu-ancestor > a, .csd-main-menu li.current-page-ancestor > a { color: var(--csd-primary); } .csd-main-menu > li:hover > a::after, .csd-main-menu > li:focus-within > a::after, .csd-main-menu li.current-menu-item > a::after, .csd-main-menu li.current_page_item > a::after, .csd-main-menu li.current-menu-ancestor > a::after, .csd-main-menu li.current-page-ancestor > a::after { width: 100%; } /* 04.4 Desktop dropdowns */ .csd-main-menu ul.sub-menu { position: absolute; top: calc(100% + var(--csd-space-xs)); left: 0; z-index: 10010; display: block; min-width: 220px; margin: 0; padding: 5px 0; list-style: none; background: #ffffff; border: 0; border-radius: 0; box-shadow: 0 10px 24px rgba(0,0,0,0.10); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease, visibility .14s ease; } @media (min-width: 1101px) { .csd-main-menu li:hover > ul.sub-menu, .csd-main-menu li:focus-within > ul.sub-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } } .csd-main-menu ul.sub-menu li > a { display: block; padding: 7px 15px; color: var(--csd-neutral-dark); font-size: 14px; font-weight: 500; line-height: 1.35; text-transform: none; white-space: nowrap; } .csd-main-menu ul.sub-menu li > a:hover, .csd-main-menu ul.sub-menu li > a:focus-visible, .csd-main-menu ul.sub-menu li.current-menu-item > a, .csd-main-menu ul.sub-menu li.current_page_item > a, .csd-main-menu ul.sub-menu li.current-menu-ancestor > a, .csd-main-menu ul.sub-menu li.current-page-ancestor > a { color: var(--csd-primary); background: var(--csd-neutral-light); } .csd-main-menu > li:last-child > ul.sub-menu, .csd-main-menu > li:nth-last-child(2) > ul.sub-menu { left: auto; right: 0; } .csd-main-menu ul.sub-menu ul.sub-menu { top: 0; left: 100%; } /* 04.5 Mobile toggle / overlay */ .csd-nav-toggle-btn { display: none; position: relative; width: 48px; height: 32px; flex: 0 0 auto; padding: 0; cursor: pointer; background: transparent; border: 0; box-shadow: none; z-index: 100001; } .csd-nav-toggle-btn::before, .csd-nav-toggle-btn::after, .csd-nav-toggle-btn .csd-nav-toggle-icon { content: ""; position: absolute; right: 0; width: 36px; height: 4px; border-radius: 4px; background: var(--csd-neutral-dark); transition: transform .25s ease, top .25s ease, opacity .2s ease; } .csd-nav-toggle-btn::before { top: 2px; } .csd-nav-toggle-btn .csd-nav-toggle-icon { top: 12px; } .csd-nav-toggle-btn::after { top: 22px; } body.csd-nav-open .csd-nav-toggle-btn::before { top: 13px; transform: rotate(45deg); } body.csd-nav-open .csd-nav-toggle-btn::after { top: 13px; transform: rotate(-45deg); } body.csd-nav-open .csd-nav-toggle-btn .csd-nav-toggle-icon { opacity: 0; } .csd-overlay { position: fixed !important; inset: 0 !important; z-index: 99990 !important; background: rgba(0,0,0,0.45); opacity: 0; pointer-events: none; transition: opacity .25s ease; } body.csd-nav-open .csd-overlay { opacity: 1; pointer-events: auto; } .csd-nav-close-overlay { display: none; } @media (max-width: 1100px) { /* 04.6 Header responsive / offcanvas menu */ .csd-topbar-inner { min-height: 0; padding: 4px 0; } .csd-menu-top { gap: var(--csd-space-sm); } .csd-header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; min-height: 64px; gap: 0 var(--csd-space-sm); } .csd-header-3col { grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--csd-space-sm); } .csd-header-3col .hdr-col-1 { grid-column: 1; grid-row: 1; } .csd-header-3col .hdr-col-2 { grid-column: 2; grid-row: 1; justify-content: flex-end; align-items: flex-end; } .csd-header-3col .hdr-col-3 { grid-column: 1 / -1; grid-row: 2; justify-content: stretch; margin-top: var(--csd-space-xs); } .csd-header-3col .hdr-search-wrap .search-form, .csd-header-3col .hdr-search-wrap .csd-search-form { max-width: none; width: 100%; } .site-branding { align-items: flex-end; } .js .csd-nav-toggle-btn { display: block; justify-self: end; align-self: end; margin: 0; } .no-js .csd-nav-toggle-btn, .no-js .csd-overlay, .no-js .csd-nav-close-overlay { display: none !important; } .csd-main-nav { width: 0; height: 0; min-width: 0; overflow: visible; align-self: auto; } .csd-header-menu-top { display: none !important; } .js .csd-main-menu { position: fixed; top: 0; left: -286px; z-index: 100002; display: block; width: min(80vw, 286px); height: 100vh; height: 100svh; margin: 0; padding: 66px 20px 18px; overflow-y: auto; background: #ffffff; border-right: 0; box-shadow: 4px 0 22px rgba(0,0,0,0.16); opacity: 0; visibility: hidden; pointer-events: none; transition: left .25s ease, opacity .25s ease, visibility 0s linear .25s; } .js body.csd-nav-open .csd-main-nav .csd-main-menu { left: 0; opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; } .no-js .csd-main-nav { grid-column: 1 / -1; width: 100%; height: auto; margin-top: var(--csd-space-sm); } .no-js .csd-main-menu { position: static; display: block; width: 100%; height: auto; margin: 0; padding: var(--csd-space-sm) 0 0; opacity: 1; visibility: visible; pointer-events: auto; background: transparent; box-shadow: none; } .csd-main-menu > li { margin: 0; border-bottom: 0; } .csd-main-menu > li > a { display: flex; justify-content: flex-start; width: 100%; min-height: 44px; margin-bottom: 0; padding: 12px 0; font-size: 14px; line-height: 1.3; text-align: left; } .csd-main-menu > li > a::after { display: none; } .csd-main-menu ul.sub-menu { position: static; display: block; min-width: 0; margin: -2px 0 8px; padding: 0 0 0 14px; background: transparent; border: 0; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; pointer-events: auto; transform: none; } .csd-main-menu ul.sub-menu li > a { display: block; min-height: 38px; padding: 8px 0; font-size: 13px; line-height: 1.35; white-space: normal; background: transparent; } .csd-main-menu ul.sub-menu li > a:hover, .csd-main-menu ul.sub-menu li > a:focus-visible, .csd-main-menu ul.sub-menu li.current-menu-item > a, .csd-main-menu ul.sub-menu li.current_page_item > a, .csd-main-menu ul.sub-menu li.current-menu-ancestor > a, .csd-main-menu ul.sub-menu li.current-page-ancestor > a { background: transparent; } .csd-main-menu ul.sub-menu ul.sub-menu { margin-top: 0; padding-left: 12px; } .csd-main-menu ul.sub-menu ul.sub-menu li > a { min-height: 34px; padding-top: 7px; padding-bottom: 7px; font-size: 12px; opacity: .86; } .js .csd-nav-close-overlay { display: flex; position: fixed; top: 12px; left: calc(min(80vw, 286px) - 46px); z-index: 100003; width: 34px; height: 34px; align-items: center; justify-content: center; color: var(--csd-neutral-dark); font-size: 26px; line-height: 1; padding: 0; cursor: pointer; background: transparent; border: 0; box-shadow: none; opacity: 0; pointer-events: none; } .js body.csd-nav-open .csd-main-nav .csd-nav-close-overlay { opacity: 1; pointer-events: auto; } } @media (min-width: 1101px) { /* 04.7 Desktop reset după offcanvas breakpoint */ .csd-main-menu { position: static; width: auto; height: auto; padding: 0; opacity: 1; visibility: visible; pointer-events: auto; box-shadow: none; border-right: 0; flex-direction: row; } } /* ========================================================================== 05. SIDEBAR ========================================================================== */ /* Sidebar layout * Template-urile controleaza pozitia prin ordinea DOM: * - left = sidebar inainte de main * - right = sidebar dupa main * Nu folosim row-reverse aici. */ .with-sidebar { display: flex; flex-direction: row; gap: var(--csd-space-xl); margin-top: var(--csd-space-xl); align-items: flex-start; } .with-sidebar.sidebar-left, .with-sidebar.sidebar-right { flex-direction: row; } .sidebar { position: relative; width: 300px; flex: 0 0 300px; margin-top: 0; } /* Fara sidebar */ .no-sidebar, body.csd-sidebar-none .no-sidebar { margin-top: var(--csd-space-xl); } /* Pagini unde titlul, breadcrumb-ul, meta si imaginea sunt dezactivate. * Evita spatiul gol dintre header si primul bloc/hero din continut. */ /* Empty template head: remove old _s spacing when title/breadcrumb/meta/image are disabled */ .csd-tpl-empty-head { margin-top: 0!important; } .csd-tpl-empty-head .main-content { margin-top: 0; } .csd-tpl-empty-head article.post, .csd-tpl-empty-head article.page { margin-top: 0; margin-bottom: 0; } .csd-tpl-empty-head .entry-content, .csd-tpl-empty-head .page-content, .csd-tpl-empty-head .entry-summary { margin-top: 0; } .csd-tpl-empty-head .entry-content > :first-child { margin-top: 0; } /* Responsive 1024 */ @media (max-width: 1024px) { .with-sidebar { gap: var(--csd-space-lg); } .sidebar { width: 260px; flex: 0 0 260px; } } /* Responsive mobil */ @media (max-width: 767px) { .with-sidebar, .with-sidebar.sidebar-left, .with-sidebar.sidebar-right { flex-direction: column; } .sidebar { width: 100%; flex: 0 0 auto; } } /* --- NIVEL 1 — PĂRINTE --- */ .sidebar ul { list-style: none; margin: 0; padding-left: 0; } .sidebar li { margin: 0; } .sidebar ul ul { margin-top: 4px; } .sidebar > .sidebar-block ul > li > a { display: block; position: relative; padding: 5px 0 5px 20px; font-size: 16px; font-weight: 600; color: var(--csd-neutral-dark); transition: color 0.2s; } .sidebar > .sidebar-block ul > li > a:hover { color: var(--csd-primary); } /* icon părinte (cel mai mare) */ .sidebar > .sidebar-block ul > li > a::before { font-family: dashicons; content: "\f345"; /* chevron right */ position: absolute; left: 0; top: 5px; font-size: 16px; opacity: 0.5; } /* PĂRINTE ACTIV / ANCESTOR */ .sidebar > .sidebar-block ul > li.current-menu-item > a, .sidebar > .sidebar-block ul > li.current_page_item > a, .sidebar > .sidebar-block ul > li.current-menu-ancestor > a, .sidebar > .sidebar-block ul > li.current-page-ancestor > a { color: var(--csd-primary); } .sidebar > .sidebar-block ul > li.current-menu-item > a::before, .sidebar > .sidebar-block ul > li.current_page_item > a::before, .sidebar > .sidebar-block ul > li.current-menu-ancestor > a::before, .sidebar > .sidebar-block ul > li.current-page-ancestor > a::before { content: "\f347"; opacity: 1; } /* --- NIVEL 2 — CHILD --- */ .sidebar ul ul > li > a { position: relative; padding: 5px 0 5px 30px!important; font-size: 14px!important; font-weight: 400; color: var(--csd-neutral-dark); transition: color .16s; } .sidebar ul ul > li > a:hover { color: var(--csd-primary); } /* icon mai mic și mai puțin opac */ .sidebar ul ul > li > a::before { font-family: dashicons; content: "\f345"; position: absolute; left: 15px!important; top: 7px!important; font-size: 12px!important; opacity: .50; } /* CHILD ACTIV */ .sidebar ul ul li.current-menu-item > a, .sidebar ul ul li.current_page_item > a { color: var(--csd-primary); font-weight: 600; } .sidebar ul ul li.current-menu-item > a::before, .sidebar ul ul li.current_page_item > a::before { content: "\f347"; opacity: 1; } /* CHILD care este ANCESTOR (pentru nivel 3 activ) */ .sidebar ul ul li.current-menu-ancestor > a, .sidebar ul ul li.current-page-ancestor > a { color: var(--csd-primary); font-weight: 600; } .sidebar ul ul li.current-menu-ancestor > a::before, .sidebar ul ul li.current-page-ancestor > a::before { content: "\f347"; opacity: 1; } /* ---- NIVEL 3 — NEPOT --- */ .sidebar ul ul ul > li > a { position: relative; padding: 5px 0 5px 40px!important; font-size: 12px; font-weight: 400; transition: color .16s; } .sidebar ul ul ul > li > a:hover { color: var(--csd-primary); } .sidebar ul ul ul > li > a::before { font-family: dashicons; content: "\f345"; position: absolute; left: 30px!important; top: 8px!important; font-size: 10px!important; opacity: 0.3; } /* NEPOT ACTIV */ .sidebar ul ul ul li.current-menu-item > a, .sidebar ul ul ul li.current_page_item > a { color: var(--csd-primary); font-weight: 600; } .sidebar ul ul ul li.current-menu-item > a::before, .sidebar ul ul ul li.current_page_item > a::before { content: "\f347"; opacity: 1; } /* ========================================================================== 06. CONTENT COMPONENTS ========================================================================== */ .breadcrumb { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: var(--csd-space-md); font-size: 14px; color: rgba(0,0,0,0.55); } /* META EXTENDED */ .post-meta-extended { display: flex; flex-wrap: wrap; gap: 15px; font-size: 14px; color: rgba(0,0,0,0.55); padding: 10px 0 15px; border-bottom: 1px solid rgba(0,0,0,0.08); margin-bottom: var(--csd-space-md); } .post-meta-extended .post-meta-item { display: inline-flex; align-items: center; gap: 5px; } .post-meta-extended .post-meta-item::before { font-family: dashicons; font-size: 16px; opacity: 0.9; color: var(--csd-primary); } .post-meta-extended .post-meta-item:nth-child(1)::before { content: "\f469"; } .post-meta-extended .post-meta-item:nth-child(2)::before { content: "\f463"; } .post-meta-extended .post-meta-item:nth-child(3)::before { content: "\f469"; } .post-featured-image img, .featured-responsive { width: 100%; height: auto; overflow: hidden; display: block; border-radius: var(--csd-radius-sm); } /* ========================================================================== 06.2 EDITORIAL UI COMPONENTS Reusable content blocks for pages, guides, pillars and hubs ========================================================================== */ /* Full-bleed backgrounds inside .container */ .csd-bleed { background: var(--csd-bleed-bg, var(--csd-neutral-light)); box-shadow: 0 0 0 100vmax var(--csd-bleed-bg, var(--csd-neutral-light)); clip-path: inset(0 -100vmax); } .csd-bg-neutral { --csd-bleed-bg: var(--csd-neutral-light); } .csd-bg-primary-soft { --csd-bleed-bg: var(--csd-primary-soft); } .csd-bg-secondary-soft { --csd-bleed-bg: var(--csd-secondary-soft); } .csd-bg-accent1-soft { --csd-bleed-bg: var(--csd-accent1-soft); } .csd-bg-accent2-soft { --csd-bleed-bg: var(--csd-accent2-soft); } /* Headerstyles */ .csd-title-line { display: flex; align-items: center; gap: var(--csd-space-md); } .csd-title-line::before { content: ""; width: var(--csd-space-2xl); height: 1px; background: currentColor; } @media (max-width: 767px) { .csd-title-line::before { width: var(--csd-space-lg); } } /* Intro / section helpers */ .csd-lead { font-size: 1.08em; line-height: 1.7; } .csd-section-head { /* max-width: 820px; */ margin-bottom: var(--csd-space-xl); } .csd-section-head > :last-child { margin-bottom: 0; } /* Cards */ .csd-card { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: var(--csd-radius-lg); box-shadow: var(--csd-shadow-sm); padding: var(--csd-space-lg); height: 100%; display: flex; flex-direction: column; } .csd-card > :last-child { margin-bottom: 0; } .csd-card h3, .csd-card h4 { margin-bottom: var(--csd-space-sm); } .csd-card p + p { margin-top: var(--csd-space-sm); } .csd-card-soft { background: var(--csd-primary-soft); } .csd-card-footer { margin-top: auto; padding-top: var(--csd-space-md); } .csd-card-footer a { font-weight: 700; } /* Card grids */ .csd-card-grid { display: grid; gap: var(--csd-space-lg); margin-top: var(--csd-space-lg); } .csd-card-grid > * { min-width: 0; } .csd-card-grid-1 { grid-template-columns: 1fr; } .csd-card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .csd-card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .csd-card-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .csd-card-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .csd-card-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } @media (max-width: 1200px) { .csd-card-grid-5, .csd-card-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1024px) { .csd-card-grid-3, .csd-card-grid-4, .csd-card-grid-5, .csd-card-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .csd-card-grid-2, .csd-card-grid-3, .csd-card-grid-4, .csd-card-grid-5, .csd-card-grid-6 { grid-template-columns: 1fr; } } /* Editorial media */ .csd-media { margin: var(--csd-space-lg) 0 0; } .csd-media img { width: 100%; height: auto; display: block; border-radius: var(--csd-radius-md); } .csd-media-cover img { aspect-ratio: auto; object-fit: contain; } .csd-media-frame { padding: var(--csd-space-sm); background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: var(--csd-radius-lg); box-shadow: var(--csd-shadow-sm); } .csd-media-frame img { padding: 0; background: transparent; border: 0; box-shadow: none; border-radius: var(--csd-radius-md); } .csd-media-narrow { max-width: 760px; margin-left: auto; margin-right: auto; } .csd-media-small { max-width: 560px; margin-left: auto; margin-right: auto; } .csd-split > .csd-media, .csd-split > div > .csd-media { margin-top: 0; } .csd-image-note, .csd-image-note-full { max-width: 760px; margin: var(--csd-space-sm) auto var(--csd-space-lg); font-size: var(--csd-font-small); line-height: 1.45; color: rgba(0,0,0,0.65); text-align: left; } .csd-image-note-full { max-width: 100%; margin-left: 0; margin-right: 0; } .csd-split .csd-image-note, .csd-split .csd-image-note-full { margin-left: 0; margin-right: 0; } /* Callout / note */ .csd-callout { padding: var(--csd-space-md); border-left: 4px solid var(--csd-primary); background: var(--csd-primary-soft); border-radius: var(--csd-radius-sm); margin: var(--csd-space-lg) 0; } .csd-callout > :last-child { margin-bottom: 0; } /* Editorial lists * Se aplică automat listelor HTML simple și listelor Gutenberg din articole/pagini. * Listele cu clase proprii rămân disponibile pentru componente specializate. */ .entry-content :is( ul:not([class]), ul.wp-block-list ) { --csd-editorial-list-icon-size: 16px; --csd-editorial-list-icon-color: var(--csd-primary); --csd-editorial-list-icon-opacity: 1; --csd-editorial-list-icon-top: 5px; margin: 0 0 var(--csd-space-md); padding-left: 0; list-style: none; } .entry-content :is( ul:not([class]), ul.wp-block-list ) > li { position: relative; margin: 0 0 var(--csd-space-xs); padding-left: calc(var(--csd-editorial-list-icon-size) + var(--csd-space-xs)); line-height: 1.6; } .entry-content :is( ul:not([class]), ul.wp-block-list ) > li::before { content: "\f345"; position: absolute; top: var(--csd-editorial-list-icon-top); left: 0; width: var(--csd-editorial-list-icon-size); height: var(--csd-editorial-list-icon-size); color: var(--csd-editorial-list-icon-color); font-family: dashicons; font-size: var(--csd-editorial-list-icon-size); font-weight: 400; line-height: var(--csd-editorial-list-icon-size); text-align: center; opacity: var(--csd-editorial-list-icon-opacity); speak: never; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Orice sublistă pornește de la marginea conținutului părintelui. * Indentarea suplimentară este deja creată de padding-ul elementului li. */ .entry-content :is( ul:not([class]), ul.wp-block-list, ol:not([class]), ol.wp-block-list ) > li > :is( ul:not([class]), ul.wp-block-list, ol:not([class]), ol.wp-block-list ) { margin: var(--csd-space-xs) 0 0; } /* Nivelul 2 pentru liste neordonate. */ .entry-content :is( ul:not([class]), ul.wp-block-list, ol:not([class]), ol.wp-block-list ) :is( ul:not([class]), ul.wp-block-list ) { --csd-editorial-list-icon-size: 14px; --csd-editorial-list-icon-color: var(--csd-secondary); --csd-editorial-list-icon-opacity: .82; --csd-editorial-list-icon-top: 6px; margin-left: 0; padding-left: 0; } /* Nivelul 3 și următoarele pentru liste neordonate. */ .entry-content :is( ul:not([class]), ul.wp-block-list, ol:not([class]), ol.wp-block-list ) :is( ul:not([class]), ul.wp-block-list, ol:not([class]), ol.wp-block-list ) :is( ul:not([class]), ul.wp-block-list ) { --csd-editorial-list-icon-size: 13px; --csd-editorial-list-icon-color: var(--csd-accent1); --csd-editorial-list-icon-opacity: .75; --csd-editorial-list-icon-top: 6px; } /* Liste ordonate: aceeași aliniere și același ritm, fără icon custom. */ .entry-content :is( ol:not([class]), ol.wp-block-list ) { margin: 0 0 var(--csd-space-md); padding-left: 1.65rem; list-style-position: outside; } .entry-content :is( ol:not([class]), ol.wp-block-list ) > li { margin: 0 0 var(--csd-space-xs); padding-left: var(--csd-space-2xs); line-height: 1.6; } .entry-content :is( ol:not([class]), ol.wp-block-list ) > li::marker { color: var(--csd-primary); font-weight: 700; } /* Nivelurile ordonate secundare păstrează margin-left: 0. */ .entry-content :is( ul:not([class]), ul.wp-block-list, ol:not([class]), ol.wp-block-list ) :is( ol:not([class]), ol.wp-block-list ) { margin-left: 0; padding-left: 1.55rem; list-style-type: lower-alpha; } .entry-content :is( ul:not([class]), ul.wp-block-list, ol:not([class]), ol.wp-block-list ) :is( ul:not([class]), ul.wp-block-list, ol:not([class]), ol.wp-block-list ) :is( ol:not([class]), ol.wp-block-list ) { list-style-type: lower-roman; } .entry-content :is( ul:not([class]), ul.wp-block-list, ol:not([class]), ol.wp-block-list ) > li:last-child { margin-bottom: 0; } /* Plain UI list + list icon system * Iconurile sunt în aceeași zonă cu lista, nu într-un override separat. * Alinierea este calculată la prima linie de text: padding-top + compensare de line-height. */ .entry-content .csd-list-plain { --csd-list-icon-code: "\f147"; --csd-list-icon-size: 16px; --csd-list-icon-left: var(--csd-space-sm); --csd-list-icon-gap: var(--csd-space-xs); --csd-list-icon-color: var(--csd-primary); --csd-list-icon-top-adjust: .32em; list-style: none; padding-left: 0; margin: 0; display: grid; gap: var(--csd-space-xs); } .entry-content .csd-card .csd-list-plain { padding-left: 0; margin-bottom: 0; } .entry-content .csd-list-plain li { position: relative; margin: 0; padding: var(--csd-space-xs) var(--csd-space-sm) var(--csd-space-xs) calc(var(--csd-list-icon-left) + var(--csd-list-icon-size) + var(--csd-list-icon-gap)); border: 1px solid rgba(0,0,0,0.06); border-radius: var(--csd-radius-md); background: rgba(255,255,255,0.72); } .entry-content .csd-list-plain li::before { content: var(--csd-list-icon-code); position: absolute; left: var(--csd-list-icon-left); top: calc(var(--csd-space-xs) + var(--csd-list-icon-top-adjust)); width: var(--csd-list-icon-size); height: var(--csd-list-icon-size); font-family: dashicons; font-size: var(--csd-list-icon-size); font-weight: 400; line-height: var(--csd-list-icon-size); text-align: center; color: var(--csd-list-icon-color); speak: never; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Variante de icon pentru liste editoriale */ .entry-content .csd-list-plain.csd-list-icon-check { --csd-list-icon-code: "\f147"; } .entry-content .csd-list-plain.csd-list-icon-arrow { --csd-list-icon-code: "\f345"; } .entry-content .csd-list-plain.csd-list-icon-chevron { --csd-list-icon-code: "\f345"; } .entry-content .csd-list-plain.csd-list-icon-down { --csd-list-icon-code: "\f347"; } .entry-content .csd-list-plain.csd-list-icon-warning { --csd-list-icon-code: "\f534"; } .entry-content .csd-list-plain.csd-list-icon-info { --csd-list-icon-code: "\f348"; } .entry-content .csd-list-plain.csd-list-icon-star { --csd-list-icon-code: "\f155"; } .entry-content .csd-list-plain.csd-list-icon-plus { --csd-list-icon-code: "\f132"; } .entry-content .csd-list-plain.csd-list-icon-minus { --csd-list-icon-code: "\f460"; } .entry-content .csd-list-plain.csd-list-icon-external { --csd-list-icon-code: "\f504"; } .entry-content .csd-list-plain.csd-list-no-icon li { padding-left: var(--csd-space-sm); } .entry-content .csd-list-plain.csd-list-no-icon li::before { content: none; } .entry-content .csd-list-plain.csd-list-icon-neutral { --csd-list-icon-color: var(--csd-neutral-dark); } .entry-content .csd-list-plain.csd-list-icon-primary { --csd-list-icon-color: var(--csd-primary); } .entry-content .csd-list-plain.csd-list-icon-secondary { --csd-list-icon-color: var(--csd-secondary); } .entry-content .csd-list-plain.csd-list-icon-accent1 { --csd-list-icon-color: var(--csd-accent1); } .entry-content .csd-list-plain.csd-list-icon-accent2 { --csd-list-icon-color: var(--csd-accent2); } /* Generic non-interactive badges. * Use for status/category labels; links and actions continue to use .btn. */ .csd-badge { display: inline-flex; align-items: center; gap: var(--csd-space-2xs); min-height: 26px; padding: var(--csd-space-2xs) var(--csd-space-sm); border: 1px solid transparent; border-radius: var(--csd-radius-pill); font-size: var(--csd-font-size-xs); font-weight: 700; line-height: 1.15; vertical-align: middle; } .csd-badge .dashicons { width: 16px; height: 16px; font-size: 16px; line-height: 16px; } .csd-badge-primary { color: var(--csd-badge-primary-text); background: var(--csd-primary-soft); border-color: color-mix(in srgb, var(--csd-primary) 22%, transparent); } .csd-badge-secondary { color: var(--csd-badge-secondary-text); background: var(--csd-secondary-soft); border-color: color-mix(in srgb, var(--csd-secondary) 22%, transparent); } .csd-badge-accent1 { color: var(--csd-badge-accent1-text); background: var(--csd-accent1-soft); border-color: color-mix(in srgb, var(--csd-accent1) 22%, transparent); } .csd-badge-accent2 { color: var(--csd-badge-accent2-text); background: var(--csd-accent2-soft); border-color: color-mix(in srgb, var(--csd-accent2) 22%, transparent); } @supports not (color: color-mix(in srgb, red 10%, white)) { .csd-badge-primary, .csd-badge-secondary, .csd-badge-accent1, .csd-badge-accent2 { border-color: rgba(0,0,0,.10); } } /* Generic logo/media frame. * Unlike editorial photos, logos are never cropped. */ .csd-logo-frame { display: flex; align-items: center; justify-content: center; flex: 0 0 150px; width: 150px; min-height: 112px; padding: var(--csd-space-sm); overflow: hidden; background: var(--csd-neutral-light); border: 1px solid rgba(0,0,0,.08); border-radius: var(--csd-radius-md); } .csd-logo-frame img, .archive-card .csd-logo-frame img { display: block; width: 100%; height: 96px; max-width: 100%; object-fit: contain; object-position: center; border-radius: 0; background: transparent; } .csd-logo-frame-wide { width: 100%; min-height: 170px; flex-basis: auto; } .csd-logo-frame-wide img, .archive-card .csd-logo-frame-wide img { height: 145px; } /* Generic surface modifiers for existing cards. */ .csd-card.csd-card-subtle { border-color: rgba(0,0,0,.07); border-radius: var(--csd-radius-md); box-shadow: none; } .csd-card.csd-card-flat { height: auto; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; } @media (max-width: 767px) { .archive-card .csd-logo-frame { width: 100%; min-height: 128px; flex-basis: auto; } .archive-card .csd-logo-frame img { height: 108px; } } /* FAQ */ .csd-faq-list { display: grid; gap: var(--csd-space-md); margin-top: var(--csd-space-lg); } .csd-faq-item { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: var(--csd-radius-lg); box-shadow: var(--csd-shadow-sm); padding: var(--csd-space-lg); } .csd-faq-item h3 { margin-bottom: var(--csd-space-sm); } .csd-faq-item p:last-child { margin-bottom: 0; } /* Icon blocks */ .entry-content .csd-icon-block { margin-bottom: var(--csd-space-lg); } .entry-content .csd-icon-content > :last-child { margin-bottom: 0; } /* Spacing between editorial modules */ .csd-card-grid + p, .csd-card-grid + .csd-callout, .csd-card-grid + .csd-media, .csd-card-grid + .csd-split, .csd-card-grid + .csd-anchor-nav { margin-top: var(--csd-space-lg); } .entry-content section > :last-child { margin-bottom: 0; } /* Gallery normalization */ .gallery { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--csd-space-md); } .gallery-item { float: none !important; width: 100% !important; margin: 0 !important; } .gallery-icon { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--csd-radius-md); } .gallery-icon img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 1024px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .gallery { grid-template-columns: 1fr; } } /* ========================================================================== 07. ARCHIVE & CARDS ========================================================================== */ .archive-title { margin-top: 0; margin-bottom: var(--csd-space-md); } .archive-list { display: flex; flex-direction: column; gap: var(--csd-space-md); } .archive-card { display: flex; gap: var(--csd-space-md); padding: var(--csd-space-md); border-radius: var(--csd-radius-md); border: 1px solid rgba(0,0,0,0.08); background: #ffffff; box-shadow: var(--csd-shadow-md); } .archive-card img { width: 150px; border-radius: var(--csd-radius-sm); object-fit: cover; } .archive-card-title { margin: 0 0 5px; } .archive-card-title a { font-size: 20px; font-weight: 600; color: var(--csd-neutral-dark); } .archive-card-title a:hover { color: var(--csd-primary); } .archive-card-meta { font-size: 13px; color: rgba(0,0,0,0.6); margin-bottom: 5px; } .archive-card-meta .dashicons { width: 16px; height: 16px; font-size: 16px; line-height: 16px; vertical-align: -3px; color: var(--csd-primary); } .archive-card-excerpt { font-size: 14px; color: rgba(0,0,0,0.8); } .archive-card-readmore { display: inline-block; margin-top: 10px; font-size: 14px; color: var(--csd-primary); font-weight: 600; } /* pagination */ .pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--csd-space-xs); margin-top: var(--csd-space-lg); font-size: var(--csd-font-size-sm); } .pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 38px; padding: var(--csd-space-2xs) var(--csd-space-sm); margin: 0; border: 1px solid rgba(0,0,0,0.16); border-radius: var(--csd-radius-pill); background: #fff; color: var(--csd-primary); font-weight: 700; line-height: 1.2; text-decoration: none; } .pagination a:hover, .pagination a:focus-visible { background: var(--csd-primary-soft); border-color: var(--csd-primary); color: var(--csd-primary); } .pagination .current { background: var(--csd-primary); border-color: var(--csd-primary); color: #fff; } /* ========================================================================== 08. FOOTER ========================================================================== */ .site-footer { background: var(--csd-neutral-dark); color: var(--csd-neutral-light); padding-block: var(--csd-space-2xl); font-size: 14px; line-height: 1.6; } .site-footer a { color: var(--csd-neutral-light); } .site-footer a:hover { color: var(--csd-primary-light); } .footer-grid { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); gap: var(--csd-space-2xl); } .site-footer .fwidget { margin: 0 0 var(--csd-space-lg); } .site-footer .fwidget:last-child { margin-bottom: 0; } .site-footer .fwidget p { margin-bottom: var(--csd-space-sm); } .site-footer .fwidget ul { padding: 0; margin: 0; list-style: none; } /* menu footer – eliminare buline pe toate nivelurile */ .site-footer .menu, .site-footer .menu ul, .site-footer .menu li { list-style: none; margin: 0; padding: 0; } /* item meniu */ .site-footer .menu li { position: relative; padding-left: 15px; margin-bottom: 4px; } /* link */ .site-footer .menu a { font-size: 14px; padding: 2px 0 2px 10px; display: inline-block; } /* icon stanga – aliniat pe linkul parinte */ .site-footer .menu li::before { content: "\f347"; font-family: dashicons; font-size: 14px; line-height: 1; position: absolute; left: 0; top: 6px; color: var(--csd-neutral-light); transition: color 0.2s ease; } /* hover + activ */ .site-footer .menu li:hover::before, .site-footer .menu .current-menu-item::before { content: "\f345"; color: var(--csd-primary-light); } /* submeniu footer */ .site-footer .menu .sub-menu { margin-top: 5px; padding-left: 0px; } .site-footer .menu .sub-menu li { padding-left: 15px; margin-bottom: 2px; } .site-footer .menu .sub-menu a { font-size: 13px; } /* icon submeniu */ .site-footer .menu .sub-menu li::before { font-size: 12px; top: 7px; } .footer-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 1rem; padding: 1rem 0; } .footer-copy { text-align: left; font-size: 14px; opacity: .75; margin-top: var(--csd-space-lg); } .footer-right { text-align: right; font-size: 14px; opacity: .75; margin-top: var(--csd-space-lg); } /* Mobile */ @media (max-width: 900px) { .site-footer section { padding: 0px; } } @media (max-width: 767px) { .footer-grid { grid-template-columns: 1fr; } .footer-bottom { grid-template-columns: 1fr; text-align: left; } .footer-copy, .footer-right { text-align: left; } } /* ========================================================================== 09. RESPONSIVE GLOBAL ========================================================================== */ @media (max-width: 900px) { .archive-card { flex-direction: column; } /* imagine featured pe mobil – colțuri drepte dacă vrei total edge-to-edge */ .post-featured-image img { border-radius: 0; } } @media (max-width: 600px) { .csd-topbar-inner { flex-direction: column; align-items: flex-start; padding: 10px 0; gap: 4px; /* mai strâns între left & right */ } } /* ========================================================================== 10. 404 / NOT FOUND ========================================================================== */ .csd-error-page { padding-block: var(--csd-space-xl); } .csd-error-page .page-header { margin-bottom: var(--csd-space-md); } .csd-error-content { max-width: 760px; padding: var(--csd-space-xl); border: 1px solid rgba(0,0,0,0.08); border-radius: var(--csd-radius-lg); background: #fff; box-shadow: var(--csd-shadow-sm); } .csd-error-content .csd-search-form { margin-top: var(--csd-space-md); } .csd-error-actions { margin-top: var(--csd-space-md); } @media (max-width: 767px) { .csd-error-content { padding: var(--csd-space-lg); } } /* ========================================================================== 11. SEARCH FORM ========================================================================== */ .csd-search-form { width: 100%; max-width: 640px; } .csd-search-fields, .csd-error-content .search-form { display: flex; align-items: stretch; width: 100%; max-width: 640px; min-height: var(--csd-form-control-height); overflow: hidden; border: 1px solid var(--csd-form-control-border); border-radius: var(--csd-radius-md); background: #fff; box-shadow: var(--csd-shadow-sm); } .csd-error-content .search-form { margin-top: var(--csd-space-md); } .csd-search-input, .csd-error-content .search-form .search-field { flex: 1 1 auto; min-width: 0; height: var(--csd-form-control-height); padding: 0 14px; border: 0; outline: 0; background: transparent; color: var(--csd-neutral-dark); font: inherit; font-size: 15px; line-height: var(--csd-form-control-height); } .csd-search-input::placeholder, .csd-error-content .search-form .search-field::placeholder { color: rgba(0,0,0,0.45); } .csd-search-button, .csd-error-content .search-form .search-submit { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 48px; width: 48px; min-height: var(--csd-form-control-height); padding: 0; border: 0; border-left: 1px solid rgba(0,0,0,0.08); border-radius: 0; background: var(--csd-primary); color: #fff; cursor: pointer; } .csd-search-button .dashicons { width: 20px; height: 20px; font-size: 20px; line-height: 20px; } .csd-search-button:hover, .csd-search-button:focus-visible, .csd-error-content .search-form .search-submit:hover, .csd-error-content .search-form .search-submit:focus-visible { background: var(--csd-primary-light); color: #fff; } .sidebar .csd-search-form, .widget .csd-search-form { max-width: none; } /* -------------------------------------------------------------------------- 11.2 GENERIC FORM CONTROLS Sistem vizual unic pentru temă, căutare, comentarii și Contact Form 7. -------------------------------------------------------------------------- */ .csd-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--csd-space-md); align-items: end; } .csd-field { min-width: 0; } /* Titlurile câmpurilor folosesc aceeași tipografie în toate formularele. */ .csd-label, .wpcf7-form label:has(> .wpcf7-form-control-wrap), .wpcf7-form legend, .comment-form label { display: block; width: 100%; margin: 0 0 var(--csd-space-xs); padding: 0; color: var(--csd-neutral-dark); font-size: 16px; font-weight: 700; line-height: 1.25; } /* Baza comună pentru input, select și textarea. */ .csd-input, .csd-select, .csd-textarea, .csd-search-form select, .wpcf7-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]), .wpcf7-form select, .wpcf7-form textarea, .comment-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]), .comment-form select, .comment-form textarea { display: block; width: 100%; max-width: 100%; min-width: 0; margin: 0; padding: var(--csd-form-control-padding-y) var(--csd-form-control-padding-x); border: 1px solid var(--csd-form-control-border); border-radius: var(--csd-radius-md); background-color: #fff; box-shadow: var(--csd-shadow-sm); color: var(--csd-neutral-dark); font: inherit; font-size: 15px; } /* Controalele pe un singur rând au aceeași înălțime și același ritm. */ .csd-input, .csd-select, .csd-search-form select, .wpcf7-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]), .wpcf7-form select, .comment-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]), .comment-form select { height: var(--csd-form-control-height); min-height: var(--csd-form-control-height); line-height: 1.35; } /* Selecturile folosesc un chevron SVG fin și stabil la zoom. */ .csd-select, .csd-search-form select, .wpcf7-form select, .comment-form select { padding-right: 42px; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1.25 5 5.25 9 1.25' fill='none' stroke='%231f4b7a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 7px; } /* Selecturile multiple nu afișează chevron. */ .csd-select[multiple], .csd-select[size]:not([size="1"]), .csd-search-form select[multiple], .csd-search-form select[size]:not([size="1"]), .wpcf7-form select[multiple], .wpcf7-form select[size]:not([size="1"]), .comment-form select[multiple], .comment-form select[size]:not([size="1"]) { padding-right: var(--csd-form-control-padding-x); background-image: none; } .csd-textarea, .wpcf7-form textarea, .comment-form textarea { line-height: 1.45; resize: vertical; } /* Focus unic pentru toate controalele. */ .csd-input:focus, .csd-select:focus, .csd-textarea:focus, .csd-search-form select:focus, .wpcf7-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):focus, .wpcf7-form select:focus, .wpcf7-form textarea:focus, .comment-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):focus, .comment-form select:focus, .comment-form textarea:focus { outline: 0; border-color: var(--csd-form-control-border-focus); box-shadow: 0 0 0 3px var(--csd-form-control-focus-ring); } /* Disabled unic pentru toate controalele. */ .csd-input:disabled, .csd-select:disabled, .csd-textarea:disabled, .csd-search-form select:disabled, .wpcf7-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):disabled, .wpcf7-form select:disabled, .wpcf7-form textarea:disabled, .comment-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):disabled, .comment-form select:disabled, .comment-form textarea:disabled { cursor: not-allowed; opacity: .6; background-color: var(--csd-neutral-light); } .csd-form-actions { grid-column: 1 / -1; } @media (max-width: 767px) { .csd-form-grid { grid-template-columns: 1fr; } .csd-form-actions { grid-column: auto; } .csd-form-actions .btn { width: 100%; } } /* -------------------------------------------------------------------------- 11.3 CONTACT FORM 7 — MARKUP ȘI STĂRI SPECIFICE Nu repetă aspectul controalelor definit în 11.2. -------------------------------------------------------------------------- */ .wpcf7-form label > br { display: none; } .wpcf7-form label > .wpcf7-form-control-wrap { display: block; width: 100%; min-width: 0; margin-top: var(--csd-space-xs); } .wpcf7-form input[type="file"] { min-height: var(--csd-form-control-height); padding: 6px; } .wpcf7-form input[type="file"]::file-selector-button { min-height: 32px; margin-right: 10px; padding: 0 var(--csd-space-md); border: 1px solid rgba(15, 23, 42, 0.16); border-radius: var(--csd-radius-sm); background: var(--csd-neutral-light); color: var(--csd-neutral-dark); font: inherit; font-weight: 600; cursor: pointer; } .wpcf7-form fieldset { min-width: 0; margin: 0 0 var(--csd-space-md); padding: 0; border: 0; } .wpcf7-form .wpcf7-checkbox, .wpcf7-form .wpcf7-radio { display: grid; grid-template-columns: 1fr; gap: var(--csd-space-xs); } .wpcf7-form .wpcf7-list-item { display: block; margin: 0; } /* Eticheta unei opțiuni este layout, nu un al doilea stil de field label. */ .wpcf7-form .wpcf7-list-item > label { display: inline-flex; align-items: center; gap: var(--csd-space-xs); margin: 0; font: inherit; } .wpcf7-form input[type="checkbox"], .wpcf7-form input[type="radio"] { flex: 0 0 auto; width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; accent-color: var(--csd-primary); } .wpcf7-form .wpcf7-acceptance { display: block; } .wpcf7-form .wpcf7-spinner { margin-left: var(--csd-space-sm); vertical-align: middle; } .wpcf7-form .wpcf7-not-valid { border-color: #b42318; } .wpcf7-form .wpcf7-not-valid-tip { display: block; margin-top: 5px; color: #b42318; font-size: var(--csd-font-size-sm); line-height: 1.35; } .wpcf7-form .wpcf7-response-output { margin: var(--csd-space-md) 0 0; padding: var(--csd-space-sm) var(--csd-space-md); border-radius: var(--csd-radius-md); } /* ========================================================================== 12. COMMENTS ========================================================================== */ .comment-list { list-style: none; margin: 0; padding: 0; } .comment { margin-bottom: var(--csd-space-md); padding-bottom: var(--csd-space-sm); border-bottom: 1px solid rgba(0,0,0,0.06); } .comment-author { font-weight: 600; } .comment-metadata { font-size: 13px; color: rgba(0,0,0,0.55); margin-bottom: 4px; } .comment-reply-link { font-size: 13px; color: var(--csd-primary); } .comment-reply-link:hover { color: var(--csd-primary-light); } /* ========================================================================== 13. BUTTONS ========================================================================== */ /* BAZĂ COMUNĂ */ .btn, a.btn, button.btn, input[type="button"].btn, input[type="submit"].btn, .wpcf7-form .wpcf7-submit, .comment-form input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: var(--csd-space-xs); margin: 0; border: 1px solid transparent; border-radius: var(--csd-radius-pill); font-family: inherit; font-weight: 600; line-height: 1.15; cursor: pointer; appearance: none; transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease; } /* Dimensiunea implicită a butoanelor temei. Submiturile formularelor folosesc XL. */ .btn, a.btn, button.btn, input[type="button"].btn, input[type="submit"].btn { min-height: 34px; padding: var(--csd-space-xs) var(--csd-space-md); font-size: var(--csd-font-size-sm); } /* Grupurile explicite și containerele editoriale alcătuite din minimum două butoane directe. */ .csd-button-group, .csd-form-actions, .csd-error-actions, .entry-content :is(p, div):has(> .btn ~ .btn):not(:has(> :not(.btn))), .hero :is(p, div):has(> .btn ~ .btn):not(:has(> :not(.btn))) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--csd-space-sm); } /* Fallback pentru grupuri de butoane introduse după un label/text și
. * Nu schimbăm markupul consumatorului: butoanele care se împachetează pe * două rânduri primesc spațiu vertical și orizontal coerent. */ .entry-content :is(p, div):has(> :not(.btn)):has(> .btn ~ .btn) > .btn, .hero :is(p, div):has(> :not(.btn)):has(> .btn ~ .btn) > .btn { margin-top: var(--csd-space-sm); margin-right: var(--csd-space-sm); } /* Spațierea este controlată exclusiv prin gap în grupurile explicite/pure. */ .csd-button-group > .btn, .csd-form-actions > .btn, .csd-error-actions > .btn, .entry-content :is(p, div):has(> .btn ~ .btn):not(:has(> :not(.btn))) > .btn, .hero :is(p, div):has(> .btn ~ .btn):not(:has(> :not(.btn))) > .btn { margin: 0; } /* butoanele NU trebuie să moștenească stilul vizual de link */ a.btn, a.btn:link, a.btn:visited, a.btn:hover, a.btn:active { text-decoration: none; } /* Dashicons inside buttons */ .btn .dashicons { width: 18px; height: 18px; font-size: 18px; line-height: 18px; } /* DIMENSIUNI */ .btn.btn-sm { min-height: 30px; padding: var(--csd-space-2xs) var(--csd-space-sm); font-size: var(--csd-font-size-xs); } .btn.btn-md { min-height: 34px; padding: var(--csd-space-xs) var(--csd-space-md); font-size: var(--csd-font-size-sm); } .btn.btn-lg { min-height: 40px; padding: var(--csd-space-xs) var(--csd-space-lg); font-size: var(--csd-font-size-md); } .btn.btn-xl, .wpcf7-form .wpcf7-submit, .comment-form input[type="submit"] { width: auto; min-width: 240px; height: 52px; min-height: 52px; padding: 0 var(--csd-space-xl); font-size: var(--csd-font-size-md); } /* VARIANTE SOLIDE */ .btn-primary, a.btn-primary, a.btn-primary:link, a.btn-primary:visited, .wpcf7-form .wpcf7-submit, .comment-form input[type="submit"] { background-color: var(--csd-primary); border-color: var(--csd-primary); color: #ffffff; } .btn-primary:hover, a.btn-primary:hover, .btn-primary:active, a.btn-primary:active, .wpcf7-form .wpcf7-submit:hover, .wpcf7-form .wpcf7-submit:active, .comment-form input[type="submit"]:hover, .comment-form input[type="submit"]:active { color: #ffffff; border-color: var(--csd-btn-primary-bg-hover, var(--csd-primary)); background-color: var(--csd-btn-primary-bg-hover, var(--csd-primary)); } .btn-secondary, a.btn-secondary, a.btn-secondary:link, a.btn-secondary:visited { background-color: var(--csd-secondary); border-color: var(--csd-secondary); color: #ffffff; } .btn-secondary:hover, a.btn-secondary:hover, .btn-secondary:active, a.btn-secondary:active { background-color: var(--csd-btn-secondary-bg-hover, var(--csd-secondary)); border-color: var(--csd-btn-secondary-bg-hover, var(--csd-secondary)); color: #ffffff; } .btn-accent1, a.btn-accent1, a.btn-accent1:link, a.btn-accent1:visited { background-color: var(--csd-accent1); border-color: var(--csd-accent1); color: #ffffff; } .btn-accent1:hover, a.btn-accent1:hover, .btn-accent1:active, a.btn-accent1:active { background-color: var(--csd-btn-accent1-bg-hover, var(--csd-accent1)); border-color: var(--csd-btn-accent1-bg-hover, var(--csd-accent1)); color: #ffffff; } .btn-accent2, a.btn-accent2, a.btn-accent2:link, a.btn-accent2:visited { background-color: var(--csd-accent2); border-color: var(--csd-accent2); color: #ffffff; } .btn-accent2:hover, a.btn-accent2:hover, .btn-accent2:active, a.btn-accent2:active { background-color: var(--csd-btn-accent2-bg-hover, var(--csd-accent2)); border-color: var(--csd-btn-accent2-bg-hover, var(--csd-accent2)); color: #ffffff; } /* OUTLINE — explicit */ .btn-outline.btn-primary, a.btn-outline.btn-primary, a.btn-outline.btn-primary:link, a.btn-outline.btn-primary:visited { background-color: transparent; border-color: var(--csd-primary); color: var(--csd-primary); } .btn-outline.btn-primary:hover, a.btn-outline.btn-primary:hover, .btn-outline.btn-primary:active, a.btn-outline.btn-primary:active { background-color: var(--csd-primary); border-color: var(--csd-primary); color: #ffffff; } .btn-outline.btn-secondary, a.btn-outline.btn-secondary, a.btn-outline.btn-secondary:link, a.btn-outline.btn-secondary:visited { background-color: transparent; border-color: var(--csd-secondary); color: var(--csd-secondary); } .btn-outline.btn-secondary:hover, a.btn-outline.btn-secondary:hover, .btn-outline.btn-secondary:active, a.btn-outline.btn-secondary:active { background-color: var(--csd-secondary); border-color: var(--csd-secondary); color: #ffffff; } .btn-outline.btn-accent1, a.btn-outline.btn-accent1, a.btn-outline.btn-accent1:link, a.btn-outline.btn-accent1:visited { background-color: transparent; border-color: var(--csd-accent1); color: var(--csd-accent1); } .btn-outline.btn-accent1:hover, a.btn-outline.btn-accent1:hover, .btn-outline.btn-accent1:active, a.btn-outline.btn-accent1:active { background-color: var(--csd-accent1); border-color: var(--csd-accent1); color: #ffffff; } .btn-outline.btn-accent2, a.btn-outline.btn-accent2, a.btn-outline.btn-accent2:link, a.btn-outline.btn-accent2:visited { background-color: transparent; border-color: var(--csd-accent2); color: var(--csd-accent2); } .btn-outline.btn-accent2:hover, a.btn-outline.btn-accent2:hover, .btn-outline.btn-accent2:active, a.btn-outline.btn-accent2:active { background-color: var(--csd-accent2); border-color: var(--csd-accent2); color: #ffffff; } /* TEXT BUTTON */ .btn-text, a.btn-text, a.btn-text:link, a.btn-text:visited { background: transparent; border-color: transparent; padding: 0; box-shadow: none; } .btn-text.btn-primary, a.btn-text.btn-primary, a.btn-text.btn-primary:link, a.btn-text.btn-primary:visited { color: var(--csd-primary); } .btn-text.btn-primary:hover, a.btn-text.btn-primary:hover, .btn-text.btn-primary:active, a.btn-text.btn-primary:active { color: var(--csd-btn-primary-bg-hover, var(--csd-primary)); background: transparent; border-color: transparent; } .btn-text.btn-secondary, a.btn-text.btn-secondary, a.btn-text.btn-secondary:link, a.btn-text.btn-secondary:visited { color: var(--csd-secondary); } .btn-text.btn-secondary:hover, a.btn-text.btn-secondary:hover, .btn-text.btn-secondary:active, a.btn-text.btn-secondary:active { color: var(--csd-btn-secondary-bg-hover, var(--csd-secondary)); background: transparent; border-color: transparent; } .btn-text.btn-accent1, a.btn-text.btn-accent1, a.btn-text.btn-accent1:link, a.btn-text.btn-accent1:visited { color: var(--csd-accent1); } .btn-text.btn-accent1:hover, a.btn-text.btn-accent1:hover, .btn-text.btn-accent1:active, a.btn-text.btn-accent1:active { color: var(--csd-btn-accent1-bg-hover, var(--csd-accent1)); background: transparent; border-color: transparent; } .btn-text.btn-accent2, a.btn-text.btn-accent2, a.btn-text.btn-accent2:link, a.btn-text.btn-accent2:visited { color: var(--csd-accent2); } .btn-text.btn-accent2:hover, a.btn-text.btn-accent2:hover, .btn-text.btn-accent2:active, a.btn-text.btn-accent2:active { color: var(--csd-btn-accent2-bg-hover, var(--csd-accent2)); background: transparent; border-color: transparent; } /* SOFT */ .btn-soft, a.btn-soft, a.btn-soft:link, a.btn-soft:visited { background-color: var(--csd-btn-soft-bg, rgba(0,0,0,0.05)); border-color: transparent; } .btn-soft.btn-primary, a.btn-soft.btn-primary, a.btn-soft.btn-primary:link, a.btn-soft.btn-primary:visited { color: var(--csd-primary); } .btn-soft.btn-primary:hover, a.btn-soft.btn-primary:hover, .btn-soft.btn-primary:active, a.btn-soft.btn-primary:active { background-color: var(--csd-btn-soft-primary-hover-bg, var(--csd-btn-soft-bg, rgba(0,0,0,0.05))); color: var(--csd-primary); border-color: transparent; } .btn-soft.btn-secondary, a.btn-soft.btn-secondary, a.btn-soft.btn-secondary:link, a.btn-soft.btn-secondary:visited { color: var(--csd-secondary); } .btn-soft.btn-secondary:hover, a.btn-soft.btn-secondary:hover, .btn-soft.btn-secondary:active, a.btn-soft.btn-secondary:active { background-color: var(--csd-btn-soft-secondary-hover-bg, var(--csd-btn-soft-bg, rgba(0,0,0,0.05))); color: var(--csd-secondary); border-color: transparent; } .btn-soft.btn-accent1, a.btn-soft.btn-accent1, a.btn-soft.btn-accent1:link, a.btn-soft.btn-accent1:visited { color: var(--csd-accent1); } .btn-soft.btn-accent1:hover, a.btn-soft.btn-accent1:hover, .btn-soft.btn-accent1:active, a.btn-soft.btn-accent1:active { background-color: var(--csd-btn-soft-accent1-hover-bg, var(--csd-btn-soft-bg, rgba(0,0,0,0.05))); color: var(--csd-accent1); border-color: transparent; } .btn-soft.btn-accent2, a.btn-soft.btn-accent2, a.btn-soft.btn-accent2:link, a.btn-soft.btn-accent2:visited { color: var(--csd-accent2); } .btn-soft.btn-accent2:hover, a.btn-soft.btn-accent2:hover, .btn-soft.btn-accent2:active, a.btn-soft.btn-accent2:active { background-color: var(--csd-btn-soft-accent2-hover-bg, var(--csd-btn-soft-bg, rgba(0,0,0,0.05))); color: var(--csd-accent2); border-color: transparent; } /* ICONOGRAFIE */ .btn-icon { gap: var(--csd-space-sm); } .btn-arrow-right::after, .btn-arrow-left::before, .btn-arrow-down::after, .btn-arrow-up::after, .btn-icon-only::before { display: inline-block; font-family: dashicons; font-size: 18px; font-weight: 400; line-height: 1; vertical-align: middle; } .btn-arrow-right::after { content: "\f344"; margin-left: var(--csd-space-sm); } .btn-arrow-left::before { content: "\f340"; margin-right: var(--csd-space-sm); } .btn-arrow-down::after { content: "\f346"; } .btn-arrow-up::after { content: "\f342"; } .btn-icon-only::before { content: "\f345"; } .btn-icon-only { width: 40px; height: 40px; padding: 0; } /* ANIMAȚIE */ .btn-arrow-right-animated::after { transition: transform .2s ease; } .btn-arrow-right-animated:hover::after { transform: translateX(4px); } /* INTERACȚIUNI */ .btn:not(.btn-text):not(.is-disabled):not(:disabled):hover, .wpcf7-form .wpcf7-submit:not(:disabled):hover, .comment-form input[type="submit"]:not(:disabled):hover { transform: translateY(-1px); box-shadow: var(--csd-shadow-sm); } .btn:focus-visible, .wpcf7-form .wpcf7-submit:focus-visible, .comment-form input[type="submit"]:focus-visible { outline: 2px solid var(--csd-primary); outline-offset: 2px; } /* DISABLED */ .btn.is-disabled, .btn:disabled, .wpcf7-form .wpcf7-submit:disabled, .comment-form input[type="submit"]:disabled { pointer-events: none; opacity: .5; transform: none; box-shadow: none; } @media (max-width: 600px) { .wpcf7-form .wpcf7-submit, .comment-form input[type="submit"] { width: 100%; min-width: 0; } } /* ========================================================================== 14. ICON BLOCKS ========================================================================== */ /* Generic Dashicons primitives. * Pentru liste se folosesc clasele .csd-list-icon-* din capitolul 06, * nu override-uri locale pe fiecare listă. */ .csd-icon, .csd-icon-before::before, .csd-icon-after::after { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; font-family: dashicons; font-size: 1em; font-weight: 400; line-height: 1; text-align: center; text-decoration: none; speak: never; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .csd-icon-before::before { content: var(--csd-icon-code, "\f345"); margin-right: var(--csd-space-xs); } .csd-icon-after::after { content: var(--csd-icon-code, "\f345"); margin-left: var(--csd-space-xs); } .csd-icon-check, .csd-icon-check::before { --csd-icon-code: "\f147"; } .csd-icon-arrow-right, .csd-icon-arrow-right::before { --csd-icon-code: "\f345"; } .csd-icon-arrow-left, .csd-icon-arrow-left::before { --csd-icon-code: "\f341"; } .csd-icon-chevron-down, .csd-icon-chevron-down::before { --csd-icon-code: "\f347"; } .csd-icon-warning, .csd-icon-warning::before { --csd-icon-code: "\f534"; } .csd-icon-info, .csd-icon-info::before { --csd-icon-code: "\f348"; } .csd-icon-star, .csd-icon-star::before { --csd-icon-code: "\f155"; } .csd-icon-external, .csd-icon-external::before { --csd-icon-code: "\f504"; } /* Title Icons */ .csd-icon-block { display: flex; align-items: flex-start; gap: var(--csd-space-md); } .csd-icon-small, .csd-icon-big, .csd-icon-enorm { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: var(--csd-radius-md); line-height: 1; color: var(--csd-primary); background: rgba(0, 0, 0, 0.04); } /* SMALL */ .csd-icon-small { flex-basis: 32px; width: 32px; height: 32px; } .csd-icon-small .dashicons { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 20px; line-height: 20px; } .csd-icon-small .dashicons:before { display: block; width: 20px; height: 20px; font-size: 20px; line-height: 20px; } /* BIG */ .csd-icon-big { flex-basis: 48px; width: 48px; height: 48px; } .csd-icon-big .dashicons { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 24px; line-height: 24px; } .csd-icon-big .dashicons:before { display: block; width: 24px; height: 24px; font-size: 24px; line-height: 24px; } /* enorm */ .csd-icon-enorm { flex-basis: 96px; width: 96px; height: 96px; margin-right: 16px; } .csd-icon-enorm .dashicons { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; font-size: 64px; line-height: 64px; } .csd-icon-enorm .dashicons:before { display: block; width: 64px; height: 64px; font-size: 64px; line-height: 64px; } .csd-icon-content { flex: 1 1 auto; min-width: 0; padding: 0; } .csd-icon-content h2, .csd-icon-content h3, .csd-icon-content h4 { line-height: 1.5; } .csd-icon-heading { min-height: 32px; display: flex; align-items: center; } .csd-icon-big + .csd-icon-content .csd-icon-heading { min-height: 48px; } /* ========================================================================== 15. BACK TO TOP ========================================================================== */ .csd-back-to-top .dashicons { font-size: 18px; vertical-align: middle; margin-right: 0; } .csd-back-to-top { position: fixed; right: 16px; bottom: 20px; width: 44px; height: 44px; border-radius: 50%; background: var(--csd-neutral-dark); color: #ffffff; display: none; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 10px 25px rgba(15,23,42,0.25); cursor: pointer; z-index: 99995; } .csd-back-to-top.is-visible { display: flex; } /* ========================================================================== 16. FIGCAPTION ========================================================================== */ .wp-caption-text { font-size: 13px; color: rgba(0,0,0,0.65); text-align: center; margin-top: 6px; line-height: 1.4; } /* END OF FILE */