* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #000;
min-height: 100vh;
position: relative;
overflow-x: hidden;
}
/* Canvas Matrix Background com Glow */
#matrixCanvas {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 0;
opacity: 0.7;
filter: blur(0.5px) drop-shadow(0 0 10px #0F0) drop-shadow(0 0 20px #0F0) drop-shadow(0 0 30px #0F0);
}
/* Overlay mais suave */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.4);
z-index: 1;
}
/* Header */
.header {
position: relative;
z-index: 10;
background: rgba(30, 30, 30, 0.95);
padding: 20px 50px;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 2px solid #4CAF50;
box-shadow: 0 0 30px rgba(76, 175, 80, 0.5);
}
/* Portfolio Back Link */
.portfolio-link {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(0, 0, 0, 0.8);
color: #4CAF50;
border: 2px solid #4CAF50;
border-radius: 8px;
padding: 8px 14px;
text-decoration: none;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.03em;
white-space: nowrap;
transition: all 0.2s ease;
box-shadow: 0 0 10px rgba(76, 175, 80, 0.2);
z-index: 10;
}
.portfolio-link:hover {
background: rgba(76, 175, 80, 0.15);
box-shadow: 0 0 18px rgba(76, 175, 80, 0.5);
transform: translateY(-50%) translateX(-2px);
color: #6fcf72;
border-color: #6fcf72;
}
.portfolio-link-icon {
font-size: 1rem;
line-height: 1;
}
@media (max-width: 520px) {
.portfolio-link { padding: 6px 9px; font-size: 0; gap: 0; }
.portfolio-link-icon { font-size: 1.1rem; }
.portfolio-link-text { display: none; }
}
/* Language Toggle Button - Modificado para Dropdown */
.lang-toggle {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.8);
color: #fff;
border: 2px solid #4CAF50;
padding: 8px 16px;
border-radius: 20px;
cursor: pointer;
font-weight: bold;
font-size: 14px;
transition: all 0.3s;
box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
display: flex;
align-items: center;
gap: 8px;
}
.lang-toggle:hover {
background: #4CAF50;
box-shadow: 0 0 25px rgba(76, 175, 80, 0.8), 0 0 40px rgba(76, 175, 80, 0.5);
}
.lang-toggle .flag {
font-size: 16px;
}
/* Dropdown Menu de Idiomas */
.lang-dropdown {
position: absolute;
top: 100%;
right: 0;
background: rgba(20, 20, 20, 0.98);
border: 2px solid #4CAF50;
border-radius: 10px;
padding: 10px 0;
min-width: 180px;
display: none;
flex-direction: column;
box-shadow: 0 0 30px rgba(76, 175, 80, 0.6), 0 0 50px rgba(76, 175, 80, 0.3);
z-index: 100;
margin-top: 10px;
}
.lang-dropdown.show {
display: flex;
animation: slideDown 0.3s ease;
}
.lang-option {
padding: 10px 20px;
color: #fff;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
}
.lang-option:hover {
background: #4CAF50;
color: #000;
}
.lang-option .flag {
font-size: 16px;
}
/* Main Container */
.container {
position: relative;
z-index: 10;
max-width: 900px;
margin: 50px auto 20px;
padding: 40px;
border-radius: 20px;
}
.title {
color: #fff;
font-size: 42px;
text-align: center;
margin-bottom: 15px;
text-shadow: 0 0 20px rgba(76, 175, 80, 0.8), 0 0 40px rgba(76, 175, 80, 0.5), 0 0 60px rgba(76, 175, 80, 0.3);
}
.subtitle {
color: #aaa;
text-align: center;
font-size: 18px;
margin-bottom: 40px;
text-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}
/* Password Strength Indicator */
.strength-indicator {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-bottom: 30px;
padding: 15px;
background: rgba(0, 0, 0, 0.6);
border-radius: 10px;
border: 1px solid #4CAF50;
box-shadow: 0 0 20px rgba(76, 175, 80, 0.4);
}
.strength-bar {
width: 200px;
height: 8px;
background: #333;
border-radius: 4px;
overflow: hidden;
position: relative;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
}
.strength-fill {
height: 100%;
width: 0%;
transition: all 0.3s;
border-radius: 4px;
}
.strength-fill.weak { width: 25%; background: #f44336; box-shadow: 0 0 15px #f44336; }
.strength-fill.fair { width: 50%; background: #ff9800; box-shadow: 0 0 15px #ff9800; }
.strength-fill.good { width: 75%; background: #ffeb3b; box-shadow: 0 0 15px #ffeb3b; }
.strength-fill.strong { width: 100%; background: #4CAF50; box-shadow: 0 0 20px #4CAF50, 0 0 30px #4CAF50; }
.strength-text {
color: #fff;
font-weight: bold;
min-width: 80px;
text-shadow: 0 0 10px currentColor;
}
.strength-text.weak { color: #f44336; }
.strength-text.fair { color: #ff9800; }
.strength-text.good { color: #ffeb3b; }
.strength-text.strong { color: #4CAF50; }
/* Password Display */
.password-container {
position: relative;
margin-bottom: 30px;
}
.password-display {
background: #4CAF50;
color: white;
padding: 25px;
border-radius: 10px;
font-size: 28px;
font-family: 'Courier New', monospace;
text-align: center;
letter-spacing: 2px;
word-break: break-all;
box-shadow: 0 0 30px rgba(76, 175, 80, 0.8), 0 0 60px rgba(76, 175, 80, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.2);
min-height: 80px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s;
border: 2px solid rgba(76, 175, 80, 0.8);
}
.copy-btn {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.8);
color: white;
border: 2px solid #4CAF50;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s;
box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
}
.copy-btn:hover {
background: #4CAF50;
box-shadow: 0 0 25px rgba(76, 175, 80, 0.8), 0 0 40px rgba(76, 175, 80, 0.5);
}
.refresh-btn {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.8);
color: white;
border: 2px solid #4CAF50;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
font-size: 20px;
transition: all 0.3s;
box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
}
.refresh-btn:hover {
background: #4CAF50;
transform: translateY(-50%) rotate(180deg);
box-shadow: 0 0 25px rgba(76, 175, 80, 0.8), 0 0 40px rgba(76, 175, 80, 0.5);
}
/* Length Slider */
.length-control {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-bottom: 30px;
}
.length-input {
background: #333;
color: white;
border: 2px solid #4CAF50;
padding: 10px;
border-radius: 5px;
font-size: 18px;
width: 80px;
text-align: center;
box-shadow: 0 0 15px rgba(76, 175, 80, 0.4);
}
.length-slider {
width: 300px;
-webkit-appearance: none;
appearance: none;
height: 8px;
background: #333;
border-radius: 5px;
outline: none;
border: 1px solid #4CAF50;
box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}
.length-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #4CAF50;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 0 20px rgba(76, 175, 80, 0.8), 0 0 30px rgba(76, 175, 80, 0.5);
}
.length-slider::-webkit-slider-thumb:hover {
transform: scale(1.2);
box-shadow: 0 0 30px rgba(76, 175, 80, 1), 0 0 50px rgba(76, 175, 80, 0.7);
}
/* Options */
.options-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
margin-bottom: 20px;
}
.option-checkbox {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.1);
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
border: 2px solid transparent;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.option-checkbox:hover {
background: rgba(76, 175, 80, 0.3);
border-color: #4CAF50;
box-shadow: 0 0 20px rgba(76, 175, 80, 0.6), 0 0 40px rgba(76, 175, 80, 0.3);
}
.option-checkbox input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: #4CAF50;
}
.option-checkbox label {
color: #fff;
cursor: pointer;
font-weight: 500;
text-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}
/* Advanced Settings */
.advanced-toggle {
text-align: center;
margin: 20px 0;
}
.advanced-btn {
background: transparent;
color: #4CAF50;
border: 2px solid #4CAF50;
padding: 10px 30px;
border-radius: 25px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s;
box-shadow: 0 0 15px rgba(76, 175, 80, 0.4);
}
.advanced-btn:hover {
background: #4CAF50;
color: white;
box-shadow: 0 0 25px rgba(76, 175, 80, 0.8), 0 0 40px rgba(76, 175, 80, 0.5);
}
.advanced-settings {
display: none;
margin-top: 20px;
padding: 20px;
background: rgba(0, 0, 0, 0.7);
border-radius: 10px;
border: 1px solid #4CAF50;
animation: slideDown 0.3s ease;
box-shadow: 0 0 30px rgba(76, 175, 80, 0.4);
}
.advanced-settings.show {
display: block;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.advanced-option {
display: flex;
align-items: center;
gap: 10px;
margin: 10px 0;
color: #fff;
}
.advanced-option input[type="checkbox"] {
width: 20px;
height: 20px;
accent-color: #4CAF50;
}
/* Generate Button */
.generate-btn {
width: 100%;
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
color: white;
border: none;
padding: 20px;
font-size: 22px;
font-weight: bold;
border-radius: 10px;
cursor: pointer;
margin-top: 30px;
transition: all 0.3s;
text-transform: uppercase;
letter-spacing: 2px;
box-shadow: 0 0 30px rgba(76, 175, 80, 0.8), 0 0 60px rgba(76, 175, 80, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.2);
}
.generate-btn:hover {
transform: translateY(-3px);
box-shadow: 0 0 40px rgba(76, 175, 80, 1), 0 0 80px rgba(76, 175, 80, 0.6), inset 0 0 30px rgba(255, 255, 255, 0.3);
}
.generate-btn:active {
transform: translateY(-1px);
}
/* Security Badge */
.security-badge {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 30px 0;
color: #4CAF50;
font-size: 18px;
font-weight: bold;
background: rgba(0, 0, 0, 0.6);
padding: 12px 25px;
border-radius: 25px;
border: 2px solid #4CAF50;
width: fit-content;
margin-left: auto;
margin-right: auto;
box-shadow: 0 0 25px rgba(76, 175, 80, 0.6), 0 0 50px rgba(76, 175, 80, 0.3);
}
.shield-icon {
width: 30px;
height: 30px;
background: #4CAF50;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
box-shadow: 0 0 20px rgba(76, 175, 80, 0.8), 0 0 40px rgba(76, 175, 80, 0.5);
}
/* Scroll Indicator Arrow */
.scroll-indicator {
text-align: center;
margin: 20px 0 10px;
animation: bounce 2s infinite;
}
.scroll-arrow {
width: 40px;
height: 40px;
background: rgba(244, 67, 54, 0.9);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
box-shadow: 0 0 20px rgba(244, 67, 54, 0.8), 0 0 40px rgba(244, 67, 54, 0.4);
border: 2px solid rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: all 0.3s;
}
.scroll-arrow:hover {
transform: scale(1.1);
box-shadow: 0 0 30px rgba(244, 67, 54, 1), 0 0 50px rgba(244, 67, 54, 0.6);
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(10px);
}
60% {
transform: translateY(5px);
}
}
/* Footer */
.footer {
position: relative;
z-index: 10;
max-width: 1000px;
margin: 0 auto 40px;
padding: 30px 40px;
border-radius: 20px;
text-align: center;
}
.footer-text {
color: #fff;
font-size: 18px;
line-height: 1.8;
margin-bottom: 30px;
text-shadow: 0 0 15px rgba(76, 175, 80, 0.6);
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.donation-container {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
margin-top: 20px;
}
.donation-box {
background: rgba(0, 0, 0, 0.6);
padding: 30px;
border-radius: 15px;
border: 2px solid #4CAF50;
box-shadow: 0 0 30px rgba(76, 175, 80, 0.5), inset 0 0 20px rgba(76, 175, 80, 0.1);
min-width: 350px;
transition: all 0.3s;
}
.donation-box:hover {
box-shadow: 0 0 40px rgba(76, 175, 80, 0.8), 0 0 60px rgba(76, 175, 80, 0.4), inset 0 0 30px rgba(76, 175, 80, 0.2);
transform: translateY(-5px);
}
.donation-title {
color: #4CAF50;
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
text-shadow: 0 0 20px rgba(76, 175, 80, 0.8);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.donation-label {
color: #aaa;
font-size: 14px;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 2px;
}
.donation-key {
background: rgba(76, 175, 80, 0.2);
color: #fff;
padding: 15px;
border-radius: 8px;
font-family: 'Courier New', monospace;
font-size: 14px;
word-break: break-all;
border: 1px solid rgba(76, 175, 80, 0.5);
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
margin-bottom: 15px;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.copy-donation-btn {
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
color: white;
border: none;
padding: 12px 30px;
border-radius: 25px;
cursor: pointer;
font-weight: bold;
font-size: 14px;
transition: all 0.3s;
box-shadow: 0 0 20px rgba(76, 175, 80, 0.6);
text-transform: uppercase;
letter-spacing: 1px;
}
.copy-donation-btn:hover {
transform: translateY(-2px);
box-shadow: 0 0 30px rgba(76, 175, 80, 0.9), 0 0 50px rgba(76, 175, 80, 0.5);
}
.copy-donation-btn:active {
transform: translateY(0);
}
/* Social Buttons in Footer */
.social-buttons {
display: flex;
justify-content: center;
gap: 15px;
margin: 30px 0;
flex-wrap: wrap;
}
.social-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
text-decoration: none;
padding: 10px 20px;
border-radius: 25px;
border: 2px solid #4CAF50;
font-weight: 500;
font-size: 14px;
transition: all 0.3s;
box-shadow: 0 0 15px rgba(76, 175, 80, 0.4);
}
.social-btn.linkedin {
background: rgba(10, 102, 194, 0.3);
border-color: #0A66C2;
}
.social-btn.linkedin:hover {
background: #0A66C2;
box-shadow: 0 0 25px rgba(10, 102, 194, 0.8), 0 0 40px rgba(10, 102, 194, 0.4);
}
.social-btn.email {
background: rgba(219, 68, 55, 0.3);
border-color: #DB4437;
}
.social-btn.email:hover {
background: #DB4437;
box-shadow: 0 0 25px rgba(219, 68, 55, 0.8), 0 0 40px rgba(219, 68, 55, 0.4);
}
.social-btn .icon {
font-size: 18px;
}
.footer-bottom {
margin-top: 20px;
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
text-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}
/* Responsive */
@media (max-width: 768px) {
.header {
padding: 20px;
}
.lang-toggle {
right: 15px;
padding: 6px 12px;
font-size: 12px;
}
.container {
margin: 20px auto 10px;
padding: 20px;
}
.title {
font-size: 28px;
}
.password-display {
font-size: 20px;
}
.length-slider {
width: 200px;
}
.donation-container {
flex-direction: column;
align-items: center;
}
.donation-box {
min-width: 100%;
max-width: 400px;
}
.footer-text {
font-size: 16px;
}
.footer {
padding: 20px;
}
.social-buttons {
flex-direction: column;
align-items: center;
}
.social-btn {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
/* Floating Characters Animation com Glow */
.floating-char {
position: fixed;
color: rgba(76, 175, 80, 0.3);
font-size: 40px;
font-weight: bold;
pointer-events: none;
z-index: 5;
animation: float 10s infinite ease-in-out;
text-shadow: 0 0 20px rgba(76, 175, 80, 0.8), 0 0 40px rgba(76, 175, 80, 0.5), 0 0 60px rgba(76, 175, 80, 0.3);
}
@keyframes float {
0%, 100% {
transform: translateY(0) rotate(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100vh) rotate(360deg);
opacity: 0;
}
}