1223 lines
20 KiB
CSS
1223 lines
20 KiB
CSS
|
|
@font-face {
|
|
font-family: 'Geist-medium';
|
|
src: url('../fonts/Geist-Medium.otf');
|
|
}
|
|
@font-face {
|
|
font-family: 'Geist-semibold';
|
|
src: url('../fonts/Geist-SemiBold.otf');
|
|
}
|
|
@font-face {
|
|
font-family: 'Roboto';
|
|
src: url('../fonts/Roboto-Regular.ttf');
|
|
}
|
|
|
|
html,body {
|
|
height: 100%;
|
|
}
|
|
|
|
:root{
|
|
--main-color:#655087;
|
|
--text-color:#3f3f3f;
|
|
--bg-color: #ffffff;
|
|
}
|
|
|
|
body {
|
|
display:flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
line-height: 1.7;
|
|
font-family: "Roboto", sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
color: var(--text-color);
|
|
font-size: .87em;
|
|
}
|
|
|
|
.title-color{
|
|
color: var(--main-color);
|
|
}
|
|
|
|
p, .paragraph {
|
|
font-weight: 400;
|
|
color: var(--text-color);
|
|
font-size: 14px;
|
|
line-height: 1.7;
|
|
font-family: "Roboto", sans-serif;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: var(--text-color);
|
|
font-family: "Geist-medium", sans-serif;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
h1, .h1 {
|
|
font-size: 45px;
|
|
}
|
|
|
|
h2, .h2 {
|
|
font-size: 36px;
|
|
}
|
|
|
|
h3, .h3 {
|
|
font-size: 28px;
|
|
}
|
|
|
|
h4, .h4 {
|
|
font-size: 22px;
|
|
}
|
|
|
|
h5, .h5 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
h6, .h6 {
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Button style */
|
|
.btn {
|
|
font-size: 14px;
|
|
font-family: "Roboto", sans-serif;
|
|
text-transform: capitalize;
|
|
padding: 8px 25px;
|
|
border-radius: 50px;
|
|
border: 1px solid;
|
|
position: relative;
|
|
z-index: 1;
|
|
transition: 0.2s ease;
|
|
}
|
|
|
|
.btn:hover, .btn:active, .btn:focus {
|
|
outline: 0;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--main-color);
|
|
color: #fff;
|
|
border-color: var(--main-color);
|
|
}
|
|
.btn-primary:active, .btn-primary:visited, .btn-primary:hover, .btn-primary.focus, .btn-primary.active {
|
|
background: var(--main-color) !important;
|
|
border-color: var(--main-color) !important;
|
|
}
|
|
|
|
.btn-outline-primary {
|
|
background: transparent;
|
|
color: var(--text-color);
|
|
border-color: var(--main-color);
|
|
}
|
|
.btn-outline-primary:active, .btn-outline-primary:hover, .btn-outline-primary.focus, .btn-outline-primary.active {
|
|
background: var(--main-color) !important;
|
|
border-color: var(--main-color) !important;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-outline-light {
|
|
background: transparent;
|
|
color: var(--text-color);
|
|
border-color: #ddd;
|
|
}
|
|
|
|
.btn-outline-light:active, .btn-outline-light:hover, .btn-outline-light.focus, .btn-outline-light.active {
|
|
background: #f0f0f0 !important;
|
|
border-color: #ddd !important;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-color);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
|
|
/* preloader */
|
|
.preloader {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: var(--bg-color);
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
img {
|
|
vertical-align: middle;
|
|
border: 0;
|
|
}
|
|
|
|
a,
|
|
a:hover,
|
|
a:focus {
|
|
text-decoration: none;
|
|
}
|
|
|
|
a,
|
|
button,
|
|
select {
|
|
cursor: pointer;
|
|
transition: 0.2s ease;
|
|
}
|
|
a:focus,
|
|
button:focus,
|
|
select:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--main-color);
|
|
}
|
|
|
|
.slick-slide {
|
|
outline: 0;
|
|
}
|
|
|
|
.section {
|
|
padding-top: 50px;
|
|
padding-bottom: 50px;
|
|
flex: 1 0 auto;
|
|
}
|
|
.section-sm {
|
|
padding-top: 80px;
|
|
padding-bottom: 80px;
|
|
}
|
|
|
|
.bg-cover {
|
|
background-size: cover;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.border-primary {
|
|
border-color: #ddd !important;
|
|
}
|
|
|
|
/* overlay */
|
|
.overlay {
|
|
position: relative;
|
|
}
|
|
.overlay::before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 100%;
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background: #000;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.outline-0 {
|
|
outline: 0 !important;
|
|
}
|
|
|
|
.d-unset {
|
|
display: unset !important;
|
|
}
|
|
|
|
.bg-primary {
|
|
background: var(--main-color) !important;
|
|
}
|
|
|
|
.text-primary {
|
|
color: var(--main-color) !important;
|
|
}
|
|
|
|
.text-color {
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.mb-10 {
|
|
margin-bottom: 10px !important;
|
|
}
|
|
|
|
.mb-20 {
|
|
margin-bottom: 20px !important;
|
|
}
|
|
|
|
.mb-30 {
|
|
margin-bottom: 30px !important;
|
|
}
|
|
|
|
.mb-40 {
|
|
margin-bottom: 40px !important;
|
|
}
|
|
|
|
.mb-50 {
|
|
margin-bottom: 50px !important;
|
|
}
|
|
|
|
.mb-60 {
|
|
margin-bottom: 60px !important;
|
|
}
|
|
|
|
.mb-70 {
|
|
margin-bottom: 70px !important;
|
|
}
|
|
|
|
.mb-80 {
|
|
margin-bottom: 80px !important;
|
|
}
|
|
|
|
.mb-90 {
|
|
margin-bottom: 90px !important;
|
|
}
|
|
|
|
.mb-100 {
|
|
margin-bottom: 100px !important;
|
|
}
|
|
|
|
.zindex-1 {
|
|
z-index: 1;
|
|
}
|
|
|
|
.overflow-hidden {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.rounded-lg, .post-slider {
|
|
border-radius: 10px !important;
|
|
}
|
|
|
|
.border-default {
|
|
border-color: #ddd !important;
|
|
}
|
|
|
|
.form-control:focus {
|
|
outline: 0;
|
|
box-shadow: none;
|
|
}
|
|
.form-control::-moz-placeholder {
|
|
font-size: 80%;
|
|
}
|
|
.form-control::placeholder {
|
|
font-size: 80%;
|
|
}
|
|
|
|
.nav-item {
|
|
margin: 0;
|
|
}
|
|
.nav-item .nav-link {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.navbar-white .navbar-nav .nav-link {
|
|
color: var(--text-color);
|
|
}
|
|
.navbar-white .navbar-nav .nav-link:hover {
|
|
color: var(--main-color);
|
|
}
|
|
|
|
.navbar-expand-lg .navbar-nav .nav-link {
|
|
padding: 15px 20px;
|
|
}
|
|
|
|
.navbar .dropdown:hover .dropdown-menu {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transform: scaleX(1);
|
|
}
|
|
.navbar .dropdown-menu {
|
|
box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.12);
|
|
padding: 10px 0;
|
|
border: 0;
|
|
top: 50px;
|
|
left: 0px;
|
|
border-radius: 0;
|
|
display: block;
|
|
visibility: hidden;
|
|
transition: 0.3s ease;
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
background: var(--bg-color);
|
|
border-radius: 10px;
|
|
}
|
|
@media (max-width: 991px) {
|
|
.navbar .dropdown-menu {
|
|
display: none;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: scale(1);
|
|
transform-origin: unset;
|
|
}
|
|
}
|
|
.navbar .dropdown-menu.show {
|
|
visibility: hidden;
|
|
}
|
|
@media (max-width: 991px) {
|
|
.navbar .dropdown-menu.show {
|
|
visibility: visible;
|
|
display: block;
|
|
}
|
|
}
|
|
.navbar .dropdown-item {
|
|
position: relative;
|
|
color: var(--text-color);
|
|
transition: 0.2s ease;
|
|
font-size: 14px;
|
|
}
|
|
@media (max-width: 991px) {
|
|
.navbar .dropdown-item {
|
|
text-align: center;
|
|
}
|
|
}
|
|
.navbar .dropdown-item:not(:last-child) {
|
|
margin-bottom: 10px;
|
|
}
|
|
.navbar .dropdown-item:hover {
|
|
color: var(--main-color) !important;
|
|
background: transparent;
|
|
}
|
|
|
|
/* search */
|
|
.search-btn {
|
|
border: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.search-wrapper {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 100%;
|
|
z-index: 2;
|
|
visibility: hidden;
|
|
transition: 0.2s ease;
|
|
opacity: 0;
|
|
}
|
|
.search-wrapper.open {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
.search-box {
|
|
height: 100%;
|
|
width: 100%;
|
|
border: 0;
|
|
background: var(--bg-color);
|
|
font-size: 20px;
|
|
padding: 0;
|
|
padding-right: 35px;
|
|
}
|
|
.search-box:focus {
|
|
box-shadow: none !important;
|
|
outline: 0;
|
|
}
|
|
|
|
.search-close {
|
|
position: absolute;
|
|
right: 5px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
border: 0;
|
|
background: transparent;
|
|
page-break-after: 10px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.post-title {
|
|
color: var(--text-color);
|
|
}
|
|
.post-title:hover {
|
|
color: var(--main-color);
|
|
}
|
|
|
|
.post-meta li {
|
|
margin-right: 10px;
|
|
font-size: 90%;
|
|
}
|
|
.post-meta a {
|
|
color: var(--text-color);
|
|
border-bottom: 1px dotted #ddd;
|
|
}
|
|
.post-meta a:hover {
|
|
color: var(--main-color);
|
|
}
|
|
|
|
.recent-thumb-alt {
|
|
font-size: 0;
|
|
height: 60px;
|
|
width: 60px;
|
|
border-radius: 50%;
|
|
background-color: var(--main-color);
|
|
text-align: center;
|
|
}
|
|
.recent-thumb-alt::first-letter {
|
|
font-size: 40px;
|
|
line-height: 60px;
|
|
color: #fff;
|
|
}
|
|
|
|
.social-icons {
|
|
margin-bottom: 0;
|
|
}
|
|
.social-icons a {
|
|
display: block;
|
|
color: #888c8e;
|
|
padding: 5px;
|
|
font-size: 14px;
|
|
}
|
|
.social-icons a:hover {
|
|
color: var(--main-color);
|
|
}
|
|
|
|
.social-icons-rounded {
|
|
margin-bottom: 0;
|
|
}
|
|
.social-icons-rounded a {
|
|
display: block;
|
|
color: #888c8e;
|
|
font-size: 14px;
|
|
height: 40px;
|
|
width: 40px;
|
|
line-height: 40px;
|
|
border-radius: 50%;
|
|
border: 1px solid #ddd;
|
|
}
|
|
.social-icons-rounded a:hover {
|
|
color: var(--main-color);
|
|
border-color: var(--main-color);
|
|
}
|
|
|
|
/** POST IMAGE */
|
|
.post-img-box{
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.post-img-box img{
|
|
border-radius: inherit;
|
|
}
|
|
|
|
@media (min-width: 768px){
|
|
.post-img-box img{
|
|
height: 200px; object-fit: cover; width: 510px;
|
|
}
|
|
}
|
|
/** POST IMAGE :: End */
|
|
|
|
.post-slider {
|
|
overflow: hidden;
|
|
margin-bottom: 20px;
|
|
}
|
|
.post-slider img {
|
|
border-radius: inherit;
|
|
}
|
|
.post-slider:hover .prevArrow {
|
|
left: 10px;
|
|
}
|
|
.post-slider:hover .nextArrow {
|
|
right: 10px;
|
|
}
|
|
|
|
.slider-sm .slick-arrow {
|
|
height: 35px;
|
|
width: 35px;
|
|
line-height: 35px;
|
|
}
|
|
|
|
.slick-arrow {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
z-index: 9;
|
|
height: 50px;
|
|
width: 50px;
|
|
line-height: 50px;
|
|
border-radius: 10%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
color: #fff;
|
|
border: 0;
|
|
}
|
|
@media (max-width: 575px) {
|
|
.slick-arrow {
|
|
display: none;
|
|
}
|
|
}
|
|
.slick-arrow:focus {
|
|
outline: 0;
|
|
}
|
|
.slick-arrow:hover {
|
|
background: var(--main-color);
|
|
}
|
|
|
|
.prevArrow {
|
|
left: -60px;
|
|
}
|
|
|
|
.nextArrow {
|
|
right: -60px;
|
|
}
|
|
|
|
.pagination {
|
|
margin-top: 50px;
|
|
}
|
|
.pagination .page-item .page-link {
|
|
display: inline-block;
|
|
width: 40px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
border-radius: 50%;
|
|
background: #f0f0f0;
|
|
text-align: center;
|
|
padding: 0;
|
|
margin-right: 10px;
|
|
border: 0;
|
|
color: var(--text-color);
|
|
}
|
|
.pagination .page-item .page-link:hover {
|
|
background: var(--main-color);
|
|
color: #fff;
|
|
}
|
|
.pagination .page-item .page-link:focus {
|
|
box-shadow: none;
|
|
}
|
|
.pagination .page-item:first-child .page-link, .pagination .page-item:last-child .page-link {
|
|
border-radius: 50%;
|
|
}
|
|
.pagination .page-item.active .page-link {
|
|
background: var(--main-color);
|
|
color: #fff;
|
|
}
|
|
|
|
.content * {
|
|
word-break: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
.content img {
|
|
max-width: 100%;
|
|
}
|
|
.content h1,
|
|
.content h2,
|
|
.content h3,
|
|
.content h4,
|
|
.content h5,
|
|
.content h6 {
|
|
font-weight: 500;
|
|
}
|
|
.content strong {
|
|
font-weight: 600;
|
|
}
|
|
.content a {
|
|
color: var(--text-color);
|
|
border-bottom: 1px dotted #ddd;
|
|
}
|
|
.content a:hover {
|
|
color: var(--main-color);
|
|
}
|
|
.content ol,
|
|
.content ul {
|
|
padding-left: 20px;
|
|
}
|
|
.content ol li,
|
|
.content ul li {
|
|
margin-bottom: 10px;
|
|
}
|
|
.content ul {
|
|
padding-left: 0;
|
|
margin-bottom: 20px;
|
|
list-style-type: none;
|
|
}
|
|
.content ul li {
|
|
padding-left: 20px;
|
|
position: relative;
|
|
}
|
|
.content ul li::before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 8px;
|
|
width: 8px;
|
|
border-radius: 50%;
|
|
background: var(--main-color);
|
|
left: 3px;
|
|
top: 8px;
|
|
}
|
|
.content table {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
margin-bottom: 1rem;
|
|
border: 1px solid #ddd;
|
|
}
|
|
.content table td,
|
|
.content table th {
|
|
padding: 0.75rem;
|
|
vertical-align: top;
|
|
margin-bottom: 0;
|
|
}
|
|
.content tr:not(:last-child) {
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
.content th {
|
|
font-weight: 500;
|
|
}
|
|
.content thead {
|
|
background: #f0f0f0;
|
|
margin-bottom: 0;
|
|
}
|
|
.content thead tr {
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
.content tbody {
|
|
background: #fdfdfd;
|
|
margin-bottom: 0;
|
|
}
|
|
.content .notices {
|
|
margin: 2rem 0;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.content .notices p {
|
|
padding: 10px;
|
|
margin-bottom: 0;
|
|
}
|
|
.content .notices p::before {
|
|
position: absolute;
|
|
top: 2px;
|
|
color: #fff;
|
|
font-family: "themify";
|
|
font-weight: 900;
|
|
content: "\e717";
|
|
left: 10px;
|
|
}
|
|
.content .notices.note p {
|
|
border-top: 30px solid #6ab0de;
|
|
background: #f0f0f0;
|
|
}
|
|
.content .notices.note p::after {
|
|
content: "Note";
|
|
position: absolute;
|
|
top: 2px;
|
|
color: #fff;
|
|
left: 2rem;
|
|
}
|
|
.content .notices.tip p {
|
|
border-top: 30px solid #78C578;
|
|
background: #f0f0f0;
|
|
}
|
|
.content .notices.tip p::after {
|
|
content: "Tip";
|
|
position: absolute;
|
|
top: 2px;
|
|
color: #fff;
|
|
left: 2rem;
|
|
}
|
|
.content .notices.info p {
|
|
border-top: 30px solid #F0B37E;
|
|
background: #f0f0f0;
|
|
}
|
|
.content .notices.info p::after {
|
|
content: "Info";
|
|
position: absolute;
|
|
top: 2px;
|
|
color: #fff;
|
|
left: 2rem;
|
|
}
|
|
.content .notices.warning p {
|
|
border-top: 30px solid #E06F6C;
|
|
background: #f0f0f0;
|
|
}
|
|
.content .notices.warning p::after {
|
|
content: "Warning";
|
|
position: absolute;
|
|
top: 2px;
|
|
color: #fff;
|
|
left: 2rem;
|
|
}
|
|
.content blockquote {
|
|
font-size: 20px !important;
|
|
color: var(--text-color);
|
|
padding: 20px 40px;
|
|
border-left: 2px solid var(--main-color);
|
|
margin: 40px 0;
|
|
font-weight: bold;
|
|
background: #f0f0f0;
|
|
}
|
|
.content blockquote p {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
.content pre {
|
|
display: block;
|
|
padding: 9.5px;
|
|
margin: 10px 0px 10px;
|
|
white-space: pre-wrap;
|
|
}
|
|
.content code {
|
|
margin-bottom: 0 !important;
|
|
font-size: 100%;
|
|
}
|
|
|
|
.code-tabs {
|
|
border: 1px solid #ddd;
|
|
overflow: hidden;
|
|
margin-bottom: 20px;
|
|
}
|
|
.code-tabs .nav-tabs {
|
|
margin-bottom: 0;
|
|
}
|
|
.code-tabs .nav-tabs .nav-item {
|
|
padding-left: 0;
|
|
border-right: 1px solid #ddd;
|
|
}
|
|
.code-tabs .nav-tabs .nav-item .nav-link {
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
border: 0;
|
|
}
|
|
.code-tabs .nav-tabs .nav-item::before {
|
|
display: none;
|
|
}
|
|
.code-tabs .nav-tabs .nav-item.active {
|
|
background: var(--main-color);
|
|
}
|
|
.code-tabs .nav-tabs .nav-item.active .nav-link {
|
|
color: #fff;
|
|
}
|
|
.code-tabs .tab-content {
|
|
padding: 20px 15px;
|
|
}
|
|
|
|
.title-bordered {
|
|
border: 1px solid #ddd;
|
|
border-radius: 40px;
|
|
padding: 2px;
|
|
}
|
|
.title-bordered h1,
|
|
.title-bordered h2,
|
|
.title-bordered h3,
|
|
.title-bordered h4,
|
|
.title-bordered h5,
|
|
.title-bordered h6 {
|
|
background: #f0f0f0;
|
|
padding: 10px 25px;
|
|
margin-bottom: 0;
|
|
border-radius: inherit;
|
|
display: inline-block;
|
|
}
|
|
|
|
.form-group label {
|
|
font-size: 13px;
|
|
color: var(--text-color);
|
|
}
|
|
.form-group .form-control {
|
|
border-color: #ddd;
|
|
}
|
|
.form-group .form-control:focus {
|
|
outline: 0;
|
|
box-shadow: none;
|
|
border-color: var(--main-color);
|
|
}
|
|
.form-group textarea.form-control {
|
|
height: 120px;
|
|
}
|
|
|
|
.widget {
|
|
background: var(--bg-color);
|
|
margin-bottom: 40px;
|
|
}
|
|
.widget-title {
|
|
position: relative;
|
|
margin-bottom: 15px;
|
|
}
|
|
.widget-title span {
|
|
background: var(--bg-color);
|
|
position: relative;
|
|
padding-right: 5px;
|
|
z-index: 1;
|
|
}
|
|
.widget-title::before {
|
|
position: absolute;
|
|
content: "";
|
|
right: 0;
|
|
height: 1px;
|
|
width: 100%;
|
|
background: #ddd;
|
|
top: 50%;
|
|
}
|
|
.widget-search {
|
|
position: relative;
|
|
}
|
|
.widget-search input {
|
|
border: 0;
|
|
border-bottom: 1px dotted #ddd;
|
|
width: 100%;
|
|
height: 40px;
|
|
padding-left: 22px;
|
|
padding-right: 34px;
|
|
}
|
|
.widget-search input:focus {
|
|
outline: 0;
|
|
}
|
|
.widget-search input::-moz-placeholder {
|
|
font-size: 90%;
|
|
}
|
|
.widget-search input::placeholder {
|
|
font-size: 90%;
|
|
}
|
|
.widget-search button {
|
|
height: 30px;
|
|
width: 30px;
|
|
line-height: 30px;
|
|
display: inline-block;
|
|
padding: 0;
|
|
background: var(--main-color);
|
|
color: #ffffff;
|
|
text-align: center;
|
|
border-radius: 10%;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 5px;
|
|
border: 0;
|
|
font-size: 12px;
|
|
}
|
|
.widget-list li {
|
|
padding: 5px 0;
|
|
}
|
|
.widget-list li:not(:last-child) {
|
|
border-bottom: 1px dotted #ddd;
|
|
}
|
|
.widget-list li a {
|
|
color: var(--text-color);
|
|
}
|
|
.widget-list li a:hover {
|
|
color: var(--main-color);
|
|
}
|
|
.widget-list-inline li {
|
|
margin-bottom: 10px;
|
|
}
|
|
.widget-list-inline li a {
|
|
padding: 2px 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 40px;
|
|
display: block;
|
|
color: var(--text-color);
|
|
}
|
|
.widget-list-inline li a:hover {
|
|
border-color: var(--main-color);
|
|
background: var(--main-color);
|
|
color: #fff;
|
|
}
|
|
.widget-post {
|
|
padding: 15px 0 !important;
|
|
}
|
|
.widget-post img {
|
|
height: 60px;
|
|
width: 60px;
|
|
border-radius: 10%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
|
|
footer {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.footer-list a {
|
|
display: block;
|
|
color: #888c8e;
|
|
padding: 5px 0;
|
|
}
|
|
.footer-list a:hover {
|
|
color: var(--main-color);
|
|
}
|
|
|
|
.subscription .form-control {
|
|
background-color: #f0f0f0;
|
|
border: 0;
|
|
margin-bottom: 10px;
|
|
padding-left: 40px;
|
|
}
|
|
.subscription .email-icon {
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 10px;
|
|
font-size: 18px;
|
|
color: var(--main-color);
|
|
}
|
|
|
|
.quote {
|
|
background-color: #f0f0f0;
|
|
display: flex;
|
|
padding: 20px;
|
|
}
|
|
.quote i {
|
|
font-size: 24px;
|
|
color: var(--main-color);
|
|
margin-right: 10px;
|
|
}
|
|
.quote p {
|
|
font-style: italic;
|
|
}
|
|
.quote-by {
|
|
color: var(--main-color);
|
|
}
|
|
|
|
.scroll-top {
|
|
border-top: 1px solid #ddd;
|
|
position: relative;
|
|
margin: 20px 0 40px;
|
|
}
|
|
.scroll-top a {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
height: 50px;
|
|
width: 50px;
|
|
border-radius: 50%;
|
|
background-color: var(--main-color);
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 50px;
|
|
display: block;
|
|
}
|
|
|
|
/** UPDATES */
|
|
|
|
.slider-content {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 20px;
|
|
color: #fff;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
max-width: 90%;
|
|
}
|
|
.slider-content h2 {
|
|
font-size: 1.5rem;
|
|
margin: 0;
|
|
color: white;
|
|
}
|
|
|
|
.post-slider .slider-item{
|
|
position: relative;
|
|
}
|
|
|
|
.post-slider{
|
|
-webkit-transition: opacity 2000s ease-in-out;
|
|
-moz-transition: opacity 2000s ease-in-out;
|
|
-ms-transition: opacity 2000s ease-in-out;
|
|
-o-transition: opacity 2000s ease-in-out;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* PAGINATION */
|
|
.pagination .page-item.active .page-link{
|
|
background-color: var(--main-color);
|
|
border-color: var(--main-color);
|
|
color: #fff;
|
|
}
|
|
|
|
.pagination .page-link{
|
|
color: var(--main-color);
|
|
}
|
|
|
|
.pagination .page-link:hover{
|
|
color: var(--main-color);
|
|
}
|
|
|
|
|
|
.author-card {
|
|
background-color: #fbfbfb;
|
|
padding: 2rem;
|
|
border-radius: 0.5rem;
|
|
text-align: center;
|
|
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.author-card img {
|
|
border-radius: 50%;
|
|
width: 120px;
|
|
height: 120px;
|
|
}
|
|
.social-links a {
|
|
color: #333;
|
|
font-size: 1.5rem;
|
|
margin: 0 0.5rem;
|
|
transition: color 0.3s ease;
|
|
}
|
|
.social-links a:hover {
|
|
color: var(--main-color);
|
|
}
|
|
.post-title {
|
|
color: #333;
|
|
text-decoration: none;
|
|
transition: color 0.3s ease;
|
|
}
|
|
.post-title:hover {
|
|
color: var(--main-color);
|
|
}
|
|
|
|
/* Basic styling for share buttons */
|
|
.share-buttons {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 10px;
|
|
margin: 0 auto;
|
|
margin-bottom: 12px;
|
|
transition: transform 0.3s ease, opacity 0.3s ease;
|
|
}
|
|
|
|
.share-buttons a {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 20%;
|
|
background-color: #655087;
|
|
color: #fff;
|
|
transition: background-color 0.3s ease;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.share-buttons a:hover {
|
|
background-color: #4e3d6d;
|
|
}
|
|
|
|
.share-buttons a i {
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* Sticky styling */
|
|
.sticky-share-buttons {
|
|
position: fixed;
|
|
top: 100px;
|
|
left: 20px;
|
|
flex-direction: column;
|
|
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
.share-buttons{
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.sticky-share-buttons {
|
|
position: static;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
|
|
/* FRONTEND */
|
|
.navbar .user-details {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
@media(max-width: 991px) {
|
|
.navbar .user-details {
|
|
margin-left: calc(50%-34px);
|
|
}
|
|
}
|
|
|
|
.navbar .user-details img {
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.navbar .user-dropdown {
|
|
display: none;
|
|
position: absolute;
|
|
top: 45px;
|
|
right: 0;
|
|
background-color: white;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
border-radius: 8px;
|
|
z-index: 1000;
|
|
min-width: 140px;
|
|
}
|
|
|
|
@media(max-width: 991px) {
|
|
.navbar .user-dropdown {
|
|
right: auto;
|
|
}
|
|
}
|
|
|
|
.navbar .user-dropdown a {
|
|
display: block;
|
|
padding: 10px 20px;
|
|
color: var(--text-color);
|
|
text-decoration: none;
|
|
text-align: left;
|
|
}
|
|
|
|
.navbar .user-dropdown a i {
|
|
margin-right: 8px;
|
|
color: var(--main-color);
|
|
}
|
|
|
|
.navbar .user-dropdown a i::before {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.navbar .user-dropdown a:hover {
|
|
background-color: #f0f0f0;
|
|
color: var(--main-color);
|
|
}
|
|
|
|
.navbar .user-details.active .user-dropdown {
|
|
display: block;
|
|
}
|
|
|
|
.post-slider img {
|
|
min-height: 470px !important;
|
|
}
|
|
|
|
.ad-banner {
|
|
height: 200px;
|
|
width: 100%;
|
|
background-image: url('/front/images/BE0M7S7N.jpg');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
border-radius: 0.5rem;
|
|
position: relative;
|
|
text-decoration: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Overlay */
|
|
.ad-banner::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0,0,0,0);
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
/* Hover Overlay */
|
|
.ad-banner:hover::before {
|
|
background: rgba(0,0,0,0.6);
|
|
}
|
|
|
|
/* Text */
|
|
.ad-text {
|
|
position: relative;
|
|
z-index: 1;
|
|
color: #fff;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
font-family: Arial, sans-serif;
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* Text sichtbar bei Hover */
|
|
.ad-banner:hover .ad-text {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
} |