From ef0d9aac55eeb4ba74d181e793b9979da4df6a8b Mon Sep 17 00:00:00 2001 From: Kato Date: Sat, 5 Sep 2026 12:37:51 +0000 Subject: [PATCH] Replace emoji icons with Unsplash free images (Paraguay, Banking, Legal, Taxes, ERP) --- css/styles.css | 76 +++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 31 ++++++++++---------- 2 files changed, 89 insertions(+), 18 deletions(-) diff --git a/css/styles.css b/css/styles.css index bc550b6..f671a83 100644 --- a/css/styles.css +++ b/css/styles.css @@ -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; } diff --git a/index.html b/index.html index 81b2703..de2b216 100644 --- a/index.html +++ b/index.html @@ -69,7 +69,7 @@
-
-
-