Oliver/paraguay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace emoji icons with Unsplash free images (Paraguay, Banking, Legal, Taxes, ERP)

Browse Source
This commit is contained in:
Kato
2026-09-05 12:37:51 +00:00
parent 51b9e88a9a
commit ef0d9aac55
2 changed files with 89 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+75 -1
View File
@@ -120,6 +120,79 @@ body {
::-webkit-scrollbar-thumb { background: #bdc3c7; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #95a5a6; }
/* ========================================
IMAGE STYLES
======================================== */
/* Hero background image */
.hero-image {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
object-fit: cover;
width: 100%;
height: 100%;
z-index: 0;
filter: brightness(0.45) saturate(1.1);
}
.hero-content { position: relative; z-index: 1; }
/* About card images */
.about-image {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: 8px 8px 0 0;
margin: -20px -20px 16px -20px;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
filter: saturate(0.85);
}
.about-card:hover .about-image {
transform: scale(1.03);
filter: saturate(1);
}
/* Banner image */
.banner-image {
width: 52px;
height: 52px;
border-radius: 12px;
object-fit: cover;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
animation: floatSlow 4s ease-in-out infinite;
}
/* Modal images */
.modal-image {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 16px;
display: block;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
/* Newsletter image */
.newsletter-image {
width: 80px;
height: 80px;
border-radius: 16px;
object-fit: cover;
margin: 0 auto 16px;
display: block;
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
/* Remove old icon float animation since we use images now */
.about-icon {
font-size: 2.5rem;
margin-bottom: 12px;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
display: inline-block;
}
/* Text selection */
::selection { background: rgba(24, 119, 242, 0.2); color: #1c1e21; }
@@ -286,7 +359,7 @@ body {
overflow: hidden;
}
/* Subtle mesh pattern overlay */
/* Subtle mesh pattern overlay — sits above image, below content */
.hero::before {
content: '';
position: absolute;
@@ -294,6 +367,7 @@ body {
background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.08) 0%, transparent 60%),
radial-gradient(ellipse at 70% 80%, rgba(255,255,255,0.05) 0%, transparent 50%);
pointer-events: none;
z-index: 1;
}
.hero-content { position: relative; z-index: 1; }