, deci asta e doar plasa de siguranta impotriva unei scurgeri de verde intre ele. */ #continut-principal { background: var(--cream); } /* Gradarea de culoare sta pe fiecare sectiune, nu pe

. Un filter creeaza o render surface cat elementul; pe

aceea e inalta cat tot documentul, iar orice layer compozitat animat dinauntru (inelul sigiliului) o forteaza sa fie redesenata la fiecare frame => jank pe tot site-ul in Chrome. Rezultatul vizual e identic: cele 6 sectiuni sunt opace, lipite si fara suprapuneri, deci fiecare pixel apartine exact uneia. */ main > section { filter: saturate(1.24) contrast(1.05); } ::selection { background: var(--gold); color: var(--green-dark); } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } ul { list-style: none; } img, svg { display: block; max-width: 100%; } /* Skip link */ .skip-link { position: absolute; top: -100px; left: 1rem; background: var(--green-dark); color: var(--gold-light); padding: 0.6rem 1rem; font-family: 'Cormorant Garamond', serif; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.78rem; z-index: 999; transition: top 0.2s; } .skip-link:focus { top: 0.6rem; } /* Custom focus */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* Grain overlay (very subtle, premium tactile feel on dark surfaces) */ .grain { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.55; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } /* ================================================================ 2. SCROLL PROGRESS ================================================================ */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: var(--p, 0%); background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-light)); z-index: 200; transition: width 0.08s linear; } /* ================================================================ 3. REVEAL SYSTEM ================================================================ */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.85s var(--ease-soft), transform 0.85s var(--ease-soft); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-right { transform: translateX(20px); } .reveal-right.visible { transform: translateX(0); } .reveal-left { transform: translateX(-20px); } .reveal-left.visible { transform: translateX(0); } /* Duration variation by element type */ .section-label.reveal { transition-duration: 0.60s; } .section-title.reveal { transition-duration: 0.75s; } .about-card.reveal { transition-duration: 0.90s; } .activity-card.reveal { transition-duration: 0.90s; } /* Scale micro-reveal on cards */ .about-card.reveal-right { transform: translateX(20px) scale(0.97); } .activity-card.reveal { transform: translateY(16px) scale(0.97); } .about-card.visible, .activity-card.visible { transform: none; } /* Stagger delays — 50ms steps */ .d1 { transition-delay: 0.05s; } .d2 { transition-delay: 0.10s; } .d3 { transition-delay: 0.15s; } .d4 { transition-delay: 0.20s; } .d5 { transition-delay: 0.25s; } .d6 { transition-delay: 0.30s; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Word reveal for hero name */ .word-reveal { display: inline-block; overflow: hidden; vertical-align: bottom; } .word-reveal > span { display: inline-block; transform: translateY(110%); transition: transform 1.05s var(--ease-soft); } .word-reveal.in > span { transform: translateY(0); } /* Animated underline on inline links */ .ulink { position: relative; display: inline-block; background-image: linear-gradient(var(--gold), var(--gold)); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.5s var(--ease-soft), color 0.3s; } .ulink:hover, .ulink:focus-visible { background-size: 100% 1px; color: var(--gold); } /* ================================================================ 4. NAVBAR ================================================================ */ nav.site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid transparent; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(1.25rem, 3vw, 3rem); height: var(--nav-h); transition: transform 0.67s var(--ease-soft), background 0.4s var(--ease-soft), border-color 0.4s, backdrop-filter 0.4s var(--ease-soft); } nav.site-nav.hidden { transform: translateY(-100%); } nav.site-nav.solid { background: rgba(0, 38, 26, 0.96); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-color: rgba(201, 168, 108, 0.36); } .nav-brand { display: inline-flex; align-items: center; gap: 0.7rem; font-family: 'Playfair Display', serif; font-size: 0.95rem; color: var(--gold-light); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; /* Același auriu ca „BACIU" din hero */ background: var(--glint-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: 0; pointer-events: none; transition: filter 0.3s, opacity 0.35s var(--ease-soft); } nav.site-nav.solid .nav-brand { opacity: 1; pointer-events: auto; } .nav-brand:hover { filter: brightness(1.12); } .nav-brand-mark { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(201, 168, 108, 0.55); font-style: italic; font-size: 0.78rem; color: var(--gold); letter-spacing: 0; } .nav-links { display: flex; gap: clamp(1.4rem, 2vw, 2.4rem); } .nav-links a { position: relative; font-family: 'Cormorant Garamond', serif; font-size: 0.92rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--white); font-weight: 700; padding: 0.5rem 0; transition: color 0.25s; } .nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease-soft); } .nav-links a:hover, .nav-links a.active { color: var(--gold-light); } .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); } /* Mobile toggle */ .nav-toggle { display: none; width: 44px; height: 40px; align-items: center; justify-content: center; border: 1px solid rgba(201, 168, 108, 0.5); } .nav-toggle-bars { position: relative; width: 22px; height: 14px; } .nav-toggle-bars span { position: absolute; left: 0; right: 0; height: 1.5px; background: var(--gold-light); transition: transform 0.32s var(--ease-out), opacity 0.25s, top 0.32s var(--ease-out); } .nav-toggle-bars span:nth-child(1) { top: 0; } .nav-toggle-bars span:nth-child(2) { top: 6px; } .nav-toggle-bars span:nth-child(3) { top: 12px; } nav.open .nav-toggle-bars span:nth-child(1) { top: 6px; transform: rotate(45deg); } nav.open .nav-toggle-bars span:nth-child(2) { opacity: 0; } nav.open .nav-toggle-bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); } /* ================================================================ 5. HERO ================================================================ */ #hero { position: relative; min-height: 100vh; background: radial-gradient(120% 90% at 75% 30%, var(--green-mid) 0%, var(--green-dark) 45%, var(--green-deepest) 100%); display: grid; grid-template-columns: 1.05fr 1fr; overflow: hidden; padding-top: var(--nav-h); color: var(--cream); /* Nimic din hero nu picteaza in afara casetei (overflow e deja hidden), deci invalidarea inelului rotativ nu trebuie sa se propage mai sus. */ contain: paint; } .hero-pattern { position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, transparent 0 30px, rgba(201,168,108,0.045) 30px 31px), radial-gradient(circle at 75% 35%, rgba(201,168,108,0.10), transparent 55%); pointer-events: none; } .hero-vignette { position: absolute; inset: 0; background: radial-gradient(75% 60% at 50% 95%, rgba(0, 24, 14, 0.6), transparent 70%); pointer-events: none; } .hero-left { position: relative; z-index: 3; padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 5vw, 6rem) clamp(6rem, 10vw, 10rem); display: flex; flex-direction: column; justify-content: center; } .hero-eyebrow { font-family: 'Cormorant Garamond', serif; font-size: calc(0.882rem + 1px); letter-spacing: 0.16em; text-transform: uppercase; margin-left: 5px; background: linear-gradient(180deg, var(--gold-pale) 0%, var(--gold) 65%, var(--gold-deep) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0.4px var(--gold); margin-bottom: 1.4rem; font-weight: 700; opacity: 0; transform: translateY(10px); animation: fadeUp 0.8s var(--ease-soft) forwards 0.3s; } .hero-name { font-family: 'Playfair Display', serif; font-size: clamp(2.8rem, 5.5vw, 5.4rem); font-weight: 700; color: var(--white); line-height: 1.0; letter-spacing: -0.015em; margin-bottom: 2.2rem; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25); } .hero-name em { font-style: italic; color: var(--gold-light); font-weight: 700; background: linear-gradient(180deg, var(--gold-pale) 0%, var(--gold) 65%, var(--gold-deep) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-name .baciu-gold { font-style: normal; color: var(--gold-light); font-weight: 700; background: linear-gradient(180deg, var(--gold-pale) 0%, var(--gold) 65%, var(--gold-deep) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Al doilea rand din h1 — locul unde titlul paginii isi confirma subiectul. Sta in interiorul .hero-name, deci trebuie sa anuleze explicit ce impune numele: umbra de 30px sub text de 18px iese noroi, iar line-height 1.0 si letter-spacing negativ sunt calibrate pentru 70px, nu pentru randul mic. */ .hero-h1-sub { display: block; font-family: 'Cormorant Garamond', serif; font-size: clamp(1.05rem, 1.4vw, 1.3rem); font-weight: 700; line-height: 1.72; letter-spacing: 0.06em; color: var(--cream); /* 700 e greutatea maxima a lui Cormorant Garamond. Ingrosarea in plus vine din contur, acelasi truc pe care il foloseste deja .hero-eyebrow. */ -webkit-text-stroke: 0.3px var(--cream); text-shadow: none; margin-left: 5px; margin-top: calc(0.55rem + 11px); opacity: 0; transform: translateY(10px); animation: fadeUp 0.8s var(--ease-soft) forwards 0.95s; } .hero-divider { width: 80px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); margin-bottom: calc(2.2rem + 34px); opacity: 0; transform: scaleX(0); transform-origin: left; animation: drawLine 1s var(--ease-soft) forwards 1.05s; } @keyframes drawLine { to { opacity: 1; transform: scaleX(1); } } .hero-cta-row { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 4rem; opacity: 0; transform: translateY(10px); animation: fadeUp 0.8s var(--ease-soft) forwards 1.2s; } .hero-cta-row .btn { padding: 0.9rem 1.3rem; font-size: 0.86rem; letter-spacing: 0.16em; } .btn { --btn-bg: var(--gold); --btn-fg: var(--green-deepest); --btn-bd: var(--gold); position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 0.7rem; font-family: 'Cormorant Garamond', serif; font-size: 0.92rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; padding: 1rem 1.6rem; color: var(--btn-fg); background: var(--btn-bg); border: 1px solid var(--btn-bd); transition: transform 0.35s var(--ease-spring), box-shadow 0.4s; will-change: transform; } .btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%); transform: translateX(-110%); transition: transform 0.85s var(--ease-soft); } .btn:hover::before { transform: translateX(110%); } .btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: var(--shadow-gold); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--white); --btn-bd: rgba(253, 250, 244, 0.5); } .btn--ghost:hover { --btn-bd: var(--white); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25); } .btn-arrow { width: 16px; height: 1px; background: currentColor; position: relative; transition: width 0.4s var(--ease-out); } .btn-arrow::after { content: ''; position: absolute; right: -1px; top: -3px; width: 7px; height: 7px; border-right: 1px solid currentColor; border-top: 1px solid currentColor; transform: rotate(45deg); } .btn:hover .btn-arrow { width: 26px; } .hero-stats { display: grid; grid-template-columns: repeat(3, auto); gap: clamp(0.8rem, 1.4vw, 1.4rem); align-items: end; margin-top: 30px; opacity: 0; transform: translateY(10px); animation: fadeUp 0.8s var(--ease-soft) forwards 1.45s; } .hero-stat-num { font-family: 'Playfair Display', serif; font-size: clamp(1.9rem, 2.6vw, 2.3rem); font-weight: 700; color: var(--gold); line-height: 1; letter-spacing: -0.01em; font-feature-settings: "lnum"; } .hero-stat-num sup { font-size: 0.55em; vertical-align: super; color: var(--gold-light); } .hero-stat-label { font-family: 'Cormorant Garamond', serif; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-dark); margin-top: 0.4rem; font-weight: 600; line-height: 1.55; max-width: 16ch; } /* HERO RIGHT — composed seal */ .hero-right { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 5vw, 5rem); perspective: 900px; } .hero-seal { position: relative; width: min(440px, 78%); aspect-ratio: 1 / 1; margin-top: -6rem; opacity: 0; animation: sealIn 1.4s var(--ease-soft) forwards 0.8s; } @keyframes sealIn { from { opacity: 0; transform: scale(0.86) rotate(-4deg); } to { opacity: 1; transform: scale(1) rotate(0); } } .hero-seal-bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(201, 168, 108, 0.15) 0%, rgba(201, 168, 108, 0.06) 35%, transparent 65%); border-radius: 50%; filter: blur(8px); } /* Purtatorul tiltului la cursor (scris din JS). Tine transformul 3D separat de sealIn (pe .hero-seal) si de rotatie (pe .ring-rotate). */ .seal-tilt { position: absolute; inset: 0; transition: transform 0.4s var(--ease-out); /* Fara will-change: ar fi un layer permanent pentru o tranzitie care apare doar la hover. Daca tiltul devine sacadat, se pune din JS pe mouseenter. */ } .hero-seal .seal-static { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; } /* Inelul rotativ. Elementul animat e un DIV, nu un din SVG: WebKit nu poate promova continut din interiorul SVG-ului intr-un layer propriu, deci un animat re-rasterizeaza tot sigiliul pe main thread la fiecare frame. Pe un box HTML, keyframes doar pe transform => animatie compozitata pe GPU. */ .hero-seal .ring-rotate { position: absolute; inset: 0; z-index: 3; animation: rotate 60s linear infinite; backface-visibility: hidden; -webkit-backface-visibility: hidden; /* Fara will-change: keyframes doar pe transform promoveaza automat in ambele motoare, deci nu adauga nimic. Fara transform-origin: pe un box patrat, 50% 50% implicit e deja centrul (echivalentul lui 250px 250px in unitati SVG). Fara translateZ(0): ar strica potrivirea listei de functii cu keyframe-ul, iar rotate(360deg) s-ar descompune in matricea identitate => inelul s-ar opri din rotit. */ } .hero-seal .ring-rotate > svg { width: 100%; height: 100%; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .hero-seal .seal-monogram { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 700; font-size: 124px; fill: url(#goldGrad); letter-spacing: -8px; } .hero-seal .seal-circ-text { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 16px; letter-spacing: 8px; fill: url(#goldGradRing); text-transform: uppercase; } /* Scroll cue */ .scroll-cue { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(14px); display: inline-flex; flex-direction: column; align-items: center; gap: 0.6rem; z-index: 10; opacity: 0; transition: opacity 0.6s var(--ease-soft), transform 0.6s var(--ease-soft); pointer-events: none; } .scroll-cue.scroll-cue-in:not(.scroll-cue-hidden) { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .scroll-cue-text { font-family: 'Cormorant Garamond', serif; font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(224, 201, 154, 0.85); font-weight: 600; } .scroll-cue-line { width: 1px; height: 29px; background: linear-gradient(to bottom, rgba(201,168,108,0.7), transparent); transform-origin: top; animation: scrollLine 2.2s var(--ease-soft) infinite; } @keyframes scrollLine { 0% { transform: scaleY(0.2); opacity: 0; } 35% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } /* ================================================================ 6. SECTIONS — common ================================================================ */ section { position: relative; } .section-inner { max-width: var(--container); margin: 0 auto; padding: clamp(4rem, 8vw, 7.5rem) clamp(1.5rem, 4vw, 3rem); position: relative; } .section-label { display: inline-flex; align-items: center; gap: 0.7rem; font-family: 'Cormorant Garamond', serif; font-size: 0.78rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--brown-mid); margin-bottom: 1rem; font-weight: 700; } .section-label::before { content: ''; width: 24px; height: 1px; background: var(--gold); display: inline-block; } .section-title { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 700; color: var(--green-dark); line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 1.4rem; } .section-title em { color: var(--brown-mid); font-style: italic; } .section-rule { width: 64px; height: 2px; background: var(--gold); margin-bottom: 2.4rem; } /* ================================================================ 7. DESPRE ================================================================ */ #despre { background: var(--white); } .about-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; } .about-cards-col { display: flex; flex-direction: column; gap: 1.2rem; position: sticky; top: calc(var(--nav-h) + 2rem); order: -1; } .about-card { position: relative; background: linear-gradient(160deg, var(--green-dark) 0%, var(--green-deepest) 100%); padding: 2.1rem 1.9rem 2rem; overflow: hidden; transition: transform 0.5s var(--ease-soft), box-shadow 0.5s; } .about-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .about-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-light)); } .about-card::after { content: ''; position: absolute; bottom: -50%; right: -30%; width: 280px; height: 280px; background: radial-gradient(circle, rgba(201, 168, 108, 0.10), transparent 60%); pointer-events: none; transition: transform 0.7s var(--ease-soft); } .about-card:hover::after { transform: translate(-15%, -15%); } .about-card-num { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600; font-size: 1.1rem; color: var(--gold); letter-spacing: 0.08em; margin-bottom: 0.7rem; } .about-card-title { font-family: 'Playfair Display', serif; font-size: 1.12rem; color: var(--gold-light); margin-bottom: 0.6rem; font-weight: 700; letter-spacing: 0.005em; } .about-card-text { font-size: 0.97rem; color: var(--cream); line-height: 1.7; font-weight: 500; } .about-text > p { margin-bottom: 1.3rem; color: var(--text-mid); font-size: 1.04rem; font-weight: 500; } .about-text strong { color: var(--green-dark); font-weight: 700; } .about-text figure { padding: 2rem 1.6rem; margin: 2rem 0; background: radial-gradient(ellipse 65% 85% at 50% 50%, var(--paper) 0%, var(--paper) 60%, rgba(251, 246, 234, 0) 100%); } .about-quote { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.18rem; font-weight: 400; line-height: 1.65; color: var(--gold-deep); } /* ================================================================ 8. ACTIVITATE ================================================================ */ #activitate { background: linear-gradient(180deg, var(--cream-dark) 0%, var(--cream) 100%); } .activity-intro { max-width: 660px; color: var(--text-mid); font-size: 1.06rem; margin-bottom: 0; } .activity-primary { margin-top: 3rem; } .activity-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; } .activity-grid--secondary { grid-template-columns: repeat(3, 1fr); margin-top: 1.6rem; } .activity-card { position: relative; background: var(--white); padding: 2.4rem 2rem 2rem; border: 1px solid rgba(122, 82, 48, 0.10); overflow: hidden; transition: transform 0.5s var(--ease-soft), box-shadow 0.5s var(--ease-soft), border-color 0.4s; will-change: transform; } .activity-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--green-mid), var(--gold)); transform: scaleX(0.32); transform-origin: left; transition: transform 0.6s var(--ease-soft); } .activity-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(201, 168, 108, 0.4); } .activity-card:hover::before { transform: scaleX(1); } /* Wide "Drept Civil" card — icon/intro left, accordion of sub-domains right */ .activity-card--wide { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 2.6rem; padding: 2.6rem 2.4rem 2.4rem; } .activity-card--wide .activity-text { margin-bottom: 0; } .activity-card-right { border-left: 1px solid rgba(122, 82, 48, 0.10); padding-left: 2.6rem; } /* Fiecare subsecțiune Drept Civil — tratament unitar, accent auriu discret pe starea activă */ .activity-accordion { display: flex; flex-direction: column; gap: 0.6rem; } .accordion-item { background: var(--white); border: 1px solid rgba(122, 82, 48, 0.14); border-left: 3px solid rgba(122, 82, 48, 0.14); transition: transform 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-soft), background 0.4s var(--ease-soft), border-color 0.4s var(--ease-soft); } .accordion-item.open { background: var(--cream); border-color: rgba(158, 116, 32, 0.22); border-left-color: var(--gold-deep); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); transform: translateY(-2px); } .accordion-item:hover { border-left-color: var(--gold-deep); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08); transform: translateY(-3px); } .accordion-heading { margin: 0; } .accordion-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: none; border: none; padding: 0.9rem 1.1rem; margin: 0; font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 700; color: var(--green-dark); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } .accordion-trigger:hover { color: var(--gold-deep); } .accordion-icon { position: relative; width: 18px; height: 18px; flex-shrink: 0; } .accordion-icon::before, .accordion-icon::after { content: ''; position: absolute; left: 50%; top: 50%; background: var(--green-dark); transition: transform 0.35s var(--ease-soft), background 0.35s var(--ease-soft); } .accordion-icon::before { width: 100%; height: 1px; transform: translate(-50%, -50%); } .accordion-icon::after { width: 1px; height: 100%; transform: translate(-50%, -50%); } .accordion-trigger:hover .accordion-icon::before, .accordion-trigger:hover .accordion-icon::after, .accordion-trigger[aria-expanded="true"] .accordion-icon::before, .accordion-trigger[aria-expanded="true"] .accordion-icon::after { background: var(--gold-deep); } .accordion-trigger[aria-expanded="true"] .accordion-icon::after { transform: translate(-50%, -50%) scaleY(0); } .accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease-soft); } .accordion-item.open .accordion-panel { grid-template-rows: 1fr; } .accordion-panel-inner { overflow: hidden; padding: 0 1.1rem; } .accordion-panel .activity-list { padding-bottom: 0.6rem; } .activity-icon { width: 44px; height: 44px; color: var(--gold-deep); margin-bottom: 1rem; } .activity-icon svg { width: 100%; height: 100%; stroke-width: 1.2; } /* Draw-in reveal: each shape animates its own stroke from hidden to full */ .activity-icon svg path, .activity-icon svg rect, .activity-icon svg circle { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease-soft); } .activity-icon svg > *:nth-child(1) { transition-delay: 0.05s; } .activity-icon svg > *:nth-child(2) { transition-delay: 0.20s; } .activity-icon svg > *:nth-child(3) { transition-delay: 0.35s; } .activity-icon svg > *:nth-child(4) { transition-delay: 0.50s; } .activity-icon svg > *:nth-child(5) { transition-delay: 0.65s; } .activity-card.visible .activity-icon svg path, .activity-card.visible .activity-icon svg rect { stroke-dashoffset: 0; } .activity-domain { font-family: 'Cormorant Garamond', serif; font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 0.5rem; font-weight: 700; } .activity-title { font-family: 'Playfair Display', serif; font-size: 1.32rem; color: var(--green-dark); margin-bottom: 0.8rem; font-weight: 700; letter-spacing: -0.005em; } .activity-text { font-size: 0.98rem; color: var(--text-mid); line-height: 1.7; margin-bottom: 1.2rem; font-weight: 500; } .activity-list li { font-size: 0.95rem; color: var(--text-mid); padding: 0.55rem 0; border-bottom: 1px solid rgba(122, 82, 48, 0.10); display: flex; align-items: baseline; gap: 0.7rem; font-weight: 500; line-height: 1.55; transition: color 0.3s; } .activity-list li:last-child { border-bottom: none; } .activity-list li:hover { color: var(--green-dark); } .activity-list li::before { content: ''; display: inline-block; width: 16px; height: 1px; background: var(--gold); flex-shrink: 0; position: relative; top: -3px; transition: width 0.35s var(--ease-out), background 0.3s; } .activity-list li:hover::before { width: 26px; background: var(--gold-deep); } /* ================================================================ 9. PARCURS ================================================================ */ #parcurs { background: var(--white); } .card-link { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.75rem; color: var(--cream); font-size: 0.97rem; font-weight: 500; text-decoration: none; position: relative; padding-bottom: 2px; transition: color 0.35s; } .card-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-soft); } .card-link:hover { color: var(--gold-light); } .card-link:hover::after { transform: scaleX(1); } /* ================================================================ 9a. EDITORIAL TIMELINE Premium minimal vertical flow. Thin centered rule, alternating cards, soft shadow, calm reveal. 2D only — transform + opacity. ================================================================ */ .flow { position: relative; margin: 3.5rem auto 0; max-width: 1080px; } /* Hairline center rule, fading at both ends */ .flow::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-0.5px); background: linear-gradient(to bottom, rgba(201,168,108,0) 0%, rgba(201,168,108,0.32) 10%, rgba(201,168,108,0.32) 90%, rgba(201,168,108,0) 100%); pointer-events: none; } /* Fills in as the reader scrolls through the timeline — reuses the scroll-progress technique already used for the top nav bar. */ .flow-fill { position: absolute; left: 50%; top: 0; width: 1px; height: 0; contain: layout; transform: translateX(-0.5px); background: linear-gradient(to bottom, rgba(196, 154, 53, 0) 0px, var(--gold) 36px, var(--gold-light) calc(100% - 36px), rgba(212, 180, 106, 0) 100%); box-shadow: 0 0 6px rgba(201, 168, 108, 0.45); pointer-events: none; z-index: 1; transition: height 0.1s linear; } .flow-list { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; } .flow-item { position: relative; display: grid; grid-template-columns: 1fr 56px 1fr; align-items: center; padding: 0.3rem 0; opacity: 0; transform: translateY(18px); transition: opacity 1.05s cubic-bezier(.22,.61,.28,1), transform 1.05s cubic-bezier(.22,.61,.28,1); } .flow-item.in { opacity: 1; transform: translateY(0); } .flow-item:first-child { padding-top: 0.4rem; } .flow-item:last-child { padding-bottom: 0.4rem; } .flow-item[data-side="left"] .flow-shift { grid-column: 1; justify-self: end; padding-right: clamp(1.25rem, 2.5vw, 2.25rem); } .flow-item[data-side="right"] .flow-shift { grid-column: 3; justify-self: start; padding-left: clamp(1.25rem, 2.5vw, 2.25rem); } /* Center node */ .flow-node { grid-column: 2; justify-self: center; align-self: center; width: 11px; height: 11px; border-radius: 50%; background: var(--white); border: 1.5px solid var(--gold); box-shadow: 0 0 0 4px var(--white); transition: background 0.9s var(--ease-soft), border-color 0.9s var(--ease-soft), transform 0.55s var(--ease-soft); z-index: 2; } .flow-node.filled { background: var(--gold); } .flow-item:hover .flow-node { transform: scale(1.2); } /* Cards — soft shadow, no border, calm hover lift */ .flow-card { display: inline-block; max-width: 460px; padding: 1.5rem 1.7rem; background: var(--white); border-radius: 6px; box-shadow: 0 1px 2px rgba(28,38,30,0.04), 0 8px 24px -10px rgba(28,38,30,0.10); transition: transform 0.65s cubic-bezier(.22,.61,.28,1), box-shadow 0.65s cubic-bezier(.22,.61,.28,1); text-align: left; } .flow-item:hover .flow-card { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(28,38,30,0.05), 0 16px 34px -12px rgba(28,38,30,0.14); } .flow-year { font-family: 'Playfair Display', serif; font-size: 1.42rem; font-weight: 700; color: var(--green-dark); letter-spacing: -0.005em; line-height: 1.2; } .flow-event { font-size: 1.04rem; color: var(--text-dark); font-weight: 600; margin-top: 0.55rem; margin-bottom: 0.6rem; line-height: 1.4; } .flow-detail { font-size: 0.94rem; color: var(--text-mid); font-style: italic; font-weight: 500; line-height: 1.75; } .flow-detail .card-link { color: var(--text-mid); } .flow-detail .card-link:hover { color: var(--gold-light); } /* Mobile: rule on the left, single column */ @media (max-width: 760px) { .flow { margin-top: 2.4rem; } .flow::before, .flow-fill { left: 14px; transform: none; } .flow-item, .flow-item[data-side="left"], .flow-item[data-side="right"] { display: block; padding: 1.4rem 0 1.4rem 2.6rem; } .flow-item[data-side="left"] .flow-shift, .flow-item[data-side="right"] .flow-shift { grid-column: auto; justify-self: auto; padding: 0; } .flow-card { max-width: 100%; padding: 1.25rem 1.35rem; } .flow-node { position: absolute; left: 14px; top: 1.85rem; transform: translateX(-50%); grid-column: auto; justify-self: auto; align-self: auto; } .flow-item:hover .flow-node { transform: translateX(-50%) scale(1.2); } .flow-item { transform: translateY(14px); transition: opacity 1.35s cubic-bezier(.22,.61,.28,1), transform 1.35s cubic-bezier(.22,.61,.28,1); } .reveal, .reveal-left, .reveal-right { transition: opacity 1.35s cubic-bezier(.22,.61,.28,1), transform 1.35s cubic-bezier(.22,.61,.28,1); } .reveal { transform: translateY(12px); } .reveal-right { transform: translateX(14px); } .reveal-left { transform: translateX(-14px); } .tx-reveal .tx-word { transform: translateY(0.05em); transition: opacity 1.25s cubic-bezier(.22,.61,.28,1), transform 1.25s cubic-bezier(.22,.61,.28,1); } } @media (prefers-reduced-motion: reduce) { .flow-item, .flow-card, .flow-node { transition: none; } .flow-item { opacity: 1; transform: none; } } /* ================================================================ 10. CIVIC ================================================================ */ #civic { background: radial-gradient(120% 100% at 30% 0%, var(--green-mid) 0%, var(--green-dark) 50%, var(--green-deepest) 100%); color: var(--cream); position: relative; overflow: hidden; } #civic .section-label { color: var(--gold); } #civic .section-label::before { background: var(--gold); } #civic .section-title { color: var(--white); } #civic .section-title em { color: var(--gold-light); } .civic-intro { max-width: 600px; color: var(--cream-darker); margin-bottom: 0; } .civic-list { margin-top: 3.4rem; } .civic-item { position: relative; display: grid; grid-template-columns: 1.1fr 1.6fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; padding: 1.9rem 0.4rem; background: linear-gradient(to right, rgba(201, 168, 108, 0) 0%, rgba(201, 168, 108, 0) 100%); transition: padding-left 0.4s var(--ease-soft), background 0.6s; } /* Divider hairlines — fading at both ends, like the Parcurs timeline line */ .civic-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, rgba(201, 168, 108, 0) 0%, rgba(201, 168, 108, 0.18) 12%, rgba(201, 168, 108, 0.18) 88%, rgba(201, 168, 108, 0) 100%); transition: background 0.4s; pointer-events: none; } .civic-item:last-child::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, rgba(201, 168, 108, 0) 0%, rgba(201, 168, 108, 0.18) 12%, rgba(201, 168, 108, 0.18) 88%, rgba(201, 168, 108, 0) 100%); pointer-events: none; } .civic-item:hover::before { background: linear-gradient(to right, rgba(201, 168, 108, 0) 0%, rgba(201, 168, 108, 0.42) 12%, rgba(201, 168, 108, 0.42) 88%, rgba(201, 168, 108, 0) 100%); } .civic-item:hover { padding-left: 1.1rem; background: linear-gradient(to right, rgba(201, 168, 108, 0) 0%, rgba(201, 168, 108, 0.05) 15%, rgba(201, 168, 108, 0.05) 85%, rgba(201, 168, 108, 0) 100%); } .civic-left { display: flex; flex-direction: column; gap: 0.35rem; } .civic-org { font-family: 'Playfair Display', serif; font-size: 1.18rem; font-weight: 700; color: var(--gold-light); letter-spacing: 0.005em; transition: color 0.3s; } .civic-item:hover .civic-org { color: var(--white); } .civic-role { font-family: 'Cormorant Garamond', serif; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(224, 201, 154, 0.9); font-weight: 600; } .civic-desc { font-size: 0.99rem; color: var(--cream); line-height: 1.78; font-weight: 500; } /* ================================================================ 11. CONTACT ================================================================ */ #contact { background: var(--cream-dark); } .contact-heading-block { margin-top: -27px; margin-left: -34px; } .contact-heading-block .section-label { margin-bottom: 10px; } .contact-heading { font-family: 'Playfair Display', serif; font-size: clamp(2.16rem, 4.05vw, 3.42rem); font-style: italic; font-weight: 700; color: var(--green-dark); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 0; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; margin-top: 3rem; } .contact-info-item { display: flex; align-items: flex-start; gap: 1.2rem; margin-bottom: 1.9rem; transition: transform 0.4s var(--ease-soft); } .contact-info-item:hover { transform: translateX(4px); } .contact-icon-wrap { width: 44px; height: 44px; border: 1px solid var(--gold); background: rgba(201, 168, 108, 0.10); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--gold-deep); transition: background 0.3s, color 0.3s, border-color 0.3s; } .contact-info-item:hover .contact-icon-wrap { background: var(--gold); color: var(--green-dark); border-color: var(--gold-deep); } .contact-icon-wrap svg { width: 18px; height: 18px; } .contact-label { font-family: 'Cormorant Garamond', serif; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brown-mid); margin-bottom: 0.3rem; font-weight: 700; } .contact-value { font-size: 1.02rem; color: var(--text-dark); line-height: 1.7; font-weight: 500; } .contact-value a, a.contact-value { color: var(--green-dark); font-weight: 600; } .contact-panel { position: relative; background: linear-gradient(160deg, var(--green-mid) 0%, var(--green-dark) 60%, var(--green-deepest) 100%); padding: 2.6rem 2.3rem; color: var(--cream); overflow: hidden; margin-top: -6px; margin-left: 40px; transition: transform 0.5s var(--ease-soft), box-shadow 0.5s var(--ease-soft); } .contact-panel:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(0, 38, 26, 0.4), 0 0 0 1px rgba(201, 168, 108, 0.3); } .contact-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-light)); } .contact-panel::after { content: ''; position: absolute; bottom: -60%; right: -40%; width: 380px; height: 380px; background: radial-gradient(circle, rgba(201,168,108,0.13), transparent 65%); pointer-events: none; } .contact-panel-eyebrow { font-family: 'Cormorant Garamond', serif; font-size: 0.76rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 0.9rem; } /* Titlul a trecut de la doua randuri la unul singur. La 1.55rem fix ramanea un rand subtire intr-un panou de 545px, asa ca scala cu latimea: minimul e vechea marime, ceruta de mobil unde raman ~253px utili. */ .contact-panel-heading { font-family: 'Playfair Display', serif; font-size: clamp(1.55rem, 1.1rem + 1.6vw, 2.05rem); font-style: italic; color: var(--gold-light); font-weight: 600; line-height: 1.2; margin-bottom: 1.35rem; } .contact-panel-rule { width: 40px; height: 1px; background: var(--gold); margin-bottom: 1.4rem; } .contact-panel-name { font-family: 'Playfair Display', serif; font-size: 1.08rem; font-weight: 600; margin-bottom: 0.4rem; } /* Italic 400 + auriu tine calitatea subordonata numelui, care ramane 600 crem. nowrap muta "– Avocat Titular" intreg pe randul urmator cand nu incape, ca sa nu ramana en dash-ul atarnat la capat de rand. */ .contact-panel-role { font-style: italic; font-weight: 400; color: var(--gold); white-space: nowrap; } .contact-panel-addr { font-size: 0.99rem; color: var(--cream); line-height: 1.85; font-weight: 500; } .contact-panel-meta { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(201, 168, 108, 0.22); font-family: 'Cormorant Garamond', serif; font-size: 0.84rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); font-weight: 600; } .contact-panel-cta { margin-top: 1.6rem; display: inline-flex; align-items: center; gap: 0.6rem; color: var(--gold-light); font-family: 'Cormorant Garamond', serif; font-size: 0.84rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; padding-bottom: 0.4rem; border-bottom: 1px solid var(--gold); transition: color 0.3s, gap 0.4s var(--ease-soft); } .contact-panel-cta:hover { color: var(--white); gap: 1.1rem; } .status-badge { --dot-rgb: var(--status-green-rgb); display: inline-flex; align-items: center; gap: 0.7rem; margin-top: 1.6rem; padding: 0.55rem 1rem; background: rgba(0, 20, 14, 0.28); border: 1px solid rgba(var(--dot-rgb), 0.4); font-family: 'Cormorant Garamond', serif; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream); font-weight: 600; transition: border-color 0.4s, background 0.4s, box-shadow 0.4s var(--ease-soft); } .status-badge:hover { background: rgba(0, 20, 14, 0.42); box-shadow: 0 10px 24px rgba(var(--dot-rgb), 0.28); } .status-badge.is-offline { --dot-rgb: var(--status-red-rgb); } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--dot-rgb)); position: relative; flex-shrink: 0; box-shadow: 0 0 9px rgba(var(--dot-rgb), 0.65); transition: background 0.4s, box-shadow 0.4s; } .status-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: rgb(var(--dot-rgb)); opacity: 0.45; animation: pulse 2.4s ease-in-out infinite; transition: background 0.4s; } @keyframes pulse { 0%, 100% { transform: scale(0.8); opacity: 0.45; } 50% { transform: scale(1.6); opacity: 0; } } /* ================================================================ 12. FOOTER ================================================================ */ footer.site-footer { background: var(--ink); color: var(--cream-darker); padding: 0; border-top: 1px solid rgba(201, 168, 108, 0.18); position: relative; overflow: hidden; } .footer-top { max-width: var(--container); margin: 0 auto; padding: clamp(3rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3rem); display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; } .footer-brand-block .footer-brand-name { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--gold-light); font-weight: 700; letter-spacing: 0.005em; margin-bottom: 0.6rem; } .footer-brand-block .footer-brand-name em { font-style: italic; color: var(--gold); } .footer-brand-block .footer-brand-name .baciu-gold { font-style: normal; color: var(--gold); } .footer-brand-block p { font-size: 0.95rem; line-height: 1.75; color: rgba(217, 205, 181, 0.78); max-width: 36ch; } .footer-col-title { font-family: 'Cormorant Garamond', serif; font-size: 0.76rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 1.1rem; } .footer-list li { margin-bottom: 0.55rem; } .footer-list a { font-size: 0.97rem; color: rgba(217, 205, 181, 0.85); transition: color 0.3s; } .footer-list a:hover { color: var(--gold-light); } .footer-divider { border-top: 1px solid rgba(201, 168, 108, 0.14); width: 100%; } .footer-bottom { padding: 1.4rem clamp(1.5rem, 4vw, 3rem); max-width: var(--container); margin: 0 auto; position: relative; display: flex; justify-content: space-between; align-items: center; } .footer-made-by { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } .footer-made-by a { color: inherit; text-decoration: none; } .footer-made-by a:hover { opacity: 0.8; } .footer-bottom .footer-meta:first-child { margin-left: -1.5rem; } .footer-bottom .footer-meta:nth-child(2) { margin-right: 10rem; } .footer-meta { font-family: 'Cormorant Garamond', serif; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(217, 205, 181, 0.6); font-weight: 600; } /* ================================================================ 13. KEYFRAMES & UTILITIES ================================================================ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* ================================================================ 14. RESPONSIVE — TABLET (<= 1024) ================================================================ */ @media (max-width: 1024px) { #hero { grid-template-columns: 1fr; } .hero-right { display: none; } .about-grid { grid-template-columns: 1fr; } .about-cards-col { position: static; flex-direction: row; flex-wrap: wrap; } .about-cards-col > * { flex: 1 1 260px; } .footer-top { grid-template-columns: 1.4fr 1fr; } .footer-col--3 { grid-column: 1 / -1; } .activity-grid--secondary { grid-template-columns: 1fr 1fr; } .activity-grid--secondary .activity-card:last-child { grid-column: 1 / -1; } } /* ================================================================ 15. RESPONSIVE — MOBILE (<= 860) ================================================================ */ @media (max-width: 860px) { body { font-size: 17px; line-height: 1.7; } .nav-links { position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; gap: 0; background: var(--green-deepest); border-bottom: 1px solid rgba(201, 168, 108, 0.22); max-height: 0; overflow: hidden; padding: 0; transition: max-height 0.4s var(--ease-soft), padding 0.4s var(--ease-soft); } nav.open .nav-links { max-height: 500px; padding: 0.8rem 0 1.2rem; } .nav-links li { width: 100%; text-align: center; opacity: 0; transform: translateY(-8px); } nav.open .nav-links li { opacity: 1; transform: translateY(0); transition: opacity 0.45s var(--ease-soft), transform 0.45s var(--ease-soft); } nav.open .nav-links li:nth-child(1) { transition-delay: 0.08s; } nav.open .nav-links li:nth-child(2) { transition-delay: 0.14s; } nav.open .nav-links li:nth-child(3) { transition-delay: 0.20s; } nav.open .nav-links li:nth-child(4) { transition-delay: 0.26s; } nav.open .nav-links li:nth-child(5) { transition-delay: 0.32s; } .nav-links a { display: block; padding: 0.95rem 1.5rem; font-size: 1rem; letter-spacing: 0.18em; } .nav-toggle { display: inline-flex; } .hero-left { padding: 4rem 1.5rem 5rem; text-align: center; align-items: center; } /* "Avocat definitiv · Baroul Cluj" masoara 318px la 0.16em, iar pe ecrane de 360px raman doar 312px intre padding-uri. 0.12em il aduce la 299px. */ .hero-eyebrow { letter-spacing: 0.12em; } .hero-stats, .hero-divider, .hero-cta-row { align-self: center; } .hero-divider { margin-left: auto; margin-right: auto; } .hero-stats { grid-template-columns: repeat(3, 1fr); width: 100%; max-width: 420px; } .hero-stats > div { text-align: center; } .hero-cta-row { justify-content: center; } .scroll-cue { display: none; } .about-cards-col { flex-direction: column; } .about-cards-col > * { flex: none; } .activity-grid { grid-template-columns: 1fr; gap: 1.2rem; } .activity-grid--secondary { grid-template-columns: 1fr; } .activity-grid--secondary .activity-card:last-child { grid-column: auto; } .activity-card--wide { grid-template-columns: 1fr; gap: 1.6rem; padding: 2.2rem 1.7rem 1.8rem; } .activity-card-right { border-left: none; padding-left: 0; border-top: 1px solid rgba(122, 82, 48, 0.10); padding-top: 1.6rem; } .civic-item { grid-template-columns: 1fr; gap: 0.7rem; padding: 1.6rem 0; } .civic-item:hover { padding-left: 0.4rem; } .contact-grid { grid-template-columns: 1fr; gap: 2.4rem; } /* Acelasi decalaj optic de desktop: pe o coloana nu suprapune nimic, doar taie 40px din latimea panoului, care ramanea cu ~213px utili. */ .contact-panel { margin-left: 0; } /* Decalajul optic negativ e calibrat pentru latimea de desktop. Pe mobil padding-ul sectiunii e de 24px, iar -34px scoate blocul din ecran — titlul italic mai adauga ~14px de depasire a glifei "P". */ .contact-heading-block { margin-left: 0; } .footer-top { grid-template-columns: 1fr; } .footer-col--3 { grid-column: auto; } .footer-bottom { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.3rem; } .footer-bottom .footer-meta:first-child { margin-left: 0; } .footer-bottom .footer-meta:nth-child(2) { margin-right: 0; } .footer-made-by { position: static; transform: none; margin-top: 0.6rem; pointer-events: auto; } } @media (max-width: 480px) { .hero-name { font-size: clamp(2.4rem, 12vw, 3.4rem); } .hero-stats { gap: 0.7rem; } .hero-stat-num { font-size: 1.7rem; } .hero-stat-label { font-size: 0.66rem; letter-spacing: 0.12em; } .btn { padding: 0.85rem 1.2rem; font-size: 0.82rem; letter-spacing: 0.18em; } } /* ================================================================ 16. REDUCED MOTION ================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; } .word-reveal > span { transform: none; } .hero-seal .ring-rotate { animation: none; } .status-dot::after { animation: none; } .scroll-cue-line { animation: none; } } /* ================================================================ 16b. TEXT REVEAL (word-by-word fast typewriter) ================================================================ */ .tx-reveal { /* container — words inside are individually animated */ } .tx-reveal .tx-word { display: inline-block; opacity: 0; transform: translateY(0.06em); transition: opacity 1s cubic-bezier(.22,.61,.28,1), transform 1s cubic-bezier(.22,.61,.28,1); } .tx-reveal.in .tx-word { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .tx-reveal .tx-word { opacity: 1; transform: none; transition: none; } } /* ================================================================ 16c. GOLD GLINT — streak metalic static pe titluri/cifre aurii ================================================================ */ @media (max-width: 768px) { #hero { min-height: 100dvh; } } .hero-name .baciu-gold, .hero-name em { background: var(--glint-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-stat-num { background: var(--glint-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .hero-stat-num sup { background: var(--glint-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-divider { background: linear-gradient( 90deg, transparent 0%, var(--gold-deep) 15%, #F5E9A0 50%, var(--gold-deep) 85%, transparent 100% ); } /* Buton primar — Programare consultanță (background auriu devine metalic) */ .btn:not(.btn--ghost) { background: linear-gradient( 105deg, var(--gold) 0%, var(--gold) 25%, #F5E9A0 48%, var(--gold) 68%, var(--gold) 100% ); } /* "Dincolo de sala de judecată" — section-label din #civic */ #civic .section-label { background: var(--glint-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Contact — Cabinet Individual de Avocat */ .contact-panel-heading { background: var(--glint-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* 22+ si 3 — fara glint, culoare aurie plata */ .hero-stats > div:nth-child(1) .hero-stat-num, .hero-stats > div:nth-child(3) .hero-stat-num { background: none; -webkit-background-clip: unset; background-clip: unset; -webkit-text-fill-color: unset; color: var(--gold); } .hero-stats > div:nth-child(1) .hero-stat-num sup, .hero-stats > div:nth-child(3) .hero-stat-num sup { background: none; -webkit-background-clip: unset; background-clip: unset; -webkit-text-fill-color: unset; color: var(--gold-light); } /* 1000+ hero stat — shine pe ultimul '0' (69.3%) si '+' (82.8%), centru 76% */ /* Animatia counter nu e afectata — schimba doar textContent, gradientul ramane fix */ .hero-stats > div:nth-child(2) .hero-stat-num { background: linear-gradient(105deg, var(--gold) 0%, var(--gold) 58%, #F5E9A0 76%, var(--gold) 92%, var(--gold) 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ================================================================ 17. PRINT ================================================================ */ @media print { nav, .scroll-cue, .scroll-progress, .btn, .grain { display: none !important; } body { background: white; color: black; } section { page-break-inside: avoid; } }