/* ============================================================ OLGA — stylesheet ============================================================ Site simplu, un singur fișier CSS, comentat pe secțiuni. Fiecare secțiune de mai jos corespunde unei părți vizuale a site-ului — caută titlul comentariului ca să găsești rapid ce vrei să modifici. CUPRINS: 1. Culori & fonturi de bază (:root) 1b. TEME — Oameni (cald) / Business (rece, profesional) 2. Reset & elemente de bază 3. Titluri, texte 4. Navigare (meniu) 5. Meniu mobil 6. Hero video (pagina principală) 7. Cele două uși — Oameni / Business 8. Despre Olga 9. Contact (pagina principală) 10. Footer 11. Pagini hub (Oameni / Business — cele 3-4 carduri mari) 12. Recomandări / Rețea de afaceri (chips) 13. Galerie editorială (flux de poze + video) 14. Exemple Business (proof frames + blocuri repetabile) 15. Culori placeholder (înlocuiește-le cu poze reale) 16. Animație reveal (fade-in la scroll) 17. Responsive (mobil/tabletă) ============================================================ */ /* ---------- 1. CULORI & FONTURI DE BAZĂ ---------- */ /* Astea sunt culorile principale ale site-ului. Schimbă-le aici și se schimbă peste tot automat. */ :root{ --cream: #F4EFE6; /* fundal principal, crem cald */ --cream-dim: #EAE2D2; /* fundal secundar, puțin mai închis */ --beige: #DDCEB2; --taupe: #A48F72; /* text secundar pe fundal închis */ --charcoal: #17140F; /* negru cald — fundaluri închise */ --charcoal-soft:#211C15; --ink: #2A2118; /* text principal */ --ink-soft: #5B4F3F; /* text secundar */ --gold: #C99A5B; /* culoare de accent (linkuri, hover) */ --line: rgba(42,33,24,0.14); --line-light: rgba(244,239,230,0.18); --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif; /* titluri */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* text */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur-slow: 1.1s; --dur-med: 0.7s; color-scheme: light; } /* ---------- 1b. TEME — diferențiere de culoare Oameni / Business ---------- */ /* Adaugă class="theme-people" sau class="theme-business" pe ca să schimbi accentul de culoare al întregii pagini dintr-un loc. Pagina principală (fără nicio clasă) rămâne neutră/calmă. */ body.theme-people{ /* mai cald, mai cinematic, mai emoțional */ --gold: #D9A25C; --cream: #F7F1E5; --ink-soft: #6B5842; } body.theme-business{ /* mai rece, mai arhitectural, transmite încredere/profesionalism */ --gold: #8B95A3; --cream: #EEEFEF; --cream-dim: #E3E4E3; --charcoal: #131417; --ink-soft: #52565D; --taupe: #838A94; } /* ---------- 2. RESET & ELEMENTE DE BAZĂ ---------- */ *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body{ margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-sans); font-weight: 300; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video{ max-width: 100%; display: block; } a{ color: inherit; text-decoration: none; } /* ---------- PROTECȚIE IMAGINI ---------- Descurajează salvarea pozelor/video-urilor (click-dreapta, tragere, apăsare lungă pe mobil). Nu e o protecție 100% infailibilă — orice poză afișată într-un browser poate fi, teoretic, extrasă de cineva suficient de determinat (ex. prin Developer Tools) — dar acoperă comportamentul obișnuit al unui vizitator. Detalii în README.md. */ img, video{ -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; user-select: none; } .visually-hidden{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link{ position: absolute; left: -999px; top: 0; background: var(--charcoal); color: var(--cream); padding: 12px 20px; z-index: 999; } .skip-link:focus{ left: 12px; top: 12px; } :focus-visible{ outline: 1px solid var(--gold); outline-offset: 4px; } section{ position: relative; } /* ---------- 3. TITLURI, TEXTE ---------- */ .eyebrow{ font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--ink-soft); margin: 0 0 18px; text-transform: uppercase; } .eyebrow--light{ color: var(--beige); } .h-xl{ font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.03; letter-spacing: -0.01em; margin: 0; } .h-lg{ font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.06; letter-spacing: -0.01em; margin: 0; } .lede{ font-size: 1rem; line-height: 1.7; color: var(--ink-soft); max-width: 46ch; } .lede--light{ color: var(--beige); } /* ---------- 4. NAVIGARE (MENIU) ---------- */ .site-header{ position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 26px clamp(20px, 5vw, 56px); display: flex; justify-content: space-between; align-items: center; mix-blend-mode: difference; /* logo-ul rămâne vizibil pe orice fundal */ } .header-inner{ width: 100%; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; } .logo{ font-family: var(--font-serif); font-size: 1.1rem; color: var(--cream); letter-spacing: 0.02em; } .logo-dot{ color: var(--gold); } .primary-nav{ display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); } .primary-nav a{ font-size: 0.8rem; letter-spacing: 0.06em; color: var(--cream); position: relative; padding-bottom: 4px; text-transform: uppercase; } .primary-nav a::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease); } .primary-nav a:hover::after, .primary-nav a[aria-current="page"]::after{ transform: scaleX(1); transform-origin: left; } .menu-toggle{ display: none; background: none; border: 0; width: 32px; height: 20px; position: relative; cursor: pointer; padding: 0; } .menu-line{ position: absolute; left: 0; right: 0; height: 1px; background: var(--cream); transition: transform 0.4s var(--ease); } .menu-line:nth-child(1){ top: 2px; } .menu-line:nth-child(2){ bottom: 2px; } .menu-toggle[aria-expanded="true"] .menu-line:nth-child(1){ transform: translateY(7px) rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-line:nth-child(2){ transform: translateY(-7px) rotate(-45deg); } /* ---------- 5. MENIU MOBIL ---------- */ .mobile-nav{ display: none; } /* mic link "înapoi" folosit pe paginile interioare */ .back-link{ display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink-soft); margin: clamp(120px, 16vw, 170px) clamp(20px, 5vw, 56px) 0; transition: gap 0.4s var(--ease), color 0.4s var(--ease); } .back-link:hover{ gap: 13px; color: var(--ink); } /* ---------- 6. HERO VIDEO (PAGINA PRINCIPALĂ) ---------- */ .hero{ height: 100vh; height: 100dvh; min-height: 560px; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 clamp(20px, 5vw, 56px) 56px; overflow: hidden; background: var(--charcoal); } .hero-media{ position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 78% 18%, rgba(201,154,91,0.5) 0%, rgba(201,154,91,0) 45%), radial-gradient(90% 70% at 12% 92%, rgba(90,66,40,0.6) 0%, rgba(23,20,15,0) 50%), linear-gradient(180deg, #1D1912 0%, #17140F 55%, #100E0A 100%); } .hero-video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .hero-media::after{ content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 100% at 50% 100%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.6) 100%); } .hero-grain{ position: absolute; inset: 0; z-index: 2; opacity: 0.3; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } .hero-content{ position: relative; z-index: 3; color: var(--cream); } .hero-word{ font-family: var(--font-serif); font-weight: 400; font-size: clamp(3rem, 11vw, 7rem); line-height: 0.92; margin: 0 0 20px; opacity: 0; animation: rise var(--dur-slow) var(--ease) 0.2s forwards; } .hero-word-dot{ color: var(--gold); } .hero-line{ font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(1.3rem, 3vw, 2.1rem); line-height: 1.2; margin: 0 0 36px; color: var(--cream-dim); max-width: 20ch; opacity: 0; animation: rise var(--dur-slow) var(--ease) 0.4s forwards; } .hero-cta{ display: inline-flex; align-items: center; gap: 12px; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--cream); border-bottom: 1px solid var(--line-light); padding-bottom: 10px; opacity: 0; animation: rise var(--dur-slow) var(--ease) 0.6s forwards; transition: border-color 0.4s var(--ease), gap 0.4s var(--ease); text-transform: uppercase; } .hero-cta:hover{ border-color: var(--gold); gap: 18px; } .hero-cta-arrow{ display: inline-block; animation: bob 2.6s ease-in-out infinite; } .hero-footer{ position: absolute; right: clamp(20px, 5vw, 56px); bottom: 56px; z-index: 3; margin: 0; font-size: 0.72rem; letter-spacing: 0.1em; color: var(--taupe); opacity: 0; animation: rise var(--dur-slow) var(--ease) 0.8s forwards; } @keyframes rise{ from{ opacity: 0; transform: translateY(18px); } to{ opacity: 1; transform: translateY(0); } } @keyframes bob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(5px); } } /* Buton sunet hero — cerc discret, colț dreapta jos, deasupra textului "Moldova · România · Europa" */ .sound-toggle{ position: absolute; right: clamp(20px, 5vw, 56px); bottom: 106px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-light); background: rgba(23,20,15,0.35); color: var(--cream); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; animation: rise var(--dur-slow) var(--ease) 0.9s forwards; transition: border-color 0.4s var(--ease), background 0.4s var(--ease); } .sound-toggle:hover{ border-color: var(--gold); } .sound-toggle svg{ width: 18px; height: 18px; } .sound-toggle .sound-icon--on{ display: none; } .sound-toggle.is-unmuted .sound-icon--off{ display: none; } .sound-toggle.is-unmuted .sound-icon--on{ display: block; } /* ---------- 7. CELE DOUĂ UȘI — OAMENI / BUSINESS ---------- */ /* .door-media este locul unde pui poza de fundal pentru fiecare compartiment (vezi comentariul din HTML). */ .doors-intro{ padding: clamp(90px, 14vw, 150px) clamp(20px, 5vw, 56px) clamp(40px, 6vw, 64px); text-align: center; } .doors-intro .eyebrow{ justify-content: center; display: flex; } .doors{ display: grid; grid-template-columns: 1fr 1fr; min-height: 78vh; } .door{ position: relative; display: flex; align-items: flex-end; padding: clamp(32px, 4vw, 56px); overflow: hidden; isolation: isolate; } .door-media{ position: absolute; inset: 0; z-index: 0; transition: transform 1.6s var(--ease); } .door-media img{ width: 100%; height: 100%; object-fit: cover; } .door:hover .door-media{ transform: scale(1.04); } .door::after{ content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(15,12,8,0.72) 0%, rgba(15,12,8,0.15) 55%, rgba(15,12,8,0.05) 100%); } /* culoare de fundal folosită DOAR dacă nu ai pus încă o poză în .door-media */ .door--people .door-media{ background: radial-gradient(65% 55% at 30% 25%, rgba(255,214,150,0.55) 0%, rgba(255,214,150,0) 55%), linear-gradient(200deg, #D9A26A 0%, #A9673F 35%, #5A3A2C 70%, #221912 100%); } .door--business .door-media{ background: radial-gradient(60% 55% at 70% 20%, rgba(212,214,220,0.35) 0%, rgba(212,214,220,0) 55%), linear-gradient(200deg, #4C5158 0%, #33373C 40%, #201F1D 75%, #14120F 100%); } .door-content{ position: relative; z-index: 2; color: var(--cream); } .door-index{ display: block; font-size: 0.72rem; letter-spacing: 0.14em; color: var(--beige); margin-bottom: 14px; text-transform: uppercase; } .door-title{ font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 4.6vw, 3.6rem); margin: 0 0 12px; } .door-desc{ font-size: 0.92rem; color: var(--cream-dim); max-width: 32ch; margin: 0 0 22px; } .door-link{ display: inline-flex; align-items: center; gap: 10px; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid var(--line-light); padding-bottom: 8px; transition: gap 0.4s var(--ease), border-color 0.4s var(--ease); } .door:hover .door-link{ gap: 16px; border-color: var(--gold); } /* ---------- 8. DESPRE OLGA ---------- */ .about{ display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: clamp(32px, 6vw, 72px); padding: clamp(100px, 14vw, 160px) clamp(20px, 5vw, 56px); max-width: 1280px; margin: 0 auto; } .about-media{ aspect-ratio: 3 / 4; overflow: hidden; } .about-media img{ width: 100%; height: 100%; object-fit: cover; } .about-media a{ display: block; width: 100%; height: 100%; } .about-media a:hover .placeholder{ transform: scale(1.03); } .about-text{ font-size: 0.95rem; line-height: 1.75; color: var(--ink-soft); max-width: 44ch; margin: 0 0 16px; } .about-text:last-of-type{ margin-bottom: 24px; } .about-link{ display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 6px; transition: gap 0.4s var(--ease), border-color 0.4s var(--ease); } .about-link:hover{ gap: 14px; border-color: var(--gold); } /* ---------- 9. CONTACT (PAGINA PRINCIPALĂ) ---------- */ .contact{ background: var(--charcoal); color: var(--cream); padding: clamp(110px, 15vw, 180px) clamp(20px, 5vw, 56px) clamp(70px, 9vw, 100px); text-align: center; } .contact-title{ font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.1; margin: 20px auto clamp(40px, 6vw, 60px); max-width: 16ch; } .contact-email{ display: inline-block; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.3rem, 2.6vw, 1.8rem); color: var(--cream); border-bottom: 1px solid var(--line-light); padding-bottom: 6px; margin-bottom: clamp(40px, 6vw, 60px); transition: color 0.4s var(--ease), border-color 0.4s var(--ease); } .contact-email:hover{ color: var(--gold); border-color: var(--gold); } .contact-social{ display: flex; justify-content: center; gap: 28px; font-size: 0.85rem; letter-spacing: 0.04em; } .contact-social a{ color: var(--beige); border-bottom: 1px solid transparent; transition: color 0.4s var(--ease), border-color 0.4s var(--ease); } .contact-social a:hover{ color: var(--cream); border-color: var(--gold); } /* WhatsApp — link simplu (în contact-social) și buton (pe pagina Contact) */ .whatsapp-icon{ width: 16px; height: 16px; flex-shrink: 0; } .whatsapp-link{ display: inline-flex; align-items: center; gap: 7px; } .whatsapp-link--button{ display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--line-light); color: var(--cream); padding: 14px 28px; font-size: 0.85rem; letter-spacing: 0.03em; transition: border-color 0.4s var(--ease), gap 0.4s var(--ease); } .whatsapp-link--button .whatsapp-icon{ width: 20px; height: 20px; } .whatsapp-link--button:hover{ border-color: var(--gold); gap: 18px; } /* ---------- 9b. FORMULAR DE CONTACT (pagina contact.html) ---------- */ .contact-page-inner{ max-width: 560px; margin: 0 auto; text-align: left; } .contact-page-inner .contact-title{ margin-left: 0; text-align: left; } .contact-form{ text-align: left; } .form-row{ margin-bottom: 24px; } .form-row-group{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .form-label{ display: block; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--beige); margin-bottom: 9px; } /* butoanele pill Privat / Business din formular */ .form-choice-group{ display: flex; flex-wrap: wrap; gap: 10px; } .form-choice{ position: relative; } .form-choice input{ position: absolute; opacity: 0; width: 1px; height: 1px; } .form-choice label{ display: inline-block; font-size: 0.85rem; letter-spacing: 0.02em; color: var(--cream-dim); border: 1px solid var(--line-light); padding: 11px 26px; cursor: pointer; transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease); } .form-choice input:checked + label{ border-color: var(--gold); color: var(--cream); background: rgba(201,154,91,0.12); } .form-choice input:focus-visible + label{ outline: 1px solid var(--gold); outline-offset: 3px; } .form-field{ width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--line-light); color: var(--cream); font-family: var(--font-sans); font-size: 0.95rem; padding: 10px 2px; transition: border-color 0.3s var(--ease); } .form-field::placeholder{ color: var(--taupe); } .form-field:focus{ border-color: var(--gold); outline: none; } textarea.form-field{ resize: vertical; min-height: 96px; } select.form-field{ cursor: pointer; } select.form-field option{ background: var(--charcoal); color: var(--cream); } /* Dropdown personalizat pentru "Serviciu" — înlocuiește select-ul nativ, ca să controlăm complet culorile (browserele nu lasă stilizarea completă a unui