/* ===================================================================== Artcetera Lodge - sistem de design web (v1.1, 2026-09-17, ZAO Media) Derivat din „Guideline identitate vizuală V.1" (Ioan Mari / stormy.ro). Un singur fișier: tokens → bază → componente → secțiuni → utilitare. Fără gradiente pe text, fără umbre, fără colțuri rotunjite „app-like". ===================================================================== */ /* ---------- 0. Fonturi (self-hosted, OFL; din kitul de brand 5.Fonts) ---------- */ @font-face { font-family: 'Staatliches'; src: url('../brand/fonts/Staatliches-Regular.woff2') format('woff2'), url('../brand/fonts/Staatliches-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Raleway'; src: url('../brand/fonts/Raleway-VariableFont_wght.woff2') format('woff2-variations'), url('../brand/fonts/Raleway-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Raleway'; src: url('../brand/fonts/Raleway-Italic-VariableFont_wght.woff2') format('woff2-variations'), url('../brand/fonts/Raleway-Italic-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; font-style: italic; font-display: swap; } /* ---------- 1. Tokens ---------- */ :root { /* culori de brand (valorile exacte din ghid) */ --c-bej: #EDD5BE; /* primary: fundaluri, respirație */ --c-verde: #344C34; /* neutral/contrast: titluri, secțiuni închise */ --c-cupru: #CE7F30; /* accent: CTA, linii, detalii (<10% din layout) */ --c-text: #151E15; /* body text */ /* derivate (neoficiale, dar în paleta ghidului) */ --c-ground: #FAF5EF; /* fundalul paginilor */ --c-bej-2: #F3E9DC; /* bej mai deschis, pentru text pe verde */ --c-hairline: #E6D9C8; /* linii fine pe crem */ --c-muted: #5A6A5A; /* text secundar pe crem */ --c-verde-2: #2B3A2B; /* text lung pe crem, mai moale decât negrul */ --c-verde-inchis: #1E2B1E; /* fundal foto întunecat, footer profund */ --c-salvie: #B8D4BC; /* contur logo peste foto, linii pe verde */ --c-cupru-hover: #B96F27; --c-focus: #CE7F30; /* tipografie */ --f-display: 'Staatliches', 'Impact', 'Arial Narrow', sans-serif; --f-body: 'Raleway', 'Segoe UI', Arial, sans-serif; --fs-h1: clamp(56px, 8.5vw, 124px); /* ghid: 120-160 desktop, 48-64 mobil */ --fs-h2: clamp(40px, 5.2vw, 72px); /* ghid: 64-80 */ --fs-h3: clamp(26px, 2.6vw, 36px); /* ghid: 32-40 */ --fs-h4: 22px; --fs-lead: clamp(18px, 1.5vw, 21px); --fs-body: 17px; --fs-small: 15px; --fs-caption: 13px; --lh-body: 1.6; /* spațiere (scara de 8) */ --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px; --section-y: clamp(64px, 8vw, 112px); --gutter: clamp(16px, 4.5vw, 64px); --container: 1312px; --measure: 62ch; /* forme: fără radius rotund; 3px pe butoane, colțuri „tăiate" pe foto */ --r-btn: 3px; --cut-piatra: polygon(3% 0, 97% 1%, 100% 6%, 99% 95%, 96% 100%, 4% 99%, 0 94%, 1% 5%); --torn-bottom: polygon(0 0, 100% 0, 100% 96%, 82% 100%, 60% 97.5%, 38% 100%, 15% 97.5%, 0 100%); --torn-top: polygon(0 3%, 18% 0, 40% 2.5%, 62% 0, 84% 2.5%, 100% 0, 100% 100%, 0 100%); --torn-both: polygon(0 3%, 18% 0, 40% 2.5%, 62% 0, 84% 2.5%, 100% 0, 100% 97%, 82% 100%, 60% 97.5%, 38% 100%, 15% 97.5%, 0 100%); /* mișcare */ --t-fast: 160ms ease; } /* ---------- 2. Bază ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } } body { margin: 0; background: var(--c-ground); color: var(--c-text); font-family: var(--f-body); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; overflow-x: hidden; } img, svg { max-width: 100%; height: auto; display: block; } a { color: var(--c-verde); text-decoration: none; } a:hover { color: var(--c-cupru); } :focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; } p { margin: 0; max-width: var(--measure); } p + p { margin-top: var(--s-2); } ul, ol { margin: 0; padding: 0; list-style: none; } strong { font-weight: 600; } address { font-style: normal; } table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; } th, td { text-align: left; padding: 12px 0; border-top: 1px solid var(--c-hairline); vertical-align: top; } tbody tr:last-child td { border-bottom: 1px solid var(--c-hairline); } th { font-weight: 600; font-size: var(--fs-small); color: var(--c-muted); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--c-cupru); color: var(--c-ground); font-weight: 600; } .skip-link:focus { top: 16px; } /* ---------- 3. Tipografie ---------- */ .h1, .h2, .h3, h1, h2, h3 { font-family: var(--f-display); font-weight: 400; letter-spacing: 0.01em; line-height: 0.95; margin: 0; color: var(--c-verde); text-wrap: balance; } h1, .h1 { font-size: var(--fs-h1); line-height: 0.9; } h2, .h2 { font-size: var(--fs-h2); line-height: 0.98; } h3, .h3 { font-size: var(--fs-h3); line-height: 1; } h4, .h4 { font-family: var(--f-body); font-weight: 600; font-size: var(--fs-h4); margin: 0; line-height: 1.3; } .lead { font-size: var(--fs-lead); line-height: 1.5; } .small { font-size: var(--fs-small); } .muted { color: var(--c-muted); } .eyebrow { font-size: 14px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-cupru); margin-bottom: var(--s-2); } .on-dark, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark .h2, .on-dark .h3 { color: var(--c-ground); } .on-dark p { color: var(--c-bej-2); } .on-dark .eyebrow { color: var(--c-bej); } .on-dark a { color: var(--c-ground); } .on-dark a:hover { color: var(--c-bej); } .on-dark .muted { color: var(--c-salvie); } .display-xl { font-family: var(--f-display); font-size: clamp(64px, 10vw, 140px); line-height: 0.9; color: var(--c-ground); } /* ---------- 4. Layout ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } .section--tight { padding-block: clamp(40px, 5vw, 64px); } .section--bej { background: var(--c-bej); } .section--verde { background: var(--c-verde); } .section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); } .section-head p { max-width: 52ch; } .grid { display: grid; gap: var(--s-4); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--7-5 { grid-template-columns: 7fr 5fr; gap: var(--s-6); } .stack { display: flex; flex-direction: column; gap: var(--s-3); } .stack--sm { gap: var(--s-2); } .stack--lg { gap: var(--s-4); } .torn-bottom { clip-path: var(--torn-bottom); } .torn-top { clip-path: var(--torn-top); } .torn-both { clip-path: var(--torn-both); } @media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--7-5 { grid-template-columns: 1fr; gap: var(--s-5); } } @media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } /* ---------- 5. Butoane și linkuri ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; font-family: var(--f-body); font-weight: 600; font-size: 17px; line-height: 1; border-radius: var(--r-btn); border: 2px solid transparent; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); white-space: nowrap; } .btn--primary { background: var(--c-cupru); color: var(--c-ground); border-color: var(--c-cupru); } .btn--primary:hover { background: var(--c-cupru-hover); border-color: var(--c-cupru-hover); color: var(--c-ground); } .btn--outline { background: transparent; color: var(--c-verde); border-color: var(--c-verde); } .btn--outline:hover { background: var(--c-verde); color: var(--c-ground); } .on-dark .btn--outline, .btn--outline-light { color: var(--c-ground); border-color: var(--c-ground); } .on-dark .btn--outline:hover, .btn--outline-light:hover { background: var(--c-ground); color: var(--c-verde); } .btn--lg { min-height: 58px; padding: 0 34px; font-size: 18px; } .btn--sm { min-height: 44px; padding: 0 20px; font-size: 15px; } .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; color: var(--c-verde); border-bottom: 2px solid var(--c-cupru); padding-bottom: 2px; } .link-arrow::after { content: "→"; transition: transform var(--t-fast); } .link-arrow:hover::after { transform: translateX(4px); } .on-dark .link-arrow { color: var(--c-ground); } /* ---------- 6. Header / navigație ---------- */ .site-header { position: absolute; inset: 0 0 auto 0; z-index: 50; padding-block: 20px; } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); } .brand img { height: 34px; width: auto; } .nav { display: flex; align-items: center; gap: 28px; } .nav__list { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; } .nav__list > li { position: relative; } .nav__list a { color: var(--c-ground); padding: 8px 0; display: inline-block; } .nav__list a:hover { color: var(--c-bej); } .nav__sub { position: absolute; top: 100%; left: -16px; min-width: 220px; padding: 12px 0; background: var(--c-verde); display: none; flex-direction: column; } .nav__sub a { display: block; padding: 10px 20px; font-size: 15px; } .has-sub:hover .nav__sub, .has-sub:focus-within .nav__sub { display: flex; } .has-sub > a::after { content: " ▾"; font-size: 12px; } .nav__cta { margin-left: 4px; } /* pagini cu hero bej (ghid, experiențe, legale): header-ul trece pe verde */ .brand__dark { display: none; } body:has(.page-hero--bej) .brand__light { display: none; } body:has(.page-hero--bej) .brand__dark { display: block; } body:has(.page-hero--bej) .nav__list a:not(.btn) { color: var(--c-verde); } body:has(.page-hero--bej) .nav__list a:not(.btn):hover { color: var(--c-cupru); } body:has(.page-hero--bej) .nav__sub { background: var(--c-verde); } body:has(.page-hero--bej) .nav__sub a { color: var(--c-ground); } body:has(.page-hero--bej) .nav-toggle { color: var(--c-verde); border-color: var(--c-verde); } body:has(.page-hero--bej) .nav.is-open .nav__list a:not(.btn) { color: var(--c-ground); } body:has(.page-hero--bej) .nav.is-open + .nav-toggle, body:has(.page-hero--bej) .nav.is-open ~ .nav-toggle { color: var(--c-ground); border-color: var(--c-ground); } .nav__list .btn { padding: 0 20px; color: var(--c-ground); } .nav-toggle { display: none; background: transparent; border: 2px solid var(--c-ground); color: var(--c-ground); border-radius: var(--r-btn); min-height: 44px; padding: 0 14px; font: 600 15px var(--f-body); cursor: pointer; } @media (max-width: 1020px) { .nav__list { display: none; } .nav-toggle { display: inline-flex; align-items: center; gap: 8px; } .nav__cta { display: none; } .nav.is-open .nav__list { display: flex; flex-direction: column; align-items: flex-start; gap: 0; position: fixed; inset: 0; z-index: 60; background: var(--c-verde); padding: 96px var(--gutter) 40px; font-size: 24px; font-family: var(--f-display); letter-spacing: 0.02em; } .nav.is-open .nav__list a { padding: 14px 0; } .nav.is-open .nav__sub { position: static; display: flex; padding: 0 0 8px 20px; background: transparent; } .nav.is-open .nav__sub a { font-family: var(--f-body); font-size: 17px; padding: 8px 0; } .nav.is-open .nav__list .nav__cta { display: block; margin-top: 24px; } .nav.is-open .nav-toggle { position: fixed; top: 20px; right: var(--gutter); z-index: 70; } } /* ---------- 7. Hero ---------- */ .hero { position: relative; color: var(--c-ground); background: var(--c-verde-inchis); min-height: min(88vh, 900px); display: flex; align-items: center; padding-block: 140px 88px; isolation: isolate; } .hero__media { position: absolute; inset: 0; z-index: -2; } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; } .hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(21,30,21,0.55) 0%, rgba(21,30,21,0.18) 45%, rgba(21,30,21,0.66) 100%); } .hero__content { max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-3); } .hero .eyebrow { color: var(--c-bej); margin: 0; } .hero h1 { color: var(--c-ground); } .hero .lead { color: var(--c-bej-2); max-width: 620px; } .hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-1); } .hero__facts { position: absolute; left: 0; right: 0; bottom: 0; padding-block: 18px; border-top: 1px solid rgba(250,245,239,0.25); background: rgba(21,30,21,0.35); font-size: var(--fs-small); color: var(--c-bej-2); } .hero__facts ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; } .hero__facts li { display: flex; align-items: center; gap: 10px; } .hero__facts li::before { content: ""; width: 6px; height: 6px; background: var(--c-cupru); } @media (max-width: 700px) { .hero { min-height: auto; padding-block: 120px 176px; } .hero__media img { object-position: 60% 50%; } .hero__facts ul { gap: 6px 18px; } } /* ---------- 8. Foto și cadre ---------- */ .figure { position: relative; overflow: hidden; background: var(--c-bej); } .figure img { width: 100%; height: 100%; object-fit: cover; } .figure--piatra { clip-path: var(--cut-piatra); } .figure--torn { clip-path: var(--torn-bottom); } .figure--4-5 { aspect-ratio: 4 / 5; } .figure--3-4 { aspect-ratio: 3 / 4; } .figure--16-9 { aspect-ratio: 16 / 9; } .figure img.figure__badge { position: absolute; left: 16px; top: 16px; width: 88px; height: auto; } .figure__note { position: absolute; right: 12px; bottom: 12px; font-size: 12px; padding: 5px 9px; background: rgba(21,30,21,0.6); color: var(--c-ground); } /* ---------- 9. Componente de conținut ---------- */ .feature { display: flex; flex-direction: column; gap: 18px; } .feature h3 { margin-top: 4px; } .feature p { color: var(--c-verde-2); } .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; } .facts li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.45; } .facts li::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; margin-top: 8px; background: var(--c-cupru); } .facts strong { display: block; color: var(--c-verde); } .room { display: flex; flex-direction: column; gap: 10px; padding: 28px; background: var(--c-ground); border-top: 3px solid var(--c-verde); } .room__name { font-family: var(--f-display); font-size: 30px; color: var(--c-verde); line-height: 1; } .room ul { display: flex; flex-direction: column; gap: 6px; color: var(--c-verde-2); font-size: 16px; } .room li::before { content: "· "; color: var(--c-cupru); font-weight: 700; } .zones { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px; } .zones a { display: block; transition: transform var(--t-fast); } .zones a:hover { transform: translateY(-4px); } @media (max-width: 900px) { .zones { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 480px) { .zones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } } .price-list { display: flex; flex-direction: column; } .price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; border-top: 1px solid var(--c-hairline); } .price-row:last-child { border-bottom: 1px solid var(--c-hairline); } .price-row__label { font-weight: 600; font-size: 18px; } .price-row__label small { display: block; font-weight: 400; font-size: 14px; color: var(--c-muted); } .price-row__value { font-family: var(--f-display); font-size: 34px; color: var(--c-verde); white-space: nowrap; line-height: 1; } @media (max-width: 480px) { .price-row { flex-direction: column; align-items: flex-start; gap: 6px; } } .panel { padding: clamp(28px, 4vw, 44px); background: var(--c-verde); color: var(--c-ground); display: flex; flex-direction: column; gap: 18px; } .panel--bej { background: var(--c-bej); color: var(--c-text); } .panel img.badge { width: 88px; } .quote { margin: 0; padding-left: 24px; border-left: 3px solid var(--c-cupru); display: flex; flex-direction: column; gap: 12px; } .quote p { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; font-style: italic; color: var(--c-verde-2); max-width: none; } .quote cite { font-style: normal; font-size: var(--fs-small); color: var(--c-muted); } .rating { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-small); color: var(--c-muted); } .rating__stars { color: var(--c-cupru); letter-spacing: 2px; font-size: 16px; } .card { display: flex; flex-direction: column; gap: 14px; } .card .figure { aspect-ratio: 4 / 3; } .card h3 { font-size: 26px; } .card p { color: var(--c-verde-2); font-size: 16px; } .card__meta { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-cupru); font-weight: 600; } .distances td:last-child, .distances th:last-child { text-align: right; white-space: nowrap; } .map-box { position: relative; background: var(--c-verde); color: var(--c-ground); padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; gap: 14px; min-height: 100%; } .map-box .logo-outline { position: absolute; right: 24px; bottom: 20px; width: 96px; opacity: 0.9; } @media (max-width: 900px) { .map-box .logo-outline { display: none; } } .statement { position: relative; background: var(--c-verde); color: var(--c-ground); overflow: hidden; padding-block: clamp(96px, 12vw, 160px); text-align: center; } .statement__media { position: absolute; inset: 0; opacity: 0.55; } .statement__media img { width: 100%; height: 100%; object-fit: cover; } .statement .container { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; } .statement p:not(.display-xl) { color: var(--c-bej); max-width: 620px; font-size: var(--fs-lead); } .statement .display-xl { max-width: none; } .statement .logo-mark { position: absolute; right: var(--gutter); bottom: 32px; width: 100px; opacity: 0.9; } .cta-band { background: var(--c-verde); color: var(--c-ground); padding-block: var(--section-y); } .cta-band .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); } .cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); } /* ---------- 10. Formular (pentru pagina Tarife și rezervare) ---------- */ .form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; } .form .field--full { grid-column: 1 / -1; } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-weight: 600; font-size: var(--fs-small); } .field input, .field select, .field textarea { font: 400 16px var(--f-body); color: var(--c-text); background: var(--c-ground); border: 1.5px solid var(--c-verde); border-radius: var(--r-btn); padding: 12px 14px; min-height: 48px; } .field textarea { min-height: 120px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--c-cupru); outline-offset: 2px; } .field--check { flex-direction: row; align-items: flex-start; gap: 10px; font-size: var(--fs-small); } .form__hint { grid-column: 1 / -1; font-size: var(--fs-small); color: var(--c-muted); } @media (max-width: 600px) { .form { grid-template-columns: 1fr; } } /* ---------- 11. Footer ---------- */ .site-footer { background: var(--c-verde); color: var(--c-bej); padding-block: 64px 120px; font-size: var(--fs-small); line-height: 1.7; } .site-footer .container { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-5); } .site-footer h4 { color: var(--c-ground); font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; } .site-footer a { color: var(--c-bej); } .site-footer a:hover { color: var(--c-ground); } .site-footer ul { display: flex; flex-direction: column; gap: 6px; } .site-footer .brand img { height: 30px; margin-bottom: 14px; } .site-footer__bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid rgba(184,212,188,0.25); font-size: 13px; color: var(--c-salvie); } @media (max-width: 900px) { .site-footer .container { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .site-footer .container { grid-template-columns: 1fr; } .site-footer { padding-bottom: 140px; } } /* ---------- 12. Bara fixă pe mobil ---------- */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--c-ground); border-top: 1px solid var(--c-hairline); gap: 10px; align-items: center; } .sticky-cta .btn { flex: 1; } .sticky-cta .btn--wa { flex: 0 0 auto; padding: 0 16px; } @media (max-width: 700px) { .sticky-cta { display: flex; } } /* ---------- 13. Utilitare ---------- */ .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .center { text-align: center; } .self-start { align-self: flex-start; } .hide-mobile { } .hide-desktop { display: none; } @media (max-width: 700px) { .hide-mobile { display: none; } .hide-desktop { display: block; } } .placeholder-note { font-size: 12px; color: var(--c-muted); } /* ---------- 14. Componente pentru paginile interioare ---------- */ /* hero scurt (pagini fără foto full) */ .page-hero { background: var(--c-verde); color: var(--c-ground); padding-block: 140px 56px; } .page-hero--bej { background: var(--c-bej); color: var(--c-text); } .page-hero h1 { color: var(--c-ground); font-size: clamp(44px, 6.5vw, 96px); } .page-hero .eyebrow { color: var(--c-bej); } .page-hero.page-hero--bej h1, .page-hero.page-hero--bej .eyebrow { color: var(--c-verde); } .page-hero.page-hero--bej .breadcrumbs a, .page-hero.page-hero--bej .breadcrumbs { color: var(--c-verde-2); } .page-hero .lead { color: var(--c-bej-2); max-width: 60ch; } .page-hero--bej .lead { color: var(--c-verde-2); } .page-hero .container { display: flex; flex-direction: column; gap: var(--s-3); } .page-hero--photo { position: relative; min-height: 520px; display: flex; align-items: flex-end; padding-block: 140px 56px; isolation: isolate; } .page-hero--photo .hero__media, .page-hero--photo .hero__shade { position: absolute; inset: 0; } .page-hero--photo .hero__media { z-index: -2; } .page-hero--photo .hero__shade { z-index: -1; } .page-hero--photo .hero__media img { width: 100%; height: 100%; object-fit: cover; } /* header pe fundal închis fără foto: header-ul e absolut, deci page-hero are padding-top mare */ .breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--c-muted); } .breadcrumbs a { color: inherit; } .breadcrumbs a:hover { color: var(--c-cupru); } .breadcrumbs li + li::before { content: "/"; margin-right: 8px; color: var(--c-hairline); } .on-dark .breadcrumbs, .on-dark .breadcrumbs a { color: var(--c-salvie); } /* zonă a casei (Facilități): icon + foto + text, alternând stânga/dreapta */ .zone { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-6); align-items: center; padding-block: var(--s-5); border-top: 1px solid var(--c-hairline); } .zone:nth-child(even) .zone__media { order: 2; } .zone__media { position: relative; } .zone__media .figure { aspect-ratio: 4 / 3; } .zone__badge { position: absolute; left: -16px; top: -16px; width: 110px; } .zone__body { display: flex; flex-direction: column; gap: 14px; } .zone__body p { color: var(--c-verde-2); } .zone__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: var(--fs-small); color: var(--c-muted); } @media (max-width: 900px) { .zone { grid-template-columns: 1fr; gap: var(--s-4); } .zone:nth-child(even) .zone__media { order: 0; } } /* FAQ (details/summary), cu schema FAQPage în JSON-LD */ .faq { display: flex; flex-direction: column; border-top: 1px solid var(--c-hairline); } .faq details { border-bottom: 1px solid var(--c-hairline); } .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-weight: 600; font-size: 17px; color: var(--c-verde); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-family: var(--f-display); font-size: 28px; color: var(--c-cupru); line-height: 1; flex: 0 0 auto; } .faq details[open] summary::after { content: "–"; } .faq .faq__a { padding: 0 0 20px; color: var(--c-verde-2); max-width: 70ch; } /* tarife pe persoane (luni-joi) */ .rate-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); } .rate-card { display: flex; flex-direction: column; gap: 6px; padding: 24px; background: var(--c-ground); border-top: 3px solid var(--c-cupru); } .rate-card__who { font-weight: 600; font-size: var(--fs-small); color: var(--c-muted); letter-spacing: 0.06em; text-transform: uppercase; } .rate-card__price { font-family: var(--f-display); font-size: 40px; color: var(--c-verde); line-height: 1; } .rate-card__note { font-size: var(--fs-small); color: var(--c-verde-2); } @media (max-width: 700px) { .rate-cards { grid-template-columns: 1fr; } } /* calendar de disponibilitate (placeholder pentru plugin) */ .calendar-box { border: 1.5px solid var(--c-verde); padding: 24px; display: flex; flex-direction: column; gap: 12px; background: var(--c-ground); } .calendar-box__legend { display: flex; gap: 18px; font-size: var(--fs-small); color: var(--c-muted); } .calendar-box__legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; background: var(--c-salvie); } .calendar-box__legend span.busy::before { background: var(--c-hairline); } /* pași (cum rezervi, cum ajungi) - numerotarea are sens: e o secvență */ .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); counter-reset: step; } .step { display: flex; flex-direction: column; gap: 10px; } .step::before { counter-increment: step; content: counter(step); font-family: var(--f-display); font-size: 44px; line-height: 1; color: var(--c-cupru); } .step h3 { font-size: 26px; } .step p { color: var(--c-verde-2); font-size: 16px; } @media (max-width: 700px) { .steps { grid-template-columns: 1fr; } } /* articol (ghid) */ .article { max-width: 72ch; margin-inline: auto; display: flex; flex-direction: column; gap: var(--s-3); } .article h2 { font-size: clamp(32px, 3.6vw, 48px); margin-top: var(--s-3); } .article h3 { font-size: 26px; margin-top: var(--s-2); } .article p, .article li { color: var(--c-verde-2); font-size: 17px; } .article ul { display: flex; flex-direction: column; gap: 8px; padding-left: 18px; list-style: disc; } .article .figure { margin-block: var(--s-2); } .article__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--fs-small); color: var(--c-muted); } .article blockquote { margin: 0; padding-left: 20px; border-left: 3px solid var(--c-cupru); font-style: italic; } .callout { background: var(--c-bej); padding: 24px 28px; display: flex; flex-direction: column; gap: 10px; } .callout--verde { background: var(--c-verde); color: var(--c-ground); } .callout--verde p { color: var(--c-bej-2); } /* galerie foto */ .gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .gallery .figure { aspect-ratio: 4 / 3; } .gallery .figure--tall { grid-row: span 2; aspect-ratio: auto; } @media (max-width: 700px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* listă de categorii / taguri (hub) */ .chips { display: flex; flex-wrap: wrap; gap: 10px; } .chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1.5px solid var(--c-verde); border-radius: var(--r-btn); font-size: 14px; font-weight: 600; color: var(--c-verde); } .chip:hover, .chip.is-active { background: var(--c-verde); color: var(--c-ground); } /* postări recente (hub) */ .post-list { display: flex; flex-direction: column; } .post-row { display: grid; grid-template-columns: 140px 1fr auto; gap: 20px; align-items: center; padding: 18px 0; border-top: 1px solid var(--c-hairline); } .post-row:last-child { border-bottom: 1px solid var(--c-hairline); } .post-row .figure { aspect-ratio: 4 / 3; } .post-row h3 { font-size: 24px; } .post-row time { font-size: var(--fs-small); color: var(--c-muted); white-space: nowrap; } @media (max-width: 600px) { .post-row { grid-template-columns: 1fr; } } /* bandă de ofertă (Founding Guest) */ .offer-band { background: var(--c-bej); padding-block: var(--s-6); } .offer-band .container { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: center; } .offer-band__count { font-family: var(--f-display); font-size: 56px; line-height: 1; color: var(--c-cupru); } @media (max-width: 800px) { .offer-band .container { grid-template-columns: 1fr; } } /* pagină de text (legale) */ .prose { max-width: 72ch; display: flex; flex-direction: column; gap: var(--s-2); } .prose h2 { font-size: 34px; margin-top: var(--s-3); } .prose p, .prose li { color: var(--c-verde-2); } .prose ul { padding-left: 18px; list-style: disc; display: flex; flex-direction: column; gap: 6px; } /* logo SVG în header/footer */ .brand svg, .brand img { height: 34px; width: auto; } /* ---------- 12. Extensii v1.2 (28.09.2026, după feedback pe home-ul live) ---------- */ /* header: logo mai mare decât CTA-ul, CTA centrat corect (era inline-block din .nav__list a) */ .brand img, .brand svg { height: 46px; } .nav__list .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; line-height: 1; } /* hero: sursă diferită pe mobil (portret) */ .hero__media picture { display: block; width: 100%; height: 100%; } /* badge-urile de zonă pe fotografii: mai mari, lizibile */ .figure img.figure__badge { width: 140px; left: 18px; top: 18px; } @media (max-width: 600px) { .figure img.figure__badge { width: 112px; } } /* dormitoare cu fotografie */ .room { padding: 0 0 24px; overflow: hidden; } .room__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-bej); } .room__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .room__name, .room p, .room ul { padding-inline: 24px; } .room__name { padding-top: 18px; } .room p { color: var(--c-verde-2); font-size: 16px; } /* zonele casei: etichetă sub fiecare icon, fără paragraf lateral */ .zones li { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .zones__label { font-size: 14px; line-height: 1.3; color: var(--c-verde-2); } .zones__label strong { display: block; color: var(--c-verde); font-weight: 600; } /* panel luni-joi: fără badge */ .panel img.badge { display: none; } /* harta în blocul de adresă */ .map-box { padding: 0; overflow: hidden; } .map-box__text { padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 14px; } .map-box__map { flex: 1 1 auto; min-height: 320px; } .map-box__map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; filter: saturate(0.85); } .map-box .logo-outline { display: none; } /* benzile de jos: Founding Guest pe off-white (între două blocuri bej), CTA final pe off-white, distinct de footer */ .offer-band { background: var(--c-ground); border-top: 3px solid var(--c-cupru); } .cta-band { background: var(--c-ground); color: var(--c-verde); border-top: 1px solid var(--c-hairline); } .cta-band .on-dark h2, .cta-band h2 { color: var(--c-verde); } .cta-band .on-dark p, .cta-band p { color: var(--c-verde-2); } .cta-band .btn--outline-light { color: var(--c-verde); border-color: var(--c-verde); } .cta-band .btn--outline-light:hover { background: var(--c-verde); color: var(--c-ground); } /* v1.2 (b): aliniere la Propunerea 2 */ /* conturul logo-ului peste fotografiile din „trei motive": același loc, aceeași mărime și culoare pe fiecare poză */ .figure img.figure__outline { position: absolute; right: -6%; bottom: -4%; width: 62%; height: auto; opacity: 0.95; pointer-events: none; } /* banda „Încetinește.": textura casei (rocă + lemn), întunecată, cu semnul logo-ului în dreapta jos */ .statement__media { opacity: 0.32; } .statement__media img { filter: saturate(0.7); } /* zonele casei: bandă bej cu margini rupte, ca în propunere */ .section--zone { background: var(--c-bej); } .section--zone .section-head { margin-bottom: var(--s-4); } /* hero: banda de fapte pe verde plin, sub fotografie */ .hero__facts { background: var(--c-verde); } .hero__facts li { color: var(--c-bej-2); } /* Founding Guest pe verde, între povestea (bej) și CTA-ul final (off-white) */ .offer-band { background: var(--c-verde); color: var(--c-ground); border-top: 0; } .offer-band h2, .offer-band .eyebrow { color: var(--c-ground); } .offer-band p { color: var(--c-bej-2); } .offer-band .link-arrow { color: var(--c-ground); } .offer-band .muted { color: var(--c-bej); } /* link-arrow cu clasa on-dark pusă direct pe link (panel luni-joi) */ .link-arrow.on-dark { color: var(--c-ground); } /* ---------- 14. Extensii v1.3 (28.09.2026, runda a doua de feedback) ---------- */ /* Margini rupte între secțiuni: adâncime fixă în px (nu procent din înălțime) și suprapunere peste vecin, ca golurile dintre „dinți" să arate culoarea secțiunii vecine, nu fundalul paginii (fără dungi off-white). Trei profiluri de rupere (a/b/c), ca tranzițiile să nu fie identice. */ :root { --tear: 20px; --tt: 0 14px, 17% 0, 39% 16px, 61% 3px, 83% 18px, 100% 2px; --tb: 100% calc(100% - 16px), 81% 100%, 59% calc(100% - 14px), 37% calc(100% - 1px), 16% calc(100% - 18px), 0 calc(100% - 4px); } .tear-b { --tt: 0 4px, 12% 18px, 33% 2px, 55% 15px, 78% 0, 100% 16px; --tb: 100% calc(100% - 3px), 86% calc(100% - 18px), 64% 100%, 44% calc(100% - 15px), 22% calc(100% - 1px), 0 calc(100% - 17px); } .tear-c { --tt: 0 18px, 22% 3px, 45% 17px, 67% 0, 89% 14px, 100% 6px; --tb: 100% calc(100% - 12px), 74% 100%, 52% calc(100% - 17px), 29% calc(100% - 2px), 8% calc(100% - 15px), 0 100%; } :is(section, footer).torn-top { clip-path: polygon(var(--tt), 100% 100%, 0 100%); } :is(section, footer).torn-bottom { clip-path: polygon(0 0, 100% 0, var(--tb)); } :is(section, footer).torn-both { clip-path: polygon(var(--tt), var(--tb)); } :is(section, footer):is(.torn-top, .torn-bottom, .torn-both) { position: relative; z-index: 2; } /* secțiunea cu margine ruptă sus urcă peste cea de dinainte; cea de după o margine ruptă jos urcă sub ea */ :is(section, footer):is(.torn-top, .torn-both), section:is(.torn-bottom, .torn-both) + section { margin-top: calc(-1 * var(--tear)); } /* secțiunea care urcă sub o margine ruptă stă mereu dedesubt, chiar dacă are și ea margini rupte */ section:is(.torn-bottom, .torn-both) + section { position: relative; z-index: 1; } section:is(.torn-bottom, .torn-both) + section:not(.torn-bottom, .torn-both) { z-index: 0; } .cta-band { border-top: 0; } .statement .logo-mark { bottom: 48px; } /* poza din panelul „Luni-joi": umple spațiul rămas, până la marginile panelului */ .panel { --panel-pad: clamp(28px, 4vw, 44px); padding: var(--panel-pad); } .panel__media { flex: 1 1 220px; margin: 10px calc(-1 * var(--panel-pad)) calc(-1 * var(--panel-pad)); min-height: 220px; overflow: hidden; } .panel__media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* antet de secțiune pe două coloane: titlu stânga, text + link dreapta (fără gol în dreapta) */ .section-head--split { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-3) var(--s-6); align-items: end; } .section-head--split > * { margin: 0; } .section-head--split .section-head__aside { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); } .section-head--split .section-head__aside p { max-width: 46ch; color: var(--c-verde-2); } @media (max-width: 900px) { .section-head--split { grid-template-columns: 1fr; } } /* bara fixă pe mobil: textul scurt și butoanele încap pe 360-390 px */ @media (max-width: 700px) { .sticky-cta { gap: 8px; padding-inline: 12px; } .sticky-cta .btn { min-height: 48px; padding: 0 14px; font-size: 16px; } .sticky-cta .btn--wa { padding: 0 14px; } } /* hero pe mobil: umbră mai puternică pentru lizibilitate peste poza portret */ @media (max-width: 700px) { .hero__shade { background: linear-gradient(180deg, rgba(21,30,21,0.66) 0%, rgba(21,30,21,0.48) 45%, rgba(21,30,21,0.72) 100%); } .hero__media img { object-position: 50% 50%; } } /* ---------- 15. Blocuri native (editorul vizual WordPress), v1.4, 01.10.2026 ---------- Pagina e construită din blocuri editabile vizual; clasele de design de mai sus se aplică pe marcajul lor. Ritmul vertical îl dau .stack / .grid / .section, nu marginile implicite ale WordPress. */ html body .is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; } html body .is-layout-flow > p + p { margin-block-start: var(--s-2); } html body .wp-block-buttons { gap: var(--s-2); } /* marginile din design pe care resetul de mai sus le-ar anula */ html body .is-layout-flow > .eyebrow { margin-block-end: var(--s-2); } html body .hero .is-layout-flow > .eyebrow { margin-block-end: 0; } html body .is-layout-flow > .section-head { margin-block-end: var(--s-5); } html body .section--zone .is-layout-flow > .section-head { margin-block-end: var(--s-4); } html body .section-head--split.is-layout-flow > * { margin: 0; } html body .is-layout-flow > .mt-2 { margin-block-start: var(--s-2); } html body .is-layout-flow > .mt-3 { margin-block-start: var(--s-3); } html body .is-layout-flow > .mt-4 { margin-block-start: var(--s-4); } html body .is-layout-flow > .mt-5 { margin-block-start: var(--s-5); } html body .is-layout-flow > .hero__actions { margin-block-start: var(--s-1); } html body .feature.is-layout-flow > h3 { margin-block-start: 4px; } html body .is-layout-flow > .offer-band__label { margin-block-start: 28px; } html body .offer-band p.offer-band__count { color: var(--c-cupru); } html body .offer-band p.offer-band__label { color: var(--c-bej); } /* în original erau span/div; ca paragrafe, regulile „.card p” / „.room p” le-ar suprascrie */ html body .card p.card__meta { font-size: 13px; line-height: 1.6; color: var(--c-cupru); } html body .room p.room__name { font-size: 30px; line-height: 1; color: var(--c-verde); } html body .is-layout-flow > p.link-arrow-wrap { margin-block-start: 0; } html body .is-layout-flow > .panel__media { margin-block: 10px calc(-1 * var(--panel-pad)); } /* articole (Descoperă Bucovina) și pagini simple: textul scris în editor are aceeași aerisire ca în șablon */ html body :is(.article, .prose) > .wp-block-post-content { display: flex; flex-direction: column; gap: var(--s-3); } html body .prose > .wp-block-post-content { gap: var(--s-2); } html body :is(.article, .prose) .is-layout-flow > h2 { margin-block-start: var(--s-3); } html body .article .is-layout-flow > h3 { margin-block-start: var(--s-2); } html body .article .is-layout-flow > .wp-block-image { margin-block: var(--s-2); } /* butoane */ .wp-block-button > .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; font-family: var(--f-body); font-weight: 600; font-size: 17px; line-height: 1; border-radius: var(--r-btn); border: 2px solid transparent; white-space: nowrap; text-decoration: none; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); } .wp-block-button.btn--primary > .wp-block-button__link { background: var(--c-cupru); color: var(--c-ground); border-color: var(--c-cupru); } .wp-block-button.btn--primary > .wp-block-button__link:hover { background: var(--c-cupru-hover); border-color: var(--c-cupru-hover); color: var(--c-ground); } .wp-block-button.btn--outline > .wp-block-button__link { background: transparent; color: var(--c-verde); border-color: var(--c-verde); } .wp-block-button.btn--outline > .wp-block-button__link:hover { background: var(--c-verde); color: var(--c-ground); } .wp-block-button.btn--outline-light > .wp-block-button__link { color: var(--c-ground); border-color: var(--c-ground); } .wp-block-button.btn--outline-light > .wp-block-button__link:hover { background: var(--c-ground); color: var(--c-verde); } .wp-block-button.btn--lg > .wp-block-button__link { min-height: 58px; padding: 0 34px; font-size: 18px; } .cta-band .wp-block-button.btn--outline-light > .wp-block-button__link { color: var(--c-verde); border-color: var(--c-verde); } .cta-band .wp-block-button.btn--outline-light > .wp-block-button__link:hover { background: var(--c-verde); color: var(--c-ground); } /* link cu săgeată = paragraf cu un link */ .link-arrow-wrap a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; color: var(--c-verde); border-bottom: 2px solid var(--c-cupru); padding-bottom: 2px; text-decoration: none; } .link-arrow-wrap a::after { content: "→"; transition: transform var(--t-fast); } .link-arrow-wrap a:hover::after { transform: translateX(4px); } .link-arrow-wrap.on-dark a, .on-dark .link-arrow-wrap a, .offer-band .link-arrow-wrap a { color: var(--c-ground); } .on-dark-text { color: var(--c-bej); } /* liste cu puncte cupru (funcționează și cu , și fără) */ .facts li { display: block; position: relative; padding-left: 20px; } .facts li::before { position: absolute; left: 0; top: 0; } /* imagini în cadre: imaginea umple cadrul */ .figure > .wp-block-image, .room__media > .wp-block-image, .panel__media > .wp-block-image { position: absolute; inset: 0; margin: 0; } .room__media, .panel__media { position: relative; } .figure > .wp-block-image img, .room__media > .wp-block-image img, .panel__media > .wp-block-image img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; } /* iconul zonei și conturul logo-ului pe fotografii: decor din CSS, nu se pot șterge din greșeală */ .figure.has-badge::before { content: ""; position: absolute; left: 18px; top: 18px; width: 140px; aspect-ratio: 234 / 235; z-index: 2; background: center / contain no-repeat; } .figure.has-badge--jacuzzi::before { background-image: url('../brand/icons/zona-jacuzzi.svg'); } .figure.has-badge--chill::before { background-image: url('../brand/icons/zona-chill.svg'); } .figure.has-badge--spre-padure::before { background-image: url('../brand/icons/zona-spre-padure.svg'); } .figure.has-outline::after { content: ""; position: absolute; right: -6%; bottom: -4%; width: 62%; aspect-ratio: 1; z-index: 2; opacity: 0.95; pointer-events: none; background: url('../brand/logo/icon-contur-crem.svg') center / contain no-repeat; } @media (max-width: 600px) { .figure.has-badge::before { width: 112px; } } /* carduri de ghid: tot cardul e clicabil prin linkul din titlu */ .card { position: relative; } .card h3 a { color: inherit; text-decoration: none; } .card h3 a::after { content: ""; position: absolute; inset: 0; } /* rating și citate */ .rating-wrap a { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-small); color: var(--c-muted); text-decoration: none; } .rating-wrap a::before { content: "★★★★★"; color: var(--c-cupru); letter-spacing: 2px; font-size: 16px; } .wp-block-quote.quote { margin: 0; padding: 0 0 0 24px; border: 0; border-left: 3px solid var(--c-cupru); display: flex; flex-direction: column; gap: 12px; } .wp-block-quote.quote p { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; font-style: italic; color: var(--c-verde-2); max-width: none; margin: 0; } .wp-block-quote.quote cite { font-style: normal; font-size: var(--fs-small); color: var(--c-muted); } /* tabelul de distanțe */ .wp-block-table.distances { margin: 0; overflow-x: auto; } .wp-block-table.distances table { border-collapse: collapse; width: 100%; } .wp-block-table.distances thead { border: 0; } .wp-block-table.distances th, .wp-block-table.distances td { border: 0; border-top: 1px solid var(--c-hairline); padding: 12px 0; } .wp-block-table.distances tbody tr:last-child td { border-bottom: 1px solid var(--c-hairline); } /* Founding Guest: contorul */ .offer-band__count { margin: 0; } .offer-band__label { font-size: 14px; color: var(--c-bej); margin-top: 6px; } /* hero = bloc „Copertă": fotografia și umbra le pune WordPress, restul vine din .hero */ .wp-block-cover.hero { padding: 140px 0 88px; min-height: calc(min(88vh, 900px) - 60px); align-items: center; justify-content: center; } .wp-block-cover.hero > .wp-block-cover__inner-container, .wp-block-cover.statement > .wp-block-cover__inner-container { width: 100%; max-width: none; } .hero__facts.hero-facts { position: static; } @media (max-width: 700px) { .wp-block-cover.hero { padding: 120px 0 56px; min-height: 0; } .wp-block-cover.hero > .wp-block-cover__background { background: linear-gradient(180deg, rgba(21,30,21,0.66) 0%, rgba(21,30,21,0.48) 45%, rgba(21,30,21,0.72) 100%) !important; } } /* banda „Încetinește." = bloc „Copertă" verde peste textura casei, cu semnul logo-ului */ .wp-block-cover.statement { padding: clamp(96px, 12vw, 160px) 0; min-height: 0; } .wp-block-cover.statement::after { content: ""; position: absolute; right: var(--gutter); bottom: 48px; width: 100px; aspect-ratio: 1; z-index: 2; opacity: 0.9; background: url('../brand/logo/icon-crem.svg') center / contain no-repeat; } /* ---------- 16. Paginile interioare din blocuri native, formulare și calendar, v1.5, 14.10.2026 ---------- */ /* antetul de pagină cu fotografie (blocul Copertă) */ .wp-block-cover.page-hero--photo { min-height: 520px; padding: 140px 0 56px; align-items: flex-end; justify-content: flex-start; } .wp-block-cover.page-hero--photo > .wp-block-cover__inner-container { width: 100%; max-width: none; } .wp-block-cover.page-hero--photo .lead { color: var(--c-bej-2); } .page-hero:not(.page-hero--bej) .breadcrumbs, .page-hero:not(.page-hero--bej) .breadcrumbs a { color: var(--c-bej-2); } .page-hero h1 { margin: 0; } html body .page-hero .is-layout-flow > .eyebrow { margin-block-end: 0; } @media (max-width: 700px) { .wp-block-cover.page-hero--photo { min-height: 420px; padding: 120px 0 40px; } } /* mesajul secundar din prima imagine */ .hero-tagline { font-family: var(--f-display); font-size: clamp(22px, 2.4vw, 30px); letter-spacing: 0.06em; color: var(--c-bej); margin: 0; } /* întrebări frecvente din blocul „Detalii" */ .faq .wp-block-details { margin: 0; } .faq .wp-block-details > :not(summary) { padding: 0 0 20px; color: var(--c-verde-2); max-width: 70ch; margin: 0; } .faq .wp-block-details > p + p { padding-top: 0; } /* insignele celor 8 zone (pe pozele din Facilități) */ .figure.has-badge--offline::before { background-image: url('../brand/icons/zona-offline.svg'); } .figure.has-badge--creativitate::before { background-image: url('../brand/icons/zona-creativitate.svg'); } .figure.has-badge--lasa-ma-in-pace::before { background-image: url('../brand/icons/zona-lasa-ma-in-pace.svg'); } .figure.has-badge--hodina::before { background-image: url('../brand/icons/zona-hodina.svg'); } .figure.has-badge--stele::before { background-image: url('../brand/icons/zona-stele.svg'); } /* zona fără fotografie încă (sauna): iconul mare pe bej */ .figure--gol { display: flex; align-items: center; justify-content: center; background: var(--c-bej); } .figure--gol::after { content: ""; width: 42%; aspect-ratio: 234 / 235; background: url('../brand/icons/zona-hodina.svg') center / contain no-repeat; } .zone__body h3 { margin: 0; } /* tabelele de prețuri */ .wp-block-table.rate-table { margin: 0; overflow-x: auto; } .rate-table table { width: 100%; border-collapse: collapse; } .rate-table th, .rate-table td { padding: 14px 12px 14px 0; border: 0; border-bottom: 1px solid var(--c-hairline); text-align: left; vertical-align: top; } .rate-table thead th { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted); font-weight: 600; border-bottom-color: var(--c-verde); } .rate-table td:last-child { text-align: right; padding-right: 0; font-family: var(--f-display); font-size: 30px; line-height: 1; color: var(--c-verde); white-space: nowrap; } .rate-table thead th:last-child { text-align: right; padding-right: 0; } .rate-table td:first-child { font-weight: 600; } .rate-table figcaption, .wp-block-table.rate-table .wp-element-caption { font-size: var(--fs-small); color: var(--c-muted); margin-top: 10px; text-align: left; } @media (max-width: 600px) { .rate-table td:last-child { font-size: 24px; } } /* pași numerotați în blocuri */ .steps > .step { margin: 0; } .steps--col { grid-template-columns: 1fr; gap: 20px; } /* formulare */ .form-wrap { position: relative; } .form__capcana { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-mesaj { padding: 16px 20px; margin: 0 0 20px; border-left: 4px solid var(--c-verde); background: var(--c-bej); color: var(--c-verde-2); } .form-mesaj--eroare { border-left-color: var(--c-cupru); background: #FBF0E4; } .field--check label { font-weight: 400; } .field--check input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--c-verde); } @media (max-width: 600px) { .form { grid-template-columns: 1fr; } } /* calendarul de disponibilitate */ .calendar-box__intro, .calendar-box__nota { margin: 0; } .calendar-box__nota { font-size: var(--fs-small); color: var(--c-muted); } .calendar { position: relative; } .calendar__nav { position: absolute; top: -4px; left: 0; right: 0; display: flex; justify-content: space-between; pointer-events: none; } .calendar__nav button { pointer-events: auto; width: 40px; height: 40px; border: 1.5px solid var(--c-verde); background: var(--c-ground); color: var(--c-verde); font-size: 22px; line-height: 1; cursor: pointer; border-radius: var(--r-btn); } .calendar__nav button:disabled { opacity: 0.3; cursor: default; } .calendar__luni { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } .calendar__titlu { text-align: center; font-family: var(--f-display); font-size: 24px; color: var(--c-verde); margin: 4px 0 12px; text-transform: capitalize; } .calendar__grila { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .calendar__zi-sapt { text-align: center; font-size: 12px; font-weight: 600; color: var(--c-muted); padding-bottom: 4px; } .calendar__zi { aspect-ratio: 1; border: 0; background: var(--c-salvie); color: var(--c-verde-2); font: inherit; font-size: 15px; cursor: pointer; border-radius: 3px; } .calendar__zi:hover:not(:disabled), .calendar__zi:focus-visible { outline: 2px solid var(--c-cupru); outline-offset: 1px; } .calendar__zi.is-ocupat { background: var(--c-hairline); color: var(--c-muted); text-decoration: line-through; } .calendar__zi.is-trecut { background: transparent; color: var(--c-muted); opacity: 0.45; cursor: default; } .calendar__zi.is-ales { background: var(--c-verde); color: var(--c-ground); text-decoration: none; } .calendar__zi.is-sosire, .calendar__zi.is-plecare { background: var(--c-cupru); color: #fff; } .calendar__zi:disabled { cursor: default; } .calendar__ales { margin: 0; min-height: 1.5em; font-weight: 600; color: var(--c-verde); } @media (max-width: 700px) { .calendar__luni { grid-template-columns: 1fr; } } /* linkuri sociale și liste simple în pagini */ .links-list { display: flex; flex-direction: column; gap: 8px; } .links-list a { color: var(--c-verde); } /* liste de fapte pe 1 sau 3 coloane, container îngust, tabel de prețuri cu text */ .facts.facts--1 { grid-template-columns: 1fr; } .facts.facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .facts.facts--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .facts.facts--3 { grid-template-columns: 1fr; } } .container.container--narrow { max-width: calc(900px + 2 * var(--gutter)); } .rate-table--text td:last-child { font-family: var(--f-body); font-size: 16px; font-weight: 600; line-height: 1.4; white-space: normal; } /* corecturi după verificarea paginilor, 14.10.2026 */ /* Facilități: poza zonei are aceeași lățime și pe rândurile în care stă în dreapta */ @media (min-width: 901px) { .zone:nth-child(even) { grid-template-columns: 7fr 5fr; } } /* firul de navigare pe fond bej: despărțitorul „/” vizibil */ .page-hero--bej .breadcrumbs li + li::before { color: var(--c-muted); } /* antet cu poză pe telefon: umbră mai puternică sub text */ @media (max-width: 700px) { .wp-block-cover.page-hero--photo > .wp-block-cover__background { background: linear-gradient(180deg, rgba(21,30,21,0.6) 0%, rgba(21,30,21,0.62) 45%, rgba(21,30,21,0.8) 100%) !important; opacity: 1 !important; } } /* tabelele de prețuri și de distanțe încap pe telefon */ @media (max-width: 600px) { .rate-table th, .rate-table td { font-size: 14px; padding-right: 8px; } .rate-table td:last-child { font-size: 20px; } .rate-table--text td:last-child { font-size: 14px; } .wp-block-table.distances th:last-child { white-space: normal; } .wp-block-table.distances th:first-child, .wp-block-table.distances td:first-child { padding-right: 12px; } } /* coloană cu hartă + linkuri sub ea (Contact): caseta crește doar cât rămâne loc, linkurile nu mai ies din secțiune */ .stack > .map-box { min-height: auto; flex: 1 1 auto; } /* pagini de text (legale): spațiu deasupra titlurilor, fără spațiu dublu între paragrafe */ html body .prose.is-layout-flow > h2 { margin-block-start: var(--s-3); } html body .prose.is-layout-flow > h2:first-child { margin-block-start: 0; } html body .prose.is-layout-flow > p + p { margin-block-start: 0; } /* corecturi 16.10.2026 */ /* prima imagine: titlul și textul pe mai puține rânduri, ca să încapă în primul ecran al unui laptop */ .hero__content { max-width: 1120px; } .hero .lead { max-width: 860px; } .hero .eyebrow { max-width: none; } /* laptopuri cu ecran scund (1366×768, 1280×720): mai puțin aer sus/jos și titlul pe măsura înălțimii */ @media (min-width: 901px) and (max-height: 820px) { .wp-block-cover.hero { padding: 112px 0 40px; min-height: 0; } .hero h1 { font-size: min(var(--fs-h1), 14vh); } .hero__content { gap: 16px; } } /* ecrane înguste (telefon pliabil închis, 320-380 px): butoanele trec pe două rânduri, coloanele nu se mai lățesc după conținut */ @media (max-width: 900px) { .grid--7-5 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 420px) { .btn, .wp-block-button > .wp-block-button__link { white-space: normal; text-align: center; line-height: 1.25; padding-block: 8px; } .btn--lg, .wp-block-button.btn--lg > .wp-block-button__link { padding-inline: 20px; font-size: 17px; } .wp-block-buttons > .wp-block-button { max-width: 100%; } .sticky-cta .btn { min-width: 0; } } /* corecturi 16.10.2026 (b) */ /* cifrele din fontul de titluri: în Staatliches „1" seamănă cu „I"; cifrele vin din Bebas Neue (aceeași familie de litere înguste, „1" cu cârlig). Declarată după Staatliches, cu unicode-range doar pe cifre: browserul ia cifrele de aici și literele din Staatliches. */ @font-face { font-family: 'Staatliches'; src: url('../brand/fonts/BebasNeue-cifre.woff2') format('woff2'); unicode-range: U+0030-0039; font-weight: 400; font-style: normal; font-display: swap; } /* două secțiuni la rând pe același fundal crem: un singur spațiu între ele, nu dublu */ .wp-block-post-content > .section:not(.section--bej):not(.section--zone):not(.section--verde):has(+ .section:not(.section--bej):not(.section--zone):not(.section--verde)), .wp-block-post-content > .section:not(.section--bej):not(.section--zone):not(.section--verde):has(+ .cta-band) { padding-bottom: clamp(28px, 3.5vw, 48px); } .wp-block-post-content > .section:not(.section--bej):not(.section--zone):not(.section--verde) + .section:not(.section--bej):not(.section--zone):not(.section--verde), .wp-block-post-content > .section:not(.section--bej):not(.section--zone):not(.section--verde) + .cta-band { padding-top: clamp(28px, 3.5vw, 48px); } /* dormitoare: iconițe în locul punctelor, pentru rândurile cu clasă (un rând nou fără clasă păstrează punctul) */ .room ul { gap: 10px; } .room li[class*="ico-"] { display: flex; align-items: center; gap: 10px; } .room li[class*="ico-"]::before { content: ""; flex: 0 0 22px; height: 22px; background: var(--c-cupru); -webkit-mask: var(--ico) no-repeat center / contain; mask: var(--ico) no-repeat center / contain; } .room li.ico-pat { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19v-7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v7'/%3E%3Cpath d='M3 15h18'/%3E%3Cpath d='M5 10V6.5A1.5 1.5 0 0 1 6.5 5h11A1.5 1.5 0 0 1 19 6.5V10'/%3E%3Cpath d='M7.5 10V8.5h3.5V10'/%3E%3Cpath d='M13 10V8.5h3.5V10'/%3E%3C/svg%3E"); } .room li.ico-birou { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 11h19'/%3E%3Cpath d='M4.5 11v9'/%3E%3Cpath d='M19.5 11v9'/%3E%3Cpath d='M14 11v4h5.5'/%3E%3Cpath d='M7 9V4.5h7V9'/%3E%3Cpath d='M5.5 9.5h10'/%3E%3C/svg%3E"); } .room li.ico-balansoar { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3.5V13'/%3E%3Cpath d='M8 13h8.5'/%3E%3Cpath d='M8 8h6.5l2 5'/%3E%3Cpath d='M8 13l-1.5 4.5'/%3E%3Cpath d='M16.5 13l1.5 4.5'/%3E%3Cpath d='M3.5 17q8.5 4.5 17 0'/%3E%3C/svg%3E"); } .room li.ico-cada { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11h18v2a6 6 0 0 1-6 6H9a6 6 0 0 1-6-6z'/%3E%3Cpath d='M6 11V5.5a2.5 2.5 0 0 1 5 0'/%3E%3Cpath d='M6.5 19l-1 2'/%3E%3Cpath d='M17.5 19l1 2'/%3E%3C/svg%3E"); } /* recenzii: nota de pe Google (din meniul Tarife), stelele și numărul de recenzii */ .rating-wrap--nota { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: var(--fs-small); color: var(--c-muted); } .rating-wrap--nota a::before { content: none; } .rating-wrap--nota a { color: var(--c-verde); text-decoration: underline; text-underline-offset: 3px; } .rating-wrap__nota { font-family: var(--f-display); font-size: 44px; line-height: 1; color: var(--c-verde); } .rating-wrap__stele { color: var(--c-cupru); letter-spacing: 2px; font-size: 18px; } /* Founding Guest: contorul umple coloana din dreapta, cu câte un pătrățel pentru fiecare loc */ .offer-band .container { grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: var(--s-6); } .offer-band__count-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 40px 32px; border: 1px solid rgba(184, 212, 188, 0.35); text-align: center; } .offer-band .offer-band__count { font-size: clamp(88px, 9vw, 140px); } html body .offer-band__count-wrap.is-layout-flow > .offer-band__label { margin-block-start: 0; font-size: 16px; letter-spacing: 0.04em; } .locuri-founding { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .loc-founding { width: 18px; height: 18px; border-radius: 2px; background: var(--c-cupru); } .loc-founding.is-ocupat { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(237, 213, 190, 0.5); } @media (max-width: 800px) { .offer-band .container { grid-template-columns: minmax(0, 1fr); } .offer-band__count-wrap { padding: 28px 20px; } } /* îndemnul final: textul în stânga, butoanele unul sub altul în dreapta */ @media (min-width: 901px) { .cta-band .container { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); align-items: center; gap: var(--s-6); } .cta-band__actions { flex-direction: column; align-items: stretch; } .cta-band__actions > .wp-block-button, .cta-band__actions > .wp-block-button > .wp-block-button__link { width: 100%; } .cta-band__actions > .wp-block-button { padding: 0; min-height: 0; background: transparent; } /* clasele btn--* de pe cutia butonului nu mai adaugă spațiu în jurul linkului */ } /* corecturi 16.10.2026 (c) */ /* antetele paginilor: textul de sub titlu pe toată lățimea */ .page-hero .lead { max-width: none; } /* textul de sub titlul unei secțiuni, pe toată lățimea (Tarife › Ocazii) */ .section-head > p.text-lat, p.text-lat { max-width: none; flex: 1 1 100%; } /* o poză care umple spațiul rămas sub o listă, cât e coloana vecină de înaltă (Facilități, Tarife) */ .grid > .stack--umple { height: 100%; } .figure--umple { flex: 1 1 auto; min-height: 260px; margin-top: var(--s-2); } .figure--umple > .wp-block-image { position: absolute; inset: 0; margin: 0; } .figure--umple img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 600px) { .figure--umple { min-height: 220px; } } /* galeria fiecărui dormitor: miniaturi pătrate, la clic poza se deschide mare */ .room .wp-block-gallery.room__galerie { margin: 6px 0 0; gap: 6px; --wp--style--unstable-gallery-gap: 6px; } .room .wp-block-gallery.room__galerie .wp-block-image { margin: 0; aspect-ratio: 1; overflow: hidden; } .room .wp-block-gallery.room__galerie .wp-block-image img { width: 100%; height: 100%; object-fit: cover !important; cursor: zoom-in; transition: transform var(--t-fast); } .room .wp-block-gallery.room__galerie .wp-block-image:hover img { transform: scale(1.04); } /* articolele din Descoperă Bucovina */ .article__antet { font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-cupru); } html body .article .wp-block-post-content > p:nth-child(2) { font-size: var(--fs-lead); line-height: 1.55; color: var(--c-verde); } .article .faq { margin-top: 4px; } .article-cta { background: var(--c-bej); padding: clamp(24px, 4vw, 40px); margin-top: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); } html body .article .article-cta.is-layout-flow > h2 { margin-block-start: 0; } .article-cta p { color: var(--c-verde-2); } .article-cta .wp-block-buttons { margin-top: var(--s-1); } /* legăturile din textul articolelor și din răspunsurile la întrebări se văd ca legături */ .article p a:not(.wp-block-button__link), .wp-block-details p a { color: var(--c-verde); text-decoration: underline; text-decoration-color: var(--c-cupru); text-decoration-thickness: 1.5px; text-underline-offset: 3px; } .article p a:not(.wp-block-button__link):hover, .wp-block-details p a:hover { color: var(--c-cupru); } /* galeria dormitoarelor rămâne pe 3 coloane și pe telefon (altfel camera devine foarte lungă) */ .room .wp-block-gallery.room__galerie.has-nested-images figure.wp-block-image:not(#individual-image) { width: calc((100% - 12px) / 3); flex-grow: 0; } /* corecturi 16.10.2026 (d) */ /* rândul mic de deasupra titlului din antet, pe toată lățimea */ .page-hero .eyebrow, .page-hero p.eyebrow { max-width: none; } /* bifa de acord centrată pe text */ .field--check { align-items: center; } .field--check input { margin-top: 0; } /* iconițe la rețelele sociale (Contact și subsol) */ .soc a { display: inline-flex; align-items: center; gap: 10px; } .soc a::before { content: ""; flex: 0 0 20px; width: 20px; height: 20px; background: var(--c-cupru); -webkit-mask: var(--ico) no-repeat center / contain; mask: var(--ico) no-repeat center / contain; } .site-footer .soc a::before { flex-basis: 18px; width: 18px; height: 18px; } .soc--instagram { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='0.8' fill='black'/%3E%3C/svg%3E"); } .soc--facebook { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E"); } .soc--recenzii { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E"); } .soc--harta { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); } /* Founding Guest: butonul de rezervare sub locurile rămase */ .offer-band__count-wrap .wp-block-buttons { justify-content: center; margin-top: 6px; } /* Despre: galeria „de la casa bunicilor la Artcetera Lodge” */ .galerie-istorie.wp-block-gallery { gap: 10px; --wp--style--unstable-gallery-gap: 10px; } .galerie-istorie.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { width: calc((100% - 30px) / 4); flex-grow: 0; margin: 0; } .galerie-istorie .wp-block-image img { aspect-ratio: 4 / 3; width: 100%; height: 100% !important; object-fit: cover !important; cursor: zoom-in; } @media (max-width: 700px) { .galerie-istorie.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { width: calc((100% - 10px) / 2); } } /* legăturile spre recenziile Google */ .recenzii-linkuri { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: var(--fs-small); } .recenzii-linkuri a { color: var(--c-verde); text-decoration: underline; text-decoration-color: var(--c-cupru); text-underline-offset: 3px; } /* imaginile din articole, cu legendă */ .article .wp-block-image.articol-poza { margin-block: var(--s-3) var(--s-2); } .article .wp-block-image.articol-poza img { width: 100%; height: auto; } .article .wp-block-image figcaption { margin-top: 8px; font-size: 13px; color: var(--c-muted); text-align: left; } .article .wp-block-image figcaption a { color: var(--c-muted); } .article p.articol-surse { font-size: 14px; } /* listele de articole (Toate articolele, categorii, căutare) */ .lista-articole__grila.is-layout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); list-style: none; padding: 0; margin: 0; } @media (max-width: 900px) { .lista-articole__grila.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .lista-articole__grila.is-layout-grid { grid-template-columns: minmax(0, 1fr); } } .card--articol { display: flex; flex-direction: column; gap: 10px; } .card--articol .wp-block-post-featured-image { margin: 0 0 6px; } .card--articol .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; } .card--articol .card__meta, .card--articol .card__meta a { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-cupru); text-decoration: none; } .card--articol .card__titlu { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.05; margin: 0; } .card--articol .card__titlu a { color: var(--c-verde); text-decoration: none; } .card--articol .card__titlu a:hover { color: var(--c-cupru); } .card--articol .card__rezumat p { color: var(--c-verde-2); font-size: 16px; margin: 0; } .lista-articole__pagini { margin-top: var(--s-5); gap: 10px 18px; font-weight: 600; } .lista-articole__pagini a, .lista-articole__pagini .current { color: var(--c-verde); } .lista-articole__pagini .current { color: var(--c-cupru); } /* corecturi 19.10.2026 */ /* submeniul „Despre" pe paginile cu antet bej: linkurile albe pe fondul verde (regula pentru meniul de pe bej le făcea verzi) */ body:has(.page-hero--bej) .nav__sub a:not(.btn) { color: var(--c-ground); } body:has(.page-hero--bej) .nav__sub a:not(.btn):hover { color: var(--c-bej); } /* butonul de limbă din antet (RO / EN): lângă „Rezervă acum!” pe calculator, lângă „Meniu” pe telefon */ .nav__lang { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 10px; border: 2px solid currentColor; border-radius: var(--r-btn); color: var(--c-ground); font: 600 14px var(--f-body); letter-spacing: 0.08em; text-decoration: none; } .nav__lang:hover { color: var(--c-bej); } body:has(.page-hero--bej) .nav__lang { color: var(--c-verde); } body:has(.page-hero--bej) .nav__lang:hover { color: var(--c-cupru); } @media (max-width: 1020px) { .nav { gap: 10px; } .nav__lang { order: -1; } } /* meniul de sus pe laptopuri mici (1021-1180 px): cu butonul de limbă, elementele rămân pe un rând */ @media (min-width: 1021px) and (max-width: 1180px) { .nav, .nav__list { gap: 18px; } .nav__list > li > a { white-space: nowrap; } } /* prima pagină: pozele și titlurile din „Mai mult decât o cazare” și „Trei dormitoare” duc la Facilități și camere (19.10.2026) */ .figure > .wp-block-image > a, .room__media > .wp-block-image > a { display: block; width: 100%; height: 100%; overflow: hidden; } .figure > .wp-block-image > a img, .room__media > .wp-block-image > a img { transition: transform var(--t-fast); } .figure > .wp-block-image > a:hover img, .room__media > .wp-block-image > a:hover img { transform: scale(1.03); } .figure.has-badge::before { pointer-events: none; } .feature h3 a, .room__name a { color: inherit; text-decoration: none; } .feature h3 a:hover, .room__name a:hover { color: var(--c-cupru); } /* pozele din articole și ghiduri (din 20.10.2026 fotografii reale, multe verticale): același cadru orizontal ca înainte; la clic, poza se vede întreagă */ .article .wp-block-image.articol-poza img { aspect-ratio: 4 / 3; object-fit: cover; } /* bannerul de cookie-uri (21.10.2026): jos în stânga pe calculator, pe toată lățimea pe telefon, peste bara fixă „Rezervă acum!” */ .acord { position: fixed; left: var(--gutter); bottom: 24px; z-index: 55; width: min(560px, calc(100vw - 2 * var(--gutter))); background: var(--c-verde); color: var(--c-ground); padding: 22px 24px 20px; border-top: 3px solid var(--c-cupru); font-size: var(--fs-small); line-height: 1.55; box-sizing: border-box; } .acord[hidden], .acord [hidden] { display: none !important; } .acord__titlu { margin: 0 0 6px; font-family: var(--f-display); font-size: 24px; letter-spacing: 0.02em; line-height: 1.1; color: var(--c-bej); } .acord__text { margin: 0; } .acord a { color: var(--c-bej); text-decoration: underline; text-underline-offset: 2px; } .acord a:hover { color: var(--c-ground); } .acord__setari { margin: 14px 0 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 10px; } .acord__opt { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; } .acord__opt input { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--c-cupru); } .acord__opt input:disabled { opacity: 0.7; } .acord__opt strong { color: var(--c-bej); } .acord__butoane { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; } .acord .btn--outline-light { background: transparent; } /*