/* ============================================
STRAHLKRAFT40+ ICON SYSTEM
Premium Lucide Icons - Dark Luxury Edition
============================================ */
/* BASE ICON STYLES */
.icon {
display: inline-block;
width: 1.2em;
height: 1.2em;
vertical-align: middle;
stroke: #D4AF37; /* Gold primary */
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
margin: 0 0.3em;
}
/* ICON VARIANTS BY CONTEXT */
.icon-science {
stroke: #D4AF37; /* Same gold - unified color */
stroke-width: 1.5;
}
.icon-brand {
stroke: #D4AF37; /* Same gold - unified color */
stroke-width: 1.5;
}
.icon-neutral {
stroke: #D4AF37; /* Same gold - unified color */
stroke-width: 1.5;
}
.icon-warning {
stroke: #D4AF37;
fill: rgba(212, 175, 55, 0.1); /* Subtle fill for warnings */
stroke-width: 1.5;
}
/* SIZE VARIANTS */
.icon-small {
width: 0.9em;
height: 0.9em;
}
.icon-medium {
width: 1.2em;
height: 1.2em;
}
.icon-large {
width: 1.6em;
height: 1.6em;
}
.icon-xlarge {
width: 2em;
height: 2em;
}
/* INLINE USAGE - for text integration */
.icon-inline {
display: inline;
vertical-align: -0.125em;
margin: 0 0.2em;
}
/* BLOCK USAGE - for standalone icons */
.icon-block {
display: block;
margin: 0 auto 1rem;
width: 2.5em;
height: 2.5em;
}
/* HOVER EFFECTS (optional) */
.icon-hover:hover {
stroke: #FFD700; /* Brighter gold on hover */
transition: stroke 0.2s ease;
}
/* ACCESSIBILITY */
.icon[aria-label] {
cursor: help;
}
/* USAGE IN HEADERS */
h1 .icon, h2 .icon, h3 .icon {
width: 0.8em;
height: 0.8em;
margin-right: 0.4em;
}
/* USAGE IN LISTS */
ul .icon, ol .icon {
margin-right: 0.5em;
}
/* MISSION BOX ICONS */
.mission-icon {
width: 1.5em;
height: 1.5em;
stroke: #D4AF37;
stroke-width: 1.8;
margin-right: 0.8em;
flex-shrink: 0;
}
/* RESPONSIVE SIZES */
@media screen and (max-width: 768px) {
.icon {
width: 1.1em;
height: 1.1em;
}
.icon-block {
width: 2em;
height: 2em;
}
}
/* PRINT STYLES */
@media print {
.icon {
stroke: #666666; /* Darker for better print visibility */
stroke-width: 2;
}
}
/* ============================================
SOCIAL MEDIA ICONS (Filled Style)
============================================ */
/* Base style for social media icons (filled, not stroke) */
.icon-social {
display: inline-block;
width: 1.5rem; /* 24px */
height: 1.5rem; /* 24px */
fill: #9CA3AF; /* Gray-400 */
transition: fill 0.3s ease, transform 0.3s ease;
}
.icon-social:hover {
fill: #D4AF37; /* Gold on hover */
transform: translateY(-2px); /* Subtle lift effect */
}
/* Specific social media icons */
.icon-facebook {
/* Facebook specific styles if needed */
}
.icon-instagram {
/* Instagram specific styles if needed */
}
.icon-linkedin {
/* For future use */
}
.icon-twitter {
/* For future use */
}
.icon-youtube {
/* For future use */
}
/* Responsive sizing for social icons */
@media screen and (max-width: 768px) {
.icon-social {
width: 1.25rem; /* 20px on mobile */
height: 1.25rem;
}
}
/* ============================================
SPECIFIC ICON CLASSES (optional shortcuts)
============================================ */
/* Most used icons can have dedicated classes */
.icon-target { /* 🎯 Mission/Objetivo */
/* Can add specific positioning or size here */
}
.icon-clock { /* ⏰ Time/Horario */
/* Can add specific styling here */
}
.icon-lightbulb { /* 💡 Insight */
/* Can add specific styling here */
}
.icon-microscope { /* 🔬 Science */
/* Can add specific styling here */
}
.icon-sparkles { /* ✨ Transformation */
/* Can add specific styling here */
}
/* ============================================
USAGE EXAMPLES:
STROKE ICONS (Lucide style):
============================
Basic inline:
With context variant:
With size variant:
Combined:
SOCIAL MEDIA ICONS (Filled style):
===================================
Facebook:
Instagram:
============================================ */