html {
scroll-behavior: smooth;
}
/* ============================================================
InfoShalaa — Home Page Styles
Split from styles.css. Pure CSS. Light/Dark theme via [data-theme] on .
============================================================ */
:root,
[data-theme="light"] {
--bg: #ffffff;
--bg-soft: #f8fafc;
--bg-hero: linear-gradient(180deg, #eef4ff 0%, #e2ecff 55%, #dbe7ff 100%);
--text: #0b1220;
--text-muted: #64748b;
--text-soft: #475569;
--border: #e5eaf3;
--border-strong: #d5deee;
--card: #ffffff;
--card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.08);
--card-shadow-hover: 0 4px 8px rgba(15, 23, 42, 0.06), 0 24px 40px -18px rgba(37, 99, 235, 0.22);
--primary: #2563eb;
--primary-600: #1d4ed8;
--primary-700: #1e40af;
--primary-soft: #eef4ff;
--primary-soft-2: #dbeafe;
--tag-bg: #eaf1ff;
--tag-text: #1d4ed8;
--newsletter-bg: linear-gradient(150deg, #16205a 0%, #1e3a8a 55%, #4c1d95 110%);
--newsletter-text: #ffffff;
--toggle-bg: #f1f5f9;
--toggle-active: #ffffff;
--shadow-ring: 0 0 0 1px rgba(37, 99, 235, 0.08);
}
[data-theme="dark"] {
--bg: #070b17;
--bg-soft: #0b1226;
--bg-hero: linear-gradient(180deg, #0b1226 0%, #0d1633 55%, #0f1a3f 100%);
--text: #eef2f7;
--text-muted: #8b98b3;
--text-soft: #b6c1d8;
--border: #1a2340;
--border-strong: #223055;
--card: #0e1730;
--card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 30px -14px rgba(0, 0, 0, 0.6);
--card-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.35), 0 28px 40px -18px rgba(59, 130, 246, 0.35);
--primary: #3b82f6;
--primary-600: #60a5fa;
--primary-700: #93c5fd;
--primary-soft: #10214a;
--primary-soft-2: #172a5e;
--tag-bg: #172a5e;
--tag-text: #93c5fd;
--newsletter-bg: linear-gradient(150deg, #0f1a3f 0%, #1e3a8a 55%, #3b1d7a 110%);
--newsletter-text: #ffffff;
--toggle-bg: #101a35;
--toggle-active: #1c2a52;
--shadow-ring: 0 0 0 1px rgba(96, 165, 250, 0.15);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
background: var(--bg);
color: var(--text);
font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
font-size: 15px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background-color 0.25s ease, color 0.25s ease;
}
img {
max-width: 100%;
display: block;
}
::selection {
background: var(--primary);
color: #fff;
}
h1,
h2,
h3,
h4 {
font-family: "Sora", "Manrope", sans-serif;
color: var(--text);
letter-spacing: -0.01em;
margin: 0;
}
a {
color: inherit;
text-decoration: none;
}
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
color: inherit;
}
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
.text-primary {
color: var(--primary);
}
/* ================================================================
HOME PAGE STYLES
================================================================ */
/* --- Home Hero --- */
.home-hero {
padding: 60px 0 80px;
position: relative;
overflow: hidden;
background: var(--bg);
}
[data-theme="light"] .home-hero {
background:
radial-gradient(600px 400px at 90% 10%, rgba(96, 165, 250, 0.14), transparent 70%),
radial-gradient(500px 400px at 10% 90%, rgba(96, 165, 250, 0.10), transparent 70%),
#ffffff;
}
[data-theme="dark"] .home-hero {
background:
radial-gradient(600px 400px at 90% 10%, rgba(59, 130, 246, 0.20), transparent 70%),
radial-gradient(500px 400px at 10% 90%, rgba(96, 165, 250, 0.14), transparent 70%),
var(--bg);
}
.home-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: 32px;
align-items: center;
position: relative;
}
.badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
background: var(--primary-soft);
color: var(--primary);
font-weight: 600;
font-size: 13px;
margin-bottom: 22px;
}
[data-theme="dark"] .badge {
color: var(--primary-600);
}
.home-hero__title {
font-size: clamp(32px, 4.5vw, 56px);
line-height: 1.08;
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 22px;
}
.home-hero__title .text-primary {
display: inline-block;
}
.home-hero__desc {
font-size: 16px;
color: var(--text-soft);
max-width: 560px;
margin: 0 0 30px;
line-height: 1.65;
}
.cta-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 40px;
}
.btn--outline {
background: var(--card);
border: 1px solid var(--border);
color: var(--text);
}
.btn--outline:hover {
border-color: var(--primary);
color: var(--primary);
background: var(--primary-soft);
transform: translateY(-1px);
}
.btn svg {
transition: transform 0.2s ease;
}
.btn:hover svg {
transform: translateX(2px);
}
.feature-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px 10px;
max-width: 760px;
}
.feature-item {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.feature-item__ico {
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--primary-soft);
color: var(--primary);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
[data-theme="dark"] .feature-item__ico {
color: var(--primary-600);
}
.feature-item__ico svg {
width: 16px;
height: 16px;
}
.feature-item__title {
font-family: "Sora", sans-serif;
font-weight: 700;
font-size: 12.5px;
color: var(--text);
line-height: 1.25;
}
.feature-item__sub {
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
line-height: 1.35;
}
.home-hero__visual {
position: relative;
width: 100%;
max-width: 560px;
justify-self: end;
}
.hero-illustration {
width: 100%;
height: auto;
display: block;
}
/* --- Generic Section --- */
.section {
padding: 56px 0;
}
.section + .section {
padding-top: 0;
}
.section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 20px;
margin-bottom: 28px;
flex-wrap: wrap;
}
.section-title {
font-family: "Sora", sans-serif;
font-size: clamp(22px, 2.4vw, 30px);
font-weight: 700;
letter-spacing: -0.01em;
}
.section-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--primary);
font-weight: 600;
font-size: 14px;
transition: gap 0.2s ease;
}
.section-link:hover {
gap: 10px;
}
/* --- Browse Categories Grid --- */
.category-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 18px;
}
.cat-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 18px;
padding: 24px 18px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.cat-card:hover {
transform: translateY(-4px);
border-color: var(--primary-soft-2);
box-shadow: var(--card-shadow-hover);
}
.cat-card__ico {
width: 66px;
height: 66px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--primary);
background: var(--primary-soft);
transition: transform 0.3s ease;
}
.cat-card:hover .cat-card__ico {
transform: scale(1.08) rotate(-4deg);
}
/* Per-category color variants */
.cat-card[data-cat="ai"] .cat-card__ico { background: #eef4ff; color: #2563eb; }
.cat-card[data-cat="ds"] .cat-card__ico { background: #ecfdf5; color: #059669; }
.cat-card[data-cat="cs"] .cat-card__ico { background: #f5f3ff; color: #7c3aed; }
.cat-card[data-cat="web"] .cat-card__ico { background: #fff7ed; color: #ea580c; }
.cat-card[data-cat="prog"] .cat-card__ico { background: #fef2f2; color: #e11d48; }
.cat-card[data-cat="career"] .cat-card__ico { background: #eef2ff; color: #4f46e5; }
[data-theme="dark"] .cat-card[data-cat="ai"] .cat-card__ico { background: #172a5e; color: #93c5fd; }
[data-theme="dark"] .cat-card[data-cat="ds"] .cat-card__ico { background: #0d3a2b; color: #6ee7b7; }
[data-theme="dark"] .cat-card[data-cat="cs"] .cat-card__ico { background: #2e1f5a; color: #c4b5fd; }
[data-theme="dark"] .cat-card[data-cat="web"] .cat-card__ico { background: #3d2410; color: #fdba74; }
[data-theme="dark"] .cat-card[data-cat="prog"] .cat-card__ico { background: #3a1420; color: #fda4af; }
[data-theme="dark"] .cat-card[data-cat="career"] .cat-card__ico { background: #1e1e56; color: #a5b4fc; }
.cat-card__name {
font-family: "Sora", sans-serif;
font-weight: 700;
font-size: 15px;
color: var(--text);
line-height: 1.25;
}
.cat-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
color: var(--text-muted);
font-size: 12.5px;
font-weight: 500;
padding-top: 4px;
}
.cat-card__arrow {
color: var(--primary);
display: inline-flex;
transition: transform 0.2s ease;
}
.cat-card:hover .cat-card__arrow {
transform: translateX(4px);
}
/* --- Featured Carousel --- */
.featured-carousel {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 12px;
}
.carousel-btn {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--card);
border: 1px solid var(--border);
color: var(--text-soft);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: var(--card-shadow);
transition: color 0.18s, background 0.18s, border-color 0.18s, transform 0.15s;
flex-shrink: 0;
}
.carousel-btn:hover:not(:disabled) {
color: var(--primary);
border-color: var(--primary);
background: var(--primary-soft);
transform: scale(1.06);
}
.carousel-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.featured-viewport {
overflow: hidden;
padding: 4px;
}
.featured-track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - 44px) / 3);
gap: 22px;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Small featured card (reuses .article) */
.feat-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 18px;
overflow: hidden;
display: flex;
flex-direction: column;
min-width: 0;
box-shadow: var(--card-shadow);
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.feat-card:hover {
transform: translateY(-6px);
box-shadow: var(--card-shadow-hover);
border-color: var(--primary-soft-2);
}
.feat-card__thumb {
position: relative;
height: 210px;
overflow: hidden;
background: var(--bg-soft);
}
.feat-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.feat-card__thumb::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
transparent,
rgba(0,0,0,0.18)
);
opacity: 0;
transition: opacity 0.3s ease;
}
.feat-card:hover
.feat-card__thumb::after {
opacity: 1;
}
.feat-card:hover .feat-card__thumb img {
transform: scale(1.08);
}
.feat-card__body {
padding: 18px 20px 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
/* --- Trending Grid --- */
.trending-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px 32px;
}
.trend-item {
display: flex;
align-items: center;
gap: 14px;
cursor: pointer;
transition: transform 0.15s ease;
min-width: 0;
}
.trend-item:hover {
transform: translateX(2px);
}
.trend-item__num {
font-family: "Sora", sans-serif;
font-weight: 700;
font-size: 14px;
color: var(--primary);
background: var(--primary-soft);
width: 42px;
height: 42px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
[data-theme="dark"] .trend-item__num {
color: var(--primary-600);
}
.trend-item__thumb {
width: 68px;
height: 52px;
border-radius: 10px;
object-fit: cover;
flex-shrink: 0;
}
.trend-item__meta {
min-width: 0;
flex: 1;
}
.trend-item__title {
font-family: "Sora", sans-serif;
font-weight: 600;
font-size: 14px;
color: var(--text);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.trend-item:hover .trend-item__title {
color: var(--primary);
}
.trend-item__read {
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
font-weight: 500;
}
/* --- Stats Banner --- */
.stats-banner-wrap {
padding: 20px 0 56px;
}
.stats-banner {
background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #3b82f6 100%);
border-radius: 20px;
padding: 32px 24px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
box-shadow: 0 24px 40px -18px rgba(37, 99, 235, 0.55);
position: relative;
overflow: hidden;
}
.stats-banner::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(400px 200px at 0% 0%, rgba(255, 255, 255, 0.16), transparent 60%),
radial-gradient(400px 200px at 100% 100%, rgba(0, 0, 0, 0.14), transparent 60%);
pointer-events: none;
}
.stat-b {
display: flex;
align-items: center;
gap: 16px;
color: #fff;
position: relative;
min-width: 0;
}
.stat-b__ico {
width: 54px;
height: 54px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.22);
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
flex-shrink: 0;
}
.stat-b__num {
font-family: "Sora", sans-serif;
font-weight: 800;
font-size: 26px;
line-height: 1.1;
letter-spacing: -0.01em;
}
.stat-b__label {
font-size: 13px;
color: rgba(255, 255, 255, 0.85);
margin-top: 2px;
font-weight: 500;
}
/* --- Newsletter Large Card --- */
.newsletter-lg {
background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
border: 1px solid var(--border);
border-radius: 22px;
padding: 32px 36px;
display: grid;
grid-template-columns: 200px 1fr;
gap: 32px;
align-items: center;
}
[data-theme="dark"] .newsletter-lg {
background: linear-gradient(135deg, #0f1a3f 0%, #0d1633 100%);
}
.newsletter-lg__visual {
display: flex;
align-items: center;
justify-content: center;
}
.newsletter-lg__visual svg {
width: 100%;
height: auto;
max-width: 200px;
}
.newsletter-lg__title {
font-family: "Sora", sans-serif;
font-weight: 700;
font-size: clamp(20px, 2.2vw, 26px);
color: var(--text);
margin-bottom: 6px;
letter-spacing: -0.01em;
}
.newsletter-lg__desc {
color: var(--text-soft);
font-size: 14.5px;
max-width: 460px;
margin: 0 0 18px;
line-height: 1.55;
}
.newsletter-lg__form {
display: flex;
gap: 10px;
max-width: 480px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.newsletter-lg__input {
flex: 1;
min-width: 240px;
height: 46px;
padding: 0 18px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
color: var(--text);
font: inherit;
font-size: 14px;
outline: none;
transition: border-color 0.18s, box-shadow 0.18s;
}
.newsletter-lg__input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
.newsletter-lg__input::placeholder {
color: var(--text-muted);
}
.newsletter-lg__btn {
height: 46px;
padding: 0 26px;
border-radius: 12px;
flex-shrink: 0;
}
.newsletter-lg__note {
font-size: 12.5px;
color: var(--text-muted);
margin: 0;
}
.tag {
display: inline-flex;
align-items: center;
width: fit-content;
background: var(--tag-bg);
color: var(--tag-text);
padding: 6px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
}
.article__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.article__title {
font-size: 18px;
line-height: 1.45;
font-weight: 700;
margin: 0;
color: var(--text);
}
.feat-card:hover
.article__title {
color: var(--primary);
}
.article__excerpt {
font-size: 14px;
line-height: 1.7;
color: var(--text-muted);
margin: 0;
}
.article__meta {
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
color: var(--text-muted);
font-size: 13px;
font-weight: 500;
}
.article__meta-item {
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
/* ================================================================
RESPONSIVE
================================================================ */
@media (max-width: 1200px) {
.category-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.featured-track {
grid-auto-columns: calc((100% - 22px) / 2);
}
}
@media (max-width: 1000px) {
.home-hero__grid {
grid-template-columns: 1fr;
gap: 32px;
}
.home-hero__visual {
max-width: 480px;
justify-self: center;
order: -1;
}
.stats-banner {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px 20px;
}
.newsletter-lg {
grid-template-columns: 140px 1fr;
padding: 26px 24px;
gap: 20px;
}
}
@media (max-width: 900px) {
.btn--primary {
display: none;
}
.feature-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.category-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.trending-grid {
grid-template-columns: 1fr;
}
.section {
padding: 40px 0;
}
.stats-banner {
padding: 24px 20px;
}
.stat-b__num {
font-size: 22px;
}
.stat-b__ico {
width: 46px;
height: 46px;
}
}
@media (max-width: 640px) {
.container {
padding: 0 18px;
}
.home-hero {
padding: 36px 0 56px;
}
.home-hero__title {
font-size: 34px;
}
.cta-row .btn {
flex: 1;
min-width: 0;
}
.featured-track {
grid-auto-columns: 100%;
}
.featured-carousel {
grid-template-columns: 1fr;
}
.carousel-btn--prev,
.carousel-btn--next {
position: absolute;
top: 40%;
z-index: 5;
transform: translateY(-50%);
}
.carousel-btn--prev { left: 8px; }
.carousel-btn--next { right: 8px; }
.newsletter-lg {
grid-template-columns: 1fr;
padding: 24px 20px;
text-align: center;
}
.newsletter-lg__visual {
max-width: 160px;
margin: 0 auto;
}
.newsletter-lg__form {
margin-left: auto;
margin-right: auto;
justify-content: center;
}
.newsletter-lg__input {
min-width: 0;
width: 100%;
}
.newsletter-lg__btn {
width: 100%;
}
.stats-banner {
grid-template-columns: 1fr;
gap: 18px;
}
.navbar__inner {
gap: 10px;
}
.category-grid {
grid-template-columns: 1fr;
}
.cat-card {
flex-direction: row;
text-align: left;
padding: 16px;
gap: 16px;
}
.cat-card__ico {
width: 54px;
height: 54px;
}
.cat-card__foot {
justify-content: flex-start;
gap: 12px;
}
.article__meta {
flex-wrap: wrap;
}
}