diff --git a/css/style.css b/css/style.css index 2844ea1..258e1ef 100644 --- a/css/style.css +++ b/css/style.css @@ -8,34 +8,47 @@ --light-gold: #ffc24a; --bg-dark: #0f172a; /* Fondo muy oscuro para contraste */ --gray: #acb3bf; + + /* Paleta de el tiempo */ + --color-primario: #F5F5F5; + --color-hover: #1E3A5F; + --color-secundario: #A1A1A1; + --color-fondo: #0D0D0D; + --color-texto: #E5E5E5; + --blanco-puro: #FFFFFF; + --sombra: rgba(47, 58, 86, 0.15); + --color-tarjeta: #1A1A1A; + --color-acento: #5FAEDB; + --color-borde: rgba(95, 174, 219, 0.3); + --color-cabecera: rgba(0,0,0,0.80); } body { font-family: Roboto, 'Inter', sans-serif; - background-color: var(--bg-dark); - color: white; + background-color: var(--color-fondo); + color: var(--color-texto); } /* Navbar */ .navbar { - background-color: rgba(26, 54, 104, 0.95); /* var(--dark-blue) con opacidad */ - border-bottom: 2px solid var(--primary-blue); + background-color: var(--color-cabecera); /* var(--color-cabecera) con opacidad */ + border-bottom: 2px solid var(--color-borde); } .navbar-brand { font-weight: bold; - color: var(--light-blue) !important; + color: var(--color-acento) !important; } .nav-link { - color: white !important; + color: var(--color-texto) !important; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; } .nav-link:hover { - color: var(--light-gold) !important; + color: var(--color-acento) !important; } /* Hero Section */ @@ -44,20 +57,20 @@ body { } .highlight { - color: var(--accent-orange); + color: var(--color-acento); text-decoration: underline; font-style: italic; } .celeste { - color: var(--light-blue); + color: var(--color-acento); text-decoration: underline; font-style: italic; } .btn-custom { - background-color: var(--primary-blue); - color: white; + background-color: var(--color-fondo); + color: var(--color-texto); border-radius: 50px; padding: 12px 35px; font-weight: bold; @@ -66,39 +79,39 @@ body { } .btn-custom:hover { - background-color: var(--accent-orange); - color: white; + background-color: var(--color-acento); + color: var(--blanco-puro); transform: translateY(-3px); } /* Cards de Proyectos */ .section-title { - border-left: 5px solid var(--accent-orange); + border-left: 5px solid var(--color-acento); padding-left: 15px; } .project-card { - background-color: var(--dark-blue); - border: 1px solid var(--medium-blue); + background-color: var(--color-tarjeta); + border: 1px solid var(--color-borde); border-radius: 1.5rem; transition: 0.3s; overflow: hidden; } .project-card:hover { - border-color: var(--light-gold); + border-color: var(--color-hover); transform: translateY(-10px); } .card-img-placeholder { height: 180px; - background-color: #1e293b; + background-color: var(--color-borde); text-align: center; line-height: 180px; } .card-title { - color: var(--accent-orange); + color: var(--color-acento); background-color: rgba(26, 54, 104, 0.5); width: 100%; padding: 5px 10px; @@ -106,7 +119,7 @@ body { } .card-text { - color: white !important; + color: var(--color-texto) !important; } .card-tecnologia { @@ -116,23 +129,23 @@ body { } .btn-link { - color: var(--light-blue); + color: var(--color-acento); text-decoration: none; font-style: italic; font-weight: 600; } .btn-link:hover { - color: var(--light-gold); + color: var(--color-texto); } .border-dashed { - border: 2px dashed var(--medium-blue) !important; + border: 2px dashed var(--color-borde) !important; background: transparent; } /* Footer */ footer { - border-top: 1px solid var(--medium-blue); - color: var(--light-blue); + border-top: 1px solid var(--color-borde); + color: var(--color-acento); } \ No newline at end of file