/*
Theme Name: Dappo Theme
Description: A modern, professional WordPress theme designed for business and portfolio websites.
Version: 1.0
Author: Your Name
*/
/* CSS Custom Properties for Theme Colors */
:root {
--primary-accent-color: #cb0606;
--primary-accent-hover: #a50505;
--primary-accent-light: rgba(203, 6, 6, 0.1);
}
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Oxygen", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
sans-serif;
line-height: 1.6;
color: #333;
background-color: #fbfbfb;
}
/* Screen Reader Only */
span.sr-only {
display: none;
}
/* Global Link Styles */
a {
color: var(--primary-accent-color);
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: var(--primary-accent-hover);
text-decoration: underline;
}
/* Global Button Styles */
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
background-color: var(--primary-accent-color);
color: white;
text-decoration: none;
border-radius: 0.5rem;
font-weight: 600;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.btn:hover {
background-color: var(--primary-accent-hover);
color: white;
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(209, 0, 10, 0.3);
}
.btn-primary {
background-color: var(--primary-accent-color);
}
.btn-secondary {
background-color: transparent;
color: var(--primary-accent-color);
border: 2px solid var(--primary-accent-color);
}
.btn-secondary:hover {
background-color: var(--primary-accent-color);
color: white;
}
/* Heading Font Family */
h1,
h2,
h3,
h4,
h5,
h6,
.site-title,
.section-title,
.news-title,
.story-title,
.sidebar-title,
.entry-title {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
sans-serif;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header */
.site-header {
background: #000000;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); */
transition: all 0.3s ease;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
position: relative;
}
.site-logo {
font-size: 1.8rem;
font-weight: 700;
color: #ffffff;
text-decoration: none;
display: flex;
align-items: center;
}
.logo-image {
height: 40px;
width: auto;
max-width: 120px;
}
.main-navigation {
display: block;
}
.main-navigation .nav-menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
flex-direction: row;
}
.main-navigation .nav-menu li {
position: relative;
display: inline-block;
}
.main-navigation .nav-menu li a {
display: flex;
align-items: center;
padding: 1rem;
text-decoration: none;
color: #ffffff;
font-weight: 500;
transition: color 0.3s ease;
white-space: nowrap;
}
.main-navigation .nav-menu li a:hover {
color: var(--primary-accent-color);
}
.main-navigation .nav-menu li.current-menu-item > a,
.main-navigation .nav-menu li.current-page-ancestor > a {
color: var(--primary-accent-color);
font-weight: 600;
}
/* Creative Dropdown Menus */
/* Clean dropdown menu styles */
.main-navigation .dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
border-radius: 8px;
min-width: 200px;
padding: 0.5rem 0;
z-index: 1000;
list-style: none;
margin: 0;
}
/* Arrow pointer for dropdown */
.main-navigation .dropdown-menu::before {
content: "";
position: absolute;
top: -8px;
left: 1.25rem;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #fff;
filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.1));
}
.main-navigation .dropdown-menu li {
display: block;
width: 100%;
margin: 0 0.5rem;
border-radius: 0.5rem;
overflow: hidden;
}
.main-navigation .dropdown-menu li:first-child {
margin-top: 0;
}
.main-navigation .dropdown-menu li:last-child {
margin-bottom: 0;
}
.main-navigation .dropdown-menu li a {
display: flex;
align-items: center;
padding: 0.875rem 1.25rem;
color: #374151;
font-weight: 500;
text-decoration: none;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
border-radius: 0.5rem;
margin: 0.125rem 0;
}
.main-navigation .dropdown-menu li a::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0;
background: var(--primary-accent-color);
transition: width 0.3s ease;
border-radius: 0.5rem 0 0 0.5rem;
}
.main-navigation .dropdown-menu li a:hover::before {
width: 4px;
}
.main-navigation .dropdown-menu li a:hover {
background: var(--primary-accent-light);
color: var(--primary-accent-color);
transform: translateX(8px);
box-shadow: 0 4px 12px rgba(203, 6, 6, 0.15);
}
/* Category SVG icons */
.main-navigation .dropdown-menu li a::after {
content: "";
margin-left: auto;
width: 20px;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
opacity: 0.6;
transition: opacity 0.3s ease;
background-color: currentColor;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
}
.main-navigation .dropdown-menu li a:hover::after {
opacity: 1;
}
/* Culture - Palette Icon */
.main-navigation .dropdown-menu a[href*="culture"]::after {
mask-image: url('data:image/svg+xml;utf8,');
}
/* Lifestyle - Sparkles Icon */
.main-navigation .dropdown-menu a[href*="lifestyle"]::after {
mask-image: url('data:image/svg+xml;utf8,');
}
/* Hospitality - Hotel Icon */
.main-navigation .dropdown-menu a[href*="hospitality"]::after {
mask-image: url('data:image/svg+xml;utf8,');
}
/* Property - Home Icon */
.main-navigation .dropdown-menu a[href*="property"]::after {
mask-image: url('data:image/svg+xml;utf8,');
}
/* Fashion - Shirt Icon */
.main-navigation .dropdown-menu a[href*="fashion"]::after {
mask-image: url('data:image/svg+xml;utf8,');
}
/* Business - Briefcase Icon */
.main-navigation .dropdown-menu a[href*="business"]::after {
mask-image: url('data:image/svg+xml;utf8,');
}
/* Ensure dropdown menus are properly positioned */
.main-navigation .has-dropdown {
position: relative;
}
.main-navigation .has-dropdown > a {
position: relative;
}
/* Fallback for menu items with dropdowns (even without has-dropdown class) */
.main-navigation li {
position: relative;
}
.main-navigation li > a {
position: relative;
}
/* Desktop dropdown hover - matching reference */
@media (min-width: 768px) {
.main-navigation .nav-menu li:hover > .dropdown-menu {
display: block !important;
position: absolute !important;
animation: dropdownFadeIn 0.3s ease forwards;
}
.main-navigation .dropdown-menu li {
display: block;
width: 100%;
margin: 0;
}
.main-navigation .dropdown-menu li a {
display: flex;
align-items: center;
padding: 0.875rem 1.25rem;
color: #374151;
font-weight: 500;
text-decoration: none;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
border-radius: 0;
margin: 0;
width: 100%;
}
.main-navigation .dropdown-menu li a:hover {
background: var(--primary-accent-light);
color: var(--primary-accent-color);
padding-left: 1.5rem;
}
/* Override mobile styles for desktop */
.main-navigation .dropdown-menu {
position: absolute !important;
top: 100% !important;
left: 0 !important;
background: #fff !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
border-radius: 8px !important;
min-width: 200px !important;
padding: 0.5rem 0 !important;
z-index: 1000 !important;
transform: none !important;
margin: 0 !important;
}
}
/* Multi-level dropdown */
.main-navigation .dropdown-menu .dropdown-menu {
top: -1rem;
left: calc(100% + 0.5rem);
transform: none;
}
.main-navigation .dropdown-menu .dropdown-menu::before {
content: "";
position: absolute;
top: 1.5rem;
left: -8px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid #fff;
filter: drop-shadow(-2px 0 4px rgba(0, 0, 0, 0.1));
}
/* Dropdown indicator styling */
.dropdown-indicator {
margin-left: 0.5rem;
font-size: 1rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0.7;
display: inline-block;
top: 2px;
position: relative;
}
.main-navigation .nav-menu li:hover .dropdown-indicator {
transform: rotate(180deg);
opacity: 1;
color: var(--primary-accent-color);
}
/* Ensure dropdown indicators are visible */
.main-navigation .has-dropdown > a .dropdown-indicator,
.main-navigation li > a .dropdown-indicator {
display: inline-block;
}
/* Enhanced Animations */
@keyframes dropdownFadeIn {
0% {
opacity: 0;
transform: translateX(-50%) translateY(-20px) scale(0.95);
visibility: hidden;
}
100% {
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
visibility: visible;
}
}
/* Staggered animation for dropdown items */
.main-navigation .dropdown-menu li {
animation: slideInFromLeft 0.3s ease forwards;
opacity: 0;
transform: translateX(-20px);
}
.main-navigation .has-dropdown:hover .dropdown-menu li:nth-child(1) {
animation-delay: 0.05s;
}
.main-navigation .has-dropdown:hover .dropdown-menu li:nth-child(2) {
animation-delay: 0.1s;
}
.main-navigation .has-dropdown:hover .dropdown-menu li:nth-child(3) {
animation-delay: 0.15s;
}
.main-navigation .has-dropdown:hover .dropdown-menu li:nth-child(4) {
animation-delay: 0.2s;
}
.main-navigation .has-dropdown:hover .dropdown-menu li:nth-child(5) {
animation-delay: 0.25s;
}
.main-navigation .has-dropdown:hover .dropdown-menu li:nth-child(6) {
animation-delay: 0.3s;
}
@keyframes slideInFromLeft {
to {
opacity: 1;
transform: translateX(0);
}
}
/* Legacy support for existing menus */
.main-navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
.main-navigation ul li {
position: relative;
display: inline-block;
}
.main-navigation ul li a {
display: block;
padding: 1rem;
text-decoration: none;
color: #333;
}
/* Removed conflicting ul ul styles - using .dropdown-menu instead */
/* Removed duplicate arrow - using walker-generated arrows instead */
@media (max-width: 767px) {
.main-navigation {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #000000;
box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
border-top: 1px solid rgba(255, 255, 255, 0.1);
z-index: 999;
opacity: 0;
visibility: hidden;
}
.main-navigation.toggled {
display: block !important;
animation: slideDown 0.3s ease-out;
opacity: 1;
visibility: visible;
margin: 0 -1rem;
}
.main-navigation .nav-menu {
flex-direction: column;
padding: 1rem 0;
}
.main-navigation .nav-menu li {
display: block;
width: 100%;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.main-navigation .nav-menu li:last-child {
border-bottom: none;
}
.main-navigation .nav-menu li a {
padding: 1rem 1.5rem;
display: block;
width: 100%;
color: #ffffff;
font-weight: 500;
transition: all 0.3s ease;
}
.main-navigation .nav-menu li a:hover {
background-color: var(--primary-accent-light);
color: var(--primary-accent-color);
padding-left: 2rem;
}
.main-navigation .dropdown-menu {
position: static;
display: none;
background: rgba(255, 255, 255, 0.02);
box-shadow: none;
border: none;
transform: none;
margin: 0;
padding: 0;
}
.main-navigation .dropdown-menu::before {
display: none;
}
.main-navigation .dropdown-menu li {
border-bottom: none;
}
.main-navigation .dropdown-menu li a {
padding: 0.75rem 2.5rem;
font-size: 0.9rem;
color: #cccccc;
}
.main-navigation .dropdown-menu li a:hover {
background-color: var(--primary-accent-light);
color: var(--primary-accent-color);
padding-left: 3rem;
}
.main-navigation .has-dropdown.open > .dropdown-menu {
display: block !important;
}
.header-actions {
display: none;
}
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.header-actions {
display: flex;
align-items: center;
gap: 1rem;
}
.search-toggle {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.3);
color: #ffffff;
cursor: pointer;
padding: 0.5rem;
border-radius: 0.375rem;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.search-toggle:hover {
background-color: var(--primary-accent-color);
color: #ffffff;
border-color: var(--primary-accent-color);
transform: translateY(-1px);
box-shadow: 0 4px 6px -1px rgba(255, 255, 255, 0.1),
0 2px 4px -1px rgba(255, 255, 255, 0.06);
}
.btn-primary {
background-color: var(--primary-accent-color);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
text-decoration: none;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
.btn-primary .arrow {
transition: transform 0.3s ease;
}
.btn-primary:hover .arrow {
transform: translateX(5px);
}
.mobile-nav-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
z-index: 1001;
position: relative;
}
@media (max-width: 767px) {
.mobile-nav-toggle {
display: block;
margin-left: auto;
}
}
.mobile-nav-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
background-color: #ffffff;
margin: 5px 0;
transition: all 0.3s ease;
}
/* Hamburger animation */
.mobile-nav-toggle[aria-expanded="true"] .icon-bar:nth-child(2) {
transform: rotate(45deg) translate(4px, 3px);
}
.mobile-nav-toggle[aria-expanded="true"] .icon-bar:nth-child(3) {
opacity: 0;
}
.mobile-nav-toggle[aria-expanded="true"] .icon-bar:nth-child(4) {
transform: rotate(-45deg) translate(7px, -6px);
}
/* Hero Section */
.hero-section {
background-color: #000;
padding-bottom: 4rem;
padding-top: 7rem;
position: relative;
background-image: radial-gradient(
circle at 25% 25%,
rgba(255, 255, 255, 0.05) 1px,
transparent 1px
),
radial-gradient(
circle at 75% 75%,
rgba(255, 255, 255, 0.05) 1px,
transparent 1px
),
linear-gradient(45deg, rgba(255, 255, 255, 0.02) 25%, transparent 25%),
linear-gradient(-45deg, rgba(255, 255, 255, 0.02) 25%, transparent 25%);
background-size: 60px 60px, 60px 60px, 40px 40px, 40px 40px;
background-position: 0 0, 30px 30px, 0 0, 20px 20px;
min-height: calc(100vh - 32px);
}
.hero-slider {
position: relative;
border-radius: 1rem;
overflow: hidden;
}
.slider-container {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slider-slide {
min-width: 100%;
position: relative;
}
.slider-slide img {
width: 100%;
height: 500px;
object-fit: cover;
display: block;
}
.slide-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 2rem;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
color: white;
}
.category-badge {
background-color: #ffffff;
color: #000000;
padding: 0.25rem 0.75rem;
border-radius: 0.5rem;
font-size: 0.8rem;
text-decoration: none;
margin-bottom: 1rem;
display: inline-block;
transition: all 0.3s ease;
}
.category-badge:hover {
background-color: var(--primary-accent-color);
color: #ffffff;
}
/* Dark category badge for news cards */
.category-badge.category-dark {
background-color: #000000;
color: #ffffff;
}
.category-badge.category-dark:hover {
background-color: #000000;
color: #ffffff;
}
.slide-content h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: white;
}
.slide-content p {
font-size: 1.1rem;
margin-bottom: 1.5rem;
}
.post-author {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.post-author img {
border-radius: 50%;
}
.slider-controls {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 1rem;
}
.slider-prev,
.slider-next {
background-color: var(--primary-accent-color);
border: none;
color: white;
padding: 0.75rem;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
pointer-events: auto;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
}
.slider-prev:hover,
.slider-next:hover {
background-color: var(--primary-accent-hover);
transform: scale(1.1);
}
.slider-dots {
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.5rem;
}
.slider-dot {
width: 10px;
height: 10px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
cursor: pointer;
}
.slider-dot.active {
background-color: white;
}
.hero-post-card_grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-top: 2rem;
}
.hero-post-card_item {
padding: 1.5rem;
border-radius: 0.75rem;
/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
position: relative;
border: 1px solid rgb(255 255 255 / 11%);
}
.hero-post-card_item .hero-post-card_header {
display: flex;
align-items: center;
margin-bottom: 0.75rem;
}
.hero-post-card_item .hero-post-card_index {
width: 32px;
height: 32px;
background-color: #f0f0f0;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
font-weight: 700;
color: #333;
margin: 0;
margin-right: 0.75rem;
flex-shrink: 0;
}
.hero-post-card_item .hero-post-card_meta {
margin: 0;
}
.hero-post-card_item .hero-post-card_category-badge {
background-color: var(--primary-accent-color);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 0.5rem;
font-size: 0.8rem;
text-decoration: none;
display: inline-block;
margin-bottom: 0;
}
/* Hero post card category badge colors removed - using unified white background */
.hero-post-card_item .hero-post-card_title {
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.5rem;
line-height: 1.3;
color: #333;
}
.hero-post-card_item .hero-post-card_title a {
color: #9a9a9a;
text-decoration: none;
}
.hero-post-card_item .hero-post-card_title a:hover {
color: var(--primary-accent-color);
}
.hero-post-card_item .hero-post-card_date {
font-size: 0.85rem;
color: #666;
margin-top: 0.5rem;
}
/* Top Topics Section */
.top-topics-section {
padding: 4rem 0;
}
.top-topics-section .section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.top-topics-section .section-title-wrapper {
display: flex;
align-items: center;
gap: 0.75rem;
}
.top-topics-section .section-icon {
width: 40px;
height: 40px;
background-color: #8b5cf6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.top-topics-section .section-title {
font-size: 2rem;
font-weight: 700;
color: #333;
margin: 0;
}
.top-topics-section .view-all-link {
display: flex;
align-items: center;
gap: 0.5rem;
color: #333;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.top-topics-section .view-all-link:hover {
color: var(--primary-accent-color);
}
.topics-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1rem;
}
.topic-card {
background-color: white;
border-radius: 0.75rem;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.topic-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.topic-image {
width: 100%;
height: 150px;
overflow: hidden;
}
.topic-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.topic-card:hover .topic-image img {
transform: scale(1.05);
}
/* Don't Miss Section */
.dont-miss-section {
}
.dont-miss-section .section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.dont-miss-section .section-title-wrapper {
display: flex;
align-items: center;
gap: 0.75rem;
}
.dont-miss-section .section-icon {
width: 40px;
height: 40px;
background-color: #8b5cf6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.dont-miss-section .section-title {
font-size: 2rem;
font-weight: 700;
color: #333;
margin: 0;
}
.dont-miss-section .view-all-link {
display: flex;
align-items: center;
gap: 0.5rem;
color: #333;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.dont-miss-section .view-all-link:hover {
color: var(--primary-accent-color);
}
.blog-card-regular-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.blog-card-regular {
background-color: white;
border-radius: 0.75rem;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog-card-regular:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.blog-card-regular .blog-card-regular-image {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
.blog-card-regular .blog-card-regular-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.blog-card-regular:hover .blog-card-regular-image img {
transform: scale(1.05);
}
.blog-card-regular .category-badge {
position: absolute;
top: 0.75rem;
left: 0.75rem;
z-index: 2;
}
/* Category badge colors removed - using unified white background */
.blog-card-regular-rating {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 32px;
height: 32px;
background-color: rgba(0, 0, 0, 0.8);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 600;
z-index: 2;
}
.blog-card-regular .blog-card-regular-content {
padding: 1.5rem;
}
.blog-card-regular .blog-card-regular-title {
font-size: 1.1rem;
font-weight: 700;
color: #333;
margin: 0 0 0.75rem 0;
line-height: 1.3;
}
.blog-card-regular .blog-card-regular-title a {
color: #333;
text-decoration: none;
}
.blog-card-regular .blog-card-regular-title a:hover {
color: var(--primary-accent-color);
}
.blog-card-regular .blog-card-regular-excerpt {
font-size: 0.9rem;
color: #666;
line-height: 1.5;
margin: 0 0 1rem 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-card-regular .blog-card-regular-meta {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* .blog-card-regular .author-avatar removed - no longer using avatars */
.blog-card-regular .author-name {
font-size: 0.85rem;
color: #666;
font-weight: 500;
}
.blog-card-regular .publish-date {
font-size: 0.85rem;
color: #999;
}
/* Stories for you Section */
.stories-section {
padding: 4rem 0 0 0;
}
.stories-section .section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.stories-section .section-title-wrapper {
display: flex;
align-items: center;
gap: 0.75rem;
}
.stories-section .section-icon.orange {
width: 40px;
height: 40px;
background-color: #f97316;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.stories-section .section-title {
font-size: 2rem;
font-weight: 700;
color: #333;
margin: 0;
}
.stories-section .view-all-link {
display: flex;
align-items: center;
gap: 0.5rem;
color: #333;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.stories-section .view-all-link:hover {
color: var(--primary-accent-color);
}
.stories-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.magazine_card {
border-radius: 0.75rem;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
}
.magazine_card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.magazine_card .magazine_card-image {
position: relative;
width: 100%;
height: 348px;
overflow: hidden;
}
.magazine_card .magazine_card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.magazine_card:hover .magazine_card-image img {
transform: scale(1.05);
}
.magazine_card-number {
position: absolute;
top: 1rem;
right: 1rem;
width: 32px;
height: 32px;
background-color: rgba(0, 0, 0, 0.8);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
font-weight: 700;
border: 2px solid white;
z-index: 2;
}
.magazine_card .category-badge {
z-index: 2;
}
/* Magazine card category badge colors removed - using unified white background */
.magazine_card .magazine_card-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
padding: 1.5rem;
color: white;
}
.magazine_card .magazine_card-title {
font-size: 1.1rem;
font-weight: 700;
color: white;
margin: 0 0 1rem 0;
line-height: 1.3;
}
.magazine_card .magazine_card-title a {
color: white;
text-decoration: none;
}
.magazine_card .magazine_card-title a:hover {
color: var(--primary-accent-color);
}
.magazine_card .magazine_card-meta {
display: flex;
align-items: center;
gap: 0.5rem;
justify-content: space-between;
}
/* .magazine_card .author-avatar removed - no longer using avatars */
.magazine_card .author-name {
font-size: 0.85rem;
color: white;
font-weight: 500;
}
.magazine_card .publish-date {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.8);
}
.magazine_card .share-button {
background: none;
border: none;
color: white;
cursor: pointer;
padding: 0.25rem;
border-radius: 0.25rem;
transition: background-color 0.3s ease;
}
.magazine_card .share-button:hover {
background-color: rgba(255, 255, 255, 0.2);
}
/* Latest News Section */
.latest-news-section {
padding: 4rem 0;
}
.news-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 3rem;
align-items: start;
}
.main-news-column .section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.main-news-column .section-title-wrapper {
display: flex;
align-items: center;
gap: 0.75rem;
}
.main-news-column .section-icon.yellow {
width: 40px;
height: 40px;
background-color: #facc15;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.main-news-column .section-title {
font-size: 2rem;
font-weight: 700;
color: #333;
margin: 0;
}
.main-news-column .view-all-link {
display: flex;
align-items: center;
gap: 0.5rem;
color: #333;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.main-news-column .view-all-link:hover {
color: var(--primary-accent-color);
}
.news-articles {
display: flex;
flex-direction: column;
gap: 2rem;
}
.news-card {
display: flex;
gap: 1.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid #e5e7eb;
}
.news-card:last-child {
border-bottom: none;
padding-bottom: 0;
}
.news-card .news-card_image {
position: relative;
width: 280px;
border-radius: 0.75rem;
overflow: hidden;
flex-shrink: 0;
object-fit: cover;
}
.news-card .news-card_image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.news-badge {
position: absolute;
top: 1rem;
right: 1rem;
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.8rem;
font-weight: 600;
}
.news-card .news-card_content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0.5rem 0;
}
.news-card .category-badge {
position: absolute;
top: 0.75rem;
left: 0.75rem;
z-index: 2;
padding: 0.375rem 0.875rem;
margin-bottom: 0;
display: inline-block;
border-radius: 0.5rem;
font-size: 0.8rem;
text-decoration: none;
transition: all 0.3s ease;
}
/* News card category badge colors removed - using unified white background */
.news-card .news-card_title {
font-size: 1.5rem;
font-weight: 700;
color: #000;
margin: 0 0 1rem 0;
line-height: 1.2;
}
.news-card .news-card_title a {
color: #000;
text-decoration: none;
}
.news-card .news-card_title a:hover {
color: var(--primary-accent-color);
}
.news-card .news-card_excerpt {
font-size: 1rem;
color: #666;
line-height: 1.6;
margin: 0 0 1.5rem 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.news-card .news-card_meta {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: auto;
}
/* .news-card .author-avatar removed - no longer using avatars */
.news-card .author-name {
font-size: 1rem;
color: #000;
font-weight: 600;
}
.news-card .publish-date {
font-size: 1rem;
color: #666;
font-weight: 500;
}
.load-more-container {
display: flex;
justify-content: center;
margin-top: 2rem;
}
.load-more-btn {
background-color: var(--primary-accent-color);
color: white;
padding: 0.75rem 2rem;
border: none;
border-radius: 0.5rem;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
}
.load-more-btn:hover {
background-color: var(--primary-accent-hover);
}
/* Sidebar */
.news-sidebar {
background-color: white;
border-radius: 0.75rem;
padding: 2rem;
height: fit-content;
position: sticky;
top: 9rem;
}
.sidebar-header {
margin-bottom: 1.5rem;
}
.sidebar-header .sidebar-title {
font-size: 1.5rem;
font-weight: 700;
color: #333;
margin: 0;
}
.sidebar-articles {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.sidebar-card {
display: flex;
gap: 1rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid #e5e7eb;
}
.sidebar-card:last-child {
border-bottom: none;
padding-bottom: 0;
}
.sidebar-image {
width: 80px;
height: 60px;
border-radius: 0.5rem;
overflow: hidden;
flex-shrink: 0;
}
.sidebar-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sidebar-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.sidebar-content .category-badge {
padding: 0;
font-size: 0.7rem;
margin-bottom: 0;
}
.sidebar-content .category-badge:hover {
background: none;
color: var(--primary-accent-color);
}
/* Sidebar category badge colors removed - using unified white background */
.sidebar-content .sidebar-title {
font-size: 0.9rem;
font-weight: 600;
color: #333;
margin: 0;
line-height: 1.3;
}
.sidebar-content .sidebar-title a {
color: #333;
text-decoration: none;
}
.sidebar-content .sidebar-title a:hover {
color: var(--primary-accent-color);
}
.sidebar-content .sidebar-meta {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* .sidebar-content .author-avatar removed - no longer using avatars */
.sidebar-content .author-name {
font-size: 0.8rem;
color: #333;
font-weight: 500;
}
.sidebar-content .publish-date {
font-size: 0.8rem;
color: #666;
}
/* Newsletter Section */
.newsletter-section {
padding: 4rem 0;
background-color: #cb1c06;
position: relative;
background-image: radial-gradient(
circle at 25% 25%,
rgba(255, 255, 255, 0.1) 2px,
transparent 2px
),
radial-gradient(
circle at 75% 75%,
rgba(255, 255, 255, 0.08) 1.5px,
transparent 1.5px
),
radial-gradient(
circle at 50% 50%,
rgba(255, 255, 255, 0.06) 1px,
transparent 1px
);
background-size: 40px 40px, 60px 60px, 80px 80px;
background-position: 0 0, 20px 20px, 40px 40px;
}
.newsletter-section * {
color: #fff !important;
}
.newsletter-content {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.newsletter-icon {
margin-bottom: 2rem;
display: flex;
justify-content: center;
}
.newsletter-icon svg {
color: #facc15;
width: 80px;
height: 80px;
}
.newsletter-title {
font-size: 2.5rem;
font-weight: 700;
color: #333;
margin: 0 0 1rem 0;
font-family: "Inter", sans-serif;
}
.newsletter-subtitle {
font-size: 1.1rem;
color: #666;
margin: 0 0 2.5rem 0;
line-height: 1.5;
}
.newsletter-form {
width: 100%;
}
.form-row {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
}
.newsletter-input {
flex: 1;
padding: 1rem 1.25rem;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
font-size: 1rem;
background-color: #ffffff00;
color: #ffffff;
font-family: "Oxygen", sans-serif;
}
input.newsletter-input::placeholder {
color: #d3d3d3;
}
.newsletter-input:focus {
outline: none;
border-color: #ffffff;
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}
.newsletter-input::placeholder {
color: #9ca3af;
}
.newsletter-button {
background-color: #ffffff;
color: #000000 !important;
padding: 1rem 2rem;
border: none;
border-radius: 0.5rem;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
font-family: "Inter", sans-serif;
white-space: nowrap;
}
.newsletter-button:hover {
background-color: #000000;
color: #fff !important;
}
.newsletter-checkbox {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.newsletter-checkbox input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: #8b5cf6;
}
.newsletter-checkbox label {
font-size: 0.9rem;
color: #666;
cursor: pointer;
font-family: "Oxygen", sans-serif;
}
/* Responsive Design - Removed 768px breakpoint as requested */
/* Footer Styles */
.site-footer {
background-color: #000;
padding: 3rem 0 1rem;
/* margin-top: 4rem; */
}
.site-footer * {
color: white !important;
}
/* Footer link hover states - override the universal white rule */
.site-footer .footer-menu a:hover,
.site-footer .article-title a:hover,
.site-footer .footer-bottom-links a:hover,
.site-footer .footer-logo-link:hover {
color: var(--primary-accent-color) !important;
}
.footer-main {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 3rem;
margin-bottom: 2rem;
}
.footer-brand {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.footer-logo {
margin-bottom: 1.5rem;
}
.footer-logo-link {
display: inline-block;
text-decoration: none;
}
.footer-logo-image {
height: 40px;
width: auto;
max-width: 120px;
}
/* Logo text styles removed - now using SVG logo */
.footer-description {
color: #6b7280;
line-height: 1.6;
font-size: 0.95rem;
}
.social-icons {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.social-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: transform 0.3s ease;
}
.social-icon:hover {
transform: translateY(-2px);
}
.social-icon.facebook {
background-color: #1877f2;
color: white;
}
.social-icon.twitter {
background-color: #000000;
color: white;
}
.social-icon.instagram {
background: linear-gradient(
45deg,
#f09433 0%,
#e6683c 25%,
#dc2743 50%,
#cc2366 75%,
#bc1888 100%
);
color: white;
}
.social-icon.youtube {
background-color: #ff0000;
color: white;
}
.social-icon.spotify {
background-color: #1db954;
color: white;
}
.social-icon.tiktok {
background-color: #000000;
color: white;
}
.social-icon.flipboard {
background-color: #cc0000;
color: white;
}
.social-icon.linkedin {
background-color: #0077b5;
color: white;
}
.social-icon.instagram-personal {
background: linear-gradient(
45deg,
#f09433 0%,
#e6683c 25%,
#dc2743 50%,
#cc2366 75%,
#bc1888 100%
);
color: white;
}
.footer-links {
display: flex;
gap: 2rem;
}
.links-column {
flex: 1;
}
.links-title {
font-size: 1rem;
font-weight: 600;
margin-bottom: 1rem;
color: #1f2937;
font-family: "Inter", sans-serif;
}
.footer-menu {
list-style: none;
padding: 0;
margin: 0;
}
.footer-menu li {
margin-bottom: 0.5rem;
}
.footer-menu a {
color: #1f2937;
text-decoration: none;
font-size: 0.9rem;
transition: color 0.3s ease;
}
.footer-menu a:hover {
color: var(--primary-accent-color);
}
.footer-articles {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.article-preview {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.article-thumbnail {
width: 80px;
height: 80px;
border-radius: 0.5rem;
overflow: hidden;
flex-shrink: 0;
}
.article-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.article-info {
flex: 1;
}
.article-title {
margin: 0 0 0.5rem 0;
font-size: 0.9rem;
line-height: 1.4;
font-family: "Inter", sans-serif;
}
.article-title a {
color: #1f2937;
text-decoration: none;
transition: color 0.3s ease;
}
.article-title a:hover {
color: var(--primary-accent-color);
}
.article-date {
color: #9ca3af;
font-size: 0.8rem;
}
.footer-bottom {
border-top: 1px solid #e5e7eb;
padding-top: 1.5rem;
}
.footer-bottom-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.copyright {
color: #6b7280;
font-size: 0.9rem;
margin: 0;
}
.footer-bottom-links {
display: flex;
align-items: center;
gap: 0.5rem;
}
.footer-bottom-links a {
color: #6b7280;
text-decoration: none;
font-size: 0.9rem;
transition: color 0.3s ease;
}
.footer-bottom-links a:hover {
color: var(--primary-accent-color);
}
.separator {
color: #d1d5db;
}
.scroll-to-top {
width: 40px;
height: 40px;
background-color: var(--primary-accent-color);
border: none;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.3s ease;
}
.scroll-to-top:hover {
background-color: var(--primary-accent-hover);
}
.scroll-to-top svg {
color: #ffffff;
width: 1.5rem;
height: 1.5rem;
}
#wpadminbar + .site-header {
top: 32px;
}
/* Archive Pages (Category & Tag) */
.archive-header {
margin-top: 100px;
margin-bottom: 3rem;
}
.breadcrumb {
margin-bottom: 0.5rem;
font-size: 0.9rem;
color: #666;
}
.breadcrumb a {
color: #666;
text-decoration: none;
transition: color 0.3s ease;
}
.breadcrumb a:hover {
color: var(--primary-accent-color);
}
.breadcrumb .separator {
margin: 0 0.5rem;
color: #999;
}
.breadcrumb .current {
font-weight: 500;
color: #333;
}
.archive-title-wrapper {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 1rem;
flex-wrap: wrap;
gap: 1rem;
}
.archive-title {
font-size: 3rem;
font-weight: 700;
color: #333;
margin: 0;
line-height: 1.2;
}
.count-number {
font-size: 2.5rem;
font-weight: 700;
color: #333;
line-height: 1;
}
.count-label {
font-size: 0.75rem;
font-weight: 600;
color: #666;
letter-spacing: 0.05em;
margin-top: 0.25rem;
}
.archive-description {
color: #666;
font-size: 1rem;
line-height: 1.6;
max-width: 60ch;
}
.no-posts {
text-align: center;
padding: 3rem 0;
color: #666;
}
.no-posts h2 {
margin-bottom: 1rem;
color: #333;
}
/* Pagination */
.pagination {
display: flex;
justify-content: center;
gap: 0.5rem;
margin: 3rem 0;
}
.pagination .page-numbers {
padding: 0.5rem 1rem;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 0.375rem;
color: #374151;
text-decoration: none;
transition: all 0.3s ease;
}
.pagination .page-numbers:hover {
background: var(--primary-accent-hover);
border-color: var(--primary-accent-hover);
color: white;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(203, 6, 6, 0.2);
}
.pagination .page-numbers.current {
background: var(--primary-accent-color);
border-color: var(--primary-accent-color);
color: white;
}
/* Archive Section Styles */
.section-archive {
padding-bottom: 4rem;
}
/* Responsive Design */
@media (max-width: 767px) {
.archive-title-wrapper {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.archive-title {
font-size: 2rem;
}
.count-number {
font-size: 1.75rem;
}
.posts-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.archive-count {
align-items: flex-start;
}
}
/* About Us Page Styles */
.about-page {
overflow-x: hidden;
}
/* Enhanced Hero Section - gradient overlay removed for clean design */
/* Hero Section */
.about-hero {
position: relative;
display: flex;
align-items: center;
background: #000000;
overflow: hidden;
padding: 10rem 0;
}
/* Floating elements and animations removed for clean, professional look */
.hero-content {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.hero-title {
font-size: 4rem;
font-weight: 700;
line-height: 1.1;
margin-bottom: 2rem;
color: #fff;
}
.title-line {
display: block;
}
.title-line.highlight {
/* Highlight styling removed for clean text appearance */
}
.title-line.location {
font-size: 1.5rem;
opacity: 0.9;
font-weight: 400;
}
.hero-subtitle {
font-size: 1.2rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
max-width: 500px;
}
.hero-image {
display: flex;
justify-content: center;
}
.image-frame {
position: relative;
padding: 20px;
background: #fff;
border-radius: 2rem;
transform: rotate(-3deg);
transition: transform 0.3s ease;
}
.image-frame:hover {
transform: rotate(0deg) scale(1.05);
}
.lisa-portrait {
width: 300px;
height: 400px;
object-fit: cover;
border-radius: 1.5rem;
display: block;
}
.frame-decoration {
position: absolute;
top: -10px;
right: -10px;
width: 40px;
height: 40px;
background: var(--primary-accent-color);
border-radius: 50%;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
/* Journey Timeline */
.journey-timeline {
padding: 8rem 0;
background: #000000;
position: relative;
border-top: 1px solid rgb(255 255 255 / 10%);
background-image: radial-gradient(
circle at 25% 25%,
rgba(255, 255, 255, 0.08) 2px,
transparent 2px
),
radial-gradient(
circle at 75% 75%,
rgba(255, 255, 255, 0.06) 1.5px,
transparent 1.5px
),
radial-gradient(
circle at 50% 50%,
rgba(255, 255, 255, 0.04) 1px,
transparent 1px
);
background-size: 50px 50px, 70px 70px, 90px 90px;
background-position: 0 0, 25px 25px, 45px 45px;
}
/* Journey timeline background overlay removed for clean design */
.section-header {
text-align: center;
margin-bottom: 5rem;
}
.section-title {
font-size: 3rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 1rem;
}
.section-subtitle {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.8);
max-width: 600px;
margin: 0 auto;
}
.timeline {
position: relative;
max-width: 1000px;
margin: 0 auto;
}
.timeline::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 100%;
background: linear-gradient(
to bottom,
var(--primary-accent-color),
var(--primary-accent-hover)
);
border-radius: 2px;
}
.timeline-item {
position: relative;
display: flex;
justify-content: flex-end;
padding-right: calc(50% + 2rem);
margin-bottom: 4rem;
}
.timeline-item:nth-child(even) {
justify-content: flex-start;
padding-right: 0;
padding-left: calc(50% + 2rem);
}
.timeline-item:nth-child(even) .timeline-content {
text-align: right;
}
.timeline-icon {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 80px;
background: linear-gradient(
135deg,
var(--primary-accent-color),
var(--primary-accent-hover)
);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
box-shadow: 0 8px 25px rgba(203, 6, 6, 0.3);
}
.timeline-icon .icon {
width: 2.5rem;
height: 2.5rem;
color: #fff;
}
.timeline-content {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 2rem;
border-radius: 1rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
max-width: 450px;
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-left: 4px solid transparent;
}
.content-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
}
.timeline-number {
font-size: 1rem;
font-weight: 700;
color: var(--primary-accent-color);
background: linear-gradient(
135deg,
var(--primary-accent-color),
var(--primary-accent-hover)
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
opacity: 0.8;
}
.timeline-content:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
border-left-color: var(--primary-accent-color);
background: rgba(255, 255, 255, 0.08);
}
.timeline-content h3 {
font-size: 1.5rem;
font-weight: 600;
color: #ffffff;
margin-bottom: 1rem;
}
.timeline-content p {
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
margin-bottom: 1.5rem;
}
.timeline-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.tag {
background: linear-gradient(
135deg,
var(--primary-accent-color),
var(--primary-accent-hover)
);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.8rem;
font-weight: 500;
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Philosophy Section */
.philosophy-section {
padding: 8rem 0;
background: #ffffff;
color: #1a202c;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.philosophy-content {
display: flex;
flex-direction: column;
gap: 4rem;
align-items: center;
text-align: center;
}
.philosophy-text h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 2rem;
color: #1a202c;
position: relative;
}
.philosophy-text h2::after {
content: "";
position: absolute;
bottom: -0.5rem;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(
135deg,
var(--primary-accent-color),
var(--primary-accent-hover)
);
border-radius: 2px;
}
.philosophy-text {
max-width: 800px;
margin-bottom: 2rem;
}
.philosophy-quote {
font-size: 1.5rem;
font-style: italic;
line-height: 1.6;
margin: 2rem 0;
padding: 3rem 2rem;
/* background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); */
border-radius: 10px;
color: #1a202c;
position: relative;
/* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); */
border: 2px solid rgb(0 0 0 / 4%);
}
.philosophy-quote::before {
content: '"';
position: absolute;
top: 1rem;
left: 50%;
transform: translateX(-50%);
font-size: 4rem;
color: var(--primary-accent-color);
opacity: 0.2;
font-family: serif;
line-height: 1;
}
.philosophy-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
max-width: 1200px;
width: 100%;
}
/* Creative staggered layout */
.philosophy-card:nth-child(1) {
transform: translateY(-2rem);
}
.philosophy-card:nth-child(3) {
transform: translateY(-2rem);
}
.philosophy-card:nth-child(2) {
transform: translateY(2rem);
}
.philosophy-card {
background: #ffffff;
padding: 2.5rem 2rem;
border-radius: 1rem;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
text-align: center;
position: relative;
overflow: hidden;
}
.philosophy-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(
135deg,
var(--primary-accent-color),
var(--primary-accent-hover)
);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.philosophy-card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: 0 25px 35px -5px rgba(0, 0, 0, 0.15),
0 15px 15px -5px rgba(0, 0, 0, 0.08);
border-color: var(--primary-accent-color);
}
/* Maintain staggered positions on hover */
.philosophy-card:nth-child(1):hover {
transform: translateY(-3rem) scale(1.02);
}
.philosophy-card:nth-child(2):hover {
transform: translateY(1rem) scale(1.02);
}
.philosophy-card:nth-child(3):hover {
transform: translateY(-3rem) scale(1.02);
}
.philosophy-card:hover::before {
transform: scaleX(1);
}
.card-icon {
margin-bottom: 1.5rem;
}
.card-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: linear-gradient(
135deg,
var(--primary-accent-color),
var(--primary-accent-hover)
);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.philosophy-card:hover .card-icon {
transform: scale(1.1) rotate(5deg);
}
.card-icon svg {
width: 2.5rem;
height: 2.5rem;
color: #ffffff;
}
.philosophy-card h3 {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 1rem;
color: #1a202c;
}
.philosophy-card p {
color: #64748b;
line-height: 1.6;
font-size: 0.95rem;
}
/* Roles Section */
.roles-section {
padding: 4rem 0;
background: #fbfbfb;
}
.section-title.centered {
text-align: center;
margin-bottom: 4rem;
font-size: 2.5rem;
color: #1a202c;
}
.roles-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.role-card {
background: #fff;
padding: 2.5rem 2rem;
border-radius: 1rem;
text-align: center;
/* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); */
transition: all 0.3s ease;
border: 2px solid transparent;
}
.role-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
border-color: var(--primary-accent-color);
}
.role-card:hover .role-icon svg {
color: var(--primary-accent-hover);
transform: scale(1.1);
}
.role-icon {
margin-bottom: 1.5rem;
display: flex;
justify-content: center;
}
.role-icon svg {
width: 3.5rem;
height: 3.5rem;
color: var(--primary-accent-color);
transition: all 0.3s ease;
}
.role-card h3 {
font-size: 1.4rem;
font-weight: 600;
color: #1a202c;
margin-bottom: 1rem;
}
.role-card p {
color: #4a5568;
line-height: 1.6;
}
/* CTA Section */
.cta-section {
padding: 6rem 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
text-align: center;
color: #fff;
}
.cta-content h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
}
.cta-content p {
font-size: 1.2rem;
line-height: 1.6;
margin-bottom: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
opacity: 0.9;
}
.cta-buttons {
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
}
.btn {
padding: 1rem 2rem;
border-radius: 0.5rem;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
display: inline-block;
}
.btn-primary {
background: #ffd700;
color: #1a202c;
}
.btn-primary:hover {
background: #ffed4e;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
}
.btn-secondary {
background: transparent;
color: #fff;
border: 2px solid #fff;
}
.btn-secondary:hover {
background: #fff;
color: #667eea;
transform: translateY(-2px);
}
/* Responsive Design */
@media (max-width: 767px) {
.hero-content {
grid-template-columns: 1fr;
text-align: center;
gap: 2rem;
}
.hero-title {
font-size: 2.5rem;
}
.timeline::before {
left: 2rem;
}
.timeline-item,
.timeline-item:nth-child(even) {
justify-content: flex-start;
padding-left: 4rem;
padding-right: 0;
}
.timeline-item:nth-child(even) .timeline-content {
text-align: left;
}
.timeline-icon {
left: 2rem;
transform: none;
width: 60px;
height: 60px;
}
.philosophy-content {
gap: 3rem;
}
.philosophy-cards {
grid-template-columns: 1fr;
gap: 2rem;
}
/* Reset staggered layout on mobile */
.philosophy-card:nth-child(1),
.philosophy-card:nth-child(2),
.philosophy-card:nth-child(3) {
transform: none;
}
.philosophy-card:nth-child(1):hover,
.philosophy-card:nth-child(2):hover,
.philosophy-card:nth-child(3):hover {
transform: translateY(-8px) scale(1.02);
}
.roles-grid {
grid-template-columns: 1fr;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
}
/* Single Post Styles */
.single-post {
margin-top: 80px;
}
/* Post Header in Main Article */
.post-content .post-header-content {
padding: 2rem;
border-bottom: 1px solid #e5e7eb;
margin-bottom: 0;
}
.post-content .post-meta-top {
/* margin-bottom: 2rem; */
}
.post-content .breadcrumb {
font-size: 0.9rem;
color: #6b7280;
margin-bottom: 0;
line-height: 1.4;
}
.post-content .breadcrumb-container {
display: flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
padding: 0.75rem 1rem;
border-radius: 1rem;
border: 1px solid #e2e8f0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.post-content .breadcrumb-home {
display: flex;
align-items: center;
gap: 0.5rem;
color: #6b7280;
text-decoration: none;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
transition: all 0.3s ease;
font-weight: 500;
}
.post-content .breadcrumb-home:hover {
color: #3b82f6;
background: rgba(59, 130, 246, 0.1);
transform: translateY(-1px);
}
.post-content .breadcrumb-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.post-content .breadcrumb-separator {
display: flex;
align-items: center;
color: #cbd5e1;
opacity: 0.7;
}
.post-content .breadcrumb-separator svg {
width: 14px;
height: 14px;
}
.post-content .breadcrumb-category {
display: flex;
align-items: center;
gap: 0.5rem;
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
border-radius: 1.5rem;
transition: all 0.3s ease;
font-weight: 600;
position: relative;
overflow: hidden;
}
.post-content .breadcrumb-category::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: left 0.5s ease;
}
.post-content .breadcrumb-category:hover::before {
left: 100%;
}
.post-content .breadcrumb-category:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.post-content .category-name {
font-size: 0.9rem;
}
.post-content .category-badge {
background: rgba(255, 255, 255, 0.2);
color: white;
padding: 0.125rem 0.5rem;
border-radius: 1rem;
font-size: 0.7rem;
font-weight: 500;
margin-left: 0.25rem;
}
.post-content .post-meta-info {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9rem;
color: #6b7280;
flex-wrap: wrap;
gap: 1rem;
padding: 1rem 0;
}
.post-content .post-meta-left {
display: flex;
gap: 0.5rem;
align-items: center;
}
.post-content .post-meta-info span {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem;
background: #f8fafc;
border-radius: 2rem;
transition: all 0.3s ease;
border: 1px solid #e2e8f0;
margin-bottom: 0;
}
.post-content .post-meta-info span:hover {
background: #e2e8f0;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.post-content .meta-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
opacity: 0.7;
}
.post-content .post-date {
color: #3b82f6;
font-weight: 500;
}
.post-content .post-date .meta-icon {
color: #3b82f6;
}
.post-content .post-author {
color: #059669;
font-weight: 500;
}
.post-content .post-author .meta-icon {
color: #059669;
}
.post-content .reading-time-wrapper {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.5rem;
}
.post-content .reading-time {
color: #dc2626;
font-size: 0.85rem;
font-weight: 500;
}
.post-content .reading-time .meta-icon {
color: #dc2626;
}
.post-content .reading-progress {
display: flex;
align-items: center;
}
.post-content .reading-dots {
display: flex;
gap: 0.25rem;
align-items: center;
}
.post-content .reading-dots .dot {
width: 6px;
height: 6px;
border-radius: 4px;
background: #e2e8f0;
animation: pulse 2s infinite;
}
.post-content .reading-dots .dot:nth-child(1) {
background: #3b82f6;
animation-delay: 0s;
}
.post-content .reading-dots .dot:nth-child(2) {
background: #10b981;
animation-delay: 0.3s;
}
.post-content .reading-dots .dot:nth-child(3) {
background: #f59e0b;
animation-delay: 0.6s;
}
@keyframes pulse {
0%,
20% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.8;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.post-content .post-title {
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
color: #1f2937;
margin-bottom: 1rem;
}
.post-content .post-excerpt {
font-size: 1.2rem;
line-height: 1.6;
color: #4b5563;
margin-bottom: 2rem;
}
.post-content .post-excerpt p {
margin: 0;
}
.post-content .social-share {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.post-content .share-label {
font-weight: 500;
color: #374151;
font-size: 0.9rem;
}
.post-content .social-buttons {
display: flex;
gap: 0.25rem;
}
.post-content .social-btn {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 0.3s ease;
}
.post-content .social-btn svg {
width: 12px;
height: 12px;
}
.post-content .social-btn.facebook {
background: #1877f2;
color: white;
}
.post-content .social-btn.twitter {
background: #1da1f2;
color: white;
}
.post-content .social-btn.linkedin {
background: #0077b5;
color: white;
}
.post-content .social-btn.pinterest {
background: #bd081c;
color: white;
}
.post-content .social-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Post Content Section */
.post-content-section {
padding: 2rem 0;
background: #f9fafb;
}
.content-wrapper {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 3rem;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.post-content {
background: #fff;
border-radius: 1rem;
overflow: hidden;
/* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); */
}
.featured-image {
margin-bottom: 2rem;
}
.post-featured-img {
width: 100%;
height: 400px;
object-fit: cover;
display: block;
}
.post-body {
padding: 2rem;
line-height: 1.8;
color: #374151;
}
.post-body h1,
.post-body h2,
.post-body h3,
.post-body h4,
.post-body h5,
.post-body h6 {
color: #1f2937;
font-weight: 600;
margin: 2rem 0 1rem 0;
line-height: 1.3;
}
.post-body h2 {
font-size: 1.8rem;
}
.post-body h3 {
font-size: 1.5rem;
}
.post-body p {
margin-bottom: 1.5rem;
font-size: 1.1rem;
}
.post-body blockquote {
border-left: 4px solid var(--primary-accent-color);
margin: 2rem 0;
padding: 1rem 2rem;
background: #f8fafc;
font-style: italic;
border-radius: 0 0.5rem 0.5rem 0;
}
.post-body ul,
.post-body ol {
margin: 1.5rem 0;
padding-left: 2rem;
}
.post-body li {
margin-bottom: 0.5rem;
}
.post-body img {
max-width: 100%;
height: auto;
border-radius: 0.5rem;
margin: 1.5rem 0;
}
/* Post Tags */
.post-tags {
padding: 2rem;
border-top: 1px solid #e5e7eb;
}
.post-tags h4 {
margin: 0 0 1rem 0;
color: #374151;
font-size: 1.1rem;
}
.tag-list a {
display: inline-block;
background: #f3f4f6;
color: #374151;
padding: 0.5rem 1rem;
border-radius: 1.5rem;
text-decoration: none;
font-size: 0.9rem;
margin: 0.25rem 0.5rem 0.25rem 0;
transition: all 0.3s ease;
}
.tag-list a:hover {
background: var(--primary-accent-color);
color: white;
}
/* Author Bio */
.author-bio {
padding: 2rem;
background: var(--primary-accent-color);
display: flex;
gap: 1.5rem;
align-items: flex-start;
color: #fff;
}
.author-bio * {
color: #fff !important;
}
/* .author-avatar img removed - no longer using avatars */
.author-label {
margin: 0 0 0.5rem 0;
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.author-info h4 {
margin: 0 0 0.5rem 0;
color: #1f2937;
font-size: 1.2rem;
}
.author-description {
color: #4b5563;
line-height: 1.6;
margin-bottom: 1rem;
}
.author-social {
display: flex;
gap: 1rem;
}
.author-social-link {
color: #3b82f6;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.author-social-link:hover {
color: #1d4ed8;
}
/* Right Sidebar */
.post-sidebar {
display: flex;
flex-direction: column;
gap: 2rem;
position: sticky;
top: 120px;
height: fit-content;
}
.sidebar-widget {
background: #fff;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
/* Social Follow Buttons */
.social-follow-buttons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
padding: 1.5rem;
}
.social-follow-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1rem 0.5rem;
border-radius: 12px;
text-decoration: none;
transition: all 0.3s ease;
min-height: 80px;
text-align: center;
border: 2px solid #e5e7eb;
background: #fff;
}
.social-follow-btn svg {
width: 24px;
height: 24px;
margin-bottom: 0.5rem;
}
.social-follow-btn span {
font-size: 0.8rem;
font-weight: 600;
color: #1f2937;
margin-bottom: 0.25rem;
}
.social-follow-btn small {
font-size: 0.7rem;
color: #6b7280;
}
.social-follow-btn.facebook {
color: #1877f2;
border-color: #1877f2;
}
.social-follow-btn.twitter {
color: #1da1f2;
border-color: #1da1f2;
}
.social-follow-btn.pinterest {
color: #bd081c;
border-color: #bd081c;
}
.social-follow-btn.youtube {
color: #ff0000;
border-color: #ff0000;
}
.social-follow-btn.spotify {
color: #1db954;
border-color: #1db954;
}
.social-follow-btn.linkedin {
color: #0077b5;
border-color: #0077b5;
}
.social-follow-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.social-follow-btn:hover.facebook {
background: #1877f2;
color: white;
}
.social-follow-btn:hover.facebook span,
.social-follow-btn:hover.facebook small {
color: white;
}
.social-follow-btn:hover.twitter {
background: #1da1f2;
color: white;
}
.social-follow-btn:hover.twitter span,
.social-follow-btn:hover.twitter small {
color: white;
}
.social-follow-btn:hover.pinterest {
background: #bd081c;
color: white;
}
.social-follow-btn:hover.pinterest span,
.social-follow-btn:hover.pinterest small {
color: white;
}
.social-follow-btn:hover.youtube {
background: #ff0000;
color: white;
}
.social-follow-btn:hover.youtube span,
.social-follow-btn:hover.youtube small {
color: white;
}
.social-follow-btn:hover.spotify {
background: #1db954;
color: white;
}
.social-follow-btn:hover.spotify span,
.social-follow-btn:hover.spotify small {
color: white;
}
.social-follow-btn:hover.linkedin {
background: #0077b5;
color: white;
}
.social-follow-btn:hover.linkedin span,
.social-follow-btn:hover.linkedin small {
color: white;
}
.widget-title {
background: #f8fafc;
padding: 1.5rem;
margin: 0;
font-size: 1.1rem;
font-weight: 600;
color: #1f2937;
border-bottom: 1px solid #e5e7eb;
}
.related-posts,
.popular-posts {
padding: 1rem;
}
.related-post-item,
.popular-post-item {
display: flex;
gap: 1rem;
padding: 1rem;
border-radius: 0.5rem;
transition: background-color 0.3s ease;
}
.related-post-item:hover,
.popular-post-item:hover {
background: #f8fafc;
}
.related-post-thumb,
.popular-post-thumb {
flex-shrink: 0;
}
.related-post-thumb img,
.popular-post-thumb img {
width: 80px;
height: 60px;
object-fit: cover;
border-radius: 0.5rem;
}
.related-post-content,
.popular-post-content {
flex: 1;
}
.related-post-title,
.popular-post-title {
margin: 0 0 0.5rem 0;
font-size: 0.9rem;
line-height: 1.3;
}
.related-post-title a,
.popular-post-title a {
color: #1f2937;
text-decoration: none;
transition: color 0.3s ease;
}
.related-post-title a:hover,
.popular-post-title a:hover {
color: var(--primary-accent-color);
}
.related-post-date,
.popular-post-date {
font-size: 0.8rem;
color: #6b7280;
}
/* Comments Section */
.comments-section {
padding: 3rem 0;
background: #fff;
}
.comments-wrapper {
max-width: 800px;
margin: 0 auto;
}
/* More Posts Section */
.more-posts-section {
padding: 4rem 0;
background: #f9fafb;
}
.more-posts-section .section-title {
text-align: center;
margin-bottom: 3rem;
font-size: 2rem;
color: #1f2937;
}
.more-posts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.more-articles-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.more-post-card {
background: #fff;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.more-post-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}
.more-post-image {
position: relative;
height: 200px;
overflow: hidden;
}
.more-post-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.more-post-card:hover .more-post-image img {
transform: scale(1.05);
}
.more-post-category {
position: absolute;
top: 1rem;
left: 1rem;
background: #3b82f6;
color: white;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.8rem;
font-weight: 500;
}
.more-post-content {
padding: 1.5rem;
}
.more-post-title {
margin: 0 0 1rem 0;
font-size: 1.1rem;
line-height: 1.4;
}
.more-post-title a {
color: #1f2937;
text-decoration: none;
transition: color 0.3s ease;
}
.more-post-title a:hover {
color: var(--primary-accent-color);
}
.more-post-excerpt {
color: #6b7280;
line-height: 1.6;
margin-bottom: 1rem;
font-size: 0.9rem;
}
.more-post-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8rem;
color: #9ca3af;
}
.more-post-author {
font-weight: 500;
}
/* More News Section Styling */
.more-news-posts {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.news-post-item {
display: flex;
gap: 1rem;
align-items: flex-start;
padding-bottom: 1.5rem;
border-bottom: 1px solid #f3f4f6;
transition: background-color 0.3s ease;
}
.news-post-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.news-post-item.featured-news {
flex-direction: column;
gap: 1rem;
}
.news-post-item.featured-news .news-post-thumb {
width: 100%;
height: 150px;
}
.news-post-item.regular-news .news-post-thumb {
width: 80px;
height: 80px;
flex-shrink: 0;
}
.news-post-thumb {
border-radius: 8px;
overflow: hidden;
position: relative;
}
.news-post-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.news-post-category {
position: absolute;
top: 0.5rem;
left: 0.5rem;
background: var(--primary-accent-color);
color: white;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.7rem;
font-weight: 500;
text-transform: uppercase;
}
.news-post-content {
flex: 1;
}
.news-post-title {
margin: 0 0 0.75rem 0;
font-size: 0.95rem;
line-height: 1.4;
font-weight: 600;
}
.news-post-title a {
color: #1f2937;
text-decoration: none;
transition: color 0.3s ease;
}
.news-post-title a:hover {
color: var(--primary-accent-color);
}
.news-post-meta {
display: flex;
gap: 0.75rem;
font-size: 0.75rem;
color: #9ca3af;
}
.news-author {
font-weight: 500;
}
.featured-news .news-post-title {
font-size: 1.1rem;
font-weight: 700;
}
.featured-news .news-post-meta {
font-size: 0.8rem;
}
/* Modern Contact Page */
.contact-page-modern {
margin-top: 80px;
}
/* Simple Hero */
.contact-hero-simple {
padding: 5rem 0;
background: #000000;
}
.hero-content-center {
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.contact-title-simple {
font-size: 3rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 1rem;
line-height: 1.1;
}
.contact-subtitle-simple {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
margin: 0;
}
/* Contact Options */
.contact-options {
padding: 3rem 0;
background: #f8fafc;
}
.options-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
max-width: 900px;
margin: 0 auto;
}
.contact-option {
background: white;
padding: 2rem;
border-radius: 1rem;
text-align: center;
text-decoration: none;
color: inherit;
transition: all 0.3s ease;
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.contact-option:hover {
transform: translateY(-4px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border-color: #e5e7eb;
}
.contact-option.active {
border-color: #3b82f6;
background: #fafbff;
}
.option-icon {
width: 60px;
height: 60px;
margin: 0 auto 1rem auto;
background: #f1f5f9;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.contact-option:hover .option-icon {
background: #3b82f6;
color: white;
}
.contact-option.active .option-icon {
background: #3b82f6;
color: white;
}
.option-icon svg {
width: 24px;
height: 24px;
}
.contact-option h3 {
font-size: 1.3rem;
font-weight: 600;
color: #1f2937;
margin-bottom: 0.5rem;
}
.contact-option p {
color: #6b7280;
margin-bottom: 1rem;
font-size: 0.95rem;
}
.option-action {
color: #3b82f6;
font-weight: 500;
font-size: 0.9rem;
}
/* Modern Contact Form */
.contact-form-modern {
padding: 3rem 0;
background: white;
}
.form-container-modern {
max-width: 600px;
margin: 0 auto;
}
.form-header-simple {
text-align: center;
margin-bottom: 3rem;
}
.form-header-simple h2 {
font-size: 2rem;
font-weight: 700;
color: #1f2937;
margin-bottom: 0.5rem;
}
.form-header-simple p {
color: #6b7280;
font-size: 1rem;
}
/* Modern Form Fields */
.modern-contact-form {
display: flex;
flex-direction: column;
gap: 2rem;
}
.form-group-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.form-group {
position: relative;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 1rem 1rem 1rem 1rem;
border: 2px solid #e5e7eb;
border-radius: 0.5rem;
font-size: 1rem;
background: #f9fafb;
transition: all 0.3s ease;
box-sizing: border-box;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: #000;
background: white;
box-shadow: 0 0 0 3px rgba(203, 6, 6, 0.1);
}
.form-group label {
position: absolute;
top: -8px;
left: 12px;
background: white;
padding: 0 8px;
font-size: 0.8rem;
font-weight: 500;
color: #6b7280;
}
.form-group input:focus + label,
.form-group textarea:focus + label {
color: #3b82f6;
}
.form-group textarea {
resize: vertical;
min-height: 120px;
font-family: inherit;
}
/* Submit Button */
.submit-button-modern {
background: var(--primary-accent-color);
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 0.5rem;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: all 0.3s ease;
margin-top: 1rem;
}
.submit-button-modern:hover {
background: var(--primary-accent-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(203, 6, 6, 0.3);
}
.send-icon {
width: 18px;
height: 18px;
}
/* CF7 Instructions */
.cf7-instructions {
margin-top: 2rem;
padding: 1rem;
background: #f8fafc;
border-radius: 0.5rem;
border: 1px solid #e5e7eb;
}
.cf7-instructions summary {
cursor: pointer;
font-weight: 500;
color: #374151;
padding: 0.5rem;
}
.cf7-instructions ol {
margin-top: 1rem;
padding-left: 1.5rem;
color: #6b7280;
}
.cf7-instructions li {
margin-bottom: 0.5rem;
}
/* Quick Info */
.quick-info {
padding: 3rem 0;
background: #f8fafc;
border-top: 1px solid #e5e7eb;
}
.info-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
max-width: 800px;
margin: 0 auto;
}
.info-item {
text-align: center;
padding: 1.5rem;
}
.info-item h4 {
font-size: 1.1rem;
font-weight: 600;
color: #1f2937;
margin-bottom: 0.5rem;
}
.info-item p {
color: #6b7280;
margin: 0;
}
/* Responsive Design */
@media (max-width: 767px) {
.post-title {
font-size: 1.8rem;
}
.content-wrapper {
grid-template-columns: 1fr;
gap: 2rem;
}
.post-sidebar {
position: relative;
top: auto;
}
.social-follow-buttons {
grid-template-columns: repeat(2, 1fr);
}
.social-follow-btn {
min-height: 60px;
padding: 0.75rem;
}
.social-follow-btn svg {
width: 20px;
height: 20px;
}
.news-post-item.featured-news .news-post-thumb {
height: 120px;
}
/* Modern Contact Page Mobile */
.contact-title-simple {
font-size: 2rem;
}
.options-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.form-group-row {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.info-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.post-meta-info {
flex-direction: column;
gap: 0.5rem;
}
.social-share {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.author-bio {
flex-direction: column;
text-align: center;
}
.more-posts-grid {
grid-template-columns: 1fr;
}
.more-articles-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.post-body {
padding: 1.5rem;
}
.post-featured-img {
height: 250px;
}
}
/* Contact Page Styles */
.contact-page-modern {
background: #fafafa;
min-height: 100vh;
}
/* Simple Hero Section */
.hero-content-center {
max-width: 600px;
margin: 0 auto;
}
/* Contact Options */
.contact-options {
padding: 4rem 0;
background: white;
}
.options-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.contact-option {
background: white;
border: 2px solid #f1f5f9;
border-radius: 16px;
padding: 2rem;
text-align: center;
text-decoration: none;
color: #1e293b;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.contact-option:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
border-color: #667eea;
}
.contact-option.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-color: transparent;
}
.option-icon {
width: 60px;
height: 60px;
margin: 0 auto 1.5rem auto;
display: flex;
align-items: center;
justify-content: center;
background: #f8fafc;
border-radius: 50%;
transition: all 0.3s ease;
}
.contact-option.active .option-icon {
background: rgba(255, 255, 255, 0.2);
}
.option-icon svg {
width: 28px;
height: 28px;
color: #667eea;
}
.contact-option.active .option-icon svg {
color: white;
}
.contact-option h3 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.contact-option p {
font-size: 1rem;
opacity: 0.8;
margin-bottom: 1rem;
}
.option-action {
font-size: 0.9rem;
font-weight: 500;
opacity: 0.7;
}
/* Contact Form */
.contact-form-modern {
padding: 4rem 0;
background: #ffffff;
}
.form-container-modern {
max-width: 600px;
margin: 0 auto;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 20px;
padding: 3rem;
/* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); */
}
.form-header-simple {
text-align: center;
margin-bottom: 2rem;
}
.form-header-simple h2 {
font-size: 2rem;
font-weight: 700;
color: #1f2937;
margin-bottom: 0.5rem;
}
.form-header-simple p {
color: #6b7280;
font-size: 1rem;
margin: 0;
}
/* Modern Form Styles */
.modern-contact-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.form-group-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.form-group {
position: relative;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 1rem 1rem 1rem 1rem;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 1rem;
background: #fafafa;
transition: all 0.3s ease;
outline: none;
}
.form-group input:focus,
.form-group textarea:focus {
border-color: #000;
background: white;
box-shadow: 0 0 0 3px rgba(203, 6, 6, 0.1);
}
.form-group label {
position: absolute;
top: 1rem;
left: 1rem;
color: #64748b;
font-size: 0.9rem;
font-weight: 500;
pointer-events: none;
transition: all 0.3s ease;
background: transparent;
padding: 0 0.25rem;
}
.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label {
top: -0.5rem;
left: 0.75rem;
font-size: 0.75rem;
color: #667eea;
background: white;
padding: 0 0.5rem;
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
.submit-button-modern {
background: var(--primary-accent-color);
color: white;
border: none;
padding: 1rem 2rem;
font-size: 1rem;
font-weight: 600;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 1rem;
}
.submit-button-modern:hover {
background: var(--primary-accent-hover);
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(203, 6, 6, 0.3);
}
.send-icon {
width: 18px;
height: 18px;
}
/* CF7 Instructions */
.cf7-instructions {
margin-top: 2rem;
padding: 1rem;
background: #f8fafc;
border-radius: 8px;
font-size: 0.9rem;
}
.cf7-instructions details {
cursor: pointer;
}
.cf7-instructions summary {
font-weight: 600;
color: #667eea;
margin-bottom: 0.5rem;
}
.cf7-instructions ol {
margin: 0.5rem 0 0 1rem;
color: #64748b;
}
.cf7-instructions li {
margin-bottom: 0.25rem;
}
/* Quick Info */
.quick-info {
padding: 3rem 0;
background: white;
}
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.info-item {
padding: 1.5rem;
background: #fafafa;
border-radius: 12px;
transition: all 0.3s ease;
}
.info-item:hover {
background: #f1f5f9;
transform: translateY(-2px);
}
.info-item h4 {
font-size: 1.1rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 0.5rem;
}
.info-item p {
color: #64748b;
margin: 0;
font-size: 1rem;
}
/* Responsive Design */
@media (max-width: 767px) {
.contact-title-simple {
font-size: 2.5rem;
}
.contact-subtitle-simple {
font-size: 1.1rem;
}
.form-group-row {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.form-container-modern {
padding: 2rem;
margin: 0 1rem;
}
.options-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
@media (max-width: 479px) {
.contact-hero-simple {
padding: 4rem 0 3rem 0;
}
.contact-title-simple {
font-size: 2rem;
}
.contact-subtitle-simple {
font-size: 1rem;
}
.form-container-modern {
padding: 1.5rem;
}
.contact-option {
padding: 1.5rem;
}
}
/* Duplicate category badge styles removed - using main declaration above */
/* Specific positioning for different sections */
.slide-content .category-badge {
margin-bottom: 1rem;
}
/* Duplicate blog-card-regular category badge positioning removed - using declaration below */
.magazine_card .category-badge {
margin-bottom: 0.75rem;
}
/* Duplicate news-card category badge removed - using declaration above */
/* Duplicate sidebar category badge removed - using declaration above */
/* All category-specific colors removed - using unified white background for all category badges */
/* Enhanced Topic Cards - Make Entire Cards Clickable */
.topic-card {
position: relative;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 12px;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.topic-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.topic-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(79, 70, 229, 0.05) 0%,
rgba(236, 72, 153, 0.05) 100%
);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1;
}
.topic-card:hover::before {
opacity: 1;
}
.topic-card > * {
position: relative;
z-index: 2;
}
.topic-card a {
display: block;
text-decoration: none;
color: inherit;
width: 100%;
height: 100%;
}
.topic-card .topic-title a {
color: #1f2937;
font-weight: 600;
font-size: 1.1rem;
transition: color 0.3s ease;
}
.topic-card:hover .topic-title a {
color: var(--primary-accent-color);
}
.topic-content {
padding: 0.5rem;
text-align: center;
}
.topic-title {
font-size: 1rem;
font-weight: 600;
color: #333;
margin: 0;
}
.topic-count {
color: #6b7280;
font-size: 0.9rem;
margin-top: 0;
font-weight: 500;
}
.topic-image {
position: relative;
overflow: hidden;
}
.topic-image img {
width: 100%;
height: 150px;
object-fit: cover;
transition: transform 0.3s ease;
}
.topic-card:hover .topic-image img {
transform: scale(1.05);
}
/* Mobile responsive adjustments for category badges */
@media (max-width: 767px) {
.category-badge {
font-size: 0.7rem;
padding: 0.2rem 0.6rem;
}
.topic-card {
margin-bottom: 1rem;
}
.topic-image img {
height: 120px;
}
}
/* Search Overlay Styles */
.search-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
backdrop-filter: blur(5px);
}
.search-modal {
background: #ffffff;
padding: 2rem;
border-radius: 1rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
width: 90%;
max-width: 500px;
border: 1px solid #e5e7eb;
}
.search-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.search-header h3 {
color: #333;
margin: 0;
font-size: 1.5rem;
}
.search-close {
background: none;
border: none;
font-size: 2rem;
color: #6b7280;
cursor: pointer;
padding: 0;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.375rem;
transition: all 0.3s ease;
}
.search-close:hover {
background-color: #f1f5f9;
color: #333;
}
.search-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.search-form input[type="search"] {
padding: 1rem;
border: 2px solid #e5e7eb;
border-radius: 0.5rem;
font-size: 1rem;
background-color: #ffffff;
color: #333;
transition: border-color 0.3s ease;
}
.search-form input[type="search"]:focus {
outline: none;
border-color: var(--primary-accent-color);
box-shadow: 0 0 0 3px var(--primary-accent-light);
}
.search-form button[type="submit"] {
background-color: var(--primary-accent-color);
color: #ffffff;
border: none;
padding: 1rem;
border-radius: 0.5rem;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.search-form button[type="submit"]:hover {
background-color: var(--primary-accent-hover);
transform: translateY(-1px);
}
/* ========================================
SEARCH RESULTS PAGE STYLES
======================================== */
/* Search Form Inline */
.search-form-wrapper {
margin-top: 2rem;
}
.search-form-inline {
max-width: 500px;
margin: 0 auto;
}
.search-input-group {
position: relative;
display: flex;
align-items: center;
background: #ffffff;
border: 2px solid #e5e7eb;
border-radius: 0.75rem;
overflow: hidden;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.search-input-group:focus-within {
border-color: var(--primary-accent-color);
box-shadow: 0 0 0 3px var(--primary-accent-light);
}
.search-input {
flex: 1;
padding: 1rem 1.5rem;
border: none;
background: transparent;
font-size: 1rem;
color: #333;
outline: none;
}
.search-input::placeholder {
color: #9ca3af;
}
.search-submit {
background: var(--primary-accent-color);
border: none;
padding: 1rem 1.5rem;
color: #ffffff;
cursor: pointer;
transition: background-color 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.search-submit:hover {
background: var(--primary-accent-hover);
}
.search-submit svg {
width: 20px;
height: 20px;
}
/* Search Highlight */
.search-highlight {
background-color: #fef3c7;
color: #92400e;
padding: 0.125rem 0.25rem;
border-radius: 0.25rem;
font-weight: 600;
}
/* No Posts Styling */
.no-posts {
text-align: center;
padding: 4rem 2rem;
background: #ffffff;
border-radius: 1rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
border: 1px solid #e5e7eb;
}
.no-posts-icon {
margin-bottom: 2rem;
color: #9ca3af;
}
.no-posts h2 {
font-size: 2rem;
color: #333;
margin-bottom: 1rem;
font-weight: 700;
}
.no-posts p {
font-size: 1.125rem;
color: #6b7280;
margin-bottom: 2rem;
line-height: 1.6;
}
/* Search Suggestions */
.search-suggestions {
background: #f8fafc;
padding: 2rem;
border-radius: 0.75rem;
margin: 2rem 0;
border: 1px solid #e5e7eb;
}
.search-suggestions h3 {
font-size: 1.25rem;
color: #333;
margin-bottom: 1rem;
font-weight: 600;
}
.search-suggestions ul {
list-style: none;
padding: 0;
margin: 0;
}
.search-suggestions li {
padding: 0.5rem 0;
color: #6b7280;
position: relative;
padding-left: 1.5rem;
}
.search-suggestions li::before {
content: "•";
color: var(--primary-accent-color);
position: absolute;
left: 0;
font-weight: bold;
}
/* Popular Categories */
.popular-categories {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid #e5e7eb;
}
.popular-categories h3 {
font-size: 1.25rem;
color: #333;
margin-bottom: 1rem;
font-weight: 600;
}
.category-links {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
}
.category-link {
background: var(--primary-accent-color);
color: #ffffff;
padding: 0.5rem 1rem;
border-radius: 2rem;
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.3s ease;
display: inline-block;
}
.category-link:hover {
background: var(--primary-accent-hover);
color: #ffffff;
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
/* Archive Header Enhancements for Search */
.archive-header .archive-title {
font-size: 2.5rem;
font-weight: 700;
color: #333;
margin-bottom: 0;
line-height: 1.2;
}
.archive-count {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--primary-accent-color);
color: #ffffff;
padding: 0.5rem 1rem;
border-radius: 2rem;
font-weight: 600;
font-size: 0.875rem;
flex-direction: row;
}
.archive-count * {
color: #ffffff !important;
}
.count-number {
font-size: 1.25rem;
font-weight: 700;
}
.count-label {
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Responsive Design for Search Page */
@media (max-width: 767px) {
.archive-header .archive-title {
font-size: 2rem;
}
.search-input-group {
flex-direction: column;
}
.search-input {
border-radius: 0.5rem 0.5rem 0 0;
}
.search-submit {
border-radius: 0 0 0.5rem 0.5rem;
width: 100%;
}
.category-links {
justify-content: flex-start;
}
.no-posts {
padding: 2rem 1rem;
}
.search-suggestions {
padding: 1.5rem;
}
}
/* Search Results Grid Enhancements */
.posts-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 2rem;
margin-top: 3rem;
}
/* Duplicate styles removed - using .blog-card-regular instead */
.card-image {
position: relative;
overflow: hidden;
}
.card-image img {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform 0.3s ease;
}
/* Duplicate style removed - using .blog-card-regular:hover .blog-card-regular-image img instead */
.card-content {
padding: 1.5rem;
}
.card-title {
margin-bottom: 1rem;
}
.card-title a {
color: #333;
text-decoration: none;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.4;
transition: color 0.3s ease;
}
.card-title a:hover {
color: var(--primary-accent-color);
}
.card-excerpt {
color: #6b7280;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.card-meta {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.875rem;
color: #9ca3af;
}
/* .author-avatar removed - no longer using avatars */
.author-name {
font-weight: 500;
color: #6b7280;
}
.publish-date {
margin-left: auto;
}
/* Load More Button Enhancements */
.load-more-btn {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.load-more-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.load-more-btn:disabled::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid transparent;
border-top: 2px solid #ffffff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Smooth scrolling for load more */
.news-articles {
scroll-behavior: smooth;
}
/* Loading state for new posts */
.news-card.loading {
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.5s ease forwards;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* ========================================
HOMEPAGE RESPONSIVE DESIGN
======================================== */
/* Hero Slider Responsive */
@media (max-width: 991px) {
.hero-slider .slide-content {
padding: 2rem;
}
.hero-slider .slide-content h2 {
font-size: 2.5rem;
}
.hero-slider .slide-content p {
font-size: 1rem;
}
}
@media (max-width: 767px) {
.hero-slider {
height: 100vh;
}
.slider-container {
height: 100%;
}
.slider-slide img {
height: 100% !important;
}
.hero-slider .slide-content {
padding: 1.5rem;
/* text-align: center; */
padding-bottom: 4rem;
}
.hero-slider .slide-content h2 {
font-size: 2rem;
line-height: 1.2;
}
.hero-slider .slide-content p {
font-size: 0.9rem;
margin-bottom: 1rem;
}
.hero-slider .slide-content .slide-meta {
flex-direction: column;
gap: 0.5rem;
align-items: center;
}
.hero-slider .slide-content .slide-meta .author-info {
margin-bottom: 0.5rem;
}
}
@media (max-width: 479px) {
.hero-slider {
height: 350px;
}
.hero-slider .slide-content h2 {
font-size: 1.5rem;
}
.hero-slider .slide-content p {
font-size: 0.8rem;
}
}
/* Topics Grid Responsive */
@media (max-width: 991px) {
.topics-grid {
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
}
@media (max-width: 767px) {
.topics-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.topic-card {
min-height: 200px;
}
.topic-content {
padding: 0.75rem;
}
.topic-title {
font-size: 0.9rem;
}
.topic-count {
font-size: 0.8rem;
}
}
@media (max-width: 479px) {
.topics-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.topic-card {
min-height: 180px;
}
}
/* Don't Miss Section Responsive */
@media (max-width: 991px) {
.blog-card-regular-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
}
@media (max-width: 767px) {
.blog-card-regular-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.blog-card-regular {
flex-direction: row;
align-items: center;
}
.blog-card-regular .blog-card-regular-image {
width: 100%;
height: 300px;
flex-shrink: 0;
}
.blog-card-regular .blog-card-regular-content {
padding: 1rem;
}
.blog-card-regular .blog-card-regular-title {
font-size: 1rem;
}
.blog-card-regular .blog-card-regular-excerpt {
font-size: 0.85rem;
}
}
@media (max-width: 479px) {
.blog-card-regular {
flex-direction: column;
text-align: center;
}
.blog-card-regular .blog-card-regular-image {
width: 100%;
height: 150px;
}
}
/* Stories Section Responsive */
@media (max-width: 991px) {
.stories-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.more-articles-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
}
@media (max-width: 767px) {
.stories-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.magazine_card .magazine_card-content {
padding: 1rem;
}
.magazine_card .magazine_card-title {
font-size: 1rem;
}
.magazine_card .magazine_card-meta {
font-size: 0.8rem;
}
}
/* Latest News Section Responsive */
@media (max-width: 991px) {
.news-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.news-layout {
grid-template-columns: 1fr;
}
.news-sidebar {
display: none;
}
}
@media (max-width: 767px) {
.news-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.news-card {
flex-direction: column;
align-items: center;
}
.news-card .news-card_image {
width: 100%;
height: 100%;
flex-shrink: 0;
}
.news-card .news-card_content {
padding: 1rem;
}
.news-card .news-card_excerpt {
font-size: 0.85rem;
}
.load-more-container {
margin-top: 2rem;
}
.load-more-btn {
padding: 0.75rem 2rem;
font-size: 0.9rem;
}
}
@media (max-width: 479px) {
.news-card {
flex-direction: column;
/* text-align: center; */
}
}
/* Sidebar Responsive */
@media (max-width: 991px) {
.homepage-layout {
grid-template-columns: 1fr;
gap: 2rem;
}
.sidebar {
order: -1;
}
.sidebar-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
}
@media (max-width: 767px) {
.sidebar-content {
grid-template-columns: 1fr;
}
.sidebar-post {
flex-direction: row;
align-items: center;
}
.sidebar-post .sidebar-image {
width: 80px;
height: 60px;
flex-shrink: 0;
}
.sidebar-post .sidebar-content-text {
padding: 0.5rem;
}
.sidebar-post .sidebar-title {
font-size: 0.9rem;
}
.sidebar-post .sidebar-meta {
font-size: 0.75rem;
}
}
/* Container Responsive */
@media (max-width: 991px) {
.container {
padding: 0 1.5rem;
}
}
@media (max-width: 767px) {
.container {
padding: 0 1rem;
}
.section-title {
font-size: 2rem;
margin-bottom: 1.5rem;
}
.section-subtitle {
font-size: 1rem;
margin-bottom: 2rem;
}
}
@media (max-width: 479px) {
.container {
padding: 0 0.75rem;
}
.section-title {
font-size: 1.5rem;
}
.section-subtitle {
font-size: 0.9rem;
}
}
/* Hero Post Card Grid Responsive */
@media (max-width: 991px) {
.hero-post-card_grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.hero-post-card_item {
padding: 1rem;
}
.hero-post-card_item .hero-post-card_title {
font-size: 1rem;
line-height: 1.3;
}
.hero-post-card_item .hero-post-card_date {
font-size: 0.8rem;
}
}
@media (max-width: 479px) {
.hero-post-card_grid {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.hero-post-card_item {
padding: 0.75rem;
}
.hero-post-card_item .hero-post-card_title {
font-size: 0.9rem;
}
.hero-post-card_item .hero-post-card_date {
font-size: 0.75rem;
}
}
/* General Homepage Responsive Adjustments */
@media (max-width: 767px) {
.homepage-section {
padding: 2rem 0;
}
.homepage-section h2 {
font-size: 1.8rem;
margin-bottom: 1rem;
}
.homepage-section p {
font-size: 0.9rem;
}
}
@media (max-width: 479px) {
.homepage-section {
padding: 1.5rem 0;
}
.homepage-section h2 {
font-size: 1.5rem;
}
}
/* ========================================
FOOTER RESPONSIVE DESIGN
======================================== */
/* Footer Main Layout Responsive */
@media (max-width: 991px) {
.footer-main {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.footer-brand {
grid-column: 1 / -1;
text-align: center;
margin-bottom: 1rem;
}
.footer-logo-image {
height: 35px;
}
.footer-description {
font-size: 0.9rem;
max-width: 500px;
margin: 0 auto 1.5rem;
}
.social-icons {
justify-content: center;
}
}
@media (max-width: 767px) {
.footer-main {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.footer-brand {
grid-column: 1;
}
.footer-links {
flex-direction: column;
gap: 1.5rem;
}
.links-column {
text-align: center;
}
.links-title {
font-size: 1.1rem;
margin-bottom: 1rem;
}
.footer-menu {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.footer-menu li {
margin-bottom: 0;
}
.footer-articles {
display: none;
}
.article-preview {
/* flex-direction: column; */
text-align: left;
max-width: 300px;
margin: 0 auto;
}
.article-thumbnail {
margin-bottom: 0.75rem;
}
.article-title {
font-size: 0.9rem;
}
.article-date {
font-size: 0.8rem;
}
}
@media (max-width: 479px) {
.footer-main {
gap: 1.5rem;
}
.footer-brand {
margin-bottom: 1rem;
}
.footer-logo-image {
height: 30px;
}
.footer-description {
font-size: 0.85rem;
margin-bottom: 1rem;
}
.social-icons {
gap: 0.5rem;
}
.social-icon {
width: 35px;
height: 35px;
}
.social-icon svg {
width: 16px;
height: 16px;
}
.footer-links {
gap: 1rem;
}
.links-title {
font-size: 1rem;
}
.footer-menu a {
font-size: 0.85rem;
}
.footer-articles {
gap: 1rem;
}
.article-preview {
max-width: 250px;
}
.article-thumbnail img {
width: 60px;
height: 60px;
}
.article-title {
font-size: 0.85rem;
}
.article-date {
font-size: 0.75rem;
}
}
/* Footer Bottom Responsive */
@media (max-width: 767px) {
.footer-bottom-content {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.footer-bottom-links {
order: 2;
}
.copyright {
order: 1;
font-size: 0.85rem;
}
.scroll-to-top {
order: 3;
align-self: center;
}
}
@media (max-width: 479px) {
.footer-bottom-content {
gap: 0.75rem;
}
.copyright {
font-size: 0.8rem;
}
.footer-bottom-links {
flex-direction: column;
gap: 0.5rem;
}
.footer-bottom-links .separator {
display: none;
}
.footer-bottom-links a {
font-size: 0.85rem;
}
.scroll-to-top {
width: 40px;
height: 40px;
}
.scroll-to-top svg {
width: 14px;
height: 14px;
}
}