/* ============================================ site-agentie-05 — Mid-market Friendly Style: clean, lizibil, friendly ============================================ */ :root { --font-body: 'Poppins', sans-serif; --font-head: 'Poppins', sans-serif; /* Brand palette */ --color-accent: #E57A26; /* orange */ --color-white: #FFFFFF; --color-cream: #E5E2DD; /* gri-șobolan foarte deschis — neutru în paleta portocaliu + gri */ --color-ink: #2A2A2A; /* near-black */ --color-gray: #6B7280; /* secondary text */ /* Semantic tokens */ --color-text: var(--color-ink); --color-text-soft: var(--color-gray); --color-line: rgba(42, 42, 42, 0.10); --color-bg: var(--color-white); --color-bg-alt: var(--color-cream); --color-badge-bg: var(--color-white); /* VDI spec-compliant aliases (pentru customizer-ul platformei) */ --color-primary: var(--color-ink); --color-secondary: var(--color-gray); --color-text-light: var(--color-gray); --color-border: var(--color-line); --color-success: #10B981; --color-danger: #EF4444; /* Design tokens utilitare — folosite punctual în UI */ --color-black: #000000; --color-deep-navy: #0F1E3A; /* heading dark accent */ --color-deep-brown: #3A2820; /* hero overlay end */ --color-deep-brown-2: #2E251D; /* SVG decor pattern */ --color-sage: #C5D2CC; /* hero SVG band */ --color-sage-soft: #B6C8BE; /* hero SVG band variant */ --color-sage-tint: #A3BCB0; /* hero overlay */ --color-blue-mist: #EEF3F6; /* card bg variant */ --color-blue-tint: #F0F4F8; /* section bg variant */ --color-near-white: #FAFAFA; /* off-white surface */ --color-gold: #F0C14B; /* highlight gold */ --color-orange-deep: #D96D1F; /* accent darker */ --color-whatsapp: #25D366; /* brand WhatsApp */ --container-max: 1440px; --card-width: 450px; --radius-card: 6px; --radius-pill: 6px; } /* ============================================ */ /* FOUC PREVENTION */ /* Ascundem body până când demo-render.js termină de înlocuit placeholderele {{...}} și adaugă clasa .rendered pe . Inline script în setează .js → activează regula de mai jos. La integrarea VDI server-side (Blade), .js nu mai e setat (sau .rendered e adăugat la load), așa că body apare instant. */ /* ============================================ */ html.js body { opacity: 0; } html.js.rendered body { opacity: 1; transition: opacity 0.18s ease-out; } /* ============================================ */ /* RESET + BASE */ /* ============================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* `clip` pe body nu e suficient dacă scroll-ul e declanșat la nivel de viewport (html). Dublăm regula aici pentru siguranță. */ overflow-x: clip; } body { margin: 0; font-family: var(--font-body); font-size: 15px; font-weight: 400; line-height: 26px; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Previne scroll-ul orizontal de la elemente decorative care ies în afara viewport-ului pe mobil (ex. overlay imagini, badge-uri etc.). Site-ul nu folosește scroll orizontal intenționat. */ overflow-x: clip; } img { max-width: 100%; height: auto; display: block; } picture { display: contents; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6, p { margin: 0; } .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 24px; } /* Variantă full-width — content extins până la marginile viewport-ului. Util când vrei ca un block (gen panou orange din hero) să atingă marginea stângă a paginii fără să se mai oprească la 1440px. */ .container-fluid { width: 100%; padding: 0; } /* ============================================ */ /* HEADER (placeholder) */ /* ============================================ */ .site-header { background: transparent; /* se vede ce e în spate (hero, alte secțiuni) */ /* Gradient soft pe bottom + drop-shadow → linie de separare vizibilă peste hero-ul portocaliu */ box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.45); position: absolute; /* overlay peste hero — nu mai consumă înălțime din viewport */ top: 0; left: 0; right: 0; z-index: 100; /* asigură că nav-ul stă deasupra hero-ului */ transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } /* Sticky on scroll — devine fixed la top cu fundal alb, text închis */ .site-header.is-scrolled { position: fixed; background: var(--color-white); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10); animation: slideDown 0.35s ease; } @keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } /* La scroll: textul devine închis (peste fundal alb) */ .site-header.is-scrolled .site-logo, .site-header.is-scrolled .site-nav a { color: var(--color-ink); text-shadow: none; } .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; /* nav-left | logo centrat | grup dreapta */ align-items: center; gap: 32px; padding-top: 20px; padding-bottom: 20px; } .site-nav--left { justify-self: start; } .site-logo { justify-self: center; } .header-right { justify-self: end; display: flex; align-items: center; gap: 28px; } .site-logo { font-weight: 800; font-size: 20px; color: var(--color-white); /* alb — vizibil peste hero-ul portocaliu */ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); display: inline-flex; align-items: center; line-height: 1; } .site-logo__img { display: block; max-height: 40px; width: auto; height: auto; } /* Logo dual (home): varianta light vizibilă la top, dark când header devine sticky. Pe paginile interior unde nu există decât .site-logo__img (fără variantă), regulile nu se aplică. */ .site-logo__img--dark { display: none; } .site-header.is-scrolled .site-logo__img--light { display: none; } .site-header.is-scrolled .site-logo__img--dark { display: block; } /* Pe header transparent peste hero, logo color-inherit din SVG; pe sticky (scrolled) fără text-shadow */ .site-header.is-scrolled .site-logo { text-shadow: none; } .site-nav { display: flex; gap: 28px; } .site-nav a { font-size: 14px; font-weight: 500; color: var(--color-white); /* alb — vizibil peste hero-ul portocaliu */ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: opacity 0.2s; } .site-nav a:hover { opacity: 0.75; } .header-cta { font-size: 14px; font-weight: 600; padding: 10px 20px; background: var(--color-accent); /* portocaliu brand */ color: var(--color-white); border-radius: var(--radius-pill); box-shadow: 0 6px 16px rgba(229, 122, 38, 0.35); transition: opacity 0.2s, transform 0.2s; } .header-cta:hover { opacity: 0.85; } /* ============================================ */ /* HERO (placeholder) */ /* ============================================ */ .hero-placeholder { background: var(--color-bg-alt); padding: 80px 0; text-align: center; color: var(--color-text-soft); } /* ============================================ */ /* SECTION: POPULAR PROPERTIES */ /* ============================================ */ .section-popular { padding: 0px 0 0px; } /* Home (index.html) — .section-popular nu are modificatorul .properties-results (acesta apare doar pe properties.html + rentals.html, unde grid-ul intră direct după header de tip results-head, fără padding propriu). Aici adăugăm spațierea sectiunii. */ .section-popular:not(.properties-results) { padding: 80px 0 100px; } .section-head { margin-bottom: 40px; } .section-title { font-family: var(--font-head); font-size: clamp(28px, 4vw, 44px); line-height: 1.15; font-weight: 400; color: var(--color-ink); letter-spacing: -0.01em; } .section-title strong { font-weight: 800; } /* Grid */ .property-grid { display: grid; grid-template-columns: repeat(3, var(--card-width)); justify-content: center; gap: 32px; } /* Card */ .property-card { width: var(--card-width); display: flex; flex-direction: column; background: var(--color-bg); transition: transform 0.25s ease; } .property-card:hover { transform: translateY(-4px); } .property-card__media { position: relative; overflow: hidden; border-radius: var(--radius-card); aspect-ratio: 4 / 3; } .property-card__media-link { display: block; width: 100%; height: 100%; } .property-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .property-card:hover .property-card__media img { transform: scale(1.04); } .property-card__fav { position: absolute; top: 14px; right: 0; display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; background: var(--color-accent); color: var(--color-white); font-size: 14px; line-height: 1; border-radius: var(--radius-pill) 0 0 var(--radius-pill); box-shadow: 0 3px 10px rgba(229, 122, 38, 0.35); opacity: 0; transform: translateX(8px); transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s; pointer-events: none; } .property-card:hover .property-card__fav { opacity: 1; transform: translateX(0); pointer-events: auto; } .property-card__fav:hover { background: var(--color-ink); } .property-card__badge { position: absolute; top: 14px; left: 0; display: inline-block; padding: 6px 14px; background: var(--color-badge-bg); color: var(--color-ink); font-size: 12px; font-weight: 600; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .property-card__body { padding: 18px 0 16px; } .property-card__location { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--color-text-soft); letter-spacing: 0.02em; margin-bottom: 10px; } .property-card__location i { font-size: 11px; } .property-card__title { font-family: var(--font-head); font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--color-ink); margin-bottom: 8px; } .property-card__title a { transition: opacity 0.2s; } .property-card__title a:hover { opacity: 0.7; } .property-card__desc { font-size: 14px; line-height: 1.55; color: var(--color-text-soft); } .property-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid var(--color-line); } .property-card__price { font-size: 18px; font-weight: 700; color: var(--color-ink); } .property-card__specs { display: flex; gap: 16px; font-size: 13px; color: var(--color-text-soft); } .property-card__specs li { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .property-card__specs i { font-size: 13px; opacity: 0.7; } .property-card__specs sup { font-size: 9px; top: -0.4em; } /* ============================================ */ /* SECTION: STATS */ /* ============================================ */ .section-stats { padding: 80px 0; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .stats-col { display: flex; flex-direction: column; gap: 18px; aspect-ratio: 1 / 2; } .stats-col--image-top > .stats-grid__media { flex: 3; } .stats-col--image-top > .stats-grid__stat { flex: 1; } .stats-col--stat-top > .stats-grid__stat { flex: 1; } .stats-col--stat-top > .stats-grid__media { flex: 3; } .stats-grid__media { overflow: hidden; border-radius: 14px; margin: 0; min-height: 0; } .stats-grid__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .stats-grid__media:hover img { transform: scale(1.04); } .stats-grid__stat { background: var(--color-cream); border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; justify-content: center; min-height: 0; } .stats-grid__num { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(36px, 4.5vw, 52px); font-weight: 500; color: var(--color-ink); line-height: 1; margin-bottom: 10px; letter-spacing: -0.01em; } .stats-grid__num sup { font-size: 0.5em; top: -0.5em; font-weight: 400; margin-left: 2px; } .stats-grid__label { font-size: 14px; color: var(--color-text-soft); line-height: 1.4; } /* ============================================ */ /* SECTION: PROIECTE */ /* ============================================ */ .section-projects { padding: 80px 0 100px; } /* Grid 4 coloane responsive */ .projects-slider { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } @media (max-width: 1100px) { .projects-slider { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 820px) { .projects-slider { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .projects-slider { grid-template-columns: 1fr; } } .project-card-wrap { position: relative; } /* Card — imaginea ESTE cardul, doar cu notch sus-dreapta */ .project-card { position: relative; display: flex; flex-direction: column; gap: 14px; } .project-card__media { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; --notch: 70px; } /* Pattern peste imagine — pe wrapperul .project-card__media (NU pe link) ca să nu fie tăiat de clip-path-ul polygon. Extins 2px peste marginea de jos ca să acopere dunga subtilă rămasă din imagine. */ .project-card__media::after { content: ''; position: absolute; top: -1px; right: -1px; bottom: -2px; left: -1px; background-image: url("../images/pattern-home.png"); background-size: 102% 103%; background-position: center bottom; background-repeat: no-repeat; -webkit-clip-path: polygon( 0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100% ); clip-path: polygon( 0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100% ); pointer-events: none; z-index: 3; } /* Clip-path doar pe colțul sus-dreapta (notch diagonal) */ .project-card__media-link { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 14px; -webkit-clip-path: polygon( 0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100% ); clip-path: polygon( 0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100% ); } .project-card__media-link img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .project-card:hover .project-card__media-link img { transform: scale(1.04); } /* Badge VIEW DETAIL — pill alb centrat pe imagine */ .project-card__cta { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; background: var(--color-white); color: var(--color-ink); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); transition: transform 0.2s, background 0.2s, color 0.2s; } .project-card__cta i { font-size: 11px; transform: rotate(-45deg); /* săgeată diagonală sus-dreapta */ } .project-card__cta:hover { background: var(--color-accent); color: var(--color-white); transform: translate(-50%, -50%) scale(1.05); } /* Footer card — titlu stânga + dată dreapta, typography minimalist */ .project-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 8px 16px; font-size: 12px; letter-spacing: 0.08em; } .project-card__name { font-weight: 600; color: var(--color-ink); } .project-card__date { font-weight: 400; color: var(--color-text-soft); } /* ============================================ */ /* SECTION: TEAM */ /* ============================================ */ .section-team { position: relative; padding: 100px 0 120px; overflow: hidden; background-color: var(--color-deep-brown); background-image: linear-gradient(to right, rgb(167 87 24 / 24%) 0%, rgb(255 123 19 / 47%) 35%, rgba(74, 50, 38, 0.82) 75%, rgba(58, 40, 32, 0.88) 100%), url(../mock-images/background-team.jpg); background-size: cover; background-position: center; background-attachment: fixed; } /* Glow portocaliu subtil ca să se lege de paleta brand */ .section-team::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle 280px at 25% 40%, rgba(229, 122, 38, 0.18), transparent 70%); } .section-team > .container { position: relative; z-index: 1; } /* Text alb pe fundal închis */ .section-team .section-title, .section-team .section-title strong { color: var(--color-white); } .section-team .section-lead { color: rgba(255, 255, 255, 0.78); } .section-team .team-card__name { color: var(--color-white); } .section-team .team-card__role { color: rgba(255, 255, 255, 0.65); } /* iOS Safari nu respectă background-attachment: fixed — fallback la scroll */ @media (max-width: 768px) { .section-team { background-attachment: scroll; } } .section-head--split { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin-bottom: 48px; } .section-lead { font-size: 15px; line-height: 1.6; color: var(--color-text-soft); max-width: 360px; text-align: right; margin-left: auto; } .team-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; align-items: start; } .team-card { display: flex; flex-direction: column; } /* Zigzag — cardurile pare (2, 4) coboară, restul rămân sus */ .team-card:nth-child(even) { margin-top: 64px; } .team-card__media { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius-card); overflow: hidden; } .team-card__media-link { display: block; width: 100%; height: 100%; } .team-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.5s ease; } .team-card:hover .team-card__media img { transform: scale(1.04); } /* Bară de contacte la baza imaginii: telefon, email, WhatsApp */ .team-card__contacts { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 6px; background: rgba(42, 42, 42, 0.55); border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .team-card__contact { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.12); color: var(--color-white); border-radius: 50%; font-size: 14px; transition: background 0.2s, color 0.2s, transform 0.2s; } .team-card__contact:hover { background: var(--color-accent); color: var(--color-white); transform: translateY(-2px); } .team-card__body { padding: 14px 4px 0; } .team-card__name { font-size: 16px; font-weight: 700; color: var(--color-ink); margin-bottom: 4px; } .team-card__name a { color: inherit; transition: color 0.2s; } .team-card__name a:hover { color: var(--color-accent); } .team-card__role { font-size: 13px; color: var(--color-text-soft); } /* ============================================ */ /* UTILITY: NOTCHED CORNERS */ /* ============================================ */ /* Colț concav cu "bite" circulară — semnătura vizuală din screenshot-uri (Featured/About/Slider). Folosim CSS mask + radial-gradient cu intersect. */ .notch-tl, .notch-tr, .notch-bl, .notch-br, .notch-tl-br, .notch-tr-bl { --notch: 64px; border-radius: 20px; } .notch-tl { -webkit-mask: radial-gradient(circle var(--notch) at 0 0, transparent calc(var(--notch) - 0.5px), var(--color-black) var(--notch)); mask: radial-gradient(circle var(--notch) at 0 0, transparent calc(var(--notch) - 0.5px), var(--color-black) var(--notch)); } .notch-tr { -webkit-mask: radial-gradient(circle var(--notch) at 100% 0, transparent calc(var(--notch) - 0.5px), var(--color-black) var(--notch)); mask: radial-gradient(circle var(--notch) at 100% 0, transparent calc(var(--notch) - 0.5px), var(--color-black) var(--notch)); } .notch-bl { -webkit-mask: radial-gradient(circle var(--notch) at 0 100%, transparent calc(var(--notch) - 0.5px), var(--color-black) var(--notch)); mask: radial-gradient(circle var(--notch) at 0 100%, transparent calc(var(--notch) - 0.5px), var(--color-black) var(--notch)); } .notch-br { -webkit-mask: radial-gradient(circle var(--notch) at 100% 100%, transparent calc(var(--notch) - 0.5px), var(--color-black) var(--notch)); mask: radial-gradient(circle var(--notch) at 100% 100%, transparent calc(var(--notch) - 0.5px), var(--color-black) var(--notch)); } .notch-tl-br { -webkit-mask: radial-gradient(circle var(--notch) at 0 0, transparent calc(var(--notch) - 0.5px), var(--color-black) var(--notch)), radial-gradient(circle var(--notch) at 100% 100%, transparent calc(var(--notch) - 0.5px), var(--color-black) var(--notch)); -webkit-mask-composite: source-in; mask: radial-gradient(circle var(--notch) at 0 0, transparent calc(var(--notch) - 0.5px), var(--color-black) var(--notch)), radial-gradient(circle var(--notch) at 100% 100%, transparent calc(var(--notch) - 0.5px), var(--color-black) var(--notch)); mask-composite: intersect; } .notch-tr-bl { -webkit-mask: radial-gradient(circle var(--notch) at 100% 0, transparent calc(var(--notch) - 0.5px), var(--color-black) var(--notch)), radial-gradient(circle var(--notch) at 0 100%, transparent calc(var(--notch) - 0.5px), var(--color-black) var(--notch)); -webkit-mask-composite: source-in; mask: radial-gradient(circle var(--notch) at 100% 0, transparent calc(var(--notch) - 0.5px), var(--color-black) var(--notch)), radial-gradient(circle var(--notch) at 0 100%, transparent calc(var(--notch) - 0.5px), var(--color-black) var(--notch)); mask-composite: intersect; } /* ============================================ */ /* SECTION: FEATURED PROPERTY */ /* ============================================ */ .section-featured { padding: 80px 0; background: var(--color-deep-navy); /* navy — același ton ca footer-ul, coerență vizuală site-wide */ color: var(--color-ink); } .section-hero { /* Parallax: imagine arhitecturală sub trapezoidul navy. background-attachment: fixed → efect parallax la scroll. Overlay subtil portocaliu peste imagine ca să păstreze paleta brandului și să dea contrast pentru search bar/trust strip. */ background-image: /* Vignette radial: portocaliu mai închis pe margini → senzație că zona "intră" în adâncime, recesează vizual sub trapezoidul navy */ radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(0, 0, 0, 0.35) 100%), linear-gradient(135deg, rgba(229, 122, 38, 0.78), rgba(229, 122, 38, 0.88)), url("../mock-images/hero-bg.webp"); background-size: cover; background-position: center; background-attachment: fixed; color: var(--color-ink); } /* iOS Safari nu respectă background-attachment: fixed — fallback la scroll */ @media (max-width: 768px) { .section-hero { background-attachment: scroll; } } .hero-sage { background: rgb(42 42 41 / 50%); padding: 90px 0 0; /* fără padding-bottom → marginea de jos cât mai sus */ -webkit-clip-path: url(#hero-sage-shape); clip-path: url(#hero-sage-shape); /* Drop-shadow în 3 straturi cu spread mare — creează un "halo" care depășește search bar-ul și e clar vizibil ca umbra navy-ului pe portocaliu. Plus translate-up agresiv (10px) ca trapezoidul să pară fizic ridicat. */ -webkit-filter: drop-shadow(0 60px 90px rgba(0, 0, 0, 0.65)) drop-shadow(0 30px 45px rgba(0, 0, 0, 0.4)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); filter: drop-shadow(0 60px 90px rgba(0, 0, 0, 0.65)) drop-shadow(0 30px 45px rgba(0, 0, 0, 0.4)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); transform: translateY(-10px); position: relative; z-index: 2; } .hero-cream { margin-top: -150px; /* trage search bar-ul mai sus, în trapezoidul navy */ padding: 0 0 50px; /* fără padding-top — search bar începe imediat */ padding-left: 50px; position: relative; z-index: 1; } /* ============================================ SEARCH BAR HERO — pe fundalul portocaliu ============================================ */ /* Wrapper pentru search bar + trust strip — ocupă jumătatea stângă a container-ului, ca să nu intre sub imaginea din dreapta */ .hero-cream__inner { width: 50%; } .search-bar-hero { background: var(--color-white); border-radius: 6px; padding: 8px; box-shadow: 0 12px 32px rgba(15, 30, 58, 0.18); display: flex; flex-direction: column; gap: 8px; } /* Tab switcher Vânzare / Închiriere */ .search-tabs { display: flex; gap: 4px; padding: 4px; align-self: flex-start; } .search-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; background: transparent; color: var(--color-text-soft); font-family: var(--font-body); font-size: 13px; font-weight: 600; border: none; border-radius: 6px; cursor: pointer; transition: background 0.2s, color 0.2s; } .search-tab i { font-size: 11px; opacity: 0.7; } .search-tab:hover { color: var(--color-ink); background: rgba(15, 30, 58, 0.05); } .search-tab.is-active { background: var(--color-ink); color: var(--color-white); } .search-tab.is-active i { opacity: 1; } /* Rândul de filtre + buton */ .search-fields { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr 1.4fr auto; gap: 1px; background: rgba(15, 30, 58, 0.08); border-radius: 12px; overflow: hidden; } .search-field { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; background: var(--color-white); cursor: pointer; transition: background 0.15s; } .search-field:hover { background: var(--color-near-white); } .search-field__label { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-soft); } .search-field__select, .search-field__input { border: none; outline: none; background: transparent; font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--color-ink); padding: 0; appearance: none; -webkit-appearance: none; width: 100%; cursor: pointer; } .search-field__select { background-image: linear-gradient(45deg, transparent 50%, var(--color-text-soft) 50%), linear-gradient(135deg, var(--color-text-soft) 50%, transparent 50%); background-position: calc(100% - 12px) 8px, calc(100% - 7px) 8px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 22px; } .search-field__range { display: flex; align-items: center; gap: 4px; } .search-field__input { font-weight: 600; } .search-field__input::placeholder { color: var(--color-text-soft); font-weight: 400; } .search-field__range-sep { color: var(--color-text-soft); font-weight: 700; } /* Buton CAUTĂ — navy ca să contrasteze cu fundalul portocaliu */ .search-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 32px; background: var(--color-ink); color: var(--color-white); font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border: none; cursor: pointer; transition: background 0.2s, transform 0.2s; } .search-submit:hover { background: var(--color-black); transform: scale(1.01); } .search-submit i { font-size: 14px; } /* ============================================ TRUST STRIP — sub search bar ============================================ */ .trust-strip { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 28px 40px; margin-top: 28px; list-style: none; padding: 0; } .trust-strip li { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--color-white); letter-spacing: 0.02em; } .trust-strip i { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.15); color: var(--color-white); border-radius: 50%; font-size: 13px; } /* Mobile responsive */ @media (max-width: 900px) { .search-fields { grid-template-columns: 1fr 1fr; gap: 1px; } .search-submit { grid-column: 1 / 3; padding: 14px; } } @media (max-width: 560px) { .search-fields { grid-template-columns: 1fr; } .search-submit { grid-column: 1; } .trust-strip { display: grid; grid-template-columns: 1fr 1fr; /* 2 pe rând pe mobil */ gap: 16px 24px; font-size: 12px; } } .hero-cream .featured-updates { /* Reset margin-top dacă există */ margin-top: 0; } .featured-grid { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: auto auto auto; /* fără 1fr → rândurile hug content, fără spațiu mort */ gap: 24px 36px; align-items: start; } .featured-title { grid-column: 1; grid-row: 1 / 3; margin-top: 80px; /* coboară titlul puțin față de poziția implicită */ font-family: var(--font-head); font-size: clamp(36px, 7vw, 140px); line-height: 0.86; font-weight: 800; letter-spacing: -0.04em; color: var(--color-blue-tint); /* off-white cu nuanță rece subtilă — coerent cu paleta */ text-transform: uppercase; display: flex; flex-direction: column; gap: 4px; } .featured-row { display: inline-flex; align-items: center; gap: 0.18em; white-space: nowrap; } .featured-row--last { line-height: 0.92; } /* Sparkle după "SOUTHERN" */ .featured-sparkle { font-size: 0.35em; color: var(--color-accent); /* portocaliu brand — accent vizibil pe titlul cremă */ margin-left: 0.25em; } /* Imaginea încastrată în rândul "HEMISPHERE" */ .featured-inline-img { display: inline-block; width: 0.65em; height: 0.65em; border-radius: 14px; overflow: hidden; flex-shrink: 0; vertical-align: middle; margin-right: 0.05em; } .featured-inline-img img { width: 100%; height: 100%; object-fit: cover; } /* Top-right: avatar + descriere */ .featured-intro { grid-column: 2; grid-row: 1; margin-top: 80px; /* coboară sub header — evită overlap cu nav-ul */ display: flex; gap: 12px; align-items: flex-start; justify-self: end; max-width: 320px; } .featured-agent { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: block; border: 1px solid rgba(42, 42, 42, 0.12); } .featured-agent img { width: 100%; height: 100%; object-fit: cover; } .featured-intro p { font-size: 12px; line-height: 1.55; color: var(--color-white); /* alb pe navy — lizibil */ opacity: 0.9; } /* Imaginea mare arhitecturală — col 3, rândurile 2 (sub intro) */ /* Wrapper-ul preia poziția în grid; conține .featured-image + overlay sibling. overlay-ul iese în afara clip-path-ului fiindcă nu mai e copilul lui. */ .featured-image-wrap { grid-column: 2; grid-row: 2 / 3; position: relative; transform: translateY(60px); /* coboară vizual fără să mărească înălțimea grid-ului */ } .featured-image { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 1.4 / 1; /* mai scundă → ridică marginea de jos a hero-sage */ margin-top: 0; /* Mărimea tăieturii pe colțul dreapta-sus */ --notch: 110px; } /* Override pentru .featured-image: tăietură DREAPTĂ (diagonală) în colțul dreapta-sus, nu curbă/semicerc. Anulez mask-ul radial moștenit de la .notch-tr și aplic clip-path polygon cu linie dreaptă. */ .featured-image.notch-tr { -webkit-mask: none; mask: none; -webkit-clip-path: polygon( 0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100% ); clip-path: polygon( 0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100% ); } .featured-image img { width: 100%; height: 100%; object-fit: cover; } .featured-image__overlay { position: absolute; bottom: -40px; right: -40%; width: 80%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; border: 4px solid var(--color-white); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35); z-index: 4; /* deasupra play button + badge */ } /* Badge circular cu text rotitor pe imagine */ .featured-badge { position: absolute; top: 24px; left: 24px; width: 110px; height: 110px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-accent); /* disc portocaliu brand */ border-radius: 50%; box-shadow: 0 8px 24px rgba(229, 122, 38, 0.35); } .featured-badge-text { position: absolute; inset: 0; width: 100%; height: 100%; animation: spinBadge 12s linear infinite; } .featured-badge-text text { font-family: var(--font-head); font-size: 14px; font-weight: 600; letter-spacing: 0.1em; fill: var(--color-white); } .featured-badge-icon { position: relative; z-index: 1; width: 48px; height: 48px; display: inline-flex; border-radius: 10px; overflow: hidden; } @keyframes spinBadge { to { transform: rotate(360deg); } } /* Bottom row — stats + updates (col 1-3) */ .featured-bottom { grid-column: 1 / 3; grid-row: 3; margin-top: 16px; } /* Stats — un singur rând: 150+ Happy clients | ★★★★★ | adresa */ .featured-stats { display: flex; align-items: center; gap: 56px; padding: 20px 0; border-top: 1px solid rgba(42, 42, 42, 0.18); border-bottom: 1px solid rgba(42, 42, 42, 0.18); } .featured-stat { flex-shrink: 0; } .featured-rating { margin-right: auto; } .featured-num { font-family: 'Playfair Display', Georgia, serif; font-size: 44px; font-weight: 500; color: var(--color-ink); line-height: 1; margin-bottom: 2px; } .featured-num sup { font-size: 0.5em; top: -0.5em; } .featured-label { font-size: 12px; color: var(--color-text-soft); } .featured-rating { display: flex; gap: 6px; color: var(--color-gold); font-size: 16px; } .featured-address { font-style: normal; font-size: 12px; line-height: 1.65; color: var(--color-ink); letter-spacing: 0.06em; font-weight: 600; text-align: right; } .featured-updates { display: flex; flex-direction: column; gap: 12px; } .featured-updates li { display: grid; grid-template-columns: 32px 130px 1fr; gap: 16px; align-items: center; font-size: 13px; color: var(--color-ink); } .featured-updates i { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: rgba(42, 42, 42, 0.08); color: var(--color-ink); border-radius: 8px; font-size: 13px; } .featured-update-date { font-weight: 600; letter-spacing: 0.02em; } .featured-update-text { color: var(--color-text-soft); } /* ============================================ HERO — Subtitle + CTA primar (sub titlu, col 1, row 3) ============================================ */ .hero-cta-block { grid-column: 1; grid-row: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: 520px; margin-top: 120px; /* spațiu mare între titlu și CTA */ } .hero-subtitle { color: rgba(255, 255, 255, 0.82); font-size: 16px; line-height: 1.55; font-weight: 400; } .hero-cta { display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; background: var(--color-accent); color: var(--color-white); font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; box-shadow: 0 10px 24px rgba(229, 122, 38, 0.40); transition: transform 0.2s, box-shadow 0.2s, background 0.2s; } .hero-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(229, 122, 38, 0.55); background: var(--color-orange-deep); } .hero-cta i { font-size: 12px; } /* ============================================ HERO — Play button "Vezi turul virtual" pe imagine ============================================ */ .hero-play { position: absolute; bottom: 24px; left: 24px; display: inline-flex; align-items: center; gap: 14px; z-index: 3; transition: transform 0.2s; } .hero-play:hover { transform: translateX(4px); } .hero-play__btn { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-accent); color: var(--color-white); border-radius: 50%; font-size: 16px; padding-left: 3px; /* recompensare optică pentru iconul play */ box-shadow: 0 8px 20px rgba(229, 122, 38, 0.5); transition: transform 0.25s; } .hero-play:hover .hero-play__btn { transform: scale(1.1); } .hero-play__label { color: var(--color-white); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55); } /* ============================================ HERO — Mobile responsive (grid + cream + sage) ============================================ IMPORTANT: aceste media queries TREBUIE să stea după toate regulile desktop ale hero-ului. La specificitate egală (.class) câștigă ce apare ultimul în cascadă — altfel desktop overrides mobile. */ /* MacBook Air range (~1280-1440px CSS pixels) — ajustăm pull-up-ul cream-ului, forțăm trust-strip pe un singur rând, reglăm imaginea featured. */ @media (min-width: 1025px) and (max-width: 1440px) { .hero-cream { margin-top: -190px; padding: 0 0 50px 20px; } .trust-strip { flex-wrap: nowrap; gap: 14px 18px; font-size: 12px; } .trust-strip li { white-space: nowrap; } .trust-strip i { width: 26px; height: 26px; font-size: 11px; } .featured-image img { width: 90%; } .featured-image__overlay { position: absolute; bottom: -139px; right: 0; } } @media (max-width: 960px) { /* Clip-path-ul SVG e croit pentru layoutul larg — pe ecrane înguste generează colțuri/tăieturi disproporționate. Înlocuim cu border-radius. */ .hero-sage { padding: 70px 0 32px; -webkit-clip-path: none; clip-path: none; border-radius: 0 0 28px 28px; -webkit-filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.45)); filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.45)); transform: none; } .featured-grid { grid-template-columns: 1fr; grid-template-rows: auto; gap: 28px; } .featured-row { white-space: normal; } /* Override la ordinea din sursă (title → cta → intro → image) ca aside-ul cu logo să stea direct sub titlu pe mobil. */ .featured-title { order: 1; } .featured-intro { order: 2; } .hero-cta-block { order: 3; } .featured-image-wrap { order: 4; } .featured-intro { grid-column: 1; grid-row: auto; margin-top: 0; justify-self: start; max-width: none; gap: 14px; align-items: center; } /* SVG logo are + label "METROPOLIS" jos. Circle 44px tăia colțurile + făcea label-ul ilizibil — trecem la pătrat rotunjit, mai mare, ca SVG-ul să se vadă întreg. */ .featured-intro .featured-agent { width: 56px; height: 56px; border-radius: 12px; } .featured-intro p { font-size: 13px; line-height: 1.5; } .featured-title { grid-column: 1; grid-row: auto; margin-top: 8px; font-size: clamp(44px, 11vw, 84px); } .hero-cta-block { grid-column: 1; grid-row: auto; margin-top: 0; max-width: none; } .featured-image-wrap { grid-column: 1; grid-row: auto; transform: none; } .featured-image { --notch: 64px; aspect-ratio: 1.3 / 1; } .featured-image__overlay { right: 8px; bottom: -28px; width: 50%; } .featured-badge { width: 86px; height: 86px; top: 14px; left: 14px; } .featured-badge-icon { width: 36px; height: 36px; } .featured-badge-text text { font-size: 12px; } /* Cream zone: full-width pe mobil, fără pull-up sub trapez */ .hero-cream { margin-top: 24px; padding: 0 16px 32px; } .hero-cream__inner { width: 100%; } } @media (max-width: 560px) { .hero-sage { padding: 56px 0 24px; } .featured-grid { gap: 22px; } .featured-title { font-size: clamp(36px, 12.5vw, 64px); } .featured-image { --notch: 48px; aspect-ratio: 1.25 / 1; } .featured-image__overlay { width: 56%; right: 6px; bottom: -22px; } .featured-badge { width: 72px; height: 72px; top: 12px; left: 12px; } .featured-badge-icon { width: 30px; height: 30px; } .hero-subtitle { font-size: 14px; } .hero-cta { padding: 13px 22px; font-size: 13px; } .featured-intro p { font-size: 13px; } .featured-intro .featured-agent { width: 52px; height: 52px; border-radius: 11px; } } /* ============================================ */ /* SECTION: ABOUT / EST */ /* ============================================ */ .section-about { padding: 80px 0; background: var(--color-blue-mist); /* off-white blue-tinted ca în screenshot */ } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } /* Container imagine: limbă sage în spate la top-left + clip cu notch + buton la bottom-right */ .about-image { position: relative; margin: 0; aspect-ratio: 4 / 5; } /* "Limbă" sage-green care apare în notch-ul top-left al imaginii */ .about-image-tongue { position: absolute; top: 0; left: 0; width: 110px; height: 110px; background: var(--color-sage-tint); border-radius: 18px; z-index: 0; } .about-image-clip { position: relative; z-index: 1; width: 100%; height: 100%; overflow: hidden; --notch: 78px; } .about-image-clip img { width: 100%; height: 100%; object-fit: cover; } /* Butonul săgeată stă în bite-ul concav bottom-right */ .about-arrow-btn { position: absolute; bottom: 6px; right: 6px; z-index: 2; width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-white); color: var(--color-ink); border-radius: 16px; font-size: 16px; border: 1px solid rgba(42, 42, 42, 0.10); transition: background 0.2s, color 0.2s; } .about-arrow-btn:hover { background: var(--color-accent); color: var(--color-white); border-color: var(--color-accent); } .about-content { display: flex; flex-direction: column; gap: 180px; /* spațiu mare între panelul de sus și paragraful de jos */ padding-top: 4px; } /* Rândul de sus: EST badge (auto) + title panel (1fr) */ .about-head { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; } /* EST badge — pătrat sage standalone cu icon + text */ .about-est { width: 72px; height: 72px; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: space-between; background: var(--color-sage); color: var(--color-ink); border-radius: 14px; padding: 10px 12px; font-weight: 700; line-height: 1; } .about-est i { font-size: 18px; opacity: 0.85; } .about-est-text { display: flex; flex-direction: column; gap: 2px; } .about-est-line { font-size: 11px; letter-spacing: 0.04em; line-height: 1.1; } /* Title panel — sage rectangle cu notched corners + decoratie pe dreapta */ .about-title-panel { position: relative; background: var(--color-sage); padding: 28px 60px 28px 32px; --notch: 44px; } .about-title { font-family: var(--font-head); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.25; font-weight: 500; color: var(--color-ink); letter-spacing: -0.005em; } /* Mică bară decorativă pe partea dreaptă a panelului */ .about-panel-deco { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 40px; height: 6px; background: var(--color-sage-soft); border-radius: 999px; } /* Paragrafe — spațiate ca în screenshot (paragraf gol între blocuri) */ .about-body { display: flex; flex-direction: column; gap: 24px; } .about-body p { font-size: 14px; line-height: 1.6; color: var(--color-text-soft); margin: 0; } .about-body p { font-size: 14px; line-height: 1.65; color: var(--color-text-soft); margin-bottom: 14px; } .about-body p:last-child { margin-bottom: 0; } /* ============================================ */ /* SECTION: PROPERTY SLIDER */ /* ============================================ */ .section-slider { padding: 60px 0 100px; background: var(--color-blue-mist); } .slider-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 16px; } .slider-card { scroll-snap-align: start; } .slider-card__media { position: relative; margin: 0; aspect-ratio: 4 / 5; } /* Container clipuit cu notched corners */ .slider-card__clip { width: 100%; height: 100%; overflow: hidden; background: var(--color-sage); /* sage-green ca în screenshot — apare în notch */ --notch: 60px; } .slider-card__clip img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .slider-card:hover .slider-card__clip img { transform: scale(1.04); } /* Pill-ul VIEW DETAIL stă în bite-ul concav top-left, poziționat ca în screenshot (peste imagine, în zona stângă mijloc) */ .slider-card__cta { position: absolute; top: 32%; left: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 16px; background: var(--color-white); color: var(--color-ink); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; border-radius: 999px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10); transition: background 0.2s, color 0.2s; z-index: 2; } .slider-card__cta:hover { background: var(--color-accent); color: var(--color-white); } .slider-card__cta i { font-size: 9px; } .slider-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 6px 0; } .slider-card__name { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--color-ink); } .slider-card__date { font-size: 12px; color: var(--color-text-soft); letter-spacing: 0.04em; } /* ============================================ */ /* SECTION: BLOG */ /* ============================================ */ .section-blog { padding: 80px 0 100px; } .blog-grid { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 24px; align-items: stretch; } .blog-card { display: flex; flex-direction: column; position: relative; } .blog-card__media { position: relative; overflow: hidden; border-radius: var(--radius-card); aspect-ratio: 3 / 4; } .blog-card--featured .blog-card__media { aspect-ratio: 4 / 5; } .blog-card__media-link { display: block; width: 100%; height: 100%; } .blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .blog-card:hover .blog-card__media img { transform: scale(1.04); } .blog-card__arrow { position: absolute; top: 14px; left: 0; display: inline-flex; align-items: center; justify-content: center; padding: 6px 14px; background: var(--color-accent); color: var(--color-white); font-size: 13px; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; box-shadow: 0 3px 10px rgba(229, 122, 38, 0.35); transition: background 0.2s, color 0.2s; } .blog-card__arrow:hover { background: var(--color-ink); color: var(--color-white); } .blog-card__pills { position: absolute; top: 14px; left: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .blog-card__pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: var(--color-white); color: var(--color-ink); font-size: 11px; font-weight: 500; border-radius: 999px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .blog-card__body { padding: 16px 4px 0; } .blog-card__cat { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--color-text-soft); margin-bottom: 8px; } .blog-card__dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--color-text-soft); } .blog-card__title { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--color-ink); } .blog-card__title a { transition: opacity 0.2s; } /* .blog-card__title a:hover { opacity: 0.7; } */ /* Shape comună celor 2 variante de titlu floating: dreptunghi alb cu UN colț rotunjit care iese în imagine */ .blog-card__title--floating, .blog-card__title--floating-bottom { position: absolute; z-index: 5; background: var(--color-bg); font-weight: 700; color: var(--color-ink); } /* Featured: două pill-uri albe care "atârnă" peste imagine ca în model. Linia 1 sus, offset spre stânga. Linia 2 dedesubt, mai aproape de marginea dreaptă (mai spre margine). */ .blog-card__title--floating { top: 0px; /* mai jos de marginea de sus a boxului */ left: 0px; /* mai în dreapta de marginea stângă a boxului */ right: 0px; background: transparent; padding: 0; font-size: 22px; line-height: 1.2; pointer-events: none; /* clickurile trec spre de dedesubt */ } .blog-card__title--floating a { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: auto; } /* SVG inline cu shape-ul exact din model — pill sus-stânga + pill jos-dreapta conectate prin curbă S. Aliniat dreapta, lățime limitată. */ .blog-card__title--floating a { display: block; width: 100%; text-align: right; /* SVG-ul inline-block se aliniază dreapta */ pointer-events: auto; } .blog-card__title-svg { display: inline-block; width: 60%; /* max-width: 280px; */ height: auto; overflow: visible; } /* Pe cardul featured, mutăm "Blog" arrow în bottom-left ca să nu intre peste titlu */ .blog-card--featured .blog-card__arrow { top: auto; bottom: 14px; } .blog-card--featured .blog-card__media { border-top-right-radius: 28px; } /* Small cards: SVG oglinda — ancorat jos, ridicat și mutat spre dreapta */ .blog-card__title--floating-bottom { left: 0px; right: 0px; bottom: -10px; background: transparent; padding: 0; border-top-right-radius: 0; max-width: none; font-size: 22px; line-height: 1.2; pointer-events: none; } .blog-card__title--floating-bottom a { display: block; width: 100%; text-align: left; pointer-events: auto; } .blog-card--small .blog-card__media { border-bottom-left-radius: 28px; } .blog-card__play { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 10px; color: var(--color-white); } .blog-card__play-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--color-accent); color: var(--color-white); border-radius: 50%; font-size: 12px; padding-left: 2px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .blog-card__play-label { font-size: 13px; font-weight: 500; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } /* ============================================ */ /* FOOTER */ /* ============================================ */ /* Bandă decorativă cu pattern de dungi orizontale (subscribe-bg.svg, tile 50×187) Dungile se îngroașă spre bază, creând tranziție spre footer-ul închis */ .subscribe-pattern { height: 187px; margin-top: 80px; background-color: transparent; background-image: url("data:image/svg+xml;utf8,"); background-repeat: repeat-x; background-position: center bottom; } .footer-wrapper { background-color: var(--color-deep-brown-2); /* espresso brown — ton cald întunecat */ background-image: linear-gradient(rgba(46, 37, 29, 0.80), rgba(46, 37, 29, 0.80)), url("../mock-images/footer.png"); background-size: cover; background-position: center top; background-repeat: no-repeat; color: var(--color-bg); margin-top: 0; } .site-footer { border: none; background: transparent; padding: 0; color: inherit; font-size: 14px; text-align: left; } /* --- top section: 4-col grid --- */ .footer-main { padding: 64px 0 48px; } .footer-grid { display: grid; grid-template-columns: 1.3fr 1.4fr 1fr 1fr; gap: 48px; } .footer-col h6 { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-bg); margin-bottom: 20px; opacity: 0.65; } /* brand col */ .footer-logo { display: inline-block; font-family: var(--font-head); font-size: 24px; font-weight: 800; color: var(--color-bg); margin-bottom: 18px; letter-spacing: -0.01em; } .footer-tagline { font-size: 14px; line-height: 1.65; color: var(--color-bg); opacity: 0.7; max-width: 320px; } .color-accent { color: var(--color-accent); font-weight: 600; opacity: 1; } /* nav col */ .footer-nav-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .footer-links { display: flex; flex-direction: column; gap: 10px; } .footer-links a { color: var(--color-bg); opacity: 0.65; font-size: 14px; transition: opacity 0.2s, color 0.2s; } .footer-links a:hover { opacity: 1; color: var(--color-accent); } /* contact col */ .footer-contact p { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; color: var(--color-bg); opacity: 0.85; font-size: 14px; line-height: 1.5; } .footer-contact-icon { flex-shrink: 0; margin-top: 4px; opacity: 0.7; } .footer-contact a { color: inherit; transition: color 0.2s; } .footer-contact a:hover { color: var(--color-accent); } .footer-cui { font-size: 12px; opacity: 0.5; margin-top: 12px; line-height: 1.5; } /* --- social bar --- */ .footer-social-bar { padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); } .footer-social-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .footer-scroll-top { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-accent); color: var(--color-white); border-radius: 50%; font-size: 14px; transition: background 0.2s, transform 0.2s; } .footer-scroll-top:hover { background: var(--color-bg); color: var(--color-ink); transform: translateY(-2px); } .footer-socials { display: flex; align-items: center; gap: 14px; } .footer-socials a { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-bg); opacity: 0.6; border-radius: 50%; transition: opacity 0.2s, color 0.2s, background 0.2s; } .footer-socials a:hover { opacity: 1; color: var(--color-accent); background: rgba(255, 255, 255, 0.05); } .footer-socials svg { width: 16px; height: 16px; fill: currentColor; } /* --- bottom row --- */ .footer-bottom { padding: 0 0 26px; } .footer-divider { height: 1px; background: rgba(255, 255, 255, 0.08); margin-bottom: 20px; } .footer-bottom-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 13px; } .footer-copyright { color: var(--color-bg); opacity: 0.55; } .footer-copyright a { color: inherit; text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s, opacity 0.2s; } .footer-copyright a:hover { color: var(--color-accent); opacity: 1; } .footer-bottom-links { display: flex; gap: 24px; } .footer-bottom-links a { color: var(--color-bg); opacity: 0.65; transition: opacity 0.2s, color 0.2s; } .footer-bottom-links a:hover { opacity: 1; color: var(--color-accent); } /* ============================================ */ /* RESPONSIVE */ /* ============================================ */ @media (max-width: 1440px) { :root { --card-width: minmax(0, 1fr); } .property-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .property-card { width: 100%; } } @media (max-width: 960px) { .property-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .site-nav { display: none; } .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .team-card:nth-child(even) { margin-top: 40px; } .blog-grid { grid-template-columns: 1fr 1fr; } .blog-card--featured { grid-column: span 2; } .section-head--split { flex-direction: column; align-items: flex-start; } .section-lead { text-align: left; margin-left: 0; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .stats-col { aspect-ratio: 2 / 3; } } @media (max-width: 600px) { .section-popular, .section-team, .section-blog { padding: 56px 0 72px; } .property-grid { grid-template-columns: 1fr; gap: 28px; } .property-card__foot { flex-wrap: wrap; } .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } /* Păstrăm zig-zag-ul pe mobil — cardurile pare coboară, ca pe pagina de agenți (.page-inner .section-team folosește 30px). */ .team-card:nth-child(even) { margin-top: 30px; } /* Pe mobil afișăm doar 4 membri (2x2). Al 5-lea card e ascuns. */ .team-grid .team-card:nth-child(n+5) { display: none; } .blog-grid { grid-template-columns: 1fr; } .blog-card--featured { grid-column: span 1; } /* Titlurile rămân ca pe desktop: SVG-pill floating peste imagine. Doar ușor mărite ca să fie lizibile pe mobil, păstrând shape-ul. */ .blog-card__title-svg { width: 78%; } .blog-card--featured .blog-card__media { aspect-ratio: 4 / 3; } .footer-grid { grid-template-columns: 1fr; gap: 32px; } .footer-nav-columns { grid-template-columns: 1fr 1fr; } .footer-bottom-row { flex-direction: column; align-items: flex-start; gap: 12px; } .footer-bottom-links { flex-wrap: wrap; gap: 12px 20px; } /* Pe mobil: doar cifrele rămân, ascundem imaginile */ .section-stats { padding: 56px 0; } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .stats-col { aspect-ratio: unset; flex-direction: column; gap: 0; } .stats-grid__media { display: none; } .stats-grid__stat { flex: unset; padding: 22px 20px; } } /* ============================================ PAGINATION — listing pages ============================================ */ .pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 56px auto 0; flex-wrap: wrap; list-style: none; padding: 0; } .pagination__page, .pagination__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; font-size: 14px; font-weight: 600; color: var(--color-ink); background: var(--color-bg); border: 1px solid var(--color-line); transition: background 0.2s, color 0.2s, border-color 0.2s; } .pagination__page:hover, .pagination__btn:hover { background: var(--color-bg-alt); } .pagination__page.is-active { background: var(--color-accent); color: var(--color-white); border-color: var(--color-accent); } .pagination__dots { padding: 0 8px; color: var(--color-text-soft); user-select: none; } /* ============================================ LISTING HERO — listing pages (vânzare / închiriere) ============================================ */ .listing-hero { padding: 130px 0 40px; position: relative; } /* HEAD: titlu + breadcrumbs (stânga) | select sortare (dreapta) */ .listing-hero__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 32px; } .listing-hero__head-left { display: flex; flex-direction: column; gap: 12px; } .listing-hero__title { font-family: var(--font-head); font-size: clamp(32px, 5vw, 50px); line-height: 1.05; font-weight: 400; color: var(--color-ink); letter-spacing: -0.025em; margin: 0; } .listing-hero__breadcrumbs { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .listing-hero__breadcrumbs a { color: var(--color-text-soft); transition: color 0.2s; } .listing-hero__breadcrumbs a:hover { color: var(--color-accent); } .listing-hero__breadcrumbs i { font-size: 9px; color: var(--color-text-soft); opacity: 0.7; } .listing-hero__breadcrumbs span { color: var(--color-accent); } /* Select sortare (dreapta) */ .listing-hero__sort { display: inline-flex; align-items: center; gap: 12px; background: var(--color-bg); border: 1px solid var(--color-line); border-radius: 14px; padding: 10px 16px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04); } .listing-hero__sort-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-soft); white-space: nowrap; } .listing-hero__sort-select { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--color-ink); background: transparent; border: none; outline: none; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M2.5 3.75 5 6.25l2.5-2.5' stroke='%23E57A26' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; padding-right: 18px; } /* === Formular căutare full-width sub titlu === */ .listing-search { background: var(--color-bg); border-radius: 22px; border: 1px solid var(--color-line); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.05); padding: 14px 16px; display: grid; grid-template-columns: 1.1fr 1fr 0.9fr 1.1fr auto; gap: 0; align-items: stretch; } .listing-search__field { display: flex; flex-direction: column; gap: 4px; padding: 10px 20px; border-right: 1px solid var(--color-line); cursor: pointer; } .listing-search__field:last-of-type { border-right: none; } .listing-search__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-soft); } .listing-search__select, .listing-search__input { font-family: var(--font-body); font-size: 14px; color: var(--color-ink); background: transparent; border: none; outline: none; padding: 4px 0; width: 100%; cursor: pointer; } .listing-search__select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M2.5 3.75 5 6.25l2.5-2.5' stroke='%23E57A26' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; padding-right: 18px; } .listing-search__range { display: flex; align-items: center; gap: 6px; } .listing-search__range input { width: 100%; min-width: 0; } .listing-search__range-sep { color: var(--color-text-soft); font-size: 12px; } .listing-search__submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 30px; margin: 4px; background: var(--color-accent); color: var(--color-white); border: none; border-radius: 14px; font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; box-shadow: 0 10px 24px rgba(229, 122, 38, 0.35); transition: transform 0.2s, box-shadow 0.2s; } .listing-search__submit:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(229, 122, 38, 0.45); } @media (max-width: 900px) { .listing-hero { padding: 110px 0 32px; } .listing-hero__head { flex-direction: column; align-items: flex-start; gap: 20px; } .listing-hero__sort { align-self: stretch; justify-content: space-between; } .listing-search { grid-template-columns: 1fr 1fr; padding: 12px; } .listing-search__field { border-right: none; border-bottom: 1px solid var(--color-line); } .listing-search__field:nth-last-of-type(2), .listing-search__field:last-of-type { border-bottom: none; } .listing-search__submit { grid-column: 1 / -1; margin: 6px 0 0; padding: 16px 30px; } } @media (max-width: 540px) { .listing-search { grid-template-columns: 1fr; } .listing-search__field { border-bottom: 1px solid var(--color-line) !important; } .listing-search__field:last-of-type { border-bottom: none !important; } } /* ============================================ ABOUT PAGE — Despre Metropolis Imobiliare ============================================ */ /* Pe paginile interioare (fără hero colorat sub header), textul meniului trebuie să fie închis ca să fie vizibil pe fundalul alb. Activat prin — homepage-ul nu primește clasa. */ .page-inner .site-header .site-logo, .page-inner .site-header .site-nav a { color: var(--color-ink); text-shadow: none; } .page-inner .site-header { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); } /* Pe paginile interioare (ex: agents.html) secțiunea team renunță la fundalul închis cu imagine și revine la layout alb cu text închis */ .page-inner .section-team { background-color: var(--color-bg); background-image: none; padding: 30px 0 80px; } .page-inner .section-team::before { display: none; } .page-inner .section-team .section-title, .page-inner .section-team .section-title strong { color: var(--color-ink); } .page-inner .section-team .section-lead { color: var(--color-text-soft); } .page-inner .section-team .team-card__name { color: var(--color-ink); } .page-inner .section-team .team-card__role { color: var(--color-text-soft); } /* Zigzag mai discret pe pagina de agenți (default era 64px pe home) */ .page-inner .section-team .team-card:nth-child(even) { margin-top: 30px; } /* === AGENTS CTA — banner full-width cu imagine + buton === */ .agents-cta { position: relative; padding: 100px 0; margin-top: 30px; color: var(--color-white); text-align: center; background-color: var(--color-deep-brown); background-image: linear-gradient(135deg, rgba(229, 122, 38, 0.78) 0%, rgba(58, 40, 32, 0.85) 100%), url("../mock-images/background-team.webp"); background-size: cover; background-position: center; } .agents-cta__inner { max-width: 640px; margin: 0 auto; } .agents-cta__eyebrow { display: inline-block; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.88); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 18px; } .agents-cta__title { font-family: var(--font-head); font-size: clamp(30px, 4.5vw, 52px); line-height: 1.1; font-weight: 400; color: var(--color-white); margin: 0 0 18px; letter-spacing: -0.02em; } .agents-cta__lead { font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, 0.85); margin: 0 auto 32px; max-width: 500px; } .agents-cta__btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 32px; background: var(--color-white); color: var(--color-accent); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22); transition: transform 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s; } .agents-cta__btn:hover { transform: translateY(-2px); background: var(--color-accent); color: var(--color-white); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28); } @media (max-width: 768px) { .agents-cta { padding: 70px 0; } } .about-hero { padding: 100px 0 40px; position: relative; overflow: hidden; } /* HEAD: titlu mare stânga + lead compact sus-dreapta */ .about-hero__head { display: grid; grid-template-columns: 2fr 1fr; gap: 80px; align-items: end; margin-bottom: 36px; } .about-hero__title { font-family: var(--font-head); font-size: clamp(40px, 6vw, 50px); line-height: 1.05; font-weight: 400; color: var(--color-ink); letter-spacing: -0.025em; margin: 0; } .about-hero__lead { font-size: 14px; line-height: 1.55; color: var(--color-text-soft); margin: 0 0 0 auto; text-align: left; } /* MEDIA: imagine wide cu pattern decorativ overlay */ .about-hero__media { position: relative; border-radius: 22px; /* aspect-ratio: 16 / 5.5; */ } .about-hero__media img { width: 100%; height: 200px; object-fit: cover; border-radius: 22px; } /* Breadcrumbs peste colțul alb din stânga-sus al pattern-ului */ .about-hero__breadcrumbs { position: absolute; top: 10px; left: 32px; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink); z-index: 3; } .about-hero__breadcrumbs a { color: var(--color-text-soft); transition: color 0.2s; } .about-hero__breadcrumbs a:hover { color: var(--color-accent); } .about-hero__breadcrumbs i { font-size: 9px; color: var(--color-text-soft); opacity: 0.7; } .about-hero__breadcrumbs span { color: var(--color-accent); } .about-hero__breadcrumbs > * { white-space: nowrap; } /* Variantă cu pagina curentă forțată pe rândul 2 */ .about-hero__breadcrumbs--stacked { display: flex; flex-wrap: wrap; } .about-hero__breadcrumbs--stacked span[aria-current="page"] { flex: 0 0 100%; margin-top: 0; line-height: 1; } .about-hero__breadcrumbs--stacked i:last-of-type { display: none; } /* Pattern decorativ peste imagine */ .about-hero__media::after { content: ''; position: absolute; inset: 0; background-image: url("../images/pattern-despre.png"); background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 20px; pointer-events: none; z-index: 2; } /* Pe mobil — folosim variantă 327×200 optimizată pentru viewport îngust, ca pattern-ul să nu fie squished și să se vadă corect peste banner */ @media (max-width: 600px) { .about-hero__media::after { background-image: url("../images/pattern-despre-mobile.png"); background-size: 100% 100%; } } /* MacBook Air range (~1280-1440px) — pattern-ul desktop forțat la 100% 100% ca să se întindă exact pe lățimea banner-ului, fără cropping la „cover". */ @media (min-width: 1025px) and (max-width: 1440px) { .about-hero__media::after { background-image: url("../images/pattern-despre.png"); background-size: 100% 100%; } } .about-hero__scroll { position: absolute; right: 10px; bottom: 10px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-accent); color: var(--color-white); border-radius: 50%; font-size: 14px; box-shadow: 0 10px 24px rgba(229, 122, 38, 0.40); transition: transform 0.2s, background 0.2s; z-index: 3; } .about-hero__scroll:hover { background: var(--color-ink); transform: translateY(3px); } /* ============================================ STORY — citat stânga + card portocaliu dreapta ============================================ */ .about-story { padding: 50px 0; } .about-story__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } /* Coloana stânga — citat editorial */ .about-story__quote { position: relative; padding-top: 6px; } .about-story__quote-icon { font-size: 28px; color: var(--color-ink); margin-bottom: 24px; display: inline-block; opacity: 0.85; } .about-story__quote p { font-size: 17px; line-height: 1.7; color: var(--color-ink); margin-bottom: 40px; font-weight: 400; } .about-story__image { width: 100%; height: 150px; border-radius: 16px; aspect-ratio: 16 / 7; object-fit: cover; } /* Coloana dreapta — card colorat (portocaliu brand) */ .about-story__card { background: var(--color-accent); color: var(--color-white); padding: 44px 44px 48px; border-radius: 22px; position: relative; min-height: 100%; width: 100%; } .about-story__badge { position: absolute; top: 32px; right: 36px; display: inline-flex; align-items: center; gap: 8px; color: var(--color-white); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; } .about-story__badge i { font-size: 11px; } .about-story__card p { font-size: 14px; line-height: 1.7; margin-bottom: 18px; color: rgba(255, 255, 255, 0.94); } .about-story__card p:first-of-type { margin-top: 56px; } .about-story__card p:last-child { margin-bottom: 0; } /* ============================================ STATS BAR — pill minimalist cu 3 indicatori ============================================ */ .about-stats { padding: 10px 0 60px; } .about-stats__list { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--color-line); border-radius: 999px; padding: 22px 60px; list-style: none; margin: 0; background: var(--color-bg); } .about-stats__item { display: flex; align-items: center; justify-content: center; gap: 18px; position: relative; } .about-stats__item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 32px; width: 1px; background: var(--color-line); } .about-stats__number { font-family: var(--font-head); font-size: 38px; font-weight: 700; color: var(--color-accent); line-height: 1; letter-spacing: -0.01em; } .about-stats__number sup { font-size: 0.45em; font-weight: 600; top: -0.85em; margin-left: 1px; } .about-stats__label { font-size: 18px; line-height: 1.3; color: var(--color-text-soft); font-weight: 500; } /* ============================================ VALUES — Viziune / Misiune / Imagine ============================================ */ .about-values { padding: 30px 0 100px; } .about-values__grid { display: grid; grid-template-columns: 1fr 1fr 0.9fr; gap: 24px; } .value-card { position: relative; background: var(--color-bg); border: 1px solid var(--color-line); border-radius: 22px; padding: 32px 32px 38px; min-height: 240px; display: flex; flex-direction: column; justify-content: flex-end; } /* Pentru cardurile text (cu .value-card__inner) shell-ul exterior nu mai are vizual propriu — totul e mutat pe inner, care primește notch-ul circular */ .value-card:has(.value-card__inner) { background: none; border: none; border-radius: 0; padding: 0; } .value-card__inner { --notch: 70px; background: var(--color-bg); border: 1px solid var(--color-line); border-radius: 22px; padding: 32px 32px 38px; width: 100%; min-height: 240px; display: flex; flex-direction: column; justify-content: flex-end; -webkit-mask: radial-gradient(circle var(--notch) at 100% 0, transparent calc(var(--notch) - 0.5px), var(--color-black) var(--notch)); mask: radial-gradient(circle var(--notch) at 100% 0, transparent calc(var(--notch) - 0.5px), var(--color-black) var(--notch)); } /* Arc de border pe curba scobiturii — un sfert de cerc desenat pe shell-ul exterior (NU pe inner, ca să nu fie tăiat de mask). Completează linia normală de border din inner, ocolind logo-ul M. */ .value-card:has(.value-card__inner)::after { content: ''; position: absolute; top: 38px; right: 0; width: 140px; height: 140px; border: 1px solid var(--color-line); border-radius: 50%; transform: translate(50%, -50%); pointer-events: none; clip-path: polygon(0 50%, 50% 50%, 50% 100%, 0 100%); z-index: 3; } /* Logo-ul stă în afara inner-ului → nu e tăiat de mască și apare în scobitură */ .value-card__logo { position: absolute; top: 40px; right: -4px; width: 50px; height: 50px; display: block; z-index: 2; pointer-events: none; } .value-card__logo svg { width: 100%; height: 100%; display: block; border-radius: 12px; box-shadow: 0 6px 14px rgba(229, 122, 38, 0.28); } .value-card__icon { position: absolute; top: 28px; right: 28px; font-size: 14px; color: var(--color-accent); } .value-card__title { font-family: var(--font-head); font-size: clamp(36px, 4.5vw, 56px); font-weight: 700; letter-spacing: -0.02em; color: var(--color-ink); margin: 0; line-height: 0.95; } .value-card__text { font-size: 13px; line-height: 1.55; color: var(--color-text-soft); margin-top: 14px; max-width: 300px; } /* Cardul imagine — fără padding, doar imaginea în interior */ .value-card--image { padding: 0; border: none; overflow: hidden; } .value-card--image img { width: 100%; height: 100%; object-fit: cover; } /* ============================================ CTA FINAL ============================================ */ .about-cta { padding: 50px 0 100px; } .about-cta__inner { background: var(--color-bg-alt); border-radius: 22px; padding: 70px 40px; text-align: center; } .about-cta__title { font-family: var(--font-head); font-size: clamp(30px, 4.5vw, 52px); line-height: 1.05; font-weight: 400; color: var(--color-ink); margin-bottom: 14px; letter-spacing: -0.02em; } .about-cta__lead { font-size: 15px; color: var(--color-text-soft); margin-bottom: 28px; } .about-cta__btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; background: var(--color-accent); color: var(--color-white); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; box-shadow: 0 10px 24px rgba(229, 122, 38, 0.40); transition: transform 0.2s, box-shadow 0.2s; } .about-cta__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(229, 122, 38, 0.50); } /* ============================================ CONTACT PAGE — info stânga + formular dreapta + hartă ============================================ */ .contact-section { padding: 50px 0 70px; } .contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: stretch; } /* === Coloana stânga === */ .contact-info { padding-right: 12px; } .contact-info__eyebrow { display: inline-block; font-size: 12px; font-weight: 700; color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 14px; } .contact-info__title { font-family: var(--font-head); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; font-weight: 400; color: var(--color-ink); letter-spacing: -0.02em; margin: 0 0 16px; } .contact-info__lead { font-size: 14px; line-height: 1.65; color: var(--color-text-soft); margin: 0 0 32px; max-width: 420px; } .contact-info__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 24px; margin: 0 0 36px; list-style: none; padding: 0; } .contact-info__item { display: flex; gap: 14px; align-items: flex-start; } .contact-info__icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(229, 122, 38, 0.10); color: var(--color-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } .contact-info__label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-ink); margin: 2px 0 4px; } .contact-info__value { font-size: 13px; color: var(--color-text-soft); margin: 0; line-height: 1.5; } .contact-info__value a { color: inherit; transition: color 0.2s; } .contact-info__value a:hover { color: var(--color-accent); } .contact-info__socials { display: inline-flex; gap: 8px; margin-top: 2px; } .contact-info__socials a { width: 30px; height: 30px; border-radius: 50%; background: var(--color-bg-alt); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--color-ink); transition: background 0.2s, color 0.2s; } .contact-info__socials a:hover { background: var(--color-accent); color: var(--color-white); } .contact-info__media { display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; width: 100%; height: 200px; } .contact-info__media img { width: 100%; height: 100%; object-fit: cover; } /* === Coloana dreapta — card formular === */ .contact-form-card { background: var(--color-bg-alt); border-radius: 22px; padding: 40px; border: 1px solid var(--color-line); } .contact-form-card__title { font-family: var(--font-head); font-size: 22px; font-weight: 600; color: var(--color-ink); margin: 0 0 28px; letter-spacing: -0.01em; } .contact-form { display: flex; flex-direction: column; gap: 18px; } .contact-form__field { display: flex; flex-direction: column; gap: 6px; } .contact-form__label { font-size: 12px; font-weight: 600; color: var(--color-ink); letter-spacing: 0.04em; } .contact-form__input { font-family: var(--font-body); font-size: 14px; padding: 13px 16px; border: 1px solid var(--color-line); border-radius: 12px; background: var(--color-bg); color: var(--color-ink); transition: border-color 0.2s, box-shadow 0.2s; width: 100%; } .contact-form__input::placeholder { color: var(--color-text-soft); opacity: 0.7; } .contact-form__input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(229, 122, 38, 0.15); } .contact-form__textarea { resize: vertical; min-height: 120px; line-height: 1.5; } .contact-form__submit { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: var(--color-accent); color: var(--color-white); border: none; border-radius: 999px; font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 20px rgba(229, 122, 38, 0.35); transition: transform 0.2s, box-shadow 0.2s; align-self: flex-start; margin-top: 8px; } .contact-form__submit:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(229, 122, 38, 0.45); } /* === Hartă full-width, lipită de subscribe-pattern === */ .contact-map { width: 100%; margin-bottom: 0; line-height: 0; } .contact-map iframe { width: 100%; height: 480px; border: 0; display: block; } /* Pe pagina cu hartă, scoatem spațiul de 80px dintre map și subscribe-pattern */ body:has(.contact-map) .subscribe-pattern { margin-top: 0; } @media (max-width: 900px) { .contact-map iframe { height: 360px; } } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } .contact-info { padding-right: 0; } .contact-info__media { max-width: 100%; } .contact-form-card { padding: 28px; } .contact-map__inner { aspect-ratio: 4 / 3; } } @media (max-width: 540px) { .contact-info__grid { grid-template-columns: 1fr; } } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 900px) { .about-hero { padding-top: 120px; } .about-hero__head { grid-template-columns: 1fr; gap: 24px; } .about-hero__lead { max-width: 100%; margin-top: 0; } .about-hero__media { aspect-ratio: 4 / 3; --notch: 70px; } .about-story__grid { grid-template-columns: 1fr; gap: 50px; } .about-story__card p:first-of-type { margin-top: 70px; } .about-values__grid { grid-template-columns: 1fr 1fr; } .value-card--image { min-height: 240px; } } @media (max-width: 640px) { .about-stats__list { grid-template-columns: 1fr; border-radius: 22px; gap: 18px; padding: 24px; } .about-stats__item { justify-content: flex-start; padding: 8px 0; } .about-stats__item:not(:last-child)::after { display: none; } .about-values__grid { grid-template-columns: 1fr; } .about-story__card { padding: 80px 28px 32px; } .about-story__badge { top: 24px; right: 24px; } .about-story__card p:first-of-type { margin-top: 0; } } /* ============================================ BLOG LISTING — pagină blog cu grid 3 coloane ============================================ */ .blog-listing { padding: 30px 0 90px; } .blog-listing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 60px; } .blog-post-card { background: var(--color-bg); border-radius: 18px; overflow: hidden; border: 1px solid var(--color-line); display: flex; flex-direction: column; transition: transform 0.25s, box-shadow 0.25s; } .blog-post-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(0, 0, 0, 0.08); } .blog-post-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; } .blog-post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; } .blog-post-card:hover .blog-post-card__media img { transform: scale(1.05); } .blog-post-card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .blog-post-card__cat { align-self: flex-start; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); background: rgba(229, 122, 38, 0.10); padding: 5px 12px; border-radius: 999px; } .blog-post-card__title { font-family: var(--font-head); font-size: 22px; line-height: 1.2; font-weight: 500; color: var(--color-ink); margin: 0; letter-spacing: -0.015em; } .blog-post-card__title a { color: inherit; transition: color 0.2s; } .blog-post-card__title a:hover { color: var(--color-accent); } .blog-post-card__excerpt { font-size: 14px; line-height: 1.55; color: var(--color-text-soft); margin: 0; } .blog-post-card__meta { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-soft); margin-top: auto; padding-top: 8px; } .blog-post-card__meta i { font-size: 12px; color: var(--color-accent); } .blog-post-card__dot { opacity: 0.5; } @media (max-width: 960px) { .blog-listing__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } } @media (max-width: 600px) { .blog-listing__grid { grid-template-columns: 1fr; gap: 24px; } .blog-post-card__title { font-size: 20px; } } /* ============================================ LEGAL PAGES — Termeni & Politica de confidențialitate ============================================ */ .legal-page { padding: 20px 0 100px; } .legal-layout { max-width: 760px; margin: 0 auto; } /* ----- Conținut prose ----- */ .legal-content { max-width: 760px; color: var(--color-ink); } .legal-meta { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-soft); background: var(--color-bg-alt); padding: 8px 14px; border-radius: 999px; margin: 0 0 28px; } .legal-meta i { color: var(--color-accent); } .legal-intro { font-size: 17px; line-height: 1.6; color: var(--color-ink); margin: 0 0 50px; padding-bottom: 32px; border-bottom: 1px solid var(--color-line); } .legal-section { margin-bottom: 48px; scroll-margin-top: 110px; } .legal-section:last-child { margin-bottom: 0; } .legal-section h2 { font-family: var(--font-head); font-size: 28px; line-height: 1.2; font-weight: 500; color: var(--color-ink); letter-spacing: -0.015em; margin: 0 0 18px; } .legal-section h3 { font-family: var(--font-body); font-size: 17px; font-weight: 700; color: var(--color-ink); margin: 24px 0 10px; } .legal-section p { font-size: 15px; line-height: 1.7; color: var(--color-text-soft); margin: 0 0 14px; } .legal-section p:last-child { margin-bottom: 0; } .legal-section strong { color: var(--color-ink); font-weight: 600; } .legal-section a { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: opacity 0.2s; } .legal-section a:hover { opacity: 0.75; } .legal-section ul, .legal-section ol { padding-left: 20px; margin: 0 0 18px; } .legal-section ul li, .legal-section ol li { font-size: 15px; line-height: 1.65; color: var(--color-text-soft); margin-bottom: 8px; } .legal-section ul li::marker { color: var(--color-accent); } @media (max-width: 960px) { .legal-content { max-width: 100%; } } @media (max-width: 600px) { .legal-section h2 { font-size: 24px; } .legal-intro { font-size: 16px; } } /* ============================================ AGENT DETAIL — profil + portofoliu ============================================ */ .agent-profile { padding: 20px 0 50px; } .agent-profile__wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 28px; align-items: stretch; } .agent-profile__card { display: grid; grid-template-columns: 240px 1fr; gap: 0 32px; background: var(--color-bg); border-radius: 24px; border: 1px solid var(--color-line); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.06); padding: 28px; } .agent-profile__media { border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; } .agent-profile__media img { width: 100%; height: 100%; object-fit: cover; } .agent-profile__info { padding-top: 6px; } .agent-profile__role { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); background: rgba(229, 122, 38, 0.10); padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; } .agent-profile__name { font-family: var(--font-head); font-size: clamp(32px, 4vw, 44px); line-height: 1.05; font-weight: 500; color: var(--color-ink); letter-spacing: -0.02em; margin: 0 0 14px; } .agent-profile__tagline { font-size: 15px; line-height: 1.6; color: var(--color-text-soft); margin: 0 0 20px; max-width: 580px; } .agent-profile__meta { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 10px 22px; } .agent-profile__meta li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-soft); } .agent-profile__meta i { color: var(--color-accent); font-size: 13px; } .agent-profile__actions { display: flex; flex-wrap: wrap; gap: 10px; } .agent-profile__cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 12px; border: 1px solid var(--color-line); background: var(--color-bg); color: var(--color-ink); font-size: 13px; font-weight: 600; transition: transform 0.2s, background 0.2s, color 0.2s, border-color 0.2s; } .agent-profile__cta i { font-size: 13px; color: var(--color-accent); } .agent-profile__cta:hover { transform: translateY(-2px); border-color: var(--color-accent); } .agent-profile__cta--primary { background: var(--color-accent); color: var(--color-white); border-color: var(--color-accent); box-shadow: 0 10px 22px rgba(229, 122, 38, 0.32); } .agent-profile__cta--primary i { color: var(--color-white); } .agent-profile__cta--primary:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-white); } /* Stat inline lângă acțiuni — editorial, fără cutiuță */ .agent-profile__stat-inline { display: inline-flex; align-items: center; gap: 14px; margin-left: auto; padding: 2px 4px 2px 22px; position: relative; } .agent-profile__stat-inline::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--color-line); } .agent-profile__stat-num { font-family: var(--font-head); font-size: 38px; font-weight: 500; color: var(--color-accent); letter-spacing: -0.025em; line-height: 1; } .agent-profile__stat-num sup { font-size: 16px; top: -0.55em; } .agent-profile__stat-lab { font-family: var(--font-head); font-size: 13px; font-style: italic; font-weight: 400; line-height: 1.25; color: var(--color-text-soft); } /* Formular contact agent — grid 2-col compact */ .agent-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; } /* Floating variant: stă peste/lângă cardul agent, cu shadow puternic */ .agent-form--floating { background: var(--color-bg-alt); border-radius: 20px; border: 1px solid var(--color-line); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.10); padding: 24px 22px; position: relative; z-index: 2; } .agent-form--floating .agent-form__field input, .agent-form--floating .agent-form__field textarea { background: var(--color-bg); } .agent-form > *:not(.agent-form__field--half) { grid-column: 1 / -1; } .agent-form__title { font-family: var(--font-head); font-size: 20px; line-height: 1.2; font-weight: 500; color: var(--color-ink); letter-spacing: -0.015em; margin: 0; } .agent-form__sub { font-size: 12.5px; line-height: 1.5; color: var(--color-text-soft); margin: 0 0 4px; } .agent-form__field { display: flex; flex-direction: column; gap: 4px; } .agent-form__label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-soft); } .agent-form__field input, .agent-form__field textarea { font-family: var(--font-body); font-size: 13.5px; color: var(--color-ink); background: var(--color-bg); border: 1px solid var(--color-line); border-radius: 10px; padding: 9px 12px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; width: 100%; } .agent-form__field input::placeholder, .agent-form__field textarea::placeholder { color: var(--color-text-soft); opacity: 0.7; } .agent-form__field input:focus, .agent-form__field textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(229, 122, 38, 0.12); } .agent-form__field textarea { resize: vertical; min-height: 60px; } .agent-form__submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 20px; margin-top: 2px; background: var(--color-accent); color: var(--color-white); border: none; border-radius: 12px; font-family: var(--font-body); font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; box-shadow: 0 10px 24px rgba(229, 122, 38, 0.32); transition: transform 0.2s, box-shadow 0.2s, background 0.2s; } .agent-form__submit:hover { transform: translateY(-2px); background: var(--color-ink); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18); } .agent-form__legal { font-size: 11px; line-height: 1.5; color: var(--color-text-soft); margin: 4px 0 0; } .agent-form__legal a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; } /* ----- Listing proprietăți agent ----- */ .agent-properties { padding: 20px 0 90px; } .agent-properties__head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px 32px; margin-bottom: 32px; } .agent-properties__head .agent-profile__stat-inline { margin-left: 0; } .agent-properties__eyebrow { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); margin-bottom: 8px; } .agent-properties__title { font-family: var(--font-head); font-size: clamp(28px, 4vw, 38px); line-height: 1.1; font-weight: 500; color: var(--color-ink); letter-spacing: -0.015em; margin: 0; } .agent-properties__link { display: inline-flex; align-items: center; gap: 8px; color: var(--color-ink); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding-bottom: 4px; border-bottom: 2px solid var(--color-accent); transition: color 0.2s, gap 0.2s; } .agent-properties__link:hover { color: var(--color-accent); gap: 14px; } @media (max-width: 1024px) { .agent-profile__wrap { grid-template-columns: 1fr; } } @media (max-width: 960px) { .agent-profile__card { grid-template-columns: 200px 1fr; padding: 24px; gap: 0 24px; } .agent-profile__stat-inline { margin-left: 0; } } @media (max-width: 640px) { .agent-profile__card { grid-template-columns: 1fr; gap: 24px; } .agent-profile__media { max-width: 220px; aspect-ratio: 1 / 1; margin: 0 auto; } /* Stat-ul (142+ Tranzacții) și link-ul (Vezi toate →) pe același rând, sub blocul titlu care urcă pe lățime totală. */ .agent-properties__head { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .agent-properties__head > div:first-child { flex: 1 0 100%; } .agent-profile__stat-inline { padding-left: 0; } .agent-profile__stat-inline::before { display: none; } .agent-profile__stat-num { font-size: 30px; } .agent-profile__stat-lab { font-size: 12px; } /* Pe mobil afișăm doar iconițele — economisim spațiu, text-ul span e ascuns. Butonul devine pătrat 44×44, accesibil la atingere. */ .agent-profile__cta { width: 44px; height: 44px; padding: 0; justify-content: center; gap: 0; border-radius: 50%; } .agent-profile__cta span { display: none; } .agent-profile__cta i { font-size: 15px; } } /* ============================================ BLOG POST — articol + sidebar ============================================ */ .blog-article { padding: 20px 0 90px; } .blog-article__layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 60px; align-items: start; } /* ----- Article main column ----- */ .blog-article__main { max-width: 720px; } .blog-article__head { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--color-line); } .blog-article__cat { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); background: rgba(229, 122, 38, 0.10); padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; } .blog-article__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--color-text-soft); } .blog-article__by { display: inline-flex; align-items: center; gap: 10px; } .blog-article__by picture { display: block; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; } .blog-article__by img { width: 100%; height: 100%; object-fit: cover; } .blog-article__by strong { color: var(--color-ink); font-weight: 600; } .blog-article__dot { opacity: 0.4; } /* ----- Body typography ----- */ .blog-article__lead { font-family: var(--font-head); font-size: 22px; line-height: 1.5; font-weight: 400; color: var(--color-ink); letter-spacing: -0.01em; margin: 0 0 24px; } .blog-article__main h2 { font-family: var(--font-head); font-size: 28px; line-height: 1.2; font-weight: 500; color: var(--color-ink); letter-spacing: -0.015em; margin: 40px 0 16px; } .blog-article__main > p { font-size: 16px; line-height: 1.75; color: var(--color-text-soft); margin: 0 0 18px; } .blog-article__main strong { color: var(--color-ink); font-weight: 600; } .blog-article__figure { margin: 36px 0; border-radius: 18px; overflow: hidden; } .blog-article__figure img { width: 100%; height: auto; display: block; } .blog-article__figure figcaption { font-family: var(--font-head); font-style: italic; font-size: 13px; color: var(--color-text-soft); margin-top: 10px; padding: 0 6px; } .blog-article__pullquote { margin: 36px 0; padding: 4px 0 4px 28px; border-left: 3px solid var(--color-accent); } .blog-article__pullquote p { font-family: var(--font-head); font-size: 20px; line-height: 1.45; font-style: italic; color: var(--color-ink); margin: 0; } /* ----- Article footer: autor + share ----- */ .blog-article__footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--color-line); } .blog-article__author { display: flex; gap: 20px; align-items: center; background: var(--color-bg-alt); border-radius: 18px; padding: 22px 24px; } .blog-article__author-media { flex: 0 0 80px; width: 80px; height: 80px; border-radius: 50%; overflow: hidden; } .blog-article__author-media img { width: 100%; height: 100%; object-fit: cover; } .blog-article__author-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-soft); } .blog-article__author-name { font-family: var(--font-head); font-size: 22px; font-weight: 500; color: var(--color-ink); letter-spacing: -0.015em; margin: 4px 0 4px; } .blog-article__author-role { font-size: 13px; color: var(--color-text-soft); margin: 0 0 10px; } .blog-article__author-link { display: inline-flex; align-items: center; gap: 6px; color: var(--color-accent); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; transition: gap 0.2s; } .blog-article__author-link:hover { gap: 12px; } .blog-article__share { display: flex; align-items: center; gap: 12px; margin-top: 24px; font-size: 13px; color: var(--color-text-soft); } .blog-article__share a { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-bg-alt); color: var(--color-ink); font-size: 14px; transition: background 0.2s, color 0.2s, transform 0.2s; } .blog-article__share a:hover { background: var(--color-accent); color: var(--color-white); transform: translateY(-2px); } /* ----- Sidebar ----- */ .blog-sidebar { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 28px; } .blog-sidebar__block { background: var(--color-bg); border: 1px solid var(--color-line); border-radius: 18px; padding: 22px 22px 24px; } .blog-sidebar__title { font-family: var(--font-head); font-size: 16px; font-weight: 500; color: var(--color-ink); letter-spacing: -0.01em; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--color-line); } .blog-sidebar__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; } .blog-sidebar__post { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; } .blog-sidebar__thumb { width: 76px; height: 76px; border-radius: 12px; overflow: hidden; } .blog-sidebar__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; } .blog-sidebar__post:hover .blog-sidebar__thumb img { transform: scale(1.05); } .blog-sidebar__post-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .blog-sidebar__cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); } .blog-sidebar__post-title { font-family: var(--font-head); font-size: 15px; line-height: 1.3; font-weight: 500; color: var(--color-ink); letter-spacing: -0.01em; margin: 0; transition: color 0.2s; } .blog-sidebar__post:hover .blog-sidebar__post-title { color: var(--color-accent); } .blog-sidebar__post-body time { font-size: 11px; color: var(--color-text-soft); margin-top: 2px; } .blog-sidebar__tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; } .blog-sidebar__tags a { display: inline-block; font-size: 12px; font-weight: 600; color: var(--color-ink); background: var(--color-bg-alt); padding: 6px 12px; border-radius: 999px; transition: background 0.2s, color 0.2s; } .blog-sidebar__tags a:hover { background: var(--color-accent); color: var(--color-white); } @media (max-width: 1024px) { .blog-article__layout { grid-template-columns: 1fr; gap: 50px; } .blog-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .blog-article__main { max-width: 100%; } } @media (max-width: 720px) { .blog-sidebar { grid-template-columns: 1fr; } .blog-article__lead { font-size: 18px; } .blog-article__main h2 { font-size: 24px; } .blog-article__pullquote p { font-size: 17px; } .blog-article__author { flex-direction: column; text-align: center; } .blog-article__author-media { margin: 0 auto; } } /* ============================================ SECTION: SERVICII — carusel dark cu intro + săgeți ============================================ */ .section-services { background: var(--color-ink); color: var(--color-white); padding: 100px 0; overflow: hidden; } .services-layout { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 60px; align-items: center; } /* ----- Intro coloana stânga ----- */ .services-intro__eyebrow { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-accent); margin-bottom: 16px; padding-left: 18px; position: relative; } .services-intro__eyebrow::before { content: ''; position: absolute; left: 0; top: 50%; width: 10px; height: 1px; background: var(--color-accent); } .services-intro__title { font-family: var(--font-head); font-size: clamp(32px, 4vw, 44px); line-height: 1.05; font-weight: 400; color: var(--color-white); letter-spacing: -0.02em; margin: 0 0 20px; } .services-intro__title strong { color: var(--color-accent); font-weight: 400; font-style: italic; } .services-intro__lead { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.65); margin: 0 0 32px; max-width: 360px; } .services-intro__nav { display: flex; gap: 12px; } .services-nav-btn { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: transparent; border: 1px solid rgba(255, 255, 255, 0.18); color: var(--color-white); font-size: 14px; cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.2s; } .services-nav-btn:hover { background: rgba(255, 255, 255, 0.06); transform: translateY(-2px); } .services-nav-btn--primary { background: var(--color-accent); border-color: var(--color-accent); box-shadow: 0 10px 24px rgba(229, 122, 38, 0.32); } .services-nav-btn--primary:hover { background: var(--color-ink); border-color: var(--color-accent); } /* ----- Carusel + cards ----- */ .services-carousel { position: relative; margin-right: calc(-1 * max((100vw - 1200px) / 2, 24px)); } .services-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 8px; padding-right: 24px; -ms-overflow-style: none; scrollbar-width: none; } .services-track::-webkit-scrollbar { display: none; } .service-card { flex: 0 0 280px; scroll-snap-align: start; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 22px; padding: 26px 22px 22px; display: flex; flex-direction: column; gap: 14px; position: relative; transition: background 0.25s, border-color 0.25s, transform 0.25s; } .service-card:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); transform: translateY(-4px); } .service-card__cat { align-self: flex-start; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-accent); background: rgba(229, 122, 38, 0.12); padding: 5px 12px; border-radius: 999px; } .service-card__title { font-family: var(--font-head); font-size: 24px; line-height: 1.15; font-weight: 500; color: var(--color-white); letter-spacing: -0.015em; margin: 0; } .service-card__media { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; margin: 4px 0; } .service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .service-card:hover .service-card__media img { transform: scale(1.05); } .service-card__desc { font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, 0.6); margin: 0 0 8px; } .service-card__link { align-self: flex-start; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-white); color: var(--color-ink); font-size: 13px; margin-top: auto; transition: background 0.2s, color 0.2s, transform 0.2s; } .service-card__link:hover { background: var(--color-accent); color: var(--color-white); transform: translateX(4px); } @media (max-width: 900px) { .section-services { padding: 70px 0; } .services-layout { grid-template-columns: 1fr; gap: 36px; } .services-carousel { margin-right: -24px; } .service-card { flex: 0 0 260px; } } /* ============================================ SECTION: TESTIMONIAL — imagine stânga + slider flotant dreapta ============================================ */ .section-testimonial { padding: 130px 0; background: var(--color-bg); } .testimonial-layout { position: relative; min-height: 680px; padding-right: 24px; } /* ----- Imagine 60% lățime viewport, lipită stânga ----- */ .testimonial-image { position: relative; width: 60%; aspect-ratio: 4 / 3; border-top-right-radius: 28px; border-bottom-right-radius: 28px; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.10); } .testimonial-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .testimonial-image__badge { position: absolute; left: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); color: var(--color-ink); font-size: 12px; font-weight: 700; padding: 10px 16px; border-radius: 999px; letter-spacing: 0.04em; } .testimonial-image__badge i { color: var(--color-accent); font-size: 11px; } /* ----- Slider flotant pe dreapta, suprapus parțial cu marginea imaginii ----- */ .testimonial-slider { position: absolute; top: 50%; left: 55%; transform: translateY(-50%); width: clamp(420px, 32vw, 600px); background: var(--color-bg); border-radius: 24px; border: 1px solid var(--color-line); box-shadow: 0 32px 60px rgba(0, 0, 0, 0.12); padding: 48px 40px 36px; z-index: 2; } .testimonial-slider__head { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--color-line); } .testimonial-slider__eyebrow { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-accent); margin-bottom: 10px; padding-left: 18px; position: relative; } .testimonial-slider__eyebrow::before { content: ''; position: absolute; left: 0; top: 50%; width: 10px; height: 1px; background: var(--color-accent); } .testimonial-slider__title { font-family: var(--font-head); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; font-weight: 400; color: var(--color-ink); letter-spacing: -0.02em; margin: 0; } .testimonial-slider__title strong { color: var(--color-accent); font-weight: 400; font-style: italic; } /* ----- Track + carduri (un card vizibil pe rând) ----- */ .testimonial-track { position: relative; min-height: 260px; margin-bottom: 24px; } .testimonial-card { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.35s, transform 0.35s, visibility 0s linear 0.35s; } .testimonial-card.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s, transform 0.35s, visibility 0s; } .testimonial-card__mark { font-size: 22px; color: var(--color-accent); opacity: 0.85; margin-bottom: 14px; display: block; } .testimonial-card__text { font-family: var(--font-head); font-size: 20px; line-height: 1.55; color: var(--color-ink); margin: 0 0 28px; font-style: italic; font-weight: 400; } .testimonial-card__author { display: flex; align-items: center; gap: 14px; } .testimonial-card__avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex: 0 0 48px; } .testimonial-card__avatar img { width: 100%; height: 100%; object-fit: cover; } .testimonial-card__author strong { display: block; font-size: 14px; font-weight: 600; color: var(--color-ink); } .testimonial-card__author span { display: block; font-size: 12px; color: var(--color-text-soft); margin-top: 2px; } /* ----- Navigare ----- */ .testimonial-nav { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--color-line); } .testimonial-nav__btn { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: transparent; border: 1px solid var(--color-line); color: var(--color-ink); font-size: 13px; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s; } .testimonial-nav__btn:hover { border-color: var(--color-accent); color: var(--color-accent); transform: translateY(-2px); } .testimonial-nav__btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); box-shadow: 0 8px 18px rgba(229, 122, 38, 0.32); } .testimonial-nav__btn--primary:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-white); } .testimonial-nav__count { margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--color-text-soft); text-transform: uppercase; font-variant-numeric: tabular-nums; } .testimonial-nav__count span:first-child { color: var(--color-ink); font-size: 18px; } /* ----- Responsive ----- */ @media (max-width: 1024px) { /* min-height: 680px era pentru slider-ul absolut pe desktop — pe mobil layout-ul e stivuit, nu mai are nevoie de înălțime minimă. */ .testimonial-layout { padding-right: 0; min-height: auto; } .testimonial-image { width: 100%; aspect-ratio: 16 / 9; border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } /* Slider-ul iese din absolute → flow normal sub imagine, fără overlap */ .testimonial-slider { position: relative; top: auto; left: auto; right: auto; transform: none; width: calc(100% - 48px); max-width: 540px; margin: 32px auto 0; } } @media (max-width: 600px) { .section-testimonial { padding: 70px 0; } .testimonial-slider { padding: 28px 24px 22px; margin-top: 24px; } .testimonial-card__text { font-size: 16px; } } /* ============================================ SECTION: PARTENERI — strip discret ============================================ */ .section-partners { padding: 40px 0; background: var(--color-bg); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); } .partners-strip { display: flex; align-items: center; gap: 40px; } .partners-strip__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-text-soft); white-space: nowrap; margin: 0; padding-right: 24px; border-right: 1px solid var(--color-line); } .partners-strip__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 32px 44px; } .partners-strip__list li { font-family: var(--font-head); font-size: 18px; font-weight: 500; color: var(--color-ink); letter-spacing: -0.01em; opacity: 0.55; transition: opacity 0.25s, color 0.25s; } .partners-strip__list li:hover { opacity: 1; color: var(--color-accent); } @media (max-width: 720px) { .partners-strip { flex-direction: column; align-items: flex-start; gap: 16px; } .partners-strip__label { border-right: none; padding-right: 0; } .partners-strip__list { gap: 18px 28px; } .partners-strip__list li { font-size: 16px; } } /* ============================================ SECTION: PROCES — layout editorial cu cifre mari ============================================ */ .section-process { padding: 110px 0; background: var(--color-bg); } .process-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; } /* Coloana stânga — intro sticky */ .process-intro { position: sticky; top: 110px; } .process-intro__eyebrow { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--color-accent); margin-bottom: 18px; padding-left: 18px; position: relative; } .process-intro__eyebrow::before { content: ''; position: absolute; left: 0; top: 50%; width: 10px; height: 1px; background: var(--color-accent); } .process-intro__title { font-family: var(--font-head); font-size: clamp(36px, 4.8vw, 56px); line-height: 0.98; font-weight: 400; color: var(--color-ink); letter-spacing: -0.03em; margin: 0 0 22px; } .process-intro__title br + * { font-style: italic; } .process-intro__note { font-size: 15px; line-height: 1.65; color: var(--color-text-soft); margin: 0 0 28px; max-width: 380px; } .process-intro__cta { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-ink); padding-bottom: 6px; border-bottom: 1px solid var(--color-ink); transition: gap 0.25s, color 0.25s, border-color 0.25s; } .process-intro__cta:hover { color: var(--color-accent); border-color: var(--color-accent); gap: 16px; } /* Coloana dreapta — stivă editorială */ .process-stack { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--color-line); } .process-row { display: grid; grid-template-columns: 110px 1fr; gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--color-line); align-items: baseline; transition: padding 0.3s; } .process-row__num { font-family: var(--font-head); font-size: clamp(54px, 6vw, 72px); font-weight: 400; line-height: 1; color: var(--color-ink); opacity: 0.12; letter-spacing: -0.04em; font-feature-settings: "lnum"; transition: opacity 0.4s, color 0.4s, transform 0.4s; } .process-row:hover .process-row__num { opacity: 1; color: var(--color-accent); transform: translateX(4px); } .process-row__title { font-family: var(--font-head); font-size: clamp(20px, 2.2vw, 24px); line-height: 1.2; font-weight: 500; color: var(--color-ink); letter-spacing: -0.015em; margin: 0 0 10px; } .process-row__body p { font-size: 15px; line-height: 1.7; color: var(--color-text-soft); margin: 0; max-width: 600px; } @media (max-width: 1024px) { .process-layout { grid-template-columns: 1fr; gap: 50px; } .process-intro { position: static; } .process-intro__note { max-width: 100%; } } @media (max-width: 560px) { .section-process { padding: 80px 0; } .process-row { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; } .process-row__num { opacity: 1; color: var(--color-accent); font-size: 42px; } } /* ============================================ SECTION: FAQ — accordion ============================================ */ .section-faq { padding: 100px 0; background: var(--color-bg); } .faq-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; } .faq-head { position: sticky; top: 110px; } .faq-head__eyebrow { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-accent); margin-bottom: 12px; } .faq-head .section-title { margin-bottom: 18px; } .faq-head__lead { font-size: 15px; line-height: 1.6; color: var(--color-text-soft); margin: 0 0 24px; max-width: 360px; } .faq-head__cta { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; background: var(--color-ink); color: var(--color-white); border-radius: 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: background 0.25s, transform 0.25s, gap 0.25s; } .faq-head__cta:hover { background: var(--color-accent); transform: translateY(-2px); gap: 16px; } .faq-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .faq-item details { background: var(--color-bg); border: 1px solid var(--color-line); border-radius: 14px; transition: border-color 0.25s, box-shadow 0.25s; } .faq-item details[open] { border-color: var(--color-accent); box-shadow: 0 12px 30px rgba(229, 122, 38, 0.10); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; cursor: pointer; list-style: none; font-family: var(--font-head); font-size: 17px; line-height: 1.3; font-weight: 500; color: var(--color-ink); letter-spacing: -0.01em; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item__icon { flex: 0 0 32px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-bg-alt); color: var(--color-accent); font-size: 12px; transition: transform 0.25s, background 0.25s, color 0.25s; } .faq-item details[open] .faq-item__icon { transform: rotate(45deg); background: var(--color-accent); color: var(--color-white); } .faq-item__body { padding: 0 24px 22px; } .faq-item__body p { font-size: 14.5px; line-height: 1.7; color: var(--color-text-soft); margin: 0; } @media (max-width: 1024px) { .faq-layout { grid-template-columns: 1fr; gap: 40px; } .faq-head { position: static; } .faq-head__lead { max-width: 100%; } } /* ============================================ ABOUT — CTA BAND (banner contact înainte de proces) ============================================ */ .about-cta-band { padding: 60px 0 30px; background: var(--color-bg); } .cta-band { background: var(--color-ink); color: var(--color-white); padding: 60px 24px; position: relative; overflow: hidden; } .cta-band::after { content: ''; position: absolute; top: -120px; right: 6%; width: 320px; height: 320px; border-radius: 50%; background: rgba(229, 122, 38, 0.16); pointer-events: none; } .cta-band__inner { max-width: var(--container-max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 40px; position: relative; z-index: 1; } .cta-band__copy { max-width: 620px; } .cta-band__eyebrow { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--color-accent); margin-bottom: 14px; padding-left: 18px; position: relative; } .cta-band__eyebrow::before { content: ''; position: absolute; left: 0; top: 50%; width: 10px; height: 1px; background: var(--color-accent); } .cta-band__title { font-family: var(--font-head); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; font-weight: 400; color: var(--color-white); letter-spacing: -0.02em; margin: 0 0 14px; } .cta-band__title strong { color: var(--color-accent); font-weight: 400; font-style: italic; } .cta-band__lead { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); margin: 0; } .cta-band__btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; background: var(--color-accent); color: var(--color-white); border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 14px 30px rgba(229, 122, 38, 0.35); transition: background 0.25s, transform 0.25s, gap 0.25s; position: relative; z-index: 1; } .cta-band__btn:hover { background: var(--color-white); color: var(--color-ink); transform: translateY(-2px); gap: 16px; } @media (max-width: 900px) { .cta-band { padding: 48px 24px; } .cta-band__inner { flex-direction: column; align-items: flex-start; gap: 28px; } } @media (max-width: 560px) { .about-cta-band { padding: 40px 0 20px; } .cta-band { padding: 36px 20px; } .cta-band__btn { width: 100%; justify-content: center; } } /* ============================================ ABOUT — PASIUNE (mozaic integrat: text + foto într-un singur grid) ============================================ */ .about-passion { padding: 80px 0 40px; background: var(--color-bg); } /* Grid 6 col × 3 rânduri, text + 8 foto poziționate explicit */ .about-passion__mosaic { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(3, 160px); gap: 14px; } .about-passion__intro { display: flex; align-items: flex-start; padding: 4px 16px 0 0; } .about-passion__intro p { font-family: var(--font-head); font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4; font-weight: 400; color: var(--color-ink); letter-spacing: -0.01em; margin: 0; } .about-passion__intro strong { color: var(--color-accent); font-weight: 400; font-style: italic; } .about-passion__photo { margin: 0; border-radius: 14px; overflow: hidden; background: var(--color-bg-alt); position: relative; } /* Variantă CTA — overlay cu 2 butoane peste imagine */ .about-passion__photo--cta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%); pointer-events: none; z-index: 1; } .about-passion__cta { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; padding: 14px 16px; z-index: 2; } .about-passion__btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; transition: transform 0.25s, background 0.25s, color 0.25s, box-shadow 0.25s; white-space: nowrap; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.04) inset; min-width: 170px; } .about-passion__btn i { font-size: 11px; opacity: 0.85; } .about-passion__btn--dark { background: var(--color-ink); color: var(--color-white); } .about-passion__btn--dark:hover { background: var(--color-white); color: var(--color-ink); transform: translateY(-2px); } .about-passion__btn--accent { background: var(--color-accent); color: var(--color-white); box-shadow: 0 14px 30px rgba(229, 122, 38, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06) inset; } .about-passion__btn--accent:hover { background: var(--color-ink); color: var(--color-white); transform: translateY(-2px); } .about-passion__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s; } .about-passion__photo:hover img { transform: scale(1.05); } /* Poziționări explicite pentru mozaic asimetric */ .about-passion__mosaic > :nth-child(1) { /* text — cols 1-2 row 1 */ grid-column: 1 / span 2; grid-row: 1; } .about-passion__mosaic > :nth-child(2) { /* portrait team-1 — col 3 rows 1-2 */ grid-column: 3; grid-row: 1 / span 2; } .about-passion__mosaic > :nth-child(3) { /* hero wide+tall background-team — cols 4-5 rows 1-2 */ grid-column: 4 / span 2; grid-row: 1 / span 2; } .about-passion__mosaic > :nth-child(4) { /* portrait team-2 — col 6 rows 1-2 */ grid-column: 6; grid-row: 1 / span 2; } .about-passion__mosaic > :nth-child(5) { /* team-3 — col 1 row 2 */ grid-column: 1; grid-row: 2; } .about-passion__mosaic > :nth-child(6) { /* team-4 — col 2 row 2 */ grid-column: 2; grid-row: 2; } .about-passion__mosaic > :nth-child(7) { /* wide about-values — cols 1-2 row 3 */ grid-column: 1 / span 2; grid-row: 3; } .about-passion__mosaic > :nth-child(8) { /* team-5 — col 3 row 3 */ grid-column: 3; grid-row: 3; } .about-passion__mosaic > :nth-child(9) { /* wide about-quote — cols 4-6 row 3 */ grid-column: 4 / span 3; grid-row: 3; } @media (max-width: 1024px) { .about-passion__mosaic { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 150px); } .about-passion__mosaic > :nth-child(1) { grid-column: 1 / -1; grid-row: 1; } .about-passion__mosaic > :nth-child(2) { grid-column: 1; grid-row: 2 / span 2; } .about-passion__mosaic > :nth-child(3) { grid-column: 2 / span 2; grid-row: 2 / span 2; } .about-passion__mosaic > :nth-child(4) { grid-column: 4; grid-row: 2 / span 2; } .about-passion__mosaic > :nth-child(5) { grid-column: 1; grid-row: 4; } .about-passion__mosaic > :nth-child(6) { grid-column: 2; grid-row: 4; } .about-passion__mosaic > :nth-child(7) { grid-column: 3 / span 2; grid-row: 4; } .about-passion__mosaic > :nth-child(8) { grid-column: 1 / span 2; grid-row: 5; grid-template-rows: 150px; } .about-passion__mosaic > :nth-child(9) { grid-column: 3 / span 2; grid-row: 5; } } @media (max-width: 640px) { .about-passion { padding: 60px 0 30px; } .about-passion__mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; grid-auto-rows: 140px; } .about-passion__mosaic > * { grid-column: auto !important; grid-row: auto !important; } .about-passion__mosaic > :nth-child(1) { grid-column: 1 / -1 !important; height: auto; } /* Pe mobil ascundem team-4 (Cristian), about-values și team-5 (Răzvan). Rămâne: intro + team-1 + background-team + team-2 + team-3 + CTA. */ .about-passion__mosaic > :nth-child(6), .about-passion__mosaic > :nth-child(7), .about-passion__mosaic > :nth-child(8) { display: none; } /* CTA-photo are doar ~180px lățime în mozaicul 2×N — butoanele cu min-width: 170px nu încap. Compactăm: scoatem min-width, reducem padding/font/gap, iconițele rămân vizibile. */ .about-passion__photo--cta { grid-column: 1 / -1 !important; height: 180px; } .about-passion__cta { padding: 10px 12px; gap: 6px; align-items: flex-end; } .about-passion__btn { min-width: 0; padding: 8px 12px; font-size: 11px; gap: 6px; border-radius: 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); } .about-passion__btn i { font-size: 10px; } .about-passion__btn--accent { box-shadow: 0 6px 16px rgba(229, 122, 38, 0.35); } } /* ============================================ ABOUT — CE OFERIM (eyebrow + titlu | corp text) ============================================ */ .about-offer { padding: 60px 0 90px; background: var(--color-bg); } .about-offer__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 60px; align-items: start; } .about-offer__head { position: sticky; top: 110px; } .about-offer__eyebrow { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--color-text-soft); margin-bottom: 16px; } .about-offer__title { font-family: var(--font-head); font-size: clamp(40px, 5vw, 60px); line-height: 0.98; font-weight: 400; color: var(--color-ink); letter-spacing: -0.03em; margin: 0; } .about-offer__body { max-width: 640px; } .about-offer__lead { font-family: var(--font-body); font-size: 18px; line-height: 1.55; color: var(--color-ink); margin: 0 0 22px; font-weight: 400; } .about-offer__fine { font-size: 13.5px; line-height: 1.7; color: var(--color-text-soft); margin: 0; } @media (max-width: 1024px) { .about-offer__grid { grid-template-columns: 1fr; gap: 28px; } .about-offer__head { position: static; } } @media (max-width: 640px) { .about-offer { padding: 50px 0 70px; } .about-offer__lead { font-size: 16px; } } /* ============================================ PROPERTY DETAIL — pagina detalii proprietate ============================================ */ .pd-page { padding-top: 100px; } /* --- Breadcrumb --- */ .pd-crumb { padding: 16px 0 24px; } .pd-crumb-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .pd-crumb-nav a { color: var(--color-text-soft); transition: color 0.2s; } .pd-crumb-nav a:hover { color: var(--color-accent); } .pd-crumb-nav i { font-size: 9px; color: var(--color-text-soft); opacity: 0.6; } .pd-crumb-nav span { color: var(--color-accent); } /* --- GALERIE: 1 big stânga + grid 2x2 dreapta cu overlay „Vezi toate" --- */ .pd-gallery { padding: 0 0 32px; } .pd-gallery-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 14px; aspect-ratio: 16 / 7; /* max-height: 500px; */ } .pd-gallery__big { grid-row: 1 / 3; border-radius: 22px; overflow: hidden; position: relative; background: var(--color-bg-alt); } .pd-gallery__thumb { border-radius: 18px; overflow: hidden; position: relative; background: var(--color-bg-alt); } .pd-gallery__thumb--top { grid-column: 2 / 3; grid-row: 1 / 2; } .pd-gallery__thumb--mid-left { grid-column: 2 / 3; grid-row: 2 / 3; width: calc(50% - 7px); float: left; height: 100%; } .pd-gallery__thumb--mid-right { grid-column: 2 / 3; grid-row: 2 / 3; width: calc(50% - 7px); margin-left: calc(50% + 7px); height: 100%; } .pd-gallery__big img, .pd-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; display: block; } .pd-gallery__big:hover img, .pd-gallery__thumb:hover img { transform: scale(1.04); } .pd-gallery__more { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: rgba(42, 42, 42, 0.55); color: var(--color-white); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; backdrop-filter: blur(2px); } .pd-gallery__more i { font-size: 22px; } @media (max-width: 900px) { /* Galerie mobil: 1 imagine mare sus + thumbs mici jos pe un rând */ .pd-gallery-grid { display: flex; flex-wrap: wrap; gap: 8px; aspect-ratio: auto; grid-template-columns: none; grid-template-rows: none; } .pd-gallery__big { flex: 0 0 100%; width: 100%; aspect-ratio: 16 / 10; grid-column: auto !important; grid-row: auto !important; margin: 0 !important; } /* Thumbs — 3 pe un rând, mici, pătrate */ .pd-gallery__thumb { flex: 1 1 calc((100% - 16px) / 3); max-width: calc((100% - 16px) / 3); aspect-ratio: 1 / 1; grid-column: auto !important; grid-row: auto !important; width: auto !important; height: auto !important; margin: 0 !important; float: none !important; display: block !important; } /* Overlay "Vezi toate X fotografii" — pe mobil doar iconul */ .pd-gallery__more { font-size: 10px; padding: 6px; gap: 4px; flex-direction: column; text-align: center; } .pd-gallery__more i { font-size: 16px; } .pd-gallery__more span { display: none; } } /* --- HEADER: titlu + adresă + acțiuni | agent mini --- */ .pd-header { padding: 24px 0 28px; } .pd-header-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px; align-items: center; } .pd-eyebrow { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-accent); margin-bottom: 12px; } .pd-title { font-family: var(--font-head); font-size: clamp(34px, 4.6vw, 52px); line-height: 1; font-weight: 400; color: var(--color-ink); letter-spacing: -0.025em; margin: 0 0 12px; } .pd-location { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-text-soft); margin: 0 0 20px; } .pd-location i { color: var(--color-accent); } .pd-header__actions { display: flex; gap: 10px; flex-wrap: wrap; } .pd-action { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--color-bg); border: 1px solid var(--color-line); border-radius: 999px; color: var(--color-ink); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.2s; } .pd-action:hover { border-color: var(--color-accent); color: var(--color-accent); transform: translateY(-2px); } .pd-action i { font-size: 12px; } /* Bloc preț în partea dreaptă a header-ului */ .pd-header__price { display: flex; flex-direction: column; align-items: flex-end; justify-self: end; gap: 6px; background: var(--color-bg-alt); border-radius: 18px; padding: 22px 32px; text-align: right; min-width: 280px; position: relative; overflow: hidden; } .pd-header__price::after { content: ''; position: absolute; top: -60px; right: -60px; width: 160px; height: 160px; border-radius: 50%; background: rgba(229, 122, 38, 0.10); pointer-events: none; } .pd-header-price__eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-text-soft); position: relative; z-index: 1; } .pd-header-price__value { font-family: var(--font-head); font-size: clamp(32px, 4vw, 44px); line-height: 1; font-weight: 500; color: var(--color-accent); letter-spacing: -0.025em; position: relative; z-index: 1; } .pd-header-price__note { font-size: 12px; color: var(--color-text-soft); position: relative; z-index: 1; } /* Mini-card agent inline în header (rămas în CSS pentru reutilizare) */ .pd-header__agent { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; background: var(--color-bg-alt); border-radius: 18px; padding: 16px 20px; } .pd-header-agent__media { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: block; } .pd-header-agent__media img { width: 100%; height: 100%; object-fit: cover; } .pd-header-agent__name { font-family: var(--font-head); font-size: 18px; font-weight: 500; color: var(--color-ink); letter-spacing: -0.01em; margin: 0 0 2px; } .pd-header-agent__name a { color: inherit; } .pd-header-agent__name a:hover { color: var(--color-accent); } .pd-header-agent__role { display: block; font-size: 12px; color: var(--color-text-soft); margin-bottom: 6px; } .pd-header-agent__rating { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; } .pd-header-agent__rating i { color: var(--color-accent); font-size: 11px; } .pd-header-agent__rating strong { color: var(--color-ink); font-weight: 700; } .pd-header-agent__rating span { color: var(--color-text-soft); } .pd-header-agent__btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; background: var(--color-ink); color: var(--color-white); border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: background 0.2s, transform 0.2s; } .pd-header-agent__btn:hover { background: var(--color-accent); transform: translateY(-2px); } @media (max-width: 1024px) { .pd-header-grid { grid-template-columns: 1fr; gap: 24px; } } @media (max-width: 540px) { .pd-header__agent { grid-template-columns: 56px 1fr; row-gap: 12px; } .pd-header-agent__btn { grid-column: 1 / -1; justify-content: center; } } /* --- KEY FACTS BAR --- */ .pd-keyfacts { padding: 8px 0 32px; } .pd-keyfacts-inner { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; background: var(--color-bg); border: 1px solid var(--color-line); border-radius: 18px; padding: 22px 8px; } .pd-keyfact { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 12px; border-right: 1px solid var(--color-line); text-align: center; } .pd-keyfact:last-child { border-right: none; } .pd-keyfact__label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-soft); } .pd-keyfact__value { font-family: var(--font-head); font-size: 24px; font-weight: 500; color: var(--color-ink); letter-spacing: -0.015em; line-height: 1; } .pd-keyfact__value small { font-size: 12px; color: var(--color-text-soft); font-family: var(--font-body); margin-left: 1px; } .pd-keyfact--price .pd-keyfact__value { color: var(--color-accent); } @media (max-width: 900px) { .pd-keyfacts-inner { grid-template-columns: repeat(3, 1fr); gap: 18px 4px; } .pd-keyfact { border-right: none; } .pd-keyfact:nth-child(3n) { border-right: none; } } @media (max-width: 500px) { .pd-keyfacts-inner { grid-template-columns: repeat(2, 1fr); } } /* --- BODY GRID: article + sidebar --- */ .pd-body { padding: 16px 0 80px; } .pd-body-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 60px; align-items: start; } .pd-section { padding: 28px 0; border-bottom: 1px solid var(--color-line); } .pd-section:first-child { padding-top: 0; } .pd-section:last-child { border-bottom: none; } .pd-section-title { font-family: var(--font-head); font-size: 24px; line-height: 1.2; font-weight: 500; color: var(--color-ink); letter-spacing: -0.015em; margin: 0 0 18px; } .pd-description-wrap { position: relative; } .pd-description__text p { font-size: 15px; line-height: 1.75; color: var(--color-text-soft); margin: 0 0 14px; } .pd-description__text p:last-child { margin-bottom: 0; } /* Stare COLAPSAT — text trunchiat cu fade pe jos */ .pd-description-wrap[data-expanded="false"] .pd-description__text { max-height: 175px; overflow: hidden; position: relative; } .pd-description-wrap[data-expanded="false"] .pd-description__text::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--color-bg) 80%); pointer-events: none; } /* Buton toggle */ .pd-description__toggle { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: none; color: var(--color-accent); font-family: var(--font-body); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 14px 0 0; cursor: pointer; transition: gap 0.2s, color 0.2s; } .pd-description__toggle:hover { gap: 12px; color: var(--color-ink); } .pd-description__toggle i { font-size: 11px; transition: transform 0.3s; } /* Comutare „Vezi mai mult" / „Vezi mai puțin" */ .pd-description-wrap[data-expanded="false"] .pd-description__less { display: none; } .pd-description-wrap[data-expanded="true"] .pd-description__more { display: none; } .pd-description-wrap[data-expanded="true"] .pd-description__toggle i { transform: rotate(180deg); } .pd-features { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; } .pd-features li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--color-text-soft); } .pd-features li i { flex: 0 0 32px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(229, 122, 38, 0.10); color: var(--color-accent); font-size: 12px; } .pd-tour, .pd-map { border-radius: 18px; overflow: hidden; background: var(--color-bg-alt); } /* iframe-uri din interior — pe mobil iframe-ul de tur virtual / hartă are height fix de 480px setat inline (style="height:480px"), care e prea mare pe ecrane mici. Forțăm o înălțime mai mică prin CSS care suprascrie. */ @media (max-width: 900px) { .pd-tour iframe, .pd-map iframe { height: 320px !important; } } @media (max-width: 600px) { .pd-tour iframe, .pd-map iframe { height: 240px !important; } } @media (max-width: 720px) { .pd-features { grid-template-columns: 1fr; } } /* --- SIDEBAR --- */ .pd-sidebar { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 18px; } /* Card agent sidebar */ .pd-agent-card { display: grid; grid-template-columns: 80px 1fr; grid-template-rows: auto auto; gap: 14px 16px; background: var(--color-bg); border: 1px solid var(--color-line); border-radius: 18px; padding: 20px; } .pd-agent-card__media { grid-row: 1 / 2; width: 80px; height: 80px; border-radius: 50%; overflow: hidden; } .pd-agent-card__media img { width: 100%; height: 100%; object-fit: cover; } .pd-agent-card__body { align-self: center; } .pd-agent-card__eyebrow { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); margin-bottom: 4px; } .pd-agent-card__name { font-family: var(--font-head); font-size: 18px; font-weight: 500; color: var(--color-ink); letter-spacing: -0.01em; margin: 0 0 2px; } .pd-agent-card__name a { color: inherit; } .pd-agent-card__name a:hover { color: var(--color-accent); } .pd-agent-card__role { display: block; font-size: 12.5px; color: var(--color-text-soft); margin-bottom: 6px; } .pd-agent-card__rating { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; } .pd-agent-card__rating i { color: var(--color-accent); font-size: 11px; } .pd-agent-card__rating strong { color: var(--color-ink); } .pd-agent-card__rating span { color: var(--color-text-soft); } .pd-agent-card__actions { grid-column: 1 / -1; display: flex; gap: 8px; } .pd-agent-card__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: background 0.2s, color 0.2s, transform 0.2s; } .pd-agent-card__btn--primary { flex: 1; background: var(--color-ink); color: var(--color-white); } .pd-agent-card__btn--primary:hover { background: var(--color-accent); transform: translateY(-2px); } .pd-agent-card__btn--ghost { width: 44px; background: rgba(229, 122, 38, 0.10); color: var(--color-accent); } .pd-agent-card__btn--ghost:hover { background: var(--color-accent); color: var(--color-white); transform: translateY(-2px); } /* Formular lead sidebar */ .pd-lead-form { background: var(--color-bg-alt); border-radius: 18px; padding: 24px 22px; display: flex; flex-direction: column; gap: 12px; } .pd-lead-form__title { font-family: var(--font-head); font-size: 20px; line-height: 1.2; font-weight: 500; color: var(--color-ink); letter-spacing: -0.01em; margin: 0; } .pd-lead-form__sub { font-size: 13px; line-height: 1.5; color: var(--color-text-soft); margin: 0 0 6px; } .pd-lead-form__field { display: flex; flex-direction: column; gap: 5px; } .pd-lead-form__label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-soft); } .pd-lead-form__field input, .pd-lead-form__field textarea { font-family: var(--font-body); font-size: 13.5px; color: var(--color-ink); background: var(--color-bg); border: 1px solid var(--color-line); border-radius: 10px; padding: 10px 14px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .pd-lead-form__field input:focus, .pd-lead-form__field textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(229, 122, 38, 0.12); } .pd-lead-form__field textarea { resize: vertical; min-height: 80px; } .pd-lead-form__phone { display: flex; align-items: stretch; background: var(--color-bg); border: 1px solid var(--color-line); border-radius: 10px; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; } .pd-lead-form__phone:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(229, 122, 38, 0.12); } .pd-lead-form__country { display: inline-flex; align-items: center; padding: 0 12px; background: var(--color-bg-alt); font-size: 12.5px; font-weight: 600; color: var(--color-ink); border-right: 1px solid var(--color-line); white-space: nowrap; } .pd-lead-form__phone input { flex: 1; border: none; border-radius: 0; background: transparent; box-shadow: none !important; } .pd-lead-form__consent { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; line-height: 1.5; color: var(--color-text-soft); cursor: pointer; } .pd-lead-form__consent input { margin-top: 2px; accent-color: var(--color-accent); } .pd-lead-form__submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; background: var(--color-accent); color: var(--color-white); border: none; border-radius: 12px; font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; box-shadow: 0 10px 24px rgba(229, 122, 38, 0.32); transition: background 0.2s, transform 0.2s; margin-top: 4px; } .pd-lead-form__submit:hover { background: var(--color-ink); transform: translateY(-2px); } /* Contact card în sidebar — telefon + WhatsApp */ .pd-contact-card { background: var(--color-ink); color: var(--color-white); border-radius: 18px; padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; } .pd-contact-card::after { content: ''; position: absolute; top: -90px; right: -90px; width: 220px; height: 220px; border-radius: 50%; background: rgba(229, 122, 38, 0.16); pointer-events: none; } .pd-contact-card__eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-accent); position: relative; z-index: 1; } .pd-contact-card__title { font-family: var(--font-head); font-size: 22px; line-height: 1.2; font-weight: 500; color: var(--color-white); letter-spacing: -0.015em; margin: 0; position: relative; z-index: 1; } .pd-contact-card__text { font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, 0.7); margin: 0 0 6px; position: relative; z-index: 1; } .pd-contact-card__phone { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 20px; background: var(--color-accent); color: var(--color-white); border-radius: 12px; font-size: 18px; font-weight: 700; box-shadow: 0 12px 28px rgba(229, 122, 38, 0.32); transition: background 0.2s, color 0.2s, transform 0.2s; position: relative; z-index: 1; } .pd-contact-card__phone:hover { background: var(--color-white); color: var(--color-ink); transform: translateY(-2px); } .pd-contact-card__whatsapp { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; color: rgba(255, 255, 255, 0.88); font-size: 15px; font-weight: 700; letter-spacing: 0.02em; transition: color 0.2s, gap 0.2s; position: relative; z-index: 1; } .pd-contact-card__whatsapp i { color: var(--color-whatsapp); font-size: 20px; } .pd-contact-card__whatsapp:hover { color: var(--color-white); gap: 12px; } /* Video section — embed YouTube/Vimeo cu poster */ .pd-video { border-radius: 18px; overflow: hidden; position: relative; aspect-ratio: 16 / 9; background: var(--color-ink); } .pd-video__player { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; } .pd-video__player img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; } .pd-video__player:hover img { transform: scale(1.04); } .pd-video__player::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.45) 100%); pointer-events: none; } .pd-video__play { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--color-ink); font-size: 22px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25); transition: transform 0.25s, background 0.25s, color 0.25s; z-index: 1; } .pd-video__player:hover .pd-video__play { background: var(--color-accent); color: var(--color-white); transform: scale(1.08); } .pd-video__meta { position: absolute; bottom: 16px; left: 18px; z-index: 1; color: var(--color-white); display: flex; align-items: center; gap: 10px; } .pd-video__duration { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .pd-video__title { font-family: var(--font-head); font-size: 17px; font-weight: 500; letter-spacing: -0.01em; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } /* Facilități — design diferit de Caracteristici: badge-uri pills cu background */ .pd-amenities { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; } .pd-amenities li { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--color-bg-alt); border: 1px solid transparent; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--color-ink); transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s; cursor: default; } .pd-amenities li:hover { background: var(--color-bg); border-color: var(--color-accent); color: var(--color-accent); transform: translateY(-2px); } .pd-amenities li i { color: var(--color-accent); font-size: 13px; } /* Mini review în sidebar */ .pd-mini-review { background: var(--color-bg); border: 1px solid var(--color-line); border-radius: 18px; padding: 18px 20px; } .pd-mini-review__head { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; margin-bottom: 12px; } .pd-mini-review__avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; } .pd-mini-review__avatar img { width: 100%; height: 100%; object-fit: cover; } .pd-mini-review__head strong { display: block; font-size: 13.5px; color: var(--color-ink); font-weight: 600; } .pd-mini-review__head span { display: block; font-size: 11.5px; color: var(--color-text-soft); margin-top: 1px; } .pd-mini-review__rating { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; } .pd-mini-review__rating i { color: var(--color-accent); } .pd-mini-review__rating strong { color: var(--color-ink); } .pd-mini-review__text { font-family: var(--font-head); font-style: italic; font-size: 14px; line-height: 1.55; color: var(--color-ink); margin: 0; } @media (max-width: 1024px) { .pd-body-grid { grid-template-columns: 1fr; gap: 40px; } .pd-sidebar { position: static; } } /* --- SIMILAR PROPERTIES --- */ .pd-similar { padding: 60px 0 100px; background: var(--color-bg); border-top: 1px solid var(--color-line); } .pd-similar__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; } .pd-similar__eyebrow { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-accent); margin-bottom: 8px; } .pd-similar__title { font-family: var(--font-head); font-size: clamp(28px, 4vw, 38px); line-height: 1.1; font-weight: 500; color: var(--color-ink); letter-spacing: -0.02em; margin: 0; } .pd-similar__link { display: inline-flex; align-items: center; gap: 8px; color: var(--color-ink); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding-bottom: 4px; border-bottom: 2px solid var(--color-accent); transition: color 0.2s, gap 0.2s; } .pd-similar__link:hover { color: var(--color-accent); gap: 14px; } @media (max-width: 640px) { .pd-similar__head { flex-direction: column; align-items: flex-start; } } /* Anchor-uri ascunse care alimentează lightbox-ul cu fotografii suplimentare */ .pd-gallery__hidden { display: none !important; } /* ============================================ PD LIGHTBOX — popup full-screen pentru galerie ============================================ */ .pd-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 32px; animation: pdLightboxFadeIn 0.25s ease-out; } .pd-lightbox[hidden] { display: none; } @keyframes pdLightboxFadeIn { from { opacity: 0; } to { opacity: 1; } } .pd-lightbox__backdrop { position: absolute; inset: 0; background: rgba(10, 10, 10, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: zoom-out; } .pd-lightbox__close { position: absolute; top: 24px; right: 24px; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--color-white); font-size: 18px; border-radius: 50%; cursor: pointer; transition: background 0.2s, transform 0.2s, border-color 0.2s; z-index: 2; backdrop-filter: blur(6px); } .pd-lightbox__close:hover { background: var(--color-accent); border-color: var(--color-accent); transform: scale(1.08); } .pd-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--color-white); font-size: 18px; border-radius: 50%; cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.2s; z-index: 2; backdrop-filter: blur(6px); } .pd-lightbox__nav:hover { background: var(--color-accent); border-color: var(--color-accent); } .pd-lightbox__nav--prev { left: 24px; } .pd-lightbox__nav--prev:hover { transform: translateY(-50%) translateX(-3px); } .pd-lightbox__nav--next { right: 24px; } .pd-lightbox__nav--next:hover { transform: translateY(-50%) translateX(3px); } .pd-lightbox__stage { position: relative; z-index: 1; margin: 0; max-width: min(1200px, calc(100vw - 180px)); max-height: calc(100vh - 140px); display: flex; flex-direction: column; align-items: center; gap: 18px; animation: pdLightboxImgIn 0.3s ease-out; } @keyframes pdLightboxImgIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } .pd-lightbox__img { max-width: 100%; max-height: calc(100vh - 200px); object-fit: contain; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); display: block; } .pd-lightbox__caption { display: flex; align-items: center; gap: 18px; color: rgba(255, 255, 255, 0.9); font-size: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 999px; padding: 10px 22px; backdrop-filter: blur(8px); } .pd-lightbox__title { font-family: var(--font-head); font-style: italic; font-weight: 400; } .pd-lightbox__counter { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, 0.18); } .pd-lightbox__counter span:first-child { color: var(--color-white); font-size: 16px; } @media (max-width: 768px) { .pd-lightbox { padding: 16px; } .pd-lightbox__close { top: 16px; right: 16px; width: 42px; height: 42px; } .pd-lightbox__nav { width: 44px; height: 44px; font-size: 14px; } .pd-lightbox__nav--prev { left: 12px; } .pd-lightbox__nav--next { right: 12px; } .pd-lightbox__stage { max-width: calc(100vw - 24px); gap: 12px; } .pd-lightbox__img { max-height: calc(100vh - 160px); } .pd-lightbox__caption { font-size: 12px; padding: 8px 16px; } } body.pd-lightbox-open { overflow: hidden; } /* ============================================ */ /* PROPERTIES/RENTALS — results head (count + sort) */ /* Pattern site-agentie-01 — fără sidebar, doar count + sort deasupra grid-ului */ /* ============================================ */ .properties-results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 32px 0; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); } .properties-results-count { font-size: 15px; color: var(--color-text-soft); margin: 0; } .properties-results-count strong { color: var(--color-text); font-weight: 700; font-size: 22px; margin-right: 4px; } .properties-results-sort { display: inline-flex; align-items: center; gap: 10px; } .properties-results-sort label { font-size: 14px; color: var(--color-text-soft); font-weight: 500; } .properties-results-sort select { padding: 8px 30px 8px 12px; border: 1px solid var(--color-border); border-radius: 6px; font-size: 14px; font-family: inherit; background: var(--color-white); color: var(--color-text); cursor: pointer; } .properties-results-sort select:focus { outline: 2px solid var(--color-accent); outline-offset: -1px; } @media (max-width: 640px) { .properties-results-head { flex-direction: column; align-items: flex-start; } .properties-results-sort { width: 100%; justify-content: space-between; } .properties-results-sort select { flex: 1; max-width: 240px; } } /* ============================================ */ /* HAMBURGER + MOBILE NAV DRAWER */ /* Hidden pe desktop, vizibil sub 900px */ /* ============================================ */ .nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 10px; position: relative; z-index: 1101; margin-left: auto; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--color-ink); /* default dark — vizibil pe paginile interior cu fundal alb */ margin: 5px 0; transition: transform 0.25s, opacity 0.2s, background-color 0.2s; transform-origin: center; } /* Pe home (body fără .page-inner) header e transparent peste hero sage/portocaliu → liniile trebuie albe ca să fie vizibile. La sticky scroll revin la dark. */ body:not(.page-inner) .nav-toggle span { background: var(--color-white); } body:not(.page-inner) .site-header.is-scrolled .nav-toggle span { background: var(--color-ink); } body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-nav { display: none; position: fixed; top: 0; right: 0; bottom: 0; width: 85%; max-width: 340px; background: var(--color-bg); z-index: 1100; padding: 80px 28px 28px; box-shadow: -8px 0 30px rgba(0, 0, 0, 0.18); transform: translateX(100%); transition: transform 0.28s ease-out; overflow-y: auto; } .mobile-nav[hidden] { display: none; } body.nav-open .mobile-nav { display: flex; flex-direction: column; gap: 8px; transform: translateX(0); } .mobile-nav a { display: block; padding: 14px 12px; text-decoration: none; color: var(--color-ink); font-weight: 500; font-size: 17px; border-bottom: 1px solid var(--color-line); transition: background 0.15s, color 0.15s; } .mobile-nav a:hover { background: var(--color-bg-alt); color: var(--color-accent); } .mobile-nav__close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border: 0; background: var(--color-bg-alt); color: var(--color-ink); border-radius: 50%; font-size: 18px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; z-index: 2; } .mobile-nav__close:hover { background: var(--color-accent); color: var(--color-white); } .mobile-nav__cta { margin-top: 16px; background: var(--color-accent); color: var(--color-white) !important; border: 0 !important; border-radius: 6px; text-align: center; font-weight: 600; padding: 14px 16px !important; } .mobile-nav__cta:hover { background: var(--color-orange-deep); color: var(--color-white) !important; } /* Overlay în spatele drawer-ului */ body.nav-open::before { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1099; animation: nav-overlay-fade 0.2s ease-out; } @keyframes nav-overlay-fade { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 900px) { .nav-toggle { display: block; } .site-nav { display: none; } .header-cta { display: none; } /* Logo mai mare pe mobil */ .site-logo__img { max-height: 56px; } /* Reorganizăm header-inner pentru mobil: logo stânga, hamburger dreapta */ .header-inner { display: flex !important; align-items: center; justify-content: space-between; } .site-logo { justify-self: start; margin: 0; } } /* ============================================ */ /* Mobile fix pentru .section-mission cu pattern-despre */ /* La 372x viewport pattern-ul era prea mic — folosim dimensiune diferită */ /* ============================================ */ @media (max-width: 640px) { /* Pattern-uri decorative — pe mobil le facem mai mari proporțional sau folosim background-size: contain pentru a păstra raportul */ .section-mission, [class*="-pattern"], .subscribe-pattern { background-size: 100% auto !important; background-position: center top !important; } } @media (max-width:767px) { .contact-section { padding: 0px 0 50px; } .subscribe-pattern { background-size: 10% auto !important; } .subscribe-pattern { height: 140px; } .footer-copyright { line-height: 1.2; } .footer-bottom-links { line-height: 1.2; gap: 10px 5px; } .footer-bottom-links a { font-size: 12px; line-height: 1.2; } .nav-toggle span:not(.home-nav-mobile span) { background: var(--color-ink); } .about-hero__title { font-size: 30px; } .section-popular, .section-team, .section-blog { padding: 26px 0 32px; } .subscribe-pattern { margin-top: 40px; } .pagination__btn { width: 34px; height: 34px; } .pd-crumb-nav { line-height: 1; } .pd-amenities li { padding: 5px 10px; } .pd-header__actions { gap: 5px; } .pd-action { padding: 10px 14px; } .pd-gallery { padding: 0 0 0px; } .pd-similar { padding: 30px 0 30px; } .pd-body { padding: 16px 0 40px; } .section-testimonial { padding: 30px 0; } .section-projects { padding: 40px 0 20px; } .featured-title { margin-top: 55px; } .trust-strip { gap: 10px } .trust-strip li { font-size: 11px; } .section-popular:not(.properties-results) { padding: 40px 0 50px; } .section-faq { padding: 50px 0; background: var(--color-bg); } .about-story { padding: 20px 0 50px; } .about-passion { padding: 30px 0 50px; } .about-stats { padding: 10px 0 30px; } .about-hero { padding-bottom: 15px; } .about-values { padding: 30px 0 50px; } .section-process { padding: 40px 0; } .agent-properties { padding: 20px 0 50px; } } /* MacBook Air range (~1280-1440px) — overrides plasate la finalul fișierului ca să câștige în cascadă peste declarațiile desktop unconditionale. */ @media (min-width: 1025px) and (max-width: 1440px) { .section-testimonial { padding: 80px 0 0; } .section-faq { padding: 60px 0; } .section-projects { padding: 50px 0 0px; } .section-blog { padding: 40px 0 50px; } .testimonial-slider { width: 520px; } .section-team { background-repeat: no-repeat; } } /* ================================================================ VDI — completări la conversia temei (adăugate la integrarea Blade) 1. Submeniul SEO din navigație (regula 2.9 din contract) 2. Etichetele Vândută/Închiriată + Nou/Exclusiv (regula 2.10) 3. Titlurile HTML ale cardurilor de blog de pe home (înlocuiesc SVG-urile cu text fix din tema demo) 4. Corecturi de căi pentru imagini: în producție style.css stă la /agent-website/templates/site-agentie-05/style.css, deci "../images/" arăta în afara temei, iar mock-images/ nu se mai publică (regula 2.5). ================================================================ */ /* --- 1. Dropdown navigație (Vânzare / Închirieri) --- */ .nav-item-sub { position: relative; display: inline-flex; align-items: center; } .nav-item-sub > a::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: 0.7; } .nav-submenu { position: absolute; top: 100%; left: -14px; min-width: 240px; padding: 10px 0; background: var(--color-white); border-radius: var(--radius-card); box-shadow: 0 18px 44px rgba(42, 42, 42, 0.16); border: 1px solid var(--color-line); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 300; } .nav-item-sub:hover .nav-submenu, .nav-item-sub:focus-within .nav-submenu { opacity: 1; visibility: visible; transform: translateY(0); } /* Punte invizibilă între link și panou — să nu se închidă la traversare */ .nav-submenu::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } .nav-submenu a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 18px; font-size: 13.5px; font-weight: 500; color: var(--color-ink); text-shadow: none; transition: background 0.15s, color 0.15s; } .nav-submenu a:hover { background: var(--color-cream); color: var(--color-accent); opacity: 1; } .nav-submenu-count { font-size: 11px; font-weight: 600; color: var(--color-text-soft); background: var(--color-cream); border-radius: var(--radius-pill); padding: 2px 8px; line-height: 1.4; } .nav-submenu a:hover .nav-submenu-count { background: var(--color-accent); color: var(--color-white); } /* Pe paginile interne linkurile din header sunt închise la culoare — submeniul rămâne alb, deja contrastant; nimic de schimbat. */ /* Sub-linkurile de categorie din drawerul mobil */ .mobile-nav__sub { padding-left: 34px !important; font-size: 14px !important; font-weight: 400 !important; opacity: 0.85; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .mobile-nav__sub .nav-submenu-count { background: rgba(255, 255, 255, 0.12); color: inherit; } /* --- 2. Etichete pe oferte --- */ /* Vândută/Închiriată — prioritate absolută, roșu închis, pe card și pe detaliu */ .listing-badge--vanduta { background: #8C1D1D !important; color: var(--color-white) !important; text-transform: uppercase; letter-spacing: 0.06em; } .pd-sold-badge { display: inline-block; padding: 6px 14px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; margin-bottom: 10px; } /* Cardul vândut: imaginea se desaturează (regula 2.10) */ .property-card--sold .property-card__media img { filter: grayscale(1); opacity: 0.85; } /* Al doilea badge (Exclusiv/Nou) coboară sub primul — nu se suprapun */ .property-card__badge--exclusiv, .property-card__badge--nou { top: 52px; } .property-card__badge--exclusiv { background: var(--color-gold); color: var(--color-ink); } .property-card__badge--nou { background: var(--color-accent); color: var(--color-white); } /* --- 3. Titlurile cardurilor de blog de pe home (HTML în loc de SVG) --- */ .blog-card__title-box { position: absolute; left: 0; bottom: 0; max-width: 82%; margin: 0; padding: 16px 20px; background: var(--color-white); border-radius: 0 14px 0 14px; z-index: 3; } .blog-card__title-box a { font-family: var(--font-head); font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--color-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .blog-card__title-box a:hover { color: var(--color-accent); } .blog-card--featured .blog-card__title-box { top: 0; bottom: auto; border-radius: 14px 0 14px 0; } /* --- 4. Corecturi de căi pentru imagini publicate --- */ /* pattern-urile temei: style.css e la rădăcina temei, deci fără "../" */ .project-card__media::after { background-image: url("images/pattern-home.png"); } .about-hero__media::after { background-image: url("images/pattern-despre.png"); } @media (max-width: 600px) { .about-hero__media::after { background-image: url("images/pattern-despre-mobile.png"); } } @media (min-width: 1025px) and (max-width: 1440px) { .about-hero__media::after { background-image: url("images/pattern-despre.png"); } } /* fundalurile care veneau din mock-images (aruncat) → hero-ul temei / plain */ .section-hero { background-image: radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(0, 0, 0, 0.35) 100%), linear-gradient(135deg, rgba(229, 122, 38, 0.78), rgba(229, 122, 38, 0.88)), url("images/hero.jpg"); } .section-team { background-image: linear-gradient(to right, rgb(167 87 24 / 24%) 0%, rgb(255 123 19 / 47%) 35%, rgba(74, 50, 38, 0.82) 75%, rgba(58, 40, 32, 0.88) 100%), url("images/hero.jpg"); } .agents-cta { background-image: linear-gradient(135deg, rgba(229, 122, 38, 0.78) 0%, rgba(58, 40, 32, 0.85) 100%), url("images/hero.jpg"); } .footer-wrapper { background-image: linear-gradient(rgba(46, 37, 29, 0.92), rgba(46, 37, 29, 0.92)), url("images/pattern.png"); background-repeat: repeat; background-size: auto; }