Remove card animations and simplify button styling in index.html
- Remove all card tilt/transform animations and transitions - Eliminate background color changes on card hover - Simplify buttons to clean underlined links without complex effects - Remove span wrappers and oversized padding from buttons - Disable icon wrapper animations and pseudo-element effects - Set transition: none and transform: none for static card behavior 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
30
index.html
30
index.html
@@ -100,12 +100,12 @@
|
|||||||
flexibil si capabil sa raspunda necesitatilor de dezvoltare.
|
flexibil si capabil sa raspunda necesitatilor de dezvoltare.
|
||||||
</p>
|
</p>
|
||||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
<a href="roa/aplicatii-erp.html" class="professional-btn-primary px-8 py-4 text-lg">
|
<a href="roa/aplicatii-erp.html" class="professional-btn-primary">
|
||||||
<span>Descopera ROA</span>
|
Descopera ROA
|
||||||
|
</a>
|
||||||
|
<a href="#" class="professional-btn-secondary">
|
||||||
|
Vezi Demo
|
||||||
</a>
|
</a>
|
||||||
<button class="professional-btn-secondary px-8 py-4 text-lg">
|
|
||||||
<span>Vezi Demo</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -144,8 +144,8 @@
|
|||||||
<img src="roa/images/roaauto3.jpg" alt="ROA Auto" class="rounded-lg shadow-lg max-w-full h-auto">
|
<img src="roa/images/roaauto3.jpg" alt="ROA Auto" class="rounded-lg shadow-lg max-w-full h-auto">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a href="roa/roa-service-auto.html" class="professional-btn-urgent px-8 py-4 text-lg w-full inline-block text-center">
|
<a href="roa/roa-service-auto.html" class="professional-btn-urgent">
|
||||||
<span>Eficientizeaza activitatea service-ului!</span>
|
Eficientizeaza activitatea service-ului!
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -155,8 +155,8 @@
|
|||||||
<p class="professional-text-secondary mb-6 leading-relaxed">
|
<p class="professional-text-secondary mb-6 leading-relaxed">
|
||||||
Sistem specializat pentru calculul devizelor de lucrări, managementul proiectelor și estimarea costurilor de construcții.
|
Sistem specializat pentru calculul devizelor de lucrări, managementul proiectelor și estimarea costurilor de construcții.
|
||||||
</p>
|
</p>
|
||||||
<a href="roa/roa-proiecte-devize.html" class="professional-btn-secondary px-6 py-3 w-full inline-block">
|
<a href="roa/roa-proiecte-devize.html" class="professional-btn-secondary">
|
||||||
<span>Afla mai mult</span>
|
Afla mai mult
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -168,20 +168,20 @@
|
|||||||
<div class="grid sm:grid-cols-3 gap-6">
|
<div class="grid sm:grid-cols-3 gap-6">
|
||||||
<div class="professional-support-card">
|
<div class="professional-support-card">
|
||||||
<h3 class="font-semibold mb-3 professional-text-primary">Descarca Romfast Suport</h3>
|
<h3 class="font-semibold mb-3 professional-text-primary">Descarca Romfast Suport</h3>
|
||||||
<a href="romfastsuport/files/romfast_suport.exe" class="professional-btn-secondary px-6 py-2 w-full inline-block">
|
<a href="romfastsuport/files/romfast_suport.exe" class="professional-btn-secondary">
|
||||||
<span>Descarca</span>
|
Descarca
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="professional-support-card">
|
<div class="professional-support-card">
|
||||||
<h3 class="font-semibold mb-3 professional-text-primary">Ammyy Admin</h3>
|
<h3 class="font-semibold mb-3 professional-text-primary">Ammyy Admin</h3>
|
||||||
<a href="http://www.ammyy.com/en/" target="_blank" class="professional-btn-secondary px-6 py-2 w-full inline-block">
|
<a href="http://www.ammyy.com/en/" target="_blank" class="professional-btn-secondary">
|
||||||
<span>Acceseaza</span>
|
Acceseaza
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="professional-support-card">
|
<div class="professional-support-card">
|
||||||
<h3 class="font-semibold mb-3 professional-text-primary">TeamViewer</h3>
|
<h3 class="font-semibold mb-3 professional-text-primary">TeamViewer</h3>
|
||||||
<a href="https://www.teamviewer.com/en/" target="_blank" class="professional-btn-secondary px-6 py-2 w-full inline-block">
|
<a href="https://www.teamviewer.com/en/" target="_blank" class="professional-btn-secondary">
|
||||||
<span>Acceseaza</span>
|
Acceseaza
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -77,34 +77,14 @@ body {
|
|||||||
border: 1px solid var(--border) !important;
|
border: 1px solid var(--border) !important;
|
||||||
border-radius: var(--radius) !important;
|
border-radius: var(--radius) !important;
|
||||||
box-shadow: var(--shadow) !important;
|
box-shadow: var(--shadow) !important;
|
||||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
||||||
position: relative !important;
|
position: relative !important;
|
||||||
overflow: hidden !important;
|
transition: none !important;
|
||||||
}
|
transform: none !important;
|
||||||
|
|
||||||
.professional-card::before {
|
|
||||||
content: '' !important;
|
|
||||||
position: absolute !important;
|
|
||||||
top: -1px !important;
|
|
||||||
left: -1px !important;
|
|
||||||
right: -1px !important;
|
|
||||||
bottom: -1px !important;
|
|
||||||
background: var(--button-gradient) !important;
|
|
||||||
border-radius: var(--radius) !important;
|
|
||||||
z-index: -1 !important;
|
|
||||||
opacity: 0 !important;
|
|
||||||
transition: opacity 0.3s ease !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.professional-card:hover {
|
.professional-card:hover {
|
||||||
background: var(--card-hover) !important;
|
transition: none !important;
|
||||||
box-shadow: var(--shadow-lg) !important;
|
transform: none !important;
|
||||||
transform: translateY(-4px) !important;
|
|
||||||
border-color: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.professional-card:hover::before {
|
|
||||||
opacity: 1 !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Soft professional blue buttons */
|
/* Soft professional blue buttons */
|
||||||
@@ -113,74 +93,29 @@ body {
|
|||||||
color: var(--primary-foreground) !important;
|
color: var(--primary-foreground) !important;
|
||||||
border-radius: var(--radius-lg) !important;
|
border-radius: var(--radius-lg) !important;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
box-shadow: var(--shadow-sm) !important;
|
|
||||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
||||||
position: relative !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
font-weight: 600 !important;
|
font-weight: 600 !important;
|
||||||
}
|
text-decoration: none !important;
|
||||||
|
display: inline-block !important;
|
||||||
.professional-btn-primary::before {
|
padding: 12px 24px !important;
|
||||||
content: '' !important;
|
|
||||||
position: absolute !important;
|
|
||||||
top: 0 !important;
|
|
||||||
left: -100% !important;
|
|
||||||
width: 100% !important;
|
|
||||||
height: 100% !important;
|
|
||||||
background: var(--red-gradient) !important;
|
|
||||||
transition: left 0.3s ease !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.professional-btn-primary:hover::before {
|
|
||||||
left: 0 !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.professional-btn-primary:hover {
|
.professional-btn-primary:hover {
|
||||||
box-shadow: var(--shadow-md) !important;
|
opacity: 0.9 !important;
|
||||||
transform: translateY(-1px) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.professional-btn-primary span {
|
|
||||||
position: relative !important;
|
|
||||||
z-index: 1 !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.professional-btn-secondary {
|
.professional-btn-secondary {
|
||||||
background: var(--card) !important;
|
background: transparent !important;
|
||||||
color: var(--primary) !important;
|
color: var(--primary) !important;
|
||||||
border: 2px solid var(--primary) !important;
|
border: none !important;
|
||||||
border-radius: var(--radius-lg) !important;
|
border-radius: var(--radius-lg) !important;
|
||||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
||||||
font-weight: 500 !important;
|
font-weight: 500 !important;
|
||||||
position: relative !important;
|
text-decoration: underline !important;
|
||||||
overflow: hidden !important;
|
display: inline-block !important;
|
||||||
}
|
padding: 12px 24px !important;
|
||||||
|
|
||||||
.professional-btn-secondary::before {
|
|
||||||
content: '' !important;
|
|
||||||
position: absolute !important;
|
|
||||||
top: 0 !important;
|
|
||||||
left: 0 !important;
|
|
||||||
width: 0 !important;
|
|
||||||
height: 100% !important;
|
|
||||||
background: var(--primary) !important;
|
|
||||||
transition: width 0.3s ease !important;
|
|
||||||
z-index: 0 !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.professional-btn-secondary:hover {
|
.professional-btn-secondary:hover {
|
||||||
color: var(--primary-foreground) !important;
|
color: var(--secondary) !important;
|
||||||
border-color: var(--primary) !important;
|
|
||||||
transform: translateY(-1px) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.professional-btn-secondary:hover::before {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.professional-btn-secondary span {
|
|
||||||
position: relative !important;
|
|
||||||
z-index: 1 !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Muted red accent button for urgent actions */
|
/* Muted red accent button for urgent actions */
|
||||||
@@ -189,15 +124,14 @@ body {
|
|||||||
color: var(--accent-foreground) !important;
|
color: var(--accent-foreground) !important;
|
||||||
border-radius: var(--radius-lg) !important;
|
border-radius: var(--radius-lg) !important;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
box-shadow: var(--shadow-sm) !important;
|
|
||||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
||||||
font-weight: 600 !important;
|
font-weight: 600 !important;
|
||||||
|
text-decoration: none !important;
|
||||||
|
display: inline-block !important;
|
||||||
|
padding: 12px 24px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.professional-btn-urgent:hover {
|
.professional-btn-urgent:hover {
|
||||||
box-shadow: var(--shadow-md) !important;
|
opacity: 0.9 !important;
|
||||||
transform: translateY(-1px) !important;
|
|
||||||
filter: brightness(1.05) !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Professional navbar with soft gradient */
|
/* Professional navbar with soft gradient */
|
||||||
@@ -254,26 +188,6 @@ body {
|
|||||||
align-items: center !important;
|
align-items: center !important;
|
||||||
justify-content: center !important;
|
justify-content: center !important;
|
||||||
margin: 0 auto 1.5rem auto !important;
|
margin: 0 auto 1.5rem auto !important;
|
||||||
box-shadow: var(--shadow-md) !important;
|
|
||||||
transition: all 0.3s ease !important;
|
|
||||||
position: relative !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.professional-icon-wrapper::before {
|
|
||||||
content: '' !important;
|
|
||||||
position: absolute !important;
|
|
||||||
top: -50% !important;
|
|
||||||
left: -50% !important;
|
|
||||||
width: 200% !important;
|
|
||||||
height: 200% !important;
|
|
||||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 30%, transparent 70%) !important;
|
|
||||||
opacity: 0 !important;
|
|
||||||
transition: opacity 0.3s ease !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.professional-card:hover .professional-icon-wrapper::before {
|
|
||||||
opacity: 1 !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Logo styling */
|
/* Logo styling */
|
||||||
@@ -303,6 +217,13 @@ h1, h2, h3 {
|
|||||||
background: var(--card) !important;
|
background: var(--card) !important;
|
||||||
border: 2px solid var(--accent) !important;
|
border: 2px solid var(--accent) !important;
|
||||||
box-shadow: var(--shadow-xl) !important;
|
box-shadow: var(--shadow-xl) !important;
|
||||||
|
transition: none !important;
|
||||||
|
transform: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.professional-card-featured:hover {
|
||||||
|
transition: none !important;
|
||||||
|
transform: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.professional-card-featured .professional-icon-wrapper {
|
.professional-card-featured .professional-icon-wrapper {
|
||||||
@@ -319,13 +240,10 @@ h1, h2, h3 {
|
|||||||
background: var(--card) !important;
|
background: var(--card) !important;
|
||||||
border: 1px solid var(--border) !important;
|
border: 1px solid var(--border) !important;
|
||||||
border-radius: var(--radius) !important;
|
border-radius: var(--radius) !important;
|
||||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
||||||
padding: 2rem !important;
|
padding: 2rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.professional-support-card:hover {
|
.professional-support-card:hover {
|
||||||
box-shadow: var(--shadow-lg) !important;
|
|
||||||
transform: translateY(-2px) !important;
|
|
||||||
border-color: var(--primary) !important;
|
border-color: var(--primary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user