/* Theme Name: Landing #4 Theme URI: http://www.carlosnicow.com Author: Carlos Nicow Author URI: http://www.carlosnicow.com Description: Tema Personalizado desenvolvido por Carlos Nicow para WordPress Version: 3.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */ /* NORMALIZE */ *, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } img { max-width: 100%; height: auto; display: block;} input, select, textarea { background: #fff; color: #444;border: 1px solid #e1e1e1; } iframe, embed, video { max-width: 100%; margin: 0 auto; display: block; } button, a, input, label, select, textarea { outline:none; } a { text-decoration: none; color: inherit; } svg { fill: currentcolor; } /* BODY */ body { background:#000; color:#fff; position: relative; padding: 0; margin: 0; font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif; font-size: 14px; font-weight: normal; } /* CONTAINER */ .container { max-width:1440px; width: 100%; margin: 0 auto; padding: 0 10px; } /* HEADER */ #cn-header { padding: 20px 0; } #cn-header img { width:350px; margin: 0 auto; } /* LIST */ #cn-list .heading p { text-align: center; font-size: 22px; font-weight: 400; margin: 0 0 10px; } #cn-list .search { margin:10px 0; } #cn-list .search form { background: rgba(255 255 255 / 0.1); border-radius: 8px; padding: 10px; display: flex ; align-items: center; } #cn-list .search form input { background: transparent; color: #fff; border: 0; width: 100%; padding: 0 0 0 10px; font-size: 25px; line-height: 200%; font-weight: 700; } #cn-list .search form button { cursor: pointer; background: #b32618; background: linear-gradient(180deg, rgba(179, 38, 24, 1) 0%, rgba(129, 18, 11, 1) 100%); color: #fff; padding: 10px; border: 0; border-radius: 10px; height: 51px; } #cn-list .search form button svg { height: 60%; display: block; margin: 3px; } #cn-list .list { width: 100%; overflow: hidden; padding: 0; margin: 0 0 60px; } #cn-list .list ul { padding:0; margin:0 -10px; list-style-type: none; display: flex ; flex-wrap: wrap; justify-content: space-between; } #cn-list .list li { width: 33.333%; position: relative; display: inline-block; padding: 10px; } #cn-list .list li .image { display: block; position: relative; } #cn-list .list li .image:after { content: ''; position: absolute; width: 100%; height: 300px; bottom: 0; left: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0 0 0 / 0), #000); } #cn-list .list li .image img { border-radius: 30px 30px 0 0; width:100%; height: 350px; object-fit: cover; } #cn-list .list li .bow { position: absolute; width: 100%; left: 0; bottom: 0; z-index: 1; } #cn-list .list li .bow .heading { padding: 0 20px 20px; } #cn-list .list li .bow .heading big { display: block; font-size: 32px; line-height: 40px; font-weight: 600; text-align: center; } #cn-list .list li .bow .heading big img { width: 25px; display: inline-block; } #cn-list .list li .bow .heading small { color: rgba(255 255 255 / .5); display: block; font-size: 14px; line-height: 15px; font-weight: 500; text-align: center; text-transform: lowercase; } #cn-list .list li .bow .heading p { display: block; font-size: 18px; line-height: 120%; font-weight: 400; text-align: center; } #cn-list .list li .bow .numbers { margin:0 0 20px; } #cn-list .list li .bow .numbers ul { list-style: none; margin: 0; padding: 0; display: flex ; justify-content: center; } #cn-list .list li .bow .numbers ul li { display:flex; width: auto; align-items: center; justify-content: center; font-size: 16px; font-weight: 500; margin: 0 10px; } #cn-list .list li .bow .numbers ul li svg { color: #b32618; height: 20px; margin: 0 5px 0 0; } /* LIST:NAVIGATION */ #cn-list .navigation { margin: 0 0 60px; text-align: center; } #cn-list .navigation .page-numbers { background: #b32618; background: linear-gradient(180deg, rgba(179, 38, 24, 1) 0%, rgba(129, 18, 11, 1) 100%); align-content: center; justify-content: center; align-items: center; color: #fff; font-weight: 100; position: relative; border-radius: 5px; text-transform: uppercase; margin: 0 5px 3px 0; font-size: 22px; display: inline-block; padding: 15px; } #cn-list .navigation .page-numbers:hover { background:#ffffff80; } #cn-list .navigation .current, #cn-list .navigation .next, #cn-list .navigation .prev { background:#262626; } /* MODEL */ #cn-model { padding:30px 0; } #cn-model .bg { position: absolute; width: 100%; height: 100vh; top:0; background-image: url(img/bg.jpg); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; z-index: -1; } #cn-model .bg:after { content: ''; position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0 0 0 / .8), #000); } #cn-model .box { background: #000; max-width: 566px; width: 100%; margin: 0 auto; box-shadow: 0 1px 30px 5px rgba(0, 0, 0, .5019607843); border-radius: 30px 30px 0 0; } #cn-model .box .image { display: block; position: relative; } #cn-model .box .image:after { content: ''; position: absolute; width: 100%; height: 300px; bottom: 0; left: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0 0 0 / 0), #000); } #cn-model .box .image img { border-radius: 30px 30px 0 0; width:100%; height: 350px; object-fit: cover; } #cn-model .content h2, #cn-model .content h3 { display: block; font-size: 32px; line-height: 40px; font-weight: 600; text-align: center; } #cn-model .content p { display: block; font-size: 18px; line-height: 120%; font-weight: 400; text-align: center; } #cn-model .heading { padding: 0 20px 20px; } #cn-model .heading big { display: block; font-size: 32px; line-height: 40px; font-weight: 600; text-align: center; } #cn-model .heading big img { width: 25px; display: inline-block; } #cn-model .heading small { color: rgba(255 255 255 / .5); display: block; font-size: 14px; line-height: 15px; font-weight: 500; text-align: center; text-transform: lowercase; } #cn-model .heading p { display: block; font-size: 18px; line-height: 120%; font-weight: 400; text-align: center; } #cn-model .box .numbers { margin:0 0 20px; } #cn-model .box .numbers ul { list-style: none; margin: 0; padding: 0; display: flex ; justify-content: center; } #cn-model .box .numbers ul li { display:flex; align-items: center; font-size: 16px; font-weight: 500; margin: 0 10px; } #cn-model .box .numbers ul li svg { color: #b32618; height: 20px; margin: 0 5px 0 0; } #cn-model .video { position: relative; margin: 0 20px 20px; } #cn-model .video video { border:2px solid #b32618; border-radius:30px; } #cn-model .video video::-webkit-media-controls-panel { display: none !important; opacity: 1 !important; } #cn-model .video .overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display:none; justify-content: center; align-items: center; background: rgba(0 0 0 / .8); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);} #cn-model .video .overlay a { } #cn-model .link { padding: 0 20px 20px; } #cn-model .link a { width: 100%; color: #fff; cursor: pointer; font-size: 16px; font-weight: 500; line-height: 100%; display: flex ; justify-content: center; align-items: center; align-content: center; text-transform: uppercase; padding: 20px; border-radius: 5px; } #cn-model .link a.telegram { background: #1c92d2; background: linear-gradient(to right, #1c92d2, #2c3e50); } #cn-model .link a.join { background: #b32618; background: linear-gradient(180deg, rgba(179, 38, 24, 1) 0%, rgba(129, 18, 11, 1) 100%); } #cn-model .box .imagens { padding: 0 0 20px; } #cn-model .box .imagens ul { list-style: none; margin: 0; padding: 0; display: flex ; flex-wrap: wrap; justify-content: center; } #cn-model .box .imagens ul li { padding: 10px; width: 50%; border-radius: 30px; position: relative; display: flex; align-items: center; justify-content: center; } #cn-model .box .imagens ul li:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; background: rgba(0 0 0 / .3); } #cn-model .box .imagens ul li img { position: relative; border:2px solid #b32618; border-radius: 30px; filter: blur(5px); } #cn-model .box .imagens ul li a { position: absolute; display: block; z-index: 2; text-align: center; background: linear-gradient(180deg, rgba(179, 38, 24, 1) 0%, rgba(129, 18, 11, 1) 100%); color: #fff; font-size: 14px; font-weight: 600; line-height: 35px; border-radius: 5px; padding: 10px 20px; } #cn-model .box .time { background: #b32618; background: linear-gradient(180deg, rgba(179, 38, 24, 1) 0%, rgba(129, 18, 11, 1) 100%); text-align:center; border-radius: 30px; padding: 20px; margin: 0 0 20px; } #cn-model .box .time big { display: flex ; align-content: center; justify-content: center; align-items: center; font-size: 22px; font-weight: 500; } #cn-model .box .time big svg { color:yellow; height: 30px; margin:0 10px 0 0; } #cn-model .box .time #timer { margin: 20px auto; background: #fff; color: #b32618; width: 220px; padding: 10px 25px; font-size: 42px; font-weight: bold; border-radius: 10px; } #cn-model .box .time #timer:before { content: "00:"; } #cn-model .box .time p { font-size: 18px; } /* FOOTER */ #cn-footer { font-size:12px; text-align: center; margin: 0 0 10px; } @media (max-width: 1024px){ } @media (max-width: 768px){ #cn-list .heading p { font-size: 18px; } #cn-list .list li { width: 50%; } } @media (max-width: 479px){ #cn-header img { width:200px; } #cn-list .heading p { font-size: 16px; } #cn-list .search form input { font-size: 100%; } #cn-list .list li { width: 100%; } } @media (max-width: 320px){ }