/* ANNET&BEAUTY — strat de polish (motion + micro-interactiuni + a11y). Aditiv, non-breaking. */ /* ---- a11y: focus-visible auriu + selectie ---- */ :where(a,button,[tabindex],input,select,textarea):focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:10px; } ::selection{ background:color-mix(in oklab,var(--accent) 42%,transparent); color:var(--text); } /* ---- bara de progres scroll (aurie) ---- */ .scrollbar{ position:fixed; top:0; left:0; height:2px; width:0; z-index:100; pointer-events:none; background:linear-gradient(90deg, color-mix(in oklab,var(--accent) 65%,transparent), var(--accent-ink)); box-shadow:0 0 14px color-mix(in oklab,var(--accent) 55%,transparent); } /* ---- nav: umbra + condensare la scroll ---- */ .nav{ transition:background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); } .nav.scrolled{ box-shadow:0 12px 34px -20px oklch(0 0 0 / .65); background:color-mix(in oklab,var(--bg) 88%,transparent); } .links a{ position:relative; } .links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1.5px; background:var(--accent); opacity:.85; transition:right .35s var(--ease); } .links a:hover::after,.links a[aria-current="page"]::after{ right:0; } /* ---- buton gold premium: gradient subtil + sheen la hover ---- */ .btn{ transition:transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease), border-color .35s var(--ease); } .btn-gold{ position:relative; overflow:hidden; background:linear-gradient(135deg, color-mix(in oklab,var(--accent) 84%, white 12%), var(--accent) 52%, color-mix(in oklab,var(--accent) 82%, black 7%)); box-shadow:0 8px 24px -13px color-mix(in oklab,var(--accent) 70%, transparent); } .btn-gold::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, transparent 32%, color-mix(in oklab,white 60%,transparent) 48%, transparent 64%); transform:translateX(-135%); transition:transform .75s var(--ease); } .btn-gold:hover::after{ transform:translateX(135%); } .btn-gold:hover{ box-shadow:0 16px 36px -13px color-mix(in oklab,var(--accent) 75%, transparent); } .btn-ghost{ backdrop-filter:blur(2px); } /* ---- carduri: glow auriu la hover + numar elegant ---- */ .card{ position:relative; overflow:hidden; } .card::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .5s var(--ease); background:radial-gradient(130% 90% at 100% 0%, color-mix(in oklab,var(--accent) 15%, transparent), transparent 58%); } .card:hover::before{ opacity:1; } .card:hover{ box-shadow:0 26px 64px -36px oklch(0 0 0 / .6); } .card .n{ font-size:2.15rem; line-height:1; letter-spacing:-.01em; background:linear-gradient(180deg, var(--accent-ink), color-mix(in oklab,var(--accent) 62%, transparent)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } /* ---- feature media: hover lift fin ---- */ .feature-media img{ transition:transform .6s var(--ease), box-shadow .6s var(--ease); } .feature-media:hover img{ transform:translateY(-4px) scale(1.012); box-shadow:0 40px 90px -40px oklch(0 0 0 / .68); } /* ---- hero: underline animat pe cuvantul-cheie ---- */ .hero h1 em{ position:relative; } .hero h1 em::after{ content:""; position:absolute; left:0; right:0; bottom:.02em; height:2px; transform-origin:left; transform:scaleX(0); background:linear-gradient(90deg, var(--accent), color-mix(in oklab,var(--accent) 10%, transparent)); } html.anim .hero h1 em::after{ animation:annetUnderline 1.1s var(--ease) .55s both; } /* ---- intrare la load (hero) — FOUC-safe prin html.anim setat sincron in ---- */ html.anim .hero-copy > *{ opacity:0; transform:translateY(20px); animation:annetIn .95s var(--ease) both; } html.anim .hero-copy > *:nth-child(1){ animation-delay:.06s } html.anim .hero-copy > *:nth-child(2){ animation-delay:.16s } html.anim .hero-copy > *:nth-child(3){ animation-delay:.27s } html.anim .hero-copy > *:nth-child(4){ animation-delay:.38s } html.anim .hero-copy > *:nth-child(5){ animation-delay:.49s } @keyframes annetIn{ to{ opacity:1; transform:none } } @keyframes annetUnderline{ to{ transform:scaleX(1) } } /* ---- reveal: blur fin + stagger pe carduri ---- */ .reveal{ transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); filter:blur(7px); } .reveal.in{ filter:blur(0); } .grid3.in-stagger .card{ opacity:0; transform:translateY(20px); animation:annetIn .8s var(--ease) both; } .grid3.in-stagger .card:nth-child(2){ animation-delay:.1s } .grid3.in-stagger .card:nth-child(3){ animation-delay:.2s } /* ---- hero img: parallax GPU ---- */ .hero-img{ will-change:transform; } @media (prefers-reduced-motion:reduce){ html.anim .hero-copy>*{ opacity:1; transform:none; animation:none } html.anim .hero h1 em::after{ animation:none; transform:scaleX(1) } .btn-gold::after{ display:none } .reveal{ filter:none } .grid3.in-stagger .card{ opacity:1; transform:none; animation:none } } /* ===== UPGRADE-uri VIZIBILE imediat (nu doar hover/scroll) ===== */ /* titlu hero: culoare SOLIDA originala (vizibila garantat) — fara background-clip risc. Accent vizibil doar pe cuvantul-cheie (gold) + o usoara stralucire calda. */ .hero h1{ text-shadow:0 1px 30px color-mix(in oklab,var(--accent) 18%, transparent); } .hero h1 em{ color:var(--accent-ink); } /* aura aurie calda in spatele copy-ului hero */ .hero-copy{ position:relative; } .hero-copy::before{ content:""; position:absolute; inset:-12% -24% -8% -18%; z-index:-1; pointer-events:none; background:radial-gradient(58% 58% at 28% 38%, color-mix(in oklab,var(--accent) 17%, transparent), transparent 70%); filter:blur(26px); } /* carduri: accent auriu permanent sus (vizibil fara hover) */ .card{ } .card::after{ content:""; position:absolute; top:0; left:26px; right:26px; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--accent), color-mix(in oklab,var(--accent) 10%, transparent) 75%); opacity:.6; } /* band CTA: contur auriu mai prezent + glow */ .band{ box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 22%, transparent), 0 30px 70px -44px oklch(0 0 0 / .6); } /* eyebrow: mic punct auriu decorativ */ .eyebrow{ display:inline-flex; align-items:center; gap:.6em; } .eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px color-mix(in oklab,var(--accent) 70%,transparent); }