/* Hero cu portret: text stânga, foto dreapta; pe mobil se stivuiesc */ .fa-bio-hero { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: center; max-width: 1240px; } .fa-bio-hero__photo img { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: 0 18px 44px rgba(59, 33, 24, 0.18); } @media (max-width: 767px) { .fa-bio-hero { grid-template-columns: 1fr; gap: 28px; } .fa-bio-hero__photo { max-width: 260px; margin: 0 auto; } } /* Bio reutilizează .fa-service (tipografia prozei); doar coloana e mai lată. */ .fa-bio-hero__subhead { margin-block: 40px; } .fa-bio__cta { margin-top: 1.5rem; } /* Figură flotantă dreapta: poza de la premiile Henri Coandă, textul curge pe stânga */ .fa-bio__award-figure { float: right; width: 320px; max-width: 40%; margin: 4px 0 20px 32px; /* Paragrafele .fa-reveal au mask-image => stacking context care se pictează peste float și blochează click-ul pe link. Ridicăm figura deasupra. */ position: relative; z-index: 1; } .fa-bio__award-figure img { width: 100%; height: auto; display: block; border-radius: 12px; box-shadow: 0 18px 44px rgba(59, 33, 24, 0.18); } .fa-bio__award-figure figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--fa-text-muted); } .fa-bio__award-figure figcaption span { display: block; margin-top: 2px; } .fa-bio__hug { clear: none; margin: 0 0 20px; line-height: 1.75; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } .fa-bio p.fa-bio__pullquote { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.3; color: var(--fa-text-strong); text-align: center; max-width: 640px; margin: 48px auto; padding: 28px 0; border-top: 1px solid var(--fa-divider); border-bottom: 1px solid var(--fa-divider); animation: fa-pullquote-glow 3.6s ease-in-out infinite; } @keyframes fa-pullquote-glow { 0%, 100% { text-shadow: 0 0 0 rgba(158, 58, 58, 0); } 50% { text-shadow: 0 0 22px rgba(158, 58, 58, 0.4); } } @media (prefers-reduced-motion: reduce) { .fa-bio__pullquote { animation: none; text-shadow: 0 0 16px rgba(158, 58, 58, 0.25); } } .fa-bio__chapter-label { display: block; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; color: var(--fa-accent); margin: 56px 0 12px; } .fa-bio__chapter-label:first-child { margin-top: 0; } @media (max-width: 767px) { .fa-bio__award-figure { float: none; width: 100%; max-width: 320px; margin: 0 auto 20px; } } /* Reveal cu mască de gradient. Conținutul e vizibil implicit; clasa .fa-reveal-on de pe e pusă de JS, deci fără JS nimic nu se ascunde. */ .fa-reveal-on .fa-reveal { mask-image: linear-gradient(90deg, #000 0 50%, transparent 75% 100%); mask-size: 250% 100%; mask-repeat: no-repeat; mask-position: 100% 0; transform: translateX(-14px); transition: mask-position 3.6s cubic-bezier(0.22, 1, 0.36, 1), transform 3.6s cubic-bezier(0.22, 1, 0.36, 1); } .fa-reveal-on .fa-reveal--up { mask-image: linear-gradient(0deg, #000 0 50%, transparent 75% 100%); mask-size: 100% 250%; mask-position: 0 0; transform: translateY(28px); transition: mask-position 4.2s cubic-bezier(0.22, 1, 0.36, 1), transform 4.2s cubic-bezier(0.22, 1, 0.36, 1); } .fa-reveal-on .fa-reveal.is-in { mask-position: 0 0; transform: none; } .fa-reveal-on .fa-reveal--up.is-in { mask-position: 0 100%; transform: none; } @media (prefers-reduced-motion: reduce) { .fa-reveal-on .fa-reveal, .fa-reveal-on .fa-reveal--up { mask-image: none; transform: none; opacity: 0; transition: opacity 0.2s linear; } .fa-reveal-on .fa-reveal.is-in, .fa-reveal-on .fa-reveal--up.is-in { opacity: 1; } }