/* ============================================================ IMAGENIA — prototip 2026 Minimalist editorial, serif. Fundal alb, o imagine pe rând. ============================================================ */ /* fontul EB Garamond se încarcă din (link preconnect), nu prin @import (render-blocking) */ /* ---------- Grain de film static, mai mare, peste tot site-ul (inclusiv poze) ---------- */ body::after{ content:""; position:absolute; inset:0; z-index:9999; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.4' intercept='-0.2'/%3E%3CfeFuncG type='linear' slope='1.4' intercept='-0.2'/%3E%3CfeFuncB type='linear' slope='1.4' intercept='-0.2'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:150px 150px; /* mic + organic (4 octave) + definiție medie */ opacity:.32; mix-blend-mode:overlay; } :root{ --ink: #14110d; /* aproape negru, cald */ --paper: #f6f3ee; /* alb-cald, nu steril */ --muted: #968f84; /* gri cald pentru detalii */ --line: #ddd6ca; --maxw: 1080px; --gap: clamp(64px, 9vw, 150px); /* sistem de spațiere (4pt) — valori dintr-un set fix, nu arbitrare */ --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px; --s-6: 64px; --s-7: 96px; /* lățimi de galerie — constante, ca să fie totul aliniat */ --col-w: 1040px; /* lățimea coloanei unice (poze mai mari pe desktop) */ --grid-w: 1100px; /* lățimea grilei */ --rhythm: var(--s-5); /* spațiul CONSTANT între cadre */ --gutter: 12px; /* spațiul CONSTANT în grilă */ } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ position:relative; font-family:'EB Garamond', Georgia, serif; color:var(--ink); background:var(--paper); font-size:19px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{ display:block; width:100%; height:auto; } a{ color:inherit; text-decoration:none; } /* ---------- Header ---------- */ /* header centrat: logo + hamburger dedesubt; meniul = overlay pe tot ecranul */ .site-head{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; flex-direction:column; align-items:center; gap:18px; padding:30px 20px 24px; color:#fff; transition:padding .35s ease, background .35s ease, color .35s ease, gap .35s ease; } /* la derulare: bandă de sticlă întunecată (logo alb rămâne vizibil) */ .site-head.scrolled{ mix-blend-mode:normal; background:rgba(20,17,13,.5); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); color:#fff; padding-top:18px; padding-bottom:14px; gap:11px; border-bottom:1px solid rgba(255,255,255,.12); } /* doar paginile interioare (body.blend): logo alb se adaptează pe fundal; homepage rămâne alb pur */ body.blend:not(.menu-open) .site-head:not(.scrolled){ mix-blend-mode:difference; } .brand{ display:block; line-height:0; } .brand-logo{ display:block; height:clamp(40px,5.4vw,68px); width:auto; transition:height .35s ease; } .site-head.scrolled .brand-logo{ height:clamp(30px,3.2vw,42px); } .nav{ position:fixed; inset:0; z-index:55; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(24px,3.5vw,34px); background:var(--paper); opacity:0; pointer-events:none; transition:opacity .35s ease; } .nav a{ font-size:clamp(20px,2.4vw,26px); letter-spacing:.16em; text-transform:uppercase; color:var(--ink); } .nav a:hover{ opacity:.55; } body.menu-open{ overflow:hidden; } body.menu-open .nav{ opacity:1; pointer-events:auto; } /* meniul deschis: headerul NU mai are efect de sticlă, ca overlay-ul fix să acopere tot ecranul (backdrop-filter creează containing block pentru fixed) */ body.menu-open .site-head{ mix-blend-mode:normal; color:var(--ink); background:transparent; border-bottom:0; -webkit-backdrop-filter:none; backdrop-filter:none; } /* hamburger — vizibil pe toate ecranele (logo deasupra, hamburger dedesubt) */ /* declanșator text, în limbajul tipografic al site-ului */ .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; background:none; border:0; cursor:pointer; line-height:1; font-family:inherit; color:inherit; font-size:18px; letter-spacing:.32em; text-transform:uppercase; padding:6px 4px 6px calc(4px + .32em); position:relative; z-index:60; transition:opacity .25s ease; } .nav-toggle:hover{ opacity:.6; } /* ---------- Hero ---------- */ .hero{ position:relative; height:100vh; min-height:560px; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; } .hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; } .hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.34) 13%, rgba(0,0,0,0) 32%, rgba(0,0,0,0) 56%, rgba(0,0,0,.58) 100%); } .hero-cap{ position:relative; z-index:2; text-align:center; color:#fff; padding-bottom:clamp(48px,8vh,96px); } .hero-cap .kicker{ font-size:13px; letter-spacing:.34em; text-transform:uppercase; opacity:.92; } .hero-cap h1{ font-weight:400; font-size:clamp(30px,5vw,58px); line-height:1.12; margin-top:18px; font-style:italic; } .scroll-cue{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2; color:#fff; font-size:12px; letter-spacing:.3em; text-transform:uppercase; opacity:.8; } /* ---------- Secțiuni text ---------- */ .section{ max-width:var(--maxw); margin:0 auto; padding:var(--gap) clamp(22px,5vw,40px); } .lead{ max-width:640px; margin:0 auto; text-align:center; } .lead .num{ display:block; font-size:16px; letter-spacing:.34em; color:var(--ink); text-transform:uppercase; margin-bottom:26px; } .lead p{ font-size:clamp(20px,2.4vw,26px); line-height:1.6; } .lead p + p{ margin-top:1.1em; } .lead em{ font-style:italic; } .quote{ max-width:720px; margin:0 auto; text-align:center; font-style:italic; font-size:clamp(22px,2.8vw,30px); line-height:1.45; } .quote cite{ display:block; font-style:normal; font-size:14px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-top:22px; } /* ---------- Cele două secțiuni full-screen (Nuntă / Portret) ---------- */ .cover{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; } .cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.4s cubic-bezier(.2,.7,.2,1); } .cover:hover img{ transform:scale(1.05); } /* text pe o bandă translucidă închisă, care iese din marginea din stânga */ .cover .label{ position:absolute; top:50%; left:0; transform:translateY(-50%); z-index:2; color:#fff; text-align:left; padding:clamp(18px,2.6vw,32px) clamp(30px,5vw,68px); background:rgba(20,17,13,.36); } .cover .go{ opacity:.9; } /* mobil: format Instagram portret (4:5), bandă translucidă jos, centrat */ @media(max-width:680px){ .cover{ aspect-ratio:4/5; } .cover .label{ top:auto; bottom:0; left:0; right:0; transform:none; text-align:center; padding:18px 20px; } .cover .name{ font-size:clamp(30px,8vw,40px); } } .cover .name{ display:block; font-style:italic; font-size:clamp(38px,5.6vw,66px); line-height:1; } .cover .go{ display:block; margin-top:14px; font-size:12px; letter-spacing:.32em; text-transform:uppercase; opacity:.85; } /* doar pe desktop: banda de titlu în dreapta (pentru Evenimente și Flower design) */ @media(min-width:681px){ .cover--right .label{ left:auto; right:0; text-align:right; } } /* Flower design: arată partea de jos (masa cu aranjamentul) */ .cover--flori img{ object-position:center bottom; } /* Flower design: bandă de text mai opacă */ .cover--flori .label{ background:rgba(20,17,13,.7); } /* ---------- Galerie ---------- */ .gallery-head{ text-align:center; padding:calc(var(--gap) + 40px) 20px var(--gap); } .gallery-head .num{ font-size:13px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); } .gallery-head h1{ font-weight:400; font-style:italic; font-size:clamp(34px,6vw,64px); margin-top:14px; } .gallery-head p{ max-width:520px; margin:22px auto 0; color:#4a443b; } /* === Varianta A — coloană uniformă: poze întregi, lățime + spațiu egale === */ .gallery--col{ max-width:var(--col-w); margin:0 auto; padding:0 clamp(16px,4vw,40px) var(--gap); display:flex; flex-direction:column; gap:var(--rhythm); } .gallery--col figure{ margin:0; } .gallery--col figure img{ width:100%; height:auto; } /* === Varianta B — grilă: toate cadrele identice, tăiate uniform === */ .gallery--grid{ max-width:var(--grid-w); margin:0 auto; padding:0 clamp(16px,4vw,40px) var(--gap); display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gutter); } .gallery--grid figure{ margin:0; } .gallery--grid figure img{ width:100%; aspect-ratio:4/5; object-fit:cover; } @media(max-width:620px){ .gallery--grid{ grid-template-columns:1fr; } } /* bloc alb-negru de deschidere */ .bw img{ filter:grayscale(1) contrast(1.04); } /* ============================================================ DESPRE ============================================================ */ .about{ max-width:900px; margin:0 auto; padding:calc(var(--gap) + 56px) clamp(22px,5vw,40px) var(--gap); } /* titlul sus, pe toată lățimea */ .about-head{ margin-bottom:var(--s-5); } .about-head .num{ display:block; font-size:16px; letter-spacing:.34em; text-transform:uppercase; color:var(--ink); margin-bottom:var(--s-3); } .about-head .opener{ font-size:clamp(26px,3.4vw,40px); line-height:1.28; font-style:italic; max-width:none; } /* poza plutește în dreapta, textul o îmbracă */ .about-body::after{ content:""; display:block; clear:both; } .about-portrait{ float:right; width:42%; margin:6px 0 14px clamp(28px,3.5vw,48px); } .about-portrait img{ width:100%; aspect-ratio:4/5; object-fit:cover; } .about-portrait .portrait-ph{ aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; color:var(--muted); font-size:14px; letter-spacing:.16em; text-transform:uppercase; line-height:1.8; background:#ece6db; border:1px dashed #c9c0b1; } .about-body p + p{ margin-top:var(--s-3); } .about-sign{ margin-top:var(--s-4); font-style:italic; color:#4a443b; } .about-signature{ margin-top:var(--s-3); font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); } @media(max-width:680px){ .about-portrait{ float:none; width:100%; max-width:360px; margin:0 0 var(--s-4); } } /* ============================================================ INVESTIȚIE ============================================================ */ .invest{ max-width:840px; margin:0 auto; padding:calc(var(--gap) + 56px) clamp(22px,5vw,40px) var(--gap); } .invest-head{ text-align:center; margin-bottom:var(--s-7); } .invest-head .num{ font-size:13px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); } .invest-head h1{ font-weight:400; font-style:italic; font-size:clamp(34px,6vw,60px); margin-top:var(--s-2); } .invest-head .promise{ max-width:50ch; margin:var(--s-3) auto 0; font-style:italic; color:#4a443b; font-size:clamp(19px,2.1vw,25px); line-height:1.5; } .packages{ border-bottom:1px solid var(--line); } .package{ display:grid; grid-template-columns:1fr auto; column-gap:var(--s-4); row-gap:var(--s-2); padding:var(--s-5) 0; border-top:1px solid var(--line); } .package h3{ font-weight:400; font-style:italic; font-size:clamp(22px,3vw,30px); align-self:baseline; } .package .price{ font-size:clamp(19px,2.4vw,24px); white-space:nowrap; align-self:baseline; text-align:right; } .package p{ grid-column:1 / -1; max-width:64ch; color:#4a443b; font-size:clamp(18px,1.5vw,21px); line-height:1.6; } .invest-foot{ text-align:center; margin-top:var(--s-7); } .invest-foot p{ max-width:52ch; margin:0 auto var(--s-2); font-size:clamp(18px,1.6vw,22px); } .invest-foot .note{ font-size:clamp(15px,1.2vw,17px); color:#6b6458; } .btn{ display:inline-block; margin-top:var(--s-4); font-size:14px; letter-spacing:.2em; text-transform:uppercase; padding:16px 34px; border:1px solid var(--ink); color:var(--ink); transition:background .4s, color .4s; } .btn:hover{ background:var(--ink); color:var(--paper); } /* ============================================================ CONTACT ============================================================ */ .contact{ max-width:680px; margin:0 auto; padding:calc(var(--gap) + 56px) clamp(22px,5vw,40px) var(--gap); text-align:center; } .contact h1{ font-weight:400; font-style:italic; font-size:clamp(34px,6vw,60px); } .contact .intro{ max-width:46ch; margin:var(--s-3) auto 0; color:#4a443b; } .contact-lines{ margin-top:var(--s-7); display:flex; flex-direction:column; align-items:center; gap:var(--s-4); } .contact-lines a{ font-size:clamp(24px,3.4vw,38px); letter-spacing:.02em; color:var(--ink); padding-bottom:4px; border-bottom:1px solid var(--line); transition:opacity .3s; } .contact-lines a:hover{ opacity:.55; } /* ---------- Pagini de text legal (confidențialitate, cookies) ---------- */ .legal-page{ max-width:760px; margin:0 auto; padding:calc(var(--gap) + 56px) clamp(22px,5vw,40px) var(--gap); } .legal-page h1{ font-weight:400; font-style:italic; font-size:clamp(32px,5vw,52px); } .legal-page .updated{ margin-top:var(--s-2); font-size:14px; letter-spacing:.04em; color:var(--muted); } .legal-page h2{ font-weight:500; font-size:clamp(21px,2.4vw,26px); margin-top:var(--s-6); margin-bottom:var(--s-2); } .legal-page p, .legal-page li{ font-size:18px; color:#3a352e; } .legal-page p + p{ margin-top:var(--s-3); } .legal-page ul{ margin-top:var(--s-2); padding-left:1.2em; } .legal-page li{ margin-top:var(--s-1); } .legal-page a{ border-bottom:1px solid var(--line); } .legal-page a:hover{ opacity:.6; } .footer-legal-links{ margin-top:14px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap; font-size:13px; letter-spacing:.06em; color:var(--muted); } .footer-legal-links a{ color:var(--muted); } .footer-legal-links a:hover{ color:var(--ink); } /* ---------- Footer ---------- */ .site-foot{ border-top:1px solid var(--line); padding:clamp(50px,8vw,90px) clamp(22px,5vw,40px); text-align:center; } .site-foot .fbrand{ display:inline-block; line-height:0; } .site-foot .fbrand-logo{ height:clamp(34px,4vw,52px); width:auto; mix-blend-mode:difference; } .site-foot .links{ margin-top:24px; display:flex; gap:30px; justify-content:center; flex-wrap:wrap; font-size:17px; letter-spacing:.12em; } .site-foot .legal{ margin-top:30px; font-size:15px; color:var(--muted); letter-spacing:.06em; } /* invitația de final, după ultima poză din galerie */ .gallery-end{ text-align:center; max-width:var(--maxw); margin:0 auto; padding:clamp(40px,7vw,90px) clamp(22px,5vw,40px) var(--gap); } .gallery-end p{ font-style:italic; font-size:clamp(22px,3vw,30px); margin-bottom:var(--s-4); } /* buton înapoi sus */ .to-top{ position:fixed; right:clamp(18px,3vw,34px); bottom:clamp(18px,3vw,34px); z-index:60; width:46px; height:46px; display:flex; align-items:center; justify-content:center; background:rgba(20,17,13,.82); color:var(--paper); border:none; border-radius:50%; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); cursor:pointer; opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .35s ease, transform .35s ease, background .3s; } .to-top.show{ opacity:1; transform:none; pointer-events:auto; } .to-top:hover{ background:#000; } @media (prefers-reduced-motion: reduce){ .to-top{ transition:opacity .2s; transform:none; } } /* iconuri sociale + distribuie */ .social{ margin-top:22px; display:flex; gap:10px; justify-content:center; } .social a{ color:var(--ink); display:inline-flex; padding:8px; line-height:0; transition:opacity .3s; } .social a:hover{ opacity:.55; } .share{ margin-top:22px; display:flex; gap:6px; align-items:center; justify-content:center; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); } .share span{ margin-right:4px; } .share a{ color:var(--ink); display:inline-flex; padding:7px; line-height:0; transition:opacity .3s; } .share a:hover{ opacity:.55; } /* ============================================================ POLISH — accesibilitate, mobil, motion ============================================================ */ /* focus vizibil pentru tastatură */ a:focus-visible, .btn:focus-visible, button:focus-visible, .field input:focus-visible, .field textarea:focus-visible{ outline:2px solid currentColor; outline-offset:4px; border-radius:1px; } /* mobil: meniu compact pe un singur rând, în banda întunecată de sus */ @media(max-width:680px){ /* text mai mare pe telefon — Garamond are litere scunde, are nevoie de +2px */ body{ font-size:21px; line-height:1.7; } .lead p{ font-size:22px; } .about-text p, .gallery-head p, .contact .intro, .package p, .invest-foot p{ font-size:19px; } .num, .gallery-head .num, .about-text .num{ font-size:13px; } .field label{ font-size:13px; } .share{ font-size:14px; } .site-foot .links{ font-size:18px; } .site-head{ padding:28px 16px 24px; gap:20px; } .site-head.scrolled{ padding-top:14px; padding-bottom:14px; gap:11px; } .brand{ font-size:25px; letter-spacing:.24em; padding-left:.24em; } .site-head.scrolled .brand{ font-size:19px; letter-spacing:.3em; } .hero{ height:100svh; min-height:480px; } .hero-cap{ padding-bottom:60px; } .hero-cap h1{ font-size:clamp(26px,7.6vw,40px); margin-top:12px; } .hero-cap .kicker{ font-size:11px; letter-spacing:.18em; } .scroll-cue{ bottom:16px; } /* bandă de sus mai întunecată ca meniul stivuit să rămână lizibil */ .hero::after{ background:linear-gradient(180deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.22) 18%, rgba(0,0,0,0) 38%, rgba(0,0,0,0) 54%, rgba(0,0,0,.6) 100%); } } /* niciodată scroll orizontal */ body{ overflow-x:hidden; } /* ---------- apariție subtilă la scroll ---------- */ .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); } .reveal.is-visible{ opacity:1; transform:none; } /* in galerie: doar fade, fara miscare (scroll lin pe galerii lungi) */ .gallery--col figure.reveal{ transform:none; transition:opacity .6s ease; } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } } /* respectă preferința de mișcare redusă */ @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .door:hover img{ transform:none; } } /* ---------- bandă de consimțământ cookie ---------- */ .cookie-bar{ position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:10000; width:min(680px, calc(100% - 28px)); display:flex; align-items:center; gap:18px; flex-wrap:wrap; background:rgba(20,17,13,.94); color:#f2eee6; padding:16px 20px; border:1px solid rgba(255,255,255,.12); border-radius:12px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 10px 40px rgba(0,0,0,.35); font-family:'Helvetica Neue', Arial, sans-serif; } .cookie-bar p{ margin:0; flex:1 1 240px; font-size:14px; line-height:1.5; color:#e8e3d9; } .cookie-bar a{ color:#fff; border-bottom:1px solid rgba(255,255,255,.4); white-space:nowrap; } .cookie-bar .cookie-actions{ display:flex; gap:10px; align-items:center; } .cookie-bar button{ font:inherit; font-size:14px; cursor:pointer; border-radius:8px; padding:9px 18px; border:0; } .cookie-bar .cookie-no{ background:transparent; color:#cfc8bb; border:1px solid rgba(255,255,255,.28); } .cookie-bar .cookie-yes{ background:#f2eee6; color:#14110d; font-weight:600; } .cookie-bar .cookie-no:hover{ color:#fff; border-color:rgba(255,255,255,.5); } .cookie-bar .cookie-yes:hover{ opacity:.9; } @media(max-width:520px){ .cookie-bar{ bottom:10px; padding:14px 16px; } }