@font-face { font-family: Corki; /* Гарнитура шрифта */ src: url(/font/corki-regular.eot); /* Путь к файлу со шрифтом */ src: local(Corki), url(/font/corki-regular.ttf); /* Путь к файлу со шрифтом */ } /* Reset the container */ .container { min-width: 970px !important; max-width: 1200px !important; } @headFont: Corki; @baseFont: "Segoe UI"; @colorBack: #e5d3c3; @colorWhite: #ffffff; @colorWhiteCream: #f7f1eb; @colorBorder: #b8a697; @colorHead: #432119; @colorBase: #71463b; @colorBlack: #000000; @colorBlue: #1da0ca ; @colorBackMilkChoco: #dacdc5; @colorBackChoco: #5b3b2c; @colorRed: #f55252; @footerOtstup: 190px; @sizeLarge: 36px; @sizeBig: 27px; @sizeNormal: 18px; @sizeSmall: 16px; @sizeVerySmall: 12px; .red { color: #F00; span { color: @colorBase; } } .product-parametrs .parametrs .parametr.ves { position: absolute; top: 16px; left: 55%; font-size: 27px; margin-top: 0; .value { font-size: 27px; } } .new { background-image: url("/images/cat-main-5.png"); transform: rotate(180deg); width: 120px; height: 44px; display: inline-block; position: absolute; z-index: 1; left: 100%; margin-left: -180px; color: #fff; padding: 11px 8px; font-size: 19px; top: 50px; span { display: inline-block; transform: rotate(180deg); } } * { padding: 0; margin: 0; } a { color: inherit; text-decoration: inherit; &:hover { color: inherit; text-decoration: inherit; } } label { cursor: pointer; } .contakt_items { border: 2px solid transparent; } .contakt_items:hover { border: 2px solid #B8A697; } html {height: 100%;} * html body {height: 100%;} .left { text-align: left; } .right { text-align: right; } .center { text-align: center; } .lefter { float: left; } .righter { float: right; } .very-small { font-size: @sizeVerySmall; } .normal { font-size: @sizeNormal; } .small { font-size: @sizeSmall; } .big { font-size: @sizeBig; } .large { font-size: @sizeLarge; } body { background-color: @colorBack; min-height: 100%; position: relative; font-family: @baseFont; font-size: @sizeNormal; line-height: normal; color: @colorBase; } input:focus:invalid, textarea:focus:invalid, select:focus:invalid { color: #b94a48; border-color: #ee5f5b; } input:focus:invalid:focus, textarea:focus:invalid:focus, select:focus:invalid:focus { border-color: #e9322d; -webkit-box-shadow: 0 0 6px #f8b9b7; -moz-box-shadow: 0 0 6px #f8b9b7; box-shadow: 0 0 6px #f8b9b7; } .not-select { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .thumbnail { webkit-box-shadow: none; box-shadow: none; border: none; padding: 0; margin: 0; } .btn { font-size: inherit; &:hover { color: inherit; } padding-top: 2px; } .page { background-image: url(/images/back.png); background-repeat: no-repeat; background-size: 100%; min-width: 970px; min-height: 330px; padding-bottom: @footerOtstup; } .page-head { font-family: @headFont; font-size: @sizeLarge; color: @colorHead; text-align: center; margin-top: 20px; } .block { background-color: @colorWhiteCream; border: solid 1px @colorBorder; margin-bottom: 30px; } .delimeter { height: 1px; width: 100%; border: none; background-image: linear-gradient(to right, @colorWhiteCream, @colorBorder,@colorWhiteCream); } .red { color: @colorRed; } header { .logo { table { height: 70px; td { vertical-align: middle; } td.center { width: 300px; color: @colorHead; font-size: 20px; font-family: Gabriola; line-height: 15px; } } } table { width: 100%; } .menu { table { height: 100px; margin: 0 15px; td { vertical-align: middle; padding: 0 25px; .center; font-size: @sizeBig; font-family: @headFont; color: @colorHead; min-width: 106px; i { font-size: 22px; } &.active, &:hover { background-image: url(/images/menu-back.png); background-repeat: no-repeat; background-position: 50% 65px; } } } } } footer { font-size: 15px; width: 100%; position: absolute; bottom: 0px; height: @footerOtstup; .block { font-family: @headFont; padding: 5px 10px 20px 10px; background-image: url(/images/footer-back.png); background-position: 50%; height: 235px; a, span { font-size: @sizeBig; } .sotr { font-size: 18px; padding-right: 15px; color: #432119; margin-top: 7px; color: #D31921; // margin-top: -5px; } .about { padding: 8px 0 0 40px; color: #432119; span { font-size: 18px; } a{ display: inline-block; margin-bottom: 10px; font-size: 27px; } } .adress { text-align: left; padding-left: 40px; background: url("/images/adress.png") no-repeat 20px 1px; margin-top: 15px; padding-right: 0; } .phone { padding-left: 0px; background: url("/images/phone.png") no-repeat 15px 1px; margin-top: 7px; font-weight: bold; } a.link:hover { text-decoration: underline; } table { margin: 0 auto; span { padding-left: 5px; } i { color: @colorBlack; padding-right: 5px; } } } .to-down { img { padding: 0 5px; } span { font-size: 14px; position: relative; top: 3px; } } .ss { i { color: @colorBase; padding: 0 5px; &:hover { color: @colorHead; } } } .counter { position: absolute; bottom: -45px; #hotlog_counter { width: 88px; display: block; margin: 0px auto -25px; } } } .main-block { width: 293px; .block; .image { padding: 14px; width: 277px; overflow: hidden; } .content { padding: 20px; text-align: center; .head { font-family: @headFont; font-size: @sizeLarge; color: @colorHead; line-height: 30px; } .vip { background-image: url(/images/vip.png); background-position: right top; background-repeat: no-repeat; height: 44px; width: 182px; padding-left: 30px; text-align: center; float: right; color: @colorWhite; padding-top: 8px; margin-top: 40px; position: relative; left: 20px; &:hover { background-position: right -44px; } } .text { overflow: hidden; line-height: 21px; } } figcaption { background-color: @colorBackChoco; .content { .head { color: @colorWhite; &.middle { display: table-cell; vertical-align: middle; width: 253px; } } .text { color: @colorWhiteCream; } } } li, figure { width: 293px; } } .main-block1 { height: 465px; .text { height: 295px; } } .main-block2 { height: 220px; .head { height: 185px; } } .main-block3 { height: 215px; .head { height: 180px; } } .main-block4 { height: 465px; .text { height: 230px; } } .our-product { font-family: @headFont; font-size: @sizeLarge; text-align: center; min-height: 80px; padding-top: 20px; .block; background-image: url(/images/product-back.png); background-position: 50%; } .our-product { padding: 20px 60px 32px; h1, h2, h3 { font-size: 32px; margin-top: 5px; margin-bottom: 16px; } p { font-size: 16px; font-family: Segoe UI; margin-bottom: 0; text-align: left; } ul { list-style-position: inside; } } #btn-to-top { position: fixed; bottom: 20px; right: 20px; display: none; height: 50px; width: 50px; font-size: 30px; color: @colorHead; background-color: @colorWhiteCream; border-radius: 3px; text-align: center; z-index: 2; cursor: pointer; .not-select; i { position: relative; } &:hover { background-color: @colorWhiteCream; &:active { box-shadow: inset 0 0 1px @colorBlack; } } } .catalog-main { .block { padding: 10px; text-align: center; margin: 0 15px; .head { font-size: @sizeLarge; font-family: @headFont; color: @colorHead; padding: 0 15px; line-height: 30px; height: 65px; overflow: hidden; } .image { height: 95px; width: 100px; margin: 0 auto; div { display: table-cell; height: inherit; vertical-align: middle; width: inherit; } } .text { line-height: 21px; overflow: hidden; height: 85px; } .butn { position: relative; left: -10px; width: 120px; height: 44px; margin: 20px 0; padding-top: 6px; color: @colorWhite; text-align: left; padding-left: 10px; &:hover { background-position: 0 -44px; } } &:hover { box-shadow: 2px 2px 8px fadeout(@colorBlack,32%); } } } .catalog-main-0 { .butn{ background-image: url(/images/cat-main-1.png); } .block { background-image: url(/images/cat-back-main-1.png); } } .catalog-main-1 { .butn{ background-image: url(/images/cat-main-2.png); } .block { background-image: url(/images/cat-back-main-2.png); } } .catalog-main-2 { .butn{ background-image: url(/images/cat-main-3.png); } .block { background-image: url(/images/cat-back-main-3.png); } } .catalog-main-3 { .butn{ background-image: url(/images/cat-main-4.png); } .block { background-image: url(/images/cat-back-main-4.png); } } .catalog-main-4 { .butn{ background-image: url(/images/cat-main-5.png); } .block { background-image: url(/images/cat-back-main-5.png); } } .catalog-main-5 { .butn{ background-image: url(/images/cat-main-6.png); } .block { background-image: url(/images/cat-back-main-6.png); } } .page-content { .block; padding-bottom: 40px; position: relative; } .navigation { font-size: 20px; font-family: Gabriola; a { color: #616161; &:hover { text-decoration: underline; } } span { color: #9d9591; &.choco { color: @colorBase; } } } .catalog { .content { width: 373px; padding-top: 1px; background-color: @colorBackMilkChoco; margin-top: 29px; padding-bottom: 30px; background-image: url(/images/cat-background.png); .head { text-align: center; color: @colorWhiteCream; font-size: @sizeLarge; font-family: @headFont; margin: 30px 0; padding-top: 16px; position: relative; height: 80px; width: 418px; background-repeat: no-repeat; &:hover { background-position: 0 -80px; } } .text { height: 90px; line-height: 22px; overflow: hidden; padding: 0 20px; } } .cat-bottom img { vertical-align: top; } &:nth-child(odd) { .head { padding-left: 45px; left: -45px; } > div { float: right; } } &:nth-child(even) { .head { padding-right: 45px; } > div { float: left; } } } .catalog-0 { .head { background-image: url(/images/cat-back-1.png); } } .catalog-1 { .head { background-image: url(/images/cat-back-2.png); } } .catalog-2 { .head { background-image: url(/images/cat-back-3.png); } } .catalog-3 { .head { background-image: url(/images/cat-back-4.png); } } .catalog-4 { .head { background-image: url(/images/cat-back-5.png); } } .catalog-5 { .head { background-image: url(/images/cat-back-6.png); } } .catalog-6 { .head { background-image: url(/images/cat-back-6.png); } } .product { margin: 0 auto ; width: 272px; position: relative; margin-bottom: 40px; border: solid 1px @colorBorder; .head { background-color: @colorWhite; font-size: @sizeBig; color: @colorHead; height: 60px; text-align: center; line-height: 25px; font-family: @headFont; padding: 4px 10px; text-align: center; overflow: hidden; } .image { height: 270px; width: 270px; background-color: @colorWhite; display: table-cell; vertical-align: middle; text-align: center; img { max-height: 270px; max-width: 270px; } } .cost { background-image: url(/images/cost.png); width: 159px; height: 52px; position: absolute; bottom: 0px; background-position: -2px 0; background-repeat: no-repeat; color: @colorWhite; font-size: @sizeBig; font-family: @headFont; padding-top: 15px; padding-left: 20px; } .parametrs { position: absolute; list-style-type: none; z-index: 3; background-color: @colorBackChoco; width: 272px; font-family: @headFont; overflow: hidden; padding: 10px; display: none; left: -1px; .name { color: #ffbfbc; i { font-size: @sizeVerySmall; } } .value { color: @colorWhiteCream; } } &:hover { box-shadow: 3px 4px 13px fadeout(@colorBlack, 60%); } } .pagination { color: #abaaaa; border-color: #abaaaa; >li { >a { color: #abaaaa; &:hover { color: @colorHead; } } &.active a{ background-color: @colorBackChoco; border-color: @colorBackChoco; &:hover { background-color: @colorBackChoco; border-color: @colorBackChoco; } } } } .back-page { position: absolute; left: 25px; top: 54px; background-color: @colorBackMilkChoco; color: @colorWhite; padding-top: 8px; border-radius: 0; i { position: relative; top: 1px; font-size: 30px; color: @colorWhite; } &:hover { color: #646165; background-color: @colorWhiteCream; border-color: @colorBorder; i { color: @colorHead; } } } .product-image { background-color: @colorWhite; width: 436px; height: 422px; display: table-cell; vertical-align: middle; text-align: center; img { margin: 0 auto; } } .margin-bottom25 { margin-bottom: 25px; } .product-parametrs { margin-right: 30px; border: 1px solid @colorBorder; .head { border-bottom: 1px solid @colorBorder; font-size: @sizeBig - 1px; font-family: @headFont; color: @colorHead; height: 60px; line-height: 40px; padding: 10px 20px; overflow: hidden; } .price { padding: 15px 20px; border-bottom: 1px solid @colorBorder; color: @colorHead; .red { font-size: @sizeBig; } .btn { color: @colorWhite; background-color: @colorRed; padding-left: 30px; padding-right: 30px; &:hover { color: @colorRed; background-color: @colorWhiteCream; border-color: @colorRed; } } } .parametrs { height: 352px; overflow: auto; padding-left: 20px; .name { color: @colorHead; } .parametr { margin-top: 15px; } .value { font-size: 16px; } p { font-size: 16px; } } } .news-anons { height: 128px; margin: 0 15px; .date { width: 164px; margin: 0 auto; background-image: url(/images/news-back.png); background-position: top center; text-align: center; height: 93px; background-repeat: no-repeat; color: @colorWhite; .day { font-size: @sizeBig; line-height: @sizeBig; } .month { font-size: @sizeSmall; margin-bottom: 2px; } .year { font-size: @sizeVerySmall; } } .head { font-size: @sizeBig; font-family: @headFont; color: @colorHead; padding: 10px 0; span:hover { text-decoration: underline; } } .anons { line-height: 22px; height: 68px; overflow: hidden; margin-bottom: 10px; } &:hover { background-color: @colorBackMilkChoco; } } .form-horizontal .form-group { margin-left: 0px; margin-right: 0px; } .form-block { width: 381px; margin: 0 auto; border: 1px solid @colorBorder; border-radius: 20px; padding: 10px; background-color: @colorWhite; .form-head { color: @colorWhite; text-align: center; font-family: @headFont; font-size: @sizeLarge; background-image: url(/images/form-back.png); height: 71px; width: 484px; margin-left: -62px; margin-top: 10px; padding-top: 8px; position: relative; i { position: absolute; top: 4px; right: 40px; font-size: 14px; cursor: pointer; } } form { padding: 20px; border: 1px dashed @colorBorder; border-radius: 10px; label { color: #999999; font-size: 14px; font-weight: inherit; &:hover { i { color: @colorBase; } } } .captcha-block { .righter; label { width: 120px; text-align: right; margin-right: 5px; margin-top: -3px; } input { width: 60px; } } .btn { color: @colorWhite; background-color: @colorRed; padding-left: 30px; padding-right: 30px; &:hover { color: @colorRed; background-color: @colorWhiteCream; border-color: @colorRed; } } .error { font-size: @sizeVerySmall; color: @colorRed; padding-left: 12px; padding-top: 5px; } #error-captcha { margin-top: -30px; } } } textarea { resize: none; } .page-text { margin-bottom: 30px; } .blockUI.blockMsg.blockPage { border-radius: 20px; cursor: auto !important; } .blockUI.blockOverlay { cursor: auto !important; background-color: #261d14 !important; opacity: 0.37 !important; } .interval-block { margin: 0 auto; width: 550px; margin-top: -20px; margin-bottom: 30px; font-size: @sizeSmall; .head { margin-bottom: 5px; } .interval { font-size: 14px; display: inline-block; input { height: 30px; width: 105px; border: 1px solid #9c9c9c; position: relative; top: 2px; text-align: right; color: @colorBlack; padding-right: 10px; font-size: @sizeSmall; } span { position: relative; top: 3px; } } .show-interval { display: inline-block; width: 125px; height: 30px; background-color: #995e44; text-align: center; color: @colorWhite; border: 1px solid @colorBorder; box-shadow: inset 0px -4px 8px -4px @colorBlack; cursor: pointer; margin-left: 20px; span { position: relative; top: 2px; } &:hover { box-shadow: inset 0px 0px 8px -4px @colorBlack; &:active { box-shadow: inset 0px 4px 8px -4px @colorBlack; } } } a { position: relative; left: 20px; top: 4px; &:hover { text-decoration: underline; } } } .carousel-control { &.left, &.right { background-image: none; } color: @colorWhite; text-shadow: -1px -1px 0 #f55252, 1px -1px 0 #f55252, -1px 1px 0 #f55252, 1px 1px 0 #f55252; &:hover { color: #f55252; text-shadow: none; } } .slick-list.draggable { padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px; } .simple-link { text-decoration: underline; &:hover { text-decoration: none; } } @media (min-width: 940px) { .contakt_items { margin: 0 40px; } } @media (max-width: 940px) { .contakt_items { margin: 0 40px; } } @media (min-width: 1200px) { header .menu table td { padding: 0 39px; } .main-block { width: 360px; li, figure { width: 360px; } figcaption .content .head.middle { width: 320px; } .image { width: 344px; } .content .head { padding: 0 25px; } } .cs-style-4 figcaption { width: 360px !important; } footer { font-size: @sizeNormal; } .contakt_items { margin: 0 14px; } } .catalog_text { h1, h2, h3 { font-size: 32px; font-family: Corki; text-align: center; } p { font-size: 16px; font-family: Segoe UI; } } .catalog_items_text { h3 { font-size: 32px; font-family: Corki; text-align: center; } p { font-size: 16px; font-family: Segoe UI; } } .contakt_items_container { padding: 0 64px; font-family: Corki; color: #432119; } .order_text p:first-child{ font-size: 32px; margin-top: 20px; margin-bottom: 10px; font-family: Corki; text-align: center; } .order_text p{ font-size: 16px; font-family: Segoe UI; } .contakt_items { background: url("/images/contakts_bg.png") no-repeat; background-size: cover; width: 243px; float: left; text-align: center; font-size: 23px; line-height: 0.9; vertical-align: middle; margin-bottom: 12px; span { display: block; vertical-align: middle; } } .contakt_text { font-weight: 700; text-align: center; font-family: 'trebuchet ms', geneva; margin-top: 34px; margin-bottom: 35px; } .order_style { text-align: center; line-height: 1.85; margin-bottom: 90px; }