/* ============================================================ CARDURI 3D — stilurile alese din Admin > Teme > "Carduri 3D" (portul din PB, pe cardurile catalogului: .cards > .card, poza in .card-media) Totul e legat de atribute pe , puse de Support\TemaFront::atributeHtml(): data-card plat | ridicat | muchii | straturi data-card-edge sterse | grafit | brand | aluminiu data-card-finish mat | lucios data-heading plat | gravat | extrudat data-cards-intro oprit | acasa | peste_tot Cu valorile implicite nu se aplica nicio regula de aici. transform NU are !important: altfel animatia de asezare n-ar mai avea efect. Intensitatea: --card-depth (0..100) din tema -> --card-k (0..1). ============================================================ */ html{ --card-k:calc(var(--card-depth, 28) / 100); --e-r:#dbe3ee; --e-b:#c2cedd; --e-line:#cfd8e4; } html[data-card-edge="grafit"] { --e-r:#6b7686; --e-b:#3a4250; --e-line:#4b5563; } html[data-card-edge="brand"] { --e-r:color-mix(in srgb, var(--primary,#04708c) 70%, #fff); --e-b:color-mix(in srgb, var(--primary-dark,#035a70) 62%, #000); --e-line:var(--primary-dark,#035a70); } html[data-card-edge="aluminiu"]{ --e-r:#dfe4ea; --e-b:#9aa5b2; --e-line:#b3bcc7; } /* ─────────── A · Ridicat ─────────── */ html[data-card="ridicat"] .cards{perspective:1100px} html[data-card="ridicat"] .card{ position:relative; border-radius:12px; transform:translate3d(var(--c-tx,0px),var(--c-ty,0px),0) rotateX(var(--c-rx,0deg)) rotateY(var(--c-ry,0deg)); transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .2s; box-shadow:0 1px 1px rgba(16,40,50,.05), 0 calc(2px*var(--card-k)) calc(3px*var(--card-k)) rgba(16,40,50,.06), 0 calc(6px*var(--card-k)) calc(10px*var(--card-k)) rgba(16,40,50,.07), 0 calc(14px*var(--card-k)) calc(24px*var(--card-k)) rgba(16,40,50,.08)} html[data-card="ridicat"] .card:hover{--c-ty:calc(-8px*var(--card-k)); box-shadow:0 1px 1px rgba(16,40,50,.05), 0 calc(6px*var(--card-k)) calc(8px*var(--card-k)) rgba(16,40,50,.07), 0 calc(16px*var(--card-k)) calc(24px*var(--card-k)) rgba(16,40,50,.10), 0 calc(34px*var(--card-k)) calc(52px*var(--card-k)) rgba(16,40,50,.14)} html[data-card="ridicat"] .card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; opacity:0;transition:opacity .3s;z-index:2; background:radial-gradient(circle at var(--c-gx,50%) var(--c-gy,0%),rgba(255,255,255,.5),rgba(255,255,255,0) 55%)} html[data-card="ridicat"] .card:hover::after{opacity:calc(.9*var(--card-k))} /* ─────────── B · Cu muchii ─────────── Placa cu grosime: fata din dreapta (::before) si cea de jos (::after). */ html[data-card="muchii"]{--card-dd:calc(2px + 20px*var(--card-k))} html[data-card="muchii"] .cards{gap:calc(12px + var(--card-dd)); padding-right:var(--card-dd); padding-bottom:calc(var(--card-dd) + 4px)} html[data-card="muchii"] .card{--d:var(--card-dd); position:relative; overflow:visible; border-radius:3px; border:1px solid var(--e-line); transform:translate3d(var(--c-tx,0px),var(--c-ty,0px),0); transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; box-shadow:calc(var(--d) + 8px) calc(var(--d) + 12px) calc(6px + 16px*var(--card-k)) rgba(16,40,50,calc(.06 + .2*var(--card-k)))} html[data-card="muchii"] .card::before, html[data-card="muchii"] .card::after{content:"";position:absolute;pointer-events:none;transform-origin:0 0; transition:width .3s cubic-bezier(.2,.8,.2,1), height .3s cubic-bezier(.2,.8,.2,1)} html[data-card="muchii"] .card::before{top:-1px;left:calc(100% + 1px);width:var(--d);height:calc(100% + 2px); background:linear-gradient(180deg,var(--e-r),var(--e-b));transform:skewY(45deg); box-shadow:inset 1px 0 0 rgba(255,255,255,.35)} html[data-card="muchii"] .card::after{left:-1px;top:calc(100% + 1px);height:var(--d);width:calc(100% + 2px); background:var(--e-b);transform:skewX(45deg);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)} html[data-card="muchii"][data-card-edge="aluminiu"] .card::before{ background:repeating-linear-gradient(0deg,rgba(255,255,255,.22) 0 1px,rgba(255,255,255,0) 1px 3px), linear-gradient(180deg,#eef1f5,#b2bcc8 60%,#a3aebb)} html[data-card="muchii"][data-card-edge="aluminiu"] .card::after{ background:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,rgba(255,255,255,0) 1px 3px), linear-gradient(90deg,#aeb8c4,#8c97a5)} html[data-card="muchii"] .card-media{border-radius:2px 2px 0 0} html[data-card="muchii"] .card:hover{--d:calc(var(--card-dd) + 5px);--c-tx:-5px;--c-ty:-5px} html[data-card="muchii"] .card:active{--d:calc(var(--card-dd)*.2);--c-tx:calc(var(--card-dd)*.8);--c-ty:calc(var(--card-dd)*.8);transition-duration:.09s} html[data-card="muchii"] .card:active::before, html[data-card="muchii"] .card:active::after{transition-duration:.09s} /* ─────────── C · In straturi ─────────── La inclinare, poza si titlul ies din card la adancimi diferite. Fara overflow:hidden pe drum: ar turti tot 3D-ul. */ html[data-card="straturi"] .cards{perspective:1100px} html[data-card="straturi"] .card{ position:relative; overflow:visible; transform-style:preserve-3d; border-radius:14px; transform:translate3d(var(--c-tx,0px),var(--c-ty,0px),0) rotateX(var(--c-rx,0deg)) rotateY(var(--c-ry,0deg)); transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; box-shadow:0 calc(10px*var(--card-k)) calc(30px*var(--card-k)) rgba(16,40,50,.13), 0 1px 2px rgba(16,40,50,.06)} html[data-card="straturi"] .card:hover{--c-ty:calc(-6px*var(--card-k))} html[data-card="straturi"] .card-media, html[data-card="straturi"] .card-body{transform-style:preserve-3d;overflow:visible} html[data-card="straturi"] .card-media{border-radius:14px 14px 0 0} html[data-card="straturi"] .card-media img{transform:translateZ(calc(60px*var(--card-k)));transition:transform .35s} html[data-card="straturi"] .card-body h3{transform:translateZ(calc(36px*var(--card-k)))} html[data-card="ridicat"] .card.pb-tilt, html[data-card="straturi"] .card.pb-tilt{transition:transform .08s linear, box-shadow .35s ease} /* ─────────── Finisaj lucios ─────────── */ html[data-card-finish="lucios"] .card-media{position:relative;overflow:hidden} html[data-card-finish="lucios"] .card-media::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1; background:linear-gradient(115deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.65) 48%,rgba(255,255,255,0) 62%); background-size:260% 100%; background-position:120% 0; transition:background-position .7s ease} html[data-card-finish="lucios"] .card:hover .card-media::after{background-position:-20% 0} /* ─────────── Titlurile de sectiune ─────────── */ html[data-heading="gravat"] .section-title{ color:color-mix(in srgb, var(--text,#13201f) 88%, #000); text-shadow:0 1px 0 rgba(255,255,255,.95), 0 -1px 0 rgba(15,23,42,.22)} html[data-heading="extrudat"]{--t-s:calc(.3px + .6px*var(--card-k)); --t-c:var(--primary-dark,#035a70); --t-c2:color-mix(in srgb, var(--primary-dark,#035a70) 62%, #000)} html[data-heading="extrudat"] .section-title{ color:var(--primary,#04708c); font-weight:800; text-shadow:calc(var(--t-s)*1) calc(var(--t-s)*1) 0 var(--t-c), calc(var(--t-s)*2) calc(var(--t-s)*2) 0 var(--t-c), calc(var(--t-s)*3) calc(var(--t-s)*3) 0 var(--t-c), calc(var(--t-s)*4) calc(var(--t-s)*4) 0 var(--t-c2), calc(var(--t-s)*5) calc(var(--t-s)*6) calc(var(--t-s)*6) rgba(4,50,60,.18)} /* ─────────── Asezarea pe masa ─────────── */ @keyframes pbAseaza{ from{transform:translate3d(0,-60px,0) rotateX(35deg);opacity:0} 70% {transform:translate3d(0,4px,0) rotateX(-3deg);opacity:1} to {transform:translate3d(0,0,0) rotateX(0)}} .cards.pb-aseaza{perspective:1100px} .cards.pb-aseaza > .card{animation:pbAseaza .6s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--pb-i,0) * 85ms)} @media (prefers-reduced-motion:reduce){ .cards.pb-aseaza > .card{animation:none} html[data-card] .card, html[data-card] .card::before, html[data-card] .card::after, html[data-card-finish="lucios"] .card-media::after{transition:none} }