Drossagyn curso completo
This commit is contained in:
File diff suppressed because one or more lines are too long
Vendored
+8
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
.driver-active .driver-overlay,.driver-active *{pointer-events:none}.driver-active .driver-active-element,.driver-active .driver-active-element *,.driver-popover,.driver-popover *{pointer-events:auto}@keyframes animate-fade-in{0%{opacity:0}to{opacity:1}}.driver-fade .driver-overlay{animation:animate-fade-in .2s ease-in-out}.driver-fade .driver-popover{animation:animate-fade-in .2s}.driver-popover{all:unset;box-sizing:border-box;color:#2d2d2d;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;box-shadow:0 1px 10px #0006;z-index:1000000000;position:fixed;top:0;right:0;background-color:#fff}.driver-popover *{font-family:Helvetica Neue,Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif}.driver-popover-title{font:19px/normal sans-serif;font-weight:700;display:block;position:relative;line-height:1.5;zoom:1;margin:0}.driver-popover-close-btn{all:unset;position:absolute;top:0;right:0;width:32px;height:28px;cursor:pointer;font-size:18px;font-weight:500;color:#d2d2d2;z-index:1;text-align:center;transition:color;transition-duration:.2s}.driver-popover-close-btn:hover,.driver-popover-close-btn:focus{color:#2d2d2d}.driver-popover-title[style*=block]+.driver-popover-description{margin-top:5px}.driver-popover-description{margin-bottom:0;font:14px/normal sans-serif;line-height:1.5;font-weight:400;zoom:1}.driver-popover-footer{margin-top:15px;text-align:right;zoom:1;display:flex;align-items:center;justify-content:space-between}.driver-popover-progress-text{font-size:13px;font-weight:400;color:#727272;zoom:1}.driver-popover-footer button{all:unset;display:inline-block;box-sizing:border-box;padding:3px 7px;text-decoration:none;text-shadow:1px 1px 0 #fff;background-color:#fff;color:#2d2d2d;font:12px/normal sans-serif;cursor:pointer;outline:0;zoom:1;line-height:1.3;border:1px solid #ccc;border-radius:3px}.driver-popover-footer .driver-popover-btn-disabled{opacity:.5;pointer-events:none}:not(body):has(>.driver-active-element){overflow:hidden!important}.driver-no-interaction,.driver-no-interaction *{pointer-events:none!important}.driver-popover-footer button:hover,.driver-popover-footer button:focus{background-color:#f7f7f7}.driver-popover-navigation-btns{display:flex;flex-grow:1;justify-content:flex-end}.driver-popover-navigation-btns button+button{margin-left:4px}.driver-popover-arrow{content:"";position:absolute;border:5px solid #fff}.driver-popover-arrow-side-over{display:none}.driver-popover-arrow-side-left{left:100%;border-right-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-right{right:100%;border-left-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-top{top:100%;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}.driver-popover-arrow-side-bottom{bottom:100%;border-left-color:transparent;border-top-color:transparent;border-right-color:transparent}.driver-popover-arrow-side-center{display:none}.driver-popover-arrow-side-left.driver-popover-arrow-align-start,.driver-popover-arrow-side-right.driver-popover-arrow-align-start{top:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-start,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-start{left:15px}.driver-popover-arrow-align-end.driver-popover-arrow-side-left,.driver-popover-arrow-align-end.driver-popover-arrow-side-right{bottom:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-end,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end{right:15px}.driver-popover-arrow-side-left.driver-popover-arrow-align-center,.driver-popover-arrow-side-right.driver-popover-arrow-align-center{top:50%;margin-top:-5px}.driver-popover-arrow-side-top.driver-popover-arrow-align-center,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center{left:50%;margin-left:-5px}.driver-popover-arrow-none{display:none}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,37 @@
|
||||
@-webkit-keyframes play{
|
||||
0%{background-position:50% 0%;}
|
||||
100%{background-position:50% 100%;}
|
||||
}
|
||||
@-moz-keyframes play{
|
||||
0%{background-position:50% 0%;}
|
||||
100%{background-position:50% 100%;}
|
||||
}
|
||||
@-o-keyframes play{
|
||||
0%{background-position:50% 0%;}
|
||||
100%{background-position:50% 100%;}
|
||||
}
|
||||
@keyframes play{
|
||||
0%{background-position:50% 0%;}
|
||||
100%{background-position:50% 100%;}
|
||||
}
|
||||
|
||||
/********************************************/
|
||||
.h3 {
|
||||
background: url("../img/sprites/h3.png") 0 0;
|
||||
width: 400px;
|
||||
height: calc(3680px / 8);
|
||||
background-size: auto 800%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 0;
|
||||
}
|
||||
|
||||
.h3.play {
|
||||
-webkit-animation: play 1.9s steps(7) infinite;
|
||||
-moz-animation: play 1.9s steps(7) infinite;
|
||||
-o-animation: play 1.9s steps(7) infinite;
|
||||
animation: play 1.9s steps(7) infinite;
|
||||
}
|
||||
|
||||
.h3.stop {
|
||||
background-position: 50% 0;
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
@-webkit-keyframes play{
|
||||
0%{background-position:50% 0%;}
|
||||
100%{background-position:50% 100%;}
|
||||
}
|
||||
@-moz-keyframes play{
|
||||
0%{background-position:50% 0%;}
|
||||
100%{background-position:50% 100%;}
|
||||
}
|
||||
@-o-keyframes play{
|
||||
0%{background-position:50% 0%;}
|
||||
100%{background-position:50% 100%;}
|
||||
}
|
||||
@keyframes play{
|
||||
0%{background-position:50% 0%;}
|
||||
100%{background-position:50% 100%;}
|
||||
}
|
||||
/********************************************/
|
||||
.m1 {
|
||||
background: url("../img/sprites/m1.png") 0 0;
|
||||
background-size: auto 800%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 0;
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
|
||||
.m1.play {
|
||||
-webkit-animation: play 1.9s steps(7) infinite;
|
||||
-moz-animation: play 1.9s steps(7) infinite;
|
||||
-o-animation: play 1.9s steps(7) infinite;
|
||||
animation: play 1.9s steps(7) infinite;
|
||||
}
|
||||
|
||||
.m1.stop {
|
||||
background-position: 50% 0;
|
||||
}
|
||||
@@ -0,0 +1,441 @@
|
||||
@charset "UTF-8";
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Arial360", sans-serif;
|
||||
line-height: 1.3;
|
||||
font-size: clamp(1rem, 0.6vw + 0.8rem, 1.125rem);
|
||||
}
|
||||
body > header,
|
||||
body > footer {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
body > header .coursenav-btn-navigation,
|
||||
body > footer .coursenav-btn-navigation {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
padding: 0;
|
||||
border-radius: 100%;
|
||||
border: none;
|
||||
background: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: inherit;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
body > header .coursenav-btn-navigation:disabled,
|
||||
body > footer .coursenav-btn-navigation:disabled {
|
||||
cursor: not-allowed;
|
||||
filter: opacity(0.5);
|
||||
}
|
||||
body > main {
|
||||
flex: 1 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#coursenav-offcanvas {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
#coursenav-offcanvas-label {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#coursenav-navbar .navbar-brand img {
|
||||
object-fit: contain;
|
||||
aspect-ratio: 1/1;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.course-menu,
|
||||
.course-menu ul {
|
||||
list-style: none !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.course-menu .witem {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
}
|
||||
.course-menu .witem > span {
|
||||
margin-left: auto;
|
||||
}
|
||||
.course-menu .menu-item + .course-menu .menu-item {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.course-menu .coursenav-link {
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
user-select: none;
|
||||
}
|
||||
.course-menu .sub-ul {
|
||||
display: none;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.course-menu .sub-ul.open {
|
||||
display: block;
|
||||
}
|
||||
.course-menu .sub-ul .coursenav-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
.course-menu .sub-ul .coursenav-link:hover {
|
||||
filter: invert(100%);
|
||||
}
|
||||
.course-menu .sub-ul .coursenav-link[data-coursenavvisited=false]::before {
|
||||
content: "\f023";
|
||||
font-family: "Font Awesome 6 Pro";
|
||||
font-weight: lighter;
|
||||
display: inline-block;
|
||||
margin-right: 0.5rem;
|
||||
color: inherit;
|
||||
}
|
||||
.course-menu .sub-ul .coursenav-link[data-coursenavvisited=true]::before {
|
||||
content: "\f00c";
|
||||
font-family: "Font Awesome 6 Pro";
|
||||
font-weight: 900;
|
||||
display: inline-block;
|
||||
margin-right: 0.5rem;
|
||||
color: var(--bs-success);
|
||||
}
|
||||
.course-menu .toggle-icon {
|
||||
cursor: pointer;
|
||||
margin-left: 0.5rem;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.controls-btn {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: inherit;
|
||||
position: relative;
|
||||
}
|
||||
.controls-btn > svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.controls-btn > i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.controls-btn:focus {
|
||||
outline: 2px solid #ffa300;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.controls-btn .position-relative {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.controls-btn .position-relative svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.controls-btn .position-relative i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: inherit;
|
||||
position: relative;
|
||||
}
|
||||
.navbar-toggler > svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.navbar-toggler > i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.navbar-toggler:focus {
|
||||
outline: 2px solid #ffa300;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.navbar-toggler .position-relative {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.navbar-toggler .position-relative svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.navbar-toggler .position-relative i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.disabled {
|
||||
pointer-events: none;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
h1,
|
||||
.h1 {
|
||||
font-size: clamp(1.875rem, 1.6087rem + 1.1364vw, 2.3125rem);
|
||||
}
|
||||
|
||||
h2,
|
||||
.h2 {
|
||||
font-size: clamp(1.5rem, 1.2717rem + 0.974vw, 1.875rem);
|
||||
}
|
||||
|
||||
h3,
|
||||
.h3 {
|
||||
font-size: clamp(1.25rem, 1.0217rem + 0.974vw, 1.625rem);
|
||||
}
|
||||
|
||||
h4,
|
||||
.h4 {
|
||||
font-size: clamp(1.1875rem, 1.0353rem + 0.6494vw, 1.4375rem);
|
||||
}
|
||||
|
||||
.text-white * {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.page-sco {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.card.flat {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
.card.flat .card-body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.cursor {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
body > main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.page-sco {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.page-sco .container,
|
||||
.page-sco .container-fluid,
|
||||
.page-sco .container-xxl,
|
||||
.page-sco .container-xl,
|
||||
.page-sco .container-lg,
|
||||
.page-sco .container-md,
|
||||
.page-sco .container-sm {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.page-sco .container .row,
|
||||
.page-sco .container-fluid .row,
|
||||
.page-sco .container-xxl .row,
|
||||
.page-sco .container-xl .row,
|
||||
.page-sco .container-lg .row,
|
||||
.page-sco .container-md .row,
|
||||
.page-sco .container-sm .row {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.white-opacity-05 {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.amor {
|
||||
font-family: "Amor Sans Pro", sans-serif;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.hespecial {
|
||||
font-size: clamp(2.3125rem, 1.7418rem + 2.4351vw, 3.25rem);
|
||||
}
|
||||
|
||||
.rounded-15 {
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.rounded-100 {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
/* Clase para aplicar la animación de flotación */
|
||||
.floating {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Animación de flotación */
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
/* Mueve hacia arriba */
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
/* Regresa a la posición original */
|
||||
}
|
||||
}
|
||||
.animate__animated.animate__pulse {
|
||||
box-shadow: 0 0 0 rgba(245, 128, 37, 0.4);
|
||||
animation: aura 1.7s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.animate__animated.animate__pulse.disabled {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
@-webkit-keyframes aura {
|
||||
0% {
|
||||
-webkit-box-shadow: 0 0 0 20px rgba(255, 163, 0, 0);
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
-webkit-box-shadow: 0 0 0 0 rgba(255, 163, 0, 0);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
100% {
|
||||
-webkit-box-shadow: 0 0 0 20px rgba(255, 163, 0, 0);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes aura {
|
||||
0% {
|
||||
-moz-box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
|
||||
box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
-moz-box-shadow: 0 0 0 0 rgba(245, 128, 37, 0.4);
|
||||
box-shadow: 0 0 0 0 rgba(245, 128, 37, 0.4);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
100% {
|
||||
-moz-box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
|
||||
box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.course-menu .btn {
|
||||
border-radius: 10px;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
font-family: "Amor Sans Pro";
|
||||
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.fake {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
#offcanvasGlossary {
|
||||
min-width: 50vw;
|
||||
font-size: 16px;
|
||||
}
|
||||
#offcanvasGlossary h1 {
|
||||
font-size: 2em;
|
||||
font-family: "Amor Sans Pro";
|
||||
font-weight: bold;
|
||||
}
|
||||
#offcanvasGlossary h2 {
|
||||
font-size: 1.5em;
|
||||
font-family: "Amor Sans Pro";
|
||||
font-weight: bold;
|
||||
}
|
||||
#offcanvasGlossary h3 {
|
||||
font-size: 1.2em;
|
||||
font-family: "Amor Sans Pro";
|
||||
font-weight: bold;
|
||||
}
|
||||
#offcanvasGlossary h4 {
|
||||
font-size: 1em;
|
||||
font-family: "Amor Sans Pro";
|
||||
font-weight: bold;
|
||||
}
|
||||
#offcanvasGlossary h5 {
|
||||
font-size: 0.8em;
|
||||
font-family: "Amor Sans Pro";
|
||||
font-weight: bold;
|
||||
}
|
||||
#offcanvasGlossary h6 {
|
||||
font-size: 0.6em;
|
||||
font-family: "Amor Sans Pro";
|
||||
font-weight: bold;
|
||||
}
|
||||
Vendored
+1
File diff suppressed because one or more lines are too long
@@ -0,0 +1,677 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// Variables
|
||||
$btn-size: 38px !default;
|
||||
$outline-color: #ffa300 !default;
|
||||
|
||||
// Global box-sizing
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
// Body layout
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
'header'
|
||||
'main'
|
||||
'footer';
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-template-columns: 1fr;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
line-height: 1.3;
|
||||
font-size: clamp(1rem, 0.6vw + 0.8rem, 1.125rem);
|
||||
overflow: hidden;
|
||||
|
||||
> header,
|
||||
> footer {
|
||||
/* flex-shrink: 0; */
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
.coursenav-btn-navigation {
|
||||
width: $btn-size;
|
||||
height: $btn-size;
|
||||
padding: 0;
|
||||
border-radius: 100%;
|
||||
border: none;
|
||||
background: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: inherit;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
filter: opacity(0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
> main {
|
||||
grid-area: main;
|
||||
min-height: 0; // ← ESTO ES CRUCIAL PARA GRID
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
footer {
|
||||
grid-area: footer;
|
||||
}
|
||||
|
||||
#coursenav-offcanvas {
|
||||
padding: 1em;
|
||||
}
|
||||
#coursenav-offcanvas-label {
|
||||
user-select: none;
|
||||
}
|
||||
#coursenav-navbar {
|
||||
.navbar-brand img {
|
||||
object-fit: contain;
|
||||
aspect-ratio: 1 / 1;
|
||||
height: 51px;
|
||||
}
|
||||
}
|
||||
// Menu styles
|
||||
.course-menu,
|
||||
.course-menu ul {
|
||||
list-style: none !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.course-menu {
|
||||
.witem {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
> span {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
.menu-item {
|
||||
& + & {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
.coursenav-link {
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
user-select: none;
|
||||
}
|
||||
.sub-ul {
|
||||
display: none;
|
||||
padding-left: 1rem;
|
||||
&.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.coursenav-link {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
filter: invert(100%);
|
||||
}
|
||||
&[data-coursenavvisited='false'] {
|
||||
&::before {
|
||||
content: '\f023'; // unicode de fa-check
|
||||
font-family: 'Font Awesome 6 Pro';
|
||||
font-weight: lighter; // solid
|
||||
display: inline-block;
|
||||
margin-right: 0.5rem;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
&[data-coursenavvisited='true'] {
|
||||
&::before {
|
||||
content: '\f00c'; // unicode de fa-check
|
||||
font-family: 'Font Awesome 6 Pro';
|
||||
font-weight: 900; // solid
|
||||
display: inline-block;
|
||||
margin-right: 0.5rem;
|
||||
color: var(--bs-success); // verde éxito (puedes cambiar)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.toggle-icon {
|
||||
cursor: pointer;
|
||||
margin-left: 0.5rem;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin for control buttons (audio & toggler)
|
||||
@mixin control-button {
|
||||
width: $btn-size;
|
||||
height: $btn-size;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: inherit;
|
||||
position: relative;
|
||||
> svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
> i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
&:focus {
|
||||
outline: 2px solid $outline-color;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply mixin
|
||||
.controls-btn {
|
||||
@include control-button;
|
||||
// El contenedor interno debe ser relativo
|
||||
.position-relative {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// Asegúrate que el SVG ocupe todo el área
|
||||
.position-relative svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// El <i> ahora sí es absoluto dentro de .position-relative
|
||||
.position-relative i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
// opcional: tamaño fijo para el icono
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
@include control-button;
|
||||
.position-relative {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.position-relative svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.position-relative i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
.disabled {
|
||||
pointer-events: none;
|
||||
animation: none;
|
||||
}
|
||||
h1,
|
||||
.h1 {
|
||||
font-size: clamp(1.75rem, 1.4076rem + 1.461vw, 2.3125rem);
|
||||
}
|
||||
|
||||
h2,
|
||||
.h2 {
|
||||
font-size: clamp(1.5rem, 1.2717rem + 0.974vw, 1.875rem);
|
||||
}
|
||||
|
||||
h3,
|
||||
.h3 {
|
||||
font-size: clamp(1.25rem, 1.0217rem + 0.974vw, 1.625rem);
|
||||
}
|
||||
|
||||
h4,
|
||||
.h4 {
|
||||
font-size: clamp(1.1875rem, 1.0353rem + 0.6494vw, 1.4375rem);
|
||||
}
|
||||
|
||||
.text-white * {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Estilos para .page-sco - sticky fullpage effect
|
||||
.page-sco {
|
||||
min-height: 100%;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
|
||||
// Aplica a TODOS los contenedores de Bootstrap 5 dentro de .page-sco
|
||||
.container,
|
||||
.container-fluid,
|
||||
.container-xxl,
|
||||
.container-xl,
|
||||
.container-lg,
|
||||
.container-md,
|
||||
.container-sm {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// Asegura que las filas (.row) también ocupen el 100% de altura
|
||||
.row {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card.flat {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
|
||||
.card-body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.cursor {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.white-opacity-05 {
|
||||
background-color: rgba(232, 230, 228, 0.5);
|
||||
}
|
||||
|
||||
.amor {
|
||||
font-family: 'Bree', sans-serif;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.hespecial {
|
||||
font-size: clamp(2.3125rem, 1.7418rem + 2.4351vw, 3.25rem);
|
||||
}
|
||||
|
||||
.rounded-15 {
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.rounded-100 {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
/* Clase para aplicar la animación de flotación */
|
||||
.floating {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Animación de flotación */
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
/* Mueve hacia arriba */
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
/* Regresa a la posición original */
|
||||
}
|
||||
}
|
||||
|
||||
.btn-begin {
|
||||
background-color: transparent;
|
||||
background-image: url(../img/adorno-btn.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 40px;
|
||||
}
|
||||
|
||||
.btn-begin.pop-button-confirm {
|
||||
background-image: url(../img/adorno2.png);
|
||||
}
|
||||
|
||||
.inside-card {
|
||||
background: #ff3983;
|
||||
background: radial-gradient(ellipse farthest-corner at center center, #ff3983 0%, #ffd0ee 100%);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 0 0 rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.btn-begin:hover .inside-card {
|
||||
background: #ff3983;
|
||||
background: radial-gradient(ellipse farthest-corner at bottom center, #ff3983 0%, #ffd0ee 100%);
|
||||
}
|
||||
|
||||
.animate__animated.animate__pulse {
|
||||
box-shadow: 0 0 0 rgba(0, 146, 142, 0.4);
|
||||
animation: aura 1.7s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.animate__animated.animate__pulse.disabled {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
@-webkit-keyframes aura {
|
||||
0% {
|
||||
-webkit-box-shadow: 0 0 0 20px rgba(255, 163, 0, 0);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-box-shadow: 0 0 0 0 rgba(255, 163, 0, 0);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-box-shadow: 0 0 0 20px rgba(255, 163, 0, 0);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes aura {
|
||||
0% {
|
||||
-moz-box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
|
||||
box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
-moz-box-shadow: 0 0 0 0 rgba(0, 146, 142, 0.4);
|
||||
box-shadow: 0 0 0 0 rgba(0, 146, 142, 0.4);
|
||||
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
|
||||
box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size: clamp(1rem, 0.6vw + 0.8rem, 1.125rem);
|
||||
}
|
||||
|
||||
.course-menu {
|
||||
.btn {
|
||||
border-radius: 10px;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
font-family: 'Bree';
|
||||
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
#offcanvasGlossary {
|
||||
min-width: 50vw;
|
||||
font-size: 16px;
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-family: 'Bree';
|
||||
font-weight: bold;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
font-family: 'Bree';
|
||||
font-weight: bold;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.2em;
|
||||
font-family: 'Bree';
|
||||
font-weight: bold;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1em;
|
||||
font-family: 'Bree';
|
||||
font-weight: bold;
|
||||
}
|
||||
h5 {
|
||||
font-size: 0.8em;
|
||||
font-family: 'Bree';
|
||||
font-weight: bold;
|
||||
}
|
||||
h6 {
|
||||
font-size: 0.6em;
|
||||
font-family: 'Bree';
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.swal2-confirm {
|
||||
font-size: clamp(1rem, 0.6vw + 0.8rem, 1.125rem);
|
||||
}
|
||||
|
||||
.look_at_me {
|
||||
animation: pulse-next-btn 1.75s infinite;
|
||||
position: relative;
|
||||
transition: background-color 0.5s ease;
|
||||
}
|
||||
|
||||
@keyframes pulse-next-btn {
|
||||
0% {
|
||||
box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: 0 0 0 0 rgba(245, 128, 37, 0.4);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tooltip {
|
||||
.tooltip-inner {
|
||||
max-width: 300px;
|
||||
background-color: var(--bs-azul);
|
||||
color: #fff;
|
||||
font-size: clamp(1rem, 0.6vw + 0.8rem, 1.125rem);
|
||||
padding: 0.2rem 0.3rem;
|
||||
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
/* Cubre TODAS las posibles variaciones de posición */
|
||||
&.bs-tooltip-top .tooltip-arrow::before,
|
||||
&.bs-tooltip-auto[data-popper-placement^='top'] .tooltip-arrow::before {
|
||||
border-top-color: var(--bs-azul);
|
||||
}
|
||||
|
||||
&.bs-tooltip-end .tooltip-arrow::before,
|
||||
&.bs-tooltip-auto[data-popper-placement^='right'] .tooltip-arrow::before {
|
||||
border-right-color: var(--bs-azul);
|
||||
}
|
||||
|
||||
&.bs-tooltip-bottom .tooltip-arrow::before,
|
||||
&.bs-tooltip-auto[data-popper-placement^='bottom'] .tooltip-arrow::before {
|
||||
border-bottom-color: var(--bs-azul);
|
||||
}
|
||||
|
||||
&.bs-tooltip-start .tooltip-arrow::before,
|
||||
&.bs-tooltip-auto[data-popper-placement^='left'] .tooltip-arrow::before {
|
||||
border-left-color: var(--bs-azul);
|
||||
}
|
||||
}
|
||||
|
||||
.glossary-style {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.glossary-style img {
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.swal2-popup {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.modal-general-bs5 {
|
||||
background-color: rgba(60, 60, 59, 0.85);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.modal-style-pop-bs5 {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/*Configuracion Modal BS5*/
|
||||
.modal-general-bs5 .content-pop-modal {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.modal-style-pop-bs5 .custom-close-btn {
|
||||
cursor: pointer;
|
||||
font-size: 50px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 0.2em;
|
||||
right: 0.3em;
|
||||
color: var(--bs-primary);
|
||||
}
|
||||
|
||||
#bs5Modal .modal-dialog {
|
||||
max-width: auto;
|
||||
}
|
||||
|
||||
#bs5Modal.modal.fade .modal-dialog {
|
||||
transform: translate(0, 0) !important;
|
||||
}
|
||||
|
||||
#bs5Modal .modal-dialog {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.title_head_sco {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#bs5Modal .modal-dialog {
|
||||
min-width: 42em;
|
||||
}
|
||||
|
||||
.title_head_sco {
|
||||
flex: auto;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.btn-close-modal {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 2rem;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.paginacion_sco.isFalse {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// ===== ANIMATION DELAYS =====
|
||||
@for $i from 1 through 40 {
|
||||
.animate__delay-#{$i}s {
|
||||
animation-delay: #{$i}s;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-variacolor {
|
||||
background: #c9e0dd;
|
||||
background: linear-gradient(to right, #c9e0dd 0%, #00928e 100%);
|
||||
}
|
||||
|
||||
.border-top-2 {
|
||||
border-top: 3px solid;
|
||||
}
|
||||
|
||||
ul > li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
ul > li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ul.bul0 {
|
||||
list-style-type: none;
|
||||
list-style-image: url(../img/bul0.png);
|
||||
}
|
||||
|
||||
ul.bul1 {
|
||||
list-style-type: none;
|
||||
list-style-image: url(../img/bul1.png);
|
||||
}
|
||||
|
||||
.btn-next-section {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.html-pop-style {
|
||||
border: 6px solid transparent;
|
||||
border-radius: 20px;
|
||||
background: url(../img/fondo-pop.jpg) padding-box, linear-gradient(to right, #00928e 32%, #c1c902 96%) border-box !important;
|
||||
background-size: cover !important;
|
||||
background-position: center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
.html-pop-style2 {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
background-image: url(../img/bgpop2.png);
|
||||
background-position: 100% 100%;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
@@ -0,0 +1,790 @@
|
||||
@charset "UTF-8";
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-areas: "header" "main" "footer";
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-template-columns: 1fr;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Roboto", sans-serif;
|
||||
line-height: 1.3;
|
||||
font-size: clamp(1rem, 0.6vw + 0.8rem, 1.125rem);
|
||||
overflow: hidden;
|
||||
}
|
||||
body > header,
|
||||
body > footer {
|
||||
/* flex-shrink: 0; */
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
body > header .coursenav-btn-navigation,
|
||||
body > footer .coursenav-btn-navigation {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
padding: 0;
|
||||
border-radius: 100%;
|
||||
border: none;
|
||||
background: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: inherit;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
body > header .coursenav-btn-navigation:disabled,
|
||||
body > footer .coursenav-btn-navigation:disabled {
|
||||
cursor: not-allowed;
|
||||
filter: opacity(0.5);
|
||||
}
|
||||
body > main {
|
||||
grid-area: main;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
header {
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
footer {
|
||||
grid-area: footer;
|
||||
}
|
||||
|
||||
#coursenav-offcanvas {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
#coursenav-offcanvas-label {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#coursenav-navbar .navbar-brand img {
|
||||
-o-object-fit: contain;
|
||||
object-fit: contain;
|
||||
aspect-ratio: 1/1;
|
||||
height: 51px;
|
||||
}
|
||||
|
||||
.course-menu,
|
||||
.course-menu ul {
|
||||
list-style: none !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.course-menu .witem {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
}
|
||||
.course-menu .witem > span {
|
||||
margin-left: auto;
|
||||
}
|
||||
.course-menu .menu-item + .course-menu .menu-item {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.course-menu .coursenav-link {
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.course-menu .sub-ul {
|
||||
display: none;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.course-menu .sub-ul.open {
|
||||
display: block;
|
||||
}
|
||||
.course-menu .sub-ul .coursenav-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
.course-menu .sub-ul .coursenav-link:hover {
|
||||
filter: invert(100%);
|
||||
}
|
||||
.course-menu .sub-ul .coursenav-link[data-coursenavvisited=false]::before {
|
||||
content: "\f023";
|
||||
font-family: "Font Awesome 6 Pro";
|
||||
font-weight: lighter;
|
||||
display: inline-block;
|
||||
margin-right: 0.5rem;
|
||||
color: inherit;
|
||||
}
|
||||
.course-menu .sub-ul .coursenav-link[data-coursenavvisited=true]::before {
|
||||
content: "\f00c";
|
||||
font-family: "Font Awesome 6 Pro";
|
||||
font-weight: 900;
|
||||
display: inline-block;
|
||||
margin-right: 0.5rem;
|
||||
color: var(--bs-success);
|
||||
}
|
||||
.course-menu .toggle-icon {
|
||||
cursor: pointer;
|
||||
margin-left: 0.5rem;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.controls-btn {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: inherit;
|
||||
position: relative;
|
||||
}
|
||||
.controls-btn > svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.controls-btn > i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.controls-btn:focus {
|
||||
outline: 2px solid #ffa300;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.controls-btn .position-relative {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.controls-btn .position-relative svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.controls-btn .position-relative i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: inherit;
|
||||
position: relative;
|
||||
}
|
||||
.navbar-toggler > svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.navbar-toggler > i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.navbar-toggler:focus {
|
||||
outline: 2px solid #ffa300;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.navbar-toggler .position-relative {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.navbar-toggler .position-relative svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.navbar-toggler .position-relative i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.disabled {
|
||||
pointer-events: none;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
h1,
|
||||
.h1 {
|
||||
font-size: clamp(1.75rem, 1.4076rem + 1.461vw, 2.3125rem);
|
||||
}
|
||||
|
||||
h2,
|
||||
.h2 {
|
||||
font-size: clamp(1.5rem, 1.2717rem + 0.974vw, 1.875rem);
|
||||
}
|
||||
|
||||
h3,
|
||||
.h3 {
|
||||
font-size: clamp(1.25rem, 1.0217rem + 0.974vw, 1.625rem);
|
||||
}
|
||||
|
||||
h4,
|
||||
.h4 {
|
||||
font-size: clamp(1.1875rem, 1.0353rem + 0.6494vw, 1.4375rem);
|
||||
}
|
||||
|
||||
.text-white * {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.page-sco {
|
||||
min-height: 100%;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
.page-sco .container,
|
||||
.page-sco .container-fluid,
|
||||
.page-sco .container-xxl,
|
||||
.page-sco .container-xl,
|
||||
.page-sco .container-lg,
|
||||
.page-sco .container-md,
|
||||
.page-sco .container-sm {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.page-sco .container .row,
|
||||
.page-sco .container-fluid .row,
|
||||
.page-sco .container-xxl .row,
|
||||
.page-sco .container-xl .row,
|
||||
.page-sco .container-lg .row,
|
||||
.page-sco .container-md .row,
|
||||
.page-sco .container-sm .row {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card.flat {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
.card.flat .card-body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.cursor {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.white-opacity-05 {
|
||||
background-color: rgba(232, 230, 228, 0.5);
|
||||
}
|
||||
|
||||
.amor {
|
||||
font-family: "Bree", sans-serif;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.hespecial {
|
||||
font-size: clamp(2.3125rem, 1.7418rem + 2.4351vw, 3.25rem);
|
||||
}
|
||||
|
||||
.rounded-15 {
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.rounded-100 {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
/* Clase para aplicar la animación de flotación */
|
||||
.floating {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Animación de flotación */
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
/* Mueve hacia arriba */
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
/* Regresa a la posición original */
|
||||
}
|
||||
}
|
||||
.btn-begin {
|
||||
background-color: transparent;
|
||||
background-image: url(../img/adorno-btn.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 40px;
|
||||
}
|
||||
|
||||
.btn-begin.pop-button-confirm {
|
||||
background-image: url(../img/adorno2.png);
|
||||
}
|
||||
|
||||
.inside-card {
|
||||
background: #ff3983;
|
||||
background: radial-gradient(ellipse farthest-corner at center center, #ff3983 0%, #ffd0ee 100%);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 0 0 rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.btn-begin:hover .inside-card {
|
||||
background: #ff3983;
|
||||
background: radial-gradient(ellipse farthest-corner at bottom center, #ff3983 0%, #ffd0ee 100%);
|
||||
}
|
||||
|
||||
.animate__animated.animate__pulse {
|
||||
box-shadow: 0 0 0 rgba(0, 146, 142, 0.4);
|
||||
animation: aura 1.7s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.animate__animated.animate__pulse.disabled {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
animation: none;
|
||||
}
|
||||
@keyframes aura {
|
||||
0% {
|
||||
box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 0 rgba(0, 146, 142, 0.4);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
font-size: clamp(1rem, 0.6vw + 0.8rem, 1.125rem);
|
||||
}
|
||||
|
||||
.course-menu .btn {
|
||||
border-radius: 10px;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
font-family: "Bree";
|
||||
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#offcanvasGlossary {
|
||||
min-width: 50vw;
|
||||
font-size: 16px;
|
||||
}
|
||||
#offcanvasGlossary h1 {
|
||||
font-size: 2em;
|
||||
font-family: "Bree";
|
||||
font-weight: bold;
|
||||
}
|
||||
#offcanvasGlossary h2 {
|
||||
font-size: 1.5em;
|
||||
font-family: "Bree";
|
||||
font-weight: bold;
|
||||
}
|
||||
#offcanvasGlossary h3 {
|
||||
font-size: 1.2em;
|
||||
font-family: "Bree";
|
||||
font-weight: bold;
|
||||
}
|
||||
#offcanvasGlossary h4 {
|
||||
font-size: 1em;
|
||||
font-family: "Bree";
|
||||
font-weight: bold;
|
||||
}
|
||||
#offcanvasGlossary h5 {
|
||||
font-size: 0.8em;
|
||||
font-family: "Bree";
|
||||
font-weight: bold;
|
||||
}
|
||||
#offcanvasGlossary h6 {
|
||||
font-size: 0.6em;
|
||||
font-family: "Bree";
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.swal2-confirm {
|
||||
font-size: clamp(1rem, 0.6vw + 0.8rem, 1.125rem);
|
||||
}
|
||||
|
||||
.look_at_me {
|
||||
animation: pulse-next-btn 1.75s infinite;
|
||||
position: relative;
|
||||
transition: background-color 0.5s ease;
|
||||
}
|
||||
|
||||
@keyframes pulse-next-btn {
|
||||
0% {
|
||||
box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 0 rgba(245, 128, 37, 0.4);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
|
||||
}
|
||||
}
|
||||
.custom-tooltip {
|
||||
/* Cubre TODAS las posibles variaciones de posición */
|
||||
}
|
||||
.custom-tooltip .tooltip-inner {
|
||||
max-width: 300px;
|
||||
background-color: var(--bs-azul);
|
||||
color: #fff;
|
||||
font-size: clamp(1rem, 0.6vw + 0.8rem, 1.125rem);
|
||||
padding: 0.2rem 0.3rem;
|
||||
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.custom-tooltip.bs-tooltip-top .tooltip-arrow::before, .custom-tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
|
||||
border-top-color: var(--bs-azul);
|
||||
}
|
||||
.custom-tooltip.bs-tooltip-end .tooltip-arrow::before, .custom-tooltip.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
|
||||
border-right-color: var(--bs-azul);
|
||||
}
|
||||
.custom-tooltip.bs-tooltip-bottom .tooltip-arrow::before, .custom-tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
|
||||
border-bottom-color: var(--bs-azul);
|
||||
}
|
||||
.custom-tooltip.bs-tooltip-start .tooltip-arrow::before, .custom-tooltip.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
|
||||
border-left-color: var(--bs-azul);
|
||||
}
|
||||
|
||||
.glossary-style {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.glossary-style img {
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.swal2-popup {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.modal-general-bs5 {
|
||||
background-color: rgba(60, 60, 59, 0.85);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.modal-style-pop-bs5 {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/*Configuracion Modal BS5*/
|
||||
.modal-general-bs5 .content-pop-modal {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.modal-style-pop-bs5 .custom-close-btn {
|
||||
cursor: pointer;
|
||||
font-size: 50px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 0.2em;
|
||||
right: 0.3em;
|
||||
color: var(--bs-primary);
|
||||
}
|
||||
|
||||
#bs5Modal .modal-dialog {
|
||||
max-width: auto;
|
||||
}
|
||||
|
||||
#bs5Modal.modal.fade .modal-dialog {
|
||||
transform: translate(0, 0) !important;
|
||||
}
|
||||
|
||||
#bs5Modal .modal-dialog {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.title_head_sco {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#bs5Modal .modal-dialog {
|
||||
min-width: 42em;
|
||||
}
|
||||
.title_head_sco {
|
||||
flex: auto;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.btn-close-modal {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 2rem;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.paginacion_sco.isFalse {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.animate__delay-1s {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.animate__delay-2s {
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.animate__delay-3s {
|
||||
animation-delay: 3s;
|
||||
}
|
||||
|
||||
.animate__delay-4s {
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
.animate__delay-5s {
|
||||
animation-delay: 5s;
|
||||
}
|
||||
|
||||
.animate__delay-6s {
|
||||
animation-delay: 6s;
|
||||
}
|
||||
|
||||
.animate__delay-7s {
|
||||
animation-delay: 7s;
|
||||
}
|
||||
|
||||
.animate__delay-8s {
|
||||
animation-delay: 8s;
|
||||
}
|
||||
|
||||
.animate__delay-9s {
|
||||
animation-delay: 9s;
|
||||
}
|
||||
|
||||
.animate__delay-10s {
|
||||
animation-delay: 10s;
|
||||
}
|
||||
|
||||
.animate__delay-11s {
|
||||
animation-delay: 11s;
|
||||
}
|
||||
|
||||
.animate__delay-12s {
|
||||
animation-delay: 12s;
|
||||
}
|
||||
|
||||
.animate__delay-13s {
|
||||
animation-delay: 13s;
|
||||
}
|
||||
|
||||
.animate__delay-14s {
|
||||
animation-delay: 14s;
|
||||
}
|
||||
|
||||
.animate__delay-15s {
|
||||
animation-delay: 15s;
|
||||
}
|
||||
|
||||
.animate__delay-16s {
|
||||
animation-delay: 16s;
|
||||
}
|
||||
|
||||
.animate__delay-17s {
|
||||
animation-delay: 17s;
|
||||
}
|
||||
|
||||
.animate__delay-18s {
|
||||
animation-delay: 18s;
|
||||
}
|
||||
|
||||
.animate__delay-19s {
|
||||
animation-delay: 19s;
|
||||
}
|
||||
|
||||
.animate__delay-20s {
|
||||
animation-delay: 20s;
|
||||
}
|
||||
|
||||
.animate__delay-21s {
|
||||
animation-delay: 21s;
|
||||
}
|
||||
|
||||
.animate__delay-22s {
|
||||
animation-delay: 22s;
|
||||
}
|
||||
|
||||
.animate__delay-23s {
|
||||
animation-delay: 23s;
|
||||
}
|
||||
|
||||
.animate__delay-24s {
|
||||
animation-delay: 24s;
|
||||
}
|
||||
|
||||
.animate__delay-25s {
|
||||
animation-delay: 25s;
|
||||
}
|
||||
|
||||
.animate__delay-26s {
|
||||
animation-delay: 26s;
|
||||
}
|
||||
|
||||
.animate__delay-27s {
|
||||
animation-delay: 27s;
|
||||
}
|
||||
|
||||
.animate__delay-28s {
|
||||
animation-delay: 28s;
|
||||
}
|
||||
|
||||
.animate__delay-29s {
|
||||
animation-delay: 29s;
|
||||
}
|
||||
|
||||
.animate__delay-30s {
|
||||
animation-delay: 30s;
|
||||
}
|
||||
|
||||
.animate__delay-31s {
|
||||
animation-delay: 31s;
|
||||
}
|
||||
|
||||
.animate__delay-32s {
|
||||
animation-delay: 32s;
|
||||
}
|
||||
|
||||
.animate__delay-33s {
|
||||
animation-delay: 33s;
|
||||
}
|
||||
|
||||
.animate__delay-34s {
|
||||
animation-delay: 34s;
|
||||
}
|
||||
|
||||
.animate__delay-35s {
|
||||
animation-delay: 35s;
|
||||
}
|
||||
|
||||
.animate__delay-36s {
|
||||
animation-delay: 36s;
|
||||
}
|
||||
|
||||
.animate__delay-37s {
|
||||
animation-delay: 37s;
|
||||
}
|
||||
|
||||
.animate__delay-38s {
|
||||
animation-delay: 38s;
|
||||
}
|
||||
|
||||
.animate__delay-39s {
|
||||
animation-delay: 39s;
|
||||
}
|
||||
|
||||
.animate__delay-40s {
|
||||
animation-delay: 40s;
|
||||
}
|
||||
|
||||
.bg-variacolor {
|
||||
background: #c9e0dd;
|
||||
background: linear-gradient(to right, #c9e0dd 0%, #00928e 100%);
|
||||
}
|
||||
|
||||
.border-top-2 {
|
||||
border-top: 3px solid;
|
||||
}
|
||||
|
||||
ul > li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
ul > li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ul.bul0 {
|
||||
list-style-type: none;
|
||||
list-style-image: url(../img/bul0.png);
|
||||
}
|
||||
|
||||
ul.bul1 {
|
||||
list-style-type: none;
|
||||
list-style-image: url(../img/bul1.png);
|
||||
}
|
||||
|
||||
.btn-next-section {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.html-pop-style {
|
||||
border: 6px solid transparent;
|
||||
border-radius: 20px;
|
||||
background: url(../img/fondo-pop.jpg) padding-box, linear-gradient(to right, #00928e 32%, #c1c902 96%) border-box !important;
|
||||
background-size: cover !important;
|
||||
background-position: center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
.html-pop-style2 {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
background-image: url(../img/bgpop2.png);
|
||||
background-position: 100% 100%;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
Vendored
+1
File diff suppressed because one or more lines are too long
Vendored
+13
File diff suppressed because one or more lines are too long
+12403
File diff suppressed because it is too large
Load Diff
Vendored
+5
File diff suppressed because one or more lines are too long
@@ -0,0 +1,104 @@
|
||||
// Import Bootstrap functions, variables, and mixins
|
||||
@import '../bootstrap-5.3.8/scss/functions';
|
||||
@import '../bootstrap-5.3.8/scss/variables';
|
||||
@import '../bootstrap-5.3.8/scss/mixins';
|
||||
|
||||
// Definir colores personalizados - Actualizados a azules/grises
|
||||
$custom-colors: (
|
||||
'green-1': #006c6a,
|
||||
'green-2': #81b8b2,
|
||||
'green-3': #c9e0dd,
|
||||
'green-4': #4bc7b9,
|
||||
'var-1': #dcdcdc,
|
||||
'blue-1': #c6dae0,
|
||||
'purple-1': #b698cb,
|
||||
'purple-2': #8a7cd1,
|
||||
'purple-3': #9f32c2,
|
||||
'pink-1': #ff3983,
|
||||
'pink-2': #ffd0ee,
|
||||
'yellow-1': #fbf3d5,
|
||||
);
|
||||
|
||||
// Colores base principales - Azules profesionales
|
||||
$primary: #00928e; // Azul corporativo moderno
|
||||
$secondary: #010068; // Coral anaranjado (mantenido como acento)
|
||||
|
||||
// Variaciones del primario - Escala de azules
|
||||
$primary-light: lighten($primary, 15%);
|
||||
$primary-lighter: lighten($primary, 30%);
|
||||
$primary-dark: darken($primary, 15%);
|
||||
$primary-darker: darken($primary, 25%);
|
||||
|
||||
// Variaciones del secundario - Coral
|
||||
$secondary-light: lighten($secondary, 10%);
|
||||
$secondary-lighter: lighten($secondary, 20%);
|
||||
$secondary-dark: darken($secondary, 10%);
|
||||
$secondary-darker: darken($secondary, 20%);
|
||||
|
||||
// Colores adicionales - Armonía azul/gris
|
||||
$success: #a4d65e; // Teal (mantenido para consistencia)
|
||||
$danger: #fe5000; // Rojo vibrante pero sofisticado
|
||||
$warning: #f39c12; // Ámbar en lugar de dorado
|
||||
$info: #3498db; // Azul brillante
|
||||
$light: #f8f9fa; // Gris muy claro
|
||||
$dark: #000000; // Azul noche
|
||||
$muted: #7f8c8d; // Gris neutro
|
||||
$white: #ffffff; // Blanco puro
|
||||
|
||||
// Combinar colores en $theme-colors
|
||||
$theme-colors: map-merge(
|
||||
(
|
||||
'primary': $primary,
|
||||
'primary-light': $primary-light,
|
||||
'primary-lighter': $primary-lighter,
|
||||
'primary-dark': $primary-dark,
|
||||
'primary-darker': $primary-darker,
|
||||
'secondary': $secondary,
|
||||
'secondary-light': $secondary-light,
|
||||
'secondary-lighter': $secondary-lighter,
|
||||
'secondary-dark': $secondary-dark,
|
||||
'secondary-darker': $secondary-darker,
|
||||
'success': $success,
|
||||
'danger': $danger,
|
||||
'warning': $warning,
|
||||
'info': $info,
|
||||
'light': $light,
|
||||
'dark': $dark,
|
||||
'muted': $muted,
|
||||
'white': $white,
|
||||
),
|
||||
$custom-colors
|
||||
);
|
||||
|
||||
// Configuración de fondo y texto
|
||||
$body-bg: $white;
|
||||
$body-color: #000000; // Azul/gris oscuro para texto
|
||||
|
||||
// Configuración de Swiper - Actualizada a azules
|
||||
:root {
|
||||
--swiper-theme-color: $primary;
|
||||
--swiper-navigation-color: $primary;
|
||||
--swiper-pagination-color: $primary;
|
||||
--swiper-pagination-bullet-inactive-color: map-get($custom-colors, 'gris-6');
|
||||
}
|
||||
|
||||
.swiper {
|
||||
&-button-prev,
|
||||
&-button-next {
|
||||
&:hover {
|
||||
color: $primary-dark;
|
||||
background: rgba($light, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
&-pagination-bullet-active {
|
||||
background: $primary;
|
||||
}
|
||||
|
||||
&-scrollbar-drag {
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
// Import Bootstrap components
|
||||
@import '../bootstrap-5.3.8/scss/bootstrap';
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,195 @@
|
||||
|
||||
// Definición de colores principales
|
||||
:root {
|
||||
--color1: #47545d;
|
||||
--color2: #c9d0d3;
|
||||
}
|
||||
|
||||
// Estilos generales del timeline
|
||||
.main-timeline {
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
border-right: 10px solid var(--color1);
|
||||
width: 50%;
|
||||
padding: 10px 20px 10px 0;
|
||||
box-shadow: 10px 0 var(--color2);
|
||||
float: left;
|
||||
min-height: 160px;
|
||||
|
||||
&:last-child {
|
||||
min-height: 130px;
|
||||
}
|
||||
|
||||
&-content {
|
||||
text-align: center;
|
||||
display: block;
|
||||
position: relative;
|
||||
border-radius: 10px 10px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
background: var(--color2);
|
||||
width: 80px;
|
||||
height: 3px;
|
||||
transform: translateY(-50%);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -120px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
right: -125px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-year {
|
||||
border-radius: 50%;
|
||||
transform: translateY(-50%);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -300px;
|
||||
|
||||
img {
|
||||
max-width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #fff;
|
||||
background: var(--color2);
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
padding: 10px 10px 9px;
|
||||
margin: 0;
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.description {
|
||||
letter-spacing: 1px;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.timeline:nth-child(even) {
|
||||
float: right;
|
||||
border: none;
|
||||
border-left: 10px solid var(--color2);
|
||||
box-shadow: -10px 0 var(--color1);
|
||||
padding: 10px 0 10px 20px;
|
||||
margin: 0 0 0 10px;
|
||||
|
||||
.timeline-content {
|
||||
&:before {
|
||||
right: auto;
|
||||
left: -120px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: auto;
|
||||
left: -125px;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-year {
|
||||
right: auto;
|
||||
left: -300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Colores dinámicos según el índice
|
||||
@for $i from 1 through 5 {
|
||||
.main-timeline .timeline:nth-child(#{$i}) {
|
||||
--color1: var(--bs-#{nth(success naranja-1 vino secondary naranja-2 , $i)});
|
||||
--color2: color-mix(in srgb, var(--color1) 80%, black);
|
||||
}
|
||||
}
|
||||
|
||||
// Estilos responsive para móviles
|
||||
@media screen and (max-width: 767px) {
|
||||
.main-timeline {
|
||||
.timeline,
|
||||
.timeline:nth-child(even) {
|
||||
width: 100%;
|
||||
padding: 100px 0 20px 20px;
|
||||
margin: 0 0 0 10px;
|
||||
box-shadow: -10px 0 var(--color2);
|
||||
border: none;
|
||||
border-left: 10px solid var(--color1);
|
||||
float: none;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
&:before,
|
||||
&:after {
|
||||
top: -50px;
|
||||
left: -20px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
width: 15px;
|
||||
right: auto;
|
||||
left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-year,
|
||||
.timeline:nth-child(even) .timeline-year {
|
||||
transform: translateX(-50%);
|
||||
top: -85px;
|
||||
left: 50%;
|
||||
right: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: -73px;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline:nth-child(even) {
|
||||
float: right;
|
||||
border: none;
|
||||
border-left: 10px solid var(--color2);
|
||||
box-shadow: -10px 0 var(--color1);
|
||||
padding: 10px 0 10px 20px;
|
||||
margin: 0 0 0 10px;
|
||||
|
||||
.timeline-content {
|
||||
&:before {
|
||||
right: auto;
|
||||
left: -20px !important;
|
||||
}
|
||||
|
||||
&:after {
|
||||
width: 15px !important;
|
||||
right: auto !important;
|
||||
left: 15px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-year {
|
||||
right: auto;
|
||||
left: -300px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
.number {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
font-size: 36px;
|
||||
background-color: #9aacb7;
|
||||
color: #fff;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.timeline .row {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
/* Para filas impares (1, 3, 5...) */
|
||||
|
||||
.timeline .col-6.col-md-4.text-md-start.text-center {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
/* Para filas pares (2, 4, 6...) */
|
||||
.timeline .row:nth-child(even) .col-lg-1 {
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.timeline .row:nth-child(even) .col-6.col-md-4.text-md-end.text-center {
|
||||
order: 1;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.timeline .row .col-12.col-md-4.mt-4.mt-md-0 {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.timeline::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
background-color: #9aacb7;
|
||||
top: 5%;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
margin-left: -2px;
|
||||
height: 91%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.number::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
background-color: #9aacb7;
|
||||
width: 400%;
|
||||
top: 50%;
|
||||
left: -150%;
|
||||
z-index: -1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.timeline .row:nth-child(even) .col-lg-1,
|
||||
.timeline .row .col-12.col-md-4.mt-4.mt-md-0,
|
||||
.timeline .row:nth-child(even) .col-6.col-md-4.text-md-end.text-center {
|
||||
order: inherit;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user