:root {
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6; --color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-400: #9ca3af;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-700: #374151;
--color-gray-800: #1f2937;
--color-white: #ffffff;
--color-purple-500: #a855f7;
--color-purple-600: #9333ea;
--color-purple-700: #7e22ce;
--color-pink-500: #ec4899;
--color-red-500: #ef4444;
--color-blue-500: #3b82f6;
--color-green-500: #10b981;
--color-yellow-500: #eab308;
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
--rounded-lg: 0.5rem;
--rounded-xl: 0.75rem;
--rounded-2xl: 1rem;
--rounded-3xl: 1.5rem;
--rounded-full: 9999px;
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-10: 2.5rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
--font-size-5xl: 3rem;
--line-height-tight: 1.25;
--line-height-relaxed: 1.625;
--font-normal: 400;
--font-medium: 500;
--font-bold: 700;
--font-extrabold: 800;
--z-content: 10;
--z-modal: 40;
--z-toast: 50;
--max-w-3xl: 48rem;
--max-w-6xl: 72rem;
--c-primary: var(--color-purple-500);
--c-secondary: var(--color-pink-500);
} *, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'Noto Sans Devanagari', 'Inter', sans-serif;
margin: 0;
background-color: var(--color-gray-100);
color: var(--color-gray-700);
font-weight: var(--font-normal);
line-height: var(--line-height-relaxed);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { margin: 0; line-height: var(--line-height-tight); font-weight: var(--font-extrabold); color: var(--color-gray-800); }
h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-xl); font-weight: var(--font-bold); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; background: transparent; border: none; cursor: pointer; padding: 0; }
img { max-width: 100%; height: auto; display: block; } .site-container {
max-width: var(--max-w-6xl);
margin-left: auto;
margin-right: auto;
padding-left: var(--spacing-4);
padding-right: var(--spacing-4);
}
.main-content {
display: grid;
gap: var(--spacing-16);
padding-top: var(--spacing-12);
padding-bottom: var(--spacing-12);
}
.section-container {
background-color: var(--color-white);
border-radius: var(--rounded-3xl);
box-shadow: var(--shadow-xl);
padding: var(--spacing-8);
}
@media (min-width: 768px) {
.section-container { padding: var(--spacing-12); }
h1 { font-size: var(--font-size-5xl); }
} .text-center { text-align: center; }
.gradient-text { background-image: linear-gradient(135deg, var(--color-purple-500), var(--color-pink-500)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.purple-pink-gradient { background: linear-gradient(135deg, var(--color-purple-500), var(--color-pink-500)); }
.card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card-hover:hover { transform: translateY(-0.25rem); box-shadow: var(--shadow-2xl); }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-2);
padding: var(--spacing-3) var(--spacing-8);
font-weight: var(--font-bold);
border-radius: var(--rounded-full);
box-shadow: var(--shadow-lg);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn:hover { transform: scale(1.05); box-shadow: var(--shadow-2xl); }
.btn-primary { background-color: var(--color-white); color: var(--color-purple-600); }
.btn-secondary { background-color: var(--color-purple-700); color: var(--color-white); }
.btn-gradient { color: var(--color-white); } .site-header {
color: var(--color-white);
padding: var(--spacing-12) 0;
border-bottom-left-radius: var(--rounded-3xl);
border-bottom-right-radius: var(--rounded-3xl);
box-shadow: var(--shadow-xl);
}
.hero-content {
display: grid;
gap: var(--spacing-4);
justify-items: center;
}
.site-header h1 { color: var(--color-white); }
.hero-content p {
color: var(--color-gray-100);
max-width: var(--max-w-3xl);
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-4);
}
.hero-buttons {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
}
@media (min-width: 640px) {
.hero-buttons { flex-direction: row; }
.site-header { padding: var(--spacing-16) 0; }
} .section-header {
text-align: center;
margin-bottom: var(--spacing-10);
}
.section-header p {
color: var(--color-gray-600);
margin-top: var(--spacing-4);
max-width: var(--max-w-3xl);
margin-left: auto;
margin-right: auto;
} h2 .shayari-heading {
background-image: linear-gradient(135deg, var(--color-purple-500), var(--color-pink-500)); 
-webkit-background-clip: text;
background-clip: text;
color: transparent;
} .shayari-grid {
display: grid;
gap: var(--spacing-6);
}
@media (min-width: 768px) { .shayari-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .shayari-grid { grid-template-columns: repeat(3, 1fr); } }
.shayari-card {
display: flex;
flex-direction: column;
background-color: var(--color-gray-50);
padding: var(--spacing-6);
border-radius: var(--rounded-xl);
box-shadow: var(--shadow-md);
position: relative;
overflow: hidden;
}
.shayari-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px; background: linear-gradient(135deg, var(--c-primary), var(--c-secondary));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.shayari-card:hover::before { transform: scaleX(1); }
.shayari-card h3 { margin-bottom: var(--spacing-2); }
.shayari-text {
font-size: var(--font-size-lg);
font-weight: var(--font-medium);
color: var(--color-gray-800);
font-style: italic;
margin-bottom: var(--spacing-4);
flex-grow: 1;
}
.english-translation {
font-size: var(--font-size-sm);
color: var(--color-gray-500);
margin-bottom: var(--spacing-4);
font-style: italic;
}
.shayari-author { font-size: var(--font-size-sm);
color: var(--color-gray-600);
text-align: right;
margin-top: -var(--spacing-2); margin-bottom: var(--spacing-4);
}
.share-buttons {
display: flex;
justify-content: flex-end;
align-items: center;
gap: var(--spacing-3);
color: var(--color-gray-600); 
}
.share-buttons button {
background-color: transparent; }
.share-buttons button:hover {
background-color: transparent; }
.share-buttons button svg, .share-buttons a svg {
font-size: 1.1rem;
color: var(--color-gray-600);
transition: color 0.2s ease, transform 0.2s ease;
}
.share-buttons button:hover svg, .share-buttons a:hover svg {
transform: scale(1.2);
color: var(--color-purple-600);
} #ai-shayari-form {
max-width: 600px;
margin: 0 auto;
display: grid;
gap: var(--spacing-4);
}
#ai-input {
width: 100%;
padding: var(--spacing-4);
border-radius: var(--rounded-xl);
border: 2px solid var(--color-gray-300);
resize: vertical;
font-family: inherit;
font-size: var(--font-size-base);
transition: border-color 0.2s, box-shadow 0.2s;
}
#ai-input:focus {
outline: none;
border-color: var(--color-purple-500);
box-shadow: 0 0 0 3px var(--color-purple-500, 0.2);
}
#ai-generate-btn { justify-self: end; }
#ai-output {
background-color: var(--color-gray-50);
padding: var(--spacing-6);
border-radius: var(--rounded-xl);
box-shadow: var(--shadow-inner);
min-height: 100px;
display: none;
flex-direction: column; align-items: center;
justify-content: center;
margin-bottom: var(--spacing-4);
}
#ai-loading { align-items: center; gap: var(--spacing-4); font-size: var(--font-size-xl); font-weight: var(--font-medium); color: var(--color-gray-600); }
#ai-loading .spinner { font-size: var(--font-size-4xl); color: var(--color-purple-500); } #ai-shayari-result p { margin-bottom: var(--spacing-2);
text-align: center;
width: 100%;
}
#ai-shayari-result p:last-child {
margin-bottom: 0;
}
#ai-shayari-result p strong { font-weight: var(--font-bold);
} .category-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-4);
}
@media (min-width: 768px) { .category-grid { grid-template-columns: repeat(6, 1fr); } }
.category-card {
display: grid;
justify-items: center;
gap: var(--spacing-2);
background-color: var(--color-gray-50);
padding: var(--spacing-4);
border-radius: var(--rounded-xl);
box-shadow: var(--shadow-lg);
text-align: center;
position: relative;
overflow: hidden;
}
.category-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px; background: linear-gradient(135deg, var(--c-primary), var(--c-secondary));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.category-card:hover::before { transform: scaleX(1); }
.category-card .category-icon-svg { font-size: var(--font-size-2xl); 
color: var(--c-primary); width: 1em; height: 1em;
}
.category-card .category-icon-img { width: 32px;
height: 32px;
object-fit: contain; }
.category-card h3 { font-size: var(--font-size-sm); font-weight: var(--font-bold); }
.section-footer { text-align: center; margin-top: var(--spacing-12); } .btn-gradient {
position: relative;
overflow: hidden;
z-index: 1;
}
.btn-gradient::before {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(135deg, var(--color-white), var(--color-gray-100));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
z-index: -1;
}
.btn-gradient:hover::before { transform: scaleX(1); }
.btn-gradient svg { width: 1em;
height: 1em;
} .pinterest-grid {
column-count: 1;
column-gap: var(--spacing-4);
}
@media (min-width: 640px) { .pinterest-grid { column-count: 2; } }
@media (min-width: 1024px) { .pinterest-grid { column-count: 3; } }
.gallery-item {
break-inside: avoid-column;
margin-bottom: var(--spacing-4);
border-radius: var(--rounded-xl);
overflow: hidden;
box-shadow: var(--shadow-lg);
cursor: pointer;
transition: transform 0.3s ease;
}
.gallery-item:hover { transform: scale(1.03); } .video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; height: 0;
overflow: hidden;
border-radius: var(--rounded-xl); box-shadow: var(--shadow-xl); background-color: var(--color-gray-800); }
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.adsense-container-bottom {
margin-top: var(--spacing-16);
} .faq-container {
max-width: var(--max-w-3xl);
margin: 0 auto;
display: grid;
gap: var(--spacing-4);
}
.faq-item {
background-color: var(--color-gray-50);
border-radius: var(--rounded-xl);
box-shadow: var(--shadow-md);
overflow: hidden;
}
.faq-button {
width: 100%;
text-align: left;
padding: var(--spacing-6);
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--font-size-lg);
font-weight: var(--font-medium); 
color: var(--color-gray-800); transition: background-color 0.3s ease;
}
.faq-button:hover { 
background-color: var(--color-gray-100); 
color: var(--color-gray-800); }
.faq-button:focus-visible { outline: 2px solid var(--color-purple-500); outline-offset: 2px; }
.faq-button .faq-icon { color: var(--color-gray-500); transition: transform 0.3s ease; }
.faq-button[aria-expanded="true"] .faq-icon { transform: rotate(180deg); }
.faq-answer {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease-in-out;
}
.faq-answer > div { overflow: hidden; }
.faq-button[aria-expanded="true"] + .faq-answer { grid-template-rows: 1fr; }
.faq-answer-content {
padding: 0 var(--spacing-6) var(--spacing-6) var(--spacing-6);
color: var(--color-gray-600);
border-top: 1px solid var(--color-gray-200);
padding-top: var(--spacing-4);
} .lightbox-modal {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: var(--z-modal);
padding: var(--spacing-4);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.lightbox-modal.is-visible { opacity: 1; visibility: visible; }
.lightbox-content {
position: relative;
width: 100%;
max-width: 800px;
max-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-4);
}
#lightbox-image {
max-height: 70vh;
object-fit: contain;
border-radius: var(--rounded-lg);
}
.lightbox-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #ffffff; font-size: var(--font-size-3xl);
z-index: calc(var(--z-modal) + 1);
background-color: rgba(0,0,0,0.8); border-radius: var(--rounded-full);
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s ease, color 0.2s ease;
text-shadow: 0 0 5px rgba(0,0,0,0.5); 
}
.lightbox-btn:hover { 
background-color: rgba(0,0,0,1); color: #ffffff; }
.lightbox-btn svg { 
width: 1em;
height: 1em;
fill: currentColor; }
#lightbox-close-btn { 
top: var(--spacing-4); 
right: var(--spacing-4); 
transform: none; 
font-size: var(--font-size-2xl); 
width: 40px;
height: 40px;
background-color: rgba(0,0,0,0.8); }
#lightbox-close-btn:hover {
background-color: rgba(0,0,0,1);
}
#lightbox-prev-btn { left: var(--spacing-4); }
#lightbox-next-btn { right: var(--spacing-4); } .toast-notification {
position: fixed;
bottom: 20px;
right: 20px;
background-color: var(--color-gray-800);
color: var(--color-white);
padding: var(--spacing-3) var(--spacing-4);
border-radius: var(--rounded-lg);
box-shadow: var(--shadow-xl);
z-index: var(--z-toast);
display: flex;
align-items: center;
gap: var(--spacing-2);
font-size: var(--font-size-sm);
transform: translateY(200%);
transition: transform 0.4s ease-in-out;
}
.toast-notification.is-visible { transform: translateY(0); }
.toast-notification svg { 
width: 1em;
height: 1em;
} .adsense-container {
margin: var(--spacing-8) auto;
padding: var(--spacing-6);
background-color: var(--color-gray-200);
border-radius: var(--rounded-xl);
text-align: center;
box-shadow: var(--shadow-md);
max-width: 728px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
min-height: 100px;
}
.adsense-container .ads-placeholder {
color: var(--color-gray-700);
font-size: var(--font-size-lg);
font-weight: var(--font-medium);
}
.adsense-container-top { margin-bottom: var(--spacing-16); }
.adsense-container.in-article-ad {
margin-top: var(--spacing-6); 
margin-bottom: var(--spacing-6);
max-width: 100%; 
min-height: 80px; 
}
.adsense-container.in-gallery-ad { margin-top: var(--spacing-4); 
margin-bottom: var(--spacing-4);
max-width: 100%; 
min-height: 80px; 
} .share-section-content {
display: grid;
gap: var(--spacing-4);
justify-items: center;
}
.share-section-content p {
max-width: var(--max-w-3xl);
color: var(--color-gray-600);
}
.share-section-button {
background: linear-gradient(135deg, var(--color-purple-500), var(--color-pink-500));
color: var(--color-white);
padding: var(--spacing-3) var(--spacing-8); 
border-radius: var(--rounded-full);
font-weight: var(--font-bold);
font-size: var(--font-size-base); 
box-shadow: var(--shadow-lg);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: inline-flex;
align-items: center;
gap: var(--spacing-2);
}
.share-section-button:hover {
transform: translateY(-0.125rem);
box-shadow: var(--shadow-2xl);
}
.share-section-button svg { 
width: 1em;
height: 1em;
} .about-section-content { text-align: center; }
.about-section-content h2 {
font-size: var(--font-size-3xl);
margin-bottom: var(--spacing-4);
}
.about-section-content .subtitle {
color: var(--color-gray-600);
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-8);
}
.about-section-content p {
color: var(--color-gray-700);
line-height: var(--line-height-relaxed);
margin-bottom: var(--spacing-6);
text-align: left;
} .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
} .page-template-template-shayari-page #content {
flex-direction: column;
} #masthead,
#masthead .inside-header {
box-shadow: none !important;
border: none !important;
background-color: transparent !important;
}
#masthead .inside-header {
padding-top: 15px !important;
padding-bottom: 15px !important;
min-height: 0 !important;
}
.main-navigation {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.main-navigation .main-nav > ul > li > a {
padding-top: 10px !important;
padding-bottom: 10px !important;
line-height: 1.5em !important;
}
header#masthead {
padding-top: 0px;
padding-bottom: 0px;
} .hide-read-more-button {
display: none !important;
} .popup-modal {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.7); 
display: flex;
align-items: center;
justify-content: center;
z-index: var(--z-modal);
padding: var(--spacing-4);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.popup-modal.is-visible { 
opacity: 1; 
visibility: visible; 
}
.popup-content {
position: relative;
width: 100%;
max-width: 500px; 
background-color: var(--color-white); 
border-radius: var(--rounded-3xl); 
box-shadow: var(--shadow-2xl); 
padding: var(--spacing-8); 
text-align: center;
transform: translateY(20px) scale(0.95);
transition: transform 0.3s ease-out;
}
.popup-modal.is-visible .popup-content {
transform: translateY(0) scale(1);
}
.popup-close-btn {
position: absolute;
top: var(--spacing-4);
right: var(--spacing-4);
font-size: var(--font-size-2xl);
color: var(--color-gray-500);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--rounded-full);
transition: color 0.2s ease, background-color 0.2s ease;
}
.popup-close-btn:hover {
color: var(--color-gray-800);
background-color: var(--color-gray-100);
}
.popup-close-btn svg { 
width: 1em;
height: 1em;
}
.popup-title {
font-size: var(--font-size-2xl);
margin-bottom: var(--spacing-4);
}
.popup-description {
font-size: var(--font-size-base);
color: var(--color-gray-600);
margin-bottom: var(--spacing-8);
}
.popup-submit-btn { } @keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
} #content {
background-image: linear-gradient(to bottom, rgb(240, 240, 240), #ffffff);
background-color: rgb(240, 240, 240); }