✨ Añade ejemplo intro-colors y actualiza paleta
This commit is contained in:
parent
f85f2ea2d1
commit
d20a1f5f62
6 changed files with 154 additions and 50 deletions
|
|
@ -3,15 +3,16 @@
|
|||
--intro-bg-img-set: image-set(url('/img/intro-header.avif') type('image/avif'), url('/img/intro-header.webp') type('image/webp'), var(--intro-bg-img) type('image/jpeg'));
|
||||
--intro-bg-img-sm: url('/img/intro-header-sm.jpg');
|
||||
--intro-bg-img-sm-set: image-set(url('/img/intro-header-sm.avif') type('image/avif'), url('/img/intro-header-sm.webp') type('image/webp'), var(--intro-bg-img-sm) type('image/jpeg'));
|
||||
--intro-bg-color: #8c5919;
|
||||
--intro-bg-block-1: #b689ff;
|
||||
--intro-bg-block-2: #fecaca;
|
||||
--intro-bg-block-3: #e6a9e2;
|
||||
--intro-bg-block-4: #ffedca;
|
||||
--intro-bg-block-5: #ffffff;
|
||||
--intro-bg-color: #7a430e;
|
||||
--intro-bg-block-1: #ffb84b;
|
||||
--intro-bg-block-2: #ffc66f;
|
||||
--intro-bg-block-3: #ffd493;
|
||||
--intro-bg-block-4: #ffe3b7;
|
||||
--intro-bg-block-5: #fff1db;
|
||||
--intro-bg-block-6: #ffffff;
|
||||
--intro-color: #1a202c;
|
||||
--intro-color-gray: #e4e4e7;
|
||||
--intro-color-link: #1e4eae;
|
||||
--intro-color-gray: #e8e3da;
|
||||
--intro-color-link: #8b2500;
|
||||
--intro-focus-outline: 2px solid var(--intro-color-link);
|
||||
--intro-focus-outline-offset: 2px;
|
||||
--intro-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
|
|
@ -102,7 +103,7 @@ body {
|
|||
font-size: clamp(2.25rem, 1.3177rem + 3.9779vw, 6.5rem);
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 110%;
|
||||
line-height: 135%;
|
||||
text-shadow: none;
|
||||
}
|
||||
.intro-header__image {
|
||||
|
|
@ -123,7 +124,7 @@ body {
|
|||
background-image: var(--intro-bg-img-set);
|
||||
}
|
||||
.intro-header__title {
|
||||
padding: 1.2rem 2rem 2.6rem 2rem;
|
||||
padding: 0 2rem 2.6rem 2rem;
|
||||
}
|
||||
.intro-header__image {
|
||||
justify-content: flex-end;
|
||||
|
|
@ -140,10 +141,13 @@ body {
|
|||
.intro-content {
|
||||
height: auto;
|
||||
margin-top: 1.6rem;
|
||||
width: 100%;
|
||||
}
|
||||
.intro-content__body {
|
||||
box-sizing: border-box;
|
||||
max-width: 80rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.intro-content__body:before,
|
||||
.intro-content__body:after {
|
||||
|
|
@ -152,10 +156,10 @@ body {
|
|||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(130deg, rgba(13, 44, 91, 0) 0%, #ddff95 77.4%);
|
||||
margin: 0 -10.375rem;
|
||||
margin: 0 -1.2rem;
|
||||
filter: blur(2.75rem);
|
||||
opacity: 0.8;
|
||||
inset: 11.75rem;
|
||||
inset: unset;
|
||||
}
|
||||
.intro-content__body:before {
|
||||
top: -1rem;
|
||||
|
|
@ -163,22 +167,22 @@ body {
|
|||
.intro-content__body:after {
|
||||
bottom: -1rem;
|
||||
}
|
||||
@media (max-width: 48rem) {
|
||||
@media (width <= 48rem) {
|
||||
.intro-content__body {
|
||||
margin-top: -9.8rem;
|
||||
}
|
||||
.intro-content__body:before,
|
||||
.intro-content__body:after {
|
||||
inset: unset;
|
||||
}
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
@media (width >= 64rem) {
|
||||
.intro-content {
|
||||
margin-top: 0;
|
||||
}
|
||||
.intro-content__body {
|
||||
margin-top: -5.7rem;
|
||||
}
|
||||
.intro-content__body:before,
|
||||
.intro-content__body:after {
|
||||
inset: 11.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.intro-button {
|
||||
|
|
@ -307,7 +311,7 @@ body {
|
|||
.intro-button__link:hover span {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
@media (max-width: 48rem) {
|
||||
@media (width <= 48rem) {
|
||||
.intro-header {
|
||||
padding-bottom: 9rem;;
|
||||
}
|
||||
|
|
@ -321,7 +325,7 @@ body {
|
|||
padding-top: .5rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 48rem) {
|
||||
@media (width > 48rem) {
|
||||
.intro-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -344,9 +348,6 @@ body {
|
|||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
font-size: 1.3125rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 0;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
|
|
@ -354,24 +355,19 @@ body {
|
|||
.intro-text__children {
|
||||
padding: 2.5rem 1.063rem 0.75rem;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
.intro-text__children p {
|
||||
width: 100%;
|
||||
line-height: 150%;
|
||||
font-weight: 400;
|
||||
font-size: 1.45rem;
|
||||
font-size: 1.5rem;
|
||||
margin: 0 0 1.5rem;
|
||||
}
|
||||
@media (min-width: 48rem) {
|
||||
.intro-text {
|
||||
font-size: 1.375rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
@media (width > 48rem) {
|
||||
.intro-button + .intro-text__children {
|
||||
padding-top: 7rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
@media (width >= 64rem) {
|
||||
.intro-header {
|
||||
padding-bottom: 9rem;;
|
||||
}
|
||||
|
|
@ -399,7 +395,7 @@ body {
|
|||
.intro-text__children .block__title span {
|
||||
display: inline-block;
|
||||
padding: 10px 30px 14px;
|
||||
margin: 30px 0 0 20px;
|
||||
margin: 30px 20px 0;
|
||||
background: white;
|
||||
border: 5px solid;
|
||||
border-radius: 30px;
|
||||
|
|
@ -422,36 +418,41 @@ body {
|
|||
}
|
||||
.intro-text__children .block__title:after {
|
||||
content: "";
|
||||
height: 70rem;
|
||||
height: 120%;
|
||||
position: absolute;
|
||||
top: 42px;
|
||||
left: -15%;
|
||||
width: 130%;
|
||||
left: -25%;
|
||||
width: 150%;
|
||||
z-index: -10;
|
||||
background: var(--intro-bg-block-1);
|
||||
transform: rotate(2deg);
|
||||
}
|
||||
.intro-text__children .block:nth-of-type(5n+1) .block__title:after {
|
||||
.intro-text__children .block:nth-of-type(6n+1) .block__title:after {
|
||||
background: var(--intro-bg-block-1);
|
||||
}
|
||||
.intro-text__children .block:nth-of-type(5n+2) .block__title:after {
|
||||
.intro-text__children .block:nth-of-type(6n+2) .block__title:after {
|
||||
background: var(--intro-bg-block-2);
|
||||
}
|
||||
.intro-text__children .block:nth-of-type(5n+3) .block__title:after {
|
||||
.intro-text__children .block:nth-of-type(6n+3) .block__title:after {
|
||||
background: var(--intro-bg-block-3);
|
||||
}
|
||||
.intro-text__children .block:nth-of-type(5n+4) .block__title:after {
|
||||
.intro-text__children .block:nth-of-type(6n+4) .block__title:after {
|
||||
background: var(--intro-bg-block-4);
|
||||
}
|
||||
.intro-text__children .block:nth-of-type(5n+5) .block__title:after {
|
||||
.intro-text__children .block:nth-of-type(6n+5) .block__title:after {
|
||||
background: var(--intro-bg-block-5);
|
||||
}
|
||||
.intro-text__children .block:nth-of-type(6n+6) .block__title:after {
|
||||
background: var(--intro-bg-block-6);
|
||||
}
|
||||
|
||||
#intro-badges {
|
||||
display: none;
|
||||
margin-bottom: 1.1rem;
|
||||
text-align: center;
|
||||
}
|
||||
#intro-badges img {
|
||||
margin-bottom: 1.1rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Intro Footer
|
||||
|
|
@ -469,11 +470,8 @@ body {
|
|||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin: 0 auto;
|
||||
padding: 0 10.625rem 2rem;
|
||||
padding: 0 10.625rem;
|
||||
max-width: 80rem;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 300;
|
||||
line-height: 100%;
|
||||
}
|
||||
.intro-footer__body a:visited {
|
||||
color: var(--intro-color-gray);
|
||||
|
|
@ -495,13 +493,13 @@ body {
|
|||
flex-wrap: wrap;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
@media (max-width: 48rem) {
|
||||
@media (width <= 48rem) {
|
||||
.intro-footer__logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 64rem) {
|
||||
@media (width <= 64rem) {
|
||||
.intro-footer__body {
|
||||
padding: 0 1rem 2rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue