generated from Gallardo7761/miarma-template-full
Add: backend dir and moved frontend to frontend dir
This commit is contained in:
Jose
46
frontend/src/css/AnimatedDropdown.css
Normal file
46
frontend/src/css/AnimatedDropdown.css
Normal file
@@ -0,0 +1,46 @@
|
||||
.dropdown-menu .dropdown-divider {
|
||||
border-top: 1px solid var(--dirty-gold);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
background: #0f1114 !important;
|
||||
border: 1px solid var(--dirty-gold) !important;
|
||||
box-shadow: 0 0 20px rgba(0,0,0,0.9);
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
clip-path: polygon(
|
||||
10px 0, 100% 0,
|
||||
100% calc(100% - 10px),
|
||||
calc(100% - 10px) 100%,
|
||||
0 100%, 0 10px
|
||||
);
|
||||
}
|
||||
|
||||
.dropdown-menu.show {
|
||||
background: #000 !important;
|
||||
box-shadow: 0 0 25px rgba(138, 11, 11, 0.4);
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
background: transparent !important;
|
||||
color: var(--parchment) !important;
|
||||
font-family: 'Cinzel', serif;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
padding: 12px 20px;
|
||||
transition: 0.3s;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background-color: var(--blood-god) !important;
|
||||
color: #fff !important;
|
||||
text-shadow: 0 0 5px #fff;
|
||||
box-shadow: inset 0 0 10px #000;
|
||||
}
|
||||
|
||||
.dropdown-item.disabled,
|
||||
.disabled.text-muted {
|
||||
color: #444 !important;
|
||||
opacity: 0.6;
|
||||
}
|
||||
11
frontend/src/css/CustomCarousel.css
Normal file
11
frontend/src/css/CustomCarousel.css
Normal file
@@ -0,0 +1,11 @@
|
||||
.carousel-img-wrapper {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.carousel-img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 1rem;
|
||||
max-height: 60vh;
|
||||
object-fit: cover;
|
||||
}
|
||||
12
frontend/src/css/Footer.css
Normal file
12
frontend/src/css/Footer.css
Normal file
@@ -0,0 +1,12 @@
|
||||
footer {
|
||||
background-color: #020202;
|
||||
border-top: 1px solid var(--dirty-gold);
|
||||
color: #555;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.skull-icon {
|
||||
font-size: 2rem;
|
||||
color: var(--parchment);
|
||||
display: block;
|
||||
}
|
||||
53
frontend/src/css/Header.css
Normal file
53
frontend/src/css/Header.css
Normal file
@@ -0,0 +1,53 @@
|
||||
header {
|
||||
background:
|
||||
linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,1)),
|
||||
url('https://www.transparenttextures.com/patterns/dark-matter.png');
|
||||
border-bottom: 4px double var(--imperial-gold);
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.9);
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 3.5rem;
|
||||
font-weight: 900;
|
||||
color: var(--imperial-gold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 5px;
|
||||
text-shadow: 0 0 15px rgba(198, 163, 77, 0.6);
|
||||
}
|
||||
|
||||
header p {
|
||||
font-size: 1.2rem;
|
||||
color: var(--blood-god);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 5px var(--blood-god);
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
header h1 {
|
||||
font-size: 2.6rem;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
||||
header p {
|
||||
font-size: 1rem;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
header {
|
||||
padding: 2.5rem 1rem !important;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 2rem;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
header p {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
97
frontend/src/css/LoginForm.css
Normal file
97
frontend/src/css/LoginForm.css
Normal file
@@ -0,0 +1,97 @@
|
||||
.login-card {
|
||||
background: #111 !important;
|
||||
border: 1px solid var(--dirty-gold) !important;
|
||||
color: var(--parchment) !important;
|
||||
padding: 40px;
|
||||
clip-path: polygon(
|
||||
20px 0, 100% 0,
|
||||
100% calc(100% - 20px),
|
||||
calc(100% - 20px) 100%,
|
||||
0 100%, 0 20px
|
||||
);
|
||||
box-shadow: 0 0 25px rgba(0,0,0,0.9);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.login-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 6px;
|
||||
border: 1px dashed #222;
|
||||
pointer-events: none;
|
||||
clip-path: inherit;
|
||||
}
|
||||
|
||||
input.form-control {
|
||||
background-color: rgba(0,0,0,0.8) !important;
|
||||
border: 1px solid var(--plasteel) !important;
|
||||
color: var(--imperial-gold) !important;
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
letter-spacing: 1px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
input.form-control:focus {
|
||||
background-color: #000 !important;
|
||||
border-color: var(--blood-god) !important;
|
||||
box-shadow: 0 0 10px rgba(138, 11, 11, 0.4) !important;
|
||||
color: var(--imperial-gold) !important;
|
||||
}
|
||||
|
||||
.form-floating > label {
|
||||
font-family: 'Cinzel', serif;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: var(--dirty-gold) !important;
|
||||
}
|
||||
|
||||
.form-floating > label::after {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
font-family: 'Cinzel', serif !important;
|
||||
font-weight: bold !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: 2px !important;
|
||||
background: #000 !important;
|
||||
border: 1px solid var(--imperial-gold) !important;
|
||||
color: var(--imperial-gold) !important;
|
||||
padding: 15px 40px !important;
|
||||
clip-path: polygon(
|
||||
10px 0, 100% 0,
|
||||
100% calc(100% - 10px),
|
||||
calc(100% - 10px) 100%,
|
||||
0 100%, 0 10px
|
||||
);
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.login-button:hover {
|
||||
background: var(--blood-god) !important;
|
||||
color: #fff !important;
|
||||
border-color: var(--plasma-glow) !important;
|
||||
box-shadow: 0 0 20px var(--blood-god) !important;
|
||||
text-shadow: 0 0 5px #fff !important;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.login-card {
|
||||
padding: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.login-card {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.login-card h1 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
padding: 12px 24px !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
72
frontend/src/css/NavBar.css
Normal file
72
frontend/src/css/NavBar.css
Normal file
@@ -0,0 +1,72 @@
|
||||
.nav-container {
|
||||
background-color: #0f1114;
|
||||
border-bottom: 1px solid var(--dirty-gold);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 900;
|
||||
}
|
||||
|
||||
.nav-link-custom {
|
||||
display: block;
|
||||
padding: 15px 30px;
|
||||
text-decoration: none;
|
||||
color: #666;
|
||||
font-family: 'Cinzel', serif;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
transition: 0.3s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
li.border-left .nav-link-custom {
|
||||
border-left: 1px solid #222;
|
||||
}
|
||||
|
||||
li.border-right .nav-link-custom {
|
||||
border-right: 1px solid #222;
|
||||
}
|
||||
|
||||
.nav-link-custom:hover {
|
||||
color: var(--parchment);
|
||||
background-color: var(--blood-god);
|
||||
box-shadow: inset 0 0 10px #000;
|
||||
}
|
||||
|
||||
.nav-link-custom::before { content: '[ '; opacity: 0; transition: 0.3s; color: var(--imperial-gold); }
|
||||
.nav-link-custom::after { content: ' ]'; opacity: 0; transition: 0.3s; color: var(--imperial-gold); }
|
||||
.nav-link-custom:hover::before, .nav-link-custom:hover::after { opacity: 1; }
|
||||
|
||||
.nav-button {
|
||||
all: unset;
|
||||
display: block;
|
||||
padding: 15px 30px;
|
||||
color: #666;
|
||||
font-family: 'Cinzel', serif;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
transition: 0.3s;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.border-left .nav-button {
|
||||
border-left: 1px solid #222;
|
||||
}
|
||||
|
||||
.border-right .nav-button {
|
||||
border-right: 1px solid #222;
|
||||
}
|
||||
|
||||
.nav-button:hover {
|
||||
color: var(--parchment);
|
||||
background-color: var(--blood-god);
|
||||
box-shadow: inset 0 0 10px #000;
|
||||
}
|
||||
|
||||
.nav-button::before { content: '[ '; opacity: 0; transition: 0.3s; color: var(--imperial-gold); }
|
||||
.nav-button::after { content: ' ]'; opacity: 0; transition: 0.3s; color: var(--imperial-gold); }
|
||||
|
||||
.nav-button:hover::before,
|
||||
.nav-button:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
67
frontend/src/css/NavBarMobile.css
Normal file
67
frontend/src/css/NavBarMobile.css
Normal file
@@ -0,0 +1,67 @@
|
||||
.nav-container {
|
||||
background-color: #0f1114;
|
||||
border-bottom: 1px solid var(--dirty-gold);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 900;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-mobile-header {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.nav-mobile-brand {
|
||||
color: #666;
|
||||
font-family: 'Cinzel', serif;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.nav-mobile-toggle {
|
||||
all: unset;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.nav-mobile-toggle span {
|
||||
display: block;
|
||||
width: 25px;
|
||||
height: 2px;
|
||||
background-color: var(--dirty-gold);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-mobile-toggle.open span:nth-child(1) {
|
||||
transform: rotate(45deg) translate(5px, 5px);
|
||||
}
|
||||
|
||||
.nav-mobile-toggle.open span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.nav-mobile-toggle.open span:nth-child(3) {
|
||||
transform: rotate(-45deg) translate(5px, -5px);
|
||||
}
|
||||
|
||||
.nav-list-mobile {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-list-mobile li {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-list-mobile .nav-link-custom,
|
||||
.nav-list-mobile .nav-button {
|
||||
padding: 12px 0;
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #222;
|
||||
}
|
||||
8
frontend/src/css/PasswordInput.css
Normal file
8
frontend/src/css/PasswordInput.css
Normal file
@@ -0,0 +1,8 @@
|
||||
button.show-button {
|
||||
color: var(--show-btn-color);
|
||||
|
||||
}
|
||||
|
||||
button.show-button:hover {
|
||||
color: var(--show-btn-hover);
|
||||
}
|
||||
47
frontend/src/css/TechCard.css
Normal file
47
frontend/src/css/TechCard.css
Normal file
@@ -0,0 +1,47 @@
|
||||
.tech-card {
|
||||
background: #111 !important;
|
||||
border: 1px solid var(--dirty-gold);
|
||||
padding: 40px;
|
||||
position: relative;
|
||||
clip-path: polygon(
|
||||
20px 0, 100% 0,
|
||||
100% calc(100% - 20px), calc(100% - 20px) 100%,
|
||||
0 100%, 0 20px
|
||||
);
|
||||
box-shadow: 0 0 15px rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
.tech-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 5px; left: 5px; right: 5px; bottom: 5px;
|
||||
border: 1px dashed #333;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
clip-path: polygon(
|
||||
20px 0, 100% 0,
|
||||
100% calc(100% - 20px), calc(100% - 20px) 100%,
|
||||
0 100%, 0 20px
|
||||
);
|
||||
}
|
||||
|
||||
.tech-card p {
|
||||
line-height: 1.6;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.tech-card {
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.tech-card p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.tech-card {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
308
frontend/src/css/index.css
Normal file
308
frontend/src/css/index.css
Normal file
@@ -0,0 +1,308 @@
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Cinzel';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/cinzel/v26/8vIJ7ww63mVu7gt7-GT7LEc.woff2) format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Cinzel';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/cinzel/v26/8vIJ7ww63mVu7gt79mT7.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Cinzel';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/cinzel/v26/8vIJ7ww63mVu7gt7-GT7LEc.woff2) format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Cinzel';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/cinzel/v26/8vIJ7ww63mVu7gt79mT7.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Cinzel';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/cinzel/v26/8vIJ7ww63mVu7gt7-GT7LEc.woff2) format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Cinzel';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/cinzel/v26/8vIJ7ww63mVu7gt79mT7.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Share Tech Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/sharetechmono/v16/J7aHnp1uDWRBEqV98dVQztYldFcLowEF.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
:root {
|
||||
--void-black: #050505;
|
||||
--blood-god: #8a0b0b;
|
||||
--plasma-glow: #ff3333;
|
||||
--imperial-gold: #c6a34d;
|
||||
--dirty-gold: #8c7335;
|
||||
--plasteel: #2f353b;
|
||||
--mechanicus-green: #23382c;
|
||||
--parchment: #c2bbad;
|
||||
--crt-line: rgba(18, 16, 16, 0.5);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
background-color: var(--void-black);
|
||||
color: var(--parchment);
|
||||
letter-spacing: 1px;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* CRT */
|
||||
body::after {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
|
||||
z-index: 1000;
|
||||
background-size: 100% 2px, 3px 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* SECCIONES Y TITULOS */
|
||||
section {
|
||||
padding: 80px 20px !important;
|
||||
max-width: 1200px !important;
|
||||
margin: auto !important;
|
||||
scroll-margin-top: 40px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 2.5rem;
|
||||
color: var(--parchment);
|
||||
text-transform: uppercase;
|
||||
position: relative;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.section-title::before, .section-title::after {
|
||||
content: "+++";
|
||||
color: var(--dirty-gold);
|
||||
margin: 0 15px;
|
||||
font-size: 1.5rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* SPIN */
|
||||
.spin-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.spin-background img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
opacity: 0.15;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
/* BOTONES */
|
||||
.btn-imperial {
|
||||
display: inline-block;
|
||||
padding: 15px 40px;
|
||||
background: #000;
|
||||
border: 1px solid var(--imperial-gold);
|
||||
color: var(--imperial-gold);
|
||||
font-family: 'Cinzel', serif;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
cursor: pointer;
|
||||
transition: 0.4s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-imperial:hover {
|
||||
background: var(--blood-god);
|
||||
color: #fff;
|
||||
border-color: var(--plasma-glow);
|
||||
box-shadow: 0 0 20px var(--blood-god);
|
||||
text-shadow: 0 0 5px #fff;
|
||||
}
|
||||
|
||||
/* FOTOS */
|
||||
.foto-frame {
|
||||
position: relative;
|
||||
border: 2px solid var(--plasteel);
|
||||
padding: 5px;
|
||||
background: #000;
|
||||
transition: 0.3s;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.foto-frame:hover {
|
||||
border-color: var(--imperial-gold);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.foto-placeholder {
|
||||
height: 300px;
|
||||
background: radial-gradient(circle, #222, #000);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: #444;
|
||||
border: 1px solid #222;
|
||||
}
|
||||
|
||||
.foto-placeholder span {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.foto-caption {
|
||||
background: var(--plasteel);
|
||||
color: #aaa;
|
||||
padding: 10px;
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* FORMULARIO */
|
||||
.tech-input, .tech-textarea {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
background-color: rgba(0,0,0,0.7);
|
||||
border: 1px solid var(--plasteel);
|
||||
color: var(--imperial-gold);
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: 1rem;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.tech-input:focus, .tech-textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--blood-god);
|
||||
box-shadow: 0 0 10px rgba(138, 11, 11, 0.3);
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
@keyframes textFlicker {
|
||||
0%, 95%, 97%, 99%, 100% { opacity: 1; }
|
||||
96% { opacity: 0.8; }
|
||||
98% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
h1, h2 { animation: textFlicker 5s infinite; }
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
section {
|
||||
padding: 60px 16px !important;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.section-title::before,
|
||||
.section-title::after {
|
||||
margin: 0 10px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.foto-placeholder {
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.btn-imperial {
|
||||
padding: 12px 28px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.tech-input,
|
||||
.tech-textarea {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
section {
|
||||
padding: 40px 12px !important;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.6rem;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.section-title::before,
|
||||
.section-title::after {
|
||||
margin: 0 8px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.foto-placeholder {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.foto-placeholder span {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.foto-caption {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.btn-imperial {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user