/* ============================================================
Default Utilities (Margins, Paddings, Helpers)
Source: default.css
============================================================ */
/* Deafult Margin & Padding */
/*-- Margin Top --*/
.mt-5 {
margin-top: 5px;
}
.mt-10 {
margin-top: 10px;
}
.mt-15 {
margin-top: 15px;
}
.mt-20 {
margin-top: 20px;
}
.mt-25 {
margin-top: 25px;
}
.mt-30 {
margin-top: 30px;
}
.mt-35 {
margin-top: 35px;
}
.mt-40 {
margin-top: 40px;
}
.mt-45 {
margin-top: 45px;
}
.mt-50 {
margin-top: 50px;
}
.mt-55 {
margin-top: 55px;
}
.mt-60 {
margin-top: 60px;
}
.mt-65 {
margin-top: 65px;
}
.mt-70 {
margin-top: 70px;
}
.mt-75 {
margin-top: 75px;
}
.mt-80 {
margin-top: 80px;
}
.mt-85 {
margin-top: 85px;
}
.mt-90 {
margin-top: 90px;
}
.mt-95 {
margin-top: 95px;
}
.mt-100 {
margin-top: 100px;
}
.mt-105 {
margin-top: 105px;
}
.mt-110 {
margin-top: 110px;
}
.mt-115 {
margin-top: 115px;
}
.mt-120 {
margin-top: 120px;
}
.mt-125 {
margin-top: 125px;
}
.mt-130 {
margin-top: 130px;
}
.mt-135 {
margin-top: 135px;
}
.mt-140 {
margin-top: 140px;
}
.mt-145 {
margin-top: 145px;
}
.mt-150 {
margin-top: 150px;
}
.mt-155 {
margin-top: 155px;
}
.mt-160 {
margin-top: 160px;
}
.mt-165 {
margin-top: 165px;
}
.mt-170 {
margin-top: 170px;
}
.mt-175 {
margin-top: 175px;
}
.mt-180 {
margin-top: 180px;
}
.mt-185 {
margin-top: 185px;
}
.mt-190 {
margin-top: 190px;
}
.mt-195 {
margin-top: 195px;
}
.mt-200 {
margin-top: 200px;
}
/*-- Margin Bottom --*/
.mb-5 {
margin-bottom: 5px;
}
.mb-10 {
margin-bottom: 10px;
}
.mb-15 {
margin-bottom: 15px;
}
.mb-20 {
margin-bottom: 20px;
}
.mb-25 {
margin-bottom: 25px;
}
.mb-30 {
margin-bottom: 30px;
}
.mb-35 {
margin-bottom: 35px;
}
.mb-40 {
margin-bottom: 40px;
}
.mb-45 {
margin-bottom: 45px;
}
.mb-50 {
margin-bottom: 50px;
}
.mb-55 {
margin-bottom: 55px;
}
.mb-60 {
margin-bottom: 60px;
}
.mb-65 {
margin-bottom: 65px;
}
.mb-70 {
margin-bottom: 70px;
}
.mb-75 {
margin-bottom: 75px;
}
.mb-80 {
margin-bottom: 80px;
}
.mb-85 {
margin-bottom: 85px;
}
.mb-90 {
margin-bottom: 90px;
}
.mb-95 {
margin-bottom: 95px;
}
.mb-100 {
margin-bottom: 100px;
}
.mb-105 {
margin-bottom: 105px;
}
.mb-110 {
margin-bottom: 110px;
}
.mb-115 {
margin-bottom: 115px;
}
.mb-120 {
margin-bottom: 120px;
}
.mb-125 {
margin-bottom: 125px;
}
.mb-130 {
margin-bottom: 130px;
}
.mb-135 {
margin-bottom: 135px;
}
.mb-140 {
margin-bottom: 140px;
}
.mb-145 {
margin-bottom: 145px;
}
.mb-150 {
margin-bottom: 150px;
}
.mb-155 {
margin-bottom: 155px;
}
.mb-160 {
margin-bottom: 160px;
}
.mb-165 {
margin-bottom: 165px;
}
.mb-170 {
margin-bottom: 170px;
}
.mb-175 {
margin-bottom: 175px;
}
.mb-180 {
margin-bottom: 180px;
}
.mb-185 {
margin-bottom: 185px;
}
.mb-190 {
margin-bottom: 190px;
}
.mb-195 {
margin-bottom: 195px;
}
.mb-200 {
margin-bottom: 200px;
}
/*-- Padding Top --*/
.pt-5 {
padding-top: 5px;
}
.pt-10 {
padding-top: 10px;
}
.pt-15 {
padding-top: 15px;
}
.pt-20 {
padding-top: 20px;
}
.pt-25 {
padding-top: 25px;
}
.pt-30 {
padding-top: 30px;
}
.pt-35 {
padding-top: 35px;
}
.pt-40 {
padding-top: 40px;
}
.pt-45 {
padding-top: 45px;
}
.pt-50 {
padding-top: 50px;
}
.pt-55 {
padding-top: 55px;
}
.pt-60 {
padding-top: 60px;
}
.pt-65 {
padding-top: 65px;
}
.pt-70 {
padding-top: 70px;
}
.pt-75 {
padding-top: 75px;
}
.pt-80 {
padding-top: 80px;
}
.pt-85 {
padding-top: 85px;
}
.pt-90 {
padding-top: 90px;
}
.pt-95 {
padding-top: 95px;
}
.pt-100 {
padding-top: 100px;
}
.pt-105 {
padding-top: 105px;
}
.pt-110 {
padding-top: 110px;
}
.pt-115 {
padding-top: 115px;
}
.pt-120 {
padding-top: 120px;
}
.pt-125 {
padding-top: 125px;
}
.pt-130 {
padding-top: 130px;
}
.pt-135 {
padding-top: 135px;
}
.pt-140 {
padding-top: 140px;
}
.pt-145 {
padding-top: 145px;
}
.pt-150 {
padding-top: 150px;
}
.pt-155 {
padding-top: 155px;
}
.pt-160 {
padding-top: 160px;
}
.pt-165 {
padding-top: 165px;
}
.pt-170 {
padding-top: 170px;
}
.pt-175 {
padding-top: 175px;
}
.pt-180 {
padding-top: 180px;
}
.pt-185 {
padding-top: 185px;
}
.pt-190 {
padding-top: 190px;
}
.pt-195 {
padding-top: 195px;
}
.pt-200 {
padding-top: 200px;
}
/*-- Padding Bottom --*/
.pb-5 {
padding-bottom: 5px;
}
.pb-10 {
padding-bottom: 10px;
}
.pb-15 {
padding-bottom: 15px;
}
.pb-20 {
padding-bottom: 20px;
}
.pb-25 {
padding-bottom: 25px;
}
.pb-30 {
padding-bottom: 30px;
}
.pb-35 {
padding-bottom: 35px;
}
.pb-40 {
padding-bottom: 40px;
}
.pb-45 {
padding-bottom: 45px;
}
.pb-50 {
padding-bottom: 50px;
}
.pb-55 {
padding-bottom: 55px;
}
.pb-60 {
padding-bottom: 60px;
}
.pb-65 {
padding-bottom: 65px;
}
.pb-70 {
padding-bottom: 70px;
}
.pb-75 {
padding-bottom: 75px;
}
.pb-80 {
padding-bottom: 80px;
}
.pb-85 {
padding-bottom: 85px;
}
.pb-90 {
padding-bottom: 90px;
}
.pb-95 {
padding-bottom: 95px;
}
.pb-100 {
padding-bottom: 100px;
}
.pb-105 {
padding-bottom: 105px;
}
.pb-110 {
padding-bottom: 110px;
}
.pb-115 {
padding-bottom: 115px;
}
.pb-120 {
padding-bottom: 120px;
}
.pb-125 {
padding-bottom: 125px;
}
.pb-130 {
padding-bottom: 130px;
}
.pb-135 {
padding-bottom: 135px;
}
.pb-140 {
padding-bottom: 140px;
}
.pb-145 {
padding-bottom: 145px;
}
.pb-150 {
padding-bottom: 150px;
}
.pb-155 {
padding-bottom: 155px;
}
.pb-160 {
padding-bottom: 160px;
}
.pb-165 {
padding-bottom: 165px;
}
.pb-170 {
padding-bottom: 170px;
}
.pb-175 {
padding-bottom: 175px;
}
.pb-180 {
padding-bottom: 180px;
}
.pb-185 {
padding-bottom: 185px;
}
.pb-190 {
padding-bottom: 190px;
}
.pb-195 {
padding-bottom: 195px;
}
.pb-200 {
padding-bottom: 200px;
}
/*-- Padding Left --*/
.pl-0 {
padding-left: 0px;
}
.pl-5 {
padding-left: 5px;
}
.pl-10 {
padding-left: 10px;
}
.pl-15 {
padding-left: 15px;
}
.pl-20{
padding-left: 20px;
}
.pl-25 {
padding-left: 35px;
}
.pl-30 {
padding-left: 30px;
}
.pl-35 {
padding-left: 35px;
}
.pl-35 {
padding-left: 35px;
}
.pl-40 {
padding-left: 40px;
}
.pl-45 {
padding-left: 45px;
}
.pl-50 {
padding-left: 50px;
}
.pl-55 {
padding-left: 55px;
}
.pl-60 {
padding-left: 60px;
}
.pl-65 {
padding-left: 65px;
}
.pl-70 {
padding-left: 70px;
}
.pl-75 {
padding-left: 75px;
}
.pl-80 {
padding-left: 80px;
}
.pl-85 {
padding-left: 80px;
}
.pl-90 {
padding-left: 90px;
}
.pl-95 {
padding-left: 95px;
}
.pl-100 {
padding-left: 100px;
}
/*-- Padding Right --*/
.pr-0 {
padding-right: 0px;
}
.pr-5 {
padding-right: 5px;
}
.pr-10 {
padding-right: 10px;
}
.pr-15 {
padding-right: 15px;
}
.pr-20{
padding-right: 20px;
}
.pr-25 {
padding-right: 35px;
}
.pr-30 {
padding-right: 30px;
}
.pr-35 {
padding-right: 35px;
}
.pr-35 {
padding-right: 35px;
}
.pr-40 {
padding-right: 40px;
}
.pr-45 {
padding-right: 45px;
}
.pr-50 {
padding-right: 50px;
}
.pr-55 {
padding-right: 55px;
}
.pr-60 {
padding-right: 60px;
}
.pr-65 {
padding-right: 65px;
}
.pr-70 {
padding-right: 70px;
}
.pr-75 {
padding-right: 75px;
}
.pr-80 {
padding-right: 80px;
}
.pr-85 {
padding-right: 80px;
}
.pr-90 {
padding-right: 90px;
}
.pr-95 {
padding-right: 95px;
}
.pr-100 {
padding-right: 100px;
}
/* font weight */
.f-700{font-weight: 700;}
.f-600{font-weight: 600;}
.f-500{font-weight: 500;}
.f-400{font-weight: 400;}
.f-300{font-weight: 300;}
/* Background Color */
.gray-bg {
background: #f7f7fd;
}
.white-bg {
background: #fff;
}
.black-bg {
background: #222;
}
.theme-bg {
background: #222;
}
.primary-bg {
background: #222;
}
/* Color */
.white-color {
color: #fff;
}
.black-color {
color: #222;
}
.theme-color {
color: #222;
}
.primary-color {
color: #222;
}
/* black overlay */
[data-overlay] {
position: relative;
}
[data-overlay]::before {
background: #000 none repeat scroll 0 0;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
[data-overlay="3"]::before {
opacity: 0.3;
}
[data-overlay="4"]::before {
opacity: 0.4;
}
[data-overlay="5"]::before {
opacity: 0.5;
}
[data-overlay="6"]::before {
opacity: 0.6;
}
[data-overlay="7"]::before {
opacity: 0.7;
}
[data-overlay="8"]::before {
opacity: 0.8;
}
[data-overlay="9"]::before {
opacity: 0.9;
}
/* ============================================================
Main Theme Styles
Source: style.css
============================================================ */
/*
Theme Name: NFTMAK - NFT Marketplace Template.
Support: admin@gmail.com
Description: NFTMAK - NFT Marketplace Template.
Version: 1.0
*/
/* CSS Index
===============================
1. Theme default css
2. Header
3. Mobile-menu
4. Sidebar
5. Breadcrumb
6. Category
7. Banner
8. Top-seller
9. Top Collection
10. Features
11. Explore-area
12. Author Profile
13. Activity
14. Create Item
15. News
16. Testimonial
17. Creators
18. Blog
19. Login & Register
20. Footer
21. Preloader
================================*/
/* 1. Theme default css */
/* Google Fonts loaded async via in app.blade.php */
/*===================================
All Variables
=====================================*/
:root {
--font-family-body: 'Poppins', sans-serif;
--font-family-heading: 'Poppins', sans-serif;
--primary-color: #1D1933;
--secondary-color: #131129;
--body-text-color: #C9C9C9;
--heading-text-color: #fff;
--paragraph-text-color: #C9C9C9;
--nft-gradient-color: linear-gradient(79deg, rgba(99,69,237,1) 0%, rgba(224,57,253,1) 100%);
--gradient-btn-hover: linear-gradient(90deg, rgba(224,57,253,1) 0%, rgba(99,69,237,1) 100%);
--facebook: #3b5998;
--twitter: #00acee;
--linkedin: #1976d2;
--pinterest: #3b5998;
--youtube: #c4302b;
--skype: #00aff0;
--section-background-color: #070B24;
--header-background-color: #1C1832;
--sidebar-icon-background: linear-gradient(rgb(41, 38, 73) 0%, rgba(19, 17, 41, 0) 100%);
--icon-color: #59606B;
--icon-border-color: #2A2547;
--header-border-color: #222121;
--menu-color: #D4CDCD;
--header-form-border-color: #322C50;
--purple-color: #E039FD;
--dark-blue-color: #6345ED;
}
body {
font-family: var(--font-family-body);
font-weight: normal;
font-size: 16px;
color: var(--primary-color);
font-style: normal;
background: var(--section-background-color);
}
img,
.img {
max-width: 100%;
transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.f-left {
float: left
}
.f-right {
float: right
}
.fix {
overflow: hidden
}
a,
button {
transition: color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out, opacity 0.2s ease-out, box-shadow 0.2s ease-out;
text-decoration: none;
}
a:focus,
.btn:focus,
button:focus {
text-decoration: none;
outline: none;
box-shadow: none;
}
a:hover,
.portfolio-cat a:hover,
.footer -menu li a:hover {
color: #2B96CC;
text-decoration: none;
}
a,
button {
color: #1696e7;
outline: medium none;
text-decoration: none;
}
.btn:focus,
button:focus,
input:focus,
input:focus,
textarea,
textarea:focus {
outline: 0
}
.uppercase {
text-transform: uppercase;
}
.capitalize {
text-transform: capitalize;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-family-heading);
color: var(--heading-text-color);
margin-top: 0px;
font-style: normal;
font-weight: 600;
text-transform: normal;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
color: inherit;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 35px;
}
h3 {
font-size: 28px;
}
h4 {
font-size: 22px;
}
h5 {
font-size: 18px;
}
h6 {
font-size: 16px;
}
ul {
margin: 0px;
padding: 0px;
}
li {
list-style: none
}
p {
font-size: 15px;
font-weight: 400;
line-height: 1.6;
color: var(--paragraph-text-color);
margin-bottom: 15px;
}
hr {
border-bottom: 1px solid #eceff8;
border-top: 0 none;
margin: 30px 0;
padding: 0;
}
label {
color: #7e7e7e;
cursor: pointer;
font-size: 14px;
font-weight: 400;
}
*::-moz-selection {
background: #d6b161;
color: #fff;
text-shadow: none;
}
::-moz-selection {
background: #444;
color: #fff;
text-shadow: none;
}
::selection {
background: #444;
color: #fff;
text-shadow: none;
}
*::-moz-placeholder {
color: #555555;
font-size: 14px;
opacity: 1;
}
*::placeholder {
color: #555555;
font-size: 14px;
opacity: 1;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track {
box-shadow: none;
-webkit-box-shadow: none;
background-color: var(--primary-color);
border-radius: 10px;
}
::-webkit-scrollbar,
::-webkit-scrollbar {
width: 8px;
background-color: var(--primary-color);
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-image: var(--nft-gradient-color);
}
.theme-overlay {
position: relative
}
.theme-overlay::before {
background: #1696e7 none repeat scroll 0 0;
content: "";
height: 100%;
left: 0;
opacity: 0.6;
position: absolute;
top: 0;
width: 100%;
}
.separator {
border-top: 1px solid #f2f2f2
}
/* Bootstrap 5 */
.container {
padding-left: 15px;
padding-right: 15px;
}
.row {
--bs-gutter-x: 30px;
}
.row.g-0 {
--bs-gutter-x: 0;
}
.gutter-y-30 {
--bs-gutter-y: 30px;
}
/* button style */
.btn {
user-select: none;
-moz-user-select: none;
background: var(--nft-gradient-color);
border: medium none;
border-radius: 25px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: 700;
letter-spacing: 0;
line-height: 1;
margin-bottom: 0;
padding: 15px 12px;
text-align: center;
text-transform: uppercase;
touch-action: manipulation;
transition: all 0.3s ease 0s;
vertical-align: middle;
white-space: nowrap;
position: relative;
overflow: hidden;
z-index: 1;
}
.btn::before {
content: "";
position: absolute;
left: 5px;
right: 5px;
bottom: 4px;
top: 4px;
border: 1.5px dashed #fff;
border-radius: 30px;
}
.btn::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: var(--gradient-btn-hover);
z-index: -1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
opacity: 0;
}
.btn:hover {
color: #fff;
}
.btn:hover::after {
opacity: 1;
transition: all 0.5s ease;
}
.breadcrumb > .active {
color: #888;
}
/* scrollUp */
.scroll-top {
width: 50px;
height: 50px;
line-height: 50px;
position: fixed;
bottom: 105%;
right: 50px;
font-size: 16px;
border-radius: 5px;
z-index: 99;
color: #fff;
text-align: center;
cursor: pointer;
background: var(--nft-gradient-color);
transition: 1s ease;
border: none;
opacity: 0;
}
.scroll-top.open {
bottom: 30px;
opacity: 1;
}
.scroll-top::after {
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 1;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
}
.scroll-top:hover {
background: var(--gradient-btn-hover);
}
/* 2. Header */
.main-content {
padding-left: 116px;
position: relative;
}
.custom-container {
max-width: 1330px;
}
.transparent-header {
position: absolute;
left: 0;
top: 0px;
width: 100%;
z-index: 9;
height: auto;
}
.menu-area {
margin-top: 30px;
margin-bottom: -130px;
}
.menu-wrap {
background: var(--header-background-color);
padding: 0 25px;
border-radius: 10px;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
position: relative;
margin: 7px 9px;
}
.menu-wrap::before {
content: "";
position: absolute;
border: 1px solid var(--header-border-color);
top: -7px;
left: -9px;
bottom: -7px;
right: -9px;
border-radius: 10px;
pointer-events: none;
}
.menu-nav {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-start;
}
.logo img {
max-width: 110px;
}
.header-form {
width: 340px;
margin-left: 46px;
padding-left: 68px;
position: relative;
}
.header-form::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 31px;
border-radius: 3px;
background: var(--header-form-border-color)
}
.header-form form {
position: relative;
}
.header-form form input {
width: 100%;
height: 47px;
padding: 13px 20px 13px 40px;
background: var(--secondary-color);
border: none;
border: 1px dashed var(--header-form-border-color);
color: var(--menu-color);
border-radius: 6px;
font-size: 14px;
}
.header-form form input::placeholder {
color: var(--menu-color);
font-size: 12px;
font-weight: 500;
}
.header-form form button {
position: absolute;
border: none;
background: none;
left: 9px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
line-height: 1;
color: var(--icon-color);
}
.navbar-wrap {
display: flex;
flex-grow: 1;
}
.navbar-wrap ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-left: auto;
}
.navbar-wrap ul li {
display: block;
position: relative;
}
.navbar-wrap ul li a {
font-size: 15px;
font-weight: 500;
text-transform: capitalize;
color: var(--menu-color);
padding: 35px 16px;
display: block;
line-height: 1;
position: relative;
z-index: 1;
}
.navbar-wrap > ul > li.active > a,
.navbar-wrap > ul > li:hover > a {
color: var(--purple-color);
}
.main-menu .navigation li.menu-item-has-children .dropdown-btn {
display: none;
}
.header-action > ul {
display: flex;
align-items: center;
margin-left: 22px;
}
.header-action > ul li {
position: relative;
margin-left: 3px;
}
.header-action ul li:first-child {
margin-left: 0;
}
.header-action ul li a {
color: #222;
font-size: 14px;
}
.header-action .header-btn .btn {
color: #fff;
font-size: 14px;
padding: 18px 28px;
}
.navbar-wrap ul li .submenu {
position: absolute;
left: 0;
right: 0;
top: 100%;
min-width: 230px;
border: 1px solid #383354;
background: #1c1832;
margin: 0;
transform: scale(1 , 0);
transform-origin: 0 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-box-shadow: 0px 30px 70px 0px rgba(0, 0, 0, 0.65);
-moz-box-shadow: 0px 30px 70px 0px rgba(0, 0, 0, 0.65);
box-shadow: 0px 30px 70px 0px rgba(0, 0, 0, 0.65);
border-radius: 0;
padding: 18px 0;
display: block;
visibility: hidden;
opacity: 0;
z-index: 9;
}
.navbar-wrap ul li .submenu li {
margin-left: 0;
text-align: left;
display: block;
}
.navbar-wrap ul li .submenu li a {
padding: 0 10px 0 25px;
line-height: 40px;
font-weight: 500;
color: var(--menu-color);
text-transform: capitalize;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.navbar-wrap ul li .submenu li.active > a,
.navbar-wrap ul li .submenu li:hover > a {
color: var(--purple-color);
}
.navbar-wrap ul li:hover > .submenu {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.sticky-menu {
position: fixed;
left: 0;
margin: auto;
top: 0;
width: 100%;
z-index: 99;
background: #fff;
-webkit-animation: 1000ms ease-in-out 0s normal none 1 running fadeInDown;
animation: 1000ms ease-in-out 0s normal none 1 running fadeInDown;
-webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
border-radius: 0;
}
/* 3. Mobile-menu */
.nav-outer .mobile-nav-toggler {
position: relative;
float: right;
font-size: 40px;
line-height: 50px;
cursor: pointer;
display: none;
color: #fff;
margin-right: 30px;
top: 15px;
}
.nav-logo img {
width: 150px;
}
.mobile-menu {
position: fixed;
right: 0;
top: 0;
width: 300px;
padding-right: 30px;
max-width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
z-index: 9999;
border-radius: 0px;
transition: transform 200ms ease, opacity 200ms ease, visibility 200ms ease;
-webkit-transform: translateX(101%);
-ms-transform: translateX(101%);
transform: translateX(101%);
background: var(--primary-color);
}
.mobile-menu .navbar-collapse {
display: block !important;
}
.mobile-menu .nav-logo {
position: relative;
padding: 30px 25px;
text-align: left;
}
.mobile-menu-visible {
overflow: hidden;
}
.mobile-menu-visible .mobile-menu {
opacity: 1;
visibility: visible;
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}
.mobile-menu .navigation li.current>a:before {
height: 100%;
}
.menu-backdrop {
position: fixed;
right: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
transition: opacity 200ms ease, visibility 200ms ease;
opacity: 0;
visibility: hidden;
background: var(--primary-color);
}
.mobile-menu-visible .menu-backdrop {
opacity: 0.80;
visibility: visible;
}
.mobile-menu .menu-box {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
max-height: 100%;
overflow-y: auto;
overflow-x: hidden;
background: var(--primary-color);
padding: 0px 0px;
z-index: 5;
box-shadow: -9px 0 14px 0px rgb(0 0 0 / 6%);
}
.mobile-menu-visible .mobile-menu .menu-box {
opacity: 1;
visibility: visible;
}
.mobile-menu .close-btn {
position: absolute;
right: 25px;
top: 28px;
line-height: 30px;
width: 35px;
text-align: center;
font-size: 20px;
color: #fff;
cursor: pointer;
z-index: 10;
-webkit-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
transition: all 0.9s ease;
}
.mobile-menu-visible .mobile-menu .close-btn {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.mobile-menu .navigation {
position: relative;
display: block;
width: 100%;
float: none;
}
.mobile-menu .navigation li {
position: relative;
display: block;
border-top: 1px solid rgb(84 75 133 / 47%);
}
.mobile-menu .navigation:last-child {
border-bottom: 1px solid rgb(84 75 133 / 47%);
}
.mobile-menu .navigation li>ul>li:first-child {
border-top: 1px solid rgb(84 75 133 / 47%);
}
.mobile-menu .navigation li > a {
position: relative;
display: block;
line-height: 24px;
padding: 10px 25px;
font-size: 15px;
font-weight: 500;
color: #fff;
text-transform: capitalize;
-webkit-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
border: none;
}
.mobile-menu .navigation li ul li > a {
font-size: 15px;
margin-left: 20px;
text-transform: capitalize;
}
.mobile-menu .navigation li.active > a,
.mobile-menu .navigation li:hover > a {
color: var(--purple-color);
}
.mobile-menu .navigation li ul li ul li a {
margin-left: 40px;
}
.mobile-menu .navigation li ul li ul li ul li a {
margin-left: 60px;
}
.mobile-menu .navigation li > a:before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 0;
-webkit-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.mobile-menu .navigation li.menu-item-has-children .dropdown-btn {
position: absolute;
right: 6px;
top: 6px;
width: 32px;
height: 32px;
text-align: center;
font-size: 16px;
line-height: 32px;
color: #ffffff;
background: #2a244a;
cursor: pointer;
border-radius: 2px;
-webkit-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
z-index: 5;
}
.mobile-menu .navigation li.menu-item-has-children .dropdown-btn.open {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
background: var(--purple-color);
}
.mobile-menu .navigation li > ul,
.mobile-menu .navigation li > ul > li > ul {
display: none;
}
.mobile-menu .social-links ul {
display: flex;
position: relative;
text-align: center;
padding: 30px 20px 20px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.mobile-menu .social-links li {
position: relative;
display: inline-block;
margin: 0px 6px 10px;
}
.mobile-menu .social-links li a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
position: relative;
line-height: 32px;
font-size: 16px;
color: #fff;
-webkit-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
border: 1px solid rgb(84 75 133 / 47%);
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
}
.mobile-menu .social-links li a:hover {
border-color: var(--dark-blue-color);
background: var(--dark-blue-color);
color: #fff;
}
.menu-area .mobile-nav-toggler {
position: relative;
float: right;
font-size: 30px;
cursor: pointer;
line-height: 1;
color: #fff;
display: none;
margin-top: 28px;
z-index: 99;
margin: 30px 35px 0 0;
}
/* Offcanvas */
.offcanvas-wrapper {
background: var(--primary-color) none repeat scroll 0 0;
height: 100%;
padding: 30px 15px 30px 30px;
position: fixed;
right: 0;
top: 0;
transition: transform 200ms ease;
width: 420px;
z-index: 9999;
transform: translateX(100%);
}
.offcanvas-wrapper.active {
transform: translateX(0);
}
.offcanvas-wrapper::before {
content: "";
position: absolute;
left: 0;
top: 0;
background-image: url(../img/bg/sidebar_bg.png);
width: 100%;
height: 184px;
z-index: -1;
}
.offcanvas-inner {
height: 100%;
padding-right: 0;
}
.offcanvas-wrapper .mCSB_inside>.mCSB_container {
margin-right: 25px;
}
.offcanvas-wrapper .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
background: var(--nft-gradient-color);
}
.offcanvas-wrapper .mCSB_scrollTools .mCSB_draggerRail {
background: var(--section-background-color);
}
.menu-trigger,
.menu-close {
position: absolute;
width: 29px;
height: 48px;
background: var(--nft-gradient-color);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
left: -29px;
top: 55px;
color: #fff;
border-radius: 5px 0 0 5px;
}
.menu-trigger i,
.menu-close i {
display: block;
line-height: 1;
}
.menu-close {
display: none;
}
.offcanvas-wrapper.active .menu-close {
display: flex;
}
.offcanvas-wrapper.active .menu-trigger {
display: none;
}
.author-img {
width: 112px;
height: 112px;
border-radius: 50%;
margin: 0px auto 14px;
position: relative;
z-index: 1;
border: 3px solid transparent;
background-clip: padding-box;
}
.author-img img {
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 50%;
}
.author-img::after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: -3px;
background: -moz-linear-gradient(180deg, #F53131 0%, #18152B 100%);
background: -webkit-linear-gradient(180deg, #F53131 0%, #18152B 100%);
background: -o-linear-gradient(180deg, #F53131 0%, #18152B 100%);
background: -ms-linear-gradient(180deg, #F53131 0%, #18152B 100%);
background: linear-gradient(180deg, #F53131 0%, #18152B 100%);
border-radius: 50%;
transition: .3s linear;
border-radius: 50%;
z-index: -1;
}
.author-content .title {
font-size: 20px;
margin-bottom: 3px;
font-weight: 500;
color: var(--paragraph-text-color);
}
.author-content p {
font-size: 12px;
margin-bottom: 22px;
font-weight: 500;
}
.author-content .btn {
width: 154px;
padding: 18px 20px;
}
.sidebar-active .slick-dots {
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.sidebar-active .slick-dots li {
margin: 0 4px;
line-height: 0;
}
.sidebar-active .slick-dots li button {
text-indent: -9999999px;
border: none;
padding: 0;
height: 9px;
width: 9px;
border-radius: 50%;
transition: .3s linear;
background: rgba(196, 196, 196, 0.5);
}
.sidebar-active .slick-dots li.slick-active button {
background: #C4C4C4;
}
.sidebar-img img {
border-radius: 15px;
box-shadow: 6px 4px 4px rgba(0, 0, 0, 0.25);
margin-bottom: 15px;
width: 100%;
}
.overview-title .title {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 25px;
color: var(--paragraph-text-color);
}
.overview-item {
display: flex;
align-items: center;
background: linear-gradient(89.9deg, #090E2B 13.28%, #0D1127 99.84%);
padding: 15px;
border-radius: 6px;
}
.overview-item:not(:last-child) {
margin-bottom: 12px;
}
.overview-icon {
width: 45px;
height: 42px;
background: #009FBB;
color: #fff;
justify-content: center;
align-items: center;
display: flex;
border-radius: 9px;
line-height: 0;
font-size: 20px;
margin-right: 20px;
}
.overview-content .title {
font-size: 12px;
font-weight: 400;
color: var(--paragraph-text-color);
margin-bottom: 3px;
}
.overview-content span {
font-size: 18px;
font-weight: 600;
color: #fff;
}
.overview-item > a {
margin-left: auto;
display: flex;
width: 28px;
height: 28px;
background: var(--primary-color);
border-radius: 50%;
align-items: center;
justify-content: center;
line-height: 0;
color: #fff;
}
.overview-item-wrap .overview-item:nth-child(2) .overview-icon {
background: #F3943D;
}
.overview-item-wrap .overview-item:nth-child(3) .overview-icon {
background: #FF5E3D;
}
.offcanvas-overly {
position: fixed;
background: #000;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 999;
opacity: 0;
visibility: hidden;
transition: .3s;
}
.offcanvas-overly.active {
opacity: .7;
visibility: visible;
}
/* 4. Sidebar */
.sidebar {
display: flex;
flex-direction: column;
justify-content: flex-start;
background-color: var(--primary-color);
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 101;
width: 116px;
padding: 55px 30px;
text-align: center;
overflow-y: auto;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
}
.sidebar::-webkit-scrollbar-track,
.offcanvas-inner::-webkit-scrollbar-track {
box-shadow: none;
-webkit-box-shadow: none;
background-color: var(--primary-color);
border-radius: 10px;
}
.sidebar::-webkit-scrollbar,
.offcanvas-inner::-webkit-scrollbar {
width: 4px;
background-color: var(--primary-color);
}
.sidebar::-webkit-scrollbar-thumb,
.offcanvas-inner::-webkit-scrollbar-thumb {
border-radius: 10px;
background-image: var(--nft-gradient-color);
}
.sidebar-logo img,
.footer-logo img,
.nav-logo img {
width: 30px;
}
.sidebar-icon {
flex-grow: 1;
}
.sidebar-icon ul {
display: flex;
flex-direction: column;
height: 100%;
}
.sidebar-icon ul li a {
width: 56px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
color: var(--icon-color);
/*background: var(--sidebar-icon-background);*/
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px;
border-radius: 9px;
border: 1px solid var(--icon-border-color);
transition: all 0.3s ease-in 0s;
font-size: 26px;
line-height: 0;
}
.sidebar-icon ul li.active a,
.sidebar-icon ul li a:hover {
background: var(--secondary-color);
}
.sidebar-icon ul li {
margin-bottom: 20px;
}
/* 5. Breadcrumb */
.breadcrumb-bg {
background-image: url(../img/bg/breadcrumb_bg.png);
background-position: center;
background-size: cover;
padding: 260px 0 140px;
}
.breadcrumb-content .title {
font-size: 40px;
font-weight: 600;
margin-bottom: 0;
}
.breadcrumb-bg-two {
background-image: url(../img/bg/breadcrumb_bg02.jpg);
}
.market-single-breadcrumb-area {
padding: 30px 0 30px;
}
.market-single-breadcrumb-area .breadcrumb-bg {
position: absolute;
left: 0;
top: -30px;
width: 100%;
height: 260px;
background-image: url(../img/bg/breadcrumb_bg.png);
background-position: center;
background-size: cover;
padding: 0;
z-index: -1;
}
.market-single-breadcrumb-area .breadcrumb-bg::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background: var(--section-background-color);
background: -webkit-linear-gradient(to bottom, transparent, var(--section-background-color));
background: linear-gradient(to bottom, transparent, var(--section-background-color));
z-index: 1;
}
.market-single-breadcrumb {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.menu-area.market-single-header {
margin-top: 30px;
margin-bottom: 0;
}
.home-back-btn {
margin-bottom: 15px;
}
.home-back-btn a {
display: inline-block;
font-weight: bold;
font-size: 13px;
text-transform: uppercase;
color: #AEAEAE;
background: #241F3D;
border: 1px solid #1C1832;
border-radius: 30px;
padding: 12px 30px;
}
.home-back-btn a:hover {
background: var(--purple-color);
color: #fff;
}
.market-single-breadcrumb .breadcrumb {
margin-bottom: 15px;
}
.market-single-breadcrumb .breadcrumb-item {
color: var(--paragraph-text-color);
font-size: 14px;
font-weight: 600;
}
.market-single-breadcrumb .breadcrumb-item a {
color: var(--paragraph-text-color);
}
.market-single-breadcrumb .breadcrumb-item a:hover {
color: var(--purple-color);
}
.market-single-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
content: "\f112";
font-family: "uicons-solid-rounded";
color: #fff;
}
/* 6. Category */
.category-area {
background: var(--header-background-color);
padding: 26px 0;
}
.category-list {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}
.category-list li {
margin: 4px 20px;
}
.category-list li img {
max-width: 19px;
flex: 0 0 19px;
margin-right: 10px;
}
.category-list li a {
color: #B4B2B2;
display: flex;
align-items: center;
font-size: 16px;
font-weight: 600;
}
.category-list li.active a,
.category-list li:hover a {
color: #fff;
}
.inner-explore-products {
padding: 80px 0 50px;
}
.filter-wrap form {
display: flex;
align-items: center;
flex-wrap: wrap;
margin: 0 0 25px;
}
.filter-wrap form .filter-item {
display: flex;
align-items: center;
margin: 0 30px 15px 0;
}
.filter-wrap form .filter-item .title {
font-weight: 600;
font-size: 16px;
color: #E8E8E8;
margin-right: 20px;
cursor: default;
}
.filter-item .switch {
position: relative;
display: inline-block;
width: 55px;
height: 30px;
}
.filter-item .switch input {
opacity: 0;
width: 0;
height: 0;
}
.filter-item .button {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--primary-color);
-webkit-transition: .4s;
transition: .4s;
border-radius: 35px;
box-shadow: 3px 4px 4px rgba(0, 0, 0, 0.25);
}
.filter-item .button:before {
position: absolute;
content: "";
height: 24px;
width: 24px;
left: 4px;
bottom: 3px;
background-color: var(--section-background-color);
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
.filter-item input:checked + .button {
background-color: var(--dark-blue-color);
}
.filter-item input:focus + .button {
box-shadow: 3px 4px 4px rgba(0, 0, 0, 0.25);
}
.filter-item input:checked + .button:before {
-webkit-transform: translateX(22px);
-ms-transform: translateX(22px);
transform: translateX(22px);
}
.filter-item input:checked + .button::before {
background: #fff;
}
.filter-wrap form .filter-btn {
margin: 0 0 15px auto;
}
.filter-category-wrap {
padding: 15px 25px;
margin-bottom: 30px;
background: var(--primary-color);
border-radius: 8px;
display: none;
}
/* 7. Banner */
.banner-bg {
background-image: url(../img/banner/banner_bg.jpg);
background-size: cover;
background-position: top center;
}
.banner-area {
padding: 250px 0 145px;
}
.banner-content {
margin-left: 90px;
}
.banner-content .title {
font-size: 70px;
font-weight: 600;
line-height: 1.22;
margin-bottom: 10px;
}
.banner-content .title span {
color: var(--purple-color);
}
.banner-content p {
font-size: 16px;
font-weight: 500;
margin-bottom: 35px;
width: 80%;
}
.banner-btn {
display: inline-flex;
align-items: center;
font-size: 16px;
font-weight: 600;
text-transform: capitalize;
position: relative;
z-index: 1;
background: transparent;
padding: 18px 21px;
transition: .3s linear;
color: #fff;
line-height: 1;
}
.banner-btn:hover {
color: #fff;
}
.banner-btn::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 51px;
height: 51px;
background: var(--nft-gradient-color);
z-index: -1;
border-radius: 30px;
transition: .3s linear;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.banner-btn:hover::after {
width: 100%;
}
.banner-btn i {
line-height: 0;
margin-left: 12px;
}
.market-single-area {
padding: 0 0 70px;
}
.market-single-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 25px;
}
.market-single-title-wrap .title {
font-weight: 600;
font-size: 36px;
margin-bottom: 0;
}
.market-details-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-top: 20px;
}
.market-details-meta li {
font-weight: 600;
font-size: 14px;
color: #D1D1D1;
margin-right: 22px;
}
.market-details-meta li:last-child {
margin-right: 0;
}
.market-details-meta li a {
color: var(--purple-color);
margin-left: 5px;
}
.market-details-meta .wishlist {
display: flex;
align-items: center;
}
.market-details-meta .wishlist::before {
content: "\f1e9";
font-family: "uicons-solid-rounded";
color: var(--purple-color);
margin-right: 8px;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.market-single-action {
margin-left: 30px;
}
.market-single-action ul {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.market-single-action ul li + li {
margin-left: 12px;
}
.market-single-action ul li a {
display: flex;
width: 46px;
height: 46px;
background: #241F3D;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 13px;
color: #fff;
}
.market-single-action ul li a:hover {
background: var(--purple-color);
}
.market-single-action ul li a i {
display: block;
line-height: 0;
}
.market-single-creator {
background: #241F3D;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 7px;
display: flex;
align-items: center;
padding: 10px 17px;
margin-bottom: 20px;
}
.market-single-creator .thumb,
.highest-bid-avatar .thumb {
width: 62px;
height: 62px;
background: rgba(7, 11, 36, 0.4);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
padding: 6px;
margin-right: 15px;
}
.market-single-creator .info .title,
.highest-bid-avatar .content .title {
font-weight: 600;
font-size: 16px;
margin-bottom: 2px;
}
.market-single-creator .info .title a:hover,
.highest-bid-avatar .content .title a:hover {
color: var(--purple-color);
}
.market-single-creator .info > span,
.highest-bid-avatar .content > span {
display: block;
color: #D7D2D2;
font-weight: 500;
font-size: 13px;
}
.market-single-content {
margin: 14px 0 39px;
}
.market-single-content p {
margin-bottom: 0;
}
.highest-bid-wrap {
background: #241F3D;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 7px;
border-top: 8px solid rgba(72, 68, 92, 0.2);
padding: 25px 25px 30px;
position: relative;
z-index: 1;
}
.highest-bid-wrap .title {
font-weight: 600;
font-size: 16px;
margin-bottom: 17px;
}
.highest-bid-avatar {
display: flex;
align-items: center;
}
.bid-countdown-wrap .coming-time {
display: flex;
align-items: center;
border: 3px solid transparent;
border-radius: 6px;
justify-content: center;
background: #241f3d;
padding: 11px 15px;
background-clip: padding-box;
position: relative;
}
.bid-countdown-wrap .coming-time::before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: -3px;
background: var(--nft-gradient-color);
border-radius: 6px;
transition: .3s linear;
z-index: -1;
}
.bid-countdown-wrap .coming-time .time-count > span {
display: block;
font-weight: 600;
font-size: 16px;
color: #fff;
line-height: 1;
text-align: center;
}
.bid-countdown-wrap .coming-time .time-count > span:last-child {
font-weight: 500;
text-transform: uppercase;
font-size: 12px;
color: #D6D3D3;
margin-top: 5px;
}
.bid-countdown-wrap .coming-time .time-count {
margin-right: 15px;
}
.bid-countdown-wrap .coming-time .time-count:last-child {
margin-right: 0;
}
.place-bid-btn {
display: block;
width: 100%;
background: #080B24;
border: 2px solid #FFFFFF;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 30px;
text-align: center;
font-weight: 600;
font-size: 16px;
text-transform: uppercase;
color: #fff;
padding: 15px 25px;
margin-top: 35px;
}
.place-bid-btn:hover {
border-color: var(--purple-color);
color: var(--purple-color);
}
.market-single-area .activity-table {
margin-top: 20px;
}
.market-single-area .activity-table tbody .author img {
border-radius: 11px;
}
.market-single-area .activity-table tbody tr {
box-shadow: none;
background: var(--primary-color);
border-bottom: 12px solid var(--section-background-color);
}
.market-single-area .activity-table thead th {
font-size: 16px;
font-weight: 500;
}
.market-single-area .activity-table thead th.title {
color: #fff;
font-weight: 600;
font-size: 20px;
}
.bid-history-list li {
padding-bottom: 15px;
margin-bottom: 15px;
border-bottom: 1px solid #241F3D;
}
.bid-history-list li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border: none;
}
.bid-history-list .bid-history-item {
background: rgba(36, 31, 61, 0.4);
border-radius: 7px;
padding: 9px 20px;
display: flex;
align-items: center;
justify-content: space-between;
transition: .3s linear;
}
.bid-history-item .bid-history-info {
text-align: right;
}
.bid-history-item .bid-history-info span {
color: #D7D2D2;
display: block;
font-size: 13px;
font-weight: 500;
margin-bottom: 7px;
}
.bid-history-item .bid-history-info .title {
color: #fff;
margin-bottom: 0;
line-height: 1;
font-weight: 600;
font-size: 16px;
}
.bid-history-list .bid-history-item:hover {
background: #241F3D;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
}
.bid-history-overflow {
max-height: 303px;
}
.bid-history-overflow .mCSB_scrollTools {
width: 4px;
}
.bid-history-overflow .mCSB_scrollTools .mCSB_draggerContainer {
background: #241F3D;
}
.bid-history-overflow .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
border-radius: 30px;
}
.bid-history-overflow .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
background: var(--nft-gradient-color);
}
.bid-history-overflow .mCSB_inside>.mCSB_container {
margin-right: 25px;
}
.bid-history-wrap {
overflow: hidden;
margin-top: 45px;
}
.bid-history-wrap .nav-tabs {
border-bottom: 1px solid #6D43EE;
margin-bottom: 17px;
padding-bottom: 5px;
}
.bid-history-wrap .nav .nav-item {
margin-right: 35px;
margin-bottom: 10px;
}
.bid-history-wrap .nav .nav-item .nav-link {
border: none;
padding: 0;
font-weight: 500;
font-size: 16px;
color: #fff;
background: transparent;
}
.bid-history-wrap .nav .nav-item .nav-link.active {
background: #6644EC;
background: -webkit-linear-gradient(to right, #6644EC 0%, #DF39FD 100%);
background: -moz-linear-gradient(to right, #6644EC 0%, #DF39FD 100%);
background: linear-gradient(to right, #6644EC 0%, #DF39FD 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
}
.top-collection-area.live-auctions-area {
padding: 0 0 50px;
}
/* 8. Top-seller */
.top-seller-area {
position: relative;
z-index: 1;
}
.top-seller-wrap {
padding-bottom: 25px;
border-bottom: 2.5px solid var(--primary-color);
}
.section-title .title {
font-size: 26px;
margin-bottom: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.section-title .title img {
margin-left: 10px;
}
.top-seller-item {
display: flex;
background: var(--primary-color);
padding: 22px 22px;
border-radius: 15px;
border: 3px solid transparent;
position: relative;
background-clip: padding-box;
margin-bottom: 30px;
}
.top-seller-item::before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #33276B;
border-radius: 15px;
margin: -3px;
z-index: -1;
}
.top-seller-item::after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: -3px;
background: var(--nft-gradient-color);
border-radius: 15px;
opacity: .2;
transition: .3s linear;
z-index: -1;
}
.top-seller-item:hover::after {
opacity: 1;
}
.top-seller-img {
margin-right: 20px;
width: 73px;
flex: 0 0 73px;
}
.top-seller-img img {
border-radius: 50%;
}
.top-seller-content {
flex-grow: 1;
}
.top-seller-content .title {
font-size: 18px;
margin-bottom: 3px;
font-weight: 600;
}
.top-seller-content .title a:hover {
color: #fff;
}
.top-seller-content p {
font-size: 13px;
font-weight: 600;
margin-bottom: 8px;
}
.top-seller-content p span {
color: var(--purple-color);
}
.top-seller-content ul {
display: flex;
align-items: center;
}
.top-seller-content ul li {
margin-right: 7px;
}
.top-seller-content ul li a {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border: 1.5px solid var(--icon-border-color);
line-height: 0;
font-size: 10px;
color: var(--icon-color);
transition: .3s ease-in;
}
.top-seller-content ul li a:hover {
border-color: var(--purple-color);
color: var(--purple-color);
}
/* 9. Top Collection */
.top-collection-area {
padding: 80px 0 50px;
}
.top-collection-item {
background: var(--primary-color);
border-radius: 15px;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
padding: 11px 20px 17px;
margin-bottom: 30px;
}
.collection-item-top > ul {
display: flex;
align-items: center;
margin-bottom: 12px;
justify-content: space-between;
}
.collection-item-top > ul > li {
display: flex;
align-items: center;
color: var(--purple-color);
font-size: 13px;
font-weight: 600;
}
.collection-item-top > ul .thumb {
display: block;
width: 30px;
flex: 0 0 30px;
margin-right: 11px;
}
.collection-item-top > ul .thumb img {
border-radius: 50%;
border: 1px solid #494747;
}
.collection-item-top > ul .name {
color: #84828f;
margin-left: 5px;
}
.collection-item-top .wishlist a {
color: #BAB6B4;
display: flex;
align-items: center;
font-size: 14px;
font-weight: 600;
}
.collection-item-top .wishlist a::before {
content: "\f1e9";
font-family: "uicons-solid-rounded";
color: #322E4D;
margin-right: 8px;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.collection-item-top .wishlist a:hover::before {
color: var(--purple-color);
}
.info-dots > span {
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #C4C4C4;
margin-left: 4.5px;
opacity: .4;
}
.info-dots > span:nth-child(2) {
opacity: .6;
}
.info-dots > span:nth-child(3) {
opacity: 1;
}
.collection-item-thumb {
margin-bottom: 15px;
}
.collection-item-thumb img {
border-radius: 15px;
}
.collection-item-content .title {
color: #FBFAFA;
font-size: 16px;
font-weight: 600;
margin-bottom: 0;
display: flex;
justify-content: space-between;
text-transform: capitalize;
}
.collection-item-content .title a:hover {
color: #fff;
}
.collection-item-content .title span {
margin-left: 20px;
font-size: 14px;
color: var(--purple-color);
}
.top-collection-active [class*="col-"] {
padding-left: 15px;
padding-right: 15px;
}
.collection-item-bottom .wishlist a:hover::before {
color: var(--purple-color);
}
.top-collection-nav {
display: flex;
align-items: center;
justify-content: flex-end;
position: relative;
z-index: 1;
}
.top-collection-nav button {
width: 41px;
height: 41px;
display: flex;
align-items: center;
justify-content: center;
background: var(--section-background-color);
font-size: 16px;
color: #59606B;
position: relative;
border: 3px solid transparent;
padding: 0;
background-clip: padding-box;
border-radius: 4px;
}
.top-collection-nav button:hover {
color: #fff;
background-color: transparent;
}
.top-collection-nav button::before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: var(--nft-gradient-color);
margin: -3px;
border-radius: 4px;
z-index: -1;
}
.top-collection-nav button i {
display: block;
line-height: 0;
}
.top-collection-nav button:not(:last-child) {
margin-right: 12px;
}
.collection-item-top .dropdown-toggle {
position: absolute;
left: 0;
top: -5px;
height: 20px;
width: 100%;
z-index: 1;
}
.collection-item-top .dropdown-toggle::after {
display: none;
}
.collection-item-top .dropdown-menu {
min-width: 186px;
padding: 10px 0;
margin: 0;
font-size: 13px;
font-weight: 600;
color: var(--paragraph-text-color);
background-color: #3C375C;
background-clip: padding-box;
border: 1px solid #414040;
border-radius: 5px;
inset: 32px 0px auto auto !important;
transform: unset !important;
width: 186px;
}
.collection-item-top .dropdown-menu li a {
display: block;
color: var(--paragraph-text-color);
padding: 5px 18px;
}
.collection-item-top .dropdown-menu li a:hover {
color: var(--purple-color);
}
/* 10. Features */
.area-bg {
background-image: url(../img/bg/features_bg.png);
background-position: top center;
background-size: cover;
position: relative;
z-index: 1;
}
.area-bg::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(29, 25, 51, 0.5) 0%, rgba(29, 25, 51, 0) 100%);
z-index: -1;
}
.week-features-area {
padding: 80px 0 0;
position: relative;
z-index: 1;
}
.week-features-item {
background: var(--primary-color);
border-radius: 17px;
box-shadow: 5px 4px 4px rgba(0, 0, 0, 0.25);
padding: 27px 22px;
margin-bottom: 30px;
}
.features-item-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.features-avatar {
display: flex;
align-items: center;
}
.features-item-wishlist {
margin-left: 30px;
}
.features-avatar-thumb {
width: 53px;
flex: 0 0 53px;
margin-right: 20px;
}
.features-avatar-thumb img {
border-radius: 50%;
border: 1px solid #494747;
}
.features-avatar-info .title {
font-size: 18px;
font-weight: 600;
color: #EDEDED;
margin-bottom: 3px;
}
.features-avatar-info > span {
display: block;
color: #BCBABA;
font-size: 13px;
font-weight: 600;
}
.features-avatar-info > span a {
color: #F0F0F0;
}
.features-avatar-info .title a:hover,
.features-avatar-info > span a:hover {
color: var(--purple-color);
}
.features-item-wishlist a {
color: #F0F0F0;
display: flex;
align-items: center;
font-size: 13px;
font-weight: 700;
background: var(--section-background-color);
border-radius: 8px;
line-height: 1;
min-height: 34px;
padding: 0 8px;
}
.features-item-wishlist a::before {
content: "\f1e9";
font-family: "uicons-solid-rounded";
color: #403C5E;
/*margin-right: 5px;*/
font-size: 14px;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.features-item-wishlist a:hover::before {
color: var(--purple-color);
}
.features-img-wrap {
display: flex;
flex-wrap: wrap;
margin: 0 -6.5px -13px;
position: relative;
height: 279.788px;
}
.features-img-wrap li {
padding: 0 6.5px 0;
margin-bottom: 13px;
}
.features-img-wrap li img {
border-radius: 6px;
width: 100%;
}
.features-img-wrap li:nth-child(1) {
width: 50%;
flex: 0 0 50%;
position: absolute; left: 0%; top: 0px;
}
.features-img-wrap li:nth-child(2) {
width: 25%;
flex: 0 0 25%;
position: absolute; left: 49.9564%; top: 0px;
}
.features-img-wrap li:nth-child(3) {
width: 25%;
flex: 0 0 25%;
position: absolute; left: 74.9345%; top: 0px;
}
.features-img-wrap li:nth-child(4) {
width: 50%;
flex: 0 0 50%;
position: absolute; left: 49.9564%; top: 92.0625px;
}
.inner-week-features-area {
padding: 80px 0 50px;
background: linear-gradient(180deg, rgba(29, 25, 51, 0.5) 0%, rgba(29, 25, 51, 0) 100%);
}
.inner-week-features-area .section-button .btn {
min-width: 175px;
}
/* NFTS Sell */
.sell-nfts-area {
padding: 50px 0 0;
}
.sell-nfts-item {
background: var(--primary-color);
border-radius: 11px;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
position: relative;
padding: 25px 25px 35px;
margin: 30px 0 30px;
transform: translateY(0);
transition: .3s linear;
}
.sell-nfts-item:hover {
transform: translateY(-7px);
}
.sell-nfts-item .icon {
position: absolute;
right: 20px;
top: -30px;
z-index: 1;
}
.sell-nfts-item .step-count {
display: block;
text-transform: uppercase;
font-size: 14px;
font-weight: 600;
color: var(--dark-blue-color);
margin-bottom: 20px;
}
.sell-nfts-item .title {
font-size: 20px;
color: #FBFAFA;
margin-bottom: 15px;
}
.sell-nfts-item p {
margin-bottom: 0;
}
.sell-nfts-inner-area {
padding: 80px 0 40px;
}
.sell-nfts-inner-area .sell-nfts-item {
padding: 60px 30px 35px;
margin: 0 0 40px;
}
.sell-nfts-inner-area .sell-nfts-item .icon {
right: 30px;
top: 30px;
}
/* 11. Explore-area */
.explore-products-area {
padding: 50px 0 50px;
}
.filter-btn {
position: relative;
display: inline-flex;
align-items: center;
min-width: 120px;
text-align: center;
justify-content: center;
padding: 16px 18px;
}
.filter-btn i {
display: block;
line-height: 0;
margin-right: 8px;
font-size: 12px;
}
.filter-btn:hover {
color: #fff;
}
.widget-inner {
background: var(--primary-color);
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 15px;
padding: 33px 25px;
}
.sidebar-tags {
display: flex;
flex-wrap: wrap;
margin: 0 -4px -10px;
}
.sidebar-tags li {
padding: 0 4px;
margin-bottom: 10px;
}
.sidebar-tags li a {
display: block;
background: var(--section-background-color);
border: 1px solid #262142;
color: #BAB6B4;
font-size: 14px;
font-weight: 600;
min-width: 112px;
padding: 10px 22px;
text-align: center;
border-radius: 50px;
position: relative;
z-index: 1;
}
.sidebar-tags li a::before {
content: "";
position: absolute;
left: -1px;
right: -1px;
bottom: -1px;
top: -1px;
background: var(--nft-gradient-color);
border-radius: 50px;
transition: .3s ease-in-out;
opacity: 0;
z-index: -1;
}
.sidebar-tags li a:hover {
color: #fff;
}
.sidebar-tags li a::after {
content: "";
position: absolute;
left: 4px;
right: 4px;
bottom: 4px;
top: 4px;
border: 1.5px dashed #fff;
transition: .3s ease-in-out;
border-radius: 50px;
opacity: 0;
}
.sidebar-tags li a:hover::after {
opacity: .5;
}
.sidebar-tags li a:hover::before {
opacity: 1;
}
.category-widget-title {
margin-bottom: 20px;
font-size: 26px;
font-weight: 600;
}
.category-widget {
margin-bottom: 35px;
}
.category-widget:last-child {
margin-bottom: 0;
}
.sidebar-price-filter {
margin-bottom: -13px;
}
.sidebar-price-filter .form-grp {
display: flex;
align-items: center;
position: relative;
margin-bottom: 13px;
}
.sidebar-price-filter .form-grp input {
width: 100%;
display: block;
background: var(--section-background-color);
border: 1px solid #262142;
height: 44px;
padding: 10px 23px;
font-size: 14px;
font-weight: 600;
color: #FBFAFA;
border-radius: 50px;
}
.sidebar-price-filter .form-grp input::placeholder {
font-size: 14px;
font-weight: 600;
color: #FBFAFA;
opacity: .5;
}
.sidebar-price-filter .form-grp .dollar {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 20px;
font-size: 14px;
font-weight: 500;
color: #FBFAFA;
opacity: .5;
}
.sidebar-price-filter .form-grp .to {
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
color: #FBFAFA;
display: block;
margin: 0 8px;
}
.category-widget .form-check-label {
font-weight: 600;
font-size: 14px;
color: #FBFAFA;
}
.category-widget .form-check-input:checked {
background-color: var(--purple-color);
border-color: var(--purple-color);
}
.category-widget .form-check-input {
background: var(--section-background-color);
box-shadow: none !important;
}
.category-widget .form-check-input:focus {
border-color: var(--purple-color);
}
.category-widget .form-check {
margin-bottom: 10px;
}
.category-widget .form-check:last-child {
margin-bottom: 0;
}
/* 12. Author Profile */
.author-profile-area {
padding: 100px 0 70px;
}
.author-profile-wrap {
border: 1px solid #3C375C;
background: var(--primary-color);
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 13px;
overflow: hidden;
padding: 20px 20px;
margin-bottom: 30px;
}
.author-profile-thumb {
margin-bottom: 25px;
}
.author-info .title {
margin-bottom: 3px;
font-size: 18px;
display: flex;
align-items: center;
}
.author-info .title img {
margin-left: 10px;
}
.author-info span {
display: block;
color: #D1C6C6;
font-size: 13px;
font-weight: 500;
margin-bottom: 20px;
}
.author-info p {
margin-bottom: 0;
font-size: 13px;
font-weight: 600;
}
.author-collection {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding-top: 20px;
border-top: 1px solid var(--purple-color);
margin-top: 20px;
margin-bottom: 40px;
}
.author-collection li p {
margin-bottom: 0;
font-size: 15px;
font-weight: 600;
color: #EEEBEB;
}
.author-collection li > span {
display: block;
color: var(--body-text-color);
}
.author-social ul {
background: #161329;
border: 1px solid #262141;
border-radius: 7px;
padding: 20px 20px;
}
.author-social ul li .icon {
width: 36px;
height: 36px;
flex: 0 0 36px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin-right: 10px;
font-size: 15px;
color: #fff;
background: var(--nft-gradient-color);
z-index: 1;
}
.author-social ul li .icon::before {
content: "";
position: absolute;
left: 3px;
top: 3px;
right: 3px;
bottom: 3px;
background: #1D1933;
border-radius: 50%;
z-index: -1;
}
.author-social ul li a {
display: flex;
align-items: center;
color: #C8C5C5;
font-size: 13px;
font-weight: 600;
}
.author-social ul li a:hover {
color: var(--purple-color);
}
.author-social ul li + li {
margin-top: 13px;
}
.author-social .title {
font-size: 18px;
font-weight: 600;
margin-bottom: 15px;
}
.author-product-meta ul {
display: flex;
align-items: center;
flex-wrap: wrap;
background: var(--primary-color);
border-radius: 5px;
padding: 20px 20px 10px;
margin: 0 0 45px;
}
.author-product-meta ul li {
margin: 0 10px 10px 0;
}
.author-product-meta ul li a {
display: block;
background: #2B2648;
border: 1px solid #4A436D;
border-radius: 20px;
color: #CBCACA;
font-size: 13px;
font-weight: 600;
padding: 7px 25px;
text-transform: uppercase;
position: relative;
z-index: 1;
}
.author-product-meta ul li a::before {
content: "";
position: absolute;
left: -1px;
top: -1px;
right: -1px;
bottom: -1px;
background: var(--nft-gradient-color);
transition: .3s linear;
border-radius: 20px;
z-index: -1;
opacity: 0;
}
.author-product-meta ul li a:hover,
.author-product-meta ul li.active a {
color: #fff;
}
.author-product-meta ul li a:hover::before,
.author-product-meta ul li.active a::before {
opacity: 1;
}
/* 13. Activity */
.activity-area {
padding: 100px 0;
}
.activity-sidebar-list li + li {
margin-top: 15px;
}
.activity-sidebar-list li a {
display: flex;
align-items: center;
border: 1px solid #302B50;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 11px;
background: var(--primary-color);
padding: 23px 25px;
}
.activity-sidebar-list .icon {
font-size: 30px;
color: #59606B;
margin-right: 15px;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.activity-sidebar-list .icon i {
display: block;
line-height: 0;
}
.activity-sidebar-list p {
margin-bottom: 0;
color: #E8E8E8;
font-weight: 600;
font-size: 16px;
}
.activity-sidebar-list p span {
display: block;
font-weight: 500;
font-size: 13px;
color: #9C9C9C;
line-height: 1;
}
.activity-sidebar-list li a:hover .icon {
color: var(--purple-color);
}
.welcome-activity,
.login-welcome-wrap {
background: linear-gradient(90deg, #312B51 17.88%, rgba(10, 12, 36, 0.86) 99.37%);
border-radius: 11px;
position: relative;
min-height: 198px;
display: flex;
align-items: center;
padding: 25px 100px 25px 100px;
margin: 0 0 30px;
}
.welcome-activity-img {
position: absolute;
left: 60px;
top: -40px;
z-index: 1;
}
.welcome-activity-content {
width: 65%;
margin-left: auto;
}
.welcome-activity-content .title,
.login-welcome-content .title {
font-size: 30px;
text-transform: capitalize;
font-weight: 600;
margin-bottom: 12px;
}
.welcome-activity-content p,
.login-welcome-content p {
font-size: 16px;
font-weight: 500;
color: #AAA9A9;
margin-bottom: 0;
}
.welcome-activity-content p a,
.login-welcome-content p a {
color: var(--purple-color);
font-weight: 600;
}
.activity-table-wrap {
background: var(--primary-color);
border: 1px solid #302B50;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 11px;
padding: 35px 35px 35px;
}
.activity-table-nav {
display: flex;
align-items: center;
margin-bottom: 35px;
}
.activity-table-nav .title {
margin-bottom: 0;
}
.activity-table-nav .nav-tabs {
border: none;
background: #25223F;
border-radius: 30px;
margin-left: 50px;
padding: 6px;
}
.activity-table-nav .nav-item {
margin: 0;
}
.activity-table-nav .nav-item .nav-link {
border: none;
margin: 0;
font-size: 15px;
font-weight: 600;
color: #fff;
border-radius: 50px;
background: transparent;
position: relative;
z-index: 1;
padding: 9px 25px;
}
.activity-table-nav .nav-item .nav-link::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: var(--nft-gradient-color);
border-radius: 50px;
opacity: 0;
z-index: -1;
}
.activity-table-nav .nav-item .nav-link.active::before {
opacity: 1;
}
.activity-table {
width: 100%;
margin-bottom: 0;
}
.activity-table.table>:not(:first-child),
.activity-table th,
.activity-table td {
border: none;
}
.activity-table thead th {
color: var(--body-text-color);
font-weight: 500;
font-size: 16px;
background: transparent;
padding-bottom: 20px;
box-shadow: none;
}
.activity-table thead th:not(:first-child) {
text-align: center;
}
.activity-table thead th.time {
text-align: right;
}
.activity-table tbody tr {
box-shadow: none;
background: #25223f;
border-bottom: 12px solid var(--primary-color);
}
.activity-table tbody th {
padding: 13px 18px;
}
.activity-table tbody .author img {
border-radius: 50%;
}
.activity-table tbody .author a {
font-size: 15px;
font-weight: 600;
color: #D5D3D3;
margin-left: 15px;
}
.activity-table tbody .author a:hover {
color: var(--purple-color);
}
.activity-table tbody td {
vertical-align: middle;
font-size: 15px;
font-weight: 500;
color: #AAA9A9;
text-align: center;
padding: 10px 12px;
}
.activity-table tbody td.price img {
margin-right: 6px;
}
.activity-area .mCS-custom-bar2.mCSB_outside + .mCSB_scrollTools,
.market-single-area .mCS-custom-bar2.mCSB_outside + .mCSB_scrollTools {
left: 0;
right: 0;
bottom: 0;
border-radius: 4px;
overflow: hidden;
}
.activity-area .mCS-custom-bar2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.market-single-area .mCS-custom-bar2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
background: var(--nft-gradient-color);
height: 3px;
border-radius: 4px;
margin: 0;
}
.activity-area .mCS-custom-bar2.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.market-single-area .mCS-custom-bar2.mCSB_scrollTools_horizontal .mCSB_draggerRail {
height: 3px;
background-color: transparent;
border-radius: 4px;
margin: 0;
}
.activity-area .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.market-single-area .mCSB_scrollTools.mCSB_scrollTools_horizontal {
height: 4px;
}
.welcome-img-two {
left: 35px;
top: -50px;
}
/* 14. Create Item */
.create-item-area {
padding: 87px 0 90px;
}
.create-item-sidebar > .title {
font-weight: 600;
font-size: 18px;
margin-bottom: 15px;
}
.method-wrap {
margin-bottom: 25px;
}
.method-wrap .title {
font-weight: 600;
font-size: 18px;
margin-bottom: 15px;
}
.method-list {
background: var(--primary-color);
border: 1px solid #242424;
border-radius: 5px;
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 20px 20px 10px;
}
.method-list li {
margin: 0 10px 10px 0;
}
.method-list li a {
display: flex;
align-items: center;
background: #2B2648;
border: 1px solid #4A436D;
border-radius: 20px;
font-weight: bold;
font-size: 13px;
text-transform: capitalize;
color: #F5F5F5;
padding: 8px 24px;
position: relative;
z-index: 1;
}
.method-list li a i {
line-height: 1;
display: block;
font-size: 13px;
margin-right: 7px;
}
.method-list li a::before {
content: "";
position: absolute;
left: -1px;
top: -1px;
right: -1px;
bottom: -1px;
background: var(--nft-gradient-color);
border-radius: 20px;
transition: .3s ease-in-out;
opacity: 0;
z-index: -1;
}
.method-list li a.active::before,
.method-list li a:hover::before {
opacity: 1;
}
.create-item-form .form-grp {
margin-bottom: 25px;
}
.create-item-form .form-grp input,
.create-item-form .form-grp textarea {
display: block;
font-size: 13px;
font-weight: 600;
color: #A1A1A1;
width: 100%;
border: 2px solid #292C44;
background: var(--section-background-color);
height: 59px;
border-radius: 5px;
padding: 9px 25px;
}
.create-item-form .form-grp input::placeholder,
.create-item-form .form-grp textarea::placeholder {
color: #A1A1A1;
}
.create-item-form .form-grp textarea {
max-height: 96px;
min-height: 96px;
}
.create-item-form .form-grp input[type="file"] {
border-color: #5B5B5B;
height: 100px;
padding: 28px 25px;
}
.create-item-form .form-grp label {
display: block;
text-transform: capitalize;
color: #F1EDED;
font-weight: 600;
font-size: 18px;
cursor: default;
margin-bottom: 15px;
}
.create-item-form .form-grp [type="file"]::-webkit-file-upload-button {
background: var(--nft-gradient-color);
border: none;
border-radius: 30px;
color: #fff;
cursor: pointer;
font-size: 13px;
font-weight: 600;
outline: none;
padding: 10px 25px;
text-transform: uppercase;
transition: all .3s ease-in-out;
}
.create-item-form .form-grp [type="file"]::-webkit-file-upload-button:hover {
background: var(--gradient-btn-hover);
}
.create-item-form [type="submit"] {
min-width: 155px;
min-height: 50px;
margin-top: 15px;
}
/* 15. News */
.latest-news-area {
background: linear-gradient(180deg, rgba(29, 25, 51, 0.5) 0%, rgba(29, 25, 51, 0) 100%);
padding: 80px 0 0;
}
.latest-news-item {
position: relative;
margin-bottom: 30px;
overflow: hidden;
border-radius: 6px;
z-index: 1;
}
.latest-news-thumb img {
width: 100%;
border-radius: 6px;
filter: drop-shadow(5px 4px 4px rgba(0, 0, 0, 0.25));
transition: all 1.5s ease-out;
transform: scale(1);
}
.latest-news-item:hover .latest-news-thumb img {
transform: scale(1.05);
}
.latest-news-content {
position: absolute;
left: 17px;
right: 17px;
bottom: 17px;
background: #18152B;
box-shadow: 6px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 4px;
border: 3px solid transparent;
background-clip: padding-box;
padding: 30px;
z-index: 9;
}
.latest-news-content::before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #18152B;
border-radius: 4px;
transition: .3s linear;
z-index: -1;
}
.latest-news-content::after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: -3px;
background: -moz-linear-gradient(180deg, #CD4443 0%, #18152B 100%);
background: -webkit-linear-gradient(180deg, #CD4443 0%, #18152B 100%);
background: -o-linear-gradient(180deg, #CD4443 0%, #18152B 100%);
background: -ms-linear-gradient(180deg, #CD4443 0%, #18152B 100%);
background: linear-gradient(180deg, #CD4443 0%, #18152B 100%);
border-radius: 4px;
transition: .3s linear;
z-index: -2;
}
.latest-news-content .latest-news-meta {
display: flex;
align-items: center;
padding-bottom: 15px;
border-bottom: 2px solid #2F294A;
margin-bottom: 18px;
}
.latest-news-content .latest-news-meta li {
font-size: 14px;
font-weight: 600;
color: var(--paragraph-text-color);
display: flex;
align-items: center;
padding-right: 18px;
margin-right: 18px;
position: relative;
}
.latest-news-content .latest-news-meta li:last-child {
margin-right: 0;
padding-right: 0;
}
.latest-news-content .latest-news-meta li i {
color: var(--icon-color);
font-size: 15px;
margin-right: 8px;
display: block;
line-height: 1;
}
.latest-news-content .latest-news-meta li:not(:last-child):after {
content: "";
position: absolute;
right: -1px;
width: 2px;
height: 12px;
top: 50%;
transform: translateY(-50%);
background: #2F294A;
}
.latest-news-content .latest-news-meta li a {
color: var(--paragraph-text-color);
}
.latest-news-content .title {
color: #FBFAFA;
font-size: 18px;
line-height: 1.5;
margin-bottom: 20px;
}
.latest-news-content .title a:hover,
.latest-news-content .latest-news-meta li a:hover {
color: var(--purple-color);
}
.latest-news-content .btn {
min-width: 122px;
font-size: 12px;
padding: 15px 15px;
float: right;
}
/* Design Ways */
.design-ways-area {
padding: 50px 0 0;
}
.design-ways-item {
border-radius: 7px;
background: var(--primary-color);
padding: 40px 30px 40px 35px;
margin-bottom: 30px;
position: relative;
transform: translateY(0);
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
transition: .3s linear;
z-index: 1;
}
.design-ways-item:hover {
transform: translateY(-5px);
}
.design-ways-item .icon {
color: var(--heading-text-color);
margin-bottom: 20px;
width: 51px;
height: 51px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
border-radius: 50%;
flex: 0 0 51px;
background: var(--nft-gradient-color);
}
.design-ways-item .content .title {
font-size: 22px;
margin-bottom: 5px;
transition: .3s ease-in-out;
}
.design-ways-item .content p {
margin-bottom: 0;
font-size: 14px;
line-height: 1.5;
font-weight: 500;
}
.overlay-icon {
position: absolute;
line-height: 0;
font-size: 82px;
color: #000;
top: 24px;
right: 24px;
opacity: .2;
z-index: -1;
}
/* 16. Testimonial */
.testimonial-active .slick-dots {
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.testimonial-active .slick-dots li {
margin: 0 5px;
}
.testimonial-active .slick-dots li button {
display: block;
border: none;
padding: 0;
text-indent: -9999px;
width: 10px;
height: 10px;
background: #2D2849;
border-radius: 50%;
}
.testimonial-active .slick-dots li.slick-active button {
background: var(--purple-color);
}
.testimonial-rating {
margin: 0 0 30px;
}
.testimonial-rating img {
max-width: 235px;
margin: 0 auto;
}
.testimonial--content > p {
font-size: 18px;
font-weight: 500;
font-style: italic;
line-height: 1.65;
color: #D2D1D1;
margin-bottom: 0;
}
.testimonial--avatar--info .title {
margin-bottom: 12px;
font-size: 20px;
letter-spacing: -.3px;
font-weight: 600;
}
.testimonial--avatar--info .see-all {
display: inline-flex;
align-items: center;
font-size: 16px;
font-weight: 600;
letter-spacing: -.5px;
color: var(--purple-color);
}
.testimonial--avatar--info .see-all::after {
content: "\f11e";
font-family: "uicons-solid-rounded";
font-weight: 700;
margin-left: 7px;
font-size: 13px;
}
.testimonial--avatar--info {
margin-top: 30px;
}
.testimonial-shape-wrap {
position: relative;
padding: 50px 0 105px;
}
.testimonial-shape-wrap::before,
.testimonial-shape-wrap::after {
content: "";
position: absolute;
left: 30px;
top: 50%;
transform: translateY(-50%);
background-image: url("../img/others/testimonial_shape01.png");
width: 337px;
height: 337px;
z-index: -1;
}
.testimonial-shape-wrap::after {
left: auto;
right: 30px;
background-image: url("../img/others/testimonial_shape02.png");
}
.testimonial-shape-wrap .testimonial-active {
padding: 0 0;
border-bottom: none;
}
.testimonial-shape-wrap .testimonial-active .slick-dots {
margin-top: 40px;
}
.testimonial--item {
padding: 0 15px;
}
/* 17. Creators */
.creator-active {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
}
.creator-item {
max-width: 16.666%;
background: var(--primary-color);
text-align: center;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 11px;
padding: 24px 25px;
position: relative;
margin: 0 15px 30px;
}
.creator-item .star {
max-width: 16px;
position: absolute;
right: 16px;
top: 18px;
z-index: 1;
}
.creator-thumb {
width: 111px;
height: 111px;
margin: 0 auto 20px;
position: relative;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 50%;
z-index: 1;
}
.creator-thumb::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: var(--nft-gradient-color);
border-radius: 50%;
z-index: -1;
}
.creator-thumb img {
padding: 6px;
}
.creator-content .title {
font-size: 16px;
font-weight: 600;
margin-bottom: 7px;
}
.creator-content > span {
display: block;
color: var(--purple-color);
font-size: 13px;
font-weight: 600;
margin-bottom: 25px;
}
.creator-content .btn {
min-width: 132px;
padding: 15px 25px;
}
.creator-content .title a:hover {
color: var(--purple-color);
}
.creator-active .slick-dots {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
flex: 0 0 100%;
line-height: 1;
margin-top: 10px;
}
.creator-active .slick-dots li {
line-height: 0;
width: 19px;
height: 19px;
flex: 0 0 19px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 3px;
}
.creator-active .slick-dots li button {
text-indent: -99999999px;
display: block;
width: 12px;
flex: 0 0 12px;
height: 12px;
border: none;
background: var(--nft-gradient-color);
border-radius: 50%;
line-height: 1;
padding: 0;
position: relative;
transition: 0s;
}
.creator-active .slick-dots li button::before {
content: "";
position: absolute;
left: 3px;
top: 3px;
right: 3px;
bottom: 3px;
background: #fff;
border-radius: 50%;
z-index: 1;
}
.creator-active .slick-dots li.slick-active button {
width: 18px;
height: 18px;
flex: 0 0 18px;
}
.creator-active .slick-dots li.slick-active button::before {
left: 4px;
top: 4px;
right: 4px;
bottom: 4px;
}
/* 18. Blog */
.standard-blog-item {
margin-right: 23px;
background: var(--header-background-color);
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 9px;
overflow: hidden;
}
.standard-blog-content {
padding: 35px 38px;
}
.standard-blog-content > .title {
font-size: 30px;
font-weight: 600;
margin-bottom: 23px;
}
.standard-blog-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-bottom: 13px;
}
.standard-blog-meta li {
margin: 0 20px 5px 0;
}
.standard-blog-meta li:last-child {
margin-right: 0;
}
.standard-blog-meta li i {
display: block;
color: #fff;
margin-right: 8px;
}
.standard-blog-meta li a {
display: flex;
align-items: center;
font-size: 15px;
font-weight: 500;
color: #C9C9C9;
}
.standard-blog-meta li a:hover,
.standard-blog-content .title a:hover {
color: var(--purple-color);
}
.standard-blog-content p {
margin-bottom: 0;
}
.standard-blog-content .blog-line {
background-image: url(../img/blog/blog_line.png);
display: block;
width: 100%;
height: 7px;
margin: 35px 0 30px;
}
.blog-post-bottom {
display: flex;
align-items: center;
justify-content: space-between;
}
.blog-post-bottom .read-more .btn {
font-size: 14px;
min-width: 154px;
padding: 18px 25px;
}
.blog-post-bottom .share {
margin-left: 30px;
position: relative;
}
.blog-post-bottom .share > a {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
font-size: 16px;
color: #fff;
background: var(--nft-gradient-color);
border-radius: 50%;
position: relative;
z-index: 1;
}
.blog-post-bottom .share > a::before {
content: "";
position: absolute;
left: 4px;
right: 4px;
top: 4px;
bottom: 4px;
background: var(--header-background-color);
border-radius: 50%;
z-index: -1;
}
.blog-post-bottom .share > a::after {
display: none;
}
.blog-post-bottom .dropdown-menu {
margin: auto !important;
inset: 50% 130% auto auto !important;
align-items: center;
transform: translateY(-50%) !important;
background: var(--secondary-color);
padding: 6px 15px;
display: none;
height: 50px;
}
.blog-post-bottom .dropdown-menu.show {
display: flex;
}
.blog-post-bottom .dropdown-menu li:not(:last-child) {
margin-right: 8px;
}
.blog-post-bottom .dropdown-menu li a {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border-radius: 50%;
background: var(--header-form-border-color);
font-size: 12px;
}
.blog-post-bottom .dropdown-menu li a:hover {
background: var(--purple-color);
}
.blog-sidebar .widget {
padding: 30px 27px;
border-radius: 10px;
margin-bottom: 30px;
background: var(--header-background-color);
box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
}
.blog-sidebar .widget:last-child {
margin-bottom: 0;
}
.blog-sidebar .sidebar-title {
font-size: 20px;
color: #fff;
font-weight: 600;
margin-bottom: 25px;
position: relative;
line-height: 1;
text-transform: capitalize;
}
.blog-sidebar .sidebar-title::after {
right: 8px;
top: -2px;
bottom: auto;
}
.sidebar-search form {
position: relative;
}
.sidebar-search form input {
width: 100%;
border: 1px solid #2B2648;
border-radius: 7px;
padding: 13px 70px 13px 25px;
font-size: 14px;
height: 55px;
background: #090E2A;
color: #fff;
}
.sidebar-search form input::placeholder {
font-size: 14px;
color: #fff;
opacity: .5;
}
.sidebar-search form [type=submit] {
position: absolute;
right: 0;
border: none;
padding: 0;
width: 55px;
height: 55px;
background: var(--nft-gradient-color);
color: #fff;
border-radius: 5px;
font-size: 14px;
}
.rc-post-list > ul > li {
margin-bottom: 30px;
}
.rc-post-list > ul > li:last-child {
margin-bottom: 0;
}
.rc-post-thumb {
margin-bottom: 15px;
}
.rc-post-thumb img {
border-radius: 5px;
}
.rc-post-content .title {
font-size: 18px;
font-weight: 600;
width: 100%;
margin-bottom: 0;
line-height: 1.3;
}
.rc-post-content .title a:hover {
color: var(--purple-color);
}
.rc-post-content .standard-blog-meta {
margin-bottom: 0;
}
.rc-post-content .standard-blog-meta li a {
font-size: 14px;
}
.sidebar-cat-list ul li {
padding-bottom: 15px;
border-bottom: 1px dashed #3D375E;
margin-bottom: 15px;
}
.sidebar-cat-list ul li:last-child {
margin-bottom: 0;
}
.sidebar-cat-list ul li a {
display: flex;
align-items: center;
font-size: 15px;
color: var(--body-text-color);
font-weight: 500;
}
.sidebar-cat-list ul li a i {
margin-left: auto;
font-size: 12px;
color: #898799;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.sidebar-cat-list ul li a:hover,
.sidebar-cat-list ul li a:hover i {
color: var(--purple-color);
}
.blog-details-content p {
margin-bottom: 15px;
}
.blog-details-content blockquote {
margin: 31px 0 28px;
font-size: 18px;
font-weight: 600;
color: var(--body-text-color);
font-style: italic;
line-height: 1.6;
padding: 40px 40px 40px 70px;
position: relative;
background: var(--section-background-color);
border: none;
border-radius: 7px;
}
.blog-details-content blockquote::before {
content: "";
position: absolute;
left: 37px;
top: 40px;
bottom: 40px;
width: 5px;
background: var(--nft-gradient-color);
border-radius: 2px;
}
.blog-details-content blockquote footer {
font-size: 16px;
font-style: normal;
font-weight: 600;
position: relative;
padding-left: 30px;
margin-top: 15px;
text-transform: uppercase;
}
.blog-details-content blockquote footer::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 17px;
height: 2px;
background: #C4C4C4;
}
.blog-details-content .small-title {
font-size: 24px;
margin-bottom: 20px;
margin-top: 35px;
}
.blog-details-img {
margin: 35px 0 32px;
}
.blog-details-img img {
max-width: 100%;
border-radius: 6px;
}
.blog-details-bottom {
display: flex;
align-items: center;
}
.blog-details-tags {
width: 70%;
flex: 0 0 70%;
}
.blog-details-tags ul {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.blog-details-tags ul li.title {
text-transform: uppercase;
font-size: 12px;
font-weight: 700;
color: #fff;
margin-right: 12px;
padding-right: 0;
}
.blog-details-tags ul li.title::before {
display: none;
}
.blog-details-tags ul li {
margin-right: 13px;
position: relative;
margin-top: 5px;
margin-bottom: 5px;
}
.blog-details-tags ul li a {
display: block;
font-size: 14px;
color: var(--paragraph-text-color);
font-weight: 500;
}
.blog-details-tags ul li a:hover {
color: var(--purple-color);
}
.blog-details-social {
flex-grow: 1;
}
.blog-details-social ul {
display: flex;
align-items: center;
justify-content: flex-end;
}
.contact-social ul li {
margin-right: 15px;
}
.blog-details-social ul li {
margin-right: 10px;
}
.blog-details-social ul li:last-child {
margin-right: 0;
}
.blog-details-social ul li a {
display: block;
}
.blog-details-social ul li a i {
width: 41px;
height: 41px;
display: block;
text-align: center;
line-height: 41px;
border-radius: 50%;
background: #385594;
color: #fff;
font-size: 14px;
}
.blog-details-social ul li a i {
width: 31px;
height: 31px;
line-height: 31px;
font-size: 12px;
}
.blog-details-social ul li:nth-child(2) a i {
background: #4eabee;
}
.blog-details-social ul li:nth-child(3) a i {
background: #1976d2;
}
.blog-details-content .blog-line {
margin: 45px 0 20px;
}
.avatar-post {
margin-right: 23px;
background: var(--header-background-color);
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 9px;
padding: 40px 60px 40px 40px;
display: flex;
align-items: center;
}
.post-avatar-img {
margin-right: 30px;
width: 133px;
flex: 0 0 133px;
height: 133px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.post-avatar-img::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: var(--nft-gradient-color);
border-radius: 50%;
z-index: -1;
}
.post-avatar-img img {
max-width: 100%;
border-radius: 50%;
padding: 7px;
}
.post-avatar-content h5 {
font-size: 20px;
margin-bottom: 10px;
font-weight: 600;
}
.post-avatar-social {
display: flex;
align-items: center;
}
.post-avatar-social li:not(:last-child) {
margin-right: 7px;
}
.post-avatar-social li a {
display: block;
position: relative;
width: 32px;
height: 32px;
font-size: 12px;
color: var(--paragraph-text-color);
background: #28243F;
border-radius: 2px;
text-align: center;
line-height: 32px;
overflow: hidden;
z-index: 1;
}
.post-avatar-social li a:hover {
color: #fff;
}
.post-avatar-social li a::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: var(--nft-gradient-color);
transition: .3s ease-in-out;
opacity: 0;
z-index: -1;
}
.post-avatar-social li a:hover::before {
opacity: 1;
}
.post-avatar-content p {
font-size: 15px;
margin-bottom: 15px;
line-height: 26px;
font-weight: 500;
}
.blog-next-prev ul {
display: flex;
align-items: center;
justify-content: space-between;
}
.blog-next-prev ul li a {
display: block;
font-size: 15px;
color: #fff;
text-transform: uppercase;
font-weight: 700;
}
.blog-prev img {
margin-right: 15px;
}
.blog-next img {
margin-left: 15px;
}
.blog-next-prev ul li a:hover {
color: var(--purple-color);
}
.comment-reply-box {
background: var(--header-background-color);
box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
padding: 60px 45px 65px;
margin-top: 50px;
border-radius: 8px;
}
.comment-reply-box .title {
text-transform: capitalize;
font-size: 20px;
font-weight: 600;
color: #ffffff;
margin-bottom: 40px;
padding-bottom: 12px;
position: relative;
}
.comment-reply-box .title::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 60px;
height: 2px;
background: var(--nft-gradient-color);
}
.comment-reply-form .row {
margin-left: -10px;
margin-right: -10px;
}
.comment-reply-form .row [class*="col-"] {
padding-left: 10px;
padding-right: 10px;
}
.comment-reply-form .form-grp {
margin-bottom: 20px;
}
.comment-reply-form input,
.comment-reply-form textarea {
display: block;
border: 1px solid #242424;
background: var(--section-background-color);
width: 100%;
padding: 18px 25px;
font-size: 15px;
color: #C9C9C9;
border-radius: 7px;
font-weight: 400;
}
.comment-reply-form input::placeholder,
.comment-reply-form textarea::placeholder {
font-size: 15px;
color: #C9C9C9;
font-weight: 400;
opacity: .77;
}
.comment-reply-form textarea {
min-height: 148px;
max-height: 148px;
}
.comment-reply-form .btn {
box-shadow: none;
padding: 18px 31px;
}
.comment-reply-form .checkbox-grp {
display: flex;
align-items: flex-start;
}
.comment-reply-form .checkbox-grp input {
width: auto;
margin-top: 5px;
margin-right: 9px;
}
.comment-reply-form .checkbox-grp label {
font-size: 16px;
font-weight: 500;
color: #676666;
opacity: .8;
margin-bottom: 0;
user-select: none;
}
/* 19. Login & Register */
.login-welcome-area {
padding: 90px 0 90px;
}
.login-welcome-wrap {
padding: 25px 70px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
margin: 0 0 40px;
}
.login-welcome-content {
width: 42%;
flex: 0 0 42%;
}
.welcome-rating {
margin-left: auto;
}
.signup-form-wrap,
.another-way-signup {
background: var(--primary-color);
border: 1px solid #302B50;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 11px;
padding: 35px 33px 40px;
}
.signup-form-wrap .title,
.another-way-signup .title {
font-size: 20px;
margin-bottom: 30px;
}
.signup-form-wrap .form-grp {
margin-bottom: 26px;
}
.signup-form-wrap .form-grp label {
display: block;
font-weight: 600;
font-size: 14px;
color: #AAA9A9;
margin-bottom: 10px;
}
.signup-form-wrap .form-grp input {
display: block;
width: 100%;
background: #0D0B26;
border: 1px solid #302B50;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 5px;
height: 60px;
padding: 16px 25px;
color: #fff;
font-size: 15px;
}
.signup-form-wrap .form-check {
margin-bottom: 0;
display: flex;
align-items: center;
}
.signup-form-wrap .form-check .form-check-input {
background-color: #0D0B26;
border: 1px solid #302B50;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 5px;
width: 20px;
height: 20px;
margin-right: 12px;
margin-top: 0;
}
.signup-form-wrap .form-check .form-check-label {
font-weight: 600;
font-size: 14px;
color: #AAA9A9;
}
.signup-form-wrap .form-btn-wrap {
display: flex;
flex-wrap: wrap;
margin-top: 20px;
}
.signup-form-wrap .form-btn-wrap button {
margin: 10px 11px 0 0;
}
.signup-form-wrap .form-btn-wrap button.signup {
min-width: 154px;
padding: 12px 35px;
min-height: 50px;
}
.signup-form-wrap .form-btn-wrap button.login {
padding: 12px 35px;
min-height: 50px;
min-width: 126px;
background: #0F0D28;
}
.signup-form-wrap .form-btn-wrap button.login::before {
opacity: .5;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.signup-form-wrap .form-btn-wrap button.login:hover::before {
opacity: 1;
}
.another-way-signup .title {
margin-bottom: 10px;
}
.another-way-signup p {
margin-bottom: 0;
font-weight: 500;
font-size: 14px;
color: #AAA9A9;
width: 70%;
}
.another-way-list li a {
display: flex;
align-items: center;
background: #0D0B26;
border: 1px solid #302B50;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 5px;
font-weight: 600;
font-size: 16px;
color: #fff;
padding: 17px 20px;
}
.another-way-list li + li {
margin-top: 16px;
}
.another-way-list li a img {
margin-right: 16px;
}
.another-way-list li a span {
font-weight: 500;
font-size: 12px;
color: #AAA9A9;
margin-left: auto;
}
.another-way-list {
margin-top: 30px;
}
/* 20. Footer */
.footer-top-wrap {
background: linear-gradient(179.69deg, rgba(29, 25, 51, 0.46) 14.17%, rgba(29, 25, 51, 0.27) 99.73%);
padding: 80px 0 40px;
}
.footer-widget {
margin-bottom: 40px;
}
.footer-widget p {
margin-bottom: 0;
font-size: 14px;
line-height: 1.8;
font-weight: 500;
}
.footer-social {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-top: 23px;
}
.footer-social li:not(:last-child) {
margin-right: 8px;
}
.footer-social li a {
display: flex;
width: 40px;
height: 40px;
background: #28243F;
border-radius: 2px;
align-items: center;
justify-content: center;
color: #E5E5E5;
font-size: 14px;
}
.footer-social li a:hover {
background: var(--purple-color);
color: #fff;
}
.fw-title {
font-size: 20px;
color: #E6E6E6;
font-weight: 600;
margin-bottom: 28px;
}
.fw-links li + li {
margin-top: 8px;
}
.fw-links li a {
color: #C8C5C5;
font-size: 14px;
font-weight: 500;
}
.fw-links li a:hover {
color: var(--purple-color);
padding-left: 5px;
}
.newsletter-form {
position: relative;
}
.newsletter-form input {
width: 100%;
border: none;
background: var(--primary-color);
color: #fff;
font-size: 14px;
border-radius: 4px;
padding: 14px 70px 14px 20px;
height: 50px;
font-weight: 500;
}
.newsletter-form input::placeholder {
color: #A5A2A2;
font-size: 14px;
font-weight: 500;
opacity: .7;
}
.newsletter-form button {
position: absolute;
top: 0;
right: 0;
height: 50px;
border: none;
width: 55px;
display: flex;
align-items: center;
justify-content: center;
/*font-size: 25px;*/
color: #fff;
border-radius: 0px 4px 4px 0px;
background: var(--nft-gradient-color);
}
.copyright-wrap {
background: #090A27;
}
.copyright-link-list {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
}
.copyright-text p {
font-size: 13px;
font-weight: 500;
color: #B8B6B6;
margin-bottom: 0;
}
.copyright-text p a {
color: #fff;
}
.copyright-link-list li {
position: relative;
padding-right: 14px;
margin-right: 14px;
}
.copyright-link-list li::after {
content: "|";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
color: #282A6B;
font-size: 13px;
font-weight: 500;
}
.copyright-link-list li a {
font-size: 13px;
font-weight: 500;
color: #E5E5E5;
}
.copyright-link-list li:last-child {
padding-right: 0;
margin-right: 0;
}
.copyright-link-list li:last-child::after {
display: none;
}
.copyright-link-list li a:hover {
color: var(--purple-color);
}
.copyright-wrap {
background: #090A27;
padding: 25px 0;
}
/* 21. Preloader */
#preloader{
background-color: var(--section-background-color);
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
margin-top: 0px;
top: 0px;
z-index: 99999;
}
#loading-center {
width: 100%;
height: 100%;
position: relative;
}
#loading-center-absolute {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 150px;
width: 150px;
display: flex;
align-items: center;
justify-content: center;
}
.object {
width: 20px;
height: 20px;
background-color: var(--purple-color);
margin: 0 10px 0;
-moz-border-radius: 50% 50% 50% 50%;
-webkit-border-radius: 50% 50% 50% 50%;
border-radius: 50% 50% 50% 50%;
}
#object_one {
-webkit-animation: object_one 1.5s infinite;
animation: object_one 1.5s infinite;
}
#object_two {
-webkit-animation: object_two 1.5s infinite;
animation: object_two 1.5s infinite;
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;
}
#object_three {
-webkit-animation: object_three 1.5s infinite;
animation: object_three 1.5s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
@-webkit-keyframes object_one {
75% { -webkit-transform: scale(0); }
}
@keyframes object_one {
75% {
transform: scale(0);
-webkit-transform: scale(0);
}
}
@-webkit-keyframes object_two {
75% { -webkit-transform: scale(0); }
}
@keyframes object_two {
75% {
transform: scale(0);
-webkit-transform: scale(0);
}
}
@-webkit-keyframes object_three {
75% { -webkit-transform: scale(0); }
}
@keyframes object_three {
75% {
transform: scale(0);
-webkit-transform: scale(0);
}
}
/* ============================================================
Custom Overrides
Source: custom.css
============================================================ */
.btn::before {
border-width: 0px;
}
.banner-content .title span.second-color {
color: #1976d2;
}
.sidebar-logo img, .nav-logo img {
width: 40px;
}
.top-collection-active .collection-item-top > ul .thumb {
display: block;
width: 50px;
flex: 0 0 50px;
margin-right: 11px;
}
.footer-logo img {
width: auto;
height: 50px;
}
.gradient-text-blue {
background: -webkit-linear-gradient(#1babf3, #0046b0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ─── FIX 1: AI Tools Pilihan — judul tool warna putih ─── */
.top-collection-active .collection-item-top .name,
.top-collection-active .collection-item-top h5.title a {
color: #ffffff !important;
}
/* ─── FIX 2: AI Tools Pilihan — semua card tinggi sama ─── */
.top-collection-active .slick-track {
display: flex !important;
align-items: stretch;
}
.top-collection-active .slick-slide {
height: auto !important;
display: flex !important;
flex-direction: column;
}
.top-collection-active .slick-slide > div {
flex: 1;
display: flex;
flex-direction: column;
}
.top-collection-active .col-xl-3 {
display: flex !important;
flex-direction: column;
}
.top-collection-item {
display: flex !important;
flex-direction: column;
height: 100%;
}
.top-collection-item .collection-item-content {
flex: 1;
}
.top-collection-item .collection-item-content a {
color: #ffffff !important;
transition: color 0.3s ease;
opacity: .8;
}
.top-collection-item .collection-item-bottom {
margin-top: auto;
}
/* ─── FIX 3: Berita AI Terbaru — tinggi teks seragam + semitransparent ─── */
.latest-news-content h4.title {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 4.2em;
}
.latest-news-content h4.title a {
color: rgba(255, 255, 255, 0.78) !important;
transition: color 0.3s ease;
}
.latest-news-content h4.title a:hover {
color: rgba(255, 255, 255, 1) !important;
}
.latest-news-content .latest-news-meta li {
color: rgba(255, 255, 255, 0.55);
}
/* ============================================================
AI Tools ID — Components & Page Styles
Source: ai-tools.css
============================================================ */
/* ================================================
AI Tools ID — Custom Stylesheet (Dark Mode Base)
ai-tools.css
================================================ */
/* Google Fonts loaded async via in app.blade.php */
/* ================================================
CSS Custom Properties
================================================ */
:root {
--bg-dark: #0B0A1A;
--bg-dark-2: #12102A;
--surface-1: #171530;
--surface-2: #1C1A38;
--accent-purple: #A855F7;
--accent-purple-dk: #7C3AED;
--accent-blue: #3B82F6;
--accent-cyan: #22D3EE;
--text-primary: #FFFFFF;
--text-secondary: #9CA3AF;
--text-muted: #8B8AA7;
--border: rgba(255,255,255,0.08);
--shadow-card: 0 4px 24px rgba(0,0,0,0.35);
--glow-purple: 0 0 24px rgba(168,85,247,0.25);
--font-display: 'Sora', sans-serif;
--font-body: 'Plus Jakarta Sans', sans-serif;
--radius-card: 16px;
--radius-btn: 50px;
--transition: 0.3s ease;
}
/* ================================================
Typography Override
================================================ */
body {
font-family: var(--font-body) !important;
}
h1, h2, h3, h4, h5, h6,
.section-title .title,
.banner-content .title,
.top-seller-content h5,
.collection-item-top .name,
.latest-news-content h4,
.footer-widget h4,
.auth-title,
.page-header-content h1 {
font-family: var(--font-display) !important;
}
/* ================================================
Theme Toggle Button
================================================ */
.theme-toggle-btn {
background: rgba(168,85,247,0.1);
border: 1.5px solid rgba(168,85,247,0.35);
color: #A855F7;
width: 38px;
height: 38px;
border-radius: 50%;
cursor: pointer;
font-size: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: var(--transition);
margin-left: 8px;
vertical-align: middle;
}
.theme-toggle-btn:hover {
background: rgba(168,85,247,0.25);
box-shadow: var(--glow-purple);
}
.header-action ul {
display: flex !important;
align-items: center !important;
gap: 8px;
}
/* ================================================
Page Header / Breadcrumb
================================================ */
.page-header-area {
/*background: linear-gradient(135deg, #12102A 0%, #1A1535 100%);*/
margin-top: 160px;
padding: 10px 0 10px;
position: relative;
overflow: hidden;
}
.page-header-area::before {
content: '';
position: absolute;
top: -30%;
right: -5%;
width: 420px;
height: 420px;
background: radial-gradient(circle, rgba(168,85,247,0.14) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.page-header-area::after {
content: '';
position: absolute;
bottom: -20%;
left: -5%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(59,130,246,0.1) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.page-header-content { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.page-header-content h1 {
font-size: clamp(1.8rem, 4vw, 2.6rem);
font-weight: 600;
color: #fff;
margin-bottom: 14px;
}
.page-header-content p {
color: var(--text-secondary);
font-size: 1rem;
max-width: 560px;
margin-bottom: 18px;
}
.breadcrumb-nav {
display: flex;
align-items: center;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
.breadcrumb-nav li { color: var(--text-secondary); font-size: 13px; }
.breadcrumb-nav li a { color: var(--accent-purple); text-decoration: none; transition: var(--transition); }
.breadcrumb-nav li a:hover { color: var(--accent-cyan); }
.breadcrumb-nav .sep { color: #444; }
/* ================================================
Search Bar
================================================ */
.search-bar-wrap {
position: relative;
/* max-width: 600px; */
width: 100%;
}
.search-bar-wrap input {
width: 100%;
background: rgba(255,255,255,0.06);
border: 1.5px solid rgba(168,85,247,0.22);
border-radius: 50px;
padding: 13px 58px 13px 22px;
color: #fff;
font-family: var(--font-body);
font-size: 15px;
transition: var(--transition);
}
.search-bar-wrap input::placeholder { color: var(--text-muted); }
.search-bar-wrap input:focus {
outline: none;
border-color: var(--accent-purple);
box-shadow: 0 0 0 3px rgba(168,85,247,0.15);
background: rgba(168,85,247,0.06);
}
.search-bar-wrap .search-btn {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
background: linear-gradient(135deg, #A855F7, #7C3AED);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: var(--transition);
}
.search-bar-wrap .search-btn:hover {
box-shadow: 0 4px 14px rgba(168,85,247,0.45);
}
/* ================================================
Filter Tabs
================================================ */
.filter-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 24px 0;
}
.filter-tab-btn {
background: rgba(255,255,255,0.04);
border: 1.5px solid rgba(255,255,255,0.1);
color: var(--text-secondary);
padding: 7px 18px;
border-radius: 50px;
cursor: pointer;
font-size: 14px;
font-family: var(--font-body);
transition: var(--transition);
}
.filter-tab-btn:hover {
border-color: rgba(168,85,247,0.4);
color: #fff;
}
.filter-tab-btn.active {
background: linear-gradient(135deg, #A855F7, #7C3AED);
border-color: transparent;
color: #fff;
box-shadow: 0 3px 12px rgba(168,85,247,0.35);
}
/* ================================================
Tool Cards (Grid view)
================================================ */
.tool-card {
background: var(--surface-1);
border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--radius-card);
padding: 20px;
transition: var(--transition);
height: 100%;
display: flex;
flex-direction: column;
}
.tool-card:hover {
transform: translateY(-5px);
border-color: rgba(168,85,247,0.3);
box-shadow: 0 10px 36px rgba(168,85,247,0.14);
}
.tool-card-header {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 14px;
}
.tool-card-logo {
width: 52px;
height: 52px;
border-radius: 12px;
object-fit: cover;
flex-shrink: 0;
background: var(--surface-2);
border: 1px solid rgba(255,255,255,0.08);
}
.tool-card-info { flex: 1; min-width: 0; }
.tool-card-title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 700;
color: #fff;
margin: 0 0 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tool-card-title a { color: inherit; text-decoration: none; }
.tool-card-title a:hover { color: var(--accent-purple); }
.tool-card-badges { display: flex; gap: 5px; flex-wrap: wrap; }
.badge {
font-size: 11px;
font-weight: 600;
padding: 2px 9px;
border-radius: 50px;
display: inline-block;
line-height: 1.5;
}
.badge-category {
background: rgba(168,85,247,0.14);
color: #C084FC;
border: 1px solid rgba(168,85,247,0.2);
}
.badge-featured {
background: linear-gradient(135deg, #F59E0B, #EF4444);
color: #fff;
}
.badge-free {
background: rgba(34,197,94,0.15);
color: #22C55E;
border: 1px solid rgba(34,197,94,0.2);
}
.badge-new {
background: rgba(59,130,246,0.15);
color: #60A5FA;
border: 1px solid rgba(59,130,246,0.2);
}
.tool-card-desc {
color: var(--text-secondary);
font-size: 13.5px;
line-height: 1.6;
flex: 1;
margin-bottom: 16px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tool-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.btn-tool-cta {
background: linear-gradient(135deg, #A855F7, #7C3AED);
color: #fff !important;
border: none;
padding: 7px 20px;
border-radius: 50px;
font-size: 13px;
font-weight: 700;
font-family: var(--font-body);
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: var(--transition);
letter-spacing: 0.3px;
}
.btn-tool-cta:hover {
box-shadow: 0 5px 16px rgba(168,85,247,0.45);
transform: translateY(-1px);
}
.btn-tool-cta.big {
padding: 12px 28px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px ;
text-align: center;
border-radius: 10px;
}
.btn-tool-cta.promo { background: linear-gradient(135deg, #F59E0B, #EF4444); }
.btn-tool-cta.promo:hover { box-shadow: 0 5px 16px rgba(239,68,68,0.35); }
.fav-btn {
background: none;
border: 1.5px solid rgba(255,255,255,0.1);
color: var(--text-muted);
width: 34px;
height: 34px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
font-size: 14px;
}
.fav-btn:hover { color: #F87171; border-color: rgba(248,113,113,0.4); }
.fav-btn.active {
color: #EF4444;
border-color: rgba(239,68,68,0.4);
background: rgba(239,68,68,0.1);
}
.fav-btn i { font-size: 14px; line-height: 1; pointer-events: none; }
.star-rating {
display: flex;
align-items: center;
gap: 3px;
font-size: 12px;
color: #F59E0B;
}
.star-rating span { color: var(--text-muted); margin-left: 3px; }
/* ================================================
Tool Detail Page
================================================ */
.tool-detail-wrap { padding: 50px 0 70px; }
.tool-detail-header {
display: flex;
align-items: flex-start;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 36px;
}
.tool-detail-logo {
width: 86px;
height: 86px;
border-radius: 20px;
object-fit: cover;
border: 2px solid rgba(168,85,247,0.3);
box-shadow: 0 0 24px rgba(168,85,247,0.2);
flex-shrink: 0;
}
.tool-detail-meta h1 {
font-size: clamp(1.6rem, 3.5vw, 2.2rem);
font-weight: 800;
color: #fff;
margin-bottom: 10px;
}
.tool-detail-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tool-tag {
background: rgba(168,85,247,0.1);
border: 1px solid rgba(168,85,247,0.2);
color: #C084FC;
padding: 4px 13px;
border-radius: 50px;
font-size: 12px;
}
.tool-detail-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.btn-access {
background: linear-gradient(135deg, #A855F7, #7C3AED);
color: #fff !important;
border: none;
padding: 12px 32px;
border-radius: 50px;
font-size: 15px;
font-weight: 700;
font-family: var(--font-display);
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: var(--transition);
letter-spacing: 0.5px;
}
.btn-access:hover {
box-shadow: 0 6px 20px rgba(168,85,247,0.5);
transform: translateY(-2px);
}
.btn-access.promo { background: linear-gradient(135deg, #F59E0B, #EF4444); }
.tool-content-card {
background: var(--surface-1);
border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--radius-card);
padding: 28px 30px;
margin-bottom: 20px;
}
.tool-content-card h3 {
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 700;
color: #fff;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.tool-content-card p, .tool-content-card li {
color: var(--text-secondary);
line-height: 1.75;
font-size: 15px;
}
.tool-content-card ul { padding-left: 20px; }
.tool-content-card ul li { margin-bottom: 8px; }
.pros-cons-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.pros-block, .cons-block {
background: rgba(255,255,255,0.03);
border-radius: 10px;
padding: 16px;
}
.pros-block { border-left: 3px solid #22C55E; }
.cons-block { border-left: 3px solid #EF4444; }
.pros-block h4 { color: #22C55E; font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.cons-block h4 { color: #EF4444; font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.pros-list, .cons-list { list-style: none; padding: 0; margin: 0; }
.pros-list li { color: var(--text-secondary); font-size: 14px; padding: 5px 0 5px 20px; position: relative; }
.pros-list li::before { content: '✓'; color: #22C55E; position: absolute; left: 0; font-weight: 700; }
.cons-list li { color: var(--text-secondary); font-size: 14px; padding: 5px 0 5px 20px; position: relative; }
.cons-list li::before { content: '✗'; color: #EF4444; position: absolute; left: 0; font-weight: 700; }
.tool-screenshots {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin-top: 16px;
}
.tool-screenshots img {
width: 100%;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.08);
transition: var(--transition);
cursor: pointer;
}
.tool-screenshots img:hover {
border-color: rgba(168,85,247,0.4);
transform: scale(1.02);
}
/* ================================================
Koleksi Page
================================================ */
.koleksi-card {
background: var(--surface-1);
border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--radius-card);
overflow: hidden;
transition: var(--transition);
height: 100%;
}
.koleksi-card:hover {
transform: translateY(-5px);
border-color: rgba(168,85,247,0.3);
box-shadow: 0 10px 36px rgba(168,85,247,0.14);
}
.koleksi-card-img { width: 100%; height: 200px; object-fit: cover; display: block; transition: transform 0.3s ease; }
.koleksi-card a:has(.koleksi-card-img):hover .koleksi-card-img { transform: scale(1.04); }
.koleksi-card-body { padding: 22px; }
.koleksi-card-title {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 700;
color: #fff;
margin-bottom: 12px;
line-height: 1.5;
}
.koleksi-card-title a { color: inherit; text-decoration: none; }
.koleksi-card-title a:hover { color: var(--accent-purple); }
.koleksi-logo-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 16px;
align-items: center;
}
.koleksi-logo-row img {
width: 34px;
height: 34px;
border-radius: 8px;
object-fit: cover;
border: 1px solid rgba(255,255,255,0.1);
}
.koleksi-count { color: var(--text-muted); font-size: 13px; margin-bottom: 16px; }
/* ================================================
Article / Blog Cards
================================================ */
.article-card {
background: var(--surface-1);
border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--radius-card);
overflow: hidden;
transition: var(--transition);
height: 100%;
display: flex;
flex-direction: column;
}
.article-card:hover {
transform: translateY(-5px);
border-color: rgba(168,85,247,0.3);
box-shadow: 0 10px 36px rgba(168,85,247,0.12);
}
.article-card-img { width: 100%; height: 200px; object-fit: cover; }
.article-card-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.article-card-meta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.article-date {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: var(--text-muted);
}
.article-cat {
font-size: 11px;
background: rgba(168,85,247,0.12);
color: #C084FC;
border: 1px solid rgba(168,85,247,0.2);
padding: 2px 10px;
border-radius: 50px;
}
.article-card-title {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 700;
color: #fff;
line-height: 1.5;
margin-bottom: 10px;
}
.article-card-title a { color: inherit; text-decoration: none; transition: var(--transition); }
.article-card-title a:hover { color: var(--accent-purple); }
.article-card-excerpt {
color: var(--text-secondary);
font-size: 13.5px;
line-height: 1.65;
margin-bottom: 18px;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ================================================
Kamus AI Dictionary Items
================================================ */
.kamus-item {
background: var(--surface-1);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 12px;
padding: 20px 24px;
margin-bottom: 10px;
transition: var(--transition);
cursor: default;
}
.kamus-item:hover { border-color: rgba(168,85,247,0.3); }
.kamus-term {
font-family: var(--font-display);
font-size: 0.95rem;
font-weight: 700;
color: var(--accent-purple);
margin-bottom: 6px;
}
.kamus-def {
color: var(--text-secondary);
font-size: 14px;
line-height: 1.65;
margin: 0;
}
/* ================================================
Auth Pages (Login / Daftar)
================================================ */
.auth-section {
min-height: calc(100vh - 80px);
display: flex;
align-items: center;
padding: 60px 0;
position: relative;
overflow: hidden;
}
.auth-section::before {
content: '';
position: absolute;
top: 10%; right: 5%;
width: 450px; height: 450px;
background: radial-gradient(circle, rgba(168,85,247,0.08) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.auth-section::after {
content: '';
position: absolute;
bottom: 5%; left: 5%;
width: 300px; height: 300px;
background: radial-gradient(circle, rgba(59,130,246,0.07) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.auth-card {
background: var(--surface-1);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 24px;
padding: 44px 40px;
max-width: 480px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.auth-logo {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 28px;
text-decoration: none;
}
.auth-logo img { height: 30px; }
.auth-title { font-size: 1.7rem; font-weight: 800; color: #fff; text-align: center; margin-bottom: 6px; }
.auth-subtitle { color: var(--text-secondary); text-align: center; font-size: 14px; margin-bottom: 32px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; color: var(--text-secondary); font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.form-control-ai {
width: 100%;
background: rgba(255,255,255,0.05);
border: 1.5px solid rgba(255,255,255,0.1);
border-radius: 12px;
padding: 13px 16px;
color: #fff;
font-family: var(--font-body);
font-size: 15px;
transition: var(--transition);
display: block;
}
.form-control-ai::placeholder { color: #555470; }
.form-control-ai:focus {
outline: none;
border-color: var(--accent-purple);
background: rgba(168,85,247,0.06);
box-shadow: 0 0 0 3px rgba(168,85,247,0.12);
}
.btn-submit-auth {
width: 100%;
background: linear-gradient(135deg, #A855F7, #7C3AED);
border: none;
border-radius: 12px;
padding: 14px;
color: #fff;
font-family: var(--font-display);
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: var(--transition);
letter-spacing: 0.5px;
margin-top: 8px;
}
.btn-submit-auth:hover {
opacity: 0.9;
box-shadow: 0 8px 24px rgba(168,85,247,0.4);
transform: translateY(-1px);
}
.auth-divider {
text-align: center;
position: relative;
color: #444360;
font-size: 13px;
margin: 22px 0;
}
.auth-divider::before, .auth-divider::after {
content: '';
position: absolute;
top: 50%;
width: 42%;
height: 1px;
background: rgba(255,255,255,0.07);
}
.auth-divider::before { left: 0; }
.auth-divider::after { right: 0; }
.auth-bottom { text-align: center; color: var(--text-secondary); font-size: 14px; margin-top: 20px; }
.auth-link { color: var(--accent-purple); text-decoration: none; font-weight: 600; }
.auth-link:hover { text-decoration: underline; }
/* ================================================
Dashboard
================================================ */
.page-header-area.dashboard-page {
background: none;
padding: 170px 0 30px 20px;
}
.page-header-area::before, .page-header-area::after { display: none; }
.dashboard-section { padding: 10px 0 70px; min-height: calc(100vh - 160px); }
.dashboard-user-card {
background: linear-gradient(135deg, #1C1A38, #271F4A);
border: 1px solid rgba(168,85,247,0.2);
border-radius: 20px;
padding: 28px;
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 32px;
flex-wrap: wrap;
}
.dashboard-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, #A855F7, #3B82F6);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 24px;
font-weight: 800;
color: #fff;
flex-shrink: 0;
}
.dashboard-user-info h3 { font-family: var(--font-display); color: #fff; font-size: 1.2rem; margin-bottom: 4px; }
.dashboard-user-info p { color: var(--text-secondary); font-size: 14px; margin: 0; }
.dashboard-stats { margin-left: auto; display: flex; gap: 24px; flex-wrap: wrap; }
.stat-item { text-align: center; }
.stat-num {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 800;
background: linear-gradient(135deg, #A855F7, #3B82F6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.stat-label { color: var(--text-secondary); font-size: 12px; }
.dash-tabs {
display: flex;
gap: 4px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 12px;
padding: 5px;
margin-bottom: 0;
width: fit-content;
flex-wrap: wrap;
}
.dash-tab {
padding: 9px 22px;
border-radius: 8px;
border: none;
background: none;
color: var(--text-secondary);
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.dash-tab.active { background: linear-gradient(135deg, #A855F7, #7C3AED); color: #fff; }
.dash-tab:hover:not(.active) { color: #fff; }
.dash-tab-avatar { padding: 7px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.dash-panel { display: none; }
.dash-panel.active { display: block; }
.dash-tool-card { height: 100%; display: flex; flex-direction: column; }
.dash-tool-card .tool-card-header { flex: 1; align-items: flex-start; margin: 0px;}
.tool-card-desc {
font-size: 12px;
color: var(--text-secondary);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
}
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state i { font-size: 48px; color: #3D3A5C; display: block; margin-bottom: 16px; }
.empty-state h4 { font-family: var(--font-display); color: #6B7280; margin-bottom: 8px; font-size: 1.1rem; }
.empty-state p { font-size: 14px; }
/* ================================================
Gradient Text
================================================ */
.gradient-text {
background: linear-gradient(135deg, #A855F7, #3B82F6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.gradient-text-blue {
background: linear-gradient(135deg, #22D3EE, #3B82F6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ================================================
Dot Grid Decorative Background
================================================ */
.dot-bg {
background-image: radial-gradient(rgba(168,85,247,0.12) 1px, transparent 1px);
background-size: 24px 24px;
}
/* ================================================
Pagination
================================================ */
.pagination-wrap {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 40px;
flex-wrap: wrap;
}
.page-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--surface-1);
border: 1px solid rgba(255,255,255,0.08);
color: var(--text-secondary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 14px;
font-family: var(--font-body);
transition: var(--transition);
text-decoration: none;
}
.page-btn:hover, .page-btn.active {
background: linear-gradient(135deg, #A855F7, #7C3AED);
border-color: transparent;
color: #fff;
}
/* ================================================
Utility
================================================ */
.section-wrap { padding: 60px 0; }
.section-wrap-sm { padding: 40px 0; }
.text-gradient {
background: linear-gradient(135deg, #A855F7, #3B82F6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ================================================
Tool Detail Page
================================================ */
.tool-detail-wrap { padding: 50px 0 70px; }
.tool-content-card p,
.tool-content-card ol,
.tool-content-card ol li,
.tool-content-card ul li,
.pros-list li,
.cons-list li {
font-size: .9375rem !important;
color: rgba(255,255,255,0.88) !important;
line-height: 1.85 !important;
}
.tool-content-card.main-content-card p,
.tool-content-card.main-content-card ol,
.tool-content-card.main-content-card ol li,
.tool-content-card.main-content-card ul li,
.pros-list li,
.cons-list li {
font-size: 1.08rem !important;
color: rgba(255,255,255,0.88) !important;
line-height: 1.85 !important;
}
body.light-mode .tool-content-card p,
body.light-mode .tool-content-card ol li,
body.light-mode .tool-content-card ul li,
body.light-mode .pros-list li,
body.light-mode .cons-list li { color: rgba(26,21,53,0.85) !important; }
.tool-info-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
.info-pill {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 50px;
padding: 7px 16px;
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
}
.info-pill span { color: #8B8AA7; }
.info-pill strong { color: #fff; font-weight: 600; }
.info-pill strong.green { color: #22C55E; }
body.light-mode .info-pill { background: rgba(124,58,237,0.06); border-color: rgba(124,58,237,0.15); }
body.light-mode .info-pill span { color: #6B7280; }
body.light-mode .info-pill strong { color: #1A1535; }
.screenshots-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 16px;
}
.screenshots-grid img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.08);
transition: 0.3s ease;
cursor: pointer;
}
.screenshots-grid img:hover {
border-color: rgba(168,85,247,0.45);
transform: scale(1.02);
}
.related-tools-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 16px;
}
.related-tool-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 16px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
text-decoration: none;
transition: 0.3s ease;
}
.related-tool-card:hover {
border-color: rgba(168,85,247,0.35);
background: rgba(168,85,247,0.06);
transform: translateY(-3px);
}
.related-tool-card img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; }
.related-tool-card .rtc-name { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #fff; }
.related-tool-card .rtc-cat { font-size: 11px; color: #8B8AA7; }
.related-tool-card .rtc-btn { font-size: 12px; color: #A855F7; font-weight: 600; }
body.light-mode .related-tool-card { background: rgba(124,58,237,0.04); border-color: rgba(124,58,237,0.12); }
body.light-mode .related-tool-card .rtc-name { color: #1A1535; }
/* Rating row */
.tool-rating-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.star-rating { font-size: 12px; }
.star-score { color: #fff; font-weight: 700; margin-left: 4px; }
.star-count { color: #8B8AA7; font-size: 13px; }
.tool-status { color: #22C55E; font-size: 13px; }
.tool-status i { font-size: 8px; margin-right: 4px; }
/* Nav login link */
.nav-login-link {
color: #A855F7;
font-size: 14px;
font-weight: 600;
text-decoration: none;
padding: 8px 4px;
}
/* Card icon accent */
.card-icon { color: #A855F7; }
/* How to use list */
.how-to-list { color: #9CA3AF; line-height: 2; padding-left: 20px; }
.how-to-list strong { color: #C084FC; }
/* Tip box */
.tip-box {
background: rgba(168,85,247,0.08);
border: 1px solid rgba(168,85,247,0.2);
border-radius: 10px;
padding: 14px 18px;
margin-top: 16px;
}
.tip-box p { margin: 0; color: #C084FC; font-size: 14px; }
/* Pricing cards */
.price-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 20px;
text-align: center;
}
.price-card-featured {
background: linear-gradient(135deg, rgba(168,85,247,0.15), rgba(59,130,246,0.15));
border-color: rgba(168,85,247,0.3);
}
.price-card-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: 8px; }
.price-card-name.accent { color: #A855F7; }
.price-card-amount { font-size: 1.8rem; font-weight: 800; color: #fff; }
.price-card-amount.green { color: #22C55E; }
.price-card-amount .price-period { font-size: 14px; color: #9CA3AF; }
.price-card-desc { color: #9CA3AF; font-size: 13px; margin: 10px 0 0; }
/* Info table */
.info-table { width: 100%; color: #9CA3AF; font-size: 14px; }
.info-table td { padding: 10px 0; }
.info-table td:last-child { text-align: right; }
.info-table tr { border-bottom: 1px solid rgba(255,255,255,0.05); }
.info-table tr:last-child { border-bottom: none; }
.info-table .td-label { color: #8B8AA7; }
.info-table .td-value { color: #fff; }
.info-table .td-value.green { color: #22C55E; font-weight: 700; }
/* Similar tools list */
.similar-tool-item { display: flex; align-items: center; gap: 12px; }
.similar-tool-img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.similar-tool-name { font-weight: 700; color: #fff; font-size: 14px; }
.similar-tool-cat { color: #8B8AA7; font-size: 12px; }
.similar-tool-link { color: #A855F7; font-size: 12px; text-decoration: none; margin-left: auto; flex-shrink: 0; }
body.light-mode .similar-tool-name { color: #1A1535; }
/* btn-access full-width variant */
.btn-access-block { display: block; text-align: center; }
/* p spacing within tool-content-card */
.tool-content-card .p-mt { margin-top: 12px; }
/* ================================================
404 Page
================================================ */
.error-page-wrap { min-height: calc(100vh - 200px); display: flex; align-items: center; position: relative; overflow: hidden; }
.error-container { position: relative; z-index: 1; }
.error-content { text-align: center; max-width: 580px; margin: 0 auto; padding: 60px 20px; }
.error-number { font-family: var(--font-display); font-size: clamp(6rem,20vw,10rem); font-weight: 800; line-height: 1; background: linear-gradient(135deg,#A855F7,#3B82F6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 16px; user-select: none; }
.error-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(168,85,247,0.1) 1px,transparent 1px); background-size: 24px 24px; pointer-events: none; }
.error-glow-1 { position: absolute; top: 20%; left: 20%; width: 300px; height: 300px; background: radial-gradient(circle,rgba(168,85,247,0.12) 0%,transparent 70%); border-radius: 50%; pointer-events: none; }
.error-glow-2 { position: absolute; bottom: 20%; right: 20%; width: 250px; height: 250px; background: radial-gradient(circle,rgba(59,130,246,0.1) 0%,transparent 70%); border-radius: 50%; pointer-events: none; }
.error-title { font-family: var(--font-display); font-size: clamp(1.4rem,3vw,1.8rem); font-weight: 800; color: #fff; margin-bottom: 14px; }
.error-desc { color: #9CA3AF; font-size: 15px; line-height: 1.7; margin-bottom: 36px; }
.error-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 40px; }
.error-link-secondary { background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.1); color: #fff; padding: 10px 24px; border-radius: 50px; font-size: 13px; font-weight: 700; text-decoration: none; transition: var(--transition); display: inline-flex; align-items: center; gap: 8px; }
.error-link-secondary:hover { border-color: rgba(168,85,247,0.4); color: #A855F7; }
.error-search-wrap { max-width: 420px; margin: 0 auto; }
.error-back-btn { background: none; border: none; color: #8B8AA7; font-size: 14px; cursor: pointer; margin-top: 28px; }
/* ================================================
Article Detail Page
================================================ */
.article-body { max-width: 780px; }
.article-body p { color: var(--text-secondary); font-size: 15.5px; line-height: 1.85; margin-bottom: 20px; }
.article-body h2 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: #fff; margin: 32px 0 14px; }
.article-body h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: #C084FC; margin: 24px 0 12px; }
.article-body ul, .article-body ol { color: var(--text-secondary); font-size: 15.5px; line-height: 1.85; padding-left: 22px; margin-bottom: 20px; }
.article-body li { margin-bottom: 8px; }
.article-body blockquote { border-left: 3px solid #A855F7; padding: 14px 20px; background: rgba(168,85,247,0.06); border-radius: 0 10px 10px 0; margin: 24px 0; }
.article-body blockquote p { margin: 0; font-style: italic; color: #C084FC; }
.article-body img { width: 100%; border-radius: 12px; margin: 24px 0; border: 1px solid rgba(255,255,255,0.07); }
.article-highlight { background: rgba(168,85,247,0.08); border: 1px solid rgba(168,85,247,0.2); border-radius: 12px; padding: 20px 24px; margin: 24px 0; }
.article-highlight p { margin: 0; color: #C084FC; font-size: 14px; }
body.light-mode .article-body h2 { color: #1A1535; }
body.light-mode .article-body p, body.light-mode .article-body li { color: #4B5563; }
.article-meta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.article-main-title { font-family: var(--font-display); font-size: clamp(1.5rem,3.5vw,2rem); font-weight: 800; color: #fff; line-height: 1.3; margin-bottom: 20px; }
.article-hero-img { width: 100%; border-radius: 16px; margin-bottom: 28px; border: 1px solid rgba(255,255,255,0.07); }
.article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.07); }
.article-strong-accent { color: #C084FC; }
.author-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.07); border-bottom: 1px solid rgba(255,255,255,0.07); margin-bottom: 24px; }
.author-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,#A855F7,#3B82F6); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-family: var(--font-display); flex-shrink: 0; }
.author-name { color: #fff; font-weight: 600; font-size: 14px; }
.author-date { color: #8B8AA7; font-size: 12px; }
.author-actions { margin-left: auto; display: flex; gap: 8px; }
.share-btn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #9CA3AF; padding: 6px 14px; border-radius: 50px; font-size: 12px; cursor: pointer; }
.share-btn:hover { color: #fff; border-color: rgba(255,255,255,0.2); }
.sidebar-card-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.07); }
body.light-mode .sidebar-card-title { color: #1A1535; border-bottom-color: rgba(0,0,0,0.08); }
.related-article-list { display: flex; flex-direction: column; gap: 16px; }
.related-article-item { display: flex; gap: 12px; text-decoration: none; align-items: flex-start; }
.related-article-thumb { width: 70px; height: 55px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.related-article-title { color: #fff; font-size: 13px; font-weight: 600; line-height: 1.4; margin-bottom: 4px; }
.related-article-date { color: #8B8AA7; font-size: 11px; }
body.light-mode .related-article-title { color: #1A1535; }
.newsletter-cta-card { background: linear-gradient(135deg,rgba(168,85,247,0.12),rgba(59,130,246,0.12)); border: 1px solid rgba(168,85,247,0.2); border-radius: 16px; padding: 24px; text-align: center; }
.newsletter-cta-icon { font-size: 28px; color: #A855F7; margin-bottom: 12px; display: block; }
.newsletter-cta-title { font-family: var(--font-display); color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.newsletter-cta-desc { color: #9CA3AF; font-size: 13px; margin-bottom: 16px; }
.newsletter-cta-input { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 10px 14px; color: #fff; font-size: 13px; margin-bottom: 10px; font-family: var(--font-body); }
/* ================================================
Auth Pages (Login / Daftar / Lupa Password)
================================================ */
.auth-bg-glow { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; }
.auth-bg-glow-purple { top: 10%; right: 5%; width: 400px; height: 400px; background: radial-gradient(circle,rgba(168,85,247,0.08),transparent 70%); }
.auth-bg-glow-blue { bottom: 10%; left: 5%; width: 300px; height: 300px; background: radial-gradient(circle,rgba(59,130,246,0.07),transparent 70%); }
.auth-section-padded { padding: 50px 0 60px; }
.auth-label-flex { display: flex; justify-content: space-between; }
.auth-label-link { font-weight: 400; font-size: 13px; }
.auth-remember-row { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.auth-remember-checkbox { width: 16px; height: 16px; accent-color: #A855F7; cursor: pointer; }
.auth-remember-label { color: #9CA3AF; font-size: 14px; cursor: pointer; margin: 0; }
.auth-social-row { display: flex; gap: 12px; justify-content: center; margin-bottom: 20px; }
.auth-social-btn { flex: 1; background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 12px; color: #fff; cursor: pointer; font-family: var(--font-body); font-size: 14px; transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 8px; }
.auth-social-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
.icon-google { color: #EA4335; font-size: 16px; }
.icon-facebook { color: #1877F2; font-size: 16px; }
.auth-demo-link { text-align: center; margin-top: 12px; }
.auth-demo-link a { color: #555470; font-size: 12px; text-decoration: none; }
.auth-agree-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 24px; }
.auth-agree-checkbox { width: 16px; height: 16px; accent-color: #A855F7; cursor: pointer; margin-top: 2px; flex-shrink: 0; }
.auth-agree-label { color: #9CA3AF; font-size: 13px; cursor: pointer; margin: 0; line-height: 1.5; }
.auth-benefits { display: flex; flex-direction: column; gap: 16px; }
.auth-benefit-item { display: flex; align-items: flex-start; gap: 16px; }
.auth-benefit-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.auth-benefit-icon-purple { background: rgba(168,85,247,0.15); }
.auth-benefit-icon-blue { background: rgba(59,130,246,0.15); }
.auth-benefit-icon-cyan { background: rgba(34,211,238,0.12); }
.auth-benefit-icon-green { background: rgba(34,197,94,0.12); }
.icon-purple { color: #A855F7; font-size: 18px; }
.icon-blue { color: #3B82F6; font-size: 18px; }
.icon-cyan { color: #22D3EE; font-size: 18px; }
.icon-green { color: #22C55E; font-size: 18px; }
.auth-benefit-title { font-family: var(--font-display); font-weight: 700; color: #fff; margin-bottom: 4px; }
.auth-benefit-desc { color: #9CA3AF; font-size: 14px; }
.auth-heading { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: #fff; margin-bottom: 12px; }
.auth-subheading { color: #9CA3AF; font-size: 15px; line-height: 1.7; margin-bottom: 32px; }
/* ================================================
Deals Page
================================================ */
.deal-card { background: var(--surface-1); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-card); overflow: hidden; transition: var(--transition); height: 100%; position: relative; }
.deal-card:hover { transform: translateY(-5px); border-color: rgba(245,158,11,0.4); box-shadow: 0 10px 36px rgba(245,158,11,0.12); }
.deal-badge-wrap { position: absolute; top: 14px; right: 14px; z-index: 2; }
.deal-percent { background: linear-gradient(135deg,#F59E0B,#EF4444); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; padding: 6px 14px; border-radius: 50px; }
.deal-card-body { padding: 22px; }
.deal-timer { background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.2); border-radius: 8px; padding: 8px 14px; display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.deal-timer i { color: #F59E0B; font-size: 14px; }
.deal-timer span { color: #F59E0B; font-size: 13px; font-weight: 600; }
.deal-price-old { color: #6B7280; font-size: 13px; text-decoration: line-through; }
.deal-price-new { color: #22C55E; font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; }
body.light-mode .deal-card { background: #fff; border-color: rgba(245,158,11,0.15); }
body.light-mode .deal-timer { background: rgba(245,158,11,0.08); }
.deal-card-img { width: 100%; height: 180px; object-fit: cover; }
.deal-tool-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.deal-tool-logo { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.deal-tool-name { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 15px; }
.deal-tool-cat { color: #8B8AA7; font-size: 12px; }
.deal-card-desc { color: #9CA3AF; font-size: 13.5px; line-height: 1.6; margin-bottom: 16px; }
.deal-price-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.deal-cta-full { display: block; text-align: center; padding: 10px; }
.affiliate-disclosure { background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.2); border-radius: 10px; padding: 12px 18px; margin-bottom: 28px; display: flex; align-items: flex-start; gap: 10px; }
.disclosure-icon { color: #60A5FA; margin-top: 2px; flex-shrink: 0; }
.disclosure-text { color: #9CA3AF; font-size: 13px; margin: 0; line-height: 1.6; }
.disclosure-link { color: #A855F7; text-decoration: none; }
.disclosure-text strong { color: #60A5FA; }
.newsletter-deals { text-align: center; margin-top: 56px; padding: 48px 24px; background: linear-gradient(135deg,rgba(245,158,11,0.08),rgba(239,68,68,0.08)); border: 1px solid rgba(245,158,11,0.2); border-radius: 20px; }
.newsletter-deals-icon { font-size: 32px; color: #F59E0B; margin-bottom: 16px; display: block; }
.newsletter-deals-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: #fff; margin-bottom: 10px; }
.newsletter-deals-desc { color: #9CA3AF; font-size: 15px; max-width: 440px; margin: 0 auto 24px; }
/* ================================================
Legal Pages
================================================ */
.legal-body h2 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: #fff; margin: 32px 0 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.legal-body p, .legal-body li { color: var(--text-secondary); font-size: 15px; line-height: 1.85; margin-bottom: 12px; }
.legal-body ul { padding-left: 22px; }
.legal-body li { margin-bottom: 6px; }
.legal-body a { color: #A855F7; text-decoration: none; }
.legal-body strong { color: #C084FC; }
body.light-mode .legal-body h2 { color: #1A1535; border-color: rgba(0,0,0,0.08); }
body.light-mode .legal-body p, body.light-mode .legal-body li { color: #4B5563; }
.legal-nav-links { text-align: center; margin-top: 24px; }
.legal-nav-links a { font-size: 14px; text-decoration: none; }
.legal-nav-links .link-primary { color: #A855F7; margin-right: 24px; }
.legal-nav-links .link-muted { color: #9CA3AF; }
/* ================================================
Kontak Page
================================================ */
.card-section-title { font-family: var(--font-display); color: #fff; font-size: 1.1rem; font-weight: 700; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.card-section-title-sm { font-family: var(--font-display); color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.07); }
body.light-mode .card-section-title, body.light-mode .card-section-title-sm { color: #1A1535; border-bottom-color: rgba(0,0,0,0.08); }
.form-label { display: block; color: #9CA3AF; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.select-cursor { cursor: pointer; }
.textarea-resize { resize: vertical; min-height: 120px; }
.contact-success { display: none; text-align: center; padding: 24px; }
.contact-success-icon { font-size: 48px; color: #22C55E; margin-bottom: 16px; display: block; }
.contact-success-title { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.1rem; margin-bottom: 8px; }
.contact-info-cards { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.contact-card { border-radius: 14px; padding: 20px; display: flex; align-items: flex-start; gap: 16px; }
.contact-card-purple { background: rgba(168,85,247,0.06); border: 1px solid rgba(168,85,247,0.15); }
.contact-card-blue { background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.15); }
.contact-card-green { background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.15); }
.contact-icon-wrap { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-icon-wrap-purple { background: rgba(168,85,247,0.15); }
.contact-icon-wrap-blue { background: rgba(59,130,246,0.15); }
.contact-icon-wrap-green { background: rgba(34,197,94,0.12); }
.contact-card-title { font-family: var(--font-display); font-weight: 700; color: #fff; margin-bottom: 4px; }
.contact-card-value { color: #9CA3AF; font-size: 14px; }
.contact-card-sub { color: #8B8AA7; font-size: 12px; margin-top: 2px; }
body.light-mode .contact-card-title { color: #1A1535; }
.faq-items { display: flex; flex-direction: column; gap: 14px; }
.faq-question { color: #C084FC; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.faq-answer { color: #9CA3AF; font-size: 13px; line-height: 1.6; }
/* ================================================
Belajar Page
================================================ */
.section-heading { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: #fff; margin-bottom: 6px; }
.section-sub { color: #9CA3AF; font-size: 14px; }
.kamus-category-sidebar .filter-tabs { flex-direction: column; gap: 6px; }
.kamus-category-sidebar .filter-tab-btn { text-align: left; }
/* Dashboard logo size */
.dash-logo-lg { width: 80px; height: 80px; border-radius: 16px; }
/* Featured article (berita.html) */
.featured-article-card { background: linear-gradient(135deg,#171530,#1C1A38); border: 1px solid rgba(168,85,247,0.2); border-radius: 20px; overflow: hidden; margin-bottom: 32px; }
.featured-article-img { width: 100%; height: 300px; object-fit: cover; }
.featured-article-body { padding: 36px; }
.featured-article-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.featured-article-date { color: #8B8AA7; font-size: 12px; }
.featured-badge { background: rgba(239,68,68,0.15); color: #F87171; border: 1px solid rgba(239,68,68,0.2); font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 50px; }
.featured-article-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; color: #fff; line-height: 1.4; margin-bottom: 16px; }
.featured-article-desc { color: #9CA3AF; font-size: 14px; line-height: 1.7; margin-bottom: 24px; }
/* Lupa Password page */
.forgot-icon-center { text-align: center; margin-bottom: 24px; }
.forgot-icon-wrap { width: 64px; height: 64px; border-radius: 50%; background: rgba(168,85,247,0.12); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.forgot-icon { font-size: 24px; color: #A855F7; }
.forgot-step2 { display: none; text-align: center; }
.forgot-success-wrap { width: 72px; height: 72px; border-radius: 50%; background: rgba(34,197,94,0.12); border: 2px solid rgba(34,197,94,0.3); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }
.forgot-success-icon { font-size: 28px; color: #22C55E; }
.forgot-info-box { background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.15); border-radius: 10px; padding: 14px; margin-bottom: 24px; }
.forgot-info-box p { color: #22C55E; font-size: 13px; margin: 0; }
.forgot-cta-full { display: block; text-align: center; padding: 13px; }
.forgot-resend-row { margin-top: 16px; }
.forgot-resend-text { color: #8B8AA7; font-size: 13px; }
.forgot-resend-btn { background: none; border: none; color: #A855F7; font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; }
/* Dashboard panels */
.dash-section-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #6B7280; margin-bottom: 16px; }
.dash-card-title { font-family: var(--font-display); color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: 20px; }
.dash-activity-list { display: flex; flex-direction: column; gap: 12px; }
.dash-activity-item { display: flex; align-items: center; gap: 16px; padding: 12px; background: rgba(255,255,255,0.03); border-radius: 10px; }
.dash-activity-logo { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.dash-activity-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(168,85,247,0.15); display: flex; align-items: center; justify-content: center; color: #A855F7; font-size: 16px; flex-shrink: 0; }
.dash-activity-info { flex: 1; }
.dash-activity-title { color: #fff; font-size: 14px; font-weight: 600; }
.dash-activity-date { color: #8B8AA7; font-size: 12px; }
.dash-security-list { display: flex; flex-direction: column; gap: 12px; }
.dash-security-item { display: flex; justify-content: space-between; align-items: center; padding: 14px; background: rgba(255,255,255,0.03); border-radius: 10px; }
.dash-security-label { color: #fff; font-size: 14px; font-weight: 600; }
.dash-security-sub { color: #8B8AA7; font-size: 12px; }
.dash-btn-edit { background: rgba(168,85,247,0.1); border: 1px solid rgba(168,85,247,0.2); color: #A855F7; padding: 6px 14px; border-radius: 50px; font-size: 12px; cursor: pointer; }
.dash-btn-enable { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.2); color: #22C55E; padding: 6px 14px; border-radius: 50px; font-size: 12px; cursor: pointer; }
.dash-btn-logout { width: 100%; background: rgba(239,68,68,0.1); border: 1.5px solid rgba(239,68,68,0.2); color: #F87171; padding: 12px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; margin-top: 8px; }
.dash-koleksi-actions { display: flex; gap: 8px; }
.dash-btn-delete { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); color: #F87171; padding: 6px 14px; border-radius: 50px; font-size: 12px; cursor: pointer; }
.dash-add-new { display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(168,85,247,0.05); border: 2px dashed rgba(168,85,247,0.25); border-radius: 16px; padding: 40px 20px; text-align: center; text-decoration: none; min-height: 200px; transition: var(--transition); }
.dash-add-new:hover { border-color: rgba(168,85,247,0.5); }
.dash-add-icon { font-size: 32px; color: #A855F7; margin-bottom: 12px; }
.dash-add-title { font-family: var(--font-display); font-weight: 700; color: #A855F7; font-size: 15px; }
.dash-add-sub { color: #8B8AA7; font-size: 13px; margin-top: 4px; }
/* Koleksi count badge */
.koleksi-more-badge { width: 34px; height: 34px; border-radius: 8px; background: rgba(168,85,247,0.15); display: flex; align-items: center; justify-content: center; color: #A855F7; font-size: 12px; font-weight: 700; }
/* Button outline variant */
.btn-outline-auth { background: none !important; border: 1.5px solid rgba(168,85,247,0.5) !important; color: #A855F7 !important; }
/* CTA banner (koleksi.html purple variant) */
.cta-banner-purple { text-align: center; margin-top: 56px; padding: 48px; background: linear-gradient(135deg,rgba(168,85,247,0.1),rgba(59,130,246,0.1)); border: 1px solid rgba(168,85,247,0.2); border-radius: 20px; }
.cta-banner-title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: #fff; margin-bottom: 12px; }
/* Utility */
.btn-full { width: 100%; }
/* Collection meta bar (koleksi-detail.html) */
.collection-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; padding: 20px 24px; background: rgba(168,85,247,0.06); border: 1px solid rgba(168,85,247,0.15); border-radius: 16px; }
.collection-meta-img { width: 80px; height: 60px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.collection-meta-info { flex: 1; }
.collection-meta-title { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.1rem; margin-bottom: 4px; }
.collection-meta-sub { color: #9CA3AF; font-size: 14px; }
.back-link { text-align: center; margin-top: 48px; }
.back-link a { color: #A855F7; text-decoration: none; font-size: 15px; font-weight: 600; }
/* ================================================
Responsive
================================================ */
@media (max-width: 991px) {
.pros-cons-grid { grid-template-columns: 1fr; }
.dashboard-stats { margin-left: 0; }
}
@media (max-width: 767px) {
.page-header-area { padding: 210px 0 40px; }
.auth-card { padding: 28px 20px; }
.tool-detail-header { gap: 16px; }
.tool-detail-logo { width: 64px; height: 64px; }
.filter-tabs { gap: 6px; }
.filter-tab-btn { padding: 6px 14px; font-size: 13px; }
.dash-tabs { width: 100%; }
.dash-tab { padding: 8px 16px; font-size: 13px; }
.screenshots-grid { grid-template-columns: 1fr 1fr; }
.related-tools-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.screenshots-grid { grid-template-columns: 1fr; }
}
/* ================================================
Kamus Detail Page
================================================ */
.kamus-detail-header { margin-bottom: 32px; }
.kamus-detail-label { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.kamus-detail-level { color: #8B8AA7; font-size: 13px; }
.kamus-detail-term { font-family: var(--font-display); font-size: clamp(1.8rem,4vw,2.6rem); font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 8px; }
.kamus-detail-abbr { color: var(--accent-purple); }
.kamus-detail-indo { color: var(--text-secondary); font-size: 14px; margin-bottom: 20px; }
.kamus-detail-indo strong { color: #C084FC; }
.kamus-detail-quick { background: rgba(168,85,247,0.06); border-left: 3px solid #A855F7; border-radius: 0 12px 12px 0; padding: 18px 22px; }
.kamus-detail-quick .fa-quote-left { color: #A855F7; margin-bottom: 8px; display: block; font-size: 18px; }
.kamus-detail-quick p { color: rgba(255,255,255,0.88); font-size: 1rem; line-height: 1.75; margin: 0; font-style: italic; }
body.light-mode .kamus-detail-term { color: #1A1535; }
body.light-mode .kamus-detail-quick { background: rgba(124,58,237,0.05); }
body.light-mode .kamus-detail-quick p { color: #374151; }
.kamus-detail-body { margin-bottom: 32px; }
/* Term navigation */
.kamus-term-nav { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.07); }
.kamus-term-nav-label { color: #8B8AA7; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; display: block; }
.kamus-term-nav-links { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.kamus-nav-prev, .kamus-nav-next { color: #A855F7; text-decoration: none; font-size: 14px; font-weight: 600; transition: var(--transition); }
.kamus-nav-prev:hover, .kamus-nav-next:hover { color: #C084FC; }
/* Quick reference sidebar */
.kamus-ref-card .info-table .td-value { text-align: right; }
/* Related terms list */
.kamus-related-list { display: flex; flex-direction: column; gap: 12px; }
.kamus-related-item { display: flex; align-items: flex-start; gap: 12px; text-decoration: none; padding: 10px; border-radius: 10px; transition: var(--transition); }
.kamus-related-item:hover { background: rgba(168,85,247,0.07); }
.kamus-related-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(168,85,247,0.12); display: flex; align-items: center; justify-content: center; color: #A855F7; font-size: 14px; flex-shrink: 0; }
.kamus-related-term { color: #fff; font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.kamus-related-sub { color: #8B8AA7; font-size: 11px; line-height: 1.4; }
body.light-mode .kamus-related-term { color: #1A1535; }
/* All terms list */
.kamus-all-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.kamus-all-item { color: var(--text-secondary); font-size: 13px; padding: 7px 10px; border-radius: 8px; text-decoration: none; transition: var(--transition); }
.kamus-all-item:hover { background: rgba(168,85,247,0.08); color: #fff; }
.kamus-all-item.active { background: rgba(168,85,247,0.15); color: #A855F7; font-weight: 600; }
body.light-mode .kamus-all-item:hover { color: #1A1535; }
body.light-mode .kamus-all-item.active { color: var(--accent-purple-dk); }
/* Auth divider */
.auth-divider { text-align: center; color: #6B7280; font-size: 13px; margin: 20px 0; position: relative; }
.auth-divider::before, .auth-divider::after { content: ""; position: absolute; top: 50%; width: 42%; height: 1px; background: rgba(255,255,255,0.08); }
.auth-divider::before { left: 0; }
.auth-divider::after { right: 0; }
body.light-mode .auth-divider::before,
body.light-mode .auth-divider::after { background: rgba(0,0,0,0.1); }
/* ================================================
Core Web Vitals — CLS & INP Improvements
================================================ */
/* Aspect-ratio rules prevent layout shift when images load */
.tool-card-logo { width: 48px; height: 48px; aspect-ratio: 1; object-fit: contain; }
.article-card-img { aspect-ratio: 16/9; width: 100%; object-fit: cover; }
.koleksi-card-img { aspect-ratio: 16/9; width: 100%; object-fit: cover; }
.koleksi-logo-row img { width: 28px; height: 28px; aspect-ratio: 1; object-fit: contain; }
.tool-detail-logo { width: 80px; height: 80px; aspect-ratio: 1; object-fit: contain; }
.tool-detail-screenshot { aspect-ratio: 16/9; width: 100%; object-fit: cover; display: block; }
/* Fade-out animation for removed dashboard cards (replaces inline style mutations) */
@keyframes cwv-fade-out { to { opacity: 0; } }
.fade-out { animation: cwv-fade-out 0.3s forwards; }