/* ======================================================================== HowToHub - Critical Styles (above-the-fold, inline in ) ======================================================================== */ /* ── CSS Variables ────────────────────────────────────────────────────── */ :root { --color-primary: #2563EB; --color-primary-dark: #1D4ED8; --color-accent: #F59E0B; --color-accent-dark: #D97706; --color-text: #1E293B; --color-text-light: #475569; --color-muted: #64748B; --color-bg: #FFFFFF; --color-bg-alt: #F8FAFC; --color-border: #E2E8F0; --color-danger: #EF4444; --color-success: #22C55E; --font-body: 'Hind Siliguri', 'Noto Sans Bengali', 'Arial', sans-serif; --font-size-xs: 13px; --font-size-sm: 14px; --font-size-base: 17px; --font-size-lg: 20px; --font-size-xl: 26px; --font-size-2xl: 32px; --line-height: 1.8; --max-content: 720px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow-md: 0 4px 12px rgba(0,0,0,.08); --shadow-lg: 0 8px 24px rgba(0,0,0,.1); --header-h: 64px; --transition: .2s ease; } /* ── Dark Mode Variables ──────────────────────────────────────────────── */ [data-theme="dark"] { --color-text: #F1F5F9; --color-text-light: #CBD5E1; --color-muted: #94A3B8; --color-bg: #0F172A; --color-bg-alt: #1E293B; --color-border: #334155; --shadow-sm: 0 1px 2px rgba(0,0,0,.2); --shadow-md: 0 4px 12px rgba(0,0,0,.3); --shadow-lg: 0 8px 24px rgba(0,0,0,.4); } /* ── Reset ────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { font-family: var(--font-body); font-size: var(--font-size-base); line-height: var(--line-height); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, video, canvas { max-width: 100%; height: auto; display: block; } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--color-primary-dark); } ul, ol { list-style: none; } /* ── Screen Reader Only ───────────────────────────────────────────────── */ .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } .skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 99999; padding: 12px 20px; background: var(--color-primary); color: #fff; border-radius: var(--radius-md); clip: auto; width: auto; height: auto; text-decoration: none; font-weight: 600; } /* ── Container ────────────────────────────────────────────────────────── */ .container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 20px; } /* ── Reading Progress ─────────────────────────────────────────────────── */ .reading-progress { position: fixed; top: 0; left: 0; z-index: 9999; width: 0; height: 3px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); transition: width .1s linear; } /* ── Header ───────────────────────────────────────────────────────────── */ .header { position: sticky; top: 0; z-index: 1000; background: var(--color-bg); border-bottom: 1px solid var(--color-border); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .header__inner { display: flex; align-items: center; gap: 16px; height: var(--header-h); } .header__logo-link { display: flex; align-items: center; text-decoration: none; color: var(--color-text); } .header__logo-text { font-size: 22px; font-weight: 700; color: var(--color-primary); } .header__logo img { max-height: 40px; width: auto; } /* ── Search Form ──────────────────────────────────────────────────────── */ .search-form__wrapper { position: relative; display: flex; align-items: center; } .header__search { flex: 1; max-width: 360px; } .search-form__input { width: 100%; padding: 8px 40px 8px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-alt); color: var(--color-text); font-family: var(--font-body); font-size: var(--font-size-sm); line-height: 1.4; transition: border-color var(--transition), box-shadow var(--transition); outline: none; } .search-form__input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.15); } .search-form__input::placeholder { color: var(--color-muted); } .search-form__btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: none; border: none; color: var(--color-muted); cursor: pointer; border-radius: var(--radius-sm); transition: color var(--transition); } .search-form__btn:hover { color: var(--color-primary); } .search-form__results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 100; display: none; max-height: 360px; overflow-y: auto; } .search-form__results.active { display: block; } /* ── Hero Search Larger ─────────────────────────────────────────── */ .search-form__wrapper--hero .search-form__input { padding: 14px 48px 14px 20px; font-size: var(--font-size-base); border-radius: var(--radius-lg); } .search-form__wrapper--hero .search-form__btn { right: 12px; width: 32px; height: 32px; } /* ── Navigation ───────────────────────────────────────────────────────── */ .nav { display: flex; align-items: center; } .nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; } .nav__toggle-bar { display: block; width: 22px; height: 2.5px; background: var(--color-text); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); } .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { opacity: 0; } .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } .nav__menu { display: flex; align-items: center; gap: 4px; } .nav__link { display: block; padding: 8px 14px; font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-light); border-radius: var(--radius-md); transition: background var(--transition), color var(--transition); } .nav__link:hover, .current-menu-item > .nav__link, .current_page_item > .nav__link { background: var(--color-bg-alt); color: var(--color-primary); } /* ── Dark Toggle ──────────────────────────────────────────────────────── */ .dark-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: none; border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; color: var(--color-text-light); transition: background var(--transition), color var(--transition); flex-shrink: 0; } .dark-toggle:hover { background: var(--color-bg-alt); color: var(--color-primary); } .dark-toggle__sun, .dark-toggle__moon { position: absolute; transition: opacity var(--transition), transform var(--transition); } .dark-toggle__moon { opacity: 0; transform: scale(.5) rotate(-90deg); } .dark-toggle__sun { opacity: 1; transform: scale(1) rotate(0); } [data-theme="dark"] .dark-toggle__moon { opacity: 1; transform: scale(1) rotate(0); } [data-theme="dark"] .dark-toggle__sun { opacity: 0; transform: scale(.5) rotate(90deg); } .dark-toggle { position: relative; } /* ── Buttons ──────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 24px; font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 600; line-height: 1.4; border: none; border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition), transform var(--transition), box-shadow var(--transition); text-decoration: none; } .btn:active { transform: scale(.97); } .btn--primary { background: var(--color-primary); color: #fff; } .btn--primary:hover { background: var(--color-primary-dark); color: #fff; } .btn--lg { padding: 14px 32px; font-size: var(--font-size-base); } /* ── Hero ─────────────────────────────────────────────────────────────── */ .hero { padding: 56px 0 40px; text-align: center; } .hero__title { font-size: var(--font-size-2xl); font-weight: 700; line-height: 1.35; margin-bottom: 16px; color: var(--color-text); } .hero__title br { display: none; } .hero__subtitle { font-size: var(--font-size-lg); color: var(--color-text-light); max-width: 600px; margin: 0 auto 32px; } .hero__search { max-width: 520px; margin: 0 auto; } .hero__stats { display: flex; justify-content: center; gap: 32px; margin-top: 32px; flex-wrap: wrap; } .hero__stat { font-size: var(--font-size-sm); color: var(--color-muted); } .hero__stat strong { display: block; font-size: var(--font-size-xl); color: var(--color-primary); font-weight: 700; } /* ── Sections ─────────────────────────────────────────────────────────── */ .section { padding: 40px 0; } .section__title { font-size: var(--font-size-xl); font-weight: 700; margin-bottom: 24px; color: var(--color-text); } /* ── Categories Grid ──────────────────────────────────────────────────── */ .categories__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; } .category-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 12px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); } .category-card:hover { border-color: var(--cat-color); box-shadow: var(--shadow-md); transform: translateY(-2px); } .category-card__icon { font-size: 36px; line-height: 1; } .category-card__name { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); text-align: center; } .category-card__count { font-size: var(--font-size-xs); color: var(--color-muted); } /* ── Post Card Grid ───────────────────────────────────────────────────── */ .posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; } .post-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow var(--transition), transform var(--transition); } .post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .post-card__link { display: block; text-decoration: none; } .post-card__image { aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-bg-alt); } .post-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .post-card:hover .post-card__image img { transform: scale(1.03); } .post-card__image--placeholder { display: flex; align-items: center; justify-content: center; color: var(--color-muted); } .post-card__body { padding: 16px; } .post-card__cat { display: inline-flex; padding: 2px 10px; font-size: var(--font-size-xs); font-weight: 500; background: var(--cat-bg, var(--color-bg-alt)); color: var(--cat-color, var(--color-text)); border-radius: 100px; margin-bottom: 8px; } .post-card__title { font-size: var(--font-size-lg); font-weight: 600; line-height: 1.4; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .post-card__title a { color: var(--color-text); transition: color var(--transition); } .post-card__title a:hover { color: var(--color-primary); } .post-card__excerpt { font-size: var(--font-size-sm); color: var(--color-text-light); margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .post-card__meta { display: flex; gap: 12px; align-items: center; font-size: var(--font-size-xs); color: var(--color-muted); } /* ── Single Article ───────────────────────────────────────────────────── */ .single-article { max-width: var(--max-content); padding-top: 24px; padding-bottom: 48px; } .single-article__title { font-size: var(--font-size-2xl); font-weight: 700; line-height: 1.3; margin-bottom: 16px; } .single-article__meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: var(--font-size-sm); color: var(--color-muted); margin-bottom: 24px; } .single-article__author { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--color-text); } .single-article__avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .single-article__featured { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 24px; } /* ── Content Styles ───────────────────────────────────────────────────── */ .single-article__content { font-size: var(--font-size-base); line-height: var(--line-height); color: var(--color-text); } .single-article__content > * { margin-bottom: 1.5em; } .single-article__content h2 { font-size: var(--font-size-xl); font-weight: 700; margin-top: 1.8em; margin-bottom: .6em; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); } .single-article__content h3 { font-size: var(--font-size-lg); font-weight: 600; margin-top: 1.5em; margin-bottom: .5em; } .single-article__content p { margin-bottom: 1.2em; } .single-article__content ul, .single-article__content ol { margin-bottom: 1.2em; padding-left: 24px; } .single-article__content ul { list-style: disc; } .single-article__content ol { list-style: decimal; } .single-article__content li { margin-bottom: .3em; } .single-article__content a { text-decoration: underline; text-underline-offset: 3px; } .single-article__content blockquote { border-left: 4px solid var(--color-primary); padding: 12px 20px; margin: 1.5em 0; background: var(--color-bg-alt); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-style: italic; } .single-article__content pre { position: relative; background: #1E293B; color: #E2E8F0; padding: 20px; border-radius: var(--radius-md); overflow-x: auto; font-size: var(--font-size-sm); line-height: 1.6; margin-bottom: 1.5em; direction: ltr; text-align: left; } .single-article__content code { font-family: 'JetBrains Mono', 'Fira Code', monospace; background: var(--color-bg-alt); padding: 2px 6px; border-radius: 4px; font-size: .9em; } .single-article__content pre code { background: none; padding: 0; } /* ── Copy Code Button ─────────────────────────────────────────────────── */ .code-copy-btn { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: 12px; font-family: var(--font-body); background: rgba(255,255,255,.1); color: #CBD5E1; border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition), color var(--transition); } .code-copy-btn:hover { background: rgba(255,255,255,.2); color: #fff; } .code-copy-btn.copied { background: var(--color-success); color: #fff; border-color: var(--color-success); } /* ── Table of Contents ────────────────────────────────────────────────── */ .toc { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 32px; } .toc__title { font-size: var(--font-size-base); font-weight: 600; margin-bottom: 12px; } .toc__list { list-style: none; padding: 0; } .toc__list li { margin-bottom: 4px; } .toc__list a { font-size: var(--font-size-sm); color: var(--color-text-light); text-decoration: none; padding: 4px 8px; display: block; border-radius: var(--radius-sm); transition: background var(--transition), color var(--transition); } .toc__list a:hover { background: var(--color-bg); color: var(--color-primary); } .toc__list .toc--h3 { padding-left: 24px; font-size: var(--font-size-xs); } .toc__list .toc--active a { color: var(--color-primary); font-weight: 600; } /* ── Breadcrumbs ──────────────────────────────────────────────────────── */ .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--font-size-xs); color: var(--color-muted); margin-bottom: 16px; } .breadcrumbs__item a { color: var(--color-muted); } .breadcrumbs__item a:hover { color: var(--color-primary); } .breadcrumbs__sep { color: var(--color-border); } .breadcrumbs__item--current { color: var(--color-text); font-weight: 500; } /* ── Tags ─────────────────────────────────────────────────────────────── */ .tag { display: inline-block; padding: 2px 10px; font-size: var(--font-size-xs); background: var(--color-bg-alt); color: var(--color-text-light); border: 1px solid var(--color-border); border-radius: 100px; text-decoration: none; transition: background var(--transition), border-color var(--transition); } .tag:hover { border-color: var(--color-primary); color: var(--color-primary); } /* ── Share Buttons ────────────────────────────────────────────────────── */ .share-buttons { display: flex; align-items: center; gap: 10px; margin: 32px 0; padding: 16px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .share-buttons__label { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text); margin-left: 0; } .share-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; transition: transform var(--transition), opacity var(--transition); } .share-btn:hover { transform: scale(1.1); opacity: .9; } .share-btn--facebook { background: #1877F2; } .share-btn--twitter { background: #1DA1F2; } .share-btn--whatsapp { background: #25D366; } /* ── Author Box ───────────────────────────────────────────────────────── */ .author-box { display: flex; gap: 16px; align-items: flex-start; padding: 20px; background: var(--color-bg-alt); border-radius: var(--radius-lg); margin: 24px 0; } .author-box__avatar img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; } .author-box__name { font-weight: 600; font-size: var(--font-size-base); } .author-box__name a { color: var(--color-text); } .author-box__bio { font-size: var(--font-size-sm); color: var(--color-text-light); margin-top: 4px; } /* ── Archive Header ───────────────────────────────────────────────────── */ .archive-header { padding: 24px 0; } .archive-header__inner { text-align: center; } .archive-header__icon { font-size: 48px; display: block; margin-bottom: 8px; } .archive-header__title { font-size: var(--font-size-2xl); font-weight: 700; color: var(--color-text); margin-bottom: 12px; } .archive-header__desc { font-size: var(--font-size-base); color: var(--color-text-light); max-width: 600px; margin: 0 auto; } /* ── Pagination ───────────────────────────────────────────────────────── */ .pagination { display: flex; justify-content: center; gap: 8px; margin: 32px 0; padding: 0; } .pagination .page-numbers { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; font-size: var(--font-size-sm); color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; transition: background var(--transition), border-color var(--transition); } .pagination .page-numbers:hover { border-color: var(--color-primary); color: var(--color-primary); } .pagination .page-numbers.current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .pagination .page-numbers.dots { border: none; background: none; } /* ── Search Header ────────────────────────────────────────────────────── */ .search-header { padding: 32px 0 24px; } .search-header__title { font-size: 24px; font-weight: 700; margin-bottom: 8px; } .search-header__count { color: var(--color-muted); font-size: var(--font-size-sm); } /* ── Empty State ──────────────────────────────────────────────────────── */ .empty-state { text-align: center; padding: 64px 20px; } .empty-state__icon { font-size: 64px; margin-bottom: 16px; } .empty-state__title { font-size: var(--font-size-xl); font-weight: 700; margin-bottom: 12px; } .empty-state__text { color: var(--color-text-light); margin-bottom: 8px; } .empty-state__search { max-width: 400px; margin: 24px auto; } /* ── Error 404 ─────────────────────────────────────────────────────────── */ .error-404 { text-align: center; padding: 64px 20px; } .error-404__code { font-size: 96px; font-weight: 800; color: var(--color-primary); line-height: 1; } .error-404__title { font-size: var(--font-size-xl); font-weight: 700; margin: 16px 0; } .error-404__text { color: var(--color-text-light); max-width: 500px; margin: 0 auto 24px; } .error-404__search { max-width: 400px; margin: 0 auto 24px; } .error-404__actions { margin-bottom: 40px; } .error-404__popular h2 { font-size: var(--font-size-lg); font-weight: 600; margin-bottom: 16px; } .posts-grid--mini .post-card { border: none; background: none; box-shadow: none; } .posts-grid--mini .post-card:hover { transform: none; } /* ── CTA Section ──────────────────────────────────────────────────────── */ .cta__inner { text-align: center; padding: 48px 20px; background: linear-gradient(135deg, var(--color-primary), #1D4ED8); border-radius: var(--radius-lg); color: #fff; } .cta__title { font-size: var(--font-size-xl); font-weight: 700; margin-bottom: 12px; } .cta__text { font-size: var(--font-size-base); margin-bottom: 24px; opacity: .9; } .cta__inner .btn--primary { background: var(--color-accent); color: #1E293B; } .cta__inner .btn--primary:hover { background: var(--color-accent-dark); } /* ── Footer ───────────────────────────────────────────────────────────── */ .footer { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); padding: 40px 0 24px; margin-top: 48px; } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; margin-bottom: 32px; } .footer__logo { font-size: 20px; font-weight: 700; color: var(--color-primary); margin-bottom: 8px; } .footer__logo a { color: var(--color-primary); text-decoration: none; } .footer__tagline { font-size: var(--font-size-sm); color: var(--color-text-light); } .footer__heading { font-size: var(--font-size-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--color-text); margin-bottom: 12px; } .footer__menu { list-style: none; padding: 0; } .footer__menu li { margin-bottom: 6px; } .footer__menu a { font-size: var(--font-size-sm); color: var(--color-text-light); text-decoration: none; transition: color var(--transition); } .footer__menu a:hover { color: var(--color-primary); } .footer__bottom { border-top: 1px solid var(--color-border); padding-top: 20px; text-align: center; } .footer__copyright { font-size: var(--font-size-xs); color: var(--color-muted); } .footer__copyright a { color: var(--color-muted); } .footer__copyright a:hover { color: var(--color-primary); } /* ── Back to Top ──────────────────────────────────────────────────────── */ .back-to-top { position: fixed; bottom: 24px; right: 24px; z-index: 900; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--color-primary); color: #fff; border: none; border-radius: 50%; box-shadow: var(--shadow-md); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity var(--transition), transform var(--transition), visibility var(--transition); } .back-to-top.visible { opacity: 1; visibility: visible; } .back-to-top:hover { transform: translateY(-3px); background: var(--color-primary-dark); } /* ── Related Posts ────────────────────────────────────────────────────── */ .related-posts { margin: 40px 0; } .related-posts__title { font-size: var(--font-size-xl); font-weight: 700; margin-bottom: 20px; } /* ── Single Article Tax ───────────────────────────────────────────────── */ .single-article__tax { display: flex; flex-wrap: wrap; gap: 16px; margin: 24px 0; font-size: var(--font-size-sm); } .single-article__tax-label { font-weight: 600; color: var(--color-text); } .single-article__cats, .single-article__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .single-article__updated { font-size: var(--font-size-xs); color: var(--color-muted); } /* ── Text utilities ───────────────────────────────────────────────────── */ .text-muted { color: var(--color-muted); } /* ── Mobile (≤ 768) ─────────────────────────────────────────────────── */ @media (max-width: 768px) { .header__search { display: none; } .header__search.is-visible-mobile { display: block; position: absolute; top: var(--header-h); left: 0; right: 0; padding: 12px 20px; background: var(--color-bg); border-bottom: 1px solid var(--color-border); z-index: 999; max-width: 100%; } .nav__toggle { display: flex; } .nav__menu { position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; flex-direction: column; background: var(--color-bg); padding: 16px; gap: 0; transform: translateX(-100%); transition: transform .25s ease; overflow-y: auto; z-index: 999; } .nav__menu.nav__menu--open { transform: translateX(0); } .nav__link { padding: 14px 16px; font-size: var(--font-size-base); border-bottom: 1px solid var(--color-border); border-radius: 0; } .categories__grid { grid-template-columns: repeat(2, 1fr); } .posts-grid { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; gap: 24px; } .hero__stats { gap: 16px; } .hero__title br { display: block; } .toc { padding: 16px; } } /* ── Tablet (769-1024) ────────────────────────────────────────────────── */ @media (min-width: 769px) and (max-width: 1024px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } } /* ── Desktop (≥ 1025) ─────────────────────────────────────────────────── */ @media (min-width: 1025px) { .nav__menu { display: flex; } } /* ===== PROFESSIONAL REDESIGN V2.0 ===== */ /* Hero Slider */ .hero-slider{position:relative;margin-top:var(--header-h);overflow:hidden;background:var(--dark);height:480px} .hero-slider__track{display:flex;height:100%;transition:transform .5s ease} .hero-slider__slide{min-width:100%;height:100%;position:relative;flex-shrink:0} .hero-slider__image{width:100%;height:100%;background-size:cover;background-position:center;position:relative} .hero-slider__overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,23,42,.85),rgba(15,23,42,.4))} .hero-slider__content{position:absolute;bottom:60px;left:5%;max-width:600px;color:#fff;z-index:2} .hero-slider__cat{display:inline-block;padding:4px 14px;background:var(--primary);border-radius:20px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px} .hero-slider__title{font-size:32px;font-weight:700;line-height:1.2;margin-bottom:10px} .hero-slider__excerpt{font-size:16px;opacity:.9;margin-bottom:8px;line-height:1.5} .hero-slider__meta{font-size:13px;opacity:.7} .hero-slider__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;background:rgba(255,255,255,.15);border:none;cursor:pointer;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;backdrop-filter:blur(4px);transition:background .2s} .hero-slider__arrow:hover{background:rgba(255,255,255,.3)} .hero-slider__arrow--prev{left:20px} .hero-slider__arrow--next{right:20px} .hero-slider__dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10} .hero-slider__dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.4);border:none;cursor:pointer;transition:all .2s} .hero-slider__dot.active{background:#fff;width:28px;border-radius:5px} /* Category Grid */ .category-section{padding:60px 0} .category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px} .category-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);text-align:center;transition:all .25s;color:var(--text);cursor:pointer} .category-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--cat-color);color:var(--text)} .category-card__icon{font-size:36px;line-height:1} .category-card__name{font-size:14px;font-weight:600} .category-card__count{font-size:12px;color:var(--text-light)} /* Post Grid Cards */ .post-grid{display:grid;gap:24px} .post-grid--popular{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))} .post-grid--latest{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))} .post-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:all .25s} .post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .post-card__link{display:block;color:var(--text)} .post-card__link:hover{color:var(--text)} .post-card__thumb{position:relative;padding-top:56%;overflow:hidden} .post-card__thumb img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform .3s} .post-card:hover .post-card__thumb img{transform:scale(1.05)} .post-card__body{padding:20px} .post-card__title{font-size:18px;font-weight:600;line-height:1.3;margin-bottom:8px} .post-card__excerpt{font-size:14px;color:var(--text-light);line-height:1.5;margin-bottom:12px} .post-card__meta{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text-light)} .section__empty{text-align:center;padding:60px 20px;color:var(--text-light);font-size:18px} /* Pagination */ .pagination{display:flex;justify-content:center;gap:8px;padding:40px 0} .pagination a,.pagination span{padding:10px 16px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:14px;font-weight:500;transition:all .2s} .pagination .current{background:var(--primary);color:#fff;border-color:var(--primary)} .pagination a:hover{background:var(--primary);color:#fff;border-color:var(--primary)} /* Responsive */ @media(max-width:768px){ .hero-slider{height:360px} .hero-slider__title{font-size:24px} .hero-slider__content{bottom:40px;left:20px;right:20px} .category-grid{grid-template-columns:repeat(3,1fr)} .post-grid--latest{grid-template-columns:1fr} } @media(max-width:480px){ .hero-slider{height:300px} .hero-slider__title{font-size:20px} .category-grid{grid-template-columns:repeat(2,1fr)} }