|
|
Linha 64: |
Linha 64: |
| margin: 0 0; | | margin: 0 0; |
| } | | } |
|
| |
|
| |
|
| .vectorTabs span { | | .vectorTabs span { |
Linha 77: |
Linha 76: |
| background-image: none; | | background-image: none; |
| } | | } |
|
| |
|
| |
|
| #ca-edit{ | | #ca-edit{ |
Linha 159: |
Linha 157: |
| margin-top: 5.0rem; | | margin-top: 5.0rem; |
| padding-top: 10px; | | padding-top: 10px; |
| border-center: none;
| |
| } | | } |
|
| |
|
Linha 178: |
Linha 175: |
|
| |
|
| /* Main page */ | | /* Main page */ |
|
| |
|
| |
|
| .container { | | .container { |
Linha 244: |
Linha 240: |
| display: flex; | | display: flex; |
| } | | } |
| | |
| .ma-card-item { | | .ma-card-item { |
| text-align: center; | | text-align: center; |
Linha 316: |
Linha 313: |
| .social-media a { | | .social-media a { |
| width: 41.5px; | | width: 41.5px; |
| }
| |
|
| |
| .update-image {
| |
| box-shadow: 0 0 0.6 3em #BBB;
| |
| } | | } |
|
| |
|
Linha 349: |
Linha 342: |
| background-color: rgb(234 236 240 / 0%); | | background-color: rgb(234 236 240 / 0%); |
| border: 1px solid rgb(234 236 240 / 0%); | | border: 1px solid rgb(234 236 240 / 0%); |
| padding: 0; */ | | padding: 0; |
| white-space: pre-wrap; | | white-space: pre-wrap; |
| }
| |
|
| |
| .post-title{
| |
| box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
| |
| --border-width: 3px;
| |
| position: relative;
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| width: 90%;
| |
| margin: auto;
| |
| font-weight: bold;
| |
| font-family: Lato, sans-serif;
| |
| font-size: 1rem;
| |
| color: white;
| |
| background: linear-gradient(60deg,#8d8384,#6f5860,#565452,#b4b5b5);
| |
| background-size: 300% 300%;
| |
| background-position: 0 50%;
| |
| animation: moveGradient 30s alternate infinite;
| |
| border-radius: 10px;
| |
| }
| |
|
| |
| .card__heading a {
| |
| color: white;
| |
| } | | } |
|
| |
|
Linha 390: |
Linha 359: |
| } | | } |
|
| |
|
| p.card__heading {
| | .update-box{ |
| font-size: 1.2em; | | margin-bottom: 20px |
| font-weight: bold;
| |
| } | | } |
|
| |
|
| | .update-box, .update-box-2{ |
| | width: 90%; |
| | text-align: center; |
| | position: relative; |
| | margin: 20px auto; |
| | transition: 1s; |
| | border-radius: 20px; |
| | display: flex; |
| | justify-content: center; |
| | font-weight: bold; |
|
| |
|
| :root{
| |
| --background-dark: #2d3548;
| |
| --text-light: rgba(255,255,255,0.6);
| |
| --text-lighter: rgba(255,255,255,0.9);
| |
| --spacing-s: 8px;
| |
| --spacing-m: 16px;
| |
| --spacing-l: 24px;
| |
| --spacing-xl: 32px;
| |
| --spacing-xxl: 64px;
| |
| --width-container: 1200px;
| |
| } | | } |
| | | .update-box-2:hover, .update-box:hover{ |
| .hero-section{ | | transition: 1s; |
| margin: 5%; | | transform: scale(1.05); |
| padding-bottom: 53%; | |
| } | | } |
|
| |
|
| .hero-section2{ | | .update-box img, .update-box-2 img{ |
| margin: 5%; | | border: 0; |
| | vertical-align: middle; |
| | width: 100%; |
| | height: 100%; |
| } | | } |
|
| |
|
| .card-grid{ | | .update-box-2 a, .update-box a{ |
| display: grid;
| | width: 100%; |
| width: 100%;
| | |
| } | | } |
| | | .update-title{ |
| .card{ | | width: 100%; |
| list-style: none;
| | height: 42px; |
| position: relative;
| | position: absolute; |
| | top: 0; |
| | font-size: 15px; |
| | border-radius: 20px 20px 0px 0px; |
| } | | } |
|
| |
|
| .card:before{ | | .update-title a{ |
| content: '';
| | color: white; |
| display: block;
| |
| width: 100%;
| |
| } | | } |
|
| |
|
| .card__background{ | | .update-subtitle{ |
| width: 100%;
| | width: 100%; |
| height: auto;
| | height: 50px; |
| background-size: cover;
| | position: absolute; |
| background-position: center;
| | bottom: 0; |
| bottom: 0;
| | font-size: 15px; |
| filter: brightness(0.95) saturate(1) contrast(0.95);
| | border-radius: 0px 0px 20px 20px; |
| left: 0;
| |
| position: absolute;
| |
| right: 0;
| |
| top: 0;
| |
| transform-origin: center;
| |
| trsnsform: scale(1) translateZ(0);
| |
| transition:
| |
| filter 1s,
| |
| transform 1s;
| |
| } | | } |
|
| |
|
| .card:hover .card__background{ | | .update-box-subtitle{ |
| transform: scale(1.05) translateZ(0);
| | position: relative; |
| | top: 50%; |
| | transform: translateY(-50%); |
| } | | } |
|
| |
|
| .card__content{ | | .box{ |
| left: 0;
| | text-align: center; |
| margin: var(--spacing-l);
| | box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5); |
| position: absolute;
| | border-radius: 10px; |
| top: 0;
| | padding-bottom: 10px; |
| text-align: left;
| |
| } | | } |
|
| |
|
| .card__category{ | | .box-title{ |
| color: var(--text-light);
| | border: 1px solid #00aaf4; |
| font-size: 0.9rem;
| | width: 100%; |
| margin-bottom: var(--spacing-s);
| | height: 60px; |
| text-transform: uppercase;
| | background-color: #00aaf4; |
| | border-radius: 10px 10px 0px 0px; |
| } | | } |
|
| |
|
| .card__heading{ | | .box-title p{ |
| color: var(--text-lighter);
| | font-size: 22px; |
| font-size: 1.9rem;
| | color: white; |
| text-shadow: 2px 2px 20px rgba(0,0,0,0.2);
| | position: relative; |
| line-height: 1.4;
| | top: 35%; |
| | transform: translateY(-50%); |
| } | | } |
|
| |
|
| h3.card__heading {
| | .patch-notes{ |
| margin-top: -10px; | | padding: 20px; |
| | background-color: #ffffff; |
| | border-radius: 30px; |
| | border: 1px solid #cccccc; |
| | margin-bottom: 20px; |
| } | | } |
|
| |
|
| .slider{ | | .patch-notes img{ |
| position: relative;
| | float: right; |
| height: 400px;
| | width: 100px; |
| }
| | height: 100px; |
| .slide{
| | border-radius: 50px; |
| width:100%;
| |
| height: 100%;
| |
| border-radius: 5px;
| |
| animation: fadeInSlide 1s;
| |
| }
| |
| .slider-bullet{
| |
| position: absolute;
| |
| top: 20px;
| |
| height: 10px;
| |
| width: 10px;
| |
| background-color: #e5e5e5;
| |
| border-radius: 50%;
| |
| transition:1s;
| |
| cursor: pointer;
| |
| }
| |
| | |
| .hero {
| |
| display: inline-block;
| |
| position: relative;
| |
| width: 400px;
| |
| min-width: 400px;
| |
| height: 400px;
| |
| border-radius: 30px;
| |
| overflow:hidden;
| |
| box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.3);
| |
| margin: 30px;
| |
| }
| |
| | |
| .hero-profile-img {
| |
| height: 70%;
| |
| }
| |
| | |
| .hero-description-bk {
| |
| background-image: linear-gradient(0deg , #3f5efb, #fc466b);
| |
| border-radius: 30px;
| |
| position: absolute;
| |
| top: 55%;
| |
| left: -5px;
| |
| height: 65%;
| |
| width: 108%;
| |
| transform: skew(19deg, -9deg);
| |
| }
| |
| | |
| .second .hero-description-bk {
| |
| background-image: linear-gradient(-20deg , #bb7413, #e7d25c)
| |
| }
| |
| | |
| .hero-logo {
| |
| height: 80px;
| |
| width: 80px;
| |
| border-radius: 20px;
| |
| background-color: #fff;
| |
| position: absolute;
| |
| bottom: 30%;
| |
| left: 30px;
| |
| overflow:hidden;
| |
| box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.7);
| |
| }
| |
| | |
| .hero-logo img {
| |
| height: 100%;
| |
| }
| |
| | |
| .hero-description {
| |
| position: absolute;
| |
| color: #fff;
| |
| font-weight: 900;
| |
| left: 150px;
| |
| bottom: 26%;
| |
| }
| |
| | |
| .hero-btn {
| |
| position: absolute;
| |
| color: #fff;
| |
| right: 30px;
| |
| bottom: 10%;
| |
| padding: 10px 20px;
| |
| border: 1px solid #fff;
| |
| }
| |
| | |
| .hero-btn a {
| |
| color: #fff;
| |
| }
| |
| | |
| .hero-date {
| |
| position: absolute;
| |
| color: #fff;
| |
| left: 30px;
| |
| bottom: 10%;
| |
| }
| |
| | |
| body {
| |
| font-family: 'Open Sans', sans-serif;
| |
| margin: 0;
| |
| background-color: #eee;
| |
| min-height: 100vh;
| |
| }
| |
| | |
| .btn i:before {
| |
| width: 14px;
| |
| height: 14px;
| |
| position: fixed;
| |
| color: #fff;
| |
| background: #0077B5;
| |
| padding: 10px;
| |
| border-radius: 50%;
| |
| top:5px;
| |
| right:5px;
| |
| } | | } |
|
| |
|
Linha 663: |
Linha 524: |
| transform: scale(1.20); | | transform: scale(1.20); |
| } | | } |
|
| |
|
| |
|
| /* Quests Page */ | | /* Quests Page */ |
Linha 674: |
Linha 534: |
| transition: 2s; | | transition: 2s; |
| } | | } |
| | |
| | /* Horde Leader Page */ |
| | table.wikitable.otp-hover tr:hover{ |
| | background-color: #bacafb40; |
| | } |
| | |
|
| |
|
| /* Página Instagram */ | | /* Página Instagram */ |
Linha 736: |
Linha 602: |
| width: 100%; | | width: 100%; |
| height: 100%; | | height: 100%; |
| /* object-fit: cover; */
| |
| margin-top: -10px; | | margin-top: -10px; |
| } | | } |
Linha 836: |
Linha 701: |
| to {opacity: 1;} | | to {opacity: 1;} |
| } | | } |
|
| |
|
| |
|
|
| |
|
| /* Testes */ | | /* Testes */ |
| .update-box{
| |
| margin-bottom: 20px
| |
| }
| |
|
| |
| .update-box-2{
| |
| }
| |
| .update-box, .update-box-2{
| |
| width: 90%;
| |
| text-align: center;
| |
| position: relative;
| |
| margin: 20px auto;
| |
| transition: 1s;
| |
| border-radius: 20px;
| |
| display: flex;
| |
| justify-content: center;
| |
| font-weight: bold;
| |
|
| |
| }
| |
| .update-box-2:hover, .update-box:hover{
| |
| transition: 1s;
| |
| transform: scale(1.05);
| |
| }
| |
|
| |
| .update-box img, .update-box-2 img{
| |
| border: 0;
| |
| vertical-align: middle;
| |
| width: 100%;
| |
| height: 100%;
| |
| }
| |
|
| |
| .update-box-2 a, .update-box a{
| |
| width: 100%;
| |
|
| |
| }
| |
| .update-title{
| |
| width: 100%;
| |
| height: 42px;
| |
| position: absolute;
| |
| top: 0;
| |
| font-size: 15px;
| |
| border-radius: 20px 20px 0px 0px;
| |
| }
| |
|
| |
| .update-title a{
| |
| color: white;
| |
| }
| |
|
| |
| .update-subtitle{
| |
| width: 100%;
| |
| height: 50px;
| |
| position: absolute;
| |
| bottom: 0;
| |
| font-size: 15px;
| |
| border-radius: 0px 0px 20px 20px;
| |
| }
| |
|
| |
| .update-box-subtitle{
| |
| position: relative;
| |
| top: 50%;
| |
| transform: translateY(-50%);
| |
| }
| |
|
| |
| .box{
| |
| text-align: center;
| |
| box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
| |
| border-radius: 10px;
| |
| padding-bottom: 10px;
| |
| }
| |
|
| |
| .box-title{
| |
| border: 1px solid #00aaf4;
| |
| width: 100%;
| |
| height: 60px;
| |
| background-color: #00aaf4;
| |
| border-radius: 10px 10px 0px 0px;
| |
| }
| |
|
| |
| .box-title p{
| |
| font-size: 22px;
| |
| color: white;
| |
| position: relative;
| |
| top: 35%;
| |
| transform: translateY(-50%);
| |
| }
| |
|
| |
| .patch-notes{
| |
| padding: 20px;
| |
| background-color: #ffffff;
| |
| border-radius: 30px;
| |
| border: 1px solid #cccccc;
| |
| margin-bottom: 20px;
| |
| }
| |
|
| |
| .patch-notes img{
| |
| float: right;
| |
| width: 100px;
| |
| height: 100px;
| |
| border-radius: 50px;
| |
| }
| |
|
| |
| table.wikitable.otp-hover tr:hover{
| |
| background-color: #bacafb40;
| |
| }
| |