Files
theme_qualisaude/style/capa/style.less
eduardogusmao ac035071ec Initial commit
2019-08-27 11:32:32 -03:00

852 lines
22 KiB
Plaintext

//============================ Libraries
@import "css3";
/*@import "libs/noGrid";
@import "libs/grid";*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,600,700,800');
//============================ vars
.fontsize-open-light( @size: 13px, @cor: #fff ) {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: @size;
color: @cor;
}
.fontsize-open-lightitalic( @size: 13px, @cor: #fff ) {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-style: italic;
font-size: @size;
color: @cor;
}
.fontsize-open-regular( @size: 13px, @cor: #fff ) {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: @size;
color: @cor;
}
.fontsize-open-semibold( @size: 13px, @cor: #fff ) {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: @size;
color: @cor;
}
.fontsize-open-bold( @size: 13px, @cor: #fff ) {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: @size;
color: @cor;
}
.fontsize-open-extrabold( @size: 13px, @cor: #fff ) {
font-family: 'Open Sans', sans-serif;
font-weight: 800;
font-size: @size;
color: @cor;
}
@color-menu: #fff;
@color-menu-hover: #466415;
@color-title: #ffffff;
//============================ functions
//============================ html
html, body {
margin: 0;
padding: 0;
}
body {
/*background: url('../img/bg/capa-amarela.jpg') no-repeat center center fixed; */
//background-image: url('../img/bg/capa-amarela.jpg');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
h1, h2, h3 {
margin: 0;
padding: 0;
}
/* Inicial */
section#inicial {
padding: 90px 0 0 0;
#content-stage {
section#logos {
margin: 0 0 60px 0;
figure {
//float: right;
//margin: 0 27px 0 0;
&:first-child {
margin-right: 0;
}
}
}
section#titulo {
text-align: right;
h1 {
.fontsize-open-extrabold( 131px, #fff );
letter-spacing: -5px;
line-height: 127px;
}
h2 {
.fontsize-open-regular( 56px, #fff );
}
}
section#formulario {
margin: 60px 0 0 0;
input {
border-radius: 0;
border: solid 1px #765805;
margin: 4px 0 0 0;
.fontsize-open-lightitalic( 20px, #000 );
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #000;
}
&::-moz-placeholder { /* Firefox 19+ */
color: #000;
}
&:-ms-input-placeholder { /* IE 10+ */
color: #000;
}
&:-moz-placeholder { /* Firefox 18- */
color: #000;
}
}
button {
width: 100%;
margin: 4px 0 0 0;
background-color: rgba(0, 0, 0, 0.34);
color: #fff;
border-radius: 0;
.fontsize-open-light( 20px, #fff );
}
a {
&.btn-default {
width: 100%;
margin: 4px 0 0 0;
border-radius: 0;
.fontsize-open-regular( 11px, #000 );
}
}
}
section#conteudo {
margin: 10px 0 0 0;
h3 {
.fontsize-open-regular( 34px, #fff );
}
ul {
&.slide {
padding: 0 30px 0 30px;
li {
h1 {
.fontsize-open-regular( 52px, #fff );
margin: 0 0 15px 0;
}
p {
.fontsize-open-light( 20px, #fff );
line-height: 30px;
}
a {
&.saiba-mais {
.fontsize-open-regular( 25px, #fff );
display: block;
margin: 15px 0 0 0;
}
}
}
}
}
.carousel {
.carousel-indicators {
display: none;
}
.carousel-inner {
height: 202px;
width: 530px;
margin-left: 38px;
/*padding: 0 30px 0 40px;*/
.item {
height: 202px;
.carousel-caption {
padding: 0;
position: initial;
text-align: left;
h1 {
.fontsize-open-regular( 52px, #fff );
margin: 0 0 15px 0;
}
p {
.fontsize-open-light( 20px, #fff );
line-height: 28px;
}
a {
&.saiba-mais {
.fontsize-open-regular( 25px, #fff );
display: block;
margin: 15px 0 0 0;
}
}
}
}
}
.carousel-control {
top: 38%;
&.left {
background-image: none;
left: -45px;
}
&.right {
background-image: none;
right: -7%;
}
span {
&.glyphicon {
display: none;
}
}
}
}
.info {
padding-bottom: 41px;
p {
.fontsize-open-light( 34px, #fff );
&.numero {
.fontsize-open-extrabold( 48px, #fff );
}
}
.row-fluid {
div {
padding: 0;
}
}
figure {
&.icon-certificado {
margin: 5px 0 0 0;
}
}
}
}
}
}
footer {
margin: 37px 0 0 0;
padding: 0 0 20px 0;
p {
.fontsize-open-regular( 14px, #fff );
margin-top: 15px;
}
figure {
&.logo-moodle {
float: right;
}
}
}
/* Class */
.box-opaco {
width: 100%;
height: 100%;
padding: 30px;
margin: 8px 0 0 0;
background-color: rgba(0, 0, 0, 0.34);
}
@media (min-width: 769px) and (max-width: 1024px) {
section#inicial {
#content-stage {
section#conteudo {
.carousel {
.carousel-inner {
width: 405px;
height: 174px;
margin-left: 20px;
.item {
height: 174px;
.carousel-caption {
h1 {
.fontsize-open-regular( 38px, #fff );
margin: 0 0 15px 0;
}
p {
.fontsize-open-light( 15px, #fff );
line-height: 20px;
}
a {
&.saiba-mais {
.fontsize-open-regular( 17px, #fff );
display: block;
margin: 15px 0 0 0;
}
}
}
}
}
}
.info {
padding-bottom: 50px;
p {
.fontsize-open-light( 25px, #fff );
&.numero {
.fontsize-open-extrabold( 38px, #fff );
}
}
figure {
&.icon-certificado {
margin: 5px 0 0 0;
}
}
}
}
}
}
}
@media (min-width: 640px) and (max-width: 768px) {
section#inicial {
#content-stage {
section#conteudo {
.carousel {
.carousel-inner {
width: 287px;
height: 157px;
margin-left: 27px;
.item {
height: 157px;
.carousel-caption {
h1 {
.fontsize-open-regular( 28px, #fff );
margin: 0 0 15px 0;
}
p {
.fontsize-open-light( 13px, #fff );
line-height: 19px;
}
a {
&.saiba-mais {
.fontsize-open-regular( 16px, #fff );
display: block;
margin: 15px 0 0 0;
}
}
}
}
}
.carousel-control {
top: 38%;
&.left {
background-image: none;
left: -28px;
}
&.right {
background-image: none;
right: -7%;
}
span {
&.glyphicon {
display: none;
}
}
}
}
.info {
padding-bottom: 50px;
p {
.fontsize-open-light( 18px, #fff );
&.numero {
.fontsize-open-extrabold( 28px, #fff );
}
}
figure {
&.icon-certificado {
margin: 5px 0 0 0;
}
}
}
}
}
}
}
@media (min-width: 480px) and (max-width: 640px) {
section#inicial {
#content-stage {
section#titulo {
text-align: right;
h1 {
.fontsize-open-extrabold( 100px, #fff );
letter-spacing: -5px;
line-height: 104px;
}
h2 {
.fontsize-open-regular( 45px, #fff );
}
}
section#conteudo {
margin: 25px 0 0 0;
h3 {
font-size: 28px;
}
.carousel {
.carousel-inner {
width: 465px;
height: 145px;
margin-left: 40px;
text-overflow: ellipsis;
overflow-x: hidden;
.item {
.carousel-caption {
h1 {
font-size: 22px;
margin: 0 0 8px 0;
}
p {
font-size: 12px;
line-height: 16px;
max-height: 64px;
text-overflow: ellipsis;
overflow-y: hidden;
}
a.saiba-mais {
font-size: 14px;
}
}
}
}
.carousel-control {
&.left {
left: -38px;
}
}
}
.historia {
padding: 20px 20px 10px 20px;
}
.info {
padding: 20px 20px 30px 20px;
p {
font-size: 15px;
&.numero {
font-size: 22px;
}
}
}
}
}
}
}
@media (min-width: 320px) and (max-width: 480px) {
section#inicial {
#content-stage {
section#logos {
figure {
float: right;
margin: 0;
&:first-child {
margin-right: 0;
}
}
}
section#titulo {
text-align: right;
h1 {
.fontsize-open-extrabold( 78px, #fff );
letter-spacing: -5px;
line-height: 82px;
}
h2 {
.fontsize-open-regular( 35px, #fff );
}
}
section#conteudo {
margin: 25px 0 0 0;
h3 {
font-size: 28px;
}
.carousel {
.carousel-inner {
width: 325px;
height: 145px;
margin-left: 23px;
text-overflow: ellipsis;
overflow-x: hidden;
.item {
.carousel-caption {
h1 {
font-size: 22px;
margin: 0 0 8px 0;
}
p {
font-size: 12px;
line-height: 16px;
max-height: 64px;
text-overflow: ellipsis;
overflow-y: hidden;
}
a.saiba-mais {
font-size: 14px;
}
}
}
}
.carousel-control {
.left {
left: -23px;
}
}
}
.historia {
padding: 20px 20px 10px 20px;
}
.info {
padding: 20px 20px 30px 20px;
p {
font-size: 15px;
&.numero {
font-size: 22px;
}
}
}
}
}
}
}
@media screen and (max-width: 375px) {
section#inicial {
padding: 50px 0 0 0;
#content-stage {
section#logos {
margin: 0 0 40px 0;
figure {
float: right;
margin: 0 0 10px 0;
&:first-child {
margin-right: 0;
}
}
}
section#titulo {
text-align: right;
h1 {
.fontsize-open-extrabold( 58px, #fff );
letter-spacing: -5px;
line-height: 69px;
}
h2 {
.fontsize-open-regular( 28px, #fff );
}
}
section#conteudo {
margin: 25px 0 0 0;
h3 {
font-size: 28px;
}
.carousel {
.carousel-inner {
width: 245px;
height: 145px;
margin-left: 20px;
text-overflow: ellipsis;
overflow-x: hidden;
.item {
.carousel-caption {
h1 {
font-size: 22px;
margin: 0 0 8px 0;
}
p {
font-size: 12px;
line-height: 16px;
max-height: 64px;
text-overflow: ellipsis;
overflow-y: hidden;
}
a.saiba-mais {
font-size: 14px;
}
}
}
}
.carousel-control {
&.left {
left: -24px;
}
}
}
.historia {
padding: 20px 20px 10px 20px;
}
.info {
padding: 20px 20px 30px 20px;
p {
font-size: 15px;
&.numero {
font-size: 22px;
}
}
}
}
}
}
footer {
margin: 20px 0 0 0;
p {
font-size: 12px;
line-height: 17px;
}
}
}
@media screen and (max-width: 320px) {
section#inicial {
padding: 50px 0 0 0;
#content-stage {
section#logos {
margin: 0 0 30px 0;
figure {
float: initial;
margin: 0 auto 10px auto;
&:first-child {
margin-right: 0;
}
img {
margin: 0 auto;
}
}
}
section#titulo {
text-align: right;
h1 {
.fontsize-open-extrabold( 50px, #fff );
letter-spacing: -5px;
line-height: 60px;
}
h2 {
.fontsize-open-regular( 28px, #fff );
}
}
section#formulario {
margin: 40px 0 0 0;
}
section#conteudo {
margin: 25px 0 0 0;
h3 {
font-size: 25px;
}
.carousel {
.carousel-inner {
width: 184px;
height: 157px;
margin-left: 16px;
text-overflow: ellipsis;
overflow-x: hidden;
.item {
.carousel-caption {
h1 {
font-size: 22px;
margin: 0 0 8px 0;
}
p {
font-size: 12px;
line-height: 16px;
max-height: 64px;
text-overflow: ellipsis;
overflow-y: hidden;
}
a.saiba-mais {
font-size: 14px;
}
}
}
}
.carousel-control {
&.left {
left: -24px;
}
}
}
.historia {
padding: 20px 20px 10px 20px;
}
.info {
padding: 20px 20px 30px 20px;
p {
font-size: 15px;
&.numero {
font-size: 22px;
}
}
}
}
}
}
footer {
margin: 20px 0 0 0;
p {
font-size: 12px;
line-height: 17px;
}
}
}
/* fixing firefox bug */
div:after, ol:after, form:after, ul:after, dl:after, label:after {content:".";display:block;clear:both;visibility:hidden;height:0;overflow:hidden;}