/* =============================================================================
AEO Fortin — Main Stylesheet
=============================================================================
Organizare:
1. Base / reset light
2. Typography
3. Layout (container, reading column)
4. Links & buttons (placeholder, componente reale în Tranșa 2)
5. Site header
6. Site footer
7. Skip link & accessibility helpers
8. Breadcrumbs
9. Generic page header
10. 404
11. Posts list (fallback)
12. WordPress core blocks helpers
13. Utilities locale
Bootstrap (reboot + grid + utilities) este încărcat ÎNAINTEA acestui fișier
prin enqueue.php. Toate regulile de aici suprascriu sau extind Bootstrap.
========================================================================== */
/* =============================================================================
1. Base
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
margin: 0;
font-family: var(--font-body);
font-weight: var(--fw-body);
font-size: var(--fs-base);
line-height: var(--lh-relaxed);
letter-spacing: var(--ls-body);
color: var(--color-text);
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img,
picture,
video,
svg {
max-width: 100%;
height: auto;
display: block;
}
figure {
margin: 0;
}
hr {
border: 0;
border-top: 1px solid var(--color-border);
margin: var(--space-12) 0;
}
/* =============================================================================
2. Typography
========================================================================== */
h1, h2, h3, h4, h5, h6,
.aeo-h1, .aeo-h2, .aeo-h3, .aeo-h4, .aeo-h5, .aeo-h6 {
font-family: var(--font-display);
font-weight: var(--fw-semibold);
line-height: var(--lh-snug);
letter-spacing: var(--ls-tight);
color: var(--color-text);
margin: 0 0 var(--space-4);
}
h1, .aeo-h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tighter); }
h2, .aeo-h2 { font-size: var(--fs-3xl); }
h3, .aeo-h3 { font-size: var(--fs-2xl); }
h4, .aeo-h4 { font-size: var(--fs-xl); }
h5, .aeo-h5 { font-size: var(--fs-lg); }
h6, .aeo-h6 { font-size: var(--fs-md); letter-spacing: var(--ls-wide); text-transform: uppercase; }
@media (min-width: 768px) {
h1, .aeo-h1 { font-size: var(--fs-5xl); }
h2, .aeo-h2 { font-size: var(--fs-4xl); }
h3, .aeo-h3 { font-size: var(--fs-3xl); }
}
@media (min-width: 1200px) {
h1, .aeo-h1 { font-size: var(--fs-6xl); }
}
p {
margin: 0 0 var(--space-5);
}
p:last-child {
margin-bottom: 0;
}
/* Lead paragraph — folosit în hero text. */
.aeo-lead {
font-family: var(--font-display);
font-weight: var(--fw-light);
font-size: var(--fs-xl);
line-height: var(--lh-snug);
color: var(--color-text-soft);
letter-spacing: var(--ls-tight);
}
@media (min-width: 768px) {
.aeo-lead {
font-size: var(--fs-2xl);
}
}
/* Display / hero text — folosește Light (300) la dimensiuni mari. */
.aeo-display {
font-family: var(--font-display);
font-weight: var(--fw-light);
font-size: var(--fs-5xl);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tighter);
color: var(--color-text);
}
@media (min-width: 1200px) {
.aeo-display {
font-size: var(--fs-6xl);
}
}
/* Bold inline în body — folosește Semibold (600), nu Bold (700) — păstrează tonul Gilroy. */
strong, b {
font-weight: var(--fw-semibold);
}
em, i {
font-style: italic;
}
small {
font-size: var(--fs-sm);
color: var(--color-text-muted);
}
code, kbd, samp, pre {
font-family: var(--font-mono);
font-size: 0.9em;
}
pre {
background-color: var(--color-surface-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-4);
overflow-x: auto;
line-height: var(--lh-normal);
}
code {
background-color: var(--color-surface-alt);
border-radius: var(--radius-xs);
padding: 0.125em 0.375em;
}
pre code {
background: transparent;
padding: 0;
}
blockquote {
margin: var(--space-6) 0;
padding: var(--space-4) var(--space-6);
border-left: 3px solid var(--color-primary);
font-family: var(--font-display);
font-weight: var(--fw-light);
font-size: var(--fs-lg);
line-height: var(--lh-snug);
color: var(--color-text-soft);
background-color: var(--color-surface);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
ul, ol {
margin: 0 0 var(--space-5);
padding-left: var(--space-6);
}
ul li, ol li {
margin-bottom: var(--space-2);
}
/* =============================================================================
3. Layout — container & reading column
========================================================================== */
/* Container principal — wrapper centrat până la 1560px. */
.container-aeo {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-padding-x);
}
/* Bootstrap rows funcționează normal în interior. */
/* Override Bootstrap container max-widths dacă proiectul folosește .container-xxl direct: */
@media (min-width: 1400px) {
.container.aeo-wide,
.container-xxl.aeo-wide {
max-width: var(--container-max);
}
}
/* Reading column — coloană îngustă pentru long-form text. */
.reading-column {
width: 100%;
max-width: var(--reading-width);
margin-inline: auto;
}
/* În interiorul .reading-column, .alignwide și .alignfull pot ieși controlat. */
.reading-column > .alignwide {
max-width: calc(var(--reading-width) + var(--space-16) * 2);
margin-inline: calc(-1 * var(--space-16));
}
@media (max-width: 991px) {
.reading-column > .alignwide {
margin-inline: 0;
max-width: 100%;
}
}
/* Section spacing standard. */
.aeo-section {
padding-block: var(--space-12);
}
@media (min-width: 768px) {
.aeo-section {
padding-block: var(--space-16);
}
}
@media (min-width: 1200px) {
.aeo-section {
padding-block: var(--space-20);
}
}
/* =============================================================================
4. Links & buttons (placeholder, componente reale în Tranșa 2)
========================================================================== */
a {
color: var(--color-link);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.15em;
transition: color var(--transition-base);
}
a:hover,
a:focus-visible {
color: var(--color-link-hover);
}
a:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
border-radius: var(--radius-xs);
}
/* Linkuri în navigare și componente — fără underline. */
.aeo-site-nav a,
.aeo-footer-nav a,
.aeo-breadcrumbs a,
.aeo-primary-menu a,
.aeo-footer-menu a {
text-decoration: none;
}
/* Buton placeholder — design final în Tranșa 2. */
.aeo-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-base);
line-height: 1;
color: var(--color-text-inverse);
background-color: var(--color-text);
border: 1px solid var(--color-text);
border-radius: var(--radius-full);
text-decoration: none;
cursor: pointer;
transition: background-color var(--transition-base),
color var(--transition-base),
transform var(--transition-fast);
}
.aeo-btn:hover,
.aeo-btn:focus-visible {
color: var(--color-text-inverse);
background-color: var(--color-primary);
border-color: var(--color-primary);
}
.aeo-btn--ghost {
color: var(--color-text);
background-color: transparent;
}
.aeo-btn--ghost:hover,
.aeo-btn--ghost:focus-visible {
color: var(--color-text-inverse);
}
/* =============================================================================
5. Site header
========================================================================== */
.aeo-site-header {
position: relative;
padding-block: var(--space-5);
background-color: var(--color-bg);
border-bottom: 1px solid var(--color-border-soft);
}
.aeo-site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
}
.aeo-site-title {
margin: 0;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-lg);
letter-spacing: var(--ls-tight);
}
.aeo-site-title a {
color: var(--color-text);
text-decoration: none;
}
/* Primary menu — desktop. */
.aeo-primary-menu {
display: flex;
gap: var(--space-6);
margin: 0;
padding: 0;
list-style: none;
}
.aeo-primary-menu li {
margin: 0;
}
.aeo-primary-menu a {
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
color: var(--color-text-soft);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
padding-block: var(--space-2);
transition: color var(--transition-base);
}
.aeo-primary-menu a:hover,
.aeo-primary-menu .current-menu-item > a {
color: var(--color-text);
}
/* Burger toggle — ascuns pe desktop. */
.aeo-site-nav__toggle {
display: none;
background: none;
border: 0;
padding: var(--space-2);
cursor: pointer;
}
.aeo-site-nav__toggle-bar {
display: block;
width: 24px;
height: 2px;
background-color: var(--color-text);
margin-block: 5px;
transition: transform var(--transition-base), opacity var(--transition-base);
}
/* Mobile — burger + collapse. */
@media (max-width: 767px) {
.aeo-site-nav__toggle {
display: block;
}
.aeo-primary-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
gap: 0;
background-color: var(--color-surface);
border-bottom: 1px solid var(--color-border);
padding: var(--space-4) var(--container-padding-x);
box-shadow: var(--shadow-md);
z-index: var(--z-sticky);
}
.aeo-primary-menu.is-open {
display: flex;
}
.aeo-primary-menu li {
border-top: 1px solid var(--color-border-soft);
}
.aeo-primary-menu li:first-child {
border-top: 0;
}
.aeo-primary-menu a {
display: block;
padding-block: var(--space-3);
}
}
/* =============================================================================
6. Site footer
========================================================================== */
.aeo-site-footer {
margin-top: var(--space-20);
padding-block: var(--space-12);
background-color: var(--color-text);
color: var(--color-text-inverse);
}
.aeo-site-footer__inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
}
@media (min-width: 768px) {
.aeo-site-footer__inner {
grid-template-columns: 1.5fr 1fr 1fr;
gap: var(--space-12);
}
}
.aeo-site-footer__name {
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-lg);
margin: 0 0 var(--space-2);
}
.aeo-site-footer__tagline {
color: rgba(255, 255, 255, 0.7);
font-size: var(--fs-sm);
margin: 0;
}
.aeo-footer-menu {
list-style: none;
margin: 0;
padding: 0;
}
.aeo-footer-menu li {
margin: 0 0 var(--space-2);
}
.aeo-footer-menu a {
color: rgba(255, 255, 255, 0.85);
font-size: var(--fs-sm);
text-decoration: none;
}
.aeo-footer-menu a:hover {
color: var(--color-text-inverse);
text-decoration: underline;
}
.aeo-site-footer__legal {
font-size: var(--fs-xs);
color: rgba(255, 255, 255, 0.6);
}
.aeo-site-footer__legal p {
margin: 0;
}
/* =============================================================================
7. Skip link & accessibility helpers
========================================================================== */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
/* Critical: pe focus, reset complet la TOATE proprietățile de hiding.
Doar `top` nu este suficient — fără reset la clip/clip-path/width/height/overflow,
elementul rămâne invizibil chiar și când e focus-at. */
.screen-reader-text:focus,
.aeo-skip-link:focus {
background-color: var(--color-text);
clip: auto !important;
clip-path: none !important;
color: var(--color-text-inverse);
display: block;
font-family: var(--font-display);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
height: auto;
left: var(--space-4);
line-height: normal;
padding: var(--space-3) var(--space-5);
text-decoration: none;
top: var(--space-4);
width: auto;
z-index: var(--z-modal);
border-radius: var(--radius-sm);
overflow: visible;
}
.aeo-skip-link {
position: absolute;
top: -100px;
left: var(--space-4);
background-color: var(--color-text);
color: var(--color-text-inverse);
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-sm);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
text-decoration: none;
z-index: var(--z-modal);
}
#aeo-main {
outline: none;
}
/* =============================================================================
8. Breadcrumbs
========================================================================== */
.aeo-breadcrumbs {
margin-block: 0 var(--space-6);
}
.aeo-breadcrumbs__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
align-items: center;
font-size: var(--fs-sm);
color: var(--color-text-muted);
}
.aeo-breadcrumbs__item {
margin: 0;
display: flex;
align-items: center;
gap: var(--space-2);
}
.aeo-breadcrumbs__item:not(:last-child)::after {
content: '/';
color: var(--color-border);
margin-left: var(--space-2);
}
.aeo-breadcrumbs a {
color: var(--color-text-muted);
text-decoration: none;
}
.aeo-breadcrumbs a:hover {
color: var(--color-text);
text-decoration: underline;
}
.aeo-breadcrumbs [aria-current="page"] {
color: var(--color-text);
}
/* =============================================================================
9. Generic page header
========================================================================== */
.aeo-page-header {
margin-bottom: var(--space-10);
}
.aeo-page-title {
margin: 0;
}
.aeo-page-hero {
padding-block: var(--space-12) var(--space-8);
}
@media (min-width: 768px) {
.aeo-page-hero {
padding-block: var(--space-16) var(--space-10);
}
}
.aeo-page-hero__title {
margin: 0 0 var(--space-4);
}
.aeo-page-hero__lead {
font-family: var(--font-display);
font-weight: var(--fw-light);
font-size: var(--fs-xl);
line-height: var(--lh-snug);
color: var(--color-text-soft);
margin: 0;
}
.aeo-page-featured {
margin-block: var(--space-8) var(--space-12);
}
.aeo-page-featured img {
width: 100%;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.aeo-page-content {
padding-bottom: var(--space-16);
}
.entry-content > * + * {
margin-top: var(--space-5);
}
.entry-content > h2 {
margin-top: var(--space-12);
}
.entry-content > h3 {
margin-top: var(--space-10);
}
/* =============================================================================
10. 404
========================================================================== */
.aeo-404 {
padding-block: var(--space-20);
text-align: center;
}
.aeo-404__code {
font-family: var(--font-display);
font-weight: var(--fw-light);
font-size: var(--fs-6xl);
line-height: 1;
color: var(--color-primary);
margin: 0 0 var(--space-4);
letter-spacing: var(--ls-tighter);
}
.aeo-404__title {
margin: 0 0 var(--space-4);
}
.aeo-404__lead {
color: var(--color-text-soft);
margin: 0 0 var(--space-8);
}
.aeo-404__links {
list-style: none;
padding: 0;
margin: 0 0 var(--space-10);
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
justify-content: center;
}
.aeo-404__links a {
display: inline-block;
padding: var(--space-2) var(--space-5);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
text-decoration: none;
color: var(--color-text);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
}
.aeo-404__links a:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.aeo-404__search {
margin-top: var(--space-8);
}
.aeo-404__search p {
color: var(--color-text-muted);
font-size: var(--fs-sm);
margin-bottom: var(--space-3);
}
/* =============================================================================
11. Posts list (fallback index.php)
========================================================================== */
.aeo-posts-list {
display: grid;
gap: var(--space-8);
}
.aeo-post-summary {
padding-bottom: var(--space-8);
border-bottom: 1px solid var(--color-border-soft);
}
.aeo-post-summary:last-child {
border-bottom: 0;
}
.aeo-post-summary__title {
font-size: var(--fs-2xl);
margin: 0 0 var(--space-2);
}
.aeo-post-summary__title a {
color: var(--color-text);
text-decoration: none;
}
.aeo-post-summary__title a:hover {
color: var(--color-primary);
}
.aeo-post-summary__excerpt {
color: var(--color-text-soft);
}
/* =============================================================================
12. WordPress core blocks helpers (minim)
========================================================================== */
.aligncenter {
margin-inline: auto;
}
.alignleft {
float: left;
margin-right: var(--space-6);
}
.alignright {
float: right;
margin-left: var(--space-6);
}
.alignfull {
width: 100%;
}
.wp-caption-text,
.wp-block-image figcaption {
font-size: var(--fs-sm);
color: var(--color-text-muted);
text-align: center;
margin-top: var(--space-2);
}
/* =============================================================================
13. Utilities locale
========================================================================== */
.aeo-text-muted { color: var(--color-text-muted); }
.aeo-text-soft { color: var(--color-text-soft); }
.aeo-text-center { text-align: center; }
.aeo-divider {
height: 1px;
background-color: var(--color-border);
border: 0;
margin-block: var(--space-12);
}
/* =============================================================================
14. Archive hero (folosit în home, archive, archive-glossary, taxonomy, category, search)
========================================================================== */
.aeo-archive-hero {
padding-block: var(--space-12) var(--space-8);
border-bottom: 1px solid var(--color-border-soft);
}
@media (min-width: 768px) {
.aeo-archive-hero {
padding-block: var(--space-16) var(--space-10);
}
}
.aeo-archive-hero__eyebrow {
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-primary);
margin: 0 0 var(--space-3);
}
.aeo-archive-hero__eyebrow a {
color: inherit;
text-decoration: none;
}
.aeo-archive-hero__eyebrow a:hover {
color: var(--color-text);
}
.aeo-archive-hero__title {
margin: 0 0 var(--space-4);
font-size: var(--fs-3xl);
letter-spacing: var(--ls-tight);
}
@media (min-width: 768px) {
.aeo-archive-hero__title {
font-size: var(--fs-4xl);
}
}
.aeo-archive-hero__lead {
font-family: var(--font-display);
font-weight: var(--fw-light);
font-size: var(--fs-lg);
line-height: var(--lh-snug);
color: var(--color-text-soft);
margin: 0;
}
@media (min-width: 768px) {
.aeo-archive-hero__lead {
font-size: var(--fs-xl);
}
}
/* =============================================================================
15. Glossary controls (search + filters + A-Z)
========================================================================== */
.aeo-glossary-controls {
padding-block: var(--space-8);
background-color: var(--color-surface-alt);
border-bottom: 1px solid var(--color-border-soft);
}
.aeo-glossary-controls > .container-aeo > * + * {
margin-top: var(--space-6);
}
/* Search */
.aeo-glossary-search {
display: flex;
gap: var(--space-2);
max-width: 560px;
}
.aeo-glossary-search__input {
flex: 1;
padding: var(--space-3) var(--space-5);
font-family: var(--font-body);
font-weight: var(--fw-regular);
font-size: var(--fs-base);
color: var(--color-text);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
outline: none;
transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.aeo-glossary-search__input::placeholder {
color: var(--color-text-muted);
}
.aeo-glossary-search__input:focus-visible {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(110, 43, 217, 0.12);
}
.aeo-glossary-search__submit {
padding: var(--space-3) var(--space-6);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
color: var(--color-text-inverse);
background-color: var(--color-text);
border: 0;
border-radius: var(--radius-full);
cursor: pointer;
transition: background-color var(--transition-base);
}
.aeo-glossary-search__submit:hover,
.aeo-glossary-search__submit:focus-visible {
background-color: var(--color-primary);
}
/* Filters */
.aeo-glossary-filters {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: center;
}
.aeo-glossary-filters__label {
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
color: var(--color-text-muted);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
}
.aeo-glossary-filters__list {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
list-style: none;
margin: 0;
padding: 0;
}
.aeo-glossary-filters__item {
margin: 0;
}
.aeo-chip {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
color: var(--color-text-soft);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
text-decoration: none;
transition: all var(--transition-base);
}
.aeo-chip:hover,
.aeo-chip:focus-visible {
color: var(--color-text);
border-color: var(--color-text);
}
.aeo-chip.is-active {
color: var(--color-text-inverse);
background-color: var(--color-text);
border-color: var(--color-text);
}
.aeo-chip__count {
font-size: var(--fs-xs);
font-weight: var(--fw-regular);
color: var(--color-text-muted);
background-color: var(--color-surface-alt);
padding: 1px 6px;
border-radius: var(--radius-full);
min-width: 20px;
text-align: center;
}
.aeo-chip.is-active .aeo-chip__count {
color: var(--color-text-inverse);
background-color: rgba(255, 255, 255, 0.18);
}
/* A-Z */
.aeo-glossary-az {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: center;
}
.aeo-glossary-az__label {
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
color: var(--color-text-muted);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
}
.aeo-glossary-az__list {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
list-style: none;
margin: 0;
padding: 0;
}
.aeo-glossary-az__item {
margin: 0;
}
.aeo-glossary-az__letter {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 var(--space-2);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
color: var(--color-text-soft);
background-color: transparent;
border: 1px solid transparent;
border-radius: var(--radius-sm);
text-decoration: none;
transition: all var(--transition-base);
}
.aeo-glossary-az__letter:hover,
.aeo-glossary-az__letter:focus-visible {
color: var(--color-text);
background-color: var(--color-surface);
border-color: var(--color-border);
}
.aeo-glossary-az__letter.is-active {
color: var(--color-text-inverse);
background-color: var(--color-primary);
border-color: var(--color-primary);
}
/* =============================================================================
16. Card (glossary term + post)
========================================================================== */
.aeo-card {
background-color: var(--color-surface);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.aeo-card:hover {
transform: translateY(-2px);
border-color: var(--color-border);
box-shadow: var(--shadow-md);
}
/* Glossary card */
.aeo-card--glossary .aeo-card__link {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-6);
color: inherit;
text-decoration: none;
height: 100%;
}
.aeo-card__category {
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-primary);
}
.aeo-card--post .aeo-card__category a {
color: inherit;
text-decoration: none;
}
.aeo-card__title {
font-size: var(--fs-xl);
margin: 0;
color: var(--color-text);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-tight);
}
.aeo-card--post .aeo-card__title a {
color: inherit;
text-decoration: none;
}
.aeo-card--post .aeo-card__title a:hover {
color: var(--color-primary);
}
.aeo-card__excerpt {
font-size: var(--fs-sm);
line-height: var(--lh-normal);
color: var(--color-text-soft);
margin: 0;
}
.aeo-card__cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: auto;
padding-top: var(--space-3);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
color: var(--color-primary);
}
.aeo-card__arrow {
transition: transform var(--transition-base);
}
.aeo-card:hover .aeo-card__arrow {
transform: translateX(4px);
}
/* Post card */
.aeo-card--post {
display: flex;
flex-direction: column;
}
.aeo-card__thumb {
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background-color: var(--color-surface-alt);
}
.aeo-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.aeo-card--post:hover .aeo-card__thumb img {
transform: scale(1.02);
}
.aeo-card__body {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-6);
}
.aeo-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-xs);
color: var(--color-text-muted);
margin-top: auto;
padding-top: var(--space-3);
}
/* =============================================================================
17. Grids: glossary list + posts list
========================================================================== */
/* Layout grid: row + col-* / row-cols-* (Bootstrap 5.3.8).
Aceste clase NU mai au display:grid; sunt doar styling rezidual
(margine inferioară, eventual override-uri minore). */
.aeo-glossary-grid {
margin-bottom: var(--space-12);
}
.aeo-posts-grid {
margin-bottom: var(--space-12);
}
/* În Bootstrap col, cardul trebuie să umple coloana pentru equal heights */
.aeo-glossary-grid > .col,
.aeo-glossary-grid > [class*="col-"],
.aeo-posts-grid > .col,
.aeo-posts-grid > [class*="col-"] {
display: flex;
}
.aeo-glossary-grid > .col > .aeo-card,
.aeo-glossary-grid > [class*="col-"] > .aeo-card,
.aeo-posts-grid > .col > .aeo-card,
.aeo-posts-grid > [class*="col-"] > .aeo-card {
width: 100%;
}
/* =============================================================================
18. Empty state
========================================================================== */
.aeo-empty-state {
padding: var(--space-16) var(--space-4);
text-align: center;
background-color: var(--color-surface);
border: 1px dashed var(--color-border);
border-radius: var(--radius-lg);
}
.aeo-empty-state h2 {
font-size: var(--fs-xl);
margin: 0 0 var(--space-3);
color: var(--color-text-soft);
}
.aeo-empty-state p {
color: var(--color-text-muted);
margin: 0 0 var(--space-5);
}
.aeo-empty-state p:last-child {
margin-bottom: 0;
}
/* =============================================================================
19. Pagination (the_posts_pagination output)
========================================================================== */
.nav-links {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
justify-content: center;
margin-block: var(--space-8);
}
.nav-links .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 var(--space-3);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
color: var(--color-text-soft);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
text-decoration: none;
transition: all var(--transition-base);
}
.nav-links .page-numbers:hover,
.nav-links .page-numbers:focus-visible {
color: var(--color-text);
border-color: var(--color-text);
}
.nav-links .page-numbers.current {
color: var(--color-text-inverse);
background-color: var(--color-text);
border-color: var(--color-text);
}
.nav-links .page-numbers.dots {
border-color: transparent;
background-color: transparent;
}
/* =============================================================================
20. Single (post + glossary)
========================================================================== */
.aeo-single__hero {
padding-block: var(--space-12) var(--space-6);
}
@media (min-width: 768px) {
.aeo-single__hero {
padding-block: var(--space-16) var(--space-8);
}
}
.aeo-single__eyebrow {
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-primary);
margin: 0 0 var(--space-3);
}
.aeo-single__eyebrow a {
color: inherit;
text-decoration: none;
}
.aeo-single__eyebrow a:hover {
color: var(--color-text);
}
.aeo-single__title {
margin: 0 0 var(--space-4);
font-size: var(--fs-3xl);
letter-spacing: var(--ls-tighter);
}
@media (min-width: 768px) {
.aeo-single__title {
font-size: var(--fs-4xl);
}
}
@media (min-width: 1200px) {
.aeo-single__title {
font-size: var(--fs-5xl);
}
}
.aeo-single__title--glossary {
font-weight: var(--fw-light);
}
.aeo-single__definition {
font-family: var(--font-display);
font-weight: var(--fw-light);
font-size: var(--fs-xl);
line-height: var(--lh-snug);
color: var(--color-text-soft);
margin: var(--space-6) 0 0;
padding: var(--space-5) 0 0;
border-top: 1px solid var(--color-border);
}
@media (min-width: 768px) {
.aeo-single__definition {
font-size: var(--fs-2xl);
}
}
.aeo-single__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-sm);
color: var(--color-text-muted);
}
.aeo-single__meta-author {
color: var(--color-text-soft);
}
.aeo-single__featured {
margin-block: var(--space-8) var(--space-12);
}
.aeo-single__featured img {
width: 100%;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.aeo-single__body {
padding-bottom: var(--space-12);
}
.aeo-single__after {
padding-block: var(--space-12);
background-color: var(--color-surface-alt);
}
.aeo-single__cta {
padding-block: var(--space-12);
}
/* =============================================================================
21. Summary box "Pe scurt"
========================================================================== */
.aeo-summary {
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-primary);
border-radius: var(--radius-md);
padding: var(--space-6);
margin: var(--space-8) 0 var(--space-10);
}
.aeo-summary__title {
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-primary);
margin: 0 0 var(--space-4);
}
.aeo-summary__list {
margin: 0;
padding-left: var(--space-5);
}
.aeo-summary__list li {
margin-bottom: var(--space-2);
color: var(--color-text-soft);
}
.aeo-summary__list li:last-child {
margin-bottom: 0;
}
.aeo-summary__text {
margin: 0;
color: var(--color-text-soft);
}
/* =============================================================================
22. Related (terms + posts)
========================================================================== */
.aeo-related {
margin-bottom: var(--space-12);
}
.aeo-related:last-child {
margin-bottom: 0;
}
.aeo-related__title {
font-size: var(--fs-xl);
margin: 0 0 var(--space-6);
color: var(--color-text);
}
.aeo-related__grid {
/* Layout: Bootstrap row + row-cols-*. Nu mai folosim CSS grid custom. */
}
.aeo-related__grid--posts {
/* Layout: Bootstrap row + row-cols-md-3. */
}
/* =============================================================================
23. CTA block
========================================================================== */
.aeo-cta {
background: var(--gradient-brand);
color: var(--color-text-inverse);
border-radius: var(--radius-xl);
padding: var(--space-10) var(--space-6);
text-align: center;
}
@media (min-width: 768px) {
.aeo-cta {
padding: var(--space-16) var(--space-12);
}
}
.aeo-cta__inner {
max-width: 720px;
margin-inline: auto;
}
.aeo-cta__title {
color: inherit;
font-size: var(--fs-2xl);
margin: 0 0 var(--space-3);
font-weight: var(--fw-semibold);
}
@media (min-width: 768px) {
.aeo-cta__title {
font-size: var(--fs-3xl);
}
}
.aeo-cta__text {
color: rgba(255, 255, 255, 0.92);
font-size: var(--fs-lg);
font-weight: var(--fw-light);
line-height: var(--lh-snug);
margin: 0 0 var(--space-6);
}
.aeo-cta .aeo-btn {
background-color: var(--color-text-inverse);
color: var(--color-text);
border-color: var(--color-text-inverse);
}
.aeo-cta .aeo-btn:hover,
.aeo-cta .aeo-btn:focus-visible {
background-color: var(--color-text);
color: var(--color-text-inverse);
border-color: var(--color-text);
}
.aeo-cta--minimal {
background: var(--color-text);
}
.aeo-cta--methodology {
background: var(--color-text);
}
/* =============================================================================
24. Front page sections
========================================================================== */
/* Hero home */
.aeo-hero-home {
padding-block: var(--space-16) var(--space-12);
}
@media (min-width: 768px) {
.aeo-hero-home {
padding-block: var(--space-20) var(--space-16);
}
}
@media (min-width: 1200px) {
.aeo-hero-home {
padding-block: var(--space-24) var(--space-20);
}
}
.aeo-hero-home__inner {
/* v0.3.7: max-width eliminat; coloana Bootstrap col-lg-9 col-xl-8
controlează lățimea acum. */
}
.aeo-hero-home__eyebrow {
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-primary);
margin: 0 0 var(--space-5);
}
.aeo-hero-home__title {
margin: 0 0 var(--space-6);
}
.aeo-hero-home__title em {
font-style: italic;
color: var(--color-primary);
font-weight: inherit;
}
.aeo-hero-home__lead {
font-family: var(--font-display);
font-weight: var(--fw-light);
font-size: var(--fs-lg);
line-height: var(--lh-snug);
color: var(--color-text-soft);
margin: 0 0 var(--space-8);
max-width: 720px;
}
@media (min-width: 768px) {
.aeo-hero-home__lead {
font-size: var(--fs-xl);
}
}
.aeo-hero-home__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
/* Section common */
.aeo-section__eyebrow {
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-primary);
margin: 0 0 var(--space-3);
}
.aeo-section__header {
max-width: 720px;
margin: 0 0 var(--space-10);
}
.aeo-section--cta-final {
text-align: center;
}
.aeo-section__title {
font-size: var(--fs-2xl);
margin: 0 0 var(--space-4);
letter-spacing: var(--ls-tight);
}
@media (min-width: 768px) {
.aeo-section__title {
font-size: var(--fs-3xl);
}
}
.aeo-section__lead {
font-family: var(--font-display);
font-weight: var(--fw-light);
font-size: var(--fs-lg);
line-height: var(--lh-snug);
color: var(--color-text-soft);
}
/* Pillars grid — layout via Bootstrap row + row-cols-xl-5. */
.aeo-pillars-grid {
/* Layout: row-cols. Folosit doar pentru namespacing CSS rezidual. */
}
/* Asigură că .aeo-pillar umple col-ul când Bootstrap setează equal heights */
.aeo-pillars-grid .col > .aeo-pillar {
height: 100%;
}
.aeo-pillar {
background-color: var(--color-surface);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.aeo-pillar__index {
display: inline-block;
font-family: var(--font-display);
font-weight: var(--fw-light);
font-size: var(--fs-2xl);
color: var(--color-primary);
margin-bottom: var(--space-3);
letter-spacing: var(--ls-tight);
}
.aeo-pillar__title {
font-size: var(--fs-lg);
margin: 0 0 var(--space-2);
}
.aeo-pillar__text {
font-size: var(--fs-sm);
color: var(--color-text-soft);
line-height: var(--lh-normal);
margin: 0;
}
/* Framework section (centered text) */
.aeo-section--framework {
text-align: center;
background-color: var(--color-surface-alt);
}
/* Resources grid — layout via Bootstrap row + row-cols-md-3. */
.aeo-resources-grid {
/* Layout: row-cols. */
}
/* Asigură că .aeo-resource-card umple col-ul */
.aeo-resources-grid .col > .aeo-resource-card {
height: 100%;
}
.aeo-resource-card {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-8);
background-color: var(--color-surface);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius-lg);
color: var(--color-text);
text-decoration: none;
position: relative;
transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.aeo-resource-card:hover,
.aeo-resource-card:focus-visible {
transform: translateY(-2px);
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
color: var(--color-text);
}
.aeo-resource-card__label {
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-primary);
}
.aeo-resource-card__title {
font-size: var(--fs-xl);
margin: 0;
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-tight);
}
.aeo-resource-card__text {
font-size: var(--fs-sm);
color: var(--color-text-soft);
margin: 0;
line-height: var(--lh-normal);
}
.aeo-resource-card__arrow {
font-size: var(--fs-xl);
color: var(--color-primary);
margin-top: auto;
padding-top: var(--space-3);
transition: transform var(--transition-base);
}
.aeo-resource-card:hover .aeo-resource-card__arrow {
transform: translateX(4px);
}
/* =============================================================================
25. v0.2.3 — Temporary Public Homepage
========================================================================== */
/* Hero variant — temporar, accent vertical mai aerisit */
.aeo-hero-home--temp {
padding-block: var(--space-20) var(--space-12);
text-align: center;
}
@media (min-width: 768px) {
.aeo-hero-home--temp {
padding-block: var(--space-24) var(--space-16);
}
}
.aeo-hero-home--temp .aeo-hero-home__inner {
max-width: 880px;
margin-inline: auto;
}
.aeo-hero-home--temp .aeo-hero-home__eyebrow {
margin-bottom: var(--space-6);
}
.aeo-hero-home--temp .aeo-hero-home__title {
font-size: var(--fs-4xl);
margin-bottom: var(--space-6);
}
@media (min-width: 768px) {
.aeo-hero-home--temp .aeo-hero-home__title {
font-size: var(--fs-5xl);
}
}
.aeo-hero-home__title-sub {
display: block;
font-family: var(--font-display);
font-weight: var(--fw-light);
font-size: var(--fs-xl);
line-height: var(--lh-snug);
color: var(--color-text-soft);
margin-top: var(--space-3);
letter-spacing: var(--ls-tight);
}
@media (min-width: 768px) {
.aeo-hero-home__title-sub {
font-size: var(--fs-2xl);
}
}
.aeo-hero-home--temp .aeo-hero-home__lead {
max-width: 720px;
margin-inline: auto;
}
.aeo-hero-home__lead--secondary {
margin-top: var(--space-4) !important;
font-size: var(--fs-base) !important;
color: var(--color-text-muted);
}
.aeo-hero-home--temp .aeo-hero-home__actions {
justify-content: center;
margin-top: var(--space-8);
}
/* Section: Ce pregătim */
.aeo-section--prep {
padding-block: var(--space-12) var(--space-16);
background-color: var(--color-surface-alt);
}
@media (min-width: 768px) {
.aeo-section--prep {
padding-block: var(--space-16) var(--space-20);
}
}
.aeo-section--prep .aeo-section__header {
text-align: center;
max-width: 720px;
margin-inline: auto;
margin-bottom: var(--space-10);
}
.aeo-section--prep .aeo-section__eyebrow {
text-align: center;
}
/* Asigură equal heights pentru cardurile prep în row Bootstrap */
.aeo-prep-grid .col > .aeo-prep-card {
height: 100%;
}
.aeo-prep-card {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-6);
background-color: var(--color-surface);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius-lg);
transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.aeo-prep-card:hover {
border-color: var(--color-border);
box-shadow: var(--shadow-md);
}
.aeo-prep-card__badge {
display: inline-flex;
align-self: flex-start;
align-items: center;
padding: 2px var(--space-3);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-primary);
background-color: rgba(110, 43, 217, 0.08);
border: 1px solid rgba(110, 43, 217, 0.18);
border-radius: var(--radius-full);
}
.aeo-prep-card__title {
font-size: var(--fs-lg);
margin: 0;
color: var(--color-text);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-tight);
}
.aeo-prep-card__text {
font-size: var(--fs-sm);
line-height: var(--lh-normal);
color: var(--color-text-soft);
margin: 0;
}
/* Section: De ce există */
.aeo-section--why {
padding-block: var(--space-12) var(--space-12);
}
@media (min-width: 768px) {
.aeo-section--why {
padding-block: var(--space-16) var(--space-16);
}
}
.aeo-section--why p {
margin-bottom: var(--space-4);
}
.aeo-section--why p:last-child {
margin-bottom: 0;
}
/* Section: Ce vei găsi pe AEO.ro (v0.2.4 — replace fost Status editorial) */
.aeo-section--offering {
padding-block: var(--space-8) var(--space-12);
background-color: var(--color-surface-alt);
}
@media (min-width: 768px) {
.aeo-section--offering {
padding-block: var(--space-12) var(--space-16);
}
}
.aeo-offering-list {
list-style: none;
margin: 0;
padding: 0;
}
.aeo-offering-list__item {
display: flex;
gap: var(--space-3);
padding: var(--space-4) 0;
border-bottom: 1px solid var(--color-border-soft);
align-items: flex-start;
}
.aeo-offering-list__item:last-child {
border-bottom: 0;
}
.aeo-offering-list__marker {
flex: 0 0 auto;
color: var(--color-primary);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-base);
line-height: 1.6;
min-width: 1.5em;
}
.aeo-offering-list__text {
flex: 1 1 auto;
color: var(--color-text-soft);
font-size: var(--fs-base);
line-height: var(--lh-normal);
}
/* =============================================================================
26. v0.2.3 — Page placeholder layout (în pregătire)
========================================================================== */
.aeo-page-placeholder {
padding-block: var(--space-16) var(--space-20);
}
.aeo-page-placeholder__badge {
display: inline-flex;
align-items: center;
padding: var(--space-2) var(--space-4);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-primary);
background-color: rgba(110, 43, 217, 0.08);
border: 1px solid rgba(110, 43, 217, 0.18);
border-radius: var(--radius-full);
margin-bottom: var(--space-5);
}
/* =============================================================================
27. v0.2.5 — Page Legal + Contact templates
========================================================================== */
/* Hero pagină legal — păstrează aeo-page-hero existent, adăugăm date.
Reading-column rămâne 880px (deja setat) — potrivit pentru text legal. */
.aeo-page-dates {
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border-soft);
}
.aeo-page-dates__line {
margin: 0;
font-size: var(--fs-sm);
color: var(--color-text-muted);
line-height: var(--lh-snug);
}
.aeo-page-dates__line + .aeo-page-dates__line {
margin-top: var(--space-1);
}
.aeo-page-dates__label {
color: var(--color-text-soft);
font-weight: var(--fw-semibold);
margin-right: var(--space-1);
}
/* Pagini legal — typography mai aerisită pentru text dens */
.aeo-page--legal .entry-content h2 {
margin-top: var(--space-10);
margin-bottom: var(--space-4);
font-size: var(--fs-xl);
letter-spacing: var(--ls-tight);
}
.aeo-page--legal .entry-content h2:first-child {
margin-top: 0;
}
.aeo-page--legal .entry-content p,
.aeo-page--legal .entry-content ul,
.aeo-page--legal .entry-content ol {
margin-bottom: var(--space-4);
}
.aeo-page--legal .entry-content ul,
.aeo-page--legal .entry-content ol {
padding-left: var(--space-6);
}
.aeo-page--legal .entry-content li {
margin-bottom: var(--space-2);
line-height: var(--lh-normal);
}
.aeo-page--legal .entry-content li:last-child {
margin-bottom: 0;
}
/* Company details list — formatare clară pentru date operator */
.aeo-company-details {
list-style: none !important;
padding-left: 0 !important;
margin: var(--space-4) 0 var(--space-6);
background-color: var(--color-surface-alt);
border-left: 3px solid var(--color-primary);
border-radius: var(--radius-md);
padding: var(--space-5) var(--space-6) !important;
}
.aeo-page--legal .entry-content .aeo-company-details li {
margin-bottom: var(--space-2);
padding-left: 0;
}
.aeo-company-details li strong {
display: inline-block;
min-width: 110px;
color: var(--color-text);
}
/* Contact email box */
.aeo-contact-email {
margin: var(--space-6) 0 var(--space-8);
padding: var(--space-6);
background-color: var(--color-surface-alt);
border-left: 3px solid var(--color-primary);
border-radius: var(--radius-md);
}
.aeo-contact-email__label {
margin: 0 0 var(--space-1);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-text-muted);
}
.aeo-contact-email__address {
margin: 0;
font-size: var(--fs-xl);
font-weight: var(--fw-semibold);
}
.aeo-contact-email__address a {
color: var(--color-primary);
text-decoration: none;
border-bottom: 1px solid currentColor;
}
.aeo-contact-email__address a:hover,
.aeo-contact-email__address a:focus-visible {
color: var(--color-text);
}
/* Divider între template content și content adițional din editor */
.aeo-page-divider {
margin: var(--space-10) 0;
border: 0;
border-top: 1px solid var(--color-border-soft);
}
/* Footer fallback legal nav */
.aeo-footer-nav--fallback .aeo-footer-menu--legal {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.aeo-footer-menu--legal li {
margin: 0;
}
.aeo-footer-menu--legal a {
color: var(--color-text-muted);
text-decoration: none;
font-size: var(--fs-sm);
}
.aeo-footer-menu--legal a:hover,
.aeo-footer-menu--legal a:focus-visible {
color: var(--color-text-inverse);
text-decoration: underline;
}
/* =============================================================================
28. v0.2.7 — Glossary Content UX
========================================================================== */
/* ----- Featured image pentru single-glossary -------------------------------
Imaginea rămâne în reading-column pentru a nu rupe ritmul vertical.
Pe ecrane mari poate ieși ușor la stânga/dreapta dacă editorul folosește
.aeo-glossary-featured-image--wide (opțional, viitor). */
.aeo-single__featured--glossary {
margin-block: var(--space-6) var(--space-10);
}
.aeo-single__featured--glossary img,
.aeo-glossary-featured-image {
width: 100%;
height: auto;
display: block;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.aeo-single__featured-caption {
margin-top: var(--space-3);
font-size: var(--fs-sm);
color: var(--color-text-muted);
font-style: italic;
text-align: center;
}
/* ----- Box "Pe scurt" — extindere stil deja existent în entry-content -----
Clasa există în template-parts/components/summary-box.php și are deja
stiluri în §21. Aici adăugăm doar varianta din content editorial. */
.entry-content .aeo-summary {
margin: var(--space-8) 0 var(--space-10);
}
/* ----- Callout-uri editoriale --------------------------------------------- */
.aeo-callout {
margin: var(--space-6) 0;
padding: var(--space-5) var(--space-6);
background-color: var(--color-surface-alt);
border-left: 4px solid var(--color-primary);
border-radius: var(--radius-md);
}
.aeo-callout__title {
margin: 0 0 var(--space-2);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-primary);
}
.aeo-callout > *:last-child {
margin-bottom: 0;
}
/* Variante */
.aeo-callout--note {
border-left-color: var(--color-primary);
}
.aeo-callout--warning {
border-left-color: #c97b16;
background-color: #fff8ee;
}
.aeo-callout--warning .aeo-callout__title {
color: #b56500;
}
.aeo-callout--success {
border-left-color: #2f9f5f;
background-color: #f0faf3;
}
.aeo-callout--success .aeo-callout__title {
color: #1f7a45;
}
/* ----- Checklist editorial ------------------------------------------------ */
.aeo-checklist {
list-style: none !important;
padding-left: 0 !important;
margin: var(--space-6) 0;
}
.entry-content .aeo-checklist li {
position: relative;
padding-left: var(--space-7);
margin-bottom: var(--space-3);
line-height: var(--lh-normal);
}
.aeo-checklist li::before {
content: "";
position: absolute;
left: 0;
top: 0.35em;
width: 18px;
height: 18px;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
background-color: var(--color-surface);
}
/* Checked items (editorul adaugă class is-checked pe li) */
.aeo-checklist li.is-checked::before {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
.aeo-checklist li.is-checked::after {
content: "";
position: absolute;
left: 4px;
top: calc(0.35em + 3px);
width: 10px;
height: 6px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg);
}
/* ----- Tabele responsive -------------------------------------------------- */
/* Wrapper recomandat: */
.aeo-table-wrap {
overflow-x: auto;
margin: var(--space-6) 0;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--color-border-soft);
border-radius: var(--radius-md);
}
.aeo-table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-sm);
background-color: var(--color-surface);
}
.aeo-table caption {
caption-side: top;
text-align: left;
padding: var(--space-3) var(--space-4);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
color: var(--color-text-muted);
}
.aeo-table th,
.aeo-table td {
padding: var(--space-3) var(--space-4);
text-align: left;
border-bottom: 1px solid var(--color-border-soft);
vertical-align: top;
}
.aeo-table thead th {
background-color: var(--color-surface-alt);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
color: var(--color-text);
border-bottom: 2px solid var(--color-border);
}
.aeo-table tbody tr:last-child td {
border-bottom: 0;
}
.aeo-table tbody tr:hover {
background-color: var(--color-surface-alt);
}
/* Fallback pentru tabele Gutenberg native fără wrap manual */
.entry-content table:not(.aeo-table) {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-sm);
margin: var(--space-6) 0;
display: block;
overflow-x: auto;
}
.entry-content table:not(.aeo-table) th,
.entry-content table:not(.aeo-table) td {
padding: var(--space-3) var(--space-4);
text-align: left;
border-bottom: 1px solid var(--color-border-soft);
}
.entry-content table:not(.aeo-table) thead th {
background-color: var(--color-surface-alt);
font-weight: var(--fw-semibold);
}
/* ----- Surse -------------------------------------------------------------- */
.aeo-sources {
margin: var(--space-10) 0 var(--space-6);
padding: var(--space-5) var(--space-6);
background-color: var(--color-surface-alt);
border-radius: var(--radius-md);
}
.aeo-sources__title {
margin: 0 0 var(--space-3);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-text-muted);
}
.aeo-sources__list {
margin: 0;
padding-left: var(--space-5);
list-style: decimal;
}
.entry-content .aeo-sources__list li {
margin-bottom: var(--space-2);
font-size: var(--fs-sm);
color: var(--color-text-soft);
line-height: var(--lh-snug);
}
.aeo-sources__list li:last-child {
margin-bottom: 0;
}
.aeo-sources__list a {
color: var(--color-primary);
text-decoration: none;
border-bottom: 1px solid currentColor;
}
.aeo-sources__list a:hover,
.aeo-sources__list a:focus-visible {
color: var(--color-text);
}
/* ----- Termeni conectați (inline link list — distinct de related-terms cards) */
.aeo-connected-terms {
margin: var(--space-8) 0;
padding: var(--space-5) var(--space-6);
background-color: var(--color-surface);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius-md);
}
.aeo-connected-terms__title {
margin: 0 0 var(--space-3);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-text-muted);
}
.aeo-connected-terms__list {
list-style: none !important;
padding-left: 0 !important;
margin: 0 !important;
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.entry-content .aeo-connected-terms__list li {
margin: 0 !important;
}
.aeo-connected-terms__list a {
display: inline-flex;
padding: var(--space-1) var(--space-3);
background-color: var(--color-surface-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
font-size: var(--fs-sm);
color: var(--color-text-soft);
text-decoration: none;
transition: all var(--transition-base);
}
.aeo-connected-terms__list a:hover,
.aeo-connected-terms__list a:focus-visible {
color: var(--color-text-inverse);
background-color: var(--color-text);
border-color: var(--color-text);
}
/* ----- FAQ Accordion ------------------------------------------------------ */
.aeo-faq {
margin: var(--space-8) 0;
border-top: 1px solid var(--color-border-soft);
}
.aeo-faq__item {
border-bottom: 1px solid var(--color-border-soft);
}
.aeo-faq__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
width: 100%;
padding: var(--space-4) 0;
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-base);
line-height: var(--lh-snug);
color: var(--color-text);
transition: color var(--transition-base);
}
.aeo-faq__question:hover,
.aeo-faq__question:focus-visible {
color: var(--color-primary);
}
.aeo-faq__question:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 4px;
border-radius: var(--radius-sm);
}
.aeo-faq__question-text {
flex: 1 1 auto;
}
/* Icon plus/minus minimalist — fără SVG extern */
.aeo-faq__icon {
flex: 0 0 auto;
position: relative;
width: 16px;
height: 16px;
transition: transform var(--transition-base);
}
.aeo-faq__icon::before,
.aeo-faq__icon::after {
content: "";
position: absolute;
background-color: currentColor;
transition: opacity var(--transition-base);
}
/* Linia orizontală (rămâne mereu vizibilă) */
.aeo-faq__icon::before {
top: 50%;
left: 0;
width: 100%;
height: 2px;
transform: translateY(-50%);
}
/* Linia verticală (devine ascunsă când e expanded) */
.aeo-faq__icon::after {
top: 0;
left: 50%;
width: 2px;
height: 100%;
transform: translateX(-50%);
}
.aeo-faq__question[aria-expanded="true"] .aeo-faq__icon::after {
opacity: 0;
}
.aeo-faq__answer {
overflow: hidden;
padding: 0;
color: var(--color-text-soft);
line-height: var(--lh-normal);
transition: max-height 220ms ease;
}
/* Wrapper interior pentru padding — păstrează padding-ul vizibil chiar și
în timpul tranziției pe max-height. */
.aeo-faq__answer-inner {
padding-bottom: var(--space-5);
}
.aeo-faq__answer > *:not(.aeo-faq__answer-inner):first-child,
.aeo-faq__answer-inner > *:first-child {
margin-top: 0;
}
.aeo-faq__answer > *:not(.aeo-faq__answer-inner):last-child,
.aeo-faq__answer-inner > *:last-child {
margin-bottom: 0;
}
/* hidden attribute trebuie să asculte */
.aeo-faq__answer[hidden] {
display: none !important;
}
/* Respect prefers-reduced-motion: scoatem tranziția */
@media (prefers-reduced-motion: reduce) {
.aeo-faq__answer {
transition: none;
}
.aeo-faq__icon,
.aeo-faq__icon::before,
.aeo-faq__icon::after {
transition: none;
}
}
/* =============================================================================
29. v0.2.9 — Glossary Visual Blocks
========================================================================== */
/* ----- Figure normal în reading column ------------------------------------
Markup recomandat:
Caption util, nu decorativ.
Rămâne în reading-column (880px). */
.aeo-content-figure {
margin: var(--space-8) 0;
}
.aeo-content-figure img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-md);
}
.aeo-content-figure figcaption {
margin-top: var(--space-3);
font-size: var(--fs-sm);
color: var(--color-text-muted);
font-style: italic;
line-height: var(--lh-snug);
}
/* ----- Wide figure (iese din reading-column) ------------------------------
Reutilizează tehnica .alignwide deja existentă: width mai mare decât
reading-column, margine negativă pentru a egaliza orizontal.
Pe ecrane mici (sub 992px) revine la lățime normală. */
.aeo-wide-figure {
margin: var(--space-10) 0;
}
.aeo-wide-figure img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-md);
}
.aeo-wide-figure figcaption {
margin-top: var(--space-3);
font-size: var(--fs-sm);
color: var(--color-text-muted);
font-style: italic;
line-height: var(--lh-snug);
}
@media (min-width: 992px) {
.reading-column > .aeo-wide-figure {
max-width: calc(var(--reading-width) + var(--space-16) * 4);
margin-inline: calc(-1 * var(--space-16) * 2);
}
}
@media (min-width: 1400px) {
.reading-column > .aeo-wide-figure {
max-width: calc(var(--reading-width) + var(--space-20) * 4);
margin-inline: calc(-1 * var(--space-20) * 2);
}
}
/* ----- Screenshot / mockup figure -----------------------------------------
Markup recomandat:
Caption + sursă opțională.
Adăugă border și umbră discretă pentru a marca vizual "captură de ecran". */
.aeo-content-figure--screenshot img,
.aeo-wide-figure--screenshot img {
border: 1px solid var(--color-border);
box-shadow: var(--shadow-md);
}
/* Notă de sursă opțională pentru capturi (sub figcaption).
Markup: Sursă: …
imediat sub . */
.aeo-figure-source {
margin-top: calc(-1 * var(--space-2));
margin-bottom: var(--space-6);
font-size: var(--fs-xs);
color: var(--color-text-muted);
font-style: italic;
}
.aeo-figure-source::before {
content: "↳ ";
color: var(--color-text-muted);
}
/* ----- Before/After block --------------------------------------------------
Markup recomandat:
Două coloane egale pe desktop, stivuite pe mobile. */
.aeo-before-after {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
margin: var(--space-8) 0;
}
@media (min-width: 768px) {
.aeo-before-after {
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
}
}
.aeo-before-after__panel {
padding: var(--space-5) var(--space-6);
background-color: var(--color-surface);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius-md);
}
/* Convenție vizuală: primul panel = "Înainte" (mai sobru),
al doilea = "După" (accent primary). */
.aeo-before-after__panel:nth-child(1) {
border-left: 3px solid var(--color-border);
}
.aeo-before-after__panel:nth-child(2) {
border-left: 3px solid var(--color-primary);
}
.aeo-before-after__panel h3 {
margin-top: 0;
margin-bottom: var(--space-3);
font-size: var(--fs-base);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-text-muted);
}
.aeo-before-after__panel:nth-child(2) h3 {
color: var(--color-primary);
}
.aeo-before-after__panel > *:last-child {
margin-bottom: 0;
}
/* ----- Visual explainer block ---------------------------------------------
Markup recomandat:
Grid auto-fit pentru număr variabil de itemi (1..N). */
.aeo-visual-explainer {
margin: var(--space-10) 0;
padding: var(--space-6) var(--space-6) var(--space-8);
background-color: var(--color-surface-alt);
border-radius: var(--radius-lg);
}
.aeo-visual-explainer > h2 {
margin-top: 0;
margin-bottom: var(--space-6);
font-size: var(--fs-xl);
letter-spacing: var(--ls-tight);
}
.aeo-visual-explainer__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--space-3);
}
.aeo-visual-explainer__grid > div {
padding: var(--space-4);
background-color: var(--color-surface);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius-md);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
line-height: var(--lh-snug);
color: var(--color-text);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
min-height: 64px;
}
/* ----- Image grid ---------------------------------------------------------
Markup recomandat:
Caption opțional
Auto-fit, minimum 240px per imagine. */
.aeo-image-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-4);
margin: var(--space-8) 0;
}
.aeo-image-grid figure {
margin: 0;
}
.aeo-image-grid img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-md);
}
.aeo-image-grid figcaption {
margin-top: var(--space-2);
font-size: var(--fs-xs);
color: var(--color-text-muted);
font-style: italic;
line-height: var(--lh-snug);
}
/* ----- Suprascrie marginile default ale entry-content pentru figure -------
WordPress emite figure cu margine prestabilită. Asigurăm consistență. */
.entry-content > .aeo-content-figure,
.entry-content > .aeo-wide-figure,
.entry-content > .aeo-before-after,
.entry-content > .aeo-visual-explainer,
.entry-content > .aeo-image-grid {
clear: both;
}
/* =============================================================================
30. v0.2.10 — Glossary Content fix-uri (diagnostic + UX)
========================================================================== */
/* ----- FAQ fallback fără JS ------------------------------------------------
Dacă JS-ul nu a rulat (containerul nu are .is-js-enhanced), butoanele
apar ca text simplu și răspunsurile sunt vizibile. Asta este corect:
fără JS, accordion-ul *trebuie* să fie un FAQ flat care funcționează. */
.aeo-faq:not(.is-js-enhanced) .aeo-faq__answer[hidden] {
display: block !important;
}
.aeo-faq:not(.is-js-enhanced) .aeo-faq__question {
cursor: default;
}
.aeo-faq:not(.is-js-enhanced) .aeo-faq__icon {
display: none;
}
/* ----- Suport layout lat controlat ------------------------------------------
Mută componentele wide în afara reading-column.
Sub 992px, totul rămâne la lățimea reading-column.
Peste 992px, anumite componente capătă lățime extinsă (1100-1280px), fără
să iasă din .container-aeo (1560px max).
FOLOSEȘTE descendent selector (`reading-column .X`), NU child (`>`),
pentru a prinde elementele din .entry-content de asemenea. */
@media (min-width: 992px) {
.reading-column .aeo-wide-figure,
.reading-column .aeo-before-after,
.reading-column .aeo-visual-explainer,
.reading-column .aeo-table-wrap,
.reading-column .aeo-image-grid {
max-width: calc(var(--reading-width) + var(--space-16) * 4);
margin-inline: calc(-1 * var(--space-16) * 2);
}
}
@media (min-width: 1400px) {
.reading-column .aeo-wide-figure,
.reading-column .aeo-before-after,
.reading-column .aeo-visual-explainer,
.reading-column .aeo-table-wrap,
.reading-column .aeo-image-grid {
max-width: calc(var(--reading-width) + var(--space-20) * 5);
margin-inline: calc(-1 * var(--space-20) * 2.5);
}
}
/* Suprascriu vechile reguli .reading-column > .aeo-wide-figure din §29
prin specificitate egală + ordine de apariție. Cele de mai sus folosesc
descendent (compatibil cu .entry-content wrap), iar regula veche cu `>`
nu mai prinde nimic în entry-content (devine inactivă natural). */
/* ----- Vizualizare mai puternică pentru componente editoriale --------------
v0.2.7-29 a pus baza vizuală. v0.2.10 o întărește pentru a marca clar
fiecare componentă vs text brut. Reading-flow rămâne lizibil. */
/* Summary box "Pe scurt" — fundal soft, accent stâng, spacing mai generos */
.entry-content .aeo-summary {
background: linear-gradient( to right, rgba(110, 43, 217, 0.04), transparent 60% );
border: 1px solid var(--color-border-soft);
border-left: 4px solid var(--color-primary);
padding: var(--space-6) var(--space-7);
margin: var(--space-8) 0 var(--space-10);
}
.entry-content .aeo-summary__title {
font-size: var(--fs-xs);
margin-bottom: var(--space-3);
}
.entry-content .aeo-summary__list li {
margin-bottom: var(--space-2);
line-height: var(--lh-normal);
}
/* Callout — diferențiere mai puternică */
.entry-content .aeo-callout {
padding: var(--space-5) var(--space-6);
margin: var(--space-7) 0;
border-radius: var(--radius-lg);
border: 1px solid var(--color-border-soft);
border-left-width: 4px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}
.entry-content .aeo-callout--note {
background-color: rgba(110, 43, 217, 0.04);
}
.entry-content .aeo-callout p {
margin-bottom: var(--space-3);
}
.entry-content .aeo-callout p:last-child {
margin-bottom: 0;
}
/* Tabele — variantă "premium" pentru content editorial */
.entry-content .aeo-table-wrap {
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow-x: auto;
overflow-y: hidden;
margin: var(--space-8) 0;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}
.entry-content .aeo-table {
margin: 0;
font-size: var(--fs-sm);
background-color: transparent;
min-width: 100%;
}
.entry-content .aeo-table thead th {
background: linear-gradient( to bottom, var(--color-surface-alt), var(--color-surface) );
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
letter-spacing: var(--ls-tight);
text-transform: none;
color: var(--color-text);
padding: var(--space-4);
border-bottom: 2px solid var(--color-border);
white-space: nowrap;
}
.entry-content .aeo-table tbody td {
padding: var(--space-4);
border-bottom: 1px solid var(--color-border-soft);
color: var(--color-text-soft);
line-height: var(--lh-normal);
vertical-align: top;
}
.entry-content .aeo-table tbody td:first-child {
font-weight: var(--fw-semibold);
color: var(--color-text);
}
.entry-content .aeo-table tbody tr:last-child td {
border-bottom: 0;
}
.entry-content .aeo-table tbody tr:hover {
background-color: var(--color-surface-alt);
}
/* Wide table caption — marchează tabelul ca premium block */
.entry-content .aeo-table caption {
caption-side: top;
text-align: left;
padding: var(--space-4) var(--space-4) var(--space-2);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-text-muted);
background-color: var(--color-surface-alt);
border-bottom: 1px solid var(--color-border-soft);
}
/* Visual explainer — vizibil mai prezent, grid cu spacing aerisit */
.entry-content .aeo-visual-explainer {
padding: var(--space-7) var(--space-7) var(--space-8);
margin: var(--space-10) 0;
background: linear-gradient( 135deg, var(--color-surface-alt) 0%, var(--color-surface) 100% );
border: 1px solid var(--color-border-soft);
border-radius: var(--radius-xl);
}
.entry-content .aeo-visual-explainer > h2,
.entry-content .aeo-visual-explainer > h3 {
margin-top: 0;
margin-bottom: var(--space-5);
font-size: var(--fs-lg);
letter-spacing: var(--ls-tight);
}
.entry-content .aeo-visual-explainer__grid {
gap: var(--space-3);
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.entry-content .aeo-visual-explainer__grid > div {
padding: var(--space-5) var(--space-4);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
line-height: var(--lh-snug);
color: var(--color-text);
text-align: center;
min-height: 80px;
transition: border-color var(--transition-base), transform var(--transition-base);
}
.entry-content .aeo-visual-explainer__grid > div:hover {
border-color: var(--color-primary);
transform: translateY(-1px);
}
/* Before/After — accent mai vizibil pe „După" */
.entry-content .aeo-before-after {
margin: var(--space-9) 0;
gap: var(--space-4);
}
@media (min-width: 768px) {
.entry-content .aeo-before-after {
gap: var(--space-5);
}
}
.entry-content .aeo-before-after__panel {
padding: var(--space-6);
background-color: var(--color-surface);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius-lg);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}
.entry-content .aeo-before-after__panel:nth-child(1) {
border-left: 4px solid var(--color-border);
background-color: var(--color-surface-alt);
}
.entry-content .aeo-before-after__panel:nth-child(2) {
border-left: 4px solid var(--color-primary);
background: linear-gradient( to right, rgba(110, 43, 217, 0.04), transparent 60% );
}
.entry-content .aeo-before-after__panel h3 {
margin-top: 0;
margin-bottom: var(--space-4);
}
/* Checklist — bifuri mai vizibile, spacing mai aerisit */
.entry-content .aeo-checklist {
margin: var(--space-7) 0;
}
.entry-content .aeo-checklist li {
padding-left: var(--space-8);
margin-bottom: var(--space-4);
font-size: var(--fs-base);
}
.entry-content .aeo-checklist li::before {
width: 22px;
height: 22px;
top: 0.2em;
}
.entry-content .aeo-checklist li.is-checked::after {
left: 6px;
top: calc(0.2em + 4px);
width: 11px;
height: 7px;
border-width: 2.5px;
}
/* Surse — mai discret dar clar separat */
.entry-content .aeo-sources {
margin: var(--space-12) 0 var(--space-6);
padding: var(--space-6) var(--space-7);
background-color: var(--color-surface);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius-md);
}
.entry-content .aeo-sources__title {
margin-bottom: var(--space-4);
}
/* Related terms inline — chip-uri mai vizibile */
.entry-content .aeo-connected-terms {
margin: var(--space-9) 0;
background-color: var(--color-surface-alt);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius-lg);
padding: var(--space-5) var(--space-6);
}
.entry-content .aeo-connected-terms__list a {
padding: var(--space-2) var(--space-4);
background-color: var(--color-surface);
font-weight: var(--fw-semibold);
}
/* Content figure — caption mai distinct */
.entry-content .aeo-content-figure {
margin: var(--space-9) 0;
}
.entry-content .aeo-content-figure figcaption,
.entry-content .aeo-wide-figure figcaption {
font-style: normal;
padding: var(--space-3) var(--space-4);
background-color: var(--color-surface-alt);
border-radius: var(--radius-sm);
color: var(--color-text-soft);
font-size: var(--fs-sm);
margin-top: var(--space-2);
}
/* ----- FAQ vizibil mai premium --------------------------------------------- */
.entry-content .aeo-faq {
margin: var(--space-10) 0;
border: 1px solid var(--color-border-soft);
border-radius: var(--radius-lg);
border-top: none;
overflow: hidden;
}
.entry-content .aeo-faq__item {
border-bottom: 1px solid var(--color-border-soft);
}
.entry-content .aeo-faq__item:last-child {
border-bottom: 0;
}
.entry-content .aeo-faq__question {
padding: var(--space-5) var(--space-6);
font-size: var(--fs-base);
background-color: var(--color-surface);
}
.entry-content .aeo-faq__question:hover {
background-color: var(--color-surface-alt);
}
.entry-content .aeo-faq__answer-inner {
padding: 0 var(--space-6) var(--space-5);
}
.entry-content .aeo-faq__answer-inner > *:first-child {
margin-top: 0;
}
/* ----- Adjustări h2/h3 în entry-content pe glossary single ----------------- */
.aeo-single--glossary .entry-content h2 {
margin-top: var(--space-10);
margin-bottom: var(--space-4);
font-size: var(--fs-2xl);
letter-spacing: var(--ls-tight);
}
.aeo-single--glossary .entry-content h2:first-child {
margin-top: var(--space-4);
}
.aeo-single--glossary .entry-content h3 {
margin-top: var(--space-7);
margin-bottom: var(--space-3);
font-size: var(--fs-lg);
}
/* =============================================================================
31. v0.3.0 — Glossary Premium Layout & Visual System
=============================================================================
Layout shell pentru single-glossary, scos de sub limita reading-column.
Componentele editoriale primesc lățimi controlate per-element.
Sistemul de culori folosește paleta v0.3.0 (lavender/violet/coral).
========================================================================== */
/* ----- Background pagina ---------------------------------------------------
Aplicăm background warm light DOAR pe paginile single-glossary,
să nu afectăm restul site-ului (homepage, legal, etc). */
.aeo-glossary-page {
background-color: var(--aeo-bg);
}
/* ----- Shell (wrapper centrat) ---------------------------------------------
Base: centering + padding. Lățimea este controlată de modifiers (--hero,
--featured, --body) pentru a permite geometrii diferite per context.
Body shell (1560px) lasă spațiu real pentru sidebar + componente wide. */
.aeo-glossary-shell {
width: 100%;
margin-inline: auto;
padding-inline: var(--container-padding-x);
}
.aeo-glossary-shell--hero {
max-width: 1360px;
}
.aeo-glossary-shell--featured {
max-width: 1280px;
}
.aeo-glossary-shell--body {
max-width: 1560px;
}
/* Fallback de siguranță: dacă cineva folosește .aeo-glossary-shell fără
modifier (compatibilitate retro), capacă la 1360px. */
.aeo-glossary-shell:not(.aeo-glossary-shell--hero):not(.aeo-glossary-shell--featured):not(.aeo-glossary-shell--body) {
max-width: 1360px;
}
/* ----- Hero glosar ---------------------------------------------------------
Eyebrow categorie, titlu mare, definiție lead. Reading-flow lizibil. */
.aeo-glossary-hero {
padding-block: var(--space-12) var(--space-8);
}
@media (min-width: 992px) {
.aeo-glossary-hero {
padding-block: var(--space-16) var(--space-10);
}
}
.aeo-glossary-hero__inner {
max-width: 880px;
}
.aeo-glossary-hero__eyebrow {
margin: var(--space-4) 0 var(--space-3);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--aeo-violet);
}
.aeo-glossary-hero__eyebrow a {
color: inherit;
text-decoration: none;
}
.aeo-glossary-hero__eyebrow a:hover {
color: var(--aeo-text);
}
.aeo-glossary-hero__title {
margin: 0;
font-size: var(--fs-3xl);
font-weight: var(--fw-light);
letter-spacing: var(--ls-tighter);
line-height: var(--lh-tight);
color: var(--aeo-text);
}
@media (min-width: 768px) {
.aeo-glossary-hero__title {
font-size: var(--fs-4xl);
}
}
@media (min-width: 1200px) {
.aeo-glossary-hero__title {
font-size: var(--fs-5xl);
}
}
.aeo-glossary-hero__definition {
margin: var(--space-6) 0 0;
padding-top: var(--space-5);
border-top: 1px solid var(--aeo-border);
font-family: var(--font-display);
font-weight: var(--fw-light);
font-size: var(--fs-lg);
line-height: var(--lh-snug);
color: var(--aeo-text-soft);
}
@media (min-width: 768px) {
.aeo-glossary-hero__definition {
font-size: var(--fs-xl);
}
}
/* ----- Featured image — lată, glow discret --------------------------------- */
.aeo-glossary-featured {
margin: 0 0 var(--space-12);
position: relative;
}
@media (min-width: 768px) {
.aeo-glossary-featured {
margin-bottom: var(--space-16);
}
}
/* Glow discret în spatele imaginii (decorativ, soft) */
.aeo-glossary-featured::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 60%;
height: 60%;
transform: translate(-50%, -50%);
background: radial-gradient(
ellipse at center,
rgba(123, 44, 255, 0.10) 0%,
rgba(255, 95, 122, 0.06) 40%,
transparent 70%
);
filter: blur(60px);
z-index: 0;
pointer-events: none;
}
.aeo-glossary-featured > .aeo-glossary-shell--featured {
position: relative;
z-index: 1;
}
.aeo-glossary-featured__image,
.aeo-glossary-featured img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-xl);
box-shadow: var(--aeo-shadow-soft);
}
.aeo-glossary-featured__caption {
margin-top: var(--space-4);
padding: var(--space-3) var(--space-5);
background-color: var(--aeo-surface-glass);
border-radius: var(--radius-md);
font-size: var(--fs-sm);
color: var(--aeo-text-soft);
font-style: normal;
text-align: center;
backdrop-filter: blur(8px);
}
/* ----- Layout body: sidebar + main ----------------------------------------- */
.aeo-glossary-body {
padding-bottom: var(--space-16);
}
@media (min-width: 768px) {
.aeo-glossary-body {
padding-bottom: var(--space-20);
}
}
.aeo-glossary-layout {
display: block; /* mobile-first: stacked */
}
@media (min-width: 992px) {
.aeo-glossary-layout {
display: grid;
grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
gap: clamp(32px, 4vw, 72px);
align-items: start;
}
}
/* ----- Sidebar ------------------------------------------------------------- */
.aeo-glossary-sidebar {
margin-bottom: var(--space-10);
}
/* Pe mobile, ascundem sidebar-ul complet (decizie v0.3.1).
Search mobil și TOC mobil pot veni într-un sprint separat. */
@media (max-width: 991.98px) {
.aeo-glossary-sidebar {
display: none;
}
}
@media (min-width: 992px) {
.aeo-glossary-sidebar {
position: sticky;
top: 96px;
align-self: start;
margin-bottom: 0;
max-height: calc(100vh - 120px);
overflow-y: auto;
padding-right: var(--space-2);
}
/* Scrollbar discret */
.aeo-glossary-sidebar::-webkit-scrollbar {
width: 6px;
}
.aeo-glossary-sidebar::-webkit-scrollbar-track {
background: transparent;
}
.aeo-glossary-sidebar::-webkit-scrollbar-thumb {
background: var(--aeo-border-strong);
border-radius: 3px;
}
}
.aeo-glossary-sidebar__inner {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.aeo-glossary-sidebar__block {
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-radius: var(--radius-lg);
padding: var(--space-5);
box-shadow: var(--aeo-shadow-card);
}
.aeo-glossary-sidebar__title {
margin: 0 0 var(--space-3);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--aeo-text-muted);
}
.aeo-glossary-sidebar__list {
list-style: none;
margin: 0;
padding: 0;
}
.aeo-glossary-sidebar__item {
margin: 0;
border-bottom: 1px solid var(--aeo-border-soft, var(--color-border-soft));
}
.aeo-glossary-sidebar__item:last-child {
border-bottom: 0;
}
.aeo-glossary-sidebar__item a {
display: block;
padding: var(--space-2) 0;
font-size: var(--fs-sm);
color: var(--aeo-text-soft);
text-decoration: none;
transition: color var(--transition-base), padding-left var(--transition-base);
}
.aeo-glossary-sidebar__item a:hover,
.aeo-glossary-sidebar__item a:focus-visible {
color: var(--aeo-violet);
padding-left: var(--space-2);
}
/* Sidebar search override (componenta glossary-search e mai compactă) */
.aeo-glossary-sidebar__block .aeo-glossary-search {
flex-direction: column;
gap: var(--space-2);
max-width: none;
}
.aeo-glossary-sidebar__block .aeo-glossary-search__submit {
padding: var(--space-2) var(--space-4);
font-size: var(--fs-xs);
}
/* Sidebar CTA — accent subtil */
.aeo-glossary-sidebar__cta {
background: linear-gradient(135deg,
rgba(123, 44, 255, 0.06) 0%,
rgba(255, 95, 122, 0.06) 100%);
border-color: var(--aeo-border-strong);
}
.aeo-glossary-sidebar__cta-text {
margin: 0 0 var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
color: var(--aeo-text);
font-weight: var(--fw-semibold);
line-height: var(--lh-snug);
}
.aeo-glossary-sidebar__cta-link {
width: 100%;
justify-content: center;
display: inline-flex;
align-items: center;
}
/* ----- Main content area --------------------------------------------------- */
.aeo-glossary-main {
min-width: 0; /* permite shrink in grid */
}
/* Lățimi controlate per element în .entry-content.
Strategia: text normal max 880px, componente speciale max 920-1180px,
centrare la stânga (left-aligned) pentru a curge natural cu sidebar-ul.
v0.3.2 FIX SPECIFICITY: regula veche `> *:not(.alignwide):not(.alignfull)`
avea specificitate (0,0,4,1) și bătea regulile wide de (0,0,3,0). Acum
folosim `:where(...)` care normalizează specificitatea la (0,0,2,0) pentru
toate trei reguli, eliminând complet conflictul. Ordinea de declarare
nu mai contează pentru cascadă fiindcă listele de selectori sunt disjunctive
(fiecare element vizat de o singură regulă).
v0.3.3 WRAPPER COMPATIBILITY: editorul poate împacheta conținutul într-un
wrapper `.aeo-term-content` pentru control editorial. Regulile de mai jos
prind componentele atât ca direct child al `.entry-content`, cât și ca
direct child al `.aeo-term-content`. Funcționează în ambele structuri:
.entry-content > .aeo-table-wrap (fără wrapper)
.entry-content > .aeo-term-content > .aeo-table-wrap (cu wrapper)
*/
/* Wrapper: lasă spațiul plin pentru ca componentele interioare să respire. */
.aeo-glossary-main .entry-content > .aeo-term-content {
width: 100%;
max-width: none;
}
/* Text normal (paragrafe, liste, headinguri). Ambele structuri. */
.aeo-glossary-main .entry-content > :where(p, ul, ol, h2, h3, h4, blockquote),
.aeo-glossary-main .aeo-term-content > :where(p, ul, ol, h2, h3, h4, blockquote) {
max-width: 880px;
}
/* Componente conținut "normale" (același reading-flow). Ambele structuri. */
.aeo-glossary-main .entry-content > :where(
.aeo-summary,
.aeo-callout,
.aeo-faq,
.aeo-sources,
.aeo-connected-terms,
.aeo-checklist,
.aeo-content-figure
),
.aeo-glossary-main .aeo-term-content > :where(
.aeo-summary,
.aeo-callout,
.aeo-faq,
.aeo-sources,
.aeo-connected-terms,
.aeo-checklist,
.aeo-content-figure
) {
max-width: 920px;
}
/* Componente "wide" (real 1080-1180px pe desktop mare). Ambele structuri. */
.aeo-glossary-main .entry-content > :where(
.aeo-visual-explainer,
.aeo-before-after,
.aeo-table-wrap,
.aeo-wide-figure,
.aeo-image-grid
),
.aeo-glossary-main .aeo-term-content > :where(
.aeo-visual-explainer,
.aeo-before-after,
.aeo-table-wrap,
.aeo-wide-figure,
.aeo-image-grid
) {
width: 100%;
max-width: 1180px;
}
/* ----- Typography în glossary main ---------------------------------------- */
.aeo-glossary-main .entry-content {
font-size: var(--fs-base);
line-height: 1.75;
color: var(--aeo-text-soft);
}
@media (min-width: 992px) {
.aeo-glossary-main .entry-content {
font-size: var(--fs-md);
}
}
.aeo-glossary-main .entry-content p {
margin-bottom: var(--space-5);
line-height: 1.75;
}
.aeo-glossary-main .entry-content h2 {
margin-top: var(--space-12);
margin-bottom: var(--space-5);
font-family: var(--font-display);
font-size: var(--fs-2xl);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-tight);
line-height: var(--lh-tight);
color: var(--aeo-text);
}
.aeo-glossary-main .entry-content h2:first-child {
margin-top: var(--space-4);
}
.aeo-glossary-main .entry-content h3 {
margin-top: var(--space-8);
margin-bottom: var(--space-4);
font-size: var(--fs-xl);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-tight);
color: var(--aeo-text);
}
.aeo-glossary-main .entry-content h4 {
margin-top: var(--space-6);
margin-bottom: var(--space-3);
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
color: var(--aeo-text);
}
.aeo-glossary-main .entry-content ul,
.aeo-glossary-main .entry-content ol {
margin-bottom: var(--space-5);
padding-left: var(--space-6);
}
.aeo-glossary-main .entry-content li {
margin-bottom: var(--space-2);
line-height: 1.75;
}
.aeo-glossary-main .entry-content a {
color: var(--aeo-violet);
text-decoration: none;
border-bottom: 1px solid rgba(123, 44, 255, 0.25);
transition: border-color var(--transition-base), color var(--transition-base);
}
.aeo-glossary-main .entry-content a:hover,
.aeo-glossary-main .entry-content a:focus-visible {
color: var(--aeo-magenta);
border-bottom-color: currentColor;
}
.aeo-glossary-main .entry-content strong {
color: var(--aeo-text);
font-weight: var(--fw-semibold);
}
/* ----- Componente editoriale rafinate pentru paleta v0.3.0 ------------------ */
/* Summary box "Pe scurt" — glass + lavender */
.aeo-glossary-main .entry-content .aeo-summary {
margin: var(--space-9) 0;
padding: var(--space-7) var(--space-8);
background: linear-gradient(135deg,
rgba(123, 44, 255, 0.04) 0%,
rgba(255, 240, 245, 0.6) 100%);
border: 1px solid var(--aeo-border);
border-left: 4px solid var(--aeo-violet);
border-radius: var(--radius-lg);
box-shadow: var(--aeo-shadow-card);
}
.aeo-glossary-main .entry-content .aeo-summary__title {
margin: 0 0 var(--space-4);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--aeo-violet);
}
.aeo-glossary-main .entry-content .aeo-summary__list {
margin: 0;
padding-left: var(--space-5);
}
.aeo-glossary-main .entry-content .aeo-summary__list li {
color: var(--aeo-text-soft);
line-height: 1.75;
}
/* Callout — variante refacute */
.aeo-glossary-main .entry-content .aeo-callout {
margin: var(--space-8) 0;
padding: var(--space-6) var(--space-7);
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-left: 4px solid var(--aeo-violet);
border-radius: var(--radius-lg);
box-shadow: var(--aeo-shadow-card);
}
.aeo-glossary-main .entry-content .aeo-callout--note {
background-color: var(--aeo-violet-soft);
}
.aeo-glossary-main .entry-content .aeo-callout--warning {
background-color: #fff8ee;
border-left-color: #c97b16;
}
.aeo-glossary-main .entry-content .aeo-callout--warning .aeo-callout__title {
color: #b56500;
}
.aeo-glossary-main .entry-content .aeo-callout--success {
background-color: #f0faf3;
border-left-color: #2f9f5f;
}
.aeo-glossary-main .entry-content .aeo-callout--success .aeo-callout__title {
color: #1f7a45;
}
.aeo-glossary-main .entry-content .aeo-callout__title {
margin: 0 0 var(--space-3);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--aeo-violet);
}
/* Tabele premium */
.aeo-glossary-main .entry-content .aeo-table-wrap {
margin: var(--space-10) 0;
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-radius: var(--radius-xl);
overflow-x: auto;
box-shadow: var(--aeo-shadow-card);
}
.aeo-glossary-main .entry-content .aeo-table {
margin: 0;
width: 100%;
min-width: 100%;
background-color: transparent;
border-collapse: collapse;
font-size: var(--fs-sm);
}
.aeo-glossary-main .entry-content .aeo-table caption {
caption-side: top;
text-align: left;
padding: var(--space-5) var(--space-6);
background: linear-gradient(to right,
var(--aeo-violet-soft) 0%,
var(--aeo-surface) 100%);
border-bottom: 1px solid var(--aeo-border);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--aeo-text-muted);
}
.aeo-glossary-main .entry-content .aeo-table thead th {
padding: var(--space-4) var(--space-5);
background-color: var(--aeo-surface-soft);
border-bottom: 2px solid var(--aeo-border);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
color: var(--aeo-text);
text-align: left;
white-space: nowrap;
}
.aeo-glossary-main .entry-content .aeo-table tbody td {
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--aeo-border-soft, var(--color-border-soft));
color: var(--aeo-text-soft);
line-height: 1.7;
vertical-align: top;
}
.aeo-glossary-main .entry-content .aeo-table tbody td:first-child {
font-weight: var(--fw-semibold);
color: var(--aeo-text);
}
.aeo-glossary-main .entry-content .aeo-table tbody tr:last-child td {
border-bottom: 0;
}
.aeo-glossary-main .entry-content .aeo-table tbody tr:hover {
background-color: var(--aeo-violet-soft);
}
/* Before/After — glass + gradient */
.aeo-glossary-main .entry-content .aeo-before-after {
margin: var(--space-10) 0;
gap: var(--space-5);
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.aeo-glossary-main .entry-content .aeo-before-after {
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
}
}
.aeo-glossary-main .entry-content .aeo-before-after__panel {
padding: var(--space-7);
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-radius: var(--radius-lg);
box-shadow: var(--aeo-shadow-card);
}
.aeo-glossary-main .entry-content .aeo-before-after__panel:nth-child(1) {
border-left: 4px solid var(--aeo-text-muted);
background-color: var(--aeo-surface-soft);
}
.aeo-glossary-main .entry-content .aeo-before-after__panel:nth-child(2) {
border-left: 4px solid var(--aeo-violet);
background: linear-gradient(135deg,
var(--aeo-violet-soft) 0%,
var(--aeo-rose-soft) 100%);
}
.aeo-glossary-main .entry-content .aeo-before-after__panel h3 {
margin-top: 0;
margin-bottom: var(--space-4);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--aeo-text-muted);
}
.aeo-glossary-main .entry-content .aeo-before-after__panel:nth-child(2) h3 {
color: var(--aeo-violet);
}
.aeo-glossary-main .entry-content .aeo-before-after__panel > *:last-child {
margin-bottom: 0;
}
/* Visual explainer — glass + gradient */
.aeo-glossary-main .entry-content .aeo-visual-explainer {
margin: var(--space-12) 0;
padding: var(--space-8) var(--space-8);
background: linear-gradient(135deg,
var(--aeo-violet-soft) 0%,
var(--aeo-rose-soft) 100%);
border: 1px solid var(--aeo-border);
border-radius: var(--radius-xl);
box-shadow: var(--aeo-shadow-card);
}
.aeo-glossary-main .entry-content .aeo-visual-explainer > h2,
.aeo-glossary-main .entry-content .aeo-visual-explainer > h3 {
margin-top: 0;
margin-bottom: var(--space-6);
font-size: var(--fs-xl);
color: var(--aeo-text);
letter-spacing: var(--ls-tight);
}
.aeo-glossary-main .entry-content .aeo-visual-explainer__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-3);
}
.aeo-glossary-main .entry-content .aeo-visual-explainer__grid > div {
padding: var(--space-5);
min-height: 88px;
background-color: var(--aeo-surface-glass);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: var(--radius-md);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
line-height: var(--lh-snug);
color: var(--aeo-text);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(8px);
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.aeo-glossary-main .entry-content .aeo-visual-explainer__grid > div:hover {
transform: translateY(-2px);
box-shadow: var(--aeo-shadow-card);
}
/* Checklist — bifuri mai vizibile */
.aeo-glossary-main .entry-content .aeo-checklist {
margin: var(--space-8) 0;
list-style: none;
padding-left: 0;
}
.aeo-glossary-main .entry-content .aeo-checklist li {
position: relative;
padding-left: var(--space-8);
margin-bottom: var(--space-3);
line-height: 1.75;
}
.aeo-glossary-main .entry-content .aeo-checklist li::before {
content: "";
position: absolute;
left: 0;
top: 0.3em;
width: 22px;
height: 22px;
background-color: var(--aeo-surface);
border: 1.5px solid var(--aeo-border-strong);
border-radius: var(--radius-sm);
}
.aeo-glossary-main .entry-content .aeo-checklist li.is-checked::before {
background: var(--aeo-gradient-primary);
border-color: transparent;
}
.aeo-glossary-main .entry-content .aeo-checklist li.is-checked::after {
content: "";
position: absolute;
left: 6px;
top: calc(0.3em + 4px);
width: 11px;
height: 7px;
border-left: 2.5px solid #fff;
border-bottom: 2.5px solid #fff;
transform: rotate(-45deg);
}
/* FAQ — premium card list */
.aeo-glossary-main .entry-content .aeo-faq {
margin: var(--space-10) 0;
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--aeo-shadow-card);
}
.aeo-glossary-main .entry-content .aeo-faq__item {
border-bottom: 1px solid var(--aeo-border);
}
.aeo-glossary-main .entry-content .aeo-faq__item:last-child {
border-bottom: 0;
}
.aeo-glossary-main .entry-content .aeo-faq__question {
width: 100%;
padding: var(--space-5) var(--space-7);
background: transparent;
border: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
text-align: left;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-base);
line-height: var(--lh-snug);
color: var(--aeo-text);
transition: background-color var(--transition-base), color var(--transition-base);
}
.aeo-glossary-main .entry-content .aeo-faq__question:hover,
.aeo-glossary-main .entry-content .aeo-faq__question:focus-visible {
background-color: var(--aeo-violet-soft);
color: var(--aeo-violet);
}
.aeo-glossary-main .entry-content .aeo-faq__question:focus-visible {
outline: 2px solid var(--aeo-violet);
outline-offset: -2px;
}
.aeo-glossary-main .entry-content .aeo-faq__answer-inner {
padding: 0 var(--space-7) var(--space-6);
color: var(--aeo-text-soft);
line-height: 1.75;
}
.aeo-glossary-main .entry-content .aeo-faq__answer-inner > *:first-child {
margin-top: 0;
}
.aeo-glossary-main .entry-content .aeo-faq__answer-inner > *:last-child {
margin-bottom: 0;
}
.aeo-glossary-main .entry-content .aeo-faq__icon {
flex: 0 0 auto;
position: relative;
width: 16px;
height: 16px;
color: var(--aeo-violet);
transition: transform var(--transition-base);
}
.aeo-glossary-main .entry-content .aeo-faq__icon::before,
.aeo-glossary-main .entry-content .aeo-faq__icon::after {
content: "";
position: absolute;
background-color: currentColor;
}
.aeo-glossary-main .entry-content .aeo-faq__icon::before {
top: 50%; left: 0;
width: 100%; height: 2px;
transform: translateY(-50%);
}
.aeo-glossary-main .entry-content .aeo-faq__icon::after {
top: 0; left: 50%;
width: 2px; height: 100%;
transform: translateX(-50%);
transition: opacity var(--transition-base);
}
.aeo-glossary-main .entry-content .aeo-faq__question[aria-expanded="true"] .aeo-faq__icon::after {
opacity: 0;
}
/* Sources */
.aeo-glossary-main .entry-content .aeo-sources {
margin: var(--space-12) 0 var(--space-8);
padding: var(--space-6) var(--space-7);
background-color: var(--aeo-surface-soft);
border: 1px solid var(--aeo-border);
border-radius: var(--radius-lg);
}
.aeo-glossary-main .entry-content .aeo-sources__title {
margin: 0 0 var(--space-4);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--aeo-text-muted);
}
.aeo-glossary-main .entry-content .aeo-sources__list {
margin: 0;
padding-left: var(--space-5);
}
.aeo-glossary-main .entry-content .aeo-sources__list li {
margin-bottom: var(--space-2);
font-size: var(--fs-sm);
color: var(--aeo-text-soft);
line-height: 1.6;
}
.aeo-glossary-main .entry-content .aeo-sources__list a {
color: var(--aeo-violet);
border-bottom: 1px solid currentColor;
}
/* Connected terms inline (chip-uri în content) */
.aeo-glossary-main .entry-content .aeo-connected-terms {
margin: var(--space-9) 0;
padding: var(--space-5) var(--space-7);
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-radius: var(--radius-lg);
}
.aeo-glossary-main .entry-content .aeo-connected-terms__title {
margin: 0 0 var(--space-3);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--aeo-text-muted);
}
.aeo-glossary-main .entry-content .aeo-connected-terms__list {
list-style: none !important;
padding-left: 0 !important;
margin: 0 !important;
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.aeo-glossary-main .entry-content .aeo-connected-terms__list li {
margin: 0 !important;
}
.aeo-glossary-main .entry-content .aeo-connected-terms__list a {
display: inline-flex;
padding: var(--space-2) var(--space-4);
background-color: var(--aeo-violet-soft);
border: 1px solid var(--aeo-border);
border-radius: var(--radius-full);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--aeo-violet);
text-decoration: none;
border-bottom: 1px solid var(--aeo-border);
transition: all var(--transition-base);
}
.aeo-glossary-main .entry-content .aeo-connected-terms__list a:hover,
.aeo-glossary-main .entry-content .aeo-connected-terms__list a:focus-visible {
background: var(--aeo-gradient-primary);
color: var(--color-text-inverse);
border-color: transparent;
}
/* Content figure inline */
.aeo-glossary-main .entry-content .aeo-content-figure {
margin: var(--space-9) 0;
}
.aeo-glossary-main .entry-content .aeo-content-figure img {
border-radius: var(--radius-lg);
box-shadow: var(--aeo-shadow-card);
}
.aeo-glossary-main .entry-content .aeo-content-figure figcaption,
.aeo-glossary-main .entry-content .aeo-wide-figure figcaption {
margin-top: var(--space-3);
padding: var(--space-3) var(--space-5);
background-color: var(--aeo-surface-glass);
border-radius: var(--radius-md);
font-size: var(--fs-sm);
font-style: normal;
color: var(--aeo-text-soft);
text-align: center;
backdrop-filter: blur(8px);
}
.aeo-glossary-main .entry-content .aeo-wide-figure img {
border-radius: var(--radius-xl);
box-shadow: var(--aeo-shadow-soft);
}
/* Image grid */
.aeo-glossary-main .entry-content .aeo-image-grid {
margin: var(--space-9) 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-4);
}
.aeo-glossary-main .entry-content .aeo-image-grid img {
border-radius: var(--radius-md);
box-shadow: var(--aeo-shadow-card);
}
/* ----- After & CTA --------------------------------------------------------- */
.aeo-glossary-after {
padding-block: var(--space-12);
background-color: var(--aeo-surface);
border-top: 1px solid var(--aeo-border);
}
.aeo-glossary-cta-final {
padding-block: var(--space-12) var(--space-16);
}
/* ----- Footer mai aerisit pe glossary --------------------------------------
Glossary page are background diferit (--aeo-bg) — site footer trebuie
să se aprecieze pe contrast. */
.aeo-glossary-page + .aeo-site-footer,
body.single-glossary .aeo-site-footer {
margin-top: 0;
}
/* =============================================================================
32. v0.3.5 — Bootstrap Grid Reset pentru single-glossary
=============================================================================
Layout pe Bootstrap grid real. Această secțiune NEUTRALIZEAZĂ regulile
de lățime forțată din §31 (.aeo-glossary-shell, .aeo-glossary-layout,
max-width per element) și aplică stilurile vizuale pe noile clase
Bootstrap. Codul vechi din §31 rămâne în fișier pentru claritate
istorică, dar este suprascris aici prin specificitate egală + ordine.
========================================================================== */
/* ----- RESET: neutralizează regulile vechi de lățime ----------------------
Anulează:
- .aeo-glossary-shell, .aeo-glossary-shell--hero/--featured/--body
- .aeo-glossary-layout grid
- .aeo-glossary-main entry-content > * max-width
- .aeo-glossary-main aeo-term-content > * max-width
- reading-column pe single-glossary
Scope strict: aplicat doar pe .aeo-glossary-single (noul wrapper). */
.aeo-glossary-single .aeo-glossary-shell,
.aeo-glossary-single .aeo-glossary-shell--hero,
.aeo-glossary-single .aeo-glossary-shell--featured,
.aeo-glossary-single .aeo-glossary-shell--body {
max-width: none;
padding-inline: 0;
}
.aeo-glossary-single .aeo-glossary-layout {
display: block;
grid-template-columns: none;
gap: 0;
}
/* Reading-column nu controlează single-glossary (nu mai e folosit în PHP,
dar dacă apare în content prin Block Editor, nu mai limitează). */
.aeo-glossary-single .reading-column {
max-width: none;
margin-inline: 0;
}
/* Reset max-width forțat pe componente: în col-lg-9, ocupă lățimea naturală. */
.aeo-glossary-single .entry-content > *,
.aeo-glossary-single .aeo-term-content,
.aeo-glossary-single .aeo-term-content > * {
max-width: none;
}
/* Paragrafe, liste, headinguri în col-lg-9: lățimea este controlată de
coloana Bootstrap (col-lg-9), NU de max-width per element.
Reset explicit pentru a anula orice limitare moștenită din §31 sau alte
secțiuni vechi. Dacă vrei text mai îngust în zone specifice, folosește
clasa explicită .aeo-text-narrow definită mai jos. */
.aeo-glossary-single .entry-content > p,
.aeo-glossary-single .entry-content > ul,
.aeo-glossary-single .entry-content > ol,
.aeo-glossary-single .entry-content > h2,
.aeo-glossary-single .entry-content > h3,
.aeo-glossary-single .entry-content > h4,
.aeo-glossary-single .entry-content > blockquote,
.aeo-glossary-single .aeo-term-content > p,
.aeo-glossary-single .aeo-term-content > ul,
.aeo-glossary-single .aeo-term-content > ol,
.aeo-glossary-single .aeo-term-content > h2,
.aeo-glossary-single .aeo-term-content > h3,
.aeo-glossary-single .aeo-term-content > h4,
.aeo-glossary-single .aeo-term-content > blockquote {
max-width: none;
}
/* Curăță paragrafele goale care apar din Block Editor / WordPress wpautop
pe content lipit din Custom HTML cu line breaks în jurul componentelor. */
.aeo-glossary-single .entry-content p:empty,
.aeo-glossary-single .aeo-term-content p:empty {
display: none;
}
/* Utility opt-in: pentru zone unde *chiar* vrei text mai îngust.
Aplicată explicit, NU global. */
.aeo-text-narrow {
max-width: 72ch;
}
/* ----- Body padding (asigură aer între secțiuni) -------------------------- */
.aeo-glossary-single .aeo-glossary-hero {
padding-block: var(--space-12) var(--space-8);
}
@media (min-width: 992px) {
.aeo-glossary-single .aeo-glossary-hero {
padding-block: var(--space-16) var(--space-10);
}
}
.aeo-glossary-single .aeo-glossary-body {
padding-block: 0 var(--space-16);
}
@media (min-width: 992px) {
.aeo-glossary-single .aeo-glossary-body {
padding-block: 0 var(--space-20);
}
}
.aeo-glossary-single .aeo-glossary-after {
padding-block: var(--space-12);
background-color: var(--aeo-surface);
border-top: 1px solid var(--aeo-border);
}
.aeo-glossary-single .aeo-glossary-cta-final {
padding-block: var(--space-12) var(--space-16);
}
/* ----- Hero (BS grid: col-lg-9 offset-lg-3) ------------------------------- */
.aeo-glossary-single .aeo-glossary-hero__eyebrow {
margin: var(--space-4) 0 var(--space-3);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--aeo-violet);
}
.aeo-glossary-single .aeo-glossary-hero__eyebrow a {
color: inherit;
text-decoration: none;
}
.aeo-glossary-single .aeo-glossary-hero__eyebrow a:hover {
color: var(--aeo-text);
}
.aeo-glossary-single .aeo-glossary-hero__title {
margin: 0;
font-size: var(--fs-3xl);
font-weight: var(--fw-light);
letter-spacing: var(--ls-tighter);
line-height: var(--lh-tight);
color: var(--aeo-text);
}
@media (min-width: 768px) {
.aeo-glossary-single .aeo-glossary-hero__title {
font-size: var(--fs-4xl);
}
}
@media (min-width: 1200px) {
.aeo-glossary-single .aeo-glossary-hero__title {
font-size: var(--fs-5xl);
}
}
.aeo-glossary-single .aeo-glossary-hero__definition {
margin: var(--space-6) 0 0;
padding-top: var(--space-5);
border-top: 1px solid var(--aeo-border);
font-family: var(--font-display);
font-weight: var(--fw-light);
font-size: var(--fs-lg);
line-height: var(--lh-snug);
color: var(--aeo-text-soft);
}
@media (min-width: 768px) {
.aeo-glossary-single .aeo-glossary-hero__definition {
font-size: var(--fs-xl);
}
}
/* ----- Featured image (în col-lg-9, fără max-width forțat) ---------------- */
.aeo-glossary-single .aeo-glossary-featured {
margin: 0 0 var(--space-10);
position: relative;
}
@media (min-width: 992px) {
.aeo-glossary-single .aeo-glossary-featured {
margin-bottom: var(--space-12);
}
}
.aeo-glossary-single .aeo-glossary-featured::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 60%;
height: 60%;
transform: translate(-50%, -50%);
background: radial-gradient(
ellipse at center,
rgba(123, 44, 255, 0.10) 0%,
rgba(255, 95, 122, 0.06) 40%,
transparent 70%
);
filter: blur(60px);
z-index: 0;
pointer-events: none;
}
.aeo-glossary-single .aeo-glossary-featured__image,
.aeo-glossary-single .aeo-glossary-featured img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-xl);
box-shadow: var(--aeo-shadow-soft);
position: relative;
z-index: 1;
}
.aeo-glossary-single .aeo-glossary-featured__caption {
margin-top: var(--space-4);
padding: var(--space-3) var(--space-5);
background-color: var(--aeo-surface-glass);
border-radius: var(--radius-md);
font-size: var(--fs-sm);
color: var(--aeo-text-soft);
font-style: normal;
text-align: center;
backdrop-filter: blur(8px);
}
/* ----- Sidebar (col-lg-3, d-none d-lg-block) ----------------------------- */
.aeo-glossary-single .aeo-glossary-sidebar {
/* Bootstrap d-none d-lg-block gestionează vizibilitatea.
Aici doar styling. */
}
@media (min-width: 992px) {
.aeo-glossary-single .aeo-glossary-sidebar {
position: sticky;
top: 96px;
align-self: start;
max-height: calc(100vh - 120px);
overflow-y: auto;
padding-right: var(--space-2);
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.aeo-glossary-single .aeo-glossary-sidebar::-webkit-scrollbar {
width: 6px;
}
.aeo-glossary-single .aeo-glossary-sidebar::-webkit-scrollbar-track {
background: transparent;
}
.aeo-glossary-single .aeo-glossary-sidebar::-webkit-scrollbar-thumb {
background: var(--aeo-border-strong);
border-radius: 3px;
}
}
.aeo-glossary-single .aeo-glossary-sidebar__block {
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-radius: var(--radius-lg);
padding: var(--space-5);
box-shadow: var(--aeo-shadow-card);
}
.aeo-glossary-single .aeo-glossary-sidebar__title {
margin: 0 0 var(--space-3);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--aeo-text-muted);
}
.aeo-glossary-single .aeo-glossary-sidebar__list {
list-style: none;
margin: 0;
padding: 0;
}
.aeo-glossary-single .aeo-glossary-sidebar__item {
margin: 0;
border-bottom: 1px solid var(--color-border-soft);
}
.aeo-glossary-single .aeo-glossary-sidebar__item:last-child {
border-bottom: 0;
}
.aeo-glossary-single .aeo-glossary-sidebar__item a {
display: block;
padding: var(--space-2) 0;
font-size: var(--fs-sm);
color: var(--aeo-text-soft);
text-decoration: none;
transition: color var(--transition-base), padding-left var(--transition-base);
}
.aeo-glossary-single .aeo-glossary-sidebar__item a:hover,
.aeo-glossary-single .aeo-glossary-sidebar__item a:focus-visible {
color: var(--aeo-violet);
padding-left: var(--space-2);
}
.aeo-glossary-single .aeo-glossary-sidebar__block .aeo-glossary-search {
flex-direction: column;
gap: var(--space-2);
max-width: none;
}
.aeo-glossary-single .aeo-glossary-sidebar__cta {
background: linear-gradient(135deg,
rgba(123, 44, 255, 0.06) 0%,
rgba(255, 95, 122, 0.06) 100%);
border-color: var(--aeo-border-strong);
}
.aeo-glossary-single .aeo-glossary-sidebar__cta-text {
margin: 0 0 var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
color: var(--aeo-text);
font-weight: var(--fw-semibold);
line-height: var(--lh-snug);
}
.aeo-glossary-single .aeo-glossary-sidebar__cta-link {
width: 100%;
justify-content: center;
display: inline-flex;
align-items: center;
}
/* ----- Content typography (în col-lg-9) ----------------------------------- */
.aeo-glossary-single .aeo-glossary-content {
min-width: 0; /* permite shrink în grid */
}
.aeo-glossary-single .entry-content {
font-size: var(--fs-base);
line-height: 1.75;
color: var(--aeo-text-soft);
}
@media (min-width: 992px) {
.aeo-glossary-single .entry-content {
font-size: var(--fs-md);
}
}
.aeo-glossary-single .entry-content p {
margin-bottom: var(--space-5);
line-height: 1.75;
}
.aeo-glossary-single .entry-content h2 {
margin-top: var(--space-12);
margin-bottom: var(--space-5);
font-family: var(--font-display);
font-size: var(--fs-2xl);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-tight);
line-height: var(--lh-tight);
color: var(--aeo-text);
}
.aeo-glossary-single .entry-content h2:first-child,
.aeo-glossary-single .aeo-term-content > h2:first-child {
margin-top: 0;
}
.aeo-glossary-single .entry-content h3 {
margin-top: var(--space-8);
margin-bottom: var(--space-4);
font-size: var(--fs-xl);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-tight);
color: var(--aeo-text);
}
.aeo-glossary-single .entry-content h4 {
margin-top: var(--space-6);
margin-bottom: var(--space-3);
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
color: var(--aeo-text);
}
.aeo-glossary-single .entry-content ul,
.aeo-glossary-single .entry-content ol {
margin-bottom: var(--space-5);
padding-left: var(--space-6);
}
.aeo-glossary-single .entry-content li {
margin-bottom: var(--space-2);
line-height: 1.75;
}
.aeo-glossary-single .entry-content a {
color: var(--aeo-violet);
text-decoration: none;
border-bottom: 1px solid rgba(123, 44, 255, 0.25);
transition: border-color var(--transition-base), color var(--transition-base);
}
.aeo-glossary-single .entry-content a:hover,
.aeo-glossary-single .entry-content a:focus-visible {
color: var(--aeo-magenta);
border-bottom-color: currentColor;
}
.aeo-glossary-single .entry-content strong {
color: var(--aeo-text);
font-weight: var(--fw-semibold);
}
/* ----- Componente editoriale: width 100% pe col-lg-9 ----------------------
În col-lg-9, componentele ocupă natural lățimea coloanei. NU mai forțăm
max-width 880/920/1180. Stilurile vizuale rămân (background, border, etc).
*/
.aeo-glossary-single .entry-content > .aeo-summary,
.aeo-glossary-single .entry-content > .aeo-callout,
.aeo-glossary-single .entry-content > .aeo-table-wrap,
.aeo-glossary-single .entry-content > .aeo-before-after,
.aeo-glossary-single .entry-content > .aeo-visual-explainer,
.aeo-glossary-single .entry-content > .aeo-faq,
.aeo-glossary-single .entry-content > .aeo-sources,
.aeo-glossary-single .entry-content > .aeo-connected-terms,
.aeo-glossary-single .entry-content > .aeo-checklist,
.aeo-glossary-single .entry-content > .aeo-content-figure,
.aeo-glossary-single .entry-content > .aeo-wide-figure,
.aeo-glossary-single .entry-content > .aeo-image-grid,
.aeo-glossary-single .aeo-term-content > .aeo-summary,
.aeo-glossary-single .aeo-term-content > .aeo-callout,
.aeo-glossary-single .aeo-term-content > .aeo-table-wrap,
.aeo-glossary-single .aeo-term-content > .aeo-before-after,
.aeo-glossary-single .aeo-term-content > .aeo-visual-explainer,
.aeo-glossary-single .aeo-term-content > .aeo-faq,
.aeo-glossary-single .aeo-term-content > .aeo-sources,
.aeo-glossary-single .aeo-term-content > .aeo-connected-terms,
.aeo-glossary-single .aeo-term-content > .aeo-checklist,
.aeo-glossary-single .aeo-term-content > .aeo-content-figure,
.aeo-glossary-single .aeo-term-content > .aeo-wide-figure,
.aeo-glossary-single .aeo-term-content > .aeo-image-grid {
width: 100%;
max-width: 100%;
}
/* Margin-block uniform pentru componente editoriale, vertical rhythm */
.aeo-glossary-single .entry-content > .aeo-summary,
.aeo-glossary-single .entry-content > .aeo-callout,
.aeo-glossary-single .entry-content > .aeo-before-after,
.aeo-glossary-single .entry-content > .aeo-visual-explainer,
.aeo-glossary-single .entry-content > .aeo-table-wrap,
.aeo-glossary-single .entry-content > .aeo-faq,
.aeo-glossary-single .entry-content > .aeo-sources,
.aeo-glossary-single .entry-content > .aeo-connected-terms,
.aeo-glossary-single .entry-content > .aeo-content-figure,
.aeo-glossary-single .entry-content > .aeo-wide-figure,
.aeo-glossary-single .entry-content > .aeo-image-grid,
.aeo-glossary-single .aeo-term-content > .aeo-summary,
.aeo-glossary-single .aeo-term-content > .aeo-callout,
.aeo-glossary-single .aeo-term-content > .aeo-before-after,
.aeo-glossary-single .aeo-term-content > .aeo-visual-explainer,
.aeo-glossary-single .aeo-term-content > .aeo-table-wrap,
.aeo-glossary-single .aeo-term-content > .aeo-faq,
.aeo-glossary-single .aeo-term-content > .aeo-sources,
.aeo-glossary-single .aeo-term-content > .aeo-connected-terms,
.aeo-glossary-single .aeo-term-content > .aeo-content-figure,
.aeo-glossary-single .aeo-term-content > .aeo-wide-figure,
.aeo-glossary-single .aeo-term-content > .aeo-image-grid {
margin-block: var(--space-8);
}
/* ----- Tabele responsive: scroll orizontal pe mobile fără limita layout --- */
.aeo-glossary-single .aeo-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* ----- Override §31: scoate poziționarea --aeo-glossary-main- selectorii --
Regulile §31 cu .aeo-glossary-main nu se aplică (markup-ul nou nu mai
are .aeo-glossary-main). Le anulăm explicit pentru claritate. */
/* (Niciun selector .aeo-glossary-main nu mai apare în noul HTML.
Regulile vechi din §31 sunt orfane — nu se mai aplică. Safe.) */
/* =============================================================================
33. v0.3.6 — UI Polish & Spacing System pentru single-glossary
=============================================================================
Polish vizual pe componentele editoriale. Bootstrap grid din v0.3.5 rămâne
neatins. Doar valorile vizuale (radius, padding, spacing intern, hover
states) sunt standardizate aici.
STANDARDE v0.3.6:
- radius: 4px (cards, FAQ, boxuri, tabele, butoane); 6px featured image
- padding card simplu: 20px
- padding card important: 24px
- padding callout / summary: 20px
- FAQ question row: 18px 20px
- FAQ answer panel: 0 20px 18px
- sources box: 20px 20px 18px
- table cells: 14px 16px
- margin-block componente editoriale: 24-32px
- secțiuni mari: 40-56px
========================================================================== */
/* ----- Reset radius pe single-glossary — uniformizare la 4px --------------
Suprascrie valorile rotunjite din §28-32 doar pe scope-ul glossary. */
.aeo-glossary-single .aeo-summary,
.aeo-glossary-single .aeo-callout,
.aeo-glossary-single .aeo-table-wrap,
.aeo-glossary-single .aeo-table thead th:first-child,
.aeo-glossary-single .aeo-table thead th:last-child,
.aeo-glossary-single .aeo-before-after__panel,
.aeo-glossary-single .aeo-visual-explainer,
.aeo-glossary-single .aeo-visual-explainer__grid > div,
.aeo-glossary-single .aeo-faq,
.aeo-glossary-single .aeo-faq__item,
.aeo-glossary-single .aeo-sources,
.aeo-glossary-single .aeo-connected-terms,
.aeo-glossary-single .aeo-content-figure img,
.aeo-glossary-single .aeo-wide-figure img,
.aeo-glossary-single .aeo-image-grid img,
.aeo-glossary-single .aeo-glossary-sidebar__block,
.aeo-glossary-single .aeo-checklist li::before {
border-radius: 4px;
}
/* Featured image: radius 6px (singura excepție, conform brief). */
.aeo-glossary-single .aeo-glossary-featured__image,
.aeo-glossary-single .aeo-glossary-featured img {
border-radius: 6px;
}
/* Connected terms chip-uri rămân pill (intenționat). */
.aeo-glossary-single .aeo-connected-terms__list a {
border-radius: 999px;
}
/* ----- Vertical rhythm: secțiuni mari și componente -------------------------*/
.aeo-glossary-single .aeo-glossary-hero {
padding-block: 48px 32px;
}
@media (min-width: 992px) {
.aeo-glossary-single .aeo-glossary-hero {
padding-block: 64px 40px;
}
}
.aeo-glossary-single .aeo-glossary-body {
padding-block: 0 56px;
}
@media (min-width: 992px) {
.aeo-glossary-single .aeo-glossary-body {
padding-block: 0 80px;
}
}
.aeo-glossary-single .aeo-glossary-after {
padding-block: 48px;
}
.aeo-glossary-single .aeo-glossary-cta-final {
padding-block: 48px 64px;
}
/* Componente editoriale: margin-block uniform */
.aeo-glossary-single .entry-content > .aeo-summary,
.aeo-glossary-single .entry-content > .aeo-callout,
.aeo-glossary-single .entry-content > .aeo-before-after,
.aeo-glossary-single .entry-content > .aeo-visual-explainer,
.aeo-glossary-single .entry-content > .aeo-table-wrap,
.aeo-glossary-single .entry-content > .aeo-faq,
.aeo-glossary-single .entry-content > .aeo-sources,
.aeo-glossary-single .entry-content > .aeo-connected-terms,
.aeo-glossary-single .entry-content > .aeo-content-figure,
.aeo-glossary-single .entry-content > .aeo-wide-figure,
.aeo-glossary-single .entry-content > .aeo-image-grid,
.aeo-glossary-single .aeo-term-content > .aeo-summary,
.aeo-glossary-single .aeo-term-content > .aeo-callout,
.aeo-glossary-single .aeo-term-content > .aeo-before-after,
.aeo-glossary-single .aeo-term-content > .aeo-visual-explainer,
.aeo-glossary-single .aeo-term-content > .aeo-table-wrap,
.aeo-glossary-single .aeo-term-content > .aeo-faq,
.aeo-glossary-single .aeo-term-content > .aeo-sources,
.aeo-glossary-single .aeo-term-content > .aeo-connected-terms,
.aeo-glossary-single .aeo-term-content > .aeo-content-figure,
.aeo-glossary-single .aeo-term-content > .aeo-wide-figure,
.aeo-glossary-single .aeo-term-content > .aeo-image-grid {
margin-block: 32px;
}
/* Headinguri h2 — vertical rhythm clar */
.aeo-glossary-single .entry-content h2,
.aeo-glossary-single .aeo-term-content h2 {
margin-top: 48px;
margin-bottom: 16px;
}
.aeo-glossary-single .entry-content h2:first-child,
.aeo-glossary-single .aeo-term-content > h2:first-child {
margin-top: 0;
}
.aeo-glossary-single .entry-content h3,
.aeo-glossary-single .aeo-term-content h3 {
margin-top: 32px;
margin-bottom: 12px;
}
/* Paragrafe: typography curat, fără max-width hack */
.aeo-glossary-single .entry-content p,
.aeo-glossary-single .aeo-term-content p {
font-size: 17px;
line-height: 1.75;
color: var(--aeo-text-muted);
margin: 0 0 18px;
}
@media (min-width: 992px) {
.aeo-glossary-single .entry-content p,
.aeo-glossary-single .aeo-term-content p {
font-size: 18px;
}
}
/* ----- .aeo-summary polish (Pe scurt) --------------------------------------*/
.aeo-glossary-single .aeo-summary {
padding: 24px;
background: var(--aeo-violet-soft);
border: 1px solid var(--aeo-border);
border-left: 3px solid var(--aeo-violet);
box-shadow: none;
}
.aeo-glossary-single .aeo-summary__title {
margin: 0 0 12px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--aeo-violet);
}
.aeo-glossary-single .aeo-summary__list {
margin: 0;
padding-left: 20px;
}
.aeo-glossary-single .aeo-summary__list li {
margin-bottom: 8px;
line-height: 1.7;
color: var(--aeo-text-soft);
}
.aeo-glossary-single .aeo-summary__list li:last-child {
margin-bottom: 0;
}
/* ----- .aeo-callout polish -------------------------------------------------*/
.aeo-glossary-single .aeo-callout {
padding: 20px;
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-left: 3px solid var(--aeo-violet);
box-shadow: none;
}
.aeo-glossary-single .aeo-callout--note { background-color: var(--aeo-violet-soft); }
.aeo-glossary-single .aeo-callout--warning { background-color: #fff8ee; border-left-color: #c97b16; }
.aeo-glossary-single .aeo-callout--success { background-color: #f0faf3; border-left-color: #2f9f5f; }
.aeo-glossary-single .aeo-callout__title {
margin: 0 0 8px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--aeo-violet);
}
.aeo-glossary-single .aeo-callout--warning .aeo-callout__title { color: #b56500; }
.aeo-glossary-single .aeo-callout--success .aeo-callout__title { color: #1f7a45; }
.aeo-glossary-single .aeo-callout p {
margin-bottom: 12px;
}
.aeo-glossary-single .aeo-callout > *:last-child {
margin-bottom: 0;
}
/* ----- FAQ redesign vizual ------------------------------------------------ */
/* Container: stack curat de carduri, gap între ele. NU mai folosim wrapper
cu border în jur — fiecare item este card individual cu gap între. */
.aeo-glossary-single .aeo-faq {
background-color: transparent;
border: 0;
box-shadow: none;
overflow: visible;
display: flex;
flex-direction: column;
gap: 8px;
}
.aeo-glossary-single .aeo-faq__item {
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
box-shadow: none;
overflow: hidden;
transition: border-color 0.2s ease;
}
.aeo-glossary-single .aeo-faq__item:hover {
border-color: var(--aeo-border-strong);
}
/* Întrebare: row cu padding consistent */
.aeo-glossary-single .aeo-faq__question {
width: 100%;
padding: 18px 20px;
background-color: transparent;
border: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
text-align: left;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 16px;
line-height: 1.5;
color: var(--aeo-text);
transition: background-color 0.15s ease, color 0.15s ease;
}
.aeo-glossary-single .aeo-faq__question:hover {
background-color: var(--aeo-violet-soft);
}
.aeo-glossary-single .aeo-faq__question:focus-visible {
outline: 2px solid var(--aeo-violet);
outline-offset: -2px;
background-color: var(--aeo-violet-soft);
}
.aeo-glossary-single .aeo-faq__question[aria-expanded="true"] {
color: var(--aeo-violet);
}
/* Răspuns: padding 0 20px 18px 20px */
.aeo-glossary-single .aeo-faq__answer-inner {
padding: 0 20px 18px;
color: var(--aeo-text-soft);
line-height: 1.75;
}
.aeo-glossary-single .aeo-faq__answer-inner > *:first-child {
margin-top: 0;
}
.aeo-glossary-single .aeo-faq__answer-inner > *:last-child {
margin-bottom: 0;
}
/* Icon plus/minus clar */
.aeo-glossary-single .aeo-faq__icon {
flex: 0 0 auto;
position: relative;
width: 14px;
height: 14px;
color: var(--aeo-violet);
}
/* ----- .aeo-sources polish ------------------------------------------------ */
.aeo-glossary-single .aeo-sources {
margin-top: 48px;
padding: 20px 20px 18px;
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
box-shadow: none;
}
.aeo-glossary-single .aeo-sources__title {
margin: 0 0 14px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--aeo-text-muted);
}
.aeo-glossary-single .aeo-sources__list {
margin: 0;
padding-left: 20px;
}
.aeo-glossary-single .aeo-sources__list li {
margin-bottom: 8px;
font-size: 14px;
line-height: 1.6;
color: var(--aeo-text-soft);
}
.aeo-glossary-single .aeo-sources__list li:last-child {
margin-bottom: 0;
}
.aeo-glossary-single .aeo-sources__list a {
color: var(--aeo-violet);
}
/* ----- Connected terms inline -------------------------------------------- */
.aeo-glossary-single .aeo-connected-terms {
padding: 20px;
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
box-shadow: none;
}
.aeo-glossary-single .aeo-connected-terms__title {
margin: 0 0 12px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--aeo-text-muted);
}
.aeo-glossary-single .aeo-connected-terms__list a {
padding: 6px 14px;
background-color: var(--aeo-violet-soft);
border: 1px solid var(--aeo-border);
font-size: 14px;
font-weight: var(--fw-semibold);
color: var(--aeo-violet);
}
.aeo-glossary-single .aeo-connected-terms__list a:hover,
.aeo-glossary-single .aeo-connected-terms__list a:focus-visible {
background: var(--aeo-gradient-primary);
color: var(--color-text-inverse);
border-color: transparent;
}
/* ----- Visual explainer polish --------------------------------------------*/
.aeo-glossary-single .aeo-visual-explainer {
padding: 32px 28px;
background: linear-gradient(135deg, var(--aeo-violet-soft) 0%, var(--aeo-rose-soft) 100%);
border: 1px solid var(--aeo-border);
box-shadow: none;
}
.aeo-glossary-single .aeo-visual-explainer > h2,
.aeo-glossary-single .aeo-visual-explainer > h3 {
margin-top: 0;
margin-bottom: 24px;
font-size: 20px;
letter-spacing: -0.01em;
color: var(--aeo-text);
}
.aeo-glossary-single .aeo-visual-explainer__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 12px;
}
.aeo-glossary-single .aeo-visual-explainer__grid > div {
padding: 20px 16px;
min-height: 80px;
background-color: var(--aeo-surface);
border: 1px solid rgba(255, 255, 255, 0.8);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 14px;
line-height: 1.4;
color: var(--aeo-text);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.aeo-glossary-single .aeo-visual-explainer__grid > div:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(70, 40, 100, 0.08);
}
/* ----- Before/After polish -------------------------------------------------*/
.aeo-glossary-single .aeo-before-after {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 768px) {
.aeo-glossary-single .aeo-before-after {
grid-template-columns: 1fr 1fr;
gap: 20px;
}
}
.aeo-glossary-single .aeo-before-after__panel {
padding: 24px;
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
box-shadow: none;
}
.aeo-glossary-single .aeo-before-after__panel:nth-child(1) {
border-left: 3px solid var(--aeo-text-muted);
background-color: var(--aeo-surface-soft);
}
.aeo-glossary-single .aeo-before-after__panel:nth-child(2) {
border-left: 3px solid var(--aeo-violet);
background: linear-gradient(135deg, var(--aeo-violet-soft) 0%, var(--aeo-rose-soft) 100%);
}
.aeo-glossary-single .aeo-before-after__panel h3 {
margin: 0 0 12px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--aeo-text-muted);
}
.aeo-glossary-single .aeo-before-after__panel:nth-child(2) h3 {
color: var(--aeo-violet);
}
.aeo-glossary-single .aeo-before-after__panel > *:last-child {
margin-bottom: 0;
}
/* ----- Tabele polish ------------------------------------------------------*/
.aeo-glossary-single .aeo-table-wrap {
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
overflow-x: auto;
box-shadow: none;
margin: 32px 0;
}
.aeo-glossary-single .aeo-table {
margin: 0;
width: 100%;
background-color: transparent;
border-collapse: collapse;
font-size: 15px;
}
.aeo-glossary-single .aeo-table caption {
caption-side: top;
text-align: left;
padding: 14px 16px;
background-color: var(--aeo-violet-soft);
border-bottom: 1px solid var(--aeo-border);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--aeo-text-muted);
}
.aeo-glossary-single .aeo-table thead th {
padding: 14px 16px;
background-color: var(--aeo-surface-soft);
border-bottom: 1px solid var(--aeo-border);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 14px;
color: var(--aeo-text);
text-align: left;
}
.aeo-glossary-single .aeo-table tbody td {
padding: 14px 16px;
border-bottom: 1px solid var(--aeo-border-soft, var(--color-border-soft));
color: var(--aeo-text-soft);
line-height: 1.65;
vertical-align: top;
}
.aeo-glossary-single .aeo-table tbody td:first-child {
font-weight: var(--fw-semibold);
color: var(--aeo-text);
}
.aeo-glossary-single .aeo-table tbody tr:last-child td {
border-bottom: 0;
}
.aeo-glossary-single .aeo-table tbody tr:hover {
background-color: var(--aeo-violet-soft);
}
/* ----- Checklist polish --------------------------------------------------- */
.aeo-glossary-single .aeo-checklist {
margin: 24px 0;
list-style: none;
padding-left: 0;
}
.aeo-glossary-single .aeo-checklist li {
position: relative;
padding-left: 32px;
margin-bottom: 12px;
line-height: 1.7;
}
.aeo-glossary-single .aeo-checklist li::before {
content: "";
position: absolute;
left: 0;
top: 0.25em;
width: 20px;
height: 20px;
background-color: var(--aeo-surface);
border: 1.5px solid var(--aeo-border-strong);
}
.aeo-glossary-single .aeo-checklist li.is-checked::before {
background: var(--aeo-gradient-primary);
border-color: transparent;
}
.aeo-glossary-single .aeo-checklist li.is-checked::after {
content: "";
position: absolute;
left: 5px;
top: calc(0.25em + 4px);
width: 10px;
height: 6px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg);
}
/* ----- Sidebar polish ----------------------------------------------------- */
.aeo-glossary-single .aeo-glossary-sidebar__block {
padding: 20px;
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
box-shadow: none;
}
.aeo-glossary-single .aeo-glossary-sidebar__title {
margin: 0 0 12px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--aeo-text-muted);
}
.aeo-glossary-single .aeo-glossary-sidebar__item a {
padding: 8px 0;
font-size: 14px;
}
.aeo-glossary-single .aeo-glossary-sidebar__cta {
background: linear-gradient(135deg, rgba(123, 44, 255, 0.05) 0%, rgba(255, 95, 122, 0.05) 100%);
}
.aeo-glossary-single .aeo-glossary-sidebar__cta-text {
margin: 0 0 12px;
font-size: 14px;
line-height: 1.5;
}
/* Sticky gap între blocuri */
@media (min-width: 992px) {
.aeo-glossary-single .aeo-glossary-sidebar {
gap: 16px;
}
}
/* ----- Featured image polish ---------------------------------------------- */
.aeo-glossary-single .aeo-glossary-featured {
margin: 0 0 40px;
}
@media (min-width: 992px) {
.aeo-glossary-single .aeo-glossary-featured {
margin-bottom: 48px;
}
}
.aeo-glossary-single .aeo-glossary-featured__caption {
margin-top: 12px;
padding: 10px 16px;
background-color: var(--aeo-surface-soft);
font-size: 13px;
color: var(--aeo-text-soft);
font-style: normal;
text-align: center;
backdrop-filter: none;
border-radius: 4px;
}
/* ----- Content figures --------------------------------------------------- */
.aeo-glossary-single .aeo-content-figure,
.aeo-glossary-single .aeo-wide-figure {
margin: 32px 0;
}
.aeo-glossary-single .aeo-content-figure figcaption,
.aeo-glossary-single .aeo-wide-figure figcaption {
margin-top: 10px;
padding: 10px 16px;
background-color: var(--aeo-surface-soft);
border-radius: 4px;
font-size: 13px;
font-style: normal;
color: var(--aeo-text-soft);
text-align: center;
backdrop-filter: none;
}
/* =============================================================================
34. v0.3.8 — Glossary Archive Grid Redesign
=============================================================================
Layout pe Bootstrap grid real: container-aeo > row > col-lg-3 sidebar +
col-lg-9 content cu nested row de carduri (col-md-6 col-xl-4).
Scope strict pe .aeo-glossary-archive — nu afectează single-glossary,
homepage, legal pages sau taxonomy.
Bootstrap controlează layout-ul. CSS aici controlează doar:
- carduri vizual (background, border, hover, typography)
- sidebar/mobile controls styling
- A-Z state (active, disabled, current)
- grupare A-Z heading
========================================================================== */
/* ----- Background pagina archive -----------------------------------------*/
.aeo-glossary-archive {
background-color: var(--aeo-bg);
}
/* ----- Hero archive -------------------------------------------------------*/
.aeo-glossary-archive-hero {
padding-block: 48px 32px;
}
@media (min-width: 992px) {
.aeo-glossary-archive-hero {
padding-block: 64px 40px;
}
}
.aeo-glossary-archive-hero__eyebrow {
margin: 16px 0 12px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--aeo-violet);
}
.aeo-glossary-archive-hero__title {
margin: 0;
font-size: var(--fs-3xl);
font-weight: var(--fw-light);
letter-spacing: var(--ls-tighter);
line-height: var(--lh-tight);
color: var(--aeo-text);
}
@media (min-width: 768px) {
.aeo-glossary-archive-hero__title {
font-size: var(--fs-4xl);
}
}
@media (min-width: 1200px) {
.aeo-glossary-archive-hero__title {
font-size: var(--fs-5xl);
}
}
.aeo-glossary-archive-hero__lead {
margin: 20px 0 0;
padding-top: 20px;
border-top: 1px solid var(--aeo-border);
font-family: var(--font-display);
font-weight: var(--fw-light);
font-size: 17px;
line-height: 1.5;
color: var(--aeo-text-soft);
}
@media (min-width: 768px) {
.aeo-glossary-archive-hero__lead {
font-size: 18px;
}
}
/* ----- Body padding -------------------------------------------------------*/
.aeo-glossary-archive-body {
padding-block: 24px 64px;
}
@media (min-width: 992px) {
.aeo-glossary-archive-body {
padding-block: 32px 96px;
}
}
/* ----- Mobile controls block (search + filtre + A-Z) ---------------------*/
.aeo-glossary-archive-controls-mobile {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 24px;
}
.aeo-glossary-archive-controls-mobile__block {
padding: 16px;
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-radius: 4px;
}
.aeo-glossary-archive-controls-mobile__block .aeo-glossary-search {
flex-direction: row;
gap: 8px;
max-width: none;
}
/* ----- Sidebar desktop ---------------------------------------------------*/
@media (min-width: 992px) {
.aeo-glossary-archive-sidebar {
position: sticky;
top: 96px;
align-self: start;
max-height: calc(100vh - 120px);
overflow-y: auto;
padding-right: 8px;
display: flex;
flex-direction: column;
gap: 16px;
}
.aeo-glossary-archive-sidebar::-webkit-scrollbar {
width: 6px;
}
.aeo-glossary-archive-sidebar::-webkit-scrollbar-track {
background: transparent;
}
.aeo-glossary-archive-sidebar::-webkit-scrollbar-thumb {
background: var(--aeo-border-strong);
border-radius: 3px;
}
}
.aeo-glossary-archive-sidebar__block {
padding: 16px;
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-radius: 4px;
}
.aeo-glossary-archive-sidebar__title {
margin: 0 0 12px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--aeo-text-muted);
}
/* Compactare search în sidebar */
.aeo-glossary-archive-sidebar__block .aeo-glossary-search {
flex-direction: column;
gap: 8px;
max-width: none;
}
.aeo-glossary-archive-sidebar__block .aeo-glossary-search__submit {
padding: 8px 14px;
font-size: 13px;
}
/* Compactare filters în sidebar — listă verticală discretă */
.aeo-glossary-archive-sidebar__block .aeo-glossary-filters {
flex-direction: column;
gap: 0;
}
.aeo-glossary-archive-sidebar__block .aeo-glossary-filters__label {
display: none; /* heading-ul .aeo-glossary-archive-sidebar__title îl înlocuiește */
}
.aeo-glossary-archive-sidebar__block .aeo-glossary-filters__list {
flex-direction: column;
gap: 4px;
margin: 0;
padding: 0;
list-style: none;
}
.aeo-glossary-archive-sidebar__block .aeo-glossary-filters__item {
margin: 0;
}
.aeo-glossary-archive-sidebar__block .aeo-glossary-filters__item .aeo-chip {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 8px 12px;
background-color: transparent;
border: 1px solid transparent;
border-radius: 4px;
font-size: 14px;
color: var(--aeo-text-soft);
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.aeo-glossary-archive-sidebar__block .aeo-glossary-filters__item .aeo-chip:hover {
background-color: var(--aeo-violet-soft);
color: var(--aeo-violet);
}
.aeo-glossary-archive-sidebar__block .aeo-glossary-filters__item .aeo-chip.is-active {
background-color: var(--aeo-violet-soft);
color: var(--aeo-violet);
border-color: var(--aeo-border);
font-weight: var(--fw-semibold);
}
.aeo-glossary-archive-sidebar__block .aeo-glossary-filters__item .aeo-chip__count {
font-size: 12px;
color: var(--aeo-text-muted);
}
/* Compactare A-Z în sidebar — grid 6 coloane */
.aeo-glossary-archive-sidebar__block .aeo-glossary-az {
flex-direction: column;
gap: 8px;
}
.aeo-glossary-archive-sidebar__block .aeo-glossary-az__label {
display: none; /* heading-ul __title îl înlocuiește */
}
.aeo-glossary-archive-sidebar__block .aeo-glossary-az__list {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 4px;
margin: 0;
padding: 0;
list-style: none;
}
/* Item "Toate" la A-Z în sidebar pe full-width */
.aeo-glossary-archive-sidebar__block .aeo-glossary-az__list > li:first-child {
grid-column: 1 / -1;
}
.aeo-glossary-archive-sidebar__block .aeo-glossary-az__item {
margin: 0;
}
.aeo-glossary-archive-sidebar__block .aeo-glossary-az__letter {
display: flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 4px;
background-color: transparent;
border: 1px solid var(--aeo-border);
border-radius: 4px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 13px;
color: var(--aeo-text-soft);
text-decoration: none;
transition: all 0.15s ease;
}
.aeo-glossary-archive-sidebar__block .aeo-glossary-az__list > li:first-child .aeo-glossary-az__letter {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.aeo-glossary-archive-sidebar__block .aeo-glossary-az__letter:hover {
background-color: var(--aeo-violet-soft);
color: var(--aeo-violet);
border-color: var(--aeo-border-strong);
}
.aeo-glossary-archive-sidebar__block .aeo-glossary-az__letter.is-active {
background-color: var(--aeo-violet);
color: #fff;
border-color: var(--aeo-violet);
}
/* ----- A-Z disabled state (folosit ambele contexte: mobile + sidebar) -----*/
.aeo-glossary-az__letter.is-disabled {
color: var(--aeo-text-muted);
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
/* Override hover pe disabled — nu se aplică */
.aeo-glossary-archive-sidebar__block .aeo-glossary-az__letter.is-disabled:hover {
background-color: transparent;
color: var(--aeo-text-muted);
border-color: var(--aeo-border);
}
/* ----- Grupare A-Z în content grid ---------------------------------------*/
.aeo-glossary-archive-group {
margin-bottom: 40px;
}
.aeo-glossary-archive-group:last-child {
margin-bottom: 0;
}
.aeo-glossary-archive-group__heading {
margin: 0 0 16px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 28px;
color: var(--aeo-violet);
letter-spacing: -0.01em;
}
@media (min-width: 768px) {
.aeo-glossary-archive-group__heading {
font-size: 32px;
}
}
/* ----- Card glossary archive (varianta nouă) -----------------------------*/
.aeo-glossary-card {
height: 100%;
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-radius: 4px;
transition: border-color 0.15s ease, transform 0.15s ease;
}
.aeo-glossary-card:hover {
border-color: var(--aeo-border-strong);
transform: translateY(-2px);
}
.aeo-glossary-card__link {
display: block;
padding: 20px;
color: inherit;
text-decoration: none;
height: 100%;
}
.aeo-glossary-card__link:hover {
color: inherit;
}
.aeo-glossary-card__letter {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin-bottom: 12px;
background: var(--aeo-violet-soft);
border-radius: 4px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 14px;
color: var(--aeo-violet);
}
.aeo-glossary-card__title {
margin: 0 0 8px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 22px;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--aeo-text);
}
.aeo-glossary-card:hover .aeo-glossary-card__title {
color: var(--aeo-violet);
}
.aeo-glossary-card__question {
margin: 0 0 12px;
font-size: 13px;
font-weight: var(--fw-semibold);
color: var(--aeo-text-muted);
letter-spacing: 0.01em;
}
.aeo-glossary-card__excerpt {
margin: 0 0 16px;
font-size: 14px;
line-height: 1.6;
color: var(--aeo-text-soft);
}
.aeo-glossary-card__category {
display: inline-block;
padding: 4px 10px;
background-color: var(--aeo-surface-soft);
border: 1px solid var(--aeo-border);
border-radius: 4px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 11px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--aeo-text-muted);
}
/* ----- Empty state archive ------------------------------------------------*/
.aeo-glossary-archive .aeo-empty-state {
padding: 40px 24px;
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-radius: 4px;
text-align: center;
}
.aeo-glossary-archive .aeo-empty-state h2 {
margin: 0 0 16px;
font-size: 22px;
color: var(--aeo-text);
}
/* ----- Pagination spacing -------------------------------------------------*/
.aeo-glossary-archive-content .navigation.pagination {
margin-top: 40px;
}
/* ----- Reset: nu lăsa stiluri vechi să afecteze archive ------------------*/
/* Vechile reguli pe .aeo-archive-hero rămân orfane în noul HTML. Safe. */
/* =============================================================================
35. v0.4.1 — Glossary Index (Archive + Taxonomy) Editorial System
=============================================================================
Layout: container > row justify-content-center > col-12 col-lg-10 col-xl-8.
Fără sidebar. List items lați. Mobbin-like editorial.
Wrapper: .aeo-glossary-index (folosit și pe taxonomy + .aeo-glossary-taxonomy).
Scope strict — nu afectează single-glossary, homepage, legal.
STANDARDE UI v0.4.1:
- radius: 4px uniform
- padding card standard: 24px
- border: 1px solid var(--aeo-border), fără shadow grele
- typography: heading semibold, body relaxat
- spacing: 48px între secțiuni mari, 24px între componente
========================================================================== */
/* ----- Background pagina index --------------------------------------------*/
.aeo-glossary-index {
background-color: var(--aeo-bg);
}
/* ----- Hero index ---------------------------------------------------------*/
.aeo-glossary-index-hero {
padding-block: 48px 32px;
}
@media (min-width: 992px) {
.aeo-glossary-index-hero {
padding-block: 64px 40px;
}
}
.aeo-glossary-index-hero__kicker {
margin: 16px 0 12px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--aeo-violet);
}
.aeo-glossary-index-hero__kicker a {
color: inherit;
text-decoration: none;
}
.aeo-glossary-index-hero__kicker a:hover {
color: var(--aeo-text);
}
.aeo-glossary-index-hero__title {
margin: 0;
font-size: 32px;
font-weight: var(--fw-semibold);
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--aeo-text);
}
@media (min-width: 768px) {
.aeo-glossary-index-hero__title {
font-size: 42px;
}
}
@media (min-width: 1200px) {
.aeo-glossary-index-hero__title {
font-size: 52px;
}
}
.aeo-glossary-index-hero__intro {
margin: 16px 0 0;
font-size: 18px;
line-height: 1.6;
color: var(--aeo-text-soft);
}
/* ----- Controls (search + filtre + A-Z) -----------------------------------*/
.aeo-glossary-index-controls {
padding-block: 0 32px;
}
@media (min-width: 992px) {
.aeo-glossary-index-controls {
padding-block: 0 40px;
}
}
.aeo-glossary-index-controls__row {
margin-bottom: 16px;
}
.aeo-glossary-index-controls__row:last-child {
margin-bottom: 0;
}
/* Search compact pe row de controls */
.aeo-glossary-index-controls__row .aeo-glossary-search {
flex-direction: row;
gap: 8px;
max-width: none;
}
.aeo-glossary-index-controls__row .aeo-glossary-search__input {
flex: 1;
padding: 12px 14px;
border: 1px solid var(--aeo-border);
border-radius: 4px;
font-size: 15px;
background-color: var(--aeo-surface);
}
.aeo-glossary-index-controls__row .aeo-glossary-search__input:focus {
outline: 2px solid var(--aeo-violet);
outline-offset: -1px;
border-color: var(--aeo-violet);
}
.aeo-glossary-index-controls__row .aeo-glossary-search__submit {
padding: 12px 20px;
background: var(--aeo-violet);
border: 1px solid var(--aeo-violet);
border-radius: 4px;
color: #fff;
font-size: 14px;
font-weight: var(--fw-semibold);
cursor: pointer;
}
/* Filters chip layout */
.aeo-glossary-index-controls__row .aeo-glossary-filters {
display: flex;
flex-direction: column;
gap: 8px;
}
.aeo-glossary-index-controls__row .aeo-glossary-filters__label {
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--aeo-text-muted);
}
.aeo-glossary-index-controls__row .aeo-glossary-filters__list {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.aeo-glossary-index-controls__row .aeo-glossary-filters__item {
margin: 0;
}
.aeo-glossary-index-controls__row .aeo-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-radius: 4px;
font-size: 13px;
color: var(--aeo-text-soft);
text-decoration: none;
transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.aeo-glossary-index-controls__row .aeo-chip:hover {
background-color: var(--aeo-violet-soft);
color: var(--aeo-violet);
}
.aeo-glossary-index-controls__row .aeo-chip.is-active {
background-color: var(--aeo-violet);
color: #fff;
border-color: var(--aeo-violet);
}
.aeo-glossary-index-controls__row .aeo-chip__count {
font-size: 11px;
opacity: 0.7;
}
/* A-Z */
.aeo-glossary-index-controls__row .aeo-glossary-az {
display: flex;
flex-direction: column;
gap: 8px;
}
.aeo-glossary-index-controls__row .aeo-glossary-az__label {
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--aeo-text-muted);
}
.aeo-glossary-index-controls__row .aeo-glossary-az__list {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin: 0;
padding: 0;
list-style: none;
}
.aeo-glossary-index-controls__row .aeo-glossary-az__item {
margin: 0;
}
.aeo-glossary-index-controls__row .aeo-glossary-az__letter {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 8px;
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-radius: 4px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 13px;
color: var(--aeo-text-soft);
text-decoration: none;
transition: all 0.15s ease;
}
.aeo-glossary-index-controls__row .aeo-glossary-az__letter:hover {
background-color: var(--aeo-violet-soft);
color: var(--aeo-violet);
}
.aeo-glossary-index-controls__row .aeo-glossary-az__letter.is-active {
background-color: var(--aeo-violet);
color: #fff;
border-color: var(--aeo-violet);
}
.aeo-glossary-index-controls__row .aeo-glossary-az__letter.is-disabled {
color: var(--aeo-text-muted);
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
/* ----- List ---------------------------------------------------------------*/
.aeo-glossary-index-list {
padding-block: 0 64px;
}
@media (min-width: 992px) {
.aeo-glossary-index-list {
padding-block: 0 96px;
}
}
.aeo-glossary-index-group {
margin-bottom: 48px;
}
.aeo-glossary-index-group:last-child {
margin-bottom: 0;
}
.aeo-glossary-index-group__heading {
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--aeo-border);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 28px;
letter-spacing: -0.01em;
color: var(--aeo-violet);
}
.aeo-glossary-index-group__items {
display: flex;
flex-direction: column;
gap: 12px;
}
/* ----- List item (lat) ----------------------------------------------------*/
.aeo-glossary-index-item {
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-radius: 4px;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.aeo-glossary-index-item:hover {
border-color: var(--aeo-violet);
background-color: var(--aeo-violet-soft);
}
.aeo-glossary-index-item__link {
display: flex;
gap: 20px;
padding: 24px;
color: inherit;
text-decoration: none;
}
.aeo-glossary-index-item__link:hover {
color: inherit;
}
.aeo-glossary-index-item__letter {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: var(--aeo-violet);
color: #fff;
border-radius: 4px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 20px;
}
.aeo-glossary-index-item__body {
flex: 1 1 auto;
min-width: 0;
}
.aeo-glossary-index-item__title {
margin: 0 0 4px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 22px;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--aeo-text);
}
.aeo-glossary-index-item:hover .aeo-glossary-index-item__title {
color: var(--aeo-violet);
}
.aeo-glossary-index-item__question {
margin: 0 0 8px;
font-size: 13px;
font-weight: var(--fw-semibold);
color: var(--aeo-text-muted);
}
.aeo-glossary-index-item__excerpt {
margin: 0 0 12px;
font-size: 15px;
line-height: 1.6;
color: var(--aeo-text-soft);
}
.aeo-glossary-index-item__category {
display: inline-block;
padding: 3px 10px;
background-color: var(--aeo-surface-soft);
border: 1px solid var(--aeo-border);
border-radius: 4px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 11px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--aeo-text-muted);
}
/* ----- Empty state index --------------------------------------------------*/
.aeo-glossary-index .aeo-empty-state {
padding: 40px 24px;
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-radius: 4px;
text-align: center;
}
.aeo-glossary-index .aeo-empty-state h2 {
margin: 0 0 16px;
font-size: 22px;
color: var(--aeo-text);
}
/* ----- Pagination spacing -------------------------------------------------*/
.aeo-glossary-index-list .navigation.pagination {
margin-top: 32px;
}
/* =============================================================================
36. v0.4.1 — Single Glossary System
=============================================================================
Layout: container > row > aside col-lg-3 + main col-lg-9.
În main: sistem unic 8/4 (col-lg-8 + col-lg-4) + full-width (col-12).
Excepție justificată: before/after 6/6.
Wrapper: .aeo-glossary-single.
========================================================================== */
.aeo-glossary-single {
background-color: var(--aeo-bg);
}
/* ----- Hero (full-width col-12) ------------------------------------------*/
.aeo-glossary-single-hero {
padding-block: 48px 32px;
}
@media (min-width: 992px) {
.aeo-glossary-single-hero {
padding-block: 64px 40px;
}
}
.aeo-glossary-single-hero__kicker {
margin: 16px 0 12px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--aeo-violet);
}
.aeo-glossary-single-hero__kicker a {
color: inherit;
text-decoration: none;
}
.aeo-glossary-single-hero__kicker a:hover {
color: var(--aeo-text);
}
.aeo-glossary-single-hero__title {
margin: 0;
font-size: 36px;
font-weight: var(--fw-semibold);
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--aeo-text);
}
@media (min-width: 768px) {
.aeo-glossary-single-hero__title {
font-size: 48px;
}
}
@media (min-width: 1200px) {
.aeo-glossary-single-hero__title {
font-size: 60px;
}
}
.aeo-glossary-single-hero__definition {
margin: 16px 0 0;
padding-top: 16px;
border-top: 1px solid var(--aeo-border);
font-size: 18px;
line-height: 1.6;
color: var(--aeo-text-soft);
}
@media (min-width: 768px) {
.aeo-glossary-single-hero__definition {
font-size: 20px;
}
}
/* ----- Body padding ------------------------------------------------------*/
.aeo-glossary-single-body {
padding-block: 0 64px;
}
@media (min-width: 992px) {
.aeo-glossary-single-body {
padding-block: 0 96px;
}
}
/* ----- Sidebar (v0.4.3) --------------------------------------------------
ELIMINAT în v0.4.3. Single-glossary nu mai are sidebar — content este
centrat editorial pe col-lg-10 col-xl-8. Selectorii .aeo-glossary-single-sidebar*
nu mai sunt folosiți în template. */
/* ----- Content area (v0.4.3: col-lg-10 col-xl-8 centrat) ------------------*/
.aeo-glossary-single-content {
min-width: 0; /* permite shrink în row */
padding-block: 0 32px;
}
@media (min-width: 992px) {
.aeo-glossary-single-content {
padding-block: 0 48px;
}
}
/* Featured image — bloc central, prominent, în coloana editorială */
.aeo-glossary-single-featured {
margin: 0 0 48px;
}
@media (min-width: 992px) {
.aeo-glossary-single-featured {
margin: 0 0 64px;
}
}
.aeo-glossary-single-featured__image,
.aeo-glossary-single-featured img {
display: block;
width: 100%;
height: auto;
border-radius: 6px;
border: 1px solid var(--aeo-border);
}
.aeo-glossary-single-featured__caption {
margin-top: 16px;
padding: 12px 18px;
background-color: var(--aeo-surface-soft);
border: 1px solid var(--aeo-border);
border-radius: 4px;
font-size: 14px;
color: var(--aeo-text-soft);
font-style: normal;
text-align: center;
}
/* ----- Entry content typography ------------------------------------------*/
.aeo-glossary-single .entry-content {
font-size: 17px;
line-height: 1.75;
color: var(--aeo-text-soft);
}
@media (min-width: 992px) {
.aeo-glossary-single .entry-content {
font-size: 18px;
}
}
.aeo-glossary-single .entry-content p {
margin: 0 0 16px;
}
.aeo-glossary-single .entry-content h2 {
margin: 48px 0 16px;
font-family: var(--font-display);
font-size: 28px;
font-weight: var(--fw-semibold);
letter-spacing: -0.01em;
line-height: 1.25;
color: var(--aeo-text);
}
.aeo-glossary-single .entry-content h2:first-child {
margin-top: 0;
}
.aeo-glossary-single .entry-content h3 {
margin: 32px 0 12px;
font-family: var(--font-display);
font-size: 22px;
font-weight: var(--fw-semibold);
color: var(--aeo-text);
}
.aeo-glossary-single .entry-content h4 {
margin: 24px 0 12px;
font-size: 18px;
font-weight: var(--fw-semibold);
color: var(--aeo-text);
}
.aeo-glossary-single .entry-content ul,
.aeo-glossary-single .entry-content ol {
margin: 0 0 16px;
padding-left: 24px;
}
.aeo-glossary-single .entry-content li {
margin-bottom: 8px;
}
.aeo-glossary-single .entry-content a {
color: var(--aeo-violet);
text-decoration: underline;
text-decoration-color: rgba(123, 44, 255, 0.3);
text-underline-offset: 3px;
}
.aeo-glossary-single .entry-content a:hover {
color: var(--aeo-magenta);
text-decoration-color: currentColor;
}
.aeo-glossary-single .entry-content strong {
color: var(--aeo-text);
font-weight: var(--fw-semibold);
}
/* Curățare paragrafe goale (wpautop) */
.aeo-glossary-single .entry-content p:empty {
display: none;
}
/* ----- Sistem coloane intern (v0.4.3) -------------------------------------
v0.4.3: default-ul pentru single-glossary este **vertical, full-width**
în coloana editorială. Conținutul curge natural fără wrapper-uri Bootstrap
suplimentare. Componentele full-width (figure, table, FAQ, sources) ocupă
100% din coloana editorială (col-lg-10 col-xl-8).
8/4 rămâne disponibil OPȚIONAL pentru cazuri rare (text + box / text +
callout / text + figure laterală), prin Bootstrap real:
Excepție justificată simetrică — before/after:
CSS-ul aici stilizează DOAR marker classes pentru margin-block, NU geometrie.
Bootstrap rezolvă row + col-*. */
.aeo-glossary-single .entry-content .aeo-section-pair {
margin: 24px 0;
}
/* Alignare implicită top pentru perechi text + box (citire stabilă). */
.aeo-glossary-single .entry-content .aeo-section-pair {
align-items: flex-start;
}
/* =============================================================================
37. v0.4.1 — Componente editoriale single glossary
=============================================================================
11 componente stilizate uniform pe standardele v0.4.1:
radius 4px, border 1px subtle, padding 24px standard, fără shadows grele.
========================================================================== */
/* ---------- 1. Section intro ----------------------------------------------*/
.aeo-glossary-single .entry-content .aeo-section-intro {
margin: 24px 0;
font-size: 18px;
line-height: 1.7;
color: var(--aeo-text-soft);
}
/* ---------- 2. Summary box (Pe scurt) -------------------------------------*/
.aeo-glossary-single .entry-content .aeo-summary {
margin: 24px 0;
padding: 24px;
background-color: var(--aeo-violet-soft);
border: 1px solid var(--aeo-border);
border-left: 3px solid var(--aeo-violet);
border-radius: 4px;
}
.aeo-glossary-single .entry-content .aeo-summary__title {
margin: 0 0 12px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--aeo-violet);
}
.aeo-glossary-single .entry-content .aeo-summary__list {
margin: 0;
padding-left: 20px;
}
.aeo-glossary-single .entry-content .aeo-summary__list li {
margin-bottom: 8px;
line-height: 1.7;
}
.aeo-glossary-single .entry-content .aeo-summary__list li:last-child {
margin-bottom: 0;
}
/* ---------- 3. Editorial callout ------------------------------------------*/
.aeo-glossary-single .entry-content .aeo-callout {
margin: 24px 0;
padding: 20px 24px;
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-left: 3px solid var(--aeo-violet);
border-radius: 4px;
}
.aeo-glossary-single .entry-content .aeo-callout--note { background-color: var(--aeo-violet-soft); }
.aeo-glossary-single .entry-content .aeo-callout--warning { background-color: #fff8ee; border-left-color: #c97b16; }
.aeo-glossary-single .entry-content .aeo-callout--success { background-color: #f0faf3; border-left-color: #2f9f5f; }
.aeo-glossary-single .entry-content .aeo-callout__title {
margin: 0 0 8px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--aeo-violet);
}
.aeo-glossary-single .entry-content .aeo-callout--warning .aeo-callout__title { color: #b56500; }
.aeo-glossary-single .entry-content .aeo-callout--success .aeo-callout__title { color: #1f7a45; }
.aeo-glossary-single .entry-content .aeo-callout p:last-child {
margin-bottom: 0;
}
/* ---------- 4. Visual explainer -------------------------------------------*/
.aeo-glossary-single .entry-content .aeo-visual-explainer {
margin: 32px 0;
padding: 24px;
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-radius: 4px;
}
.aeo-glossary-single .entry-content .aeo-visual-explainer__title {
margin: 0 0 16px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 18px;
color: var(--aeo-text);
}
.aeo-glossary-single .entry-content .aeo-visual-explainer__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
}
.aeo-glossary-single .entry-content .aeo-visual-explainer__grid > * {
padding: 16px;
background-color: var(--aeo-surface-soft);
border: 1px solid var(--aeo-border);
border-radius: 4px;
font-size: 14px;
line-height: 1.5;
text-align: center;
}
/* ---------- 5. Comparison table -------------------------------------------*/
.aeo-glossary-single .entry-content .aeo-table-wrap,
.aeo-glossary-single .entry-content .aeo-comparison-table {
margin: 32px 0;
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-radius: 4px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.aeo-glossary-single .entry-content .aeo-table,
.aeo-glossary-single .entry-content table {
margin: 0;
width: 100%;
border-collapse: collapse;
font-size: 15px;
}
.aeo-glossary-single .entry-content .aeo-table caption {
caption-side: top;
text-align: left;
padding: 14px 16px;
background-color: var(--aeo-surface-soft);
border-bottom: 1px solid var(--aeo-border);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--aeo-text-muted);
}
.aeo-glossary-single .entry-content .aeo-table thead th,
.aeo-glossary-single .entry-content table thead th {
padding: 14px 16px;
background-color: var(--aeo-surface-soft);
border-bottom: 1px solid var(--aeo-border);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 14px;
color: var(--aeo-text);
text-align: left;
}
.aeo-glossary-single .entry-content .aeo-table tbody td,
.aeo-glossary-single .entry-content table tbody td {
padding: 14px 16px;
border-bottom: 1px solid var(--color-border-soft);
color: var(--aeo-text-soft);
line-height: 1.65;
vertical-align: top;
}
.aeo-glossary-single .entry-content .aeo-table tbody td:first-child {
font-weight: var(--fw-semibold);
color: var(--aeo-text);
}
.aeo-glossary-single .entry-content .aeo-table tbody tr:last-child td,
.aeo-glossary-single .entry-content table tbody tr:last-child td {
border-bottom: 0;
}
/* ---------- 6. Before/After cards (6/6 simetric Bootstrap real) ----------
v0.4.2: layout-ul Bootstrap real. Markup așteptat:
Bootstrap rezolvă col-lg-6 + col-lg-6 + gap. CSS-ul stilizează panel-urile. */
.aeo-glossary-single .entry-content .aeo-before-after {
margin: 32px 0;
}
.aeo-glossary-single .entry-content .aeo-before-after__panel {
padding: 24px;
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-radius: 4px;
height: 100%;
}
/* Pentru panelul „înainte" — marker .aeo-before-after__panel--before sau
prima coloană din row. Editorul poate folosi clase explicite pentru claritate. */
.aeo-glossary-single .entry-content .aeo-before-after__panel--before,
.aeo-glossary-single .entry-content .aeo-before-after > [class*="col-"]:first-child .aeo-before-after__panel {
border-left: 3px solid var(--aeo-text-muted);
}
.aeo-glossary-single .entry-content .aeo-before-after__panel--after,
.aeo-glossary-single .entry-content .aeo-before-after > [class*="col-"]:nth-child(2) .aeo-before-after__panel {
border-left: 3px solid var(--aeo-violet);
background-color: var(--aeo-violet-soft);
}
.aeo-glossary-single .entry-content .aeo-before-after__panel h3 {
margin: 0 0 12px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--aeo-text-muted);
}
.aeo-glossary-single .entry-content .aeo-before-after__panel--after h3,
.aeo-glossary-single .entry-content .aeo-before-after > [class*="col-"]:nth-child(2) .aeo-before-after__panel h3 {
color: var(--aeo-violet);
}
.aeo-glossary-single .entry-content .aeo-before-after__panel > *:last-child {
margin-bottom: 0;
}
/* ---------- 7. Audit table (variantă tabel) -------------------------------*/
/* Folosește același styling ca .aeo-table — wrapper .aeo-audit-table */
.aeo-glossary-single .entry-content .aeo-audit-table {
margin: 32px 0;
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-radius: 4px;
overflow-x: auto;
}
/* ---------- 8. Mistakes list (checklist negativ) --------------------------*/
.aeo-glossary-single .entry-content .aeo-mistakes-list {
margin: 24px 0;
padding: 24px;
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-radius: 4px;
list-style: none;
padding-left: 24px;
}
.aeo-glossary-single .entry-content .aeo-mistakes-list li {
position: relative;
padding-left: 28px;
margin-bottom: 12px;
line-height: 1.65;
}
.aeo-glossary-single .entry-content .aeo-mistakes-list li:last-child {
margin-bottom: 0;
}
.aeo-glossary-single .entry-content .aeo-mistakes-list li::before {
content: "×";
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: #ffe9e9;
color: #b8252e;
border-radius: 4px;
font-weight: var(--fw-semibold);
font-size: 14px;
line-height: 1;
}
/* ---------- 9. Connected terms chips --------------------------------------*/
.aeo-glossary-single .entry-content .aeo-connected-terms {
margin: 24px 0;
padding: 20px 24px;
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-radius: 4px;
}
.aeo-glossary-single .entry-content .aeo-connected-terms__title {
margin: 0 0 12px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--aeo-text-muted);
}
.aeo-glossary-single .entry-content .aeo-connected-terms__list {
list-style: none !important;
padding-left: 0 !important;
margin: 0 !important;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.aeo-glossary-single .entry-content .aeo-connected-terms__list li {
margin: 0 !important;
}
.aeo-glossary-single .entry-content .aeo-connected-terms__list a {
display: inline-flex;
padding: 6px 12px;
background-color: var(--aeo-violet-soft);
border: 1px solid var(--aeo-border);
border-radius: 4px;
font-size: 13px;
font-weight: var(--fw-semibold);
color: var(--aeo-violet);
text-decoration: none;
transition: background-color 0.15s, color 0.15s;
}
.aeo-glossary-single .entry-content .aeo-connected-terms__list a:hover {
background-color: var(--aeo-violet);
color: #fff;
}
/* ---------- 10. FAQ accordion ---------------------------------------------*/
.aeo-glossary-single .entry-content .aeo-faq {
margin: 32px 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.aeo-glossary-single .entry-content .aeo-faq__item {
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-radius: 4px;
overflow: hidden;
transition: border-color 0.15s ease;
}
.aeo-glossary-single .entry-content .aeo-faq__item:hover {
border-color: var(--aeo-border-strong);
}
.aeo-glossary-single .entry-content .aeo-faq__question {
width: 100%;
padding: 18px 20px;
background: transparent;
border: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
text-align: left;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 16px;
line-height: 1.5;
color: var(--aeo-text);
transition: background-color 0.15s ease;
}
.aeo-glossary-single .entry-content .aeo-faq__question:hover,
.aeo-glossary-single .entry-content .aeo-faq__question:focus-visible {
background-color: var(--aeo-violet-soft);
}
.aeo-glossary-single .entry-content .aeo-faq__question[aria-expanded="true"] {
color: var(--aeo-violet);
}
.aeo-glossary-single .entry-content .aeo-faq__answer-inner {
padding: 0 20px 20px;
color: var(--aeo-text-soft);
line-height: 1.75;
}
.aeo-glossary-single .entry-content .aeo-faq__answer-inner > *:first-child {
margin-top: 0;
}
.aeo-glossary-single .entry-content .aeo-faq__answer-inner > *:last-child {
margin-bottom: 0;
}
.aeo-glossary-single .entry-content .aeo-faq__icon {
flex: 0 0 auto;
position: relative;
width: 14px;
height: 14px;
color: var(--aeo-violet);
}
.aeo-glossary-single .entry-content .aeo-faq__icon::before,
.aeo-glossary-single .entry-content .aeo-faq__icon::after {
content: "";
position: absolute;
background-color: currentColor;
}
.aeo-glossary-single .entry-content .aeo-faq__icon::before {
top: 50%; left: 0;
width: 100%; height: 2px;
transform: translateY(-50%);
}
.aeo-glossary-single .entry-content .aeo-faq__icon::after {
top: 0; left: 50%;
width: 2px; height: 100%;
transform: translateX(-50%);
transition: opacity 0.2s ease;
}
.aeo-glossary-single .entry-content .aeo-faq__question[aria-expanded="true"] .aeo-faq__icon::after {
opacity: 0;
}
/* ---------- 11. Sources box -----------------------------------------------*/
.aeo-glossary-single .entry-content .aeo-sources {
margin: 48px 0 24px;
padding: 20px 24px;
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-radius: 4px;
}
.aeo-glossary-single .entry-content .aeo-sources__title {
margin: 0 0 14px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--aeo-text-muted);
}
.aeo-glossary-single .entry-content .aeo-sources__list {
margin: 0;
padding-left: 20px;
}
.aeo-glossary-single .entry-content .aeo-sources__list li {
margin-bottom: 8px;
font-size: 14px;
line-height: 1.6;
}
/* ---------- FIGURE: 5 tipuri suport pentru imagini ------------------------*/
/* Figure 1: Featured image — gestionată în PHP, vezi §36 .aeo-glossary-single-featured */
/* Figure 2: Figure standard în content */
.aeo-glossary-single .entry-content .aeo-figure {
margin: 24px 0;
}
.aeo-glossary-single .entry-content .aeo-figure img {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--aeo-border);
border-radius: 4px;
}
.aeo-glossary-single .entry-content .aeo-figure figcaption,
.aeo-glossary-single .entry-content .aeo-figure__caption {
margin-top: 10px;
padding: 10px 16px;
background-color: var(--aeo-surface-soft);
border: 1px solid var(--aeo-border);
border-radius: 4px;
font-size: 13px;
color: var(--aeo-text-soft);
font-style: normal;
text-align: left;
}
.aeo-glossary-single .entry-content .aeo-figure__source {
display: block;
margin-top: 4px;
font-size: 12px;
color: var(--aeo-text-muted);
}
/* Figure 3: Wide figure (când vrem ceva mai vizibil) */
.aeo-glossary-single .entry-content .aeo-figure--wide {
margin: 32px 0;
}
/* Figure 4: Figure + text — folosit ca aside într-un .aeo-section-pair
(col-12 col-lg-4 cu o figure înăuntru). Stilurile vin din .aeo-figure
standard + grid Bootstrap real. Nu necesită rules suplimentare. */
/* Figure 5: Example gallery — 2 sau 3 screenshoturi consecutive */
.aeo-glossary-single .entry-content .aeo-figure-gallery {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin: 32px 0;
}
@media (min-width: 768px) {
.aeo-glossary-single .entry-content .aeo-figure-gallery--2 {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 992px) {
.aeo-glossary-single .entry-content .aeo-figure-gallery--3 {
grid-template-columns: repeat(3, 1fr);
}
}
.aeo-glossary-single .entry-content .aeo-figure-gallery .aeo-figure {
margin: 0;
}
/* ----- After section + CTA final ------------------------------------------*/
/* v0.4.3: stilurile au fost mutate în §38 pentru aspect editorial mai discret
(fără surface background, padding mai mic, mai aproape de content). */
/* =============================================================================
38. v0.4.3 — Componente editoriale Mobbin-like (single glossary)
=============================================================================
Componente noi pentru ritm editorial vertical:
.aeo-term-section — wrapper pentru o secțiune logică (ex: „Ce este AEO?")
.aeo-section-kicker — etichetă mică deasupra titlului secțiunii
.aeo-section-lead — paragraf de intro al secțiunii (mai mare decât body)
.aeo-use-case-grid — grid de cazuri / criterii (3-4 cards egale)
Scope: .aeo-glossary-single .entry-content (nu afectează alt template).
Stil: radius 4px, padding coerent, fără shadow greu, spacing generos.
========================================================================== */
/* ---------- .aeo-term-section: wrapper secțiune editorială --------------- */
.aeo-glossary-single .entry-content .aeo-term-section {
margin: 64px 0;
}
.aeo-glossary-single .entry-content .aeo-term-section:first-child {
margin-top: 0;
}
.aeo-glossary-single .entry-content .aeo-term-section:last-child {
margin-bottom: 0;
}
@media (min-width: 992px) {
.aeo-glossary-single .entry-content .aeo-term-section {
margin: 80px 0;
}
}
/* ---------- .aeo-section-kicker: etichetă deasupra titlului ------------- */
.aeo-glossary-single .entry-content .aeo-section-kicker {
display: inline-block;
margin: 0 0 12px;
padding: 4px 10px;
background-color: var(--aeo-violet-soft);
border-radius: 4px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--aeo-violet);
}
/* ---------- .aeo-section-lead: paragraf intro secțiune ------------------ */
.aeo-glossary-single .entry-content .aeo-section-lead {
margin: 0 0 24px;
font-size: 20px;
font-weight: 400;
line-height: 1.55;
color: var(--aeo-text);
}
@media (min-width: 992px) {
.aeo-glossary-single .entry-content .aeo-section-lead {
font-size: 22px;
line-height: 1.5;
}
}
/* ---------- .aeo-use-case-grid: grid de cazuri / criterii --------------- */
/* Editorul scrie:
Titlu caz
Descriere scurtă.
...
Auto-fit 1 / 2 / 3 coloane în funcție de spațiu disponibil. */
.aeo-glossary-single .entry-content .aeo-use-case-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin: 32px 0;
}
@media (min-width: 768px) {
.aeo-glossary-single .entry-content .aeo-use-case-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (min-width: 1200px) {
.aeo-glossary-single .entry-content .aeo-use-case-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Variantă: forțează 2 coloane pe desktop chiar și pe XL */
.aeo-glossary-single .entry-content .aeo-use-case-grid--2 {
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.aeo-glossary-single .entry-content .aeo-use-case-grid--2 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1200px) {
.aeo-glossary-single .entry-content .aeo-use-case-grid--2 {
grid-template-columns: repeat(2, 1fr);
}
}
.aeo-glossary-single .entry-content .aeo-use-case-grid__item {
padding: 24px;
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-radius: 4px;
transition: border-color 0.15s ease;
}
.aeo-glossary-single .entry-content .aeo-use-case-grid__item:hover {
border-color: var(--aeo-border-strong);
}
.aeo-glossary-single .entry-content .aeo-use-case-grid__item h3 {
margin: 0 0 12px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 18px;
line-height: 1.3;
color: var(--aeo-text);
}
.aeo-glossary-single .entry-content .aeo-use-case-grid__item p:last-child {
margin-bottom: 0;
}
/* ---------- Figures: spacing generos înainte/după (Mobbin-like) --------- */
.aeo-glossary-single .entry-content .aeo-figure,
.aeo-glossary-single .entry-content figure.aeo-figure {
margin: 48px 0;
}
@media (min-width: 992px) {
.aeo-glossary-single .entry-content .aeo-figure,
.aeo-glossary-single .entry-content figure.aeo-figure {
margin: 64px 0;
}
}
.aeo-glossary-single .entry-content .aeo-figure--wide {
margin: 56px 0;
}
@media (min-width: 992px) {
.aeo-glossary-single .entry-content .aeo-figure--wide {
margin: 72px 0;
}
}
/* Imaginea ocupă 100% din coloana editorială */
.aeo-glossary-single .entry-content .aeo-figure img {
display: block;
width: 100%;
max-width: none; /* explicit: zero max-width hacks */
height: auto;
}
/* ---------- Connected terms: spacing și aspect (folosit în related-terms) */
.aeo-glossary-single-after {
padding-block: 24px 24px;
border-top: 1px solid var(--aeo-border);
}
.aeo-glossary-single-after .aeo-section--related {
margin: 0;
padding: 0;
background: transparent;
border: 0;
}
/* ---------- CTA final: spacing -------------------------------------------*/
.aeo-glossary-single-cta-final {
padding-block: 32px 64px;
}
@media (min-width: 992px) {
.aeo-glossary-single-cta-final {
padding-block: 48px 96px;
}
}
/* =============================================================================
39. v0.4.4 — Single Glossary Component Polish
=============================================================================
Patch focal pe componentele editoriale din single-glossary care apăreau brute
sau prea slabe vizual în v0.4.3.
Acoperă:
- .aeo-term-section: spacing 56px desktop / 40px mobile
- .aeo-term-content: wrapper editorial reset (zero max-width hacks)
- .aeo-figure / .aeo-figure--wide: margin-block 28px 36px, radius 6px
- .aeo-summary: polish padding 22px 24px + bg subtil
- .aeo-use-case-grid: Bootstrap grid friendly (row > col), nu CSS grid custom
- .aeo-use-case-card: alias clar pentru __item, height 100%
- .aeo-content-table: alias pentru .aeo-table
- .aeo-callout: polish title + variants
- .aeo-connected-terms / .aeo-sources: box discret, radius 4px
- .aeo-faq: trigger 18px 20px, icon clar, padding panel
Scope: .aeo-glossary-single (nu afectează alt template).
Selectori egal sau mai specifici decât §37/§38, prin cascadă câștigă §39.
========================================================================== */
/* ----- .aeo-term-content: wrapper editorial reset (v0.4.4) ----------------
Dacă editorul folosește wrapper-ul .aeo-term-content în content (din
conținutul AEO real), anulăm orice max-width moștenit din §31/§32 vechi.
Wrapper-ul ar trebui să fie transparent — doar marker, nu container vizual. */
.aeo-glossary-single .entry-content .aeo-term-content {
display: block;
margin: 0;
padding: 0;
max-width: none;
}
.aeo-glossary-single .entry-content .aeo-term-content > * {
max-width: none;
}
/* ----- .aeo-term-section: ritm 56px desktop / 40px mobile (v0.4.4) -------*/
.aeo-glossary-single .entry-content .aeo-term-section {
margin: 40px 0;
}
@media (min-width: 992px) {
.aeo-glossary-single .entry-content .aeo-term-section {
margin: 56px 0;
}
}
.aeo-glossary-single .entry-content .aeo-term-section:first-child {
margin-top: 0;
}
.aeo-glossary-single .entry-content .aeo-term-section:last-child {
margin-bottom: 0;
}
/* Headingul din secțiune: spațiere clară între el și kicker, și între el și paragraful următor. */
.aeo-glossary-single .entry-content .aeo-term-section > h2,
.aeo-glossary-single .entry-content .aeo-term-section > h3 {
margin-top: 0;
margin-bottom: 16px;
}
/* Section-kicker prezent: H2 imediat după kicker fără margin-top suplimentar. */
.aeo-glossary-single .entry-content .aeo-section-kicker + h2,
.aeo-glossary-single .entry-content .aeo-section-kicker + h3 {
margin-top: 12px;
}
/* ----- .aeo-section-kicker: pill mic, lizibil (v0.4.4) -------------------*/
.aeo-glossary-single .entry-content .aeo-section-kicker {
display: inline-block;
margin: 0 0 12px;
padding: 5px 12px;
background-color: var(--aeo-violet-soft);
border-radius: 4px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--aeo-violet);
line-height: 1.4;
}
/* ----- .aeo-section-lead: paragraf intro (v0.4.4) ------------------------*/
.aeo-glossary-single .entry-content .aeo-section-lead {
margin: 0 0 20px;
font-size: 19px;
font-weight: 400;
line-height: 1.55;
color: var(--aeo-text);
}
@media (min-width: 992px) {
.aeo-glossary-single .entry-content .aeo-section-lead {
font-size: 21px;
line-height: 1.5;
}
}
/* ----- .aeo-summary: box editorial Pe scurt (v0.4.4 polish) -------------*/
.aeo-glossary-single .entry-content .aeo-summary {
margin: 28px 0;
padding: 22px 24px;
background-color: var(--aeo-surface-soft);
border: 1px solid var(--aeo-border);
border-left: 3px solid var(--aeo-violet);
border-radius: 4px;
}
.aeo-glossary-single .entry-content .aeo-summary__title {
display: block;
margin: 0 0 12px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--aeo-violet);
}
.aeo-glossary-single .entry-content .aeo-summary__list {
margin: 0;
padding-left: 20px;
list-style: disc;
}
.aeo-glossary-single .entry-content .aeo-summary__list li {
margin-bottom: 10px;
line-height: 1.65;
font-size: 15px;
color: var(--aeo-text);
}
.aeo-glossary-single .entry-content .aeo-summary__list li:last-child {
margin-bottom: 0;
}
.aeo-glossary-single .entry-content .aeo-summary__list li::marker {
color: var(--aeo-violet);
}
/* ----- .aeo-figure: spacing și aspect (v0.4.4) ---------------------------*/
.aeo-glossary-single .entry-content .aeo-figure,
.aeo-glossary-single .entry-content figure.aeo-figure {
margin: 28px 0;
}
@media (min-width: 992px) {
.aeo-glossary-single .entry-content .aeo-figure,
.aeo-glossary-single .entry-content figure.aeo-figure {
margin: 36px 0;
}
}
/* Wide figure: aceeași regulă, marker pentru editor (overrides legacy 56/72px) */
.aeo-glossary-single .entry-content .aeo-figure--wide {
margin: 28px 0;
}
@media (min-width: 992px) {
.aeo-glossary-single .entry-content .aeo-figure--wide {
margin: 36px 0;
}
}
/* Imagine: 100% în coloana editorială, radius 6px, border 1px subtil */
.aeo-glossary-single .entry-content .aeo-figure img {
display: block;
width: 100%;
max-width: none;
height: auto;
border-radius: 6px;
border: 1px solid var(--aeo-border);
}
/* Caption clar, mai mic, separate de imagine */
.aeo-glossary-single .entry-content .aeo-figure__caption,
.aeo-glossary-single .entry-content .aeo-figure figcaption {
margin-top: 12px;
padding: 10px 14px;
background-color: var(--aeo-surface-soft);
border: 1px solid var(--aeo-border);
border-radius: 4px;
font-size: 13px;
line-height: 1.55;
color: var(--aeo-text-soft);
font-style: normal;
text-align: left;
}
.aeo-glossary-single .entry-content .aeo-figure__source {
display: block;
margin-top: 4px;
font-size: 12px;
color: var(--aeo-text-muted);
}
/* ----- .aeo-use-case-grid: Bootstrap-friendly (v0.4.4) -------------------
Override față de v0.4.3 (CSS grid custom). v0.4.4: editorul poate folosi
fie .aeo-use-case-grid (fallback CSS grid) fie Bootstrap row > col-* direct.
Această secțiune asigură aspect bun pentru ambele moduri. */
/* Mod 1: editorul folosește .aeo-use-case-grid (auto-fit cards) */
.aeo-glossary-single .entry-content .aeo-use-case-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin: 28px 0;
}
@media (min-width: 768px) {
.aeo-glossary-single .entry-content .aeo-use-case-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (min-width: 1200px) {
.aeo-glossary-single .entry-content .aeo-use-case-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Variant: forțează 2 coloane chiar și pe XL (4 cards = 2x2) */
.aeo-glossary-single .entry-content .aeo-use-case-grid--2 {
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.aeo-glossary-single .entry-content .aeo-use-case-grid--2 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1200px) {
.aeo-glossary-single .entry-content .aeo-use-case-grid--2 {
grid-template-columns: repeat(2, 1fr);
}
}
/* Mod 2: editorul folosește Bootstrap row > col direct (recomandat per brief) */
.aeo-glossary-single .entry-content .aeo-use-case-grid.row {
display: flex;
flex-wrap: wrap;
grid-template-columns: none; /* anulează CSS grid când e Bootstrap row */
margin: 28px 0;
gap: 0;
}
/* Cardul: clase egale .aeo-use-case-card (v0.4.4) și .aeo-use-case-grid__item (v0.4.3) */
.aeo-glossary-single .entry-content .aeo-use-case-card,
.aeo-glossary-single .entry-content .aeo-use-case-grid__item {
padding: 20px;
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-radius: 4px;
transition: border-color 0.15s ease;
height: 100%;
}
.aeo-glossary-single .entry-content .aeo-use-case-card:hover,
.aeo-glossary-single .entry-content .aeo-use-case-grid__item:hover {
border-color: var(--aeo-border-strong);
}
.aeo-glossary-single .entry-content .aeo-use-case-card h3,
.aeo-glossary-single .entry-content .aeo-use-case-card h4,
.aeo-glossary-single .entry-content .aeo-use-case-grid__item h3,
.aeo-glossary-single .entry-content .aeo-use-case-grid__item h4 {
margin: 0 0 10px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 17px;
line-height: 1.3;
color: var(--aeo-text);
}
.aeo-glossary-single .entry-content .aeo-use-case-card p,
.aeo-glossary-single .entry-content .aeo-use-case-grid__item p {
margin: 0 0 10px;
font-size: 14px;
line-height: 1.6;
color: var(--aeo-text-soft);
}
.aeo-glossary-single .entry-content .aeo-use-case-card p:last-child,
.aeo-glossary-single .entry-content .aeo-use-case-grid__item p:last-child {
margin-bottom: 0;
}
/* Când cardul este copilul direct al unei col-* Bootstrap, ocupă întreaga
înălțime a coloanei (pentru carduri egale într-un row Bootstrap). */
.aeo-glossary-single .entry-content [class*="col-"] > .aeo-use-case-card {
height: 100%;
}
/* ----- .aeo-content-table și .aeo-table: polish (v0.4.4) -----------------
.aeo-content-table este alias pentru .aeo-table. Editorul poate folosi orice
nume. Wrapper-ul .aeo-table-wrap gestionează overflow pe mobile. */
.aeo-glossary-single .entry-content .aeo-table-wrap {
margin: 28px 0;
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-radius: 4px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.aeo-glossary-single .entry-content .aeo-table,
.aeo-glossary-single .entry-content .aeo-content-table {
margin: 0;
width: 100%;
border-collapse: collapse;
font-size: 15px;
background-color: transparent;
}
.aeo-glossary-single .entry-content .aeo-table caption,
.aeo-glossary-single .entry-content .aeo-content-table caption {
caption-side: top;
text-align: left;
padding: 14px 16px;
background-color: var(--aeo-surface-soft);
border-bottom: 1px solid var(--aeo-border);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--aeo-text-muted);
}
.aeo-glossary-single .entry-content .aeo-table thead th,
.aeo-glossary-single .entry-content .aeo-content-table thead th {
padding: 14px 16px;
background-color: var(--aeo-surface-soft);
border-bottom: 1px solid var(--aeo-border);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 14px;
color: var(--aeo-text);
text-align: left;
}
.aeo-glossary-single .entry-content .aeo-table tbody td,
.aeo-glossary-single .entry-content .aeo-content-table tbody td {
padding: 14px 16px;
border-bottom: 1px solid var(--aeo-border);
color: var(--aeo-text-soft);
line-height: 1.65;
vertical-align: top;
font-size: 14px;
}
.aeo-glossary-single .entry-content .aeo-table tbody td:first-child,
.aeo-glossary-single .entry-content .aeo-content-table tbody td:first-child {
font-weight: var(--fw-semibold);
color: var(--aeo-text);
}
.aeo-glossary-single .entry-content .aeo-table tbody tr:last-child td,
.aeo-glossary-single .entry-content .aeo-content-table tbody tr:last-child td {
border-bottom: 0;
}
/* Tabel standalone (fără .aeo-table-wrap): aplică wrapper-like styling */
.aeo-glossary-single .entry-content > .aeo-content-table,
.aeo-glossary-single .entry-content > .aeo-table {
display: block;
border: 1px solid var(--aeo-border);
border-radius: 4px;
overflow-x: auto;
}
/* ----- .aeo-callout: polish title + variants (v0.4.4) -------------------*/
.aeo-glossary-single .entry-content .aeo-callout {
margin: 24px 0;
padding: 20px 24px;
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-left: 3px solid var(--aeo-violet);
border-radius: 4px;
}
.aeo-glossary-single .entry-content .aeo-callout--note {
background-color: var(--aeo-violet-soft);
border-left-color: var(--aeo-violet);
}
.aeo-glossary-single .entry-content .aeo-callout--warning {
background-color: #fff8ee;
border-left-color: #c97b16;
}
.aeo-glossary-single .entry-content .aeo-callout--success {
background-color: #f0faf3;
border-left-color: #2f9f5f;
}
.aeo-glossary-single .entry-content .aeo-callout__title {
display: block;
margin: 0 0 10px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--aeo-violet);
}
.aeo-glossary-single .entry-content .aeo-callout--warning .aeo-callout__title {
color: #b56500;
}
.aeo-glossary-single .entry-content .aeo-callout--success .aeo-callout__title {
color: #1f7a45;
}
.aeo-glossary-single .entry-content .aeo-callout p {
margin: 0 0 10px;
line-height: 1.65;
font-size: 15px;
color: var(--aeo-text);
}
.aeo-glossary-single .entry-content .aeo-callout p:last-child {
margin-bottom: 0;
}
/* ----- .aeo-faq: trigger 18px 20px, icon plus/minus (v0.4.4) ------------*/
.aeo-glossary-single .entry-content .aeo-faq {
margin: 28px 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.aeo-glossary-single .entry-content .aeo-faq__item {
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-radius: 4px;
overflow: hidden;
transition: border-color 0.15s ease;
}
.aeo-glossary-single .entry-content .aeo-faq__item:hover {
border-color: var(--aeo-border-strong);
}
.aeo-glossary-single .entry-content .aeo-faq__question {
width: 100%;
padding: 18px 20px;
background: transparent;
border: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
text-align: left;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 16px;
line-height: 1.45;
color: var(--aeo-text);
transition: background-color 0.15s ease;
}
.aeo-glossary-single .entry-content .aeo-faq__question:hover,
.aeo-glossary-single .entry-content .aeo-faq__question:focus-visible {
background-color: var(--aeo-violet-soft);
}
.aeo-glossary-single .entry-content .aeo-faq__question[aria-expanded="true"] {
color: var(--aeo-violet);
}
.aeo-glossary-single .entry-content .aeo-faq__answer-inner {
padding: 0 20px 20px;
color: var(--aeo-text-soft);
line-height: 1.7;
font-size: 15px;
}
.aeo-glossary-single .entry-content .aeo-faq__answer-inner > *:first-child {
margin-top: 0;
}
.aeo-glossary-single .entry-content .aeo-faq__answer-inner > *:last-child {
margin-bottom: 0;
}
/* Icon plus → minus aliniat, simplu, fără SVG extern */
.aeo-glossary-single .entry-content .aeo-faq__icon {
flex: 0 0 auto;
position: relative;
width: 14px;
height: 14px;
color: var(--aeo-violet);
}
.aeo-glossary-single .entry-content .aeo-faq__icon::before,
.aeo-glossary-single .entry-content .aeo-faq__icon::after {
content: "";
position: absolute;
background-color: currentColor;
}
.aeo-glossary-single .entry-content .aeo-faq__icon::before {
top: 50%; left: 0;
width: 100%; height: 2px;
transform: translateY(-50%);
}
.aeo-glossary-single .entry-content .aeo-faq__icon::after {
top: 0; left: 50%;
width: 2px; height: 100%;
transform: translateX(-50%);
transition: opacity 0.2s ease;
}
.aeo-glossary-single .entry-content .aeo-faq__question[aria-expanded="true"] .aeo-faq__icon::after {
opacity: 0;
}
/* ----- .aeo-connected-terms: box discret, chips clare (v0.4.4) ----------*/
.aeo-glossary-single .entry-content .aeo-connected-terms {
margin: 28px 0;
padding: 20px 24px;
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-radius: 4px;
}
.aeo-glossary-single .entry-content .aeo-connected-terms__title {
display: block;
margin: 0 0 12px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--aeo-text-muted);
}
.aeo-glossary-single .entry-content .aeo-connected-terms__list {
list-style: none !important;
padding-left: 0 !important;
margin: 0 !important;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.aeo-glossary-single .entry-content .aeo-connected-terms__list li {
margin: 0 !important;
}
.aeo-glossary-single .entry-content .aeo-connected-terms__list a {
display: inline-flex;
align-items: center;
padding: 6px 12px;
background-color: var(--aeo-violet-soft);
border: 1px solid var(--aeo-border);
border-radius: 4px;
font-size: 13px;
font-weight: var(--fw-semibold);
color: var(--aeo-violet);
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease;
line-height: 1.4;
}
.aeo-glossary-single .entry-content .aeo-connected-terms__list a:hover,
.aeo-glossary-single .entry-content .aeo-connected-terms__list a:focus-visible {
background-color: var(--aeo-violet);
color: #fff;
}
/* ----- .aeo-sources: card alb, listă lizibilă (v0.4.4) ------------------*/
.aeo-glossary-single .entry-content .aeo-sources {
margin: 40px 0 28px;
padding: 20px 24px;
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-radius: 4px;
}
@media (min-width: 992px) {
.aeo-glossary-single .entry-content .aeo-sources {
margin: 48px 0 32px;
}
}
.aeo-glossary-single .entry-content .aeo-sources__title {
display: block;
margin: 0 0 14px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--aeo-text-muted);
}
.aeo-glossary-single .entry-content .aeo-sources__list {
margin: 0;
padding-left: 22px;
list-style: decimal;
}
.aeo-glossary-single .entry-content .aeo-sources__list li {
margin-bottom: 10px;
font-size: 14px;
line-height: 1.6;
color: var(--aeo-text-soft);
}
.aeo-glossary-single .entry-content .aeo-sources__list li:last-child {
margin-bottom: 0;
}
.aeo-glossary-single .entry-content .aeo-sources__list li::marker {
color: var(--aeo-violet);
font-weight: var(--fw-semibold);
}
.aeo-glossary-single .entry-content .aeo-sources a {
color: var(--aeo-violet);
text-decoration: underline;
text-decoration-color: rgba(123, 44, 255, 0.3);
text-underline-offset: 2px;
word-break: break-word;
}
.aeo-glossary-single .entry-content .aeo-sources a:hover {
color: var(--aeo-magenta);
text-decoration-color: currentColor;
}
/* ----- Spacing global entry-content: typography uniformă v0.4.4 ---------*/
/* Asigurăm că ,
, , , au spacing coerent în content
editorial, evitând paragrafe lipite sau spațiu mort în jurul componentelor. */
.aeo-glossary-single .entry-content > p,
.aeo-glossary-single .entry-content .aeo-term-section > p,
.aeo-glossary-single .entry-content .aeo-term-content > p {
margin: 0 0 16px;
}
.aeo-glossary-single .entry-content > h2,
.aeo-glossary-single .entry-content .aeo-term-section > h2,
.aeo-glossary-single .entry-content .aeo-term-content > h2 {
margin: 32px 0 14px;
font-family: var(--font-display);
font-size: 26px;
font-weight: var(--fw-semibold);
letter-spacing: -0.01em;
line-height: 1.25;
color: var(--aeo-text);
}
@media (min-width: 992px) {
.aeo-glossary-single .entry-content > h2,
.aeo-glossary-single .entry-content .aeo-term-section > h2,
.aeo-glossary-single .entry-content .aeo-term-content > h2 {
font-size: 30px;
}
}
.aeo-glossary-single .entry-content > h2:first-child,
.aeo-glossary-single .entry-content .aeo-term-section > h2:first-child,
.aeo-glossary-single .entry-content .aeo-term-content > h2:first-child {
margin-top: 0;
}
.aeo-glossary-single .entry-content > h3,
.aeo-glossary-single .entry-content .aeo-term-section > h3,
.aeo-glossary-single .entry-content .aeo-term-content > h3 {
margin: 24px 0 12px;
font-family: var(--font-display);
font-size: 20px;
font-weight: var(--fw-semibold);
line-height: 1.3;
color: var(--aeo-text);
}
@media (min-width: 992px) {
.aeo-glossary-single .entry-content > h3,
.aeo-glossary-single .entry-content .aeo-term-section > h3,
.aeo-glossary-single .entry-content .aeo-term-content > h3 {
font-size: 22px;
}
}
/* =============================================================================
40. v0.4.5 — Single Glossary Template Polish
=============================================================================
Patch focal pe componente noi (meta editorial, prev/next nav) și fix-uri
vizuale (FAQ alignment defensiv, callout warning recolor pe paleta AEO).
Scope: .aeo-glossary-single (single-glossary template).
NU afectează archive, taxonomy, homepage, legal.
========================================================================== */
/* ----- Meta editorial sub hero (v0.4.5) ---------------------------------*/
.aeo-glossary-single-hero__meta {
list-style: none;
margin: 20px 0 0;
padding: 16px 0 0;
border-top: 1px solid var(--aeo-border);
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
font-size: 13px;
line-height: 1.5;
}
.aeo-glossary-single-hero__meta-item {
margin: 0;
display: inline-flex;
align-items: baseline;
gap: 4px;
color: var(--aeo-text-soft);
}
/* Separator subtle între elementele meta pe desktop (·) */
@media (min-width: 768px) {
.aeo-glossary-single-hero__meta-item:not(:last-child)::after {
content: "·";
margin-left: 20px;
color: var(--aeo-text-muted);
opacity: 0.5;
}
.aeo-glossary-single-hero__meta {
gap: 0 0;
}
.aeo-glossary-single-hero__meta-item {
margin-right: 4px;
}
}
.aeo-glossary-single-hero__meta-label {
font-weight: var(--fw-semibold);
color: var(--aeo-text-muted);
font-size: 12px;
letter-spacing: 0.02em;
}
.aeo-glossary-single-hero__meta-value {
color: var(--aeo-text-soft);
}
/* ----- FAQ alignment fix defensiv (v0.4.5) -------------------------------
v0.4.4 §39 are déjà text-align:left + flex justify-content:space-between.
v0.4.5 adaugă reguli defensive pentru cazuri unde conținutul real are
markup variabil (button fără span wrapper, sau text direct etc.). */
.aeo-glossary-single .entry-content .aeo-faq__question {
width: 100% !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
text-align: left !important;
}
.aeo-glossary-single .entry-content .aeo-faq__question > *,
.aeo-glossary-single .entry-content .aeo-faq__question-text {
text-align: left;
flex: 1 1 auto;
min-width: 0;
}
.aeo-glossary-single .entry-content .aeo-faq__icon {
flex: 0 0 auto;
margin-left: auto;
}
/* ----- Callout warning — recolor pe paleta AEO (v0.4.5) ------------------
v0.4.4 folosea #fff8ee + #c97b16 (orange/maro). v0.4.5 schimbă la
variantă magenta/violet, fără warning color clasic. */
.aeo-glossary-single .entry-content .aeo-callout--warning {
background-color: #fdf2f8;
border-left-color: var(--aeo-magenta);
}
.aeo-glossary-single .entry-content .aeo-callout--warning .aeo-callout__title {
color: var(--aeo-magenta);
}
/* ----- Prev/Next term navigation (v0.4.5) -------------------------------*/
.aeo-glossary-single-nav {
padding-block: 0 48px;
}
@media (min-width: 992px) {
.aeo-glossary-single-nav {
padding-block: 0 64px;
}
}
.aeo-glossary-single-nav__row {
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 32px;
border-top: 1px solid var(--aeo-border);
}
@media (min-width: 768px) {
.aeo-glossary-single-nav__row {
flex-direction: row;
gap: 16px;
align-items: stretch;
}
}
.aeo-glossary-single-nav__link {
flex: 1 1 0;
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px 18px;
background-color: var(--aeo-surface);
border: 1px solid var(--aeo-border);
border-radius: 4px;
text-decoration: none;
color: inherit;
transition: border-color 0.15s ease, background-color 0.15s ease;
min-width: 0; /* permite shrink */
}
.aeo-glossary-single-nav__link:hover,
.aeo-glossary-single-nav__link:focus-visible {
border-color: var(--aeo-violet);
background-color: var(--aeo-violet-soft);
color: inherit;
}
.aeo-glossary-single-nav__link--next {
text-align: right;
}
.aeo-glossary-single-nav__label {
display: block;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--aeo-text-muted);
}
.aeo-glossary-single-nav__link:hover .aeo-glossary-single-nav__label,
.aeo-glossary-single-nav__link:focus-visible .aeo-glossary-single-nav__label {
color: var(--aeo-violet);
}
.aeo-glossary-single-nav__title {
display: block;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 17px;
line-height: 1.3;
color: var(--aeo-text);
letter-spacing: -0.01em;
overflow: hidden;
text-overflow: ellipsis;
}
.aeo-glossary-single-nav__link:hover .aeo-glossary-single-nav__title,
.aeo-glossary-single-nav__link:focus-visible .aeo-glossary-single-nav__title {
color: var(--aeo-violet);
}
.aeo-glossary-single-nav__spacer {
flex: 1 1 0;
display: none;
}
@media (min-width: 768px) {
.aeo-glossary-single-nav__spacer {
display: block;
}
}
/* =============================================================================
41. v0.4.6 — Glossary Figure Lightbox
=============================================================================
Lightbox pentru imaginile din `.aeo-glossary-single .aeo-figure img`.
Featured image (.aeo-glossary-single-featured) este EXCLUSĂ prin selector.
Comportament:
- imaginea din articol primește cursor:zoom-in și badge discret „Mărește"
- click → overlay full-screen, imagine centrată, caption sub imagine
- ESC / click backdrop / close button → închide
- body scroll blocat (`.aeo-lightbox-lock`)
- fade simplu (180ms), zero animații grele
JS: assets/js/glossary-figure-lightbox.js, vanilla, fără dependențe.
========================================================================== */
/* ----- Imagine zoomable (în articol) -------------------------------------*/
.aeo-glossary-single .aeo-figure img.is-zoomable {
cursor: zoom-in;
transition: opacity 0.15s ease;
}
.aeo-glossary-single .aeo-figure img.is-zoomable:hover,
.aeo-glossary-single .aeo-figure img.is-zoomable:focus-visible {
opacity: 0.92;
}
.aeo-glossary-single .aeo-figure img.is-zoomable:focus-visible {
outline: 2px solid var(--aeo-violet);
outline-offset: 4px;
}
/* Badge discret „Mărește imaginea" în colț */
.aeo-glossary-single .aeo-figure {
position: relative;
}
.aeo-glossary-single .aeo-figure:has(img.is-zoomable)::after {
content: "Mărește imaginea";
position: absolute;
top: 12px;
right: 12px;
padding: 5px 10px;
background-color: rgba(26, 20, 40, 0.78);
color: #fff;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 11px;
letter-spacing: 0.04em;
border-radius: 4px;
pointer-events: none;
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.15s ease, transform 0.15s ease;
}
.aeo-glossary-single .aeo-figure:has(img.is-zoomable:hover)::after,
.aeo-glossary-single .aeo-figure:has(img.is-zoomable:focus-visible)::after {
opacity: 1;
transform: translateY(0);
}
/* ----- Body lock cât timp overlay-ul e deschis ---------------------------*/
body.aeo-lightbox-lock {
overflow: hidden;
/* păstrăm padding pentru a evita jumpy când dispare scrollbar-ul */
}
/* ----- Overlay container -------------------------------------------------*/
.aeo-figure-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background-color: rgba(15, 11, 28, 0.86);
opacity: 0;
transition: opacity 0.18s ease;
-webkit-tap-highlight-color: transparent;
}
.aeo-figure-lightbox.is-open {
opacity: 1;
}
.aeo-figure-lightbox[hidden] {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.aeo-figure-lightbox {
transition: none;
}
}
/* ----- Inner wrapper (imagine + caption + close) -------------------------*/
.aeo-figure-lightbox__inner {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
max-width: 92vw;
max-height: 88vh;
}
/* ----- Imaginea mare -----------------------------------------------------*/
.aeo-figure-lightbox__image {
display: block;
max-width: 92vw;
max-height: 88vh;
width: auto;
height: auto;
object-fit: contain;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
/* ----- Caption sub imagine -----------------------------------------------*/
.aeo-figure-lightbox__caption {
max-width: 92vw;
margin: 0;
padding: 0 8px;
color: rgba(255, 255, 255, 0.92);
font-family: var(--font-body);
font-size: 13px;
line-height: 1.55;
text-align: center;
}
.aeo-figure-lightbox__caption[hidden] {
display: none;
}
@media (min-width: 768px) {
.aeo-figure-lightbox__caption {
font-size: 14px;
}
}
/* ----- Buton close (× în dreapta sus) ------------------------------------*/
.aeo-figure-lightbox__close {
position: absolute;
top: -44px;
right: 0;
width: 36px;
height: 36px;
padding: 0;
background-color: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.24);
border-radius: 50%;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
line-height: 1;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.aeo-figure-lightbox__close span {
display: block;
margin-top: -2px; /* alinează vertical „×" în cerc */
}
.aeo-figure-lightbox__close:hover,
.aeo-figure-lightbox__close:focus-visible {
background-color: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.42);
}
.aeo-figure-lightbox__close:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
/* Pe mobile, butonul close este peste imagine sus-dreapta (nu mai e loc deasupra) */
@media (max-width: 767px) {
.aeo-figure-lightbox {
padding: 16px;
}
.aeo-figure-lightbox__close {
top: 8px;
right: 8px;
width: 40px;
height: 40px;
background-color: rgba(15, 11, 28, 0.78);
border-color: rgba(255, 255, 255, 0.32);
z-index: 1;
}
}
/* ----- Fallback fără :has() (browsere foarte vechi) ----------------------
:has() este suportat în Chrome 105+, Safari 15.4+, Firefox 121+.
Pentru browsere foarte vechi, badge-ul nu apare, dar cursor:zoom-in și
funcționalitatea lightbox-ului rămân. Acceptabil — degradare grațioasă. */
/* =============================================================================
42. AUDIT LANDING (v0.5.4.1 — context panel padding fix)
Componente pentru pagina /audit-aeo/.
Scope STRICT pe `.aeo-page-audit` (body content) și `.aeo-page-audit-footer`
(footer custom in-template). Body-ul primește background scoped prin
selector compus când template-ul este activ.
Asset-uri linked (în /assets/img/audit/):
- aeo-orb-soft.svg — glow radial pentru hero + context + CTA final
- aeo-wave-line.svg — wave abstract (rezervat extensiilor viitoare)
- aeo-sparkles.svg — sparkles decorative
- aeo-dot-grid.svg — pattern discret (sanitized script-free)
Iteration history:
- v0.5.0 : structură inițială
- v0.5.0b : scope real + eliminat max-width local
- v0.5.1 : hero CTA mai vizibil + audit preview + deliverable cards
- v0.5.2 : visual reset — hero 2-col, iconițe, glow, gradient
- v0.5.3 : PREMIUM — scor AEO ring + 6 metric rows + benefit chips +
context panel + number badge + tabs reale + dashed arrows +
3×2 deliverables + audience rows cu chevron + timeline disclaimer +
2-buton CTA final + footer premium in-template.
- v0.5.4 : POLISH + FAQ — H1 4rem clamp, butoane padding generos +
box-shadow violet hover, FAQ §9 nou cu /,
footer email contact@aeo.ro.
- v0.5.4.1 : PADDING FIX — Context panel-icon și Deliverable icon trecute
de la `inline-flex` la `flex` ca să elimine baseline shift care
reducea visual top padding la ~11px (în loc de 32px expected).
========================================================================== */
/* ---- Background scoped — kill bej cald global, alb pur pe pagina audit -- */
body.page-template-template-audit-aeo,
body.page-template-page-templates-template-audit-aeo {
background-color: var(--color-surface);
}
.aeo-page-audit {
background-color: var(--color-surface);
}
/* Alternanță secțiuni — alb / lavender foarte subtil — pentru ritm vizual */
.aeo-page-audit .aeo-audit-checks,
.aeo-page-audit .aeo-audit-deliverables,
.aeo-page-audit .aeo-audit-audience {
background-color: #FBFAFF;
}
/* =============================================================================
1. HERO — 2 coloane: copy + dashboard preview (scor AEO + ring + 6 rows)
========================================================================== */
.aeo-page-audit .aeo-audit-hero {
position: relative;
overflow: hidden;
padding-top: var(--space-10);
padding-bottom: var(--space-16);
background-color: var(--color-surface);
}
/* Orb backdrop discret în colț — asset linked, nu inline */
.aeo-page-audit .aeo-audit-hero__orb {
position: absolute;
top: -200px;
right: -240px;
width: 720px;
height: 720px;
opacity: 0.55;
pointer-events: none;
z-index: 0;
}
.aeo-page-audit .aeo-audit-hero__orb img {
width: 100%;
height: 100%;
display: block;
}
.aeo-page-audit .aeo-audit-hero__sparkles {
position: absolute;
bottom: -60px;
left: -40px;
width: 200px;
height: 200px;
opacity: 0.4;
pointer-events: none;
z-index: 0;
}
.aeo-page-audit .aeo-audit-hero__sparkles img {
width: 100%;
height: 100%;
display: block;
}
.aeo-page-audit .aeo-audit-hero > .container-aeo {
position: relative;
z-index: 1;
}
/* Hero copy column */
.aeo-page-audit .aeo-audit-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
margin: var(--space-5) 0 var(--space-6);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: 0.04em;
color: var(--color-primary);
}
.aeo-page-audit .aeo-audit-hero__sparkle-icon {
display: inline-flex;
width: 14px;
height: 14px;
color: var(--color-primary-2);
}
.aeo-page-audit .aeo-audit-hero__sparkle-icon svg {
width: 100%;
height: 100%;
}
.aeo-page-audit .aeo-audit-hero__title {
font-family: var(--font-display);
/* v0.5.4: dimensiune apropiată de mockup. Desktop xl = 64px, lh 1.02 */
font-size: 4rem;
font-weight: var(--fw-semibold);
line-height: 1.02;
color: var(--color-text);
margin: 0 0 var(--space-5);
letter-spacing: -0.02em;
}
.aeo-page-audit .aeo-audit-hero__lead {
font-size: var(--fs-md);
line-height: 1.65;
color: var(--color-text-soft);
margin: 0 0 var(--space-8);
}
.aeo-page-audit .aeo-audit-hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: center;
margin-bottom: var(--space-6);
}
.aeo-page-audit .aeo-audit-hero__cta-primary,
.aeo-page-audit .aeo-audit-cta-final__btn-primary {
background: linear-gradient(135deg, #7B2CFF 0%, #D73591 100%);
border: none;
padding: 1.125rem 2.25rem; /* v0.5.4: padding mai generos pentru premium feel */
font-size: var(--fs-md);
color: var(--color-text-inverse);
letter-spacing: 0.005em;
box-shadow: 0 4px 14px rgba(123, 44, 255, 0.18);
transition: background var(--transition-base),
box-shadow var(--transition-base),
transform var(--transition-fast);
}
.aeo-page-audit .aeo-audit-hero__cta-primary:hover,
.aeo-page-audit .aeo-audit-hero__cta-primary:focus-visible,
.aeo-page-audit .aeo-audit-cta-final__btn-primary:hover,
.aeo-page-audit .aeo-audit-cta-final__btn-primary:focus-visible {
background: linear-gradient(135deg, #6B1FE8 0%, #C12A82 100%);
color: var(--color-text-inverse);
box-shadow: 0 6px 20px rgba(123, 44, 255, 0.32);
transform: translateY(-1px);
}
.aeo-page-audit .aeo-audit-hero__cta-secondary,
.aeo-page-audit .aeo-audit-cta-final__btn-secondary {
padding: 1.125rem 2.25rem; /* v0.5.4: aliniere padding cu primary */
font-size: var(--fs-md);
background-color: var(--color-surface);
border-color: var(--color-border);
color: var(--color-text);
transition: border-color var(--transition-base),
transform var(--transition-fast);
}
.aeo-page-audit .aeo-audit-hero__cta-secondary:hover,
.aeo-page-audit .aeo-audit-hero__cta-secondary:focus-visible,
.aeo-page-audit .aeo-audit-cta-final__btn-secondary:hover,
.aeo-page-audit .aeo-audit-cta-final__btn-secondary:focus-visible {
border-color: var(--color-primary);
transform: translateY(-1px);
}
.aeo-page-audit .aeo-audit-hero__cta-icon,
.aeo-page-audit .aeo-audit-cta-final__btn-icon {
display: inline-flex;
width: 18px;
height: 18px;
margin-right: var(--space-2);
}
.aeo-page-audit .aeo-audit-hero__cta-icon svg,
.aeo-page-audit .aeo-audit-cta-final__btn-icon svg {
width: 100%;
height: 100%;
}
/* Hero benefit chips */
.aeo-page-audit .aeo-audit-hero__chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-5);
margin: 0;
padding: 0;
list-style: none;
}
.aeo-page-audit .aeo-audit-hero__chip {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-sm);
color: var(--color-text-muted);
}
.aeo-page-audit .aeo-audit-hero__chip-icon {
display: inline-flex;
width: 18px;
height: 18px;
color: var(--color-primary);
}
.aeo-page-audit .aeo-audit-hero__chip-icon svg {
width: 100%;
height: 100%;
}
/* -----------------------------------------------------------------------------
Hero panel — dashboard preview cu scor AEO + ring + 6 metric rows
-------------------------------------------------------------------------- */
.aeo-page-audit .aeo-audit-hero__visual {
position: relative;
}
.aeo-page-audit .aeo-audit-hero-panel {
position: relative;
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-6);
box-shadow:
0 1px 2px rgba(23, 19, 29, 0.04),
0 12px 32px rgba(123, 44, 255, 0.05);
}
/* Bar top — eyebrow + meta */
.aeo-page-audit .aeo-audit-hero-panel__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding-bottom: var(--space-4);
margin-bottom: var(--space-5);
border-bottom: 1px solid var(--color-border-soft);
}
.aeo-page-audit .aeo-audit-hero-panel__bar-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-primary);
}
.aeo-page-audit .aeo-audit-hero-panel__bar-eyebrow-icon {
display: inline-flex;
width: 14px;
height: 14px;
color: var(--color-primary-2);
}
.aeo-page-audit .aeo-audit-hero-panel__bar-eyebrow-icon svg {
width: 100%;
height: 100%;
}
.aeo-page-audit .aeo-audit-hero-panel__bar-meta {
display: inline-block;
padding: var(--space-1) var(--space-3);
background-color: var(--color-surface-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: 0.04em;
color: var(--color-text-muted);
}
/* Score block — big number + ring */
.aeo-page-audit .aeo-audit-hero-panel__score-block {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
margin-bottom: var(--space-6);
}
.aeo-page-audit .aeo-audit-hero-panel__score-text {
flex: 1 1 auto;
}
.aeo-page-audit .aeo-audit-hero-panel__score-label {
margin: 0 0 var(--space-2);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.aeo-page-audit .aeo-audit-hero-panel__score-value {
margin: 0 0 var(--space-2);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
color: var(--color-text);
line-height: 1;
}
.aeo-page-audit .aeo-audit-hero-panel__score-num {
font-size: var(--fs-5xl);
background: linear-gradient(135deg, #7B2CFF 0%, #D73591 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.aeo-page-audit .aeo-audit-hero-panel__score-out {
font-size: var(--fs-xl);
color: var(--color-text-muted);
margin-left: var(--space-2);
font-weight: var(--fw-medium);
}
.aeo-page-audit .aeo-audit-hero-panel__score-sub {
margin: 0 0 var(--space-3);
font-size: var(--fs-sm);
color: var(--color-text-soft);
}
.aeo-page-audit .aeo-audit-hero-panel__score-track {
width: 100%;
height: 8px;
background-color: var(--color-border-soft);
border-radius: var(--radius-full);
overflow: hidden;
}
.aeo-page-audit .aeo-audit-hero-panel__score-track-fill {
display: block;
width: 72%;
height: 100%;
background: linear-gradient(90deg, #7B2CFF 0%, #D73591 100%);
border-radius: var(--radius-full);
}
.aeo-page-audit .aeo-audit-hero-panel__score-ring {
position: relative;
width: 110px;
height: 110px;
flex-shrink: 0;
}
.aeo-page-audit .aeo-audit-hero-panel__score-ring svg {
width: 100%;
height: 100%;
}
.aeo-page-audit .aeo-audit-hero-panel__score-ring-text {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: none;
}
.aeo-page-audit .aeo-audit-hero-panel__score-ring-num {
font-family: var(--font-display);
font-size: var(--fs-2xl);
font-weight: var(--fw-semibold);
color: var(--color-text);
line-height: 1;
}
.aeo-page-audit .aeo-audit-hero-panel__score-ring-out {
font-size: var(--fs-xs);
color: var(--color-text-muted);
margin-top: 2px;
}
/* Rows label "Pe scurt" */
.aeo-page-audit .aeo-audit-hero-panel__rows-label {
margin: 0 0 var(--space-3);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
}
/* 6 metric rows */
.aeo-page-audit .aeo-audit-hero-panel__rows {
list-style: none;
padding: 0;
margin: 0 0 var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.aeo-page-audit .aeo-audit-hero-panel__row {
display: grid;
grid-template-columns: 28px minmax(0, 1fr) 60px 32px 20px;
gap: var(--space-3);
align-items: center;
}
.aeo-page-audit .aeo-audit-hero-panel__row-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background-color: var(--color-surface-alt);
border-radius: var(--radius-xs);
color: var(--color-primary);
}
.aeo-page-audit .aeo-audit-hero-panel__row-icon svg {
width: 16px;
height: 16px;
}
.aeo-page-audit .aeo-audit-hero-panel__row-label {
font-size: var(--fs-sm);
color: var(--color-text);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.aeo-page-audit .aeo-audit-hero-panel__row-bar {
display: block;
height: 6px;
background-color: var(--color-border-soft);
border-radius: var(--radius-full);
overflow: hidden;
}
.aeo-page-audit .aeo-audit-hero-panel__row-bar > span {
display: block;
height: 100%;
background: linear-gradient(90deg, #7B2CFF 0%, #D73591 100%);
border-radius: var(--radius-full);
}
.aeo-page-audit .aeo-audit-hero-panel__row-value {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
color: var(--color-text);
text-align: right;
}
.aeo-page-audit .aeo-audit-hero-panel__row-status {
display: inline-flex;
width: 20px;
height: 20px;
}
.aeo-page-audit .aeo-audit-hero-panel__row-status svg {
width: 100%;
height: 100%;
}
.aeo-page-audit .aeo-audit-hero-panel__row-status--ok {
color: #2E9F5C; /* green ok — în afara tokens, justificat: indicator status pozitiv distinct de brand */
}
.aeo-page-audit .aeo-audit-hero-panel__row-status--warn {
color: #E89B2C; /* amber warn — în afara tokens, justificat: indicator status atenție distinct */
}
.aeo-page-audit .aeo-audit-hero-panel__footnote {
display: flex;
align-items: center;
gap: var(--space-2);
margin: 0;
padding-top: var(--space-4);
border-top: 1px solid var(--color-border-soft);
font-size: var(--fs-xs);
color: var(--color-text-muted);
line-height: 1.4;
}
.aeo-page-audit .aeo-audit-hero-panel__footnote-icon {
display: inline-flex;
width: 14px;
height: 14px;
color: var(--color-primary-2);
flex-shrink: 0;
}
.aeo-page-audit .aeo-audit-hero-panel__footnote-icon svg {
width: 100%;
height: 100%;
}
/* =============================================================================
2. CONTEXT — 2-col cu panou vizual + orb backdrop
========================================================================== */
.aeo-page-audit .aeo-audit-context {
padding-top: var(--space-16);
padding-bottom: var(--space-16);
background-color: var(--color-surface);
}
.aeo-page-audit .aeo-audit-context__copy {
color: var(--color-text-soft);
}
.aeo-page-audit .aeo-audit-context__copy p {
font-size: var(--fs-md);
line-height: 1.7;
margin-bottom: var(--space-5);
}
.aeo-page-audit .aeo-audit-context__copy p:last-child {
margin-bottom: 0;
}
.aeo-page-audit .aeo-audit-context__visual {
position: relative;
min-height: 360px;
display: flex;
align-items: center;
justify-content: center;
}
.aeo-page-audit .aeo-audit-context__orb {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 520px;
height: 520px;
opacity: 0.7;
pointer-events: none;
z-index: 0;
}
.aeo-page-audit .aeo-audit-context__orb img {
width: 100%;
height: 100%;
display: block;
}
.aeo-page-audit .aeo-audit-context__sparkles {
position: absolute;
top: -40px;
right: -40px;
width: 200px;
height: 200px;
opacity: 0.6;
pointer-events: none;
z-index: 0;
}
.aeo-page-audit .aeo-audit-context__sparkles img {
width: 100%;
height: 100%;
display: block;
}
.aeo-page-audit .aeo-audit-context__panel {
position: relative;
z-index: 1;
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-7);
box-shadow:
0 1px 2px rgba(23, 19, 29, 0.04),
0 12px 32px rgba(123, 44, 255, 0.05);
max-width: 420px;
width: 100%;
}
.aeo-page-audit .aeo-audit-context__panel-icon {
/* v0.5.4.1 fix: `flex` în loc de `inline-flex` ca să anchorăm iconul la
panel padding-top exact (40px), nu cu baseline shift care îl trage cu
~20px mai sus. Same pattern aplicat la .aeo-audit-deliverable__icon. */
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin-bottom: var(--space-4);
background-color: var(--color-surface-alt);
border-radius: var(--radius-xs);
color: var(--color-primary);
}
.aeo-page-audit .aeo-audit-context__panel-icon svg {
width: 22px;
height: 22px;
}
.aeo-page-audit .aeo-audit-context__panel-title {
margin: 0 0 var(--space-5);
font-family: var(--font-display);
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
line-height: 1.3;
color: var(--color-text);
}
.aeo-page-audit .aeo-audit-context__panel-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.aeo-page-audit .aeo-audit-context__panel-list li {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--fs-sm);
color: var(--color-text-soft);
line-height: 1.4;
}
.aeo-page-audit .aeo-audit-context__panel-check {
display: inline-flex;
width: 20px;
height: 20px;
color: var(--color-primary);
flex-shrink: 0;
}
.aeo-page-audit .aeo-audit-context__panel-check svg {
width: 100%;
height: 100%;
}
/* =============================================================================
3. CE VERIFICĂM — 6 carduri: icon top-left + number badge top-right
========================================================================== */
.aeo-page-audit .aeo-audit-checks {
padding-top: var(--space-16);
padding-bottom: var(--space-16);
}
.aeo-page-audit .aeo-audit-checks > .container-aeo > .row.justify-content-center {
margin-bottom: var(--space-10);
}
.aeo-page-audit .aeo-audit-check {
height: 100%;
padding: var(--space-6);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
transition: border-color var(--transition-base),
transform var(--transition-fast);
}
.aeo-page-audit .aeo-audit-check:hover {
border-color: var(--color-primary);
transform: translateY(-2px);
}
.aeo-page-audit .aeo-audit-check__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.aeo-page-audit .aeo-audit-check__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background-color: var(--color-surface-alt);
border-radius: var(--radius-xs);
color: var(--color-primary);
}
.aeo-page-audit .aeo-audit-check__icon svg {
width: 24px;
height: 24px;
}
.aeo-page-audit .aeo-audit-check__badge {
display: inline-block;
padding: var(--space-1) var(--space-3);
background-color: var(--color-surface-alt);
border-radius: var(--radius-full);
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: 0.04em;
color: var(--color-text-muted);
}
.aeo-page-audit .aeo-audit-check__title {
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
line-height: 1.3;
color: var(--color-text);
margin: 0 0 var(--space-3);
}
.aeo-page-audit .aeo-audit-check__text {
font-size: var(--fs-sm);
line-height: 1.6;
color: var(--color-text-soft);
margin: 0;
}
/* =============================================================================
4. CUM ARATĂ AUDITUL — tabs reale + table structurată + sparkles decorative
========================================================================== */
.aeo-page-audit .aeo-audit-preview {
position: relative;
padding-top: var(--space-16);
padding-bottom: var(--space-16);
background-color: var(--color-surface);
overflow: hidden;
}
.aeo-page-audit .aeo-audit-preview__sparkles-left,
.aeo-page-audit .aeo-audit-preview__sparkles-right {
position: absolute;
width: 200px;
height: 200px;
opacity: 0.35;
pointer-events: none;
z-index: 0;
}
.aeo-page-audit .aeo-audit-preview__sparkles-left {
bottom: 80px;
left: -40px;
}
.aeo-page-audit .aeo-audit-preview__sparkles-right {
top: 120px;
right: -40px;
}
.aeo-page-audit .aeo-audit-preview__sparkles-left img,
.aeo-page-audit .aeo-audit-preview__sparkles-right img {
width: 100%;
height: 100%;
display: block;
}
.aeo-page-audit .aeo-audit-preview > .container-aeo {
position: relative;
z-index: 1;
}
.aeo-page-audit .aeo-audit-preview > .container-aeo > .row.justify-content-center:first-child {
margin-bottom: var(--space-10);
}
.aeo-page-audit .aeo-audit-preview__panel {
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow:
0 1px 2px rgba(23, 19, 29, 0.04),
0 16px 40px rgba(123, 44, 255, 0.06);
overflow: hidden;
}
/* Tabs — bara superioară, primul activ cu underline violet */
.aeo-page-audit .aeo-audit-preview__tabs {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
padding: var(--space-5) var(--space-6) 0;
border-bottom: 1px solid var(--color-border-soft);
}
.aeo-page-audit .aeo-audit-preview__tab {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-1) var(--space-4);
margin-bottom: -1px;
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--color-text-muted);
border-bottom: 2px solid transparent;
cursor: default;
}
.aeo-page-audit .aeo-audit-preview__tab--active {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
font-weight: var(--fw-semibold);
}
.aeo-page-audit .aeo-audit-preview__tab-icon {
display: inline-flex;
width: 18px;
height: 18px;
}
.aeo-page-audit .aeo-audit-preview__tab-icon svg {
width: 100%;
height: 100%;
}
/* Body — table rows cu label / value / status */
.aeo-page-audit .aeo-audit-preview__body {
padding: var(--space-4) var(--space-6);
}
.aeo-page-audit .aeo-audit-preview__row {
display: grid;
grid-template-columns: 200px minmax(0, 1fr) auto;
gap: var(--space-5);
align-items: center;
padding: var(--space-5) 0;
border-bottom: 1px solid var(--color-border-soft);
}
.aeo-page-audit .aeo-audit-preview__row:last-child {
border-bottom: none;
}
.aeo-page-audit .aeo-audit-preview__row-label {
display: flex;
align-items: center;
gap: var(--space-2);
margin: 0;
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--color-text);
line-height: 1.4;
}
.aeo-page-audit .aeo-audit-preview__row-label-q {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background-color: var(--color-surface-alt);
border: 1px solid var(--color-border);
border-radius: 50%;
font-size: 11px;
color: var(--color-text-muted);
font-weight: var(--fw-medium);
}
.aeo-page-audit .aeo-audit-preview__row-label-icon,
.aeo-page-audit .aeo-audit-preview__row-label-spark {
display: inline-flex;
width: 16px;
height: 16px;
color: var(--color-primary-2);
}
.aeo-page-audit .aeo-audit-preview__row-label-icon svg,
.aeo-page-audit .aeo-audit-preview__row-label-spark svg {
width: 100%;
height: 100%;
}
.aeo-page-audit .aeo-audit-preview__row-text {
font-size: var(--fs-sm);
color: var(--color-text-soft);
line-height: 1.5;
}
.aeo-page-audit .aeo-audit-preview__row-link {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: var(--fs-xs);
color: var(--color-primary);
word-break: break-all;
}
.aeo-page-audit .aeo-audit-preview__row-mini-label {
margin: 0 0 var(--space-2);
font-size: var(--fs-xs);
color: var(--color-text-muted);
}
.aeo-page-audit .aeo-audit-preview__row-status {
display: flex;
align-items: center;
gap: var(--space-2);
justify-content: flex-end;
}
.aeo-page-audit .aeo-audit-preview__icon-meta {
display: inline-flex;
width: 18px;
height: 18px;
color: var(--color-text-muted);
}
.aeo-page-audit .aeo-audit-preview__icon-meta svg {
width: 100%;
height: 100%;
}
/* Badges — neutral, warn, priority */
.aeo-page-audit .aeo-audit-preview__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: 0.02em;
line-height: 1.4;
white-space: nowrap;
}
.aeo-page-audit .aeo-audit-preview__badge--neutral {
background-color: var(--color-surface-alt);
color: var(--color-primary);
border: 1px solid var(--color-border);
}
.aeo-page-audit .aeo-audit-preview__badge--warn {
background-color: #FFF6E5;
color: #B26B00;
border: 1px solid #FFDFA0;
}
.aeo-page-audit .aeo-audit-preview__badge--priority {
background-color: #FFE6EF;
color: #C9166A;
border: 1px solid #FFC9DD;
}
.aeo-page-audit .aeo-audit-preview__badge-icon {
display: inline-flex;
width: 12px;
height: 12px;
}
.aeo-page-audit .aeo-audit-preview__badge-icon svg {
width: 100%;
height: 100%;
}
/* Chips — surse, competitori */
.aeo-page-audit .aeo-audit-preview__chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.aeo-page-audit .aeo-audit-preview__chip {
display: inline-block;
padding: var(--space-1) var(--space-3);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xs);
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: var(--fs-xs);
color: var(--color-text-soft);
line-height: 1.4;
}
.aeo-page-audit .aeo-audit-preview__chip--more {
background-color: var(--color-surface-alt);
color: var(--color-primary);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
}
/* Bullets — recomandări */
.aeo-page-audit .aeo-audit-preview__bullets {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.aeo-page-audit .aeo-audit-preview__bullets li {
position: relative;
padding-left: var(--space-5);
font-size: var(--fs-sm);
color: var(--color-text-soft);
line-height: 1.5;
}
.aeo-page-audit .aeo-audit-preview__bullets li::before {
content: "";
position: absolute;
left: 0;
top: 0.6em;
width: 8px;
height: 8px;
background-color: var(--color-accent);
border-radius: 50%;
}
/* Mini ring — 60% surse */
.aeo-page-audit .aeo-audit-preview__mini-ring {
position: relative;
width: 56px;
height: 56px;
}
.aeo-page-audit .aeo-audit-preview__mini-ring svg {
width: 100%;
height: 100%;
}
.aeo-page-audit .aeo-audit-preview__mini-ring-text {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
color: var(--color-text);
pointer-events: none;
}
.aeo-page-audit .aeo-audit-preview__footnote {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
margin: var(--space-6) 0 0;
font-size: var(--fs-sm);
color: var(--color-text-muted);
text-align: center;
}
.aeo-page-audit .aeo-audit-preview__footnote-icon {
display: inline-flex;
width: 16px;
height: 16px;
color: var(--color-primary-2);
}
.aeo-page-audit .aeo-audit-preview__footnote-icon svg {
width: 100%;
height: 100%;
}
/* =============================================================================
5. CUM FUNCȚIONEAZĂ — 4 pași cu săgeți dashed între ele
========================================================================== */
.aeo-page-audit .aeo-audit-how {
padding-top: var(--space-16);
padding-bottom: var(--space-16);
background-color: var(--color-surface);
}
.aeo-page-audit .aeo-audit-how > .container-aeo > .row.justify-content-center {
margin-bottom: var(--space-10);
}
.aeo-page-audit .aeo-audit-steps {
list-style: none;
padding-left: 0;
margin: 0;
}
.aeo-page-audit .aeo-audit-step-col {
position: relative;
}
/* Săgeți dashed între pași (desktop only) */
@media (min-width: 992px) {
.aeo-page-audit .aeo-audit-step-col:not(.aeo-audit-step-col--last)::after {
content: "";
position: absolute;
top: 60px; /* aliniat cu zona iconiței */
right: -16px;
width: 32px;
height: 12px;
background-image: linear-gradient(90deg, var(--color-primary) 50%, transparent 50%);
background-size: 8px 1.5px;
background-repeat: repeat-x;
background-position: center;
z-index: 1;
pointer-events: none;
}
/* Vârful săgeții — triunghi mic violet */
.aeo-page-audit .aeo-audit-step-col:not(.aeo-audit-step-col--last)::before {
content: "";
position: absolute;
top: 56px;
right: -14px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 6px solid var(--color-primary);
z-index: 2;
pointer-events: none;
}
}
.aeo-page-audit .aeo-audit-step {
height: 100%;
padding: var(--space-5);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.aeo-page-audit .aeo-audit-step__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.aeo-page-audit .aeo-audit-step__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: var(--color-surface-alt);
border-radius: var(--radius-xs);
color: var(--color-primary);
}
.aeo-page-audit .aeo-audit-step__icon svg {
width: 22px;
height: 22px;
}
.aeo-page-audit .aeo-audit-step__badge {
display: inline-block;
padding: var(--space-1) var(--space-3);
background-color: var(--color-surface-alt);
border-radius: var(--radius-full);
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: 0.04em;
color: var(--color-text-muted);
}
.aeo-page-audit .aeo-audit-step__title {
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
line-height: 1.3;
color: var(--color-text);
margin: 0 0 var(--space-3);
}
.aeo-page-audit .aeo-audit-step__text {
font-size: var(--fs-sm);
line-height: 1.55;
color: var(--color-text-soft);
margin: 0;
}
/* =============================================================================
6. CE PRIMEȘTI — 3 coloane × 2 rânduri (col-lg-4 în loc de col-lg-6)
========================================================================== */
.aeo-page-audit .aeo-audit-deliverables {
padding-top: var(--space-16);
padding-bottom: var(--space-16);
}
.aeo-page-audit .aeo-audit-deliverables > .container-aeo > .row.justify-content-center:first-child {
margin-bottom: var(--space-10);
}
.aeo-page-audit .aeo-audit-deliverable-grid {
margin-top: 0;
}
.aeo-page-audit .aeo-audit-deliverable {
height: 100%;
padding: var(--space-6);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
transition: border-color var(--transition-base),
transform var(--transition-fast);
}
.aeo-page-audit .aeo-audit-deliverable:hover {
border-color: var(--color-primary);
transform: translateY(-2px);
}
.aeo-page-audit .aeo-audit-deliverable__icon {
/* v0.5.4.1 fix: same as Context panel-icon — block-level flex pentru
a evita baseline shift în line-box când e first child de card block. */
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-bottom: var(--space-4);
background-color: var(--color-surface-alt);
border-radius: var(--radius-xs);
color: var(--color-primary);
}
.aeo-page-audit .aeo-audit-deliverable__icon svg {
width: 24px;
height: 24px;
}
.aeo-page-audit .aeo-audit-deliverable__title {
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
line-height: 1.3;
color: var(--color-text);
margin: 0 0 var(--space-3);
}
.aeo-page-audit .aeo-audit-deliverable__text {
font-size: var(--fs-sm);
line-height: 1.6;
color: var(--color-text-soft);
margin: 0;
}
.aeo-page-audit .aeo-audit-deliverables__footnote {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
margin: var(--space-8) 0 0;
font-size: var(--fs-sm);
color: var(--color-text-muted);
text-align: center;
}
.aeo-page-audit .aeo-audit-deliverables__footnote-icon {
display: inline-flex;
width: 16px;
height: 16px;
color: var(--color-primary-2);
}
.aeo-page-audit .aeo-audit-deliverables__footnote-icon svg {
width: 100%;
height: 100%;
}
/* =============================================================================
7. PENTRU CINE — list rows full-width cu icon container + chevron
========================================================================== */
.aeo-page-audit .aeo-audit-audience {
padding-top: var(--space-16);
padding-bottom: var(--space-16);
}
.aeo-page-audit .aeo-audit-audience > .container-aeo > .row.justify-content-center:first-child {
margin-bottom: var(--space-10);
}
.aeo-page-audit .aeo-audit-audience-rows {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.aeo-page-audit .aeo-audit-audience-row {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: var(--space-5);
align-items: center;
padding: var(--space-5) var(--space-6);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
transition: border-color var(--transition-base),
transform var(--transition-fast);
}
.aeo-page-audit .aeo-audit-audience-row:hover {
border-color: var(--color-primary);
transform: translateY(-1px);
}
.aeo-page-audit .aeo-audit-audience-row__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background-color: var(--color-surface-alt);
border-radius: var(--radius-xs);
color: var(--color-primary);
}
.aeo-page-audit .aeo-audit-audience-row__icon svg {
width: 28px;
height: 28px;
}
.aeo-page-audit .aeo-audit-audience-row__body {
min-width: 0;
}
.aeo-page-audit .aeo-audit-audience-row__title {
margin: 0 0 var(--space-2);
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
color: var(--color-text);
line-height: 1.3;
}
.aeo-page-audit .aeo-audit-audience-row__text {
margin: 0;
font-size: var(--fs-sm);
color: var(--color-text-soft);
line-height: 1.55;
}
.aeo-page-audit .aeo-audit-audience-row__chevron {
display: inline-flex;
width: 24px;
height: 24px;
color: var(--color-text-muted);
flex-shrink: 0;
}
.aeo-page-audit .aeo-audit-audience-row__chevron svg {
width: 100%;
height: 100%;
}
/* =============================================================================
8. CE NU PROMITEM — panel premium cu timeline vertical + quote mark
========================================================================== */
.aeo-page-audit .aeo-audit-disclaimer {
padding-top: var(--space-12);
padding-bottom: var(--space-12);
background-color: var(--color-surface);
}
.aeo-page-audit .aeo-audit-disclaimer__panel {
position: relative;
background-color: var(--color-surface-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-10) var(--space-8);
overflow: hidden;
}
.aeo-page-audit .aeo-audit-disclaimer__quote-mark {
position: absolute;
top: var(--space-6);
right: var(--space-6);
width: 56px;
height: 56px;
color: var(--color-primary);
opacity: 0.18;
pointer-events: none;
}
.aeo-page-audit .aeo-audit-disclaimer__quote-mark svg {
width: 100%;
height: 100%;
}
.aeo-page-audit .aeo-audit-disclaimer__eyebrow {
margin-bottom: var(--space-3);
}
.aeo-page-audit .aeo-audit-disclaimer__title {
font-family: var(--font-display);
font-size: var(--fs-3xl);
font-weight: var(--fw-semibold);
color: var(--color-text);
margin: 0 0 var(--space-7);
line-height: 1.2;
letter-spacing: -0.01em;
}
.aeo-page-audit .aeo-audit-disclaimer__timeline {
list-style: none;
padding: 0;
margin: 0 0 var(--space-6);
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-5);
}
/* Linia verticală timeline */
.aeo-page-audit .aeo-audit-disclaimer__timeline::before {
content: "";
position: absolute;
top: 12px;
bottom: 12px;
left: 11px;
width: 1px;
background: linear-gradient(180deg,
var(--color-border) 0%,
var(--color-accent) 50%,
var(--color-border) 100%);
opacity: 0.4;
pointer-events: none;
}
.aeo-page-audit .aeo-audit-disclaimer__timeline-item {
position: relative;
display: flex;
align-items: flex-start;
gap: var(--space-4);
}
.aeo-page-audit .aeo-audit-disclaimer__timeline-dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background-color: var(--color-surface);
border: 1px solid var(--color-accent);
border-radius: 50%;
color: var(--color-accent);
flex-shrink: 0;
z-index: 1;
}
.aeo-page-audit .aeo-audit-disclaimer__timeline-dot svg {
width: 16px;
height: 16px;
}
.aeo-page-audit .aeo-audit-disclaimer__timeline-text {
margin: 0;
font-size: var(--fs-sm);
line-height: 1.6;
color: var(--color-text-soft);
}
.aeo-page-audit .aeo-audit-disclaimer__note {
margin: 0;
padding-top: var(--space-5);
border-top: 1px solid var(--color-border-soft);
font-size: var(--fs-sm);
line-height: 1.65;
color: var(--color-text);
font-style: italic;
}
/* =============================================================================
9. FAQ — accordion /, zero JS
========================================================================== */
.aeo-page-audit .aeo-audit-faq {
padding-top: var(--space-16);
padding-bottom: var(--space-16);
background-color: var(--color-surface);
}
.aeo-page-audit .aeo-audit-faq > .container-aeo > .row.justify-content-center:first-child {
margin-bottom: var(--space-10);
}
.aeo-page-audit .aeo-audit-faq__list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.aeo-page-audit .aeo-audit-faq__item {
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
transition: border-color var(--transition-base),
box-shadow var(--transition-base);
}
.aeo-page-audit .aeo-audit-faq__item:hover {
border-color: var(--color-primary);
}
.aeo-page-audit .aeo-audit-faq__item[open] {
border-color: var(--color-primary);
box-shadow: 0 4px 14px rgba(123, 44, 255, 0.06);
}
/* Summary — întrebarea (click target) */
.aeo-page-audit .aeo-audit-faq__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-5) var(--space-6);
cursor: pointer;
font-family: var(--font-display);
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
color: var(--color-text);
line-height: 1.4;
list-style: none; /* hide native marker în browserele moderne */
}
/* Hide native marker — webkit + firefox */
.aeo-page-audit .aeo-audit-faq__question::-webkit-details-marker {
display: none;
}
.aeo-page-audit .aeo-audit-faq__question::marker {
content: "";
}
.aeo-page-audit .aeo-audit-faq__q-text {
flex: 1 1 auto;
min-width: 0;
}
.aeo-page-audit .aeo-audit-faq__q-indicator {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background-color: var(--color-surface-alt);
border-radius: var(--radius-xs);
color: var(--color-primary);
flex-shrink: 0;
transition: transform var(--transition-base),
background-color var(--transition-base);
}
.aeo-page-audit .aeo-audit-faq__q-indicator svg {
width: 18px;
height: 18px;
}
/* Rotire chevron la open */
.aeo-page-audit .aeo-audit-faq__item[open] .aeo-audit-faq__q-indicator {
transform: rotate(180deg);
background-color: var(--color-surface);
}
/* Focus visibility pe summary */
.aeo-page-audit .aeo-audit-faq__question:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: -2px;
}
/* Answer body */
.aeo-page-audit .aeo-audit-faq__answer {
padding: 0 var(--space-6) var(--space-5);
}
.aeo-page-audit .aeo-audit-faq__answer p {
margin: 0;
font-size: var(--fs-sm);
color: var(--color-text-soft);
line-height: 1.65;
}
/* Reduce motion — dezactivează rotire indicator */
@media (prefers-reduced-motion: reduce) {
.aeo-page-audit .aeo-audit-faq__q-indicator {
transition: none;
}
.aeo-page-audit .aeo-audit-faq__item[open] .aeo-audit-faq__q-indicator {
transform: none;
}
}
/* Mobile — padding mai mic */
@media (max-width: 767px) {
.aeo-page-audit .aeo-audit-faq__question {
padding: var(--space-4) var(--space-5);
font-size: var(--fs-base);
gap: var(--space-3);
}
.aeo-page-audit .aeo-audit-faq__answer {
padding: 0 var(--space-5) var(--space-4);
}
.aeo-page-audit .aeo-audit-faq__q-indicator {
width: 28px;
height: 28px;
}
}
/* =============================================================================
10. CTA FINAL — panel premium cu 2 butoane + dots + sparkles + orb
========================================================================== */
.aeo-page-audit .aeo-audit-cta-final {
padding-top: var(--space-12);
padding-bottom: var(--space-16);
background-color: var(--color-surface);
}
.aeo-page-audit .aeo-audit-cta-final__inner {
position: relative;
overflow: hidden;
padding: var(--space-12) var(--space-8);
background: linear-gradient(135deg,
#F4ECF8 0%,
#FBF8FF 50%,
#FFF1F8 100%);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
text-align: center;
}
.aeo-page-audit .aeo-audit-cta-final__dots-left {
position: absolute;
top: 50%;
left: -60px;
transform: translateY(-50%);
width: 240px;
height: 160px;
opacity: 0.6;
pointer-events: none;
z-index: 0;
}
.aeo-page-audit .aeo-audit-cta-final__dots-left img {
width: 100%;
height: 100%;
display: block;
}
.aeo-page-audit .aeo-audit-cta-final__sparkles-right {
position: absolute;
top: -40px;
right: -60px;
width: 280px;
height: 280px;
opacity: 0.55;
pointer-events: none;
z-index: 0;
}
.aeo-page-audit .aeo-audit-cta-final__sparkles-right img {
width: 100%;
height: 100%;
display: block;
}
.aeo-page-audit .aeo-audit-cta-final__orb {
position: absolute;
bottom: -200px;
right: -160px;
width: 480px;
height: 480px;
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
.aeo-page-audit .aeo-audit-cta-final__orb img {
width: 100%;
height: 100%;
display: block;
}
.aeo-page-audit .aeo-audit-cta-final__content {
position: relative;
z-index: 1;
max-width: 720px;
margin: 0 auto;
}
.aeo-page-audit .aeo-audit-cta-final__title {
font-family: var(--font-display);
font-size: var(--fs-3xl);
font-weight: var(--fw-semibold);
line-height: 1.2;
margin: 0 0 var(--space-4);
color: var(--color-text);
letter-spacing: -0.01em;
}
.aeo-page-audit .aeo-audit-cta-final__text {
font-size: var(--fs-md);
line-height: 1.6;
color: var(--color-text-soft);
margin: 0 0 var(--space-7);
}
.aeo-page-audit .aeo-audit-cta-final__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.aeo-page-audit .aeo-audit-cta-final__note {
margin: 0;
font-size: var(--fs-xs);
color: var(--color-text-muted);
line-height: 1.5;
}
/* =============================================================================
FOOTER PREMIUM in-template
========================================================================== */
.aeo-page-audit-footer {
background-color: #1A0B2E; /* navy violet adânc, scoped local pe footer-ul audit */
color: #E5DDF4;
padding-top: var(--space-12);
padding-bottom: var(--space-8);
position: relative;
overflow: hidden;
}
.aeo-page-audit-footer::after {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 1200px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(123, 44, 255, 0.4) 30%, rgba(215, 53, 145, 0.4) 70%, transparent);
transform: translateX(-50%);
}
.aeo-page-audit-footer__top {
margin-bottom: var(--space-8);
}
.aeo-page-audit-footer__brand {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.aeo-page-audit-footer__logo {
display: inline-flex;
align-items: center;
gap: var(--space-3);
text-decoration: none;
color: #FFFFFF;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
}
.aeo-page-audit-footer__logo-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: linear-gradient(135deg, #7B2CFF 0%, #D73591 100%);
border-radius: var(--radius-xs);
color: #FFFFFF;
font-size: var(--fs-md);
font-weight: var(--fw-bold);
letter-spacing: -0.02em;
}
.aeo-page-audit-footer__logo-text {
font-size: var(--fs-lg);
letter-spacing: -0.01em;
}
.aeo-page-audit-footer__logo-tld {
font-size: var(--fs-sm);
color: #A89CBF;
font-weight: var(--fw-regular);
margin-left: 2px;
}
.aeo-page-audit-footer__tagline {
margin: 0;
font-size: var(--fs-sm);
color: #A89CBF;
line-height: 1.5;
max-width: 320px;
}
.aeo-page-audit-footer__social {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: var(--space-3);
}
.aeo-page-audit-footer__social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background-color: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-xs);
color: #A89CBF;
transition: color var(--transition-base),
border-color var(--transition-base);
}
.aeo-page-audit-footer__social a:hover,
.aeo-page-audit-footer__social a:focus-visible {
color: #FFFFFF;
border-color: rgba(215, 53, 145, 0.5);
}
.aeo-page-audit-footer__social a svg {
width: 18px;
height: 18px;
}
.aeo-page-audit-footer__col-title {
margin: 0 0 var(--space-4);
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: #FFFFFF;
}
.aeo-page-audit-footer__col-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.aeo-page-audit-footer__col-list a {
color: #A89CBF;
text-decoration: none;
font-size: var(--fs-sm);
line-height: 1.5;
transition: color var(--transition-base);
}
.aeo-page-audit-footer__col-list a:hover,
.aeo-page-audit-footer__col-list a:focus-visible {
color: #FFFFFF;
}
.aeo-page-audit-footer__contact-row {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.aeo-page-audit-footer__contact-icon {
display: inline-flex;
width: 16px;
height: 16px;
color: #7B2CFF;
}
.aeo-page-audit-footer__contact-icon svg {
width: 100%;
height: 100%;
}
.aeo-page-audit-footer__bottom {
padding-top: var(--space-6);
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.aeo-page-audit-footer__copy {
margin: 0;
font-size: var(--fs-xs);
color: #7E7290;
}
/* =============================================================================
Conținut adițional editor (opțional)
========================================================================== */
.aeo-page-audit .aeo-audit-extra {
padding-top: var(--space-12);
padding-bottom: var(--space-12);
}
.aeo-page-audit .aeo-audit-extra .entry-content > *:first-child {
margin-top: 0;
}
/* =============================================================================
RESPONSIVE — adjustments tablet / mobile
========================================================================== */
@media (max-width: 1199px) {
.aeo-page-audit .aeo-audit-hero__title {
/* v0.5.4: 56px desktop intermediar, lh 1.04 */
font-size: 3.5rem;
line-height: 1.04;
}
}
@media (max-width: 991px) {
.aeo-page-audit .aeo-audit-hero {
padding-top: var(--space-8);
padding-bottom: var(--space-12);
}
.aeo-page-audit .aeo-audit-hero__title {
/* v0.5.4: 48px tablet, lh 1.04 */
font-size: 3rem;
line-height: 1.04;
}
.aeo-page-audit .aeo-audit-context__visual {
min-height: 280px;
}
.aeo-page-audit .aeo-audit-context__panel {
max-width: none;
}
}
@media (max-width: 767px) {
.aeo-page-audit .aeo-audit-hero__title {
/* v0.5.4: 38px mobile, lh 1.06 */
font-size: 2.375rem;
line-height: 1.06;
}
.aeo-page-audit .aeo-audit-hero__lead {
font-size: var(--fs-base);
}
.aeo-page-audit .aeo-audit-hero__actions {
flex-direction: column;
align-items: stretch;
}
.aeo-page-audit .aeo-audit-hero__actions .aeo-btn {
width: 100%;
justify-content: center;
}
.aeo-page-audit .aeo-audit-hero__chips {
gap: var(--space-3);
}
.aeo-page-audit .aeo-audit-hero-panel {
padding: var(--space-5);
}
.aeo-page-audit .aeo-audit-hero-panel__score-block {
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
}
.aeo-page-audit .aeo-audit-hero-panel__score-ring {
align-self: center;
}
.aeo-page-audit .aeo-audit-hero-panel__row {
grid-template-columns: 24px minmax(0, 1fr) 44px 20px;
}
.aeo-page-audit .aeo-audit-hero-panel__row > .aeo-audit-hero-panel__row-bar {
display: none; /* hide progress bar pe mobil — păstrează value + status */
}
.aeo-page-audit .aeo-audit-hero-panel__row-value {
text-align: right;
}
.aeo-page-audit .aeo-audit-hero__orb {
top: -120px;
right: -180px;
width: 480px;
height: 480px;
}
/* Preview panel mobile */
.aeo-page-audit .aeo-audit-preview__tabs {
padding: var(--space-4) var(--space-4) 0;
gap: var(--space-2);
overflow-x: auto;
flex-wrap: nowrap;
}
.aeo-page-audit .aeo-audit-preview__tab {
white-space: nowrap;
flex-shrink: 0;
}
.aeo-page-audit .aeo-audit-preview__body {
padding: var(--space-3) var(--space-4);
}
.aeo-page-audit .aeo-audit-preview__row {
grid-template-columns: 1fr;
gap: var(--space-3);
padding: var(--space-4) 0;
}
.aeo-page-audit .aeo-audit-preview__row-status {
justify-content: flex-start;
}
/* Audience rows mobile */
.aeo-page-audit .aeo-audit-audience-row {
grid-template-columns: 48px 1fr;
padding: var(--space-4);
gap: var(--space-4);
}
.aeo-page-audit .aeo-audit-audience-row__icon {
width: 48px;
height: 48px;
}
.aeo-page-audit .aeo-audit-audience-row__icon svg {
width: 24px;
height: 24px;
}
.aeo-page-audit .aeo-audit-audience-row__chevron {
display: none;
}
/* Disclaimer mobile */
.aeo-page-audit .aeo-audit-disclaimer__panel {
padding: var(--space-7) var(--space-5);
}
.aeo-page-audit .aeo-audit-disclaimer__title {
font-size: var(--fs-2xl);
}
.aeo-page-audit .aeo-audit-disclaimer__quote-mark {
width: 40px;
height: 40px;
}
/* CTA final mobile */
.aeo-page-audit .aeo-audit-cta-final__inner {
padding: var(--space-8) var(--space-5);
}
.aeo-page-audit .aeo-audit-cta-final__title {
font-size: var(--fs-xl);
}
.aeo-page-audit .aeo-audit-cta-final__actions {
flex-direction: column;
align-items: stretch;
}
.aeo-page-audit .aeo-audit-cta-final__actions .aeo-btn {
width: 100%;
justify-content: center;
}
}
/* Reduce motion — dezactivează hover translate */
@media (prefers-reduced-motion: reduce) {
.aeo-page-audit .aeo-audit-check:hover,
.aeo-page-audit .aeo-audit-deliverable:hover,
.aeo-page-audit .aeo-audit-audience-row:hover {
transform: none;
}
}
/* =============================================================================
GLOSSARY ARCHIVE — Premium Redesign (v0.5.0)
Pagina /glosar/ — redesign premium pe date reale WordPress.
Scope STRICT pe `.aeo-glossary-archive`. Nu afectează single-glossary,
homepage, audit page, taxonomy template.
Reutilizează tokens existente din tema aeo-fortin. Unde un token poate lipsi
în anumite build-uri, am folosit fallback explicit prin var(--token, fallback).
Asset-uri linked din /assets/img/glossary/:
- motif-ai-node-map.svg (hero visual)
- motif-soft-orb.svg, motif-sparkles.svg, motif-dot-grid.svg (decorative)
- icon-*.svg (badge-uri categorii, gradient propriu)
Componente reutilizate (stilizate aici prin selectori descendenți scoped):
- .aeo-glossary-search, .aeo-glossary-filters, .aeo-glossary-az
Iteration:
- v0.5.0 : redesign premium peste infrastructura funcțională v0.3.8
========================================================================== */
/* ---- Tokens fallback locali (siguranță dacă tema nu îi expune toți) ------- */
.aeo-glossary-archive {
--gl-violet: var(--aeo-violet, #7A35FF);
--gl-magenta: var(--aeo-magenta, #FF4FA3);
--gl-violet-soft: var(--aeo-violet-soft, #F4ECFF);
--gl-surface: var(--aeo-surface, #FFFFFF);
--gl-surface-alt: var(--aeo-surface-alt, #FBFAFF);
--gl-border: var(--aeo-border, #E9DDFF);
--gl-border-soft: var(--aeo-border-soft, #F0EAFA);
--gl-text: var(--aeo-text, #171427);
--gl-text-soft: var(--aeo-text-soft, #4E4568);
--gl-text-muted: var(--aeo-text-muted, #8A7FA6);
--gl-radius: 4px;
--gl-radius-md: 10px;
--gl-radius-lg: 16px;
background-color: var(--gl-surface);
}
/* Alternanță secțiuni lavender subtil */
.aeo-glossary-archive .aeo-glossary-archive-popular,
.aeo-glossary-archive .aeo-glossary-archive-how {
background-color: var(--gl-surface-alt);
}
/* =============================================================================
1. HERO 2-col
========================================================================== */
.aeo-glossary-archive-hero {
position: relative;
overflow: hidden;
padding-block: 48px 56px;
background-color: var(--gl-surface);
}
@media (min-width: 992px) {
.aeo-glossary-archive-hero {
padding-block: 64px 72px;
}
}
.aeo-glossary-archive-hero__orb {
position: absolute;
top: -220px;
right: -200px;
width: 640px;
height: 640px;
opacity: 0.6;
pointer-events: none;
z-index: 0;
}
.aeo-glossary-archive-hero__orb img {
width: 100%;
height: 100%;
display: block;
}
.aeo-glossary-archive-hero__sparkles {
position: absolute;
bottom: -40px;
left: -30px;
width: 220px;
height: 220px;
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
.aeo-glossary-archive-hero__sparkles img {
width: 100%;
height: 100%;
display: block;
}
.aeo-glossary-archive-hero > .container-aeo {
position: relative;
z-index: 1;
}
.aeo-glossary-archive-hero__eyebrow {
margin: 16px 0 12px;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gl-violet);
}
.aeo-glossary-archive-hero__title {
margin: 0;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 40px;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--gl-text);
}
@media (min-width: 768px) {
.aeo-glossary-archive-hero__title {
font-size: 52px;
}
}
@media (min-width: 1200px) {
.aeo-glossary-archive-hero__title {
font-size: 60px;
}
}
.aeo-glossary-archive-hero__lead {
margin: 20px 0 0;
font-size: 17px;
line-height: 1.6;
color: var(--gl-text-soft);
max-width: 36em;
}
/* Hero visual — node-map într-un panel premium */
.aeo-glossary-archive-hero__visual {
position: relative;
}
.aeo-glossary-archive-hero__nodemap {
position: relative;
z-index: 1;
border-radius: var(--gl-radius-lg);
overflow: hidden;
}
.aeo-glossary-archive-hero__nodemap img {
width: 100%;
height: auto;
display: block;
}
/* =============================================================================
2. CONTROLS — search + categorii + A-Z (server-side)
========================================================================== */
.aeo-glossary-archive-controls {
padding-block: 0 40px;
background-color: var(--gl-surface);
}
@media (min-width: 992px) {
.aeo-glossary-archive-controls {
padding-block: 0 48px;
}
}
.aeo-glossary-archive-controls__search {
margin-bottom: 28px;
}
/* Search bar mare — override scoped pe componenta existentă */
.aeo-glossary-archive-controls__search .aeo-glossary-search {
display: flex;
flex-direction: row;
gap: 12px;
max-width: none;
}
.aeo-glossary-archive-controls__search .aeo-glossary-search__input {
flex: 1 1 auto;
padding: 18px 20px;
border: 1px solid var(--gl-border);
border-radius: var(--gl-radius-md);
font-size: 16px;
background-color: var(--gl-surface);
color: var(--gl-text);
}
.aeo-glossary-archive-controls__search .aeo-glossary-search__input:focus {
outline: 2px solid var(--gl-violet);
outline-offset: -1px;
border-color: var(--gl-violet);
}
.aeo-glossary-archive-controls__search .aeo-glossary-search__submit {
flex: 0 0 auto;
padding: 18px 32px;
background: linear-gradient(135deg, #6D32FF 0%, #FF4FA3 100%);
border: none;
border-radius: var(--gl-radius-md);
color: #fff;
font-family: var(--font-display);
font-size: 15px;
font-weight: var(--fw-semibold, 600);
cursor: pointer;
transition: box-shadow 0.18s ease, transform 0.12s ease;
box-shadow: 0 4px 14px rgba(123, 44, 255, 0.18);
}
.aeo-glossary-archive-controls__search .aeo-glossary-search__submit:hover,
.aeo-glossary-archive-controls__search .aeo-glossary-search__submit:focus-visible {
box-shadow: 0 6px 20px rgba(123, 44, 255, 0.32);
transform: translateY(-1px);
}
/* Categorii pills */
.aeo-glossary-archive-controls__filters {
margin-bottom: 24px;
}
.aeo-glossary-archive-controls__filters .aeo-glossary-filters {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}
.aeo-glossary-archive-controls__filters .aeo-glossary-filters__label {
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gl-text-muted);
}
.aeo-glossary-archive-controls__filters .aeo-glossary-filters__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.aeo-glossary-archive-controls__filters .aeo-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
background-color: var(--gl-surface);
border: 1px solid var(--gl-border);
border-radius: 999px;
font-size: 14px;
font-weight: var(--fw-medium, 500);
color: var(--gl-text-soft);
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.aeo-glossary-archive-controls__filters .aeo-chip:hover {
border-color: var(--gl-violet);
color: var(--gl-violet);
}
.aeo-glossary-archive-controls__filters .aeo-chip.is-active {
background: linear-gradient(135deg, #6D32FF 0%, #FF4FA3 100%);
border-color: transparent;
color: #fff;
}
.aeo-glossary-archive-controls__filters .aeo-chip__count {
font-size: 12px;
opacity: 0.75;
}
/* A-Z */
.aeo-glossary-archive-controls__az .aeo-glossary-az {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}
.aeo-glossary-archive-controls__az .aeo-glossary-az__label {
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gl-text-muted);
}
.aeo-glossary-archive-controls__az .aeo-glossary-az__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.aeo-glossary-archive-controls__az .aeo-glossary-az__letter {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 8px;
background-color: var(--gl-surface);
border: 1px solid var(--gl-border);
border-radius: var(--gl-radius);
font-family: var(--font-display);
font-size: 14px;
font-weight: var(--fw-medium, 500);
color: var(--gl-text-soft);
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.aeo-glossary-archive-controls__az .aeo-glossary-az__letter:hover {
border-color: var(--gl-violet);
color: var(--gl-violet);
}
.aeo-glossary-archive-controls__az .aeo-glossary-az__letter.is-active {
background-color: var(--gl-violet-soft);
border-color: var(--gl-violet);
color: var(--gl-violet);
font-weight: var(--fw-semibold, 600);
}
.aeo-glossary-archive-controls__az .aeo-glossary-az__letter.is-disabled {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
/* =============================================================================
3. TERMENI POPULARI
========================================================================== */
.aeo-glossary-archive-popular {
padding-block: 48px;
}
.aeo-glossary-archive-popular__head {
margin-bottom: 28px;
}
.aeo-glossary-archive-popular__title,
.aeo-glossary-archive-nav__title,
.aeo-glossary-archive-how__title,
.aeo-glossary-archive-faq__title {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 24px;
letter-spacing: -0.01em;
color: var(--gl-text);
}
.aeo-glossary-archive-popular__title-icon,
.aeo-glossary-archive-nav__title-icon,
.aeo-glossary-archive-how__title-icon,
.aeo-glossary-archive-faq__title-icon {
display: inline-flex;
width: 22px;
height: 22px;
color: var(--gl-violet);
}
.aeo-glossary-archive-popular__title-icon svg,
.aeo-glossary-archive-nav__title-icon svg,
.aeo-glossary-archive-how__title-icon svg,
.aeo-glossary-archive-faq__title-icon svg {
width: 100%;
height: 100%;
}
/* Popular card */
.aeo-glossary-archive .aeo-glossary-popular-card {
height: 100%;
}
.aeo-glossary-archive .aeo-glossary-popular-card__link {
display: flex;
flex-direction: column;
height: 100%;
padding: 24px;
background-color: var(--gl-surface);
border: 1px solid var(--gl-border);
border-radius: var(--gl-radius-md);
text-decoration: none;
transition: border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.aeo-glossary-archive .aeo-glossary-popular-card__link:hover {
border-color: var(--gl-violet);
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(123, 44, 255, 0.08);
}
.aeo-glossary-archive .aeo-glossary-popular-card__icon {
display: block;
width: 56px;
height: 56px;
margin-bottom: 16px;
}
.aeo-glossary-archive .aeo-glossary-popular-card__icon img {
width: 100%;
height: 100%;
display: block;
}
.aeo-glossary-archive .aeo-glossary-popular-card__title {
margin: 0 0 4px;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 20px;
color: var(--gl-text);
}
.aeo-glossary-archive .aeo-glossary-popular-card__question {
margin: 0 0 12px;
font-size: 13px;
color: var(--gl-text-muted);
}
.aeo-glossary-archive .aeo-glossary-popular-card__excerpt {
margin: 0 0 16px;
font-size: 14px;
line-height: 1.6;
color: var(--gl-text-soft);
}
.aeo-glossary-archive .aeo-glossary-popular-card__category {
display: inline-block;
margin-top: auto;
padding: 4px 12px;
background-color: var(--gl-violet-soft);
border-radius: 999px;
font-size: 11px;
font-weight: var(--fw-semibold, 600);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--gl-violet);
}
/* =============================================================================
4. LISTĂ ALFABETICĂ — group bar + rows premium
========================================================================== */
.aeo-glossary-archive-list {
padding-block: 16px 56px;
}
@media (min-width: 992px) {
.aeo-glossary-archive-list {
padding-block: 24px 72px;
}
}
.aeo-glossary-archive-group {
margin-bottom: 40px;
}
.aeo-glossary-archive-group:last-child {
margin-bottom: 0;
}
.aeo-glossary-archive-group__bar {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
padding-bottom: 8px;
}
.aeo-glossary-archive-group__heading {
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 28px;
line-height: 1;
color: var(--gl-violet);
}
.aeo-glossary-archive-group__count {
padding: 4px 12px;
background-color: var(--gl-surface-alt);
border: 1px solid var(--gl-border-soft);
border-radius: 999px;
font-size: 12px;
color: var(--gl-text-muted);
}
/* Linia după group bar */
.aeo-glossary-archive-group__bar::after {
content: "";
flex: 1 1 auto;
height: 1px;
background-color: var(--gl-border-soft);
}
.aeo-glossary-archive-group__rows {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Term row premium */
.aeo-glossary-archive .aeo-glossary-term-row {
margin: 0;
}
.aeo-glossary-archive .aeo-glossary-term-row__link {
display: grid;
grid-template-columns: 56px minmax(0, 1fr) auto auto;
gap: 20px;
align-items: center;
padding: 20px 24px;
background-color: var(--gl-surface);
border: 1px solid var(--gl-border);
border-radius: var(--gl-radius-md);
text-decoration: none;
transition: border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.aeo-glossary-archive .aeo-glossary-term-row__link:hover {
border-color: var(--gl-violet);
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(123, 44, 255, 0.07);
}
.aeo-glossary-archive .aeo-glossary-term-row__icon {
display: block;
width: 56px;
height: 56px;
}
.aeo-glossary-archive .aeo-glossary-term-row__icon img {
width: 100%;
height: 100%;
display: block;
}
.aeo-glossary-archive .aeo-glossary-term-row__body {
min-width: 0;
}
.aeo-glossary-archive .aeo-glossary-term-row__head {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 6px;
}
.aeo-glossary-archive .aeo-glossary-term-row__title {
margin: 0;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 18px;
color: var(--gl-text);
}
.aeo-glossary-archive .aeo-glossary-term-row__question {
font-size: 13px;
color: var(--gl-text-muted);
}
.aeo-glossary-archive .aeo-glossary-term-row__excerpt {
display: block;
font-size: 14px;
line-height: 1.55;
color: var(--gl-text-soft);
}
.aeo-glossary-archive .aeo-glossary-term-row__category {
padding: 4px 12px;
background-color: var(--gl-violet-soft);
border-radius: 999px;
font-size: 11px;
font-weight: var(--fw-semibold, 600);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--gl-violet);
white-space: nowrap;
}
.aeo-glossary-archive .aeo-glossary-term-row__chevron {
display: inline-flex;
width: 24px;
height: 24px;
color: var(--gl-text-muted);
}
.aeo-glossary-archive .aeo-glossary-term-row__chevron svg {
width: 100%;
height: 100%;
}
/* =============================================================================
5. NAVIGHEAZĂ RAPID — carduri categorii
========================================================================== */
.aeo-glossary-archive-nav {
padding-block: 48px;
background-color: var(--gl-surface);
}
.aeo-glossary-archive-nav__head {
margin-bottom: 28px;
}
.aeo-glossary-archive-nav__lead,
.aeo-glossary-archive-how__lead,
.aeo-glossary-archive-faq__lead {
margin: 12px 0 0;
font-size: 16px;
line-height: 1.6;
color: var(--gl-text-soft);
}
.aeo-glossary-archive .aeo-glossary-nav-card {
height: 100%;
}
.aeo-glossary-archive .aeo-glossary-nav-card__link {
display: grid;
grid-template-columns: 64px minmax(0, 1fr) auto;
gap: 18px;
align-items: center;
height: 100%;
padding: 24px;
background-color: var(--gl-surface);
border: 1px solid var(--gl-border);
border-radius: var(--gl-radius-md);
text-decoration: none;
transition: border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.aeo-glossary-archive .aeo-glossary-nav-card__link:hover {
border-color: var(--gl-violet);
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(123, 44, 255, 0.08);
}
.aeo-glossary-archive .aeo-glossary-nav-card__icon {
display: block;
width: 64px;
height: 64px;
}
.aeo-glossary-archive .aeo-glossary-nav-card__icon img {
width: 100%;
height: 100%;
display: block;
}
.aeo-glossary-archive .aeo-glossary-nav-card__body {
min-width: 0;
}
.aeo-glossary-archive .aeo-glossary-nav-card__title {
margin: 0 0 4px;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 20px;
color: var(--gl-text);
}
.aeo-glossary-archive .aeo-glossary-nav-card__text {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--gl-text-soft);
}
.aeo-glossary-archive .aeo-glossary-nav-card__arrow {
display: inline-flex;
width: 24px;
height: 24px;
color: var(--gl-violet);
}
.aeo-glossary-archive .aeo-glossary-nav-card__arrow svg {
width: 100%;
height: 100%;
}
/* =============================================================================
6. CUM FOLOSEȘTI GLOSARUL — 4 pași cu flow
========================================================================== */
.aeo-glossary-archive-how {
padding-block: 48px;
}
.aeo-glossary-archive-how__head {
margin-bottom: 28px;
}
.aeo-glossary-archive-how__steps {
list-style: none;
padding-left: 0;
margin: 0;
}
.aeo-glossary-archive .aeo-glossary-how-step-col {
position: relative;
}
/* Flow dashed între pași (desktop) */
@media (min-width: 992px) {
.aeo-glossary-archive .aeo-glossary-how-step-col:not(.aeo-glossary-how-step-col--last)::after {
content: "";
position: absolute;
top: 44px;
right: -16px;
width: 32px;
height: 0;
border-top: 1.5px dashed var(--gl-border);
z-index: 1;
pointer-events: none;
}
}
.aeo-glossary-archive .aeo-glossary-how-step {
position: relative;
height: 100%;
padding: 24px;
background-color: var(--gl-surface);
border: 1px solid var(--gl-border);
border-radius: var(--gl-radius-md);
}
.aeo-glossary-archive .aeo-glossary-how-step__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
margin-bottom: 14px;
background-color: var(--gl-violet-soft);
border-radius: var(--gl-radius);
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 13px;
color: var(--gl-violet);
}
.aeo-glossary-archive .aeo-glossary-how-step__icon {
display: inline-flex;
width: 24px;
height: 24px;
margin-left: 8px;
color: var(--gl-violet);
vertical-align: middle;
}
.aeo-glossary-archive .aeo-glossary-how-step__icon svg {
width: 100%;
height: 100%;
}
.aeo-glossary-archive .aeo-glossary-how-step__title {
margin: 0 0 8px;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 17px;
color: var(--gl-text);
}
.aeo-glossary-archive .aeo-glossary-how-step__text {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--gl-text-soft);
}
/* =============================================================================
7. FAQ — accordion
========================================================================== */
.aeo-glossary-archive-faq {
padding-block: 48px 56px;
background-color: var(--gl-surface);
}
.aeo-glossary-archive-faq__head {
margin-bottom: 28px;
text-align: center;
}
.aeo-glossary-archive-faq__title {
justify-content: center;
}
.aeo-glossary-archive-faq__list {
display: flex;
flex-direction: column;
gap: 12px;
}
.aeo-glossary-archive-faq__item {
background-color: var(--gl-surface);
border: 1px solid var(--gl-border);
border-radius: var(--gl-radius-md);
overflow: hidden;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.aeo-glossary-archive-faq__item:hover {
border-color: var(--gl-violet);
}
.aeo-glossary-archive-faq__item[open] {
border-color: var(--gl-violet);
box-shadow: 0 4px 14px rgba(123, 44, 255, 0.06);
}
.aeo-glossary-archive-faq__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 24px;
cursor: pointer;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 16px;
color: var(--gl-text);
list-style: none;
}
.aeo-glossary-archive-faq__q::-webkit-details-marker {
display: none;
}
.aeo-glossary-archive-faq__q::marker {
content: "";
}
.aeo-glossary-archive-faq__q-text {
flex: 1 1 auto;
min-width: 0;
}
.aeo-glossary-archive-faq__q-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background-color: var(--gl-violet-soft);
border-radius: var(--gl-radius);
color: var(--gl-violet);
flex-shrink: 0;
transition: transform 0.18s ease;
}
.aeo-glossary-archive-faq__q-icon svg {
width: 18px;
height: 18px;
}
.aeo-glossary-archive-faq__item[open] .aeo-glossary-archive-faq__q-icon {
transform: rotate(180deg);
}
.aeo-glossary-archive-faq__q:focus-visible {
outline: 2px solid var(--gl-violet);
outline-offset: -2px;
}
.aeo-glossary-archive-faq__a {
padding: 0 24px 18px;
}
.aeo-glossary-archive-faq__a p {
margin: 0;
font-size: 15px;
line-height: 1.65;
color: var(--gl-text-soft);
}
/* =============================================================================
8. CTA — padding wrapper (componenta cta-block aduce stilul intern)
========================================================================== */
.aeo-glossary-archive-cta {
padding-block: 32px 64px;
background-color: var(--gl-surface);
}
/* =============================================================================
RESPONSIVE — mobile adjustments
========================================================================== */
@media (max-width: 991px) {
.aeo-glossary-archive-hero__orb {
top: -140px;
right: -160px;
width: 460px;
height: 460px;
}
}
@media (max-width: 767px) {
.aeo-glossary-archive-hero__title {
font-size: 34px;
}
/* Search vertical pe mobil */
.aeo-glossary-archive-controls__search .aeo-glossary-search {
flex-direction: column;
}
.aeo-glossary-archive-controls__search .aeo-glossary-search__submit {
width: 100%;
}
/* Term row — comprimă pe mobil: ascunde chevron, category sub body */
.aeo-glossary-archive .aeo-glossary-term-row__link {
grid-template-columns: 48px minmax(0, 1fr);
gap: 14px;
padding: 16px;
}
.aeo-glossary-archive .aeo-glossary-term-row__icon {
width: 48px;
height: 48px;
}
.aeo-glossary-archive .aeo-glossary-term-row__category {
grid-column: 2;
justify-self: start;
margin-top: 8px;
}
.aeo-glossary-archive .aeo-glossary-term-row__chevron {
display: none;
}
/* Nav card — ascunde arrow pe mobil */
.aeo-glossary-archive .aeo-glossary-nav-card__link {
grid-template-columns: 56px minmax(0, 1fr);
gap: 14px;
}
.aeo-glossary-archive .aeo-glossary-nav-card__arrow {
display: none;
}
.aeo-glossary-archive-faq__q {
padding: 16px 18px;
font-size: 15px;
}
.aeo-glossary-archive-faq__a {
padding: 0 18px 16px;
}
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
.aeo-glossary-archive .aeo-glossary-popular-card__link:hover,
.aeo-glossary-archive .aeo-glossary-nav-card__link:hover,
.aeo-glossary-archive .aeo-glossary-term-row__link:hover {
transform: none;
}
.aeo-glossary-archive-faq__q-icon {
transition: none;
}
.aeo-glossary-archive-faq__item[open] .aeo-glossary-archive-faq__q-icon {
transform: none;
}
}
/* =============================================================================
v0.5.1 — REFINEMENTS 1:1 cu mockup-ul
Ajustări vizuale după comparație directă cu design-ul. Doar CSS, scoped.
========================================================================== */
/* ---- 1 + 2. HERO: orb mai prezent + node-map în panel cu glow ------------- */
.aeo-glossary-archive .aeo-glossary-archive-hero__orb {
top: -160px;
right: -120px;
width: 720px;
height: 720px;
opacity: 0.85;
}
.aeo-glossary-archive .aeo-glossary-archive-hero__sparkles {
opacity: 0.7;
}
/* Node-map: panel premium cu fundal lavender-glass + glow violet difuz.
SVG-ul are deja un rect alb propriu; panel-ul adaugă straturile din jur. */
.aeo-glossary-archive .aeo-glossary-archive-hero__nodemap {
position: relative;
padding: 18px;
background: linear-gradient(135deg, rgba(247, 242, 255, 0.9) 0%, rgba(255, 244, 251, 0.85) 100%);
border: 1px solid var(--gl-border-soft);
border-radius: var(--gl-radius-lg);
box-shadow:
0 24px 60px rgba(123, 44, 255, 0.16),
0 4px 16px rgba(123, 44, 255, 0.08);
}
/* Glow violet în spatele panel-ului */
.aeo-glossary-archive .aeo-glossary-archive-hero__nodemap::before {
content: "";
position: absolute;
inset: -30px -30px -10px -30px;
background: radial-gradient(60% 60% at 70% 40%, rgba(154, 77, 255, 0.22) 0%, rgba(154, 77, 255, 0) 70%);
z-index: -1;
pointer-events: none;
}
/* ---- 3. TERMENI POPULARI: chevron sus-dreapta ---------------------------- */
.aeo-glossary-archive .aeo-glossary-popular-card__link {
position: relative;
}
.aeo-glossary-archive .aeo-glossary-popular-card__chevron {
position: absolute;
top: 24px;
right: 24px;
display: inline-flex;
width: 22px;
height: 22px;
color: var(--gl-text-muted);
transition: color 0.15s ease, transform 0.15s ease;
}
.aeo-glossary-archive .aeo-glossary-popular-card__chevron svg {
width: 100%;
height: 100%;
}
.aeo-glossary-archive .aeo-glossary-popular-card__link:hover .aeo-glossary-popular-card__chevron {
color: var(--gl-violet);
transform: translateX(2px);
}
/* Lasă loc titlului să nu treacă peste chevron */
.aeo-glossary-archive .aeo-glossary-popular-card__title {
padding-right: 28px;
}
/* ---- 4. CUM FOLOSEȘTI: num sus, iconiță pe rând separat ------------------- */
.aeo-glossary-archive .aeo-glossary-how-step__icon {
display: flex;
width: 40px;
height: 40px;
margin-left: 0;
margin-bottom: 16px;
align-items: center;
justify-content: center;
color: var(--gl-violet);
}
.aeo-glossary-archive .aeo-glossary-how-step__icon svg {
width: 24px;
height: 24px;
}
/* Numărul rămâne sus, fără iconiță lângă el */
.aeo-glossary-archive .aeo-glossary-how-step__num {
margin-bottom: 8px;
}
/* ---- 5. CTA PREMIUM: panel gradient + 2 butoane + orb -------------------- */
.aeo-glossary-archive .aeo-glossary-archive-cta {
padding-block: 32px 64px;
background-color: var(--gl-surface);
}
.aeo-glossary-archive .aeo-glossary-archive-cta__panel {
position: relative;
overflow: hidden;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 28px;
padding: 48px;
border-radius: var(--gl-radius-lg);
background: linear-gradient(115deg, #5A1FD4 0%, #8A33E0 45%, #FF4FA3 100%);
box-shadow: 0 24px 60px rgba(123, 44, 255, 0.24);
}
.aeo-glossary-archive .aeo-glossary-archive-cta__orb {
position: absolute;
top: 50%;
right: -40px;
transform: translateY(-50%);
width: 320px;
height: 320px;
opacity: 0.55;
pointer-events: none;
z-index: 0;
}
.aeo-glossary-archive .aeo-glossary-archive-cta__orb img {
width: 100%;
height: 100%;
display: block;
}
.aeo-glossary-archive .aeo-glossary-archive-cta__sparkles {
position: absolute;
top: 24px;
right: 200px;
width: 120px;
height: 120px;
opacity: 0.6;
pointer-events: none;
z-index: 0;
}
.aeo-glossary-archive .aeo-glossary-archive-cta__sparkles img {
width: 100%;
height: 100%;
display: block;
}
.aeo-glossary-archive .aeo-glossary-archive-cta__copy {
position: relative;
z-index: 1;
flex: 1 1 380px;
max-width: 540px;
}
.aeo-glossary-archive .aeo-glossary-archive-cta__title {
margin: 0 0 12px;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 28px;
line-height: 1.2;
letter-spacing: -0.01em;
color: #fff;
}
@media (min-width: 992px) {
.aeo-glossary-archive .aeo-glossary-archive-cta__title {
font-size: 32px;
}
}
.aeo-glossary-archive .aeo-glossary-archive-cta__text {
margin: 0;
font-size: 16px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.88);
}
.aeo-glossary-archive .aeo-glossary-archive-cta__actions {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 14px;
flex: 0 0 auto;
}
.aeo-glossary-archive .aeo-glossary-archive-cta__btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 24px;
border-radius: var(--gl-radius-md);
font-family: var(--font-display);
font-size: 15px;
font-weight: var(--fw-semibold, 600);
text-decoration: none;
transition: transform 0.12s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.aeo-glossary-archive .aeo-glossary-archive-cta__btn-arrow {
display: inline-flex;
width: 18px;
height: 18px;
}
.aeo-glossary-archive .aeo-glossary-archive-cta__btn-arrow svg {
width: 100%;
height: 100%;
}
.aeo-glossary-archive .aeo-glossary-archive-cta__btn--light {
background-color: #fff;
color: #5A1FD4;
}
.aeo-glossary-archive .aeo-glossary-archive-cta__btn--light:hover {
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}
.aeo-glossary-archive .aeo-glossary-archive-cta__btn--ghost {
background-color: transparent;
border: 1px solid rgba(255, 255, 255, 0.55);
color: #fff;
}
.aeo-glossary-archive .aeo-glossary-archive-cta__btn--ghost:hover {
background-color: rgba(255, 255, 255, 0.12);
border-color: #fff;
}
/* CTA responsive */
@media (max-width: 767px) {
.aeo-glossary-archive .aeo-glossary-archive-cta__panel {
padding: 32px 24px;
flex-direction: column;
align-items: flex-start;
text-align: left;
}
.aeo-glossary-archive .aeo-glossary-archive-cta__orb {
width: 220px;
height: 220px;
right: -60px;
opacity: 0.4;
}
.aeo-glossary-archive .aeo-glossary-archive-cta__sparkles {
display: none;
}
.aeo-glossary-archive .aeo-glossary-archive-cta__actions {
width: 100%;
}
.aeo-glossary-archive .aeo-glossary-archive-cta__btn {
flex: 1 1 auto;
justify-content: center;
}
}
/* CTA reduce motion */
@media (prefers-reduced-motion: reduce) {
.aeo-glossary-archive .aeo-glossary-archive-cta__btn:hover,
.aeo-glossary-archive .aeo-glossary-popular-card__link:hover .aeo-glossary-popular-card__chevron {
transform: none;
}
}
/* =============================================================================
SINGLE GLOSSARY — Premium Redesign (v0.5.0)
Pagina /glosar/{termen}/ — redesign vizual coerent cu noua direcție AEO.ro.
Scope STRICT pe `.aeo-glossary-single`. Nu afectează blog, pagini legale,
archive glossary, homepage, audit.
Elimină aspectul bej/editorial vechi → alb/lavender + violet/magenta + navy.
Conținutul din editor (.entry-content) rămâne neatins ca markup; aici doar
se restilizează componentele existente.
IMPORTANT (upload): această secțiune trebuie să vină DUPĂ orice CSS vechi de
single glossary din main.css (last-wins). Ideal, înlocuiește secțiunea veche
`.aeo-glossary-single ...` din main.css cu aceasta. Vezi README.
Iteration:
- v0.5.0 : redesign premium peste structura reală existentă
========================================================================== */
/* ---- Tokens fallback locali + reset background bej ----------------------- */
.aeo-glossary-single {
--gs-violet: var(--aeo-violet, #7A35FF);
--gs-magenta: var(--aeo-magenta, #FF4FA3);
--gs-violet-soft: var(--aeo-violet-soft, #F4ECFF);
--gs-surface: var(--aeo-surface, #FFFFFF);
--gs-surface-alt: var(--aeo-surface-alt, #FBFAFF);
--gs-lavender: #F7F2FF;
--gs-border: var(--aeo-border, #E9DDFF);
--gs-border-soft: var(--aeo-border-soft, #F0EAFA);
--gs-text: var(--aeo-text, #171427);
--gs-text-soft: var(--aeo-text-soft, #4E4568);
--gs-text-muted: var(--aeo-text-muted, #8A7FA6);
--gs-radius: 4px;
--gs-radius-md: 10px;
--gs-radius-lg: 16px;
/* Elimină orice fundal bej/crem moștenit */
background-color: var(--gs-surface);
color: var(--gs-text);
}
/* Resetăm fundalul pe containerele interne (anti-bej defensiv) */
.aeo-glossary-single .aeo-glossary-single__body,
.aeo-glossary-single .aeo-glossary-single__after,
.aeo-glossary-single .entry-content {
background-color: transparent;
}
/* =============================================================================
HERO 2-col premium
========================================================================== */
.aeo-glossary-single .aeo-glossary-single__hero {
position: relative;
overflow: hidden;
padding-block: 40px 48px;
background: linear-gradient(180deg, var(--gs-lavender) 0%, var(--gs-surface) 100%);
}
@media (min-width: 992px) {
.aeo-glossary-single .aeo-glossary-single__hero {
padding-block: 52px 64px;
}
}
.aeo-glossary-single .aeo-glossary-single__hero-orb {
position: absolute;
top: -180px;
right: -120px;
width: 560px;
height: 560px;
opacity: 0.7;
pointer-events: none;
z-index: 0;
}
.aeo-glossary-single .aeo-glossary-single__hero-orb img {
width: 100%;
height: 100%;
display: block;
}
.aeo-glossary-single .aeo-glossary-single__hero-sparkles {
position: absolute;
bottom: -30px;
left: -20px;
width: 180px;
height: 180px;
opacity: 0.55;
pointer-events: none;
z-index: 0;
}
.aeo-glossary-single .aeo-glossary-single__hero-sparkles img {
width: 100%;
height: 100%;
display: block;
}
.aeo-glossary-single .aeo-glossary-single__hero > .container-aeo {
position: relative;
z-index: 1;
}
/* Badge categorie */
.aeo-glossary-single .aeo-glossary-single__badge {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 14px 0 18px;
padding: 7px 14px 7px 8px;
background-color: var(--gs-surface);
border: 1px solid var(--gs-border);
border-radius: 999px;
text-decoration: none;
transition: border-color 0.15s ease, transform 0.12s ease;
}
.aeo-glossary-single .aeo-glossary-single__badge:hover {
border-color: var(--gs-violet);
transform: translateY(-1px);
}
.aeo-glossary-single .aeo-glossary-single__badge-icon {
display: inline-flex;
width: 28px;
height: 28px;
}
.aeo-glossary-single .aeo-glossary-single__badge-icon img {
width: 100%;
height: 100%;
display: block;
}
.aeo-glossary-single .aeo-glossary-single__badge-text {
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 13px;
letter-spacing: 0.02em;
color: var(--gs-violet);
}
.aeo-glossary-single .aeo-glossary-single__title {
margin: 0;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 38px;
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--gs-text);
}
@media (min-width: 768px) {
.aeo-glossary-single .aeo-glossary-single__title {
font-size: 46px;
}
}
.aeo-glossary-single .aeo-glossary-single__definition {
margin: 18px 0 0;
font-size: 18px;
line-height: 1.6;
color: var(--gs-text-soft);
max-width: 38em;
}
/* Meta */
.aeo-glossary-single .aeo-glossary-single__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 20px;
font-size: 13px;
color: var(--gs-text-muted);
}
.aeo-glossary-single .aeo-glossary-single__meta-sep {
color: var(--gs-border);
}
.aeo-glossary-single .aeo-glossary-single__meta time {
margin-left: 4px;
color: var(--gs-text-soft);
}
.aeo-glossary-single .aeo-glossary-single__meta-updated {
color: var(--gs-violet);
}
.aeo-glossary-single .aeo-glossary-single__meta-updated time {
color: var(--gs-violet);
}
/* Featured image — panel premium */
.aeo-glossary-single .aeo-glossary-single__hero-visual {
position: relative;
}
.aeo-glossary-single .aeo-glossary-single__featured {
position: relative;
margin: 0;
padding: 12px;
background: linear-gradient(135deg, rgba(247, 242, 255, 0.9) 0%, rgba(255, 244, 251, 0.85) 100%);
border: 1px solid var(--gs-border-soft);
border-radius: var(--gs-radius-lg);
box-shadow: 0 20px 50px rgba(123, 44, 255, 0.14), 0 4px 14px rgba(123, 44, 255, 0.07);
}
.aeo-glossary-single .aeo-glossary-single__featured-img {
display: block;
width: 100%;
height: auto;
border-radius: var(--gs-radius-md);
}
/* Fallback (termen fără featured image) — iconiță într-un panel cu glow */
.aeo-glossary-single .aeo-glossary-single__visual-fallback {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 220px;
border-radius: var(--gs-radius-lg);
background: linear-gradient(135deg, rgba(247, 242, 255, 0.9) 0%, rgba(255, 244, 251, 0.85) 100%);
border: 1px solid var(--gs-border-soft);
box-shadow: 0 20px 50px rgba(123, 44, 255, 0.12);
}
.aeo-glossary-single .aeo-glossary-single__visual-fallback img {
width: 96px;
height: 96px;
display: block;
}
/* Hero fără thumbnail: copy poate ocupa mai mult, vizualul rămâne decorativ */
@media (min-width: 992px) {
.aeo-glossary-single .aeo-glossary-single__hero--no-thumb .aeo-glossary-single__hero-copy {
max-width: 760px;
}
}
/* =============================================================================
BODY — typography entry-content
========================================================================== */
.aeo-glossary-single .aeo-glossary-single__body {
padding-block: 40px;
}
@media (min-width: 992px) {
.aeo-glossary-single .aeo-glossary-single__body {
padding-block: 56px;
}
}
.aeo-glossary-single .entry-content {
font-size: 17px;
line-height: 1.75;
color: var(--gs-text-soft);
}
.aeo-glossary-single .entry-content > h2,
.aeo-glossary-single .entry-content > h3 {
color: var(--gs-text);
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
letter-spacing: -0.01em;
}
.aeo-glossary-single .entry-content > h2 {
margin-top: 2.2em;
font-size: 28px;
}
.aeo-glossary-single .entry-content > h3 {
margin-top: 1.8em;
font-size: 22px;
}
.aeo-glossary-single .entry-content > p {
margin-bottom: 1.2em;
}
.aeo-glossary-single .entry-content a {
color: var(--gs-violet);
text-underline-offset: 2px;
}
/* =============================================================================
COMPONENTE EDITOR — restilizare (markup neatins)
========================================================================== */
/* ---- .aeo-term-section : secțiune cu eyebrow/kicker + divider ------------- */
.aeo-glossary-single .entry-content .aeo-term-section {
margin: 36px 0;
padding-top: 28px;
border-top: 1px solid var(--gs-border-soft);
}
.aeo-glossary-single .entry-content .aeo-term-section:first-child {
border-top: 0;
padding-top: 0;
}
/* Dacă secțiunea folosește un kicker/eyebrow (heading mic deasupra) */
.aeo-glossary-single .entry-content .aeo-term-section > h2,
.aeo-glossary-single .entry-content .aeo-term-section > h3 {
margin-top: 0;
}
/* ---- .aeo-summary : panel „Pe scurt" lavender cu border-left ------------- */
.aeo-glossary-single .entry-content .aeo-summary {
margin: 28px 0;
padding: 24px 28px;
background-color: var(--gs-violet-soft);
border: 1px solid var(--gs-border);
border-left: 4px solid var(--gs-violet);
border-radius: var(--gs-radius-md);
}
.aeo-glossary-single .entry-content .aeo-summary__title {
margin: 0 0 12px;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 16px;
letter-spacing: 0.02em;
color: var(--gs-violet);
}
.aeo-glossary-single .entry-content .aeo-summary__list {
margin: 0;
padding-left: 1.2em;
}
.aeo-glossary-single .entry-content .aeo-summary__list li {
margin-bottom: 6px;
color: var(--gs-text-soft);
}
/* ---- .aeo-use-case-grid / .aeo-use-case-card : carduri albe -------------- */
.aeo-glossary-single .entry-content .aeo-use-case-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
margin: 28px 0;
padding: 0;
list-style: none;
}
.aeo-glossary-single .entry-content .aeo-use-case-grid__item {
margin: 0;
list-style: none;
}
.aeo-glossary-single .entry-content .aeo-use-case-card {
height: 100%;
padding: 22px;
background-color: var(--gs-surface);
border: 1px solid var(--gs-border);
border-radius: var(--gs-radius-md);
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.aeo-glossary-single .entry-content .aeo-use-case-card:hover {
border-color: var(--gs-violet);
box-shadow: 0 12px 30px rgba(123, 44, 255, 0.08);
transform: translateY(-2px);
}
.aeo-glossary-single .entry-content .aeo-use-case-card h3,
.aeo-glossary-single .entry-content .aeo-use-case-card h4 {
margin: 0 0 8px;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 17px;
color: var(--gs-text);
}
.aeo-glossary-single .entry-content .aeo-use-case-card p {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: var(--gs-text-soft);
}
/* ---- .aeo-table / .aeo-table-wrap : tabele premium ----------------------- */
.aeo-glossary-single .entry-content .aeo-table-wrap {
margin: 28px 0;
overflow-x: auto;
border: 1px solid var(--gs-border);
border-radius: var(--gs-radius-md);
}
.aeo-glossary-single .entry-content .aeo-table {
width: 100%;
margin: 0;
border-collapse: collapse;
font-size: 15px;
background-color: var(--gs-surface);
}
.aeo-glossary-single .entry-content .aeo-table th,
.aeo-glossary-single .entry-content .aeo-table td {
padding: 14px 18px;
text-align: left;
border-bottom: 1px solid var(--gs-border-soft);
vertical-align: top;
}
.aeo-glossary-single .entry-content .aeo-table thead th {
background-color: var(--gs-violet-soft);
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 13px;
letter-spacing: 0.02em;
color: var(--gs-text);
border-bottom: 1px solid var(--gs-border);
}
.aeo-glossary-single .entry-content .aeo-table tbody tr:last-child th,
.aeo-glossary-single .entry-content .aeo-table tbody tr:last-child td {
border-bottom: 0;
}
.aeo-glossary-single .entry-content .aeo-table tbody tr:nth-child(even) {
background-color: var(--gs-surface-alt);
}
/* ---- .aeo-figure / .aeo-figure--wide : figuri premium (lightbox-safe) ---- */
.aeo-glossary-single .entry-content .aeo-figure,
.aeo-glossary-single .entry-content .aeo-figure--wide {
margin: 32px 0;
padding: 12px;
background: linear-gradient(135deg, rgba(247, 242, 255, 0.7) 0%, rgba(255, 244, 251, 0.6) 100%);
border: 1px solid var(--gs-border-soft);
border-radius: var(--gs-radius-lg);
}
.aeo-glossary-single .entry-content .aeo-figure img,
.aeo-glossary-single .entry-content .aeo-figure--wide img {
display: block;
width: 100%;
height: auto;
border-radius: var(--gs-radius-md);
}
.aeo-glossary-single .entry-content .aeo-figure--wide {
/* lățime extinsă păstrată dacă tema o gestionează; aici doar stil */
}
.aeo-glossary-single .entry-content .aeo-figure__caption,
.aeo-glossary-single .entry-content .aeo-figure-source,
.aeo-glossary-single .entry-content .aeo-figure__source {
margin-top: 10px;
padding: 0 6px;
font-size: 13px;
line-height: 1.5;
color: var(--gs-text-muted);
}
.aeo-glossary-single .entry-content .aeo-figure__source,
.aeo-glossary-single .entry-content .aeo-figure-source {
font-style: italic;
}
/* ---- .aeo-faq : accordion premium (markup + JS existent neatins) --------- */
.aeo-glossary-single .entry-content .aeo-faq {
margin: 32px 0;
}
.aeo-glossary-single .entry-content .aeo-faq__item {
margin-bottom: 12px;
background-color: var(--gs-surface);
border: 1px solid var(--gs-border);
border-radius: var(--gs-radius-md);
overflow: hidden;
}
.aeo-glossary-single .entry-content .aeo-faq__item[open],
.aeo-glossary-single .entry-content .aeo-faq__item.is-open {
border-color: var(--gs-violet);
box-shadow: 0 4px 14px rgba(123, 44, 255, 0.06);
}
.aeo-glossary-single .entry-content .aeo-faq__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
padding: 18px 22px;
cursor: pointer;
text-align: left;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 16px;
color: var(--gs-text);
background: none;
border: 0;
list-style: none;
}
.aeo-glossary-single .entry-content .aeo-faq__question::-webkit-details-marker {
display: none;
}
.aeo-glossary-single .entry-content .aeo-faq__question-text {
flex: 1 1 auto;
min-width: 0;
}
/* Iconița +/− într-un cerc violet */
.aeo-glossary-single .entry-content .aeo-faq__icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex-shrink: 0;
background-color: var(--gs-violet-soft);
border-radius: 50%;
color: var(--gs-violet);
}
/* Plus (bare orizontală + verticală) — funcționează dacă __icon e gol.
Dacă __icon are deja conținut propriu (SVG/text), aceste pseudo se ascund. */
.aeo-glossary-single .entry-content .aeo-faq__icon:empty::before,
.aeo-glossary-single .entry-content .aeo-faq__icon:empty::after {
content: "";
position: absolute;
background-color: currentColor;
border-radius: 2px;
}
.aeo-glossary-single .entry-content .aeo-faq__icon:empty::before {
width: 12px;
height: 2px;
}
.aeo-glossary-single .entry-content .aeo-faq__icon:empty::after {
width: 2px;
height: 12px;
transition: transform 0.18s ease, opacity 0.18s ease;
}
/* La deschidere: bara verticală dispare → rămâne „−" */
.aeo-glossary-single .entry-content .aeo-faq__item[open] .aeo-faq__icon:empty::after,
.aeo-glossary-single .entry-content .aeo-faq__item.is-open .aeo-faq__icon:empty::after {
transform: scaleY(0);
opacity: 0;
}
.aeo-glossary-single .entry-content .aeo-faq__answer {
padding: 0 22px;
}
.aeo-glossary-single .entry-content .aeo-faq__answer-inner {
padding-bottom: 18px;
font-size: 15px;
line-height: 1.65;
color: var(--gs-text-soft);
}
/* ---- .aeo-sources : box surse curat -------------------------------------- */
.aeo-glossary-single .entry-content .aeo-sources {
margin: 32px 0;
padding: 22px 26px;
background-color: var(--gs-surface-alt);
border: 1px solid var(--gs-border-soft);
border-radius: var(--gs-radius-md);
}
.aeo-glossary-single .entry-content .aeo-sources__title {
margin: 0 0 12px;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 14px;
letter-spacing: 0.02em;
color: var(--gs-text);
}
.aeo-glossary-single .entry-content .aeo-sources__list {
margin: 0;
padding-left: 1.2em;
}
.aeo-glossary-single .entry-content .aeo-sources__list li {
margin-bottom: 6px;
font-size: 14px;
color: var(--gs-text-soft);
}
.aeo-glossary-single .entry-content .aeo-sources a {
color: var(--gs-violet);
word-break: break-word;
}
/* =============================================================================
AFTER — related (containerul; componentele își au stilul lor)
========================================================================== */
.aeo-glossary-single .aeo-glossary-single__after {
padding-block: 8px 16px;
}
/* =============================================================================
PREV / NEXT — carduri navigare termeni
========================================================================== */
.aeo-glossary-single .aeo-glossary-single__nav {
padding-block: 24px 8px;
}
.aeo-glossary-single .aeo-glossary-single__nav-card {
display: flex;
align-items: center;
gap: 14px;
height: 100%;
padding: 18px 22px;
background-color: var(--gs-surface);
border: 1px solid var(--gs-border);
border-radius: var(--gs-radius-md);
text-decoration: none;
transition: border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.aeo-glossary-single .aeo-glossary-single__nav-card:hover {
border-color: var(--gs-violet);
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(123, 44, 255, 0.08);
}
.aeo-glossary-single .aeo-glossary-single__nav-card--next {
text-align: right;
justify-content: flex-end;
}
.aeo-glossary-single .aeo-glossary-single__nav-arrow {
display: inline-flex;
width: 22px;
height: 22px;
flex-shrink: 0;
color: var(--gs-violet);
}
.aeo-glossary-single .aeo-glossary-single__nav-arrow svg {
width: 100%;
height: 100%;
}
.aeo-glossary-single .aeo-glossary-single__nav-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.aeo-glossary-single .aeo-glossary-single__nav-label {
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--gs-text-muted);
}
.aeo-glossary-single .aeo-glossary-single__nav-title {
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 16px;
color: var(--gs-text);
}
/* =============================================================================
CTA FINAL — panel gradient + 2 butoane + orb
========================================================================== */
.aeo-glossary-single .aeo-glossary-single__cta {
padding-block: 32px 64px;
}
.aeo-glossary-single .aeo-glossary-single__cta-panel {
position: relative;
overflow: hidden;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 28px;
padding: 48px;
border-radius: var(--gs-radius-lg);
background: linear-gradient(115deg, #5A1FD4 0%, #8A33E0 45%, #FF4FA3 100%);
box-shadow: 0 24px 60px rgba(123, 44, 255, 0.24);
}
.aeo-glossary-single .aeo-glossary-single__cta-orb {
position: absolute;
top: 50%;
right: -40px;
transform: translateY(-50%);
width: 320px;
height: 320px;
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
.aeo-glossary-single .aeo-glossary-single__cta-orb img {
width: 100%;
height: 100%;
display: block;
}
.aeo-glossary-single .aeo-glossary-single__cta-sparkles {
position: absolute;
top: 24px;
right: 200px;
width: 110px;
height: 110px;
opacity: 0.55;
pointer-events: none;
z-index: 0;
}
.aeo-glossary-single .aeo-glossary-single__cta-sparkles img {
width: 100%;
height: 100%;
display: block;
}
.aeo-glossary-single .aeo-glossary-single__cta-copy {
position: relative;
z-index: 1;
max-width: 560px;
}
.aeo-glossary-single .aeo-glossary-single__cta-title {
margin: 0 0 12px;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 26px;
line-height: 1.22;
letter-spacing: -0.01em;
color: #fff;
}
@media (min-width: 992px) {
.aeo-glossary-single .aeo-glossary-single__cta-title {
font-size: 30px;
}
}
.aeo-glossary-single .aeo-glossary-single__cta-text {
margin: 0;
font-size: 16px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.88);
}
.aeo-glossary-single .aeo-glossary-single__cta-actions {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 14px;
flex: 0 0 auto;
}
.aeo-glossary-single .aeo-glossary-single__cta-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 24px;
border-radius: var(--gs-radius-md);
font-family: var(--font-display);
font-size: 15px;
font-weight: var(--fw-semibold, 600);
text-decoration: none;
transition: transform 0.12s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.aeo-glossary-single .aeo-glossary-single__cta-btn-arrow {
display: inline-flex;
width: 18px;
height: 18px;
}
.aeo-glossary-single .aeo-glossary-single__cta-btn-arrow svg {
width: 100%;
height: 100%;
}
.aeo-glossary-single .aeo-glossary-single__cta-btn--light {
background-color: #fff;
color: #5A1FD4;
}
.aeo-glossary-single .aeo-glossary-single__cta-btn--light:hover {
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}
.aeo-glossary-single .aeo-glossary-single__cta-btn--ghost {
background-color: transparent;
border: 1px solid rgba(255, 255, 255, 0.55);
color: #fff;
}
.aeo-glossary-single .aeo-glossary-single__cta-btn--ghost:hover {
background-color: rgba(255, 255, 255, 0.12);
border-color: #fff;
}
/* =============================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 991px) {
.aeo-glossary-single .aeo-glossary-single__hero-visual {
margin-top: 8px;
}
}
@media (max-width: 767px) {
.aeo-glossary-single .aeo-glossary-single__title {
font-size: 32px;
}
.aeo-glossary-single .entry-content .aeo-use-case-grid {
grid-template-columns: 1fr;
}
.aeo-glossary-single .aeo-glossary-single__nav-card--next {
text-align: left;
justify-content: flex-start;
}
.aeo-glossary-single .aeo-glossary-single__cta-panel {
padding: 32px 24px;
flex-direction: column;
align-items: flex-start;
}
.aeo-glossary-single .aeo-glossary-single__cta-sparkles {
display: none;
}
.aeo-glossary-single .aeo-glossary-single__cta-orb {
width: 220px;
height: 220px;
right: -60px;
opacity: 0.4;
}
.aeo-glossary-single .aeo-glossary-single__cta-actions {
width: 100%;
}
.aeo-glossary-single .aeo-glossary-single__cta-btn {
flex: 1 1 auto;
justify-content: center;
}
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
.aeo-glossary-single .aeo-glossary-single__badge:hover,
.aeo-glossary-single .entry-content .aeo-use-case-card:hover,
.aeo-glossary-single .aeo-glossary-single__nav-card:hover,
.aeo-glossary-single .aeo-glossary-single__cta-btn:hover {
transform: none;
}
.aeo-glossary-single .entry-content .aeo-faq__icon:empty::after {
transition: none;
}
}
/* =============================================================================
LEGAL + CONTACT — Premium Redesign (v0.5.0)
Scope:
- Legal: .aeo-page--legal (privacy / cookies / terms)
- Contact: .aeo-page--contact
Paletă: alb + lavender subtil + violet/magenta + navy. Fără bej/crem.
Legal = sobru, lizibil. Contact = mai premium.
Nu afectează blog, glossary, audit, homepage.
========================================================================== */
.aeo-page--legal,
.aeo-page--contact {
--pg-violet: var(--aeo-violet, #7A35FF);
--pg-magenta: var(--aeo-magenta, #FF4FA3);
--pg-violet-soft: var(--aeo-violet-soft, #F4ECFF);
--pg-surface: var(--aeo-surface, #FFFFFF);
--pg-surface-alt: var(--aeo-surface-alt, #FBFAFF);
--pg-lavender: #F7F2FF;
--pg-border: var(--aeo-border, #E9DDFF);
--pg-border-soft: var(--aeo-border-soft, #F0EAFA);
--pg-text: var(--aeo-text, #171427);
--pg-text-soft: var(--aeo-text-soft, #4E4568);
--pg-text-muted: var(--aeo-text-muted, #8A7FA6);
--pg-radius: 4px;
--pg-radius-md: 10px;
--pg-radius-lg: 16px;
background-color: var(--pg-surface);
color: var(--pg-text);
}
/* =============================================================================
LEGAL PAGES — sobru, card central
========================================================================== */
.aeo-page--legal .aeo-page-hero {
padding-block: 36px 24px;
background: linear-gradient(180deg, var(--pg-lavender) 0%, var(--pg-surface) 100%);
}
@media (min-width: 992px) {
.aeo-page--legal .aeo-page-hero {
padding-block: 48px 28px;
}
}
.aeo-page--legal .aeo-page-hero__title {
margin: 14px 0 0;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 34px;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--pg-text);
}
@media (min-width: 768px) {
.aeo-page--legal .aeo-page-hero__title {
font-size: 42px;
}
}
/* Date publicare/actualizare (helper aeo_fortin_the_page_dates) */
.aeo-page--legal .aeo-page-dates {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 14px;
font-size: 13px;
color: var(--pg-text-muted);
}
.aeo-page--legal .aeo-page-dates__label {
color: var(--pg-text-muted);
}
.aeo-page--legal .aeo-page-dates__line + .aeo-page-dates__line {
padding-left: 16px;
border-left: 1px solid var(--pg-border);
}
/* Conținut — card central (structură v0.5.1: .aeo-legal-content > .aeo-legal-card) */
.aeo-page--legal .aeo-legal-content {
padding-block: 28px 8px;
}
.aeo-page--legal .aeo-legal-card {
padding: 32px;
background-color: var(--pg-surface);
border: 1px solid var(--pg-border-soft);
border-radius: var(--pg-radius-lg);
box-shadow: 0 8px 30px rgba(123, 44, 255, 0.05);
}
@media (min-width: 768px) {
.aeo-page--legal .aeo-legal-card {
padding: 48px 56px;
}
}
/* Reset defensiv anti-ascundere — garantăm vizibilitatea conținutului legal,
indiferent de regulile vechi moștenite din main.css. */
.aeo-page--legal .aeo-legal-content,
.aeo-page--legal .aeo-legal-card,
.aeo-page--legal .aeo-legal-card.entry-content {
display: block;
height: auto;
max-height: none;
overflow: visible;
opacity: 1;
visibility: visible;
}
/* Lista date operator (din template legal: denumire/CUI/reg.com/sediu/email) */
.aeo-page--legal .aeo-company-details {
margin: 16px 0 1.4em;
padding: 20px 24px;
list-style: none;
background-color: var(--pg-violet-soft);
border: 1px solid var(--pg-border);
border-radius: var(--pg-radius-md);
}
.aeo-page--legal .aeo-company-details li {
margin: 0;
padding: 6px 0;
font-size: 15px;
color: var(--pg-text-soft);
}
.aeo-page--legal .aeo-company-details li + li {
border-top: 1px solid var(--pg-border-soft);
}
.aeo-page--legal .aeo-company-details strong {
color: var(--pg-text);
}
/* Divider între conținut template și conținut adițional din editor */
.aeo-page--legal .aeo-page-divider {
margin: 32px 0;
border: 0;
border-top: 1px solid var(--pg-border-soft);
}
/* Typography legal */
.aeo-page--legal .entry-content {
font-size: 16px;
line-height: 1.75;
color: var(--pg-text-soft);
}
.aeo-page--legal .entry-content h2 {
margin: 2em 0 0.6em;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 22px;
color: var(--pg-text);
}
.aeo-page--legal .entry-content h3 {
margin: 1.6em 0 0.5em;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 18px;
color: var(--pg-text);
}
.aeo-page--legal .entry-content h2:first-child,
.aeo-page--legal .entry-content h3:first-child {
margin-top: 0;
}
.aeo-page--legal .entry-content p {
margin-bottom: 1.1em;
}
.aeo-page--legal .entry-content ul,
.aeo-page--legal .entry-content ol {
margin: 0 0 1.1em;
padding-left: 1.4em;
}
.aeo-page--legal .entry-content li {
margin-bottom: 0.4em;
}
.aeo-page--legal .entry-content a {
color: var(--pg-violet);
text-underline-offset: 2px;
word-break: break-word;
}
.aeo-page--legal .entry-content table {
width: 100%;
margin: 1.4em 0;
border-collapse: collapse;
font-size: 14px;
}
.aeo-page--legal .entry-content th,
.aeo-page--legal .entry-content td {
padding: 10px 14px;
border: 1px solid var(--pg-border-soft);
text-align: left;
}
.aeo-page--legal .entry-content thead th {
background-color: var(--pg-violet-soft);
font-weight: var(--fw-semibold, 600);
color: var(--pg-text);
}
/* CTA discret către contact */
.aeo-page--legal .aeo-legal-cta-wrap {
padding-block: 8px 64px;
}
.aeo-page--legal .aeo-page-legal-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 32px;
padding: 20px 24px;
background-color: var(--pg-violet-soft);
border-radius: var(--pg-radius-md);
}
.aeo-page--legal .aeo-page-legal-cta__text {
margin: 0;
font-size: 15px;
color: var(--pg-text-soft);
}
.aeo-page--legal .aeo-page-legal-cta__link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 15px;
color: var(--pg-violet);
text-decoration: none;
}
.aeo-page--legal .aeo-page-legal-cta__link:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
/* =============================================================================
CONTACT PAGE
========================================================================== */
.aeo-page--contact .aeo-contact-hero {
position: relative;
overflow: hidden;
padding-block: 40px 32px;
background: linear-gradient(180deg, var(--pg-lavender) 0%, var(--pg-surface) 100%);
}
@media (min-width: 992px) {
.aeo-page--contact .aeo-contact-hero {
padding-block: 56px 40px;
}
}
.aeo-page--contact .aeo-contact-hero__orb {
position: absolute;
top: -160px;
right: -120px;
width: 520px;
height: 520px;
opacity: 0.6;
pointer-events: none;
z-index: 0;
}
.aeo-page--contact .aeo-contact-hero__orb img {
width: 100%;
height: 100%;
display: block;
}
.aeo-page--contact .aeo-contact-hero__sparkles {
position: absolute;
bottom: -20px;
left: -20px;
width: 160px;
height: 160px;
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
.aeo-page--contact .aeo-contact-hero__sparkles img {
width: 100%;
height: 100%;
display: block;
}
.aeo-page--contact .aeo-contact-hero > .container-aeo {
position: relative;
z-index: 1;
}
.aeo-page--contact .aeo-contact-hero__title {
margin: 14px 0 0;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 36px;
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--pg-text);
}
@media (min-width: 768px) {
.aeo-page--contact .aeo-contact-hero__title {
font-size: 46px;
}
}
.aeo-page--contact .aeo-contact-hero__lead {
margin: 16px 0 0;
font-size: 18px;
line-height: 1.6;
color: var(--pg-text-soft);
max-width: 40em;
}
.aeo-page--contact .aeo-contact-hero__badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 20px 0 0;
}
.aeo-page--contact .aeo-contact-hero__badge {
padding: 5px 14px;
background-color: var(--pg-surface);
border: 1px solid var(--pg-border);
border-radius: 999px;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--pg-violet);
}
/* Main 2-col */
.aeo-page--contact .aeo-contact-main {
padding-block: 32px 64px;
}
/* Carduri */
.aeo-page--contact .aeo-contact-card {
padding: 28px;
background-color: var(--pg-surface);
border: 1px solid var(--pg-border);
border-radius: var(--pg-radius-lg);
box-shadow: 0 8px 30px rgba(123, 44, 255, 0.05);
}
.aeo-page--contact .aeo-contact-aside .aeo-contact-card + .aeo-contact-card {
margin-top: 20px;
}
.aeo-page--contact .aeo-contact-card__title {
margin: 0 0 18px;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 18px;
color: var(--pg-text);
}
/* Info contact */
.aeo-page--contact .aeo-contact-info {
margin: 0;
padding: 0;
list-style: none;
}
.aeo-page--contact .aeo-contact-info__item {
display: flex;
flex-direction: column;
gap: 2px;
padding: 12px 0;
border-top: 1px solid var(--pg-border-soft);
}
.aeo-page--contact .aeo-contact-info__item:first-child {
border-top: 0;
padding-top: 0;
}
.aeo-page--contact .aeo-contact-info__label {
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--pg-text-muted);
}
.aeo-page--contact .aeo-contact-info__value {
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 16px;
color: var(--pg-text);
text-decoration: none;
}
.aeo-page--contact a.aeo-contact-info__value:hover {
color: var(--pg-violet);
}
/* Tipuri solicitări */
.aeo-page--contact .aeo-contact-types {
margin: 0;
padding: 0;
list-style: none;
}
.aeo-page--contact .aeo-contact-types__item {
display: flex;
gap: 12px;
padding: 12px 0;
border-top: 1px solid var(--pg-border-soft);
}
.aeo-page--contact .aeo-contact-types__item:first-child {
border-top: 0;
padding-top: 0;
}
.aeo-page--contact .aeo-contact-types__dot {
flex-shrink: 0;
width: 8px;
height: 8px;
margin-top: 7px;
border-radius: 50%;
background: linear-gradient(135deg, var(--pg-violet) 0%, var(--pg-magenta) 100%);
}
.aeo-page--contact .aeo-contact-types__body {
display: flex;
flex-direction: column;
gap: 2px;
}
.aeo-page--contact .aeo-contact-types__title {
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 15px;
color: var(--pg-text);
}
.aeo-page--contact .aeo-contact-types__desc {
font-size: 14px;
line-height: 1.5;
color: var(--pg-text-soft);
}
/* =============================================================================
CONTACT FORM
========================================================================== */
.aeo-page--contact .aeo-contact-field {
margin-bottom: 18px;
}
.aeo-page--contact .aeo-contact-label {
display: block;
margin-bottom: 7px;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 14px;
color: var(--pg-text);
}
.aeo-page--contact .aeo-contact-input {
width: 100%;
padding: 14px 16px;
background-color: var(--pg-surface);
border: 1px solid var(--pg-border);
border-radius: var(--pg-radius-md);
font-size: 16px;
font-family: inherit;
color: var(--pg-text);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.aeo-page--contact .aeo-contact-input::placeholder {
color: var(--pg-text-muted);
}
.aeo-page--contact .aeo-contact-input:focus {
outline: none;
border-color: var(--pg-violet);
box-shadow: 0 0 0 3px rgba(123, 44, 255, 0.12);
}
.aeo-page--contact .aeo-contact-textarea {
resize: vertical;
min-height: 140px;
line-height: 1.6;
}
/* Honeypot — ascuns complet, dar accesibil în DOM pentru boți */
.aeo-page--contact .aeo-contact-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Submit — gradient */
.aeo-page--contact .aeo-contact-submit {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 32px;
background: linear-gradient(135deg, #6D32FF 0%, #FF4FA3 100%);
border: none;
border-radius: var(--pg-radius-md);
color: #fff;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 16px;
cursor: pointer;
transition: box-shadow 0.18s ease, transform 0.12s ease;
box-shadow: 0 4px 14px rgba(123, 44, 255, 0.2);
}
.aeo-page--contact .aeo-contact-submit:hover,
.aeo-page--contact .aeo-contact-submit:focus-visible {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(123, 44, 255, 0.34);
}
/* GDPR text */
.aeo-page--contact .aeo-contact-gdpr {
margin: 16px 0 0;
font-size: 13px;
line-height: 1.5;
color: var(--pg-text-muted);
}
/* Notices */
.aeo-page--contact .aeo-contact-notice {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 22px;
padding: 16px 18px;
border-radius: var(--pg-radius-md);
font-size: 15px;
line-height: 1.5;
}
.aeo-page--contact .aeo-contact-notice__icon {
display: inline-flex;
flex-shrink: 0;
width: 22px;
height: 22px;
margin-top: 1px;
}
.aeo-page--contact .aeo-contact-notice__icon svg {
width: 100%;
height: 100%;
}
.aeo-page--contact .aeo-contact-notice--success {
background-color: #ECF8F1;
border: 1px solid #BEE6CF;
color: #1E7A48;
}
.aeo-page--contact .aeo-contact-notice--error {
background-color: var(--pg-violet-soft);
border: 1px solid var(--pg-border);
color: #8A2150;
}
/* Extra content opțional */
.aeo-page--contact .aeo-contact-extra {
padding-block: 8px 56px;
}
.aeo-page--contact .aeo-contact-extra .entry-content {
font-size: 16px;
line-height: 1.7;
color: var(--pg-text-soft);
}
/* =============================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 767px) {
.aeo-page--legal .aeo-page-hero__title,
.aeo-page--contact .aeo-contact-hero__title {
font-size: 30px;
}
.aeo-page--legal .aeo-legal-card {
padding: 24px 20px;
}
.aeo-page--contact .aeo-contact-card {
padding: 22px;
}
.aeo-page--contact .aeo-contact-submit {
width: 100%;
}
.aeo-page--legal .aeo-page-legal-cta {
flex-direction: column;
align-items: flex-start;
}
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
.aeo-page--contact .aeo-contact-submit:hover,
.aeo-page--contact .aeo-contact-submit:focus-visible {
transform: none;
}
}
/* =============================================================================
HOMEPAGE — Premium Redesign (v0.5.0)
Scope STRICT pe `.aeo-home` + `.aeo-home-hero` (template part).
Paletă: alb + lavender + violet/magenta + navy. Bootstrap grid real.
Nu afectează audit, glosar, single, legal, contact.
========================================================================== */
.aeo-home,
.aeo-home-hero {
--hm-violet: var(--aeo-violet, #7A35FF);
--hm-magenta: var(--aeo-magenta, #FF4FA3);
--hm-violet-soft: var(--aeo-violet-soft, #F4ECFF);
--hm-surface: var(--aeo-surface, #FFFFFF);
--hm-surface-alt: var(--aeo-surface-alt, #FBFAFF);
--hm-lavender: #F7F2FF;
--hm-border: var(--aeo-border, #E9DDFF);
--hm-border-soft: var(--aeo-border-soft, #F0EAFA);
--hm-text: var(--aeo-text, #171427);
--hm-text-soft: var(--aeo-text-soft, #4E4568);
--hm-text-muted: var(--aeo-text-muted, #8A7FA6);
--hm-radius: 4px;
--hm-radius-md: 10px;
--hm-radius-lg: 18px;
--hm-grad: linear-gradient(135deg, #6D32FF 0%, #FF4FA3 100%);
}
.aeo-home {
background-color: var(--hm-surface);
color: var(--hm-text);
overflow-x: clip;
}
/* Shared section heads */
.aeo-home .aeo-home-section-head {
margin-bottom: 32px;
}
.aeo-home .aeo-home-section-head--center {
text-align: center;
}
.aeo-home .aeo-home-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 10px;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hm-violet);
}
.aeo-home .aeo-home-eyebrow--center {
justify-content: center;
}
.aeo-home .aeo-home-eyebrow__icon {
display: inline-flex;
width: 22px;
height: 22px;
}
.aeo-home .aeo-home-eyebrow__icon img {
width: 100%;
height: 100%;
display: block;
}
.aeo-home .aeo-home-section-title {
margin: 0;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 32px;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--hm-text);
}
@media (min-width: 768px) {
.aeo-home .aeo-home-section-title {
font-size: 38px;
}
}
.aeo-home .aeo-home-section-lead {
margin: 12px 0 0;
font-size: 16px;
line-height: 1.6;
color: var(--hm-text-soft);
}
/* Shared buttons (hero) */
.aeo-home-hero .aeo-home-btn {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 15px 26px;
border-radius: var(--hm-radius-md);
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 15px;
text-decoration: none;
transition: transform 0.12s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.aeo-home-hero .aeo-home-btn__icon {
display: inline-flex;
width: 18px;
height: 18px;
}
.aeo-home-hero .aeo-home-btn__icon svg {
width: 100%;
height: 100%;
}
.aeo-home-hero .aeo-home-btn--primary {
background-color: var(--hm-text);
color: #fff;
box-shadow: 0 8px 24px rgba(23, 20, 39, 0.22);
}
.aeo-home-hero .aeo-home-btn--primary:hover {
transform: translateY(-1px);
box-shadow: 0 10px 30px rgba(23, 20, 39, 0.3);
}
.aeo-home-hero .aeo-home-btn--ghost {
background-color: var(--hm-surface);
border: 1px solid var(--hm-border);
color: var(--hm-text);
}
.aeo-home-hero .aeo-home-btn--ghost:hover {
border-color: var(--hm-violet);
color: var(--hm-violet);
}
/* =============================================================================
1. HERO
========================================================================== */
.aeo-home-hero {
position: relative;
overflow: hidden;
padding-block: 48px 64px;
background: linear-gradient(180deg, var(--hm-surface) 0%, var(--hm-lavender) 100%);
}
@media (min-width: 992px) {
.aeo-home-hero {
padding-block: 64px 88px;
}
}
.aeo-home-hero__orb {
position: absolute;
top: -180px;
right: -160px;
width: 640px;
height: 640px;
opacity: 0.7;
pointer-events: none;
z-index: 0;
}
.aeo-home-hero__orb img,
.aeo-home-hero__sparkles img {
width: 100%;
height: 100%;
display: block;
}
.aeo-home-hero__sparkles {
position: absolute;
bottom: 40px;
left: -20px;
width: 200px;
height: 200px;
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
.aeo-home-hero > .container-aeo {
position: relative;
z-index: 1;
}
.aeo-home-hero__eyebrow {
display: flex;
gap: 8px;
margin: 0 0 16px;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 13px;
letter-spacing: 0.12em;
color: var(--hm-violet);
}
.aeo-home-hero__title {
margin: 0;
line-height: 1;
}
.aeo-home-hero__title-main {
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 72px;
letter-spacing: -0.03em;
color: var(--hm-text);
}
.aeo-home-hero__title-dot {
color: var(--hm-violet);
}
@media (max-width: 575px) {
.aeo-home-hero__title-main {
font-size: 56px;
}
}
.aeo-home-hero__subtitle {
margin: 16px 0 0;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 26px;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--hm-text);
}
@media (min-width: 768px) {
.aeo-home-hero__subtitle {
font-size: 30px;
}
}
.aeo-home-hero__lead {
margin: 18px 0 0;
font-size: 16px;
line-height: 1.65;
color: var(--hm-text-soft);
max-width: 40em;
}
.aeo-home-hero__note {
display: flex;
gap: 10px;
margin: 18px 0 0;
padding: 14px 16px;
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid var(--hm-border-soft);
border-radius: var(--hm-radius-md);
font-size: 14px;
line-height: 1.55;
color: var(--hm-text-soft);
max-width: 40em;
}
.aeo-home-hero__note-icon {
display: inline-flex;
flex-shrink: 0;
width: 20px;
height: 20px;
margin-top: 1px;
color: var(--hm-violet);
}
.aeo-home-hero__note-icon svg {
width: 100%;
height: 100%;
}
.aeo-home-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 28px;
}
/* ---- Dashboard HTML/CSS ---- */
.aeo-home-hero__visual {
position: relative;
}
.aeo-home-hero .aeo-dashboard {
position: relative;
padding: 24px;
background-color: var(--hm-surface);
border: 1px solid var(--hm-border);
border-radius: var(--hm-radius-lg);
box-shadow: 0 30px 70px rgba(123, 44, 255, 0.16), 0 6px 20px rgba(123, 44, 255, 0.08);
}
.aeo-home-hero .aeo-dashboard__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 20px;
}
.aeo-home-hero .aeo-dashboard__head-title {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 15px;
color: var(--hm-text);
}
.aeo-home-hero .aeo-dashboard__head-spark {
display: inline-flex;
width: 18px;
height: 18px;
color: var(--hm-violet);
}
.aeo-home-hero .aeo-dashboard__head-spark svg {
width: 100%;
height: 100%;
}
.aeo-home-hero .aeo-dashboard__head-chip {
padding: 5px 12px;
background-color: var(--hm-surface-alt);
border: 1px solid var(--hm-border-soft);
border-radius: 999px;
font-size: 12px;
color: var(--hm-text-muted);
}
.aeo-home-hero .aeo-dashboard__row {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: 20px;
padding-bottom: 20px;
border-bottom: 1px solid var(--hm-border-soft);
}
.aeo-home-hero .aeo-dashboard__score {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 16px;
background-color: var(--hm-surface-alt);
border: 1px solid var(--hm-border-soft);
border-radius: var(--hm-radius-md);
}
.aeo-home-hero .aeo-dashboard__ring {
position: relative;
width: 110px;
height: 110px;
}
.aeo-home-hero .aeo-dashboard__ring svg {
width: 100%;
height: 100%;
}
.aeo-home-hero .aeo-dashboard__score-num {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 32px;
color: var(--hm-text);
}
.aeo-home-hero .aeo-dashboard__score-max {
font-size: 13px;
color: var(--hm-text-muted);
}
.aeo-home-hero .aeo-dashboard__score-label {
margin-top: 10px;
font-size: 13px;
font-weight: var(--fw-semibold, 600);
color: var(--hm-text);
}
.aeo-home-hero .aeo-dashboard__score-delta {
margin-top: 4px;
font-size: 12px;
color: #1E7A48;
}
.aeo-home-hero .aeo-dashboard__metrics {
display: flex;
flex-direction: column;
gap: 9px;
}
.aeo-home-hero .aeo-dashboard__metrics-title {
font-size: 12px;
font-weight: var(--fw-semibold, 600);
color: var(--hm-text-muted);
margin-bottom: 2px;
}
.aeo-home-hero .aeo-dashboard__metric {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 4px 10px;
}
.aeo-home-hero .aeo-dashboard__metric-label {
font-size: 12px;
color: var(--hm-text-soft);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.aeo-home-hero .aeo-dashboard__metric-value {
font-size: 12px;
font-weight: var(--fw-semibold, 600);
color: var(--hm-text);
grid-row: 1;
grid-column: 2;
}
.aeo-home-hero .aeo-dashboard__metric-track {
grid-column: 1 / -1;
height: 7px;
background-color: #F2ECFF;
border-radius: 999px;
overflow: hidden;
}
.aeo-home-hero .aeo-dashboard__metric-fill {
display: block;
height: 100%;
background: var(--hm-grad);
border-radius: 999px;
}
.aeo-home-hero .aeo-dashboard__topics {
padding: 16px 0;
border-bottom: 1px solid var(--hm-border-soft);
}
.aeo-home-hero .aeo-dashboard__topics-title {
display: block;
font-size: 12px;
font-weight: var(--fw-semibold, 600);
color: var(--hm-text-muted);
margin-bottom: 10px;
}
.aeo-home-hero .aeo-dashboard__topics-chips {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.aeo-home-hero .aeo-dashboard__chip {
padding: 5px 12px;
background-color: var(--hm-surface-alt);
border: 1px solid var(--hm-border-soft);
border-radius: 999px;
font-size: 12px;
color: var(--hm-text-soft);
}
.aeo-home-hero .aeo-dashboard__pillars {
padding-top: 16px;
}
.aeo-home-hero .aeo-dashboard__pillars-eyebrow {
display: block;
font-size: 11px;
font-weight: var(--fw-semibold, 600);
letter-spacing: 0.06em;
color: var(--hm-violet);
margin-bottom: 12px;
}
.aeo-home-hero .aeo-dashboard__pillars-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.aeo-home-hero .aeo-dashboard__pillar {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px;
background-color: var(--hm-surface-alt);
border: 1px solid var(--hm-border-soft);
border-radius: var(--hm-radius-md);
}
.aeo-home-hero .aeo-dashboard__pillar-icon {
width: 34px;
height: 34px;
}
.aeo-home-hero .aeo-dashboard__pillar-icon img {
width: 100%;
height: 100%;
display: block;
}
.aeo-home-hero .aeo-dashboard__pillar-name {
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 14px;
color: var(--hm-text);
}
.aeo-home-hero .aeo-dashboard__pillar-desc {
font-size: 11px;
line-height: 1.4;
color: var(--hm-text-muted);
}
/* =============================================================================
2. CE PREGĂTIM
========================================================================== */
.aeo-home-prepare {
position: relative;
overflow: hidden;
padding-block: 56px 64px;
background-color: var(--hm-lavender);
}
.aeo-home-prepare__dots {
position: absolute;
top: 40px;
right: 30px;
width: 160px;
height: 160px;
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
.aeo-home-prepare__dots img {
width: 100%;
height: 100%;
display: block;
}
.aeo-home-prepare > .container-aeo {
position: relative;
z-index: 1;
}
.aeo-home-prepare-card {
height: 100%;
}
.aeo-home-prepare-card__link {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 24px;
background-color: var(--hm-surface);
border: 1px solid var(--hm-border);
border-radius: var(--hm-radius-lg);
text-decoration: none;
transition: border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.aeo-home-prepare-card__link:hover {
border-color: var(--hm-violet);
transform: translateY(-3px);
box-shadow: 0 16px 40px rgba(123, 44, 255, 0.1);
}
.aeo-home-prepare-card__chevron {
position: absolute;
top: 24px;
right: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 1px solid var(--hm-border);
border-radius: 50%;
color: var(--hm-text-muted);
transition: color 0.15s ease, border-color 0.15s ease;
}
.aeo-home-prepare-card__chevron svg {
width: 14px;
height: 14px;
}
.aeo-home-prepare-card__link:hover .aeo-home-prepare-card__chevron {
color: var(--hm-violet);
border-color: var(--hm-violet);
}
.aeo-home-prepare-card__icon {
width: 56px;
height: 56px;
margin-bottom: 16px;
}
.aeo-home-prepare-card__icon img {
width: 100%;
height: 100%;
display: block;
}
.aeo-home-prepare-card__title {
margin: 0 0 10px;
padding-right: 32px;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 17px;
color: var(--hm-text);
}
.aeo-home-prepare-card__text {
margin: 0 0 16px;
font-size: 14px;
line-height: 1.6;
color: var(--hm-text-soft);
}
.aeo-home-prepare-card__chip {
display: inline-block;
margin-top: auto;
padding: 6px 12px;
background-color: var(--hm-violet-soft);
border-radius: 999px;
font-size: 12px;
font-weight: var(--fw-medium, 500);
color: var(--hm-violet);
}
/* =============================================================================
3. DE CE EXISTĂ AEO.RO
========================================================================== */
.aeo-home-context {
padding-block: 56px 64px;
background-color: var(--hm-surface);
}
.aeo-home-context__rule {
display: block;
width: 48px;
height: 3px;
margin: 16px 0 24px;
background: var(--hm-grad);
border-radius: 999px;
}
.aeo-home-context__list {
margin: 0;
padding: 0;
list-style: none;
}
.aeo-home-context__item {
display: flex;
gap: 16px;
padding: 16px 0;
}
.aeo-home-context__item-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
}
.aeo-home-context__item-icon img {
width: 100%;
height: 100%;
display: block;
}
.aeo-home-context__item-text {
font-size: 15px;
line-height: 1.65;
color: var(--hm-text-soft);
}
/* Panel „AI nu răsfoiește" */
.aeo-home-context__panel {
position: relative;
overflow: hidden;
padding: 36px;
background-color: var(--hm-surface);
border: 1px solid var(--hm-border);
border-radius: var(--hm-radius-lg);
box-shadow: 0 24px 60px rgba(123, 44, 255, 0.1);
}
.aeo-home-context__panel-orb {
position: absolute;
bottom: -80px;
right: -80px;
width: 280px;
height: 280px;
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
.aeo-home-context__panel-orb img {
width: 100%;
height: 100%;
display: block;
}
.aeo-home-context__panel > * {
position: relative;
z-index: 1;
}
.aeo-home-context__panel-title {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 26px;
line-height: 1.18;
letter-spacing: -0.01em;
color: var(--hm-text);
}
.aeo-home-context__panel-spark {
display: inline-flex;
width: 24px;
height: 24px;
margin-bottom: 8px;
color: var(--hm-violet);
}
.aeo-home-context__panel-spark svg {
width: 100%;
height: 100%;
}
.aeo-home-context__panel-accent {
color: var(--hm-magenta);
}
.aeo-home-context__panel-rule {
display: block;
width: 40px;
height: 3px;
margin: 18px 0 24px;
background: var(--hm-grad);
border-radius: 999px;
}
.aeo-home-context__checks {
margin: 0;
padding: 0;
list-style: none;
}
.aeo-home-context__check {
display: flex;
gap: 14px;
padding: 12px 0;
}
.aeo-home-context__check-mark {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 26px;
height: 26px;
background-color: var(--hm-violet-soft);
border-radius: 50%;
color: var(--hm-violet);
}
.aeo-home-context__check-mark svg {
width: 15px;
height: 15px;
}
.aeo-home-context__check-body {
display: flex;
flex-direction: column;
gap: 2px;
}
.aeo-home-context__check-title {
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 15px;
color: var(--hm-text);
}
.aeo-home-context__check-desc {
font-size: 14px;
line-height: 1.5;
color: var(--hm-text-soft);
}
/* =============================================================================
4. CE VEI GĂSI
========================================================================== */
.aeo-home-find {
padding-block: 56px 64px;
background-color: var(--hm-lavender);
}
.aeo-home-find__rows {
display: flex;
flex-direction: column;
gap: 14px;
}
.aeo-home-find-row {
display: grid;
grid-template-columns: 48px minmax(0, 0.9fr) minmax(0, 1.1fr) 24px;
align-items: center;
gap: 20px;
padding: 20px 24px;
background-color: var(--hm-surface);
border: 1px solid var(--hm-border);
border-radius: var(--hm-radius-md);
transition: border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.aeo-home-find-row:hover {
border-color: var(--hm-violet);
transform: translateX(2px);
box-shadow: 0 10px 28px rgba(123, 44, 255, 0.07);
}
.aeo-home-find-row__icon {
width: 48px;
height: 48px;
}
.aeo-home-find-row__icon img {
width: 100%;
height: 100%;
display: block;
}
.aeo-home-find-row__title {
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 16px;
color: var(--hm-text);
}
.aeo-home-find-row__desc {
font-size: 14px;
line-height: 1.55;
color: var(--hm-text-soft);
padding-left: 20px;
border-left: 1px solid var(--hm-border-soft);
}
.aeo-home-find-row__chevron {
display: inline-flex;
width: 22px;
height: 22px;
color: var(--hm-text-muted);
}
.aeo-home-find-row__chevron svg {
width: 100%;
height: 100%;
}
/* Bara principii */
.aeo-home-find-principles {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 4px;
padding: 22px 24px;
background-color: var(--hm-surface);
border: 1px solid var(--hm-border);
border-radius: var(--hm-radius-md);
}
.aeo-home-find-principles__head {
display: inline-flex;
align-items: center;
gap: 12px;
}
.aeo-home-find-principles__spark {
display: inline-flex;
width: 22px;
height: 22px;
color: var(--hm-violet);
}
.aeo-home-find-principles__spark svg {
width: 100%;
height: 100%;
}
.aeo-home-find-principles__head-text {
display: flex;
flex-direction: column;
}
.aeo-home-find-principles__title {
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 15px;
color: var(--hm-text);
}
.aeo-home-find-principles__sub {
font-size: 13px;
color: var(--hm-text-muted);
}
.aeo-home-find-principles__items {
display: flex;
flex-wrap: wrap;
gap: 18px;
}
.aeo-home-find-principles__item {
display: inline-flex;
align-items: center;
gap: 7px;
}
.aeo-home-find-principles__dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--hm-grad);
}
.aeo-home-find-principles__label {
font-size: 13px;
font-weight: var(--fw-medium, 500);
color: var(--hm-text-soft);
}
/* =============================================================================
5. DE CE BRANDURILE ALEG
========================================================================== */
.aeo-home-why {
padding-block: 56px 64px;
background-color: var(--hm-surface);
}
.aeo-home-why-card {
position: relative;
height: 100%;
padding: 28px;
background-color: var(--hm-surface);
border: 1px solid var(--hm-border);
border-radius: var(--hm-radius-lg);
transition: border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.aeo-home-why-card:hover {
border-color: var(--hm-violet);
transform: translateY(-3px);
box-shadow: 0 16px 40px rgba(123, 44, 255, 0.1);
}
.aeo-home-why-card__spark {
position: absolute;
top: 26px;
right: 26px;
display: inline-flex;
width: 18px;
height: 18px;
color: var(--hm-violet);
}
.aeo-home-why-card__spark svg {
width: 100%;
height: 100%;
}
.aeo-home-why-card__icon {
display: block;
width: 56px;
height: 56px;
margin-bottom: 18px;
}
.aeo-home-why-card__icon img {
width: 100%;
height: 100%;
display: block;
}
.aeo-home-why-card__title {
margin: 0 0 10px;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 18px;
color: var(--hm-text);
}
.aeo-home-why-card__text {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: var(--hm-text-soft);
}
/* =============================================================================
6. CTA FINAL
========================================================================== */
.aeo-home-cta {
padding-block: 16px 72px;
background-color: var(--hm-surface);
}
.aeo-home-cta__panel {
position: relative;
overflow: hidden;
text-align: center;
padding: 56px 40px;
border-radius: var(--hm-radius-lg);
background: linear-gradient(115deg, #5A1FD4 0%, #8A33E0 45%, #FF4FA3 100%);
box-shadow: 0 30px 70px rgba(123, 44, 255, 0.26);
}
.aeo-home-cta__orb {
position: absolute;
top: 50%;
right: -60px;
transform: translateY(-50%);
width: 340px;
height: 340px;
opacity: 0.4;
pointer-events: none;
z-index: 0;
}
.aeo-home-cta__orb img,
.aeo-home-cta__sparkles img {
width: 100%;
height: 100%;
display: block;
}
.aeo-home-cta__sparkles {
position: absolute;
top: 30px;
left: 8%;
width: 130px;
height: 130px;
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
.aeo-home-cta__panel > * {
position: relative;
z-index: 1;
}
.aeo-home-cta__badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-bottom: 20px;
background-color: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: var(--hm-radius-md);
color: #fff;
}
.aeo-home-cta__badge svg {
width: 22px;
height: 22px;
}
.aeo-home-cta__title {
margin: 0 auto;
max-width: 16em;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 30px;
line-height: 1.18;
letter-spacing: -0.01em;
color: #fff;
}
@media (min-width: 768px) {
.aeo-home-cta__title {
font-size: 38px;
}
}
.aeo-home-cta__text {
margin: 16px auto 0;
max-width: 36em;
font-size: 16px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
}
.aeo-home-cta__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
margin-top: 28px;
}
.aeo-home-cta__btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 28px;
border-radius: var(--hm-radius-md);
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 15px;
text-decoration: none;
transition: transform 0.12s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.aeo-home-cta__btn-arrow,
.aeo-home-cta__btn-icon {
display: inline-flex;
width: 18px;
height: 18px;
}
.aeo-home-cta__btn-arrow svg,
.aeo-home-cta__btn-icon svg {
width: 100%;
height: 100%;
}
.aeo-home-cta__btn--dark {
background-color: var(--hm-text);
color: #fff;
box-shadow: 0 8px 22px rgba(23, 20, 39, 0.28);
}
.aeo-home-cta__btn--dark:hover {
transform: translateY(-1px);
}
.aeo-home-cta__btn--light {
background-color: #fff;
color: #5A1FD4;
}
.aeo-home-cta__btn--light:hover {
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}
/* =============================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 991px) {
.aeo-home-hero__visual {
margin-top: 12px;
}
.aeo-home-hero .aeo-dashboard__row {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.aeo-home-find-row {
grid-template-columns: 44px minmax(0, 1fr) 20px;
gap: 12px;
}
.aeo-home-find-row__desc {
grid-column: 2 / -1;
padding-left: 0;
border-left: 0;
margin-top: 2px;
}
.aeo-home-find-row__chevron {
grid-row: 1;
grid-column: 3;
}
.aeo-home-find-principles {
flex-direction: column;
align-items: flex-start;
}
.aeo-home-hero .aeo-dashboard__pillars-grid {
grid-template-columns: 1fr;
}
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
.aeo-home-prepare-card__link:hover,
.aeo-home-why-card:hover,
.aeo-home-find-row:hover,
.aeo-home-hero .aeo-home-btn:hover,
.aeo-home-cta__btn:hover {
transform: none;
}
}
/* =============================================================================
v0.5.1 — FIDELITY PATCH
Apropie layout-ul de mockup: mai mult impact, spacing mai generos, dashboard
mai dominant, panele mai dense. Doar ajustări vizuale (override), scoped.
========================================================================== */
/* ---- 1. HERO: mai mult impact + spacing ---- */
.aeo-home .aeo-home-hero {
padding-block: 64px 80px;
}
@media (min-width: 992px) {
.aeo-home .aeo-home-hero {
padding-block: 88px 112px;
}
}
.aeo-home .aeo-home-hero__title-main {
font-size: 88px;
}
@media (max-width: 991px) {
.aeo-home .aeo-home-hero__title-main {
font-size: 72px;
}
}
@media (max-width: 575px) {
.aeo-home .aeo-home-hero__title-main {
font-size: 60px;
}
}
.aeo-home .aeo-home-hero__subtitle {
margin-top: 18px;
font-size: 30px;
}
@media (min-width: 768px) {
.aeo-home .aeo-home-hero__subtitle {
font-size: 34px;
}
}
.aeo-home .aeo-home-hero__lead {
margin-top: 22px;
font-size: 17px;
line-height: 1.7;
}
.aeo-home .aeo-home-hero__note {
margin-top: 22px;
padding: 16px 18px;
font-size: 15px;
}
.aeo-home .aeo-home-hero__actions {
margin-top: 32px;
}
.aeo-home-hero .aeo-home-btn {
padding: 17px 30px;
font-size: 16px;
}
/* Hero să dea mai mult „aer" coloanelor pe desktop (dashboard mai dominant) */
@media (min-width: 992px) {
.aeo-home .aeo-home-hero__copy {
padding-right: 24px;
}
}
/* ---- 2. DASHBOARD: mai mare, mai prezent ---- */
.aeo-home-hero .aeo-dashboard {
padding: 30px;
border-radius: 22px;
box-shadow: 0 40px 90px rgba(123, 44, 255, 0.2), 0 8px 26px rgba(123, 44, 255, 0.1);
}
@media (min-width: 1200px) {
/* Lasă dashboard-ul să „iasă" puțin spre dreapta pentru dominanță vizuală */
.aeo-home-hero .aeo-dashboard {
margin-left: 8px;
}
}
.aeo-home-hero .aeo-dashboard__head {
margin-bottom: 24px;
}
.aeo-home-hero .aeo-dashboard__head-title {
font-size: 16px;
}
.aeo-home-hero .aeo-dashboard__row {
gap: 24px;
padding-bottom: 24px;
}
.aeo-home-hero .aeo-dashboard__score {
padding: 22px 18px;
}
.aeo-home-hero .aeo-dashboard__ring {
width: 132px;
height: 132px;
}
.aeo-home-hero .aeo-dashboard__score-num {
font-size: 38px;
}
.aeo-home-hero .aeo-dashboard__score-max {
font-size: 14px;
}
.aeo-home-hero .aeo-dashboard__score-label {
margin-top: 14px;
font-size: 14px;
}
.aeo-home-hero .aeo-dashboard__metrics {
gap: 12px;
}
.aeo-home-hero .aeo-dashboard__metric-label {
font-size: 13px;
}
.aeo-home-hero .aeo-dashboard__metric-value {
font-size: 13px;
}
.aeo-home-hero .aeo-dashboard__metric-track {
height: 9px;
}
.aeo-home-hero .aeo-dashboard__topics {
padding: 20px 0;
}
.aeo-home-hero .aeo-dashboard__chip {
padding: 6px 14px;
font-size: 12px;
}
/* Pillars ca mini-carduri reale */
.aeo-home-hero .aeo-dashboard__pillars {
padding-top: 20px;
}
.aeo-home-hero .aeo-dashboard__pillar {
gap: 6px;
padding: 16px 14px;
border-radius: 12px;
}
.aeo-home-hero .aeo-dashboard__pillar-icon {
width: 40px;
height: 40px;
}
.aeo-home-hero .aeo-dashboard__pillar-name {
font-size: 15px;
}
/* ---- 3. CE PREGĂTIM: carduri mai premium ---- */
.aeo-home .aeo-home-prepare {
padding-block: 72px 80px;
}
.aeo-home .aeo-home-section-title {
font-size: 36px;
}
@media (min-width: 768px) {
.aeo-home .aeo-home-section-title {
font-size: 44px;
}
}
.aeo-home .aeo-home-section-lead {
font-size: 17px;
}
.aeo-home .aeo-home-prepare-card__link {
padding: 30px 26px;
}
.aeo-home .aeo-home-prepare-card__icon {
width: 64px;
height: 64px;
margin-bottom: 20px;
padding: 4px;
background-color: var(--hm-violet-soft);
border-radius: 16px;
}
.aeo-home .aeo-home-prepare-card__title {
font-size: 18px;
margin-bottom: 12px;
}
.aeo-home .aeo-home-prepare-card__text {
font-size: 14.5px;
line-height: 1.65;
color: var(--hm-text-soft);
margin-bottom: 20px;
}
.aeo-home .aeo-home-prepare-card__chip {
padding: 7px 14px;
font-size: 12.5px;
}
.aeo-home .aeo-home-prepare-card__chevron {
width: 30px;
height: 30px;
}
/* ---- 4. DE CE EXISTĂ: panel densificat ---- */
.aeo-home .aeo-home-context {
padding-block: 72px 80px;
}
.aeo-home .aeo-home-context__item-text {
font-size: 15.5px;
line-height: 1.7;
}
.aeo-home .aeo-home-context__panel {
padding: 40px;
min-height: 100%;
}
/* Orb ca glow de fundal centru-dreapta (ca în mockup), în spatele checks.
position: absolute aici (specificitate 0,2,0) învinge `.aeo-home-context__panel > *`
(0,1,0) care altfel îl forța la relative și-l scotea din fundal în flow. */
.aeo-home .aeo-home-context__panel-orb {
position: absolute;
top: 0;
right: -90px;
bottom: auto;
transform: translateY(-30%);
width: 360px;
height: 360px;
opacity: 0.7;
z-index: 0;
}
/* Adaug dot-grid discret în panel (umple spațiul) */
.aeo-home .aeo-home-context__panel::before {
content: "";
position: absolute;
top: 24px;
right: 24px;
width: 120px;
height: 120px;
background-image: radial-gradient(circle, rgba(123, 44, 255, 0.18) 1.5px, transparent 1.5px);
background-size: 16px 16px;
opacity: 0.5;
z-index: 0;
pointer-events: none;
}
.aeo-home .aeo-home-context__panel-title {
font-size: 28px;
}
@media (min-width: 768px) {
.aeo-home .aeo-home-context__panel-title {
font-size: 32px;
}
}
.aeo-home .aeo-home-context__panel-spark {
width: 28px;
height: 28px;
margin-bottom: 12px;
}
.aeo-home .aeo-home-context__checks {
margin-top: 4px;
}
.aeo-home .aeo-home-context__check {
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid var(--hm-border-soft);
}
.aeo-home .aeo-home-context__check:last-child {
border-bottom: 0;
}
.aeo-home .aeo-home-context__check-mark {
width: 30px;
height: 30px;
}
.aeo-home .aeo-home-context__check-mark svg {
width: 17px;
height: 17px;
}
.aeo-home .aeo-home-context__check-title {
font-size: 16px;
}
.aeo-home .aeo-home-context__check-desc {
font-size: 14.5px;
}
/* ---- 5. CE VEI GĂSI: rows mai premium ---- */
.aeo-home .aeo-home-find {
padding-block: 72px 80px;
}
.aeo-home .aeo-home-find-row {
padding: 24px 28px;
gap: 24px;
}
.aeo-home .aeo-home-find-row__icon {
width: 52px;
height: 52px;
}
.aeo-home .aeo-home-find-row__title {
font-size: 16.5px;
}
.aeo-home .aeo-home-find-row__desc {
font-size: 14.5px;
line-height: 1.6;
}
/* ---- 6. DE CE BRANDURILE ALEG: prezență ---- */
.aeo-home .aeo-home-why {
padding-block: 72px 80px;
}
.aeo-home .aeo-home-why-card {
padding: 32px 30px;
}
.aeo-home .aeo-home-why-card__icon {
width: 64px;
height: 64px;
margin-bottom: 20px;
padding: 4px;
background-color: var(--hm-violet-soft);
border-radius: 16px;
}
.aeo-home .aeo-home-why-card__title {
font-size: 19px;
}
.aeo-home .aeo-home-why-card__text {
font-size: 14.5px;
line-height: 1.65;
}
/* ---- 7. CTA FINAL: densitate mai bună (mai puțin spațiu mort) ---- */
.aeo-home .aeo-home-cta {
padding-block: 8px 72px;
}
.aeo-home .aeo-home-cta__panel {
padding: 48px 40px;
}
@media (min-width: 992px) {
.aeo-home .aeo-home-cta__panel {
padding: 56px 48px;
}
}
.aeo-home .aeo-home-cta__badge {
width: 52px;
height: 52px;
margin-bottom: 22px;
}
.aeo-home .aeo-home-cta__title {
font-size: 32px;
max-width: 18em;
}
@media (min-width: 768px) {
.aeo-home .aeo-home-cta__title {
font-size: 40px;
}
}
.aeo-home .aeo-home-cta__text {
margin-top: 18px;
font-size: 17px;
max-width: 40em;
}
.aeo-home .aeo-home-cta__actions {
margin-top: 32px;
}
.aeo-home .aeo-home-cta__btn {
padding: 16px 30px;
font-size: 16px;
}
/* Dot-grid discret în CTA (ca în mockup) */
.aeo-home .aeo-home-cta__panel::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.22) 1.5px, transparent 1.5px);
background-size: 18px 18px;
opacity: 0.4;
z-index: 0;
pointer-events: none;
}
/* Fix orb + sparkles CTA: aceeași cauză ca la context panel.
`.aeo-home-cta__panel > *` (0,1,0) le forța la relative → intrau în flow și
împingeau conținutul. Le readuc la absolute cu specificitate 0,2,0. */
.aeo-home .aeo-home-cta__orb {
position: absolute;
top: 50%;
right: -60px;
transform: translateY(-50%);
width: 340px;
height: 340px;
opacity: 0.4;
z-index: 0;
}
.aeo-home .aeo-home-cta__sparkles {
position: absolute;
top: 30px;
left: 8%;
width: 130px;
height: 130px;
opacity: 0.5;
z-index: 0;
}
/* =============================================================================
HEADER + FOOTER GLOBAL — Premium (v0.5.0)
Scope: .aeo-site-header, .aeo-site-footer, .aeo-nav-overlay, body.aeo-menu-open.
Header: alb, sticky, blur + shadow subtil, admin-bar aware.
Footer: dark navy cu glow violet/magenta.
Paletă: alb/lavender + violet/magenta + navy. Fără bej.
========================================================================== */
:root {
--ah-violet: #7A35FF;
--ah-magenta: #FF4FA3;
--ah-violet-soft: #F4ECFF;
--ah-surface: #FFFFFF;
--ah-lavender: #F7F2FF;
--ah-border: #E9DDFF;
--ah-border-soft: #F0EAFA;
--ah-text: #171427;
--ah-text-soft: #4E4568;
--ah-text-muted: #8A7FA6;
--ah-grad: linear-gradient(135deg, #6D32FF 0%, #FF4FA3 100%);
--ah-header-h: 72px;
}
/* =============================================================================
HEADER — Premium Floating (v0.5.2) — position: fixed (sticky-safe)
========================================================================== */
.aeo-site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
padding-block: 14px;
background: linear-gradient(180deg, rgba(247, 242, 255, 0.86) 0%, rgba(247, 242, 255, 0.4) 100%);
}
/* Spacer: compensează header-ul fixed ca să nu acopere conținutul. */
.aeo-site-header__spacer {
height: 92px;
}
@media (max-width: 991px) {
.aeo-site-header__spacer {
height: 84px;
}
}
/* Admin bar: header fixed coboară sub bara WP. */
.admin-bar .aeo-site-header {
top: 32px;
}
@media screen and (max-width: 782px) {
.admin-bar .aeo-site-header {
top: 46px;
}
}
@media screen and (max-width: 600px) {
.admin-bar .aeo-site-header {
top: 0;
}
}
/* Inner = pill alb floating */
.aeo-site-header__inner {
display: flex;
align-items: center;
gap: 22px;
padding: 14px 26px;
background-color: var(--ah-surface);
-webkit-backdrop-filter: saturate(180%) blur(14px);
backdrop-filter: saturate(180%) blur(14px);
border: 1px solid var(--ah-border);
border-radius: 22px;
box-shadow: 0 10px 34px rgba(123, 44, 255, 0.1), 0 2px 8px rgba(23, 20, 39, 0.04);
transition: box-shadow 0.2s ease;
}
/* Brand */
.aeo-site-header .aeo-site-title {
margin: 0;
font-size: 30px;
line-height: 1;
}
.aeo-site-header .aeo-site-title__link {
display: inline-flex;
align-items: baseline;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 700);
letter-spacing: -0.02em;
text-decoration: none;
}
.aeo-site-header .aeo-site-title__main {
color: var(--ah-text);
}
.aeo-site-header .aeo-site-title__dot {
color: var(--ah-violet);
}
/* Navigație */
.aeo-site-header .aeo-site-nav {
flex: 1 1 auto;
display: flex;
justify-content: center;
}
.aeo-site-header .aeo-nav {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.aeo-site-header .aeo-nav__item {
position: relative;
}
.aeo-site-header .aeo-nav__link {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 10px 15px;
border-radius: 9px;
font-family: var(--font-display);
font-weight: var(--fw-medium, 600);
font-size: 16px;
color: var(--ah-text-soft);
text-decoration: none;
transition: color 0.15s ease, background-color 0.15s ease;
}
.aeo-site-header .aeo-nav__link:hover,
.aeo-site-header .aeo-nav__item:focus-within > .aeo-nav__link {
color: var(--ah-violet);
background-color: var(--ah-violet-soft);
}
.aeo-site-header .aeo-nav__link--active {
color: var(--ah-violet);
position: relative;
}
.aeo-site-header .aeo-nav__link--active::after {
content: "";
position: absolute;
bottom: 1px;
left: 50%;
transform: translateX(-50%);
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--ah-grad);
}
.aeo-site-header .aeo-nav__caret {
display: inline-flex;
width: 14px;
height: 14px;
transition: transform 0.18s ease;
}
.aeo-site-header .aeo-nav__caret svg {
width: 100%;
height: 100%;
}
/* Dropdown desktop — premium */
.aeo-site-header .aeo-nav__dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 220px;
margin: 0;
padding: 10px;
list-style: none;
background-color: var(--ah-surface);
border: 1px solid var(--ah-border);
border-radius: 14px;
box-shadow: 0 20px 48px rgba(123, 44, 255, 0.16);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
z-index: 10;
}
.aeo-site-header .aeo-nav__item--has-dropdown:hover .aeo-nav__dropdown,
.aeo-site-header .aeo-nav__item--has-dropdown:focus-within .aeo-nav__dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.aeo-site-header .aeo-nav__item--has-dropdown:hover .aeo-nav__caret,
.aeo-site-header .aeo-nav__item--has-dropdown:focus-within .aeo-nav__caret {
transform: rotate(180deg);
}
.aeo-site-header .aeo-nav__dropdown a {
display: block;
padding: 10px 14px;
border-radius: 9px;
font-size: 15px;
color: var(--ah-text-soft);
text-decoration: none;
transition: color 0.15s ease, background-color 0.15s ease;
}
.aeo-site-header .aeo-nav__dropdown a:hover {
color: var(--ah-violet);
background-color: var(--ah-violet-soft);
}
.aeo-site-header .aeo-nav__sub-toggle {
display: none;
}
/* Acțiuni dreapta */
.aeo-site-header__actions {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.aeo-site-header .aeo-header-search {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 10px;
color: var(--ah-text-soft);
transition: color 0.15s ease, background-color 0.15s ease;
}
.aeo-site-header .aeo-header-search:hover {
color: var(--ah-violet);
background-color: var(--ah-violet-soft);
}
.aeo-site-header .aeo-header-search svg {
width: 21px;
height: 21px;
}
.aeo-site-header .aeo-header-search--mobile {
display: none;
}
/* Butoane header — mai generoase */
.aeo-site-header .aeo-header-btn {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 13px 22px;
border-radius: 10px;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 15px;
text-decoration: none;
white-space: nowrap;
transition: transform 0.12s ease, box-shadow 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}
.aeo-site-header .aeo-header-btn__icon {
display: inline-flex;
width: 17px;
height: 17px;
}
.aeo-site-header .aeo-header-btn__icon svg {
width: 100%;
height: 100%;
}
.aeo-site-header .aeo-header-btn--ghost {
background-color: var(--ah-surface);
border: 1px solid var(--ah-border);
color: var(--ah-text);
box-shadow: 0 2px 6px rgba(23, 20, 39, 0.04);
}
.aeo-site-header .aeo-header-btn--ghost:hover {
border-color: var(--ah-violet);
color: var(--ah-violet);
}
.aeo-site-header .aeo-header-btn--primary {
background: var(--ah-grad);
color: #fff;
box-shadow: 0 8px 22px rgba(123, 44, 255, 0.3);
}
.aeo-site-header .aeo-header-btn--primary:hover {
transform: translateY(-1px);
box-shadow: 0 10px 28px rgba(123, 44, 255, 0.4);
}
/* Hamburger */
.aeo-site-header .aeo-site-nav__toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 4px;
width: 46px;
height: 46px;
padding: 0;
background: none;
border: 1px solid var(--ah-border);
border-radius: 10px;
cursor: pointer;
}
.aeo-site-header .aeo-site-nav__toggle-bar {
display: block;
width: 20px;
height: 2px;
margin: 0 auto;
background-color: var(--ah-text);
border-radius: 2px;
transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Close button (X) panel mobil — ascuns pe desktop */
.aeo-site-header .aeo-site-nav__close {
display: none;
position: absolute;
top: 18px;
right: 18px;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
padding: 0;
background: none;
border: 1px solid var(--ah-border);
border-radius: 10px;
color: var(--ah-text);
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
}
.aeo-site-header .aeo-site-nav__close:hover {
color: var(--ah-violet);
border-color: var(--ah-violet);
}
.aeo-site-header .aeo-site-nav__close svg {
width: 22px;
height: 22px;
}
/* Overlay (mobile) */
.aeo-nav-overlay {
position: fixed;
inset: 0;
z-index: 9998;
background-color: rgba(23, 20, 39, 0.5);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
/* =============================================================================
HEADER — MOBILE (< 992px)
========================================================================== */
@media (max-width: 991px) {
.aeo-site-header__inner {
padding: 12px 18px;
border-radius: 18px;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.aeo-site-header .aeo-site-nav {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(86vw, 360px);
display: block;
padding: 84px 22px 28px;
background-color: var(--ah-surface);
box-shadow: -20px 0 60px rgba(23, 20, 39, 0.18);
transform: translateX(100%);
transition: transform 0.28s ease;
overflow-y: auto;
z-index: 9999;
}
.admin-bar .aeo-site-header .aeo-site-nav {
top: 46px;
}
.aeo-site-header .aeo-nav {
flex-direction: column;
align-items: stretch;
gap: 2px;
}
/* Panel-ul nav se deschide când body.aeo-menu-open (robust, fără :has). */
body.aeo-menu-open .aeo-site-header .aeo-site-nav {
transform: translateX(0);
}
.aeo-site-header .aeo-nav__link {
padding: 14px 12px;
font-size: 17px;
border-radius: 10px;
}
.aeo-site-header .aeo-nav__item--has-dropdown {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.aeo-site-header .aeo-nav__item--has-dropdown > .aeo-nav__link {
flex: 1 1 auto;
}
.aeo-site-header .aeo-nav__caret {
display: none;
}
.aeo-site-header .aeo-nav__sub-toggle {
display: block;
position: relative;
width: 44px;
height: 44px;
flex-shrink: 0;
background: none;
border: 1px solid var(--ah-border);
border-radius: 10px;
cursor: pointer;
}
.aeo-site-header .aeo-nav__sub-toggle::before,
.aeo-site-header .aeo-nav__sub-toggle::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background-color: var(--ah-violet);
border-radius: 2px;
transform: translate(-50%, -50%);
}
.aeo-site-header .aeo-nav__sub-toggle::before {
width: 12px;
height: 2px;
}
.aeo-site-header .aeo-nav__sub-toggle::after {
width: 2px;
height: 12px;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.aeo-site-header .aeo-nav__item--has-dropdown.is-expanded .aeo-nav__sub-toggle::after {
transform: translate(-50%, -50%) scaleY(0);
opacity: 0;
}
.aeo-site-header .aeo-nav__dropdown {
position: static;
width: 100%;
flex-basis: 100%;
min-width: 0;
margin: 2px 0 6px;
padding: 4px 0 4px 14px;
border: 0;
border-left: 2px solid var(--ah-border);
border-radius: 0;
box-shadow: none;
opacity: 1;
visibility: visible;
transform: none;
display: none;
}
.aeo-site-header .aeo-nav__item--has-dropdown.is-expanded .aeo-nav__dropdown {
display: block;
}
.aeo-site-header .aeo-nav__dropdown a {
font-size: 15px;
padding: 10px 12px;
}
.aeo-site-header .aeo-nav__item--actions {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--ah-border-soft);
}
.aeo-site-header .aeo-nav__item--actions .aeo-header-btn {
justify-content: center;
padding: 15px 18px;
font-size: 16px;
}
.aeo-site-header .aeo-header-btn--desktop,
.aeo-site-header .aeo-header-search:not(.aeo-header-search--mobile) {
display: none;
}
.aeo-site-header .aeo-header-search--mobile {
display: inline-flex;
}
.aeo-site-header .aeo-site-nav__toggle {
display: flex;
}
.aeo-site-header .aeo-site-nav__close {
display: inline-flex;
}
}
/* Acțiunile din panel ascunse pe desktop */
@media (min-width: 992px) {
.aeo-site-header .aeo-nav__item--actions {
display: none;
}
}
/* Body scroll lock când meniul mobil e deschis */
body.aeo-menu-open {
overflow: hidden;
}
/* =============================================================================
FOOTER
========================================================================== */
.aeo-site-footer {
position: relative;
overflow: hidden;
margin-top: 0;
padding-block: 56px 28px;
background-color: #14101F;
color: rgba(255, 255, 255, 0.72);
}
.aeo-site-footer__glow {
position: absolute;
bottom: -120px;
right: 8%;
width: 420px;
height: 420px;
background: radial-gradient(circle, rgba(154, 77, 255, 0.35) 0%, rgba(255, 79, 163, 0.12) 45%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.aeo-site-footer > .container-aeo {
position: relative;
z-index: 1;
}
.aeo-site-footer__top {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr;
gap: 32px;
padding-bottom: 40px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* Brand */
.aeo-site-footer .aeo-footer-brand__name {
margin: 0 0 14px;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 700);
font-size: 24px;
letter-spacing: -0.02em;
}
.aeo-site-footer .aeo-footer-brand__main {
color: #fff;
}
.aeo-site-footer .aeo-footer-brand__dot {
color: var(--ah-magenta);
}
.aeo-site-footer .aeo-footer-brand__tagline {
margin: 0 0 12px;
font-size: 14px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.66);
max-width: 24em;
}
.aeo-site-footer .aeo-footer-brand__meta {
margin: 0 0 18px;
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
}
.aeo-site-footer .aeo-footer-brand__social {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.8);
transition: background-color 0.16s ease, color 0.16s ease;
}
.aeo-site-footer .aeo-footer-brand__social:hover {
background-color: rgba(154, 77, 255, 0.25);
color: #fff;
}
.aeo-site-footer .aeo-footer-brand__social svg {
width: 18px;
height: 18px;
}
/* Coloane link-uri */
.aeo-site-footer .aeo-footer-col {
margin: 0;
}
.aeo-site-footer .aeo-footer-col__list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 11px;
}
.aeo-site-footer .aeo-footer-col__list a {
font-size: 14px;
color: rgba(255, 255, 255, 0.66);
text-decoration: none;
transition: color 0.15s ease;
}
.aeo-site-footer .aeo-footer-col__list a:hover {
color: #fff;
}
/* Contact card */
.aeo-site-footer .aeo-footer-contact__text {
margin: 0 0 14px;
font-size: 14px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.66);
}
.aeo-site-footer .aeo-footer-contact__email {
display: inline-block;
margin-bottom: 16px;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 15px;
color: #fff;
text-decoration: none;
}
.aeo-site-footer .aeo-footer-contact__email:hover {
color: var(--ah-magenta);
}
.aeo-site-footer .aeo-footer-contact__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 20px;
background: var(--ah-grad);
border-radius: 8px;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 14px;
color: #fff;
text-decoration: none;
transition: transform 0.12s ease, box-shadow 0.16s ease;
}
.aeo-site-footer .aeo-footer-contact__btn:hover {
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(123, 44, 255, 0.3);
}
.aeo-site-footer .aeo-footer-contact__btn svg {
width: 16px;
height: 16px;
}
/* Bottom bar */
.aeo-site-footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 24px;
}
.aeo-site-footer__copy,
.aeo-site-footer__credit {
margin: 0;
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
}
.aeo-site-footer__credit {
color: rgba(255, 255, 255, 0.6);
}
/* Footer — coloane (desktop vizibile, mobile accordion via JS) */
.aeo-site-footer .aeo-footer-col__head {
display: block;
width: 100%;
margin: 0 0 16px;
padding: 0;
background: none;
border: 0;
font-family: var(--font-display);
font-weight: var(--fw-semibold, 600);
font-size: 15px;
color: #fff;
text-align: left;
}
@media (min-width: 768px) {
/* Desktop: head non-interactiv, liste mereu vizibile */
.aeo-site-footer .aeo-footer-col__head {
cursor: default;
}
.aeo-site-footer .aeo-footer-col__list {
display: flex;
}
}
@media (max-width: 767px) {
.aeo-site-footer {
padding-block: 40px 24px;
}
.aeo-site-footer__top {
grid-template-columns: 1fr;
gap: 4px;
}
.aeo-site-footer .aeo-footer-brand {
margin-bottom: 20px;
}
.aeo-site-footer .aeo-footer-col {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 14px 0;
}
.aeo-site-footer .aeo-footer-col__head {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0;
cursor: pointer;
}
.aeo-site-footer .aeo-footer-col__head::after {
content: "+";
font-size: 20px;
font-weight: 400;
color: var(--ah-magenta);
}
.aeo-site-footer .aeo-footer-col.is-open .aeo-footer-col__head::after {
content: "−";
}
/* Mobile: liste ascunse implicit, deschise când coloana e .is-open */
.aeo-site-footer .aeo-footer-col__list {
display: none;
margin-top: 14px;
}
.aeo-site-footer .aeo-footer-col.is-open .aeo-footer-col__list {
display: flex;
}
.aeo-site-footer .aeo-footer-contact {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.aeo-site-footer__bottom {
flex-direction: column;
align-items: flex-start;
}
}
/* =============================================================================
ACCESIBILITATE — focus states
========================================================================== */
.aeo-site-header a:focus-visible,
.aeo-site-header button:focus-visible,
.aeo-site-footer a:focus-visible {
outline: 2px solid var(--ah-violet);
outline-offset: 2px;
border-radius: 6px;
}
.aeo-site-footer a:focus-visible {
outline-color: var(--ah-magenta);
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
.aeo-site-header .aeo-site-nav,
.aeo-site-header .aeo-header-btn--primary:hover,
.aeo-site-footer .aeo-footer-contact__btn:hover {
transition: none;
transform: none;
}
}
/* =============================================================================
v0.5.2 — FOOTER FIDELITY (mai dens, mai prezent)
========================================================================== */
.aeo-site-footer {
padding-block: 64px 30px;
}
.aeo-site-footer__top {
gap: 40px;
padding-bottom: 44px;
}
/* Brand mai prezent */
.aeo-site-footer .aeo-footer-brand__name {
font-size: 28px;
margin-bottom: 16px;
}
.aeo-site-footer .aeo-footer-brand__tagline {
font-size: 15px;
color: rgba(255, 255, 255, 0.72);
}
.aeo-site-footer .aeo-footer-brand__meta {
font-size: 13px;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 20px;
}
/* Headings coloane mai lizibile */
.aeo-site-footer .aeo-footer-col__head {
font-size: 16px;
letter-spacing: 0.01em;
margin-bottom: 18px;
}
/* Linkuri mai puțin fade + spacing */
.aeo-site-footer .aeo-footer-col__list {
gap: 13px;
}
.aeo-site-footer .aeo-footer-col__list a {
font-size: 14.5px;
color: rgba(255, 255, 255, 0.74);
}
.aeo-site-footer .aeo-footer-col__list a:hover {
color: #fff;
}
/* Contact card mai prezent */
.aeo-site-footer .aeo-footer-contact__text {
font-size: 14.5px;
color: rgba(255, 255, 255, 0.74);
}
.aeo-site-footer .aeo-footer-contact__email {
font-size: 16px;
}
.aeo-site-footer .aeo-footer-contact__btn {
padding: 12px 22px;
font-size: 15px;
}
/* Glow mai prezent dar discret */
.aeo-site-footer__glow {
width: 480px;
height: 480px;
opacity: 0.9;
}
/* Bottom bar mai bine separat */
.aeo-site-footer__bottom {
padding-top: 28px;
}
.aeo-site-footer__copy,
.aeo-site-footer__credit {
font-size: 13.5px;
}
@media (min-width: 768px) {
/* Aliniere verticală mai bună a coloanelor pe desktop */
.aeo-site-footer .aeo-footer-col,
.aeo-site-footer .aeo-footer-contact {
padding-top: 4px;
}
}