721 lines
15 KiB
SCSS
721 lines
15 KiB
SCSS
@use "sass:map";
|
|
@import 'reset';
|
|
|
|
$html-font-size: 16px;
|
|
@function strip_unit($value) {
|
|
@return $value / ($value * 0 + 1);
|
|
}
|
|
@function rem($px_value) {
|
|
@return #{strip_unit($px_value) / strip_unit($html-font-size)}rem;
|
|
}
|
|
@function font_size($font) {
|
|
@return #{strip_unit($font) / 12}rem;
|
|
}
|
|
|
|
$gris: rgb(204, 204, 204);
|
|
$gris-texto: rgb(51, 51, 51);
|
|
|
|
body {
|
|
font-family: Roboto, sans;
|
|
color: $gris-texto;
|
|
}
|
|
|
|
$full_width: 1080;
|
|
|
|
$heights: (
|
|
"cabezal": (400/16),
|
|
"seccion1": 25,
|
|
"seccion2": 27.5,
|
|
"dimensiones": 27.5,
|
|
"construido": 21.875,
|
|
"corporativos": 25,
|
|
"felices": 21.875,
|
|
"formulario": 30
|
|
);
|
|
|
|
#backgrounds {
|
|
.cabezal {
|
|
height: (map.get($heights, 'cabezal'))+rem;
|
|
|
|
background-image: url('../images/banner.jpg');
|
|
background-repeat: no-repeat;
|
|
background-size: rem(1600);
|
|
background-position: top center;
|
|
background-color: rgba(0, 0, 0, .4);
|
|
}
|
|
.seccion1 {
|
|
height: (map.get($heights, "seccion1"))+rem;
|
|
|
|
background-image: linear-gradient($gris, $gris);
|
|
background-position: left rem(112);
|
|
background-size: 100% rem(128);
|
|
background-repeat: no-repeat;
|
|
}
|
|
.seccion2 {
|
|
height: (map.get($heights, "seccion2"))+rem;
|
|
|
|
background-image: url('../images/fondo23.png');
|
|
//background-color: rgb(240, 240, 240);
|
|
|
|
.diagonal {
|
|
border-bottom: (map.get($heights, 'seccion2'))+rem solid rgba($gris, .5);
|
|
border-right: rem(1900) solid transparent;
|
|
}
|
|
}
|
|
.dimensiones {
|
|
height: (map.get($heights, "dimensiones"))+rem;
|
|
|
|
background-image: url('../images/fondo23.png');
|
|
.fondo-gris {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba($gris, .5);
|
|
}
|
|
}
|
|
.construido {
|
|
height: (map.get($heights, "construido"))+rem;
|
|
|
|
//background-image: url('../images/fondo4.png');
|
|
background-color: rgb(100, 200, 255);
|
|
}
|
|
.corporativos {
|
|
height: (map.get($heights, "corporativos"))+rem;
|
|
|
|
background-image: url('../images/fondo5.png');
|
|
}
|
|
.testimonios {
|
|
height: (map.get($heights, "felices"))+rem;
|
|
|
|
background-image: linear-gradient($gris, $gris);
|
|
background-position: left 3rem;
|
|
background-size: 100% 5rem;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.formulario {
|
|
height: (map.get($heights, "formulario"))+rem;
|
|
background-color: $gris;
|
|
clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
|
|
}
|
|
}
|
|
|
|
$column1: 67;
|
|
$column2: 33;
|
|
|
|
$content_height: 0;
|
|
$column_height1: 0;
|
|
@each $name, $val in $heights {
|
|
$content_height: $content_height + $val;
|
|
@if $name != 'corporativos' and $name != 'felices' and $name != 'formulario' and $name != 'cabezal' {
|
|
$column_height1: $column_height1 + $val;
|
|
}
|
|
}
|
|
|
|
#content {
|
|
max-width: rem($full_width) !important;
|
|
height: ($content_height)+rem;
|
|
|
|
position: relative;
|
|
top: (-$content_height)+rem;
|
|
|
|
#header {
|
|
color: rgb(255, 255, 255);
|
|
|
|
width: 100%;
|
|
height: (map.get($heights, 'cabezal'))+rem;
|
|
|
|
.ui.menu {
|
|
border: none !important;
|
|
background: none !important;
|
|
background-color: rgba(100, 100, 100, .3) !important;
|
|
box-shadow: none !important;
|
|
margin: 0 !important;
|
|
|
|
.dropdown .menu {
|
|
/*background: none !important;
|
|
border: none !important;
|
|
box-shadow: none !important;*/
|
|
color: rgb(0, 0, 0);
|
|
font-size: 1rem;
|
|
.item {
|
|
padding: 1rem !important;
|
|
}
|
|
}
|
|
|
|
.item {
|
|
color: inherit !important;
|
|
font-size: 2rem;
|
|
|
|
padding: rem(20) !important;
|
|
|
|
.shopping.cart div {
|
|
position: relative;
|
|
color: rgb(0, 0, 0);
|
|
display: inline-block;
|
|
top: -2.6rem;
|
|
left: 0.2rem;
|
|
font-size: 1rem;
|
|
font-family: Roboto, sans;
|
|
}
|
|
}
|
|
}
|
|
|
|
.logo {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
|
|
img {
|
|
width: 50%;
|
|
max-width: rem(1030);
|
|
}
|
|
.frase1 {
|
|
font-size: 1.5rem;
|
|
}
|
|
.frase2 {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
&>.column {
|
|
display: inline-block;
|
|
float: left;
|
|
|
|
padding-left: 1rem !important;
|
|
padding-right: 1rem !important;
|
|
|
|
&::after {
|
|
clear: both;
|
|
}
|
|
}
|
|
&>.column1 {
|
|
width: percentage($column1/100);
|
|
|
|
|
|
#seccion1 {
|
|
height: (map.get($heights, "seccion1"))+rem;
|
|
width: 100%;
|
|
|
|
.image-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: rem(112+128);
|
|
|
|
img {
|
|
height: rem(155);
|
|
width: rem(188);
|
|
margin-top: rem(85);
|
|
}
|
|
}
|
|
.paragraph {
|
|
padding-top: rem(28);
|
|
line-height: rem(14);
|
|
text-align: justify;
|
|
|
|
.header {
|
|
margin-bottom: 1rem;
|
|
font-size: rem(22);
|
|
}
|
|
}
|
|
}
|
|
|
|
#seccion2 {
|
|
height: (map.get($heights, "seccion2"))+rem;
|
|
|
|
&>.column {
|
|
display: inline-block;
|
|
float: left;
|
|
width: 50%;
|
|
|
|
&::after {
|
|
clear: both;
|
|
}
|
|
}
|
|
.column1 {
|
|
margin-top: rem(80);
|
|
img {
|
|
width: rem(317);
|
|
height: rem(317);
|
|
}
|
|
}
|
|
.column2 {
|
|
margin-top: rem(114);
|
|
.row:first-child {
|
|
background-color: #00427b;
|
|
color: rgb(256, 256, 256);
|
|
height: rem(180);
|
|
width: rem(380);
|
|
padding: 2rem;
|
|
margin-left: -3rem;
|
|
overflow: hidden;
|
|
|
|
.header {
|
|
font-weight: bold;
|
|
font-size: rem(16);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
ul {
|
|
list-style: disc inside;
|
|
font-size: font-size(10);
|
|
}
|
|
}
|
|
.row:last-child {
|
|
margin-top: rem(18);
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
img {
|
|
width: rem(70);
|
|
height: rem(85);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#dimensiones {
|
|
height: (map.get($heights, "dimensiones"))+rem;
|
|
|
|
.header {
|
|
padding: rem(37) 0 !important;
|
|
.bigger {
|
|
font-size: rem(16);
|
|
}
|
|
}
|
|
|
|
.images {
|
|
display: flex;
|
|
|
|
img {
|
|
float: left;
|
|
width: rem(313);
|
|
height: rem(235);
|
|
}
|
|
}
|
|
}
|
|
|
|
#construido {
|
|
height: (map.get($heights, "construido"))+rem;
|
|
|
|
.column2 {
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
&>.column2 {
|
|
width: percentage($column2/100);
|
|
height: ($column_height1)+rem;
|
|
|
|
.sticky {
|
|
height: rem(265);
|
|
width: rem(310);
|
|
margin: auto;
|
|
|
|
.row:first-child {
|
|
height: rem(170);
|
|
margin-top: rem(80);
|
|
|
|
.column {
|
|
display: inline-block;
|
|
float: left;
|
|
|
|
&::after {
|
|
clear: both;
|
|
}
|
|
}
|
|
.column1 {
|
|
vertical-align: bottom;
|
|
padding-top: rem(20);
|
|
width: rem(310*2/3);
|
|
|
|
.linea {
|
|
margin-bottom: rem(10);
|
|
}
|
|
|
|
.titulo {
|
|
font-size: font_size(25);
|
|
}
|
|
.precio {
|
|
font-size: font_size(16);
|
|
}
|
|
font-size: font_size(14);
|
|
|
|
.colores {
|
|
vertical-align: center;
|
|
|
|
.text {
|
|
margin-right: rem(3);
|
|
}
|
|
|
|
.white {
|
|
border: thin solid rgb(0, 0, 0);
|
|
background-color: rgb(255, 255, 255);
|
|
}
|
|
.black {
|
|
background-color: rgb(0, 0, 0);
|
|
}
|
|
.blue {
|
|
background-color: rgb(0, 0, 255);
|
|
}
|
|
.green {
|
|
background-color: rgb(0, 255, 0);
|
|
}
|
|
.yellow {
|
|
background-color: rgb(255, 255, 0);
|
|
}
|
|
.orange {
|
|
background-color: rgb(255, 130, 0);
|
|
}
|
|
.red {
|
|
background-color: rgb(255, 0, 0);
|
|
}
|
|
.circle {
|
|
display: inline-block;
|
|
$a: 12;
|
|
width: rem($a);
|
|
height: rem($a);
|
|
border-radius: 8000px;
|
|
margin: auto rem(1);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.input {
|
|
width: 4.5rem;
|
|
border: thin solid rgb(0, 0, 0);
|
|
text-align: center;
|
|
padding: .5rem 0.05rem;
|
|
font-size: font_size(10);
|
|
|
|
button {
|
|
background: none;
|
|
border: none;
|
|
width: 1rem;
|
|
margin: 0;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
}
|
|
input {
|
|
width: 2rem;
|
|
background: none;
|
|
margin: 0;
|
|
border: 0;
|
|
padding: 0;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
.column2 {
|
|
width: rem(310/3);
|
|
|
|
img {
|
|
width: rem(110);
|
|
height: rem(160);
|
|
}
|
|
}
|
|
}
|
|
.row:last-child {
|
|
.button {
|
|
border-radius: 0 !important;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#corporativos {
|
|
width: 100%;
|
|
height: (map.get($heights, "corporativos"))+rem;
|
|
|
|
margin-top: ($column_height1)+rem !important;
|
|
|
|
&>.column {
|
|
display: inline-block;
|
|
float: left;
|
|
|
|
padding-left: 1rem !important;
|
|
padding-right: 1rem !important;
|
|
|
|
&::after {
|
|
clear: both;
|
|
}
|
|
}
|
|
.column1 {
|
|
width: percentage(67/100);
|
|
|
|
&>.header {
|
|
padding: rem(37) 0 !important;
|
|
.bigger {
|
|
font-size: font_size(16);
|
|
}
|
|
}
|
|
.opciones {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
.opcion {
|
|
display: inline-block;
|
|
|
|
.img-grande {
|
|
display: inline-block;
|
|
padding-right: rem(12);
|
|
img {
|
|
width: rem(135);
|
|
height: rem(200);
|
|
}
|
|
}
|
|
.descripcion {
|
|
display: inline-block;
|
|
|
|
ul {
|
|
list-style: disc inside;
|
|
}
|
|
|
|
.images {
|
|
img {
|
|
width: rem(70);
|
|
height: rem(85);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.column2 {
|
|
width: percentage(33/100);
|
|
height: 100%;
|
|
|
|
form {
|
|
.colores {
|
|
vertical-align: center;
|
|
|
|
.text {
|
|
margin-right: rem(3);
|
|
}
|
|
|
|
.white {
|
|
border: thin solid rgb(0, 0, 0);
|
|
background-color: rgb(255, 255, 255);
|
|
}
|
|
.black {
|
|
background-color: rgb(0, 0, 0);
|
|
}
|
|
.blue {
|
|
background-color: rgb(0, 0, 255);
|
|
}
|
|
.green {
|
|
background-color: rgb(0, 255, 0);
|
|
}
|
|
.yellow {
|
|
background-color: rgb(255, 255, 0);
|
|
}
|
|
.orange {
|
|
background-color: rgb(255, 130, 0);
|
|
}
|
|
.red {
|
|
background-color: rgb(255, 0, 0);
|
|
}
|
|
.circle {
|
|
display: inline-block;
|
|
$a: 12;
|
|
width: rem($a);
|
|
height: rem($a);
|
|
border-radius: 8000px;
|
|
margin: auto rem(1);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.input.cantidad {
|
|
width: 4.5rem;
|
|
border: thin solid rgb(0, 0, 0);
|
|
text-align: center;
|
|
padding: .5rem 0.05rem;
|
|
font-size: font_size(10);
|
|
|
|
button {
|
|
background: none;
|
|
border: none;
|
|
width: 1rem;
|
|
margin: 0;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
}
|
|
input {
|
|
width: 2rem;
|
|
background: none;
|
|
margin: 0;
|
|
border: 0;
|
|
padding: 0;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.input [type="file"] {
|
|
display: none;
|
|
}
|
|
.input [type="text"] {
|
|
height: rem(18);
|
|
background-color: rgba(255, 255, 255, .5);
|
|
border-radius: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#felices {
|
|
height: (map.get($heights, "felices"))+rem;
|
|
|
|
padding: 0 1rem !important;
|
|
}
|
|
|
|
#formulario {
|
|
height: (map.get($heights, "formulario"))+rem;
|
|
|
|
padding: 0 1rem !important;
|
|
|
|
.whatsapp-link {
|
|
color: inherit;
|
|
}
|
|
&>.column {
|
|
float: left;
|
|
|
|
padding-left: 1rem !important;
|
|
padding-right: 1rem !important;
|
|
|
|
&::after {
|
|
clear: both;
|
|
}
|
|
}
|
|
&>.flotante {
|
|
position: absolute;
|
|
top: rem(183);
|
|
margin: auto;
|
|
left: 40%;
|
|
width: rem($full_width/5);
|
|
text-align: center;
|
|
|
|
&>.content {
|
|
width: rem(130);
|
|
margin: auto;
|
|
left: -50%;
|
|
|
|
.item {
|
|
display: block;
|
|
padding: rem(5) 0;
|
|
}
|
|
div.whatsapp {
|
|
height: rem(30);
|
|
background-color: #1a9947;
|
|
color: #fff;
|
|
font-size: rem(10);
|
|
|
|
&>i {
|
|
position: relative;
|
|
font-size: font_size(16);
|
|
top: rem(3);
|
|
}
|
|
}
|
|
.rrss {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: rem(20);
|
|
|
|
i.inverted.grey {
|
|
color: white !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&>.column1 {
|
|
width: percentage($column1/100);
|
|
margin-top: rem(27);
|
|
|
|
&>img {
|
|
width: rem(434);
|
|
height: rem(280);
|
|
float: left;
|
|
}
|
|
}
|
|
&>.column2 {
|
|
width: percentage($column2/100);
|
|
|
|
.header {
|
|
margin-top: rem(20);
|
|
text-align: center;
|
|
font-size: font_size(22);
|
|
|
|
.whatsapp-link {
|
|
display: inline-block;
|
|
width: rem(25);
|
|
height: rem(25);
|
|
font-size: font_size(25);
|
|
}
|
|
}
|
|
|
|
.paragraph {
|
|
padding-top: 1rem;
|
|
padding-bottom: rem(25);
|
|
justify-content: center;
|
|
}
|
|
|
|
form {
|
|
input {
|
|
border-radius: 0 !important;
|
|
height: rem(18);
|
|
margin-bottom: rem(9);
|
|
background-color: rgba(255, 255, 255, .5);
|
|
font-size: font_size(10);
|
|
&::placeholder {
|
|
color: $gris-texto;
|
|
}
|
|
}
|
|
textarea {
|
|
border-radius: 0 !important;
|
|
height: rem(72);
|
|
margin-bottom: rem(25);
|
|
background-color: rgba(255, 255, 255, .5);
|
|
font-size: font_size(10);
|
|
&::placeholder {
|
|
color: $gris-texto;
|
|
}
|
|
}
|
|
.button {
|
|
width: 100%;
|
|
border-radius: 0 !important;
|
|
background-color: white;
|
|
color: $gris-texto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
section {
|
|
background: none;
|
|
|
|
&.segment>.container {
|
|
height: 100%;
|
|
|
|
&>.column1 {
|
|
display: inline-block;
|
|
width: ($column1)+rem;
|
|
}
|
|
&>.column2 {
|
|
display: inline-block;
|
|
width: ($column2)+rem;
|
|
}
|
|
}
|
|
}
|
|
.simple.segment {
|
|
border: none !important;
|
|
border-radius: 0 !important;
|
|
box-shadow: none !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
|
|
&>.ui.grid {
|
|
height: 100%;
|
|
}
|
|
}
|
|
.fondo-blanco {
|
|
background-color: rgba(255, 255, 255, .5);
|
|
}
|
|
}
|