tatiana
/
tatvilweb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css

This commit is contained in:
Tatiana Villa 2026-02-10 17:52:47 +01:00
parent f01d0e5fc5
commit 06346f2feb
1 changed files with 38 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
css/style.css
View File

@ -8,34 +8,47 @@
--light-gold: #ffc24a; --light-gold: #ffc24a;
--bg-dark: #0f172a; /* Fondo muy oscuro para contraste */ --bg-dark: #0f172a; /* Fondo muy oscuro para contraste */
--gray: #acb3bf; --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 { body {
font-family: Roboto, 'Inter', sans-serif; font-family: Roboto, 'Inter', sans-serif;
background-color: var(--bg-dark); background-color: var(--color-fondo);
color: white; color: var(--color-texto);
} }
/* Navbar */ /* Navbar */
.navbar { .navbar {
background-color: rgba(26, 54, 104, 0.95); /* var(--dark-blue) con opacidad */ background-color: var(--color-cabecera); /* var(--color-cabecera) con opacidad */
border-bottom: 2px solid var(--primary-blue); border-bottom: 2px solid var(--color-borde);
} }
.navbar-brand { .navbar-brand {
font-weight: bold; font-weight: bold;
color: var(--light-blue) !important; color: var(--color-acento) !important;
} }
.nav-link { .nav-link {
color: white !important; color: var(--color-texto) !important;
font-size: 0.8rem; font-size: 0.8rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
} }
.nav-link:hover { .nav-link:hover {
color: var(--light-gold) !important; color: var(--color-acento) !important;
} }
/* Hero Section */ /* Hero Section */
@ -44,20 +57,20 @@ body {
} }
.highlight { .highlight {
color: var(--accent-orange); color: var(--color-acento);
text-decoration: underline; text-decoration: underline;
font-style: italic; font-style: italic;
} }
.celeste { .celeste {
color: var(--light-blue); color: var(--color-acento);
text-decoration: underline; text-decoration: underline;
font-style: italic; font-style: italic;
} }
.btn-custom { .btn-custom {
background-color: var(--primary-blue); background-color: var(--color-fondo);
color: white; color: var(--color-texto);
border-radius: 50px; border-radius: 50px;
padding: 12px 35px; padding: 12px 35px;
font-weight: bold; font-weight: bold;
@ -66,39 +79,39 @@ body {
} }
.btn-custom:hover { .btn-custom:hover {
background-color: var(--accent-orange); background-color: var(--color-acento);
color: white; color: var(--blanco-puro);
transform: translateY(-3px); transform: translateY(-3px);
} }
/* Cards de Proyectos */ /* Cards de Proyectos */
.section-title { .section-title {
border-left: 5px solid var(--accent-orange); border-left: 5px solid var(--color-acento);
padding-left: 15px; padding-left: 15px;
} }
.project-card { .project-card {
background-color: var(--dark-blue); background-color: var(--color-tarjeta);
border: 1px solid var(--medium-blue); border: 1px solid var(--color-borde);
border-radius: 1.5rem; border-radius: 1.5rem;
transition: 0.3s; transition: 0.3s;
overflow: hidden; overflow: hidden;
} }
.project-card:hover { .project-card:hover {
border-color: var(--light-gold); border-color: var(--color-hover);
transform: translateY(-10px); transform: translateY(-10px);
} }
.card-img-placeholder { .card-img-placeholder {
height: 180px; height: 180px;
background-color: #1e293b; background-color: var(--color-borde);
text-align: center; text-align: center;
line-height: 180px; line-height: 180px;
} }
.card-title { .card-title {
color: var(--accent-orange); color: var(--color-acento);
background-color: rgba(26, 54, 104, 0.5); background-color: rgba(26, 54, 104, 0.5);
width: 100%; width: 100%;
padding: 5px 10px; padding: 5px 10px;
@ -106,7 +119,7 @@ body {
} }
.card-text { .card-text {
color: white !important; color: var(--color-texto) !important;
} }
.card-tecnologia { .card-tecnologia {
@ -116,23 +129,23 @@ body {
} }
.btn-link { .btn-link {
color: var(--light-blue); color: var(--color-acento);
text-decoration: none; text-decoration: none;
font-style: italic; font-style: italic;
font-weight: 600; font-weight: 600;
} }
.btn-link:hover { .btn-link:hover {
color: var(--light-gold); color: var(--color-texto);
} }
.border-dashed { .border-dashed {
border: 2px dashed var(--medium-blue) !important; border: 2px dashed var(--color-borde) !important;
background: transparent; background: transparent;
} }
/* Footer */ /* Footer */
footer { footer {
border-top: 1px solid var(--medium-blue); border-top: 1px solid var(--color-borde);
color: var(--light-blue); color: var(--color-acento);
} }