/* ========================================================================== Simoh Muturih - Personal Website & CMS Design system: Olive Green palette with warm tan/neutral tones ========================================================================== */ :root { /* Brand colors */ --olive-900: #3f4a1e; --olive-800: #4d5b26; --olive-700: #5f7030; --olive-600: #6f8240; --olive-500: #849954; --olive-300: #b6c586; --olive-100: #eef1e0; --olive-50: #f7f8f1; /* Secondary accent: olive-taupe / tan (replaces the old purple) */ --purple-900: #4c4226; --purple-800: #5f5430; --purple-700: #6f6338; --purple-600: #847540; --purple-500: #9b8a4f; --purple-100: #efebd8; --purple-50: #f8f5ec; /* Neutrals */ --white: #ffffff; --gray-50: #f8f9fa; --gray-100: #f1f3f5; --gray-200: #e9ecef; --gray-300: #dee2e6; --gray-400: #ced4da; --gray-500: #adb5bd; --gray-600: #6c757d; --gray-700: #495057; --gray-800: #343a40; --gray-900: #212529; --danger: #c0392b; --danger-dark: #a93226; --success: #5f7030; --warning: #d68910; --text: #2f2a3a; --text-muted: #6c757d; --radius: 12px; --radius-sm: 8px; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12); --transition: 0.2s ease; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-serif: "Source Serif Pro", Georgia, serif; --container-max: 1200px; } /* ========================================================================== Dark theme Overrides light variables when [data-theme="dark"] is set on . Light theme is the default above. ========================================================================== */ :root[data-theme="dark"] { /* Brand colors: slightly brightened for contrast on dark surfaces */ --olive-900: #d7dfae; --olive-800: #b6c586; --olive-700: #a9bb7d; --olive-600: #93a860; --olive-500: #849954; --olive-300: #6f8240; --olive-100: #343819; --olive-50: #2a2d14; /* Secondary accent: olive-taupe / tan (replaces the old purple) */ --purple-900: #e3dbb0; --purple-800: #cfc392; --purple-700: #bcae78; --purple-600: #a0915f; --purple-500: #8a7d4e; --purple-100: #3b3620; --purple-50: #2e2a18; /* Neutrals (inverted) */ --white: #1b1b14; --gray-50: #1f1f17; --gray-100: #26261c; --gray-200: #333327; --gray-300: #43432f; --gray-400: #5a5a40; --gray-500: #7a7a58; --gray-600: #a6a688; --gray-700: #c6c6ab; --gray-800: #dcdcc6; --gray-900: #ececdd; --danger: #e26959; --danger-dark: #d04e3d; --success: #a9bb7d; --warning: #e0a945; --text: #ececdd; --text-muted: #a0a48b; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5); } /* Dark theme component refinements */ :root[data-theme="dark"] body { background: var(--white); color: var(--text); } :root[data-theme="dark"] .hero { background: linear-gradient(135deg, #20221a, #26233a); } :root[data-theme="dark"] .page-header { background: linear-gradient(135deg, #20221a, #26233a); } :root[data-theme="dark"] .hero-photo.placeholder, :root[data-theme="dark"] .profile-photo.placeholder, :root[data-theme="dark"] .about-photo.placeholder, :root[data-theme="dark"] .article-card-placeholder { color: var(--olive-300); } :root[data-theme="dark"] .search-input, :root[data-theme="dark"] .form-control { background: var(--gray-100); color: var(--text); } :root[data-theme="dark"] select.form-control { background-color: var(--gray-100); color: var(--text); } :root[data-theme="dark"] .form-control:focus { box-shadow: 0 0 0 3px rgba(133, 153, 84, 0.25); } :root[data-theme="dark"] .search-input:focus { box-shadow: 0 0 0 3px rgba(133, 153, 84, 0.25); } :root[data-theme="dark"] .login-body { background: linear-gradient(135deg, #26261a, #26233a); } :root[data-theme="dark"] .admin-body { background: var(--gray-100); } :root[data-theme="dark"] .alert-error, :root[data-theme="dark"] .alert-danger { background: rgba(194, 57, 43, 0.15); color: #ffb3a8; } :root[data-theme="dark"] .alert-warning { background: rgba(214, 137, 16, 0.15); color: #ffd9a0; } /* Dark theme: keep brand panels/buttons readable */ :root[data-theme="dark"] .btn-primary { color: #1d1f14; } :root[data-theme="dark"] .btn-primary:hover { color: #1d1f14; } :root[data-theme="dark"] .btn-danger { color: #1d1f14; } :root[data-theme="dark"] .btn-danger:hover { color: #1d1f14; } :root[data-theme="dark"] .cta { background: linear-gradient(135deg, #2c3313, #3a3a1e); color: #fff; } :root[data-theme="dark"] .cta-title { color: #fff; } :root[data-theme="dark"] .site-footer { background: #1a1a12; color: #c6c6ab; } :root[data-theme="dark"] .site-footer .footer-brand .brand-name, :root[data-theme="dark"] .site-footer .footer-heading, :root[data-theme="dark"] .site-footer .footer-links a:hover { color: #fff; } :root[data-theme="dark"] .site-footer .footer-desc, :root[data-theme="dark"] .site-footer .footer-links a, :root[data-theme="dark"] .site-footer .footer-email a { color: #a0a48b; } :root[data-theme="dark"] .site-footer .footer-links a .icon, :root[data-theme="dark"] .site-footer .footer-email a .icon { color: var(--olive-500); } :root[data-theme="dark"] .site-footer .social-icon { background: rgba(255, 255, 255, 0.08); color: #fff; } :root[data-theme="dark"] .site-footer .social-icon:hover { background: var(--olive-600); } :root[data-theme="dark"] .site-footer .newsletter-form .form-control { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); color: #fff; } :root[data-theme="dark"] .footer-bottom { border-top-color: rgba(255, 255, 255, 0.1); } :root[data-theme="dark"] .footer-bottom .container { color: var(--gray-500); } :root[data-theme="dark"] .admin-sidebar { background: linear-gradient(180deg, #1e2410, #2e2a18); color: #dcdcc6; } :root[data-theme="dark"] .admin-sidebar .admin-brand-text, :root[data-theme="dark"] .admin-sidebar .admin-brand-text small { color: #ececdd; } :root[data-theme="dark"] .admin-sidebar .admin-nav-link, :root[data-theme="dark"] .admin-sidebar-footer .admin-nav-link, :root[data-theme="dark"] .admin-nav-group { color: #c6c6ab; } :root[data-theme="dark"] .admin-sidebar .admin-nav-link:hover, :root[data-theme="dark"] .admin-sidebar .admin-nav-link.active { background: rgba(255, 255, 255, 0.1); color: #fff; } :root[data-theme="dark"] .admin-sidebar .admin-nav-link.active .icon { color: #fff; } :root[data-theme="dark"] .admin-sidebar-toggle { background: rgba(255, 255, 255, 0.15); color: #fff; } :root[data-theme="dark"] .admin-logout-form .btn { border-color: rgba(255, 255, 255, 0.3); color: #fff; } /* ========================================================================== Base / Reset ========================================================================== */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--font-sans); color: var(--text); background: var(--white); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } /* ========================================================================== PRE-LOADER ========================================================================== */ .preloader { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: var(--white); transition: opacity 0.5s ease, visibility 0.5s ease; } :root[data-theme="dark"] .preloader { background: var(--gray-900); } .preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .preloader-inner { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; } .preloader-ring { position: absolute; width: 132px; height: 132px; border-radius: 50%; border: 3px solid var(--gray-200); border-top-color: var(--olive-600); animation: preloaderSpin 1s linear infinite; } :root[data-theme="dark"] .preloader-ring { border-color: rgba(255,255,255,0.15); border-top-color: var(--olive-500); } .preloader-logo { position: relative; width: 104px; height: 104px; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; background: var(--white); box-shadow: 0 4px 24px rgba(0,0,0,0.12); animation: preloaderPulse 1.6s ease-in-out infinite; padding: 6px; } .preloader-img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; } .preloader-mark { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--olive-600); color: var(--white); font-size: 2.6rem; font-weight: 800; border-radius: 50%; } .preloader-name { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em; color: var(--gray-800); } :root[data-theme="dark"] .preloader-name { color: var(--gray-200); } @keyframes preloaderSpin { to { transform: rotate(360deg); } } @keyframes preloaderPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } @media (prefers-reduced-motion: reduce) { .preloader-ring { animation: none; border-top-color: var(--gray-400); } .preloader-logo { animation: none; } } /* Icons */ .icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } .icon-sm { width: 16px; height: 16px; } a { color: var(--olive-700); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--olive-500); } h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; color: var(--gray-900); margin-bottom: 0.5rem; } .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 1.25rem; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; white-space: nowrap; } .muted { color: var(--text-muted); } .highlight { color: var(--purple-700); } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem; padding: 0.65rem 1.5rem; border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer; transition: all var(--transition); text-align: center; line-height: 1.2; } .btn:focus-visible { outline: 3px solid var(--purple-500); outline-offset: 2px; } .btn-primary { background: linear-gradient(135deg, var(--olive-700), var(--olive-600)); color: var(--white); border-color: var(--olive-700); } .btn-primary:hover { background: var(--olive-800); border-color: var(--olive-800); color: var(--white); transform: translateY(-1px); } .btn-outline { background: transparent; color: var(--olive-700); border-color: var(--olive-600); } .btn-outline:hover { background: var(--olive-50); color: var(--olive-800); } .btn-light { background: var(--white); color: var(--olive-800); } .btn-light:hover { background: var(--gray-100); } .btn-danger { background: var(--danger); color: var(--white); border-color: var(--danger); } .btn-danger:hover { background: var(--danger-dark); border-color: var(--danger-dark); } .btn-sm { padding: 0.4rem 0.9rem; font-size: 0.85rem; } .btn-block { width: 100%; } /* ========================================================================== Navbar ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--white); border-bottom: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); } .navbar-inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 1rem; } .brand { display: flex; align-items: center; gap: 0.75rem; } .brand-logo { height: 46px; width: auto; border-radius: 8px; } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; background: linear-gradient(135deg, var(--olive-700), var(--purple-700)); color: var(--white); font-weight: 800; font-size: 1.1rem; border-radius: 12px; } .brand-text { display: flex; flex-direction: column; line-height: 1.2; } .brand-name { font-weight: 800; color: var(--gray-900); font-size: 1.05rem; } .brand-tagline { font-size: 0.75rem; color: var(--text-muted); } .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; } .nav-toggle-bar { display: block; width: 26px; height: 3px; background: var(--olive-700); margin: 5px 0; border-radius: 3px; transition: transform var(--transition), opacity var(--transition); transform-origin: center; } .nav-toggle.open .nav-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav-toggle.open .nav-toggle-bar:nth-child(2) { opacity: 0; } .nav-toggle.open .nav-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .nav-menu { display: flex; align-items: center; gap: 1.25rem; } .nav-links { display: flex; list-style: none; gap: 1.25rem; } .nav-links a { color: var(--gray-700); font-weight: 500; font-size: 0.95rem; padding-bottom: 4px; border-bottom: 2px solid transparent; transition: color var(--transition), transform var(--transition), border-color var(--transition); } .nav-links a:hover { color: var(--olive-700); transform: translate(3px, -2px); } .nav-links a.active { color: var(--olive-800); border-bottom-color: var(--olive-600); } /* Nav dropdown (Blog) */ .nav-item-has-dropdown { position: relative; } .nav-item-has-dropdown > a { display: inline-flex; align-items: center; } .nav-arrow { display: inline-block; margin-left: 5px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid currentColor; transition: transform 0.25s ease; } .nav-item-has-dropdown:hover > a .nav-arrow, .nav-item-has-dropdown.open > a .nav-arrow { transform: rotate(180deg); } .nav-dropdown { position: absolute; top: 100%; left: 0; min-width: 180px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); list-style: none; padding: 0.5rem 0; margin: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; z-index: 60; } .nav-item-has-dropdown:hover .nav-dropdown, .nav-item-has-dropdown.open .nav-dropdown, .nav-item-has-dropdown:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown li { margin: 0; } .nav-dropdown a { display: block; padding: 0.55rem 1.1rem; color: var(--gray-700); font-weight: 500; font-size: 0.92rem; border-bottom: none; } .nav-dropdown a:hover { color: var(--olive-700); background: var(--gray-100); } .nav-dropdown a { border-bottom: none; } .nav-link-with-icon { display: inline-flex; align-items: center; gap: 0.45rem; } .nav-link-with-icon .icon { color: var(--olive-600); } .nav-link-with-icon:hover .icon, .nav-link-with-icon.active .icon { color: var(--olive-800); } .nav-search { display: flex; } .search-form { position: relative; } .search-input { padding: 0.5rem 2.4rem 0.5rem 0.9rem; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); font-size: 0.9rem; min-width: 180px; } .search-input:focus { outline: none; border-color: var(--olive-500); box-shadow: 0 0 0 3px rgba(111, 130, 64, 0.15); } .search-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--gray-600); } .search-btn:hover { color: var(--olive-700); } /* Live search dropdown (navbar) */ .live-search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 300; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); overflow: hidden; max-height: 380px; overflow-y: auto; } .live-search-results[hidden] { display: none; } .live-search-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--gray-100); transition: background var(--transition); } .live-search-item:last-of-type { border-bottom: none; } .live-search-item:hover { background: var(--gray-50); color: var(--text); } .live-search-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; } .live-search-thumb.placeholder { background: var(--gray-200); } .live-search-item-text { display: flex; flex-direction: column; min-width: 0; } .live-search-item-title { font-size: 0.9rem; font-weight: 600; color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .live-search-item-meta { font-size: 0.78rem; color: var(--text-muted); } .live-search-empty { padding: 0.75rem; color: var(--text-muted); font-size: 0.88rem; } .live-search-all { display: block; padding: 0.6rem 0.75rem; font-size: 0.85rem; font-weight: 600; color: var(--olive-700); text-decoration: none; background: var(--gray-50); text-align: center; } .live-search-all:hover { color: var(--olive-800); text-decoration: underline; } :root[data-theme="dark"] .live-search-results { background: var(--gray-800); border-color: var(--gray-700); } :root[data-theme="dark"] .live-search-item:hover { background: var(--gray-700); } :root[data-theme="dark"] .live-search-item-title { color: var(--gray-100); } /* Theme toggle in navbar (always visible, at the end/right) */ .nav-theme-toggle { flex-shrink: 0; order: 4; margin-left: 0.5rem; } @media (max-width: 992px) { .nav-theme-toggle { order: 2; } } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--gray-300); border-radius: 10px; background: var(--gray-50); color: var(--olive-700); cursor: pointer; transition: all var(--transition); } .theme-toggle:hover { border-color: var(--olive-500); color: var(--olive-800); background: var(--olive-50); } .theme-toggle .icon-sun { display: block; } .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle { color: var(--olive-300); background: var(--gray-100); } :root[data-theme="dark"] .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: block; } /* ========================================================================== Hero ========================================================================== */ .hero { background: linear-gradient(135deg, var(--olive-50) 0%, var(--purple-50) 100%); padding: 4rem 0; } .hero-inner { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 3rem; align-items: center; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--purple-100); color: var(--purple-700); padding: 0.25rem 0.9rem; border-radius: 20px; font-weight: 600; font-size: 0.8rem; margin-bottom: 1rem; } .hero-title { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; } .hero-role { font-size: 1.3rem; color: var(--olive-700); font-weight: 600; margin-bottom: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; } .hero-role .icon { color: var(--olive-600); } .hero-text { color: var(--gray-700); font-size: 1.05rem; max-width: 40rem; } .hero-mission { margin-top: 1rem; font-style: italic; color: var(--purple-700); display: flex; align-items: center; gap: 0.4rem; } .hero-mission .icon { color: var(--purple-600); } .hero-actions { margin-top: 1.5rem; display: flex; gap: 0.75rem; flex-wrap: wrap; } .hero-actions .btn { gap: 0.5rem; } .hero-photo { width: 100%; max-width: 380px; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 4px solid var(--white); background: linear-gradient(135deg, var(--olive-100), var(--purple-100)); } .hero-photo.placeholder { display: flex; align-items: center; justify-content: center; font-size: 4rem; font-weight: 800; color: var(--olive-700); } /* ========================================================================== Sections ========================================================================== */ .section { padding: 3.5rem 0; } .section-alt { background: var(--gray-50); } .section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 0.5rem; } .section-title { font-size: 1.7rem; margin-bottom: 0; display: flex; align-items: center; gap: 0.6rem; } .section-title .icon { color: var(--olive-600); } .section-link { font-weight: 600; color: var(--olive-700); } .section-link:hover { color: var(--olive-500); } /* ========================================================================== Cards ========================================================================== */ .card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .card-grid { display: grid; gap: 1.5rem; } .article-grid, .featured-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .recent-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .article-card-media { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--gray-100); } .article-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .article-card:hover .article-card-img { transform: scale(1.03); } .article-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--olive-100), var(--purple-100)); } .article-card-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; } .article-card-title { font-size: 1.15rem; } .article-card-title a { color: var(--gray-900); } .article-card-title a:hover { color: var(--olive-700); } .article-card-excerpt { color: var(--text-muted); font-size: 0.95rem; } .article-card-meta { margin-top: auto; display: flex; justify-content: space-between; align-items: center; color: var(--text-muted); font-size: 0.85rem; border-top: 1px solid var(--gray-200); padding-top: 0.75rem; } .read-more { color: var(--olive-700); font-weight: 600; } .read-more:hover { color: var(--olive-500); } .badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; } .badge-category { background: var(--purple-100); color: var(--purple-700); display: inline-flex; align-items: center; gap: 0.35rem; } .badge-category .icon { color: var(--purple-600); } .badge-category:hover { background: var(--purple-700); color: var(--white); } .badge-category:hover .icon { color: var(--white); } .article-card-meta time, .article-card-meta .read-more { display: inline-flex; align-items: center; gap: 0.4rem; } .article-card-meta time .icon { color: var(--olive-500); } .read-more { color: var(--olive-700); font-weight: 600; } .custom-badge { background: var(--olive-100); color: var(--olive-800); } /* ========================================================================== Two column / About preview ========================================================================== */ .two-col { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2.5rem; align-items: start; } .about-preview { position: sticky; top: 90px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); } .about-preview-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 1rem; } .about-preview-role { font-weight: 600; color: var(--olive-700); display: inline-flex; align-items: center; gap: 0.4rem; } .about-preview-role .icon { color: var(--olive-500); } .about-preview-role.muted { color: var(--text-muted); font-weight: 500; } .about-preview-mission { font-style: italic; color: var(--purple-700); margin: 0.75rem 0; display: flex; align-items: center; gap: 0.4rem; } .about-preview-mission .icon { color: var(--purple-600); } .about-preview .btn { margin-top: 0.5rem; gap: 0.5rem; } /* ========================================================================== CTA ========================================================================== */ .cta { background: linear-gradient(135deg, var(--olive-800), var(--purple-800)); color: var(--white); padding: 3.5rem 0; text-align: center; } .cta-title { color: var(--white); font-size: 2rem; display: flex; align-items: center; justify-content: center; gap: 0.6rem; } .cta-title .icon { color: var(--olive-100); } .cta-text { color: rgba(255,255,255,0.9); margin-bottom: 1.5rem; max-width: 40rem; margin-left: auto; margin-right: auto; } /* ========================================================================== Page header / category pills ========================================================================== */ .page-header { background: linear-gradient(135deg, var(--olive-50), var(--purple-50)); padding: 2.5rem 0 2rem; border-bottom: 1px solid var(--gray-200); } .page-title { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .page-title .icon { color: var(--olive-700); } .category-nav { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; } .category-pill { padding: 0.4rem 1rem; border: 1px solid var(--gray-300); border-radius: 20px; font-size: 0.85rem; font-weight: 500; color: var(--gray-700); background: var(--white); display: inline-flex; align-items: center; gap: 0.35rem; } .category-pill:hover { border-color: var(--olive-500); color: var(--olive-700); } .category-pill.active { background: var(--olive-700); border-color: var(--olive-700); color: var(--white); } .filter-note { color: var(--text-muted); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.4rem; } .filter-note .icon { color: var(--olive-600); } .tag-pill { color: var(--purple-700); font-size: 0.85rem; } .badge-category { display: inline-flex; align-items: center; gap: 0.35rem; } .meta-item { display: inline-flex; align-items: center; gap: 0.4rem; } .meta-item .icon { color: var(--olive-600); } /* ========================================================================== Article detail ========================================================================== */ .article-detail-container { max-width: 820px; } .article-detail-header { text-align: center; padding: 0.5rem 0 1.5rem; } .article-detail-title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-top: 0.75rem; } .article-detail-meta { color: var(--text-muted); margin-top: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .article-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; } .article-featured-image img { width: 100%; border-radius: var(--radius); } .article-content { font-size: 1.1rem; font-family: var(--font-serif); margin: 1.5rem 0 2rem; } .article-content p { margin-bottom: 1.25rem; } .article-nav { margin-top: 2rem; } .related-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } /* ========================================================================== Gallery ========================================================================== */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; } .gallery-card { position: relative; display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4/3; cursor: pointer; box-shadow: var(--shadow-sm); opacity: 0; transform: translateY(24px) scale(0.96); background-size: cover; background-position: center; transition: opacity 0.6s ease, transform 0.6s ease, box-shadow var(--transition); } .gallery-card.is-visible { opacity: 1; transform: translateY(0) scale(1); box-shadow: var(--shadow-md); } .gallery-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.6s ease; will-change: transform; filter: blur(8px) saturate(0.85); } .gallery-card.is-loaded .gallery-card-img { filter: blur(0) saturate(1); } .gallery-card:hover .gallery-card-img { transform: scale(1.15); } /* Grid/slice glitch reveal */ .gallery-card::before, .gallery-card::after { content: ""; position: absolute; inset: 0; background: inherit; background-size: cover; background-position: center; opacity: 0; pointer-events: none; z-index: 2; mix-blend-mode: screen; } .gallery-card.is-visible.is-loaded::before { animation: glitchSliceA 0.75s steps(2, end) 0.15s forwards; } .gallery-card.is-visible.is-loaded::after { animation: glitchSliceB 0.75s steps(2, end) 0.3s forwards; } @keyframes glitchSliceA { 0% { opacity: 0.85; transform: translateX(-7px); clip-path: polygon(0 0,100% 0,100% 18%,0 18%,0 22%,100% 22%,100% 45%,0 45%,0 50%,100% 50%,100% 74%,0 74%,0 78%,100% 78%,100% 100%,0 100%); } 20% { transform: translateX(7px); } 35% { transform: translateX(-5px); clip-path: polygon(0 10%,100% 10%,100% 32%,0 32%,0 56%,100% 56%,100% 68%,0 68%,0 88%,100% 88%,100% 100%,0 100%); } 50% { transform: translateX(5px); } 70% { transform: translateX(-3px); clip-path: polygon(0 4%,100% 4%,100% 26%,0 26%,0 40%,100% 40%,100% 62%,0 62%,0 82%,100% 82%,100% 100%,0 100%); } 100% { opacity: 0; transform: translateX(0); clip-path: polygon(0 0,100% 0,100% 100%,0 100%); } } @keyframes glitchSliceB { 0% { opacity: 0.85; filter: hue-rotate(90deg); transform: translateX(8px); clip-path: polygon(0 0,100% 0,100% 25%,0 25%,0 48%,100% 48%,100% 60%,0 60%,0 84%,100% 84%,100% 100%,0 100%); } 25% { transform: translateX(-6px); clip-path: polygon(0 8%,100% 8%,100% 30%,0 30%,0 54%,100% 54%,100% 72%,0 72%,0 90%,100% 90%,100% 100%,0 100%); } 50% { transform: translateX(6px); } 75% { transform: translateX(-4px); } 100% { opacity: 0; filter: hue-rotate(0deg); transform: translateX(0); clip-path: polygon(0 0,100% 0,100% 100%,0 100%); } } .gallery-card-title { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: var(--white); padding: 2rem 0.75rem 0.5rem; font-size: 0.9rem; font-weight: 600; opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease; } .gallery-card.is-visible .gallery-card-title { opacity: 1; transform: translateY(0); } .gallery-card-category { position: absolute; top: 0.5rem; left: 0.5rem; background: rgba(255,255,255,0.9); color: var(--olive-800); font-size: 0.7rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 12px; } @media (prefers-reduced-motion: reduce) { .gallery-card { opacity: 1; transform: none; transition: none; } .gallery-card-img { filter: none; transition: none; } .gallery-card-title { opacity: 1; transform: none; transition: none; } .gallery-card::before, .gallery-card::after { display: none; } } .gallery-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.75rem; } .gallery-preview-item { aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-sm); } .gallery-preview-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .gallery-preview-item:hover .gallery-preview-img { transform: scale(1.05); } .gallery-detail { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 2rem; margin-bottom: 2rem; } .gallery-detail-image img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-md); } .gallery-detail-info { display: flex; flex-direction: column; gap: 0.75rem; } .gallery-detail-info .btn { align-self: flex-start; } /* ========================================================================== Lightbox ========================================================================== */ .lightbox { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.9); align-items: center; justify-content: center; flex-direction: column; padding: 2rem; } .lightbox.open { display: flex; } .lightbox-img { max-width: 90vw; max-height: 80vh; object-fit: contain; border-radius: var(--radius-sm); transition: transform 0.12s ease-out; will-change: transform; } .lightbox-img.panned { max-width: none; max-height: none; transform-origin: center center; cursor: zoom-out; } .lightbox-caption { color: var(--white); margin-top: 1rem; text-align: center; } .lightbox-close { position: absolute; top: 1rem; right: 1.5rem; background: none; border: none; color: var(--white); font-size: 2.5rem; cursor: pointer; } /* ========================================================================== Profile & About ========================================================================== */ .profile-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 2.5rem; align-items: start; } .profile-photo { width: 100%; max-width: 380px; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-md); margin: 0 auto; } .profile-photo.placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--olive-100), var(--purple-100)); font-size: 4rem; font-weight: 800; color: var(--olive-700); } .profile-name { font-size: 2rem; margin-bottom: 0.25rem; } .profile-role { color: var(--olive-700); font-size: 1.2rem; font-weight: 600; } .profile-bio { margin: 1rem 0; color: var(--gray-700); } .social-links { display: flex; gap: 0.75rem; margin: 1rem 0; } .social-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--gray-100); color: var(--olive-700); transition: all var(--transition); } .social-icon:hover { background: var(--olive-700); color: var(--white); transform: translateY(-2px); } .about-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 2.5rem; align-items: start; } .about-photo { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-md); } .about-photo.placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--olive-100), var(--purple-100)); font-size: 4rem; font-weight: 800; color: var(--olive-700); aspect-ratio: 4/5; } .about-headline { font-size: 1.6rem; font-weight: 700; color: var(--purple-700); margin-bottom: 1.25rem; font-family: var(--font-serif); } .about-role-card { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.5rem; } .about-role { display: flex; flex-direction: column; gap: 0.25rem; } .role-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 600; display: inline-flex; align-items: center; gap: 0.35rem; } .role-label .icon { color: var(--olive-600); } .role-value { font-weight: 600; color: var(--gray-900); } .about-biography { color: var(--gray-700); margin-bottom: 1.5rem; } .about-biography p { margin-bottom: 1rem; } .awards-list { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .award-badge { border: 2px solid var(--olive-600); color: var(--olive-800); padding: 0.4rem 1.2rem; border-radius: 30px; font-weight: 700; font-size: 0.95rem; background: var(--olive-50); display: inline-flex; align-items: center; gap: 0.35rem; } .about-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; } .back-nav { margin-bottom: 1.25rem; } .profile-subheading { margin-top: 1.25rem; font-size: 1.1rem; display: flex; align-items: center; gap: 0.4rem; } .profile-subheading .icon { color: var(--olive-700); } .profile-achievements { padding-left: 1.25rem; color: var(--gray-700); list-style: none; } .profile-achievements li { margin-bottom: 0.35rem; display: flex; align-items: flex-start; gap: 0.4rem; } .profile-achievements li .icon { color: var(--olive-600); flex-shrink: 0; margin-top: 0.15rem; } .muted { display: inline-flex; align-items: center; gap: 0.4rem; } .muted .icon { color: var(--olive-600); } /* ========================================================================== Contact ========================================================================== */ .contact-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 2.5rem; align-items: start; } .contact-info p { color: var(--gray-700); margin-bottom: 1rem; } .contact-list { list-style: none; margin: 1rem 0; } .contact-list li { margin-bottom: 0.75rem; } .contact-label { display: block; font-size: 0.8rem; text-transform: uppercase; color: var(--text-muted); font-weight: 600; } .contact-cta { background: var(--purple-50); border: 1px solid var(--purple-100); border-radius: var(--radius); padding: 1.25rem; margin-top: 1.5rem; } .contact-form-wrap { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow-sm); } /* ========================================================================== Forms ========================================================================== */ .form { display: flex; flex-direction: column; gap: 1rem; } .form-group { margin-bottom: 0.4rem; display: flex; flex-direction: column; gap: 0.3rem; } .form-group label { font-weight: 600; font-size: 0.9rem; color: var(--gray-800); } .form-control { width: 100%; padding: 0.6rem 0.9rem; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); font-size: 0.95rem; font-family: var(--font-sans); transition: border-color var(--transition); background: var(--white); } .form-control:focus { outline: none; border-color: var(--olive-500); box-shadow: 0 0 0 3px rgba(111,130,64,0.15); } .form-control[type="file"] { padding: 0.5rem; } textarea.form-control { resize: vertical; } .form-error { color: var(--danger); font-size: 0.85rem; } .form-hint { font-size: 0.8rem; color: var(--text-muted); } .search-bar { display: flex; gap: 0.5rem; margin-top: 1rem; max-width: 560px; } .search-bar-input { flex: 1; } /* ========================================================================== Pagination ========================================================================== */ .pagination { display: flex; gap: 0.4rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; } .page-link { padding: 0.5rem 0.9rem; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); color: var(--olive-700); font-weight: 500; background: var(--white); } .page-link:hover { border-color: var(--olive-500); } .page-link.current, .page-link.current:hover { background: var(--olive-700); border-color: var(--olive-700); color: var(--white); } .page-link.disabled { color: var(--gray-400); cursor: not-allowed; } /* ========================================================================== Empty state ========================================================================== */ .empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); } .empty-state p { margin-bottom: 0.75rem; } /* ========================================================================== Alerts ========================================================================== */ .messages-container { margin-top: 1rem; } .alert { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.2rem; border-radius: var(--radius-sm); margin-bottom: 1rem; border: 1px solid transparent; font-size: 0.95rem; } .alert-success { background: var(--olive-50); border-color: var(--olive-500); color: var(--olive-900); } .alert-error, .alert-danger { background: #fdecea; border-color: var(--danger); color: var(--danger-dark); } .alert-info { background: var(--purple-50); border-color: var(--purple-500); color: var(--purple-900); } .alert-warning { background: #fef3e2; border-color: var(--warning); color: #7a4d0b; } .alert-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: inherit; line-height: 1; } /* ========================================================================== Documents & Videos Library ========================================================================== */ .document-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .doc-card { flex-direction: row; align-items: stretch; } .doc-card-icon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; min-width: 96px; width: 96px; background: var(--gray-50); color: var(--olive-700); border-right: 1px solid var(--gray-200); } .doc-badge { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; padding: 0.2rem 0.55rem; border-radius: 6px; text-transform: uppercase; } .doc-badge-pdf { background: #fdecea; color: var(--danger); } .doc-badge-docx { background: var(--purple-100); color: var(--purple-700); } .doc-badge-doc { background: var(--olive-100); color: var(--olive-800); } .doc-card-body { flex: 1; padding: 1.1rem; display: flex; flex-direction: column; gap: 0.45rem; } .doc-card-title { font-size: 1.05rem; } .doc-card-title a { color: var(--gray-900); } .doc-card-title a:hover { color: var(--olive-700); } .doc-card-meta { display: flex; gap: 0.9rem; color: var(--text-muted); font-size: 0.82rem; flex-wrap: wrap; } .doc-card-meta span { display: inline-flex; align-items: center; gap: 0.35rem; } .doc-card-meta .icon { color: var(--olive-500); } .doc-card-excerpt { color: var(--text-muted); font-size: 0.9rem; } .doc-card-actions { margin-top: auto; display: flex; gap: 0.6rem; flex-wrap: wrap; } .doc-detail-container { max-width: 860px; } .doc-detail-header { margin-bottom: 1.25rem; } .doc-detail-title { font-size: 2rem; margin: 0.75rem 0 0.5rem; } .doc-detail-meta { display: flex; flex-wrap: wrap; gap: 1.1rem; color: var(--text-muted); font-size: 0.9rem; } .doc-description { color: var(--text-muted); margin-bottom: 1rem; max-width: 720px; } .doc-toolbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 0; border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); margin-bottom: 1.5rem; } .doc-stats { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-muted); font-size: 0.9rem; } .doc-stats .icon { color: var(--olive-500); } .doc-reader { border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; background: var(--white); box-shadow: var(--shadow-sm); } .doc-reader-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 0.65rem 1rem; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); color: var(--gray-700); font-size: 0.88rem; } .doc-reader-bar span { display: inline-flex; align-items: center; gap: 0.4rem; } .doc-reader-bar .icon { color: var(--olive-600); } .pdf-viewer { width: 100%; height: 72vh; min-height: 420px; border: none; display: block; } .pdf-viewer-fallback[hidden] { display: none; } /* Mobile-friendly PDF.js reader */ .doc-pdf-canvas-wrap { position: relative; background: var(--gray-100); } .doc-pdf-scroll { display: flex; align-items: center; justify-content: center; gap: 0.6rem; height: 72vh; min-height: 420px; color: var(--text-muted); } .doc-pdf-scroll[hidden] { display: none; } .doc-pdf-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--gray-200); border-top-color: var(--olive-600); animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .doc-pdf-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 0.55rem 1rem; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); color: var(--gray-700); font-size: 0.88rem; } .doc-pdf-toolbar .icon { color: var(--olive-600); } .doc-pdf-info, .doc-pdf-nav, .doc-pdf-toolbar a { display: inline-flex; align-items: center; gap: 0.35rem; } .doc-pdf-nav { gap: 0.3rem; } .doc-pdf-nav button, .doc-pdf-toolbar .btn { padding: 0.25rem 0.6rem; font-size: 0.8rem; } .doc-pdf-canvas-wrap { position: relative; overflow-x: auto; min-height: 420px; } #docPdfCanvas { display: block; margin: 0 auto; box-shadow: var(--shadow-sm); background: var(--white); } .doc-pdf-message { position: absolute; inset: 0; margin: auto; width: max-content; max-width: 90%; padding: 1.5rem 2rem; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow-md); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .doc-pdf-message[hidden] { display: none; } /* Full-screen PDF viewer */ .doc-fullscreen { display: flex; flex-direction: column; min-height: 100vh; } .doc-fullscreen-toolbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 0.6rem 1rem; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); color: var(--gray-700); font-size: 0.88rem; } .doc-fullscreen-title { font-weight: 600; color: var(--gray-800); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .doc-fullscreen-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .doc-fullscreen-actions .doc-pdf-nav, .doc-fullscreen-actions .btn { display: inline-flex; align-items: center; gap: 0.35rem; } .doc-fullscreen-actions .doc-pdf-nav button, .doc-fullscreen-actions .btn { padding: 0.3rem 0.7rem; font-size: 0.82rem; } .doc-fullscreen-canvas { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 1rem; background: var(--gray-100); overflow: auto; } #docFullscreen #docPdfCanvas { margin: 0; box-shadow: var(--shadow-md); background: var(--white); } #docFullscreen .doc-pdf-scroll { height: 68vh; min-height: 320px; } @media (max-width: 640px) { .doc-fullscreen-title { max-width: 150px; } .doc-fullscreen-toolbar { padding: 0.5rem 0.6rem; } } .doc-text-content { padding: 2rem 2.5rem; max-height: 72vh; overflow-y: auto; font-size: 1rem; line-height: 1.75; color: var(--gray-800); } .doc-text-content p { margin-bottom: 1rem; } .video-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .video-card-media { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--gray-900); } .video-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .video-card:hover .video-card-img { transform: scale(1.03); } .video-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--gray-400); background: var(--gray-900); } .video-play { position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); border-radius: 50%; color: var(--white); transition: transform 0.25s ease, background 0.25s ease; } .video-card:hover .video-play { background: var(--olive-700); transform: scale(1.08); } .video-badge { position: absolute; top: 0.7rem; right: 0.7rem; font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 6px; text-transform: uppercase; background: rgba(0, 0, 0, 0.65); color: var(--white); } .video-duration { position: absolute; bottom: 0.7rem; left: 0.7rem; font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 6px; background: rgba(0, 0, 0, 0.65); color: var(--white); font-variant-numeric: tabular-nums; } .video-card-body { padding: 1.1rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; } .video-card-title { font-size: 1.05rem; } .video-card-title a { color: var(--gray-900); } .video-card-title a:hover { color: var(--olive-700); } .video-card-excerpt { color: var(--text-muted); font-size: 0.9rem; } .video-card-meta { margin-top: auto; display: flex; justify-content: space-between; align-items: center; color: var(--text-muted); font-size: 0.85rem; } .video-detail-container { max-width: 860px; } .video-player-wrap { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #000; border-radius: var(--radius); margin-bottom: 1.25rem; } .video-player { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } .video-detail-header { margin-bottom: 1rem; } .video-detail-title { font-size: 1.9rem; margin: 0.75rem 0 0.5rem; } .video-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; color: var(--text-muted); font-size: 0.9rem; } .video-description { color: var(--text-muted); margin-bottom: 1rem; max-width: 720px; } .list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .list-search { width: min(360px, 100%); } .list-search .search-input { width: 100%; } .tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; } .tag-row-label { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-muted); font-size: 0.85rem; } .sort-toggle { display: inline-flex; gap: 0.45rem; } .sort-toggle .category-pill { padding: 0.4rem 0.85rem; } .sort-toggle .category-pill .icon { vertical-align: -1px; } /* ========================================================================== Footer ========================================================================== */ .site-footer { background: var(--gray-900); color: var(--gray-300); margin-top: 2rem; } .footer-grid { display: grid; grid-template-columns: 1.4fr 0.8fr 1fr; gap: 2.5rem; padding: 3rem 1.25rem; } .footer-brand .brand-name { color: var(--white); } .footer-desc { color: var(--gray-400); margin: 0.75rem 0; font-size: 0.9rem; max-width: 32rem; } .footer-heading { color: var(--white); font-size: 1.05rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .footer-heading .icon { color: var(--olive-500); } .newsletter-heading { margin-top: 1.5rem; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 0.5rem; } .footer-links a { color: var(--gray-400); display: inline-flex; align-items: center; gap: 0.5rem; } .footer-links a .icon { color: var(--olive-500); } .footer-links a:hover { color: var(--olive-500); } .footer-links a:hover .icon { color: var(--olive-300); } .footer-email a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--gray-400); } .footer-email a .icon { color: var(--olive-500); } .footer-email a:hover { color: var(--olive-500); } .site-footer .social-icon { background: rgba(255,255,255,0.08); color: var(--white); } .site-footer .social-icon:hover { background: var(--olive-600); } .newsletter-form .newsletter-input-group { display: flex; gap: 0.5rem; max-width: 320px; } .newsletter-form .form-control { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: var(--white); } .newsletter-form .form-control::placeholder { color: var(--gray-400); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); } .footer-bottom .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.25rem; font-size: 0.85rem; color: var(--gray-500); } .footer-bottom a { color: var(--gray-400); } .footer-bottom-right { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .footer-bottom .social-links { margin: 0; } .footer-social-row { display: flex; justify-content: flex-end; padding: 1.25rem 1.25rem 0; } .footer-social-row .social-links { margin: 0; } /* ========================================================================== LOGIN ========================================================================== */ .login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, var(--olive-100), var(--purple-100)); padding: 1.5rem; } .login-card { background: var(--white); border-radius: var(--radius); padding: 2.5rem; width: 100%; max-width: 420px; box-shadow: var(--shadow-lg); text-align: center; } .login-logo, .login-mark { margin: 0 auto 1rem; } .login-title { font-size: 1.6rem; } .login-subtitle { color: var(--text-muted); margin-bottom: 1.5rem; } .login-form { text-align: left; display: flex; flex-direction: column; gap: 1rem; } .login-form .btn { margin-top: 0.5rem; } .login-back { display: block; margin-top: 1.25rem; font-size: 0.9rem; } .login-theme-toggle { position: absolute; top: 1rem; right: 1rem; background: var(--gray-100); border-color: var(--gray-200); } .login-card { position: relative; } /* ========================================================================== ADMIN / MANAGE ========================================================================== */ .admin-body { background: var(--gray-100); } .admin-layout { display: flex; min-height: 100vh; } .admin-sidebar { width: 260px; flex-shrink: 0; background: linear-gradient(180deg, var(--olive-900), var(--purple-900)); color: var(--gray-200); display: flex; flex-direction: column; padding: 1.25rem 0.5rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .admin-brand { display: flex; align-items: center; gap: 0.75rem; padding: 0 1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.1); } .admin-brand-logo { height: 40px; width: auto; border-radius: 8px; } .admin-brand-text { color: var(--white); font-weight: 700; line-height: 1.2; } .admin-brand-text small { color: var(--gray-400); font-weight: 500; } .admin-sidebar-toggle { display: none; } .admin-nav { display: flex; flex-direction: column; gap: 0.15rem; padding-top: 1rem; flex: 1; } .admin-nav-group { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-400); padding: 1rem 1rem 0.4rem; font-weight: 700; } .admin-nav-link { color: var(--gray-300); padding: 0.55rem 1rem; border-radius: var(--radius-sm); font-size: 0.92rem; transition: background var(--transition); display: flex; align-items: center; gap: 0.6rem; } .admin-nav-link .icon { color: var(--olive-500); opacity: 0.85; } .admin-nav-link:hover { background: rgba(255,255,255,0.1); color: var(--white); } .admin-nav-link:hover .icon { opacity: 1; } .admin-nav-link.active { background: rgba(255,255,255,0.15); color: var(--white); font-weight: 600; } .admin-nav-link.active .icon { color: var(--white); opacity: 1; } .admin-sidebar-footer { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; } .admin-sidebar-footer .admin-nav-link { color: var(--gray-300); } .admin-logout-form .btn { border-color: rgba(255,255,255,0.3); color: var(--white); } .admin-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .admin-topbar { background: var(--white); border-bottom: 1px solid var(--gray-200); padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 90; } .admin-topbar-title { font-weight: 700; color: var(--gray-900); font-size: 1.1rem; } .admin-user { display: flex; align-items: center; gap: 1rem; } .admin-user-name { font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.4rem; } .admin-user-logout { color: var(--danger); font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.35rem; } .admin-user-logout:hover { color: var(--danger-dark); } .admin-topbar-right { display: flex; align-items: center; gap: 1.25rem; } .admin-clock { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; border-radius: 10px; background: var(--gray-50); border: 1px solid var(--gray-200); } .admin-clock .icon { color: var(--olive-600); flex-shrink: 0; } .admin-clock-time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.95rem; color: var(--gray-900); letter-spacing: 0.3px; } .admin-greeting { color: var(--text-muted); font-size: 0.85rem; font-weight: 500; white-space: nowrap; } @media (max-width: 900px) { .admin-greeting { display: none; } } /* Notification bell */ .admin-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; color: var(--gray-600); background: var(--gray-50); border: 1px solid var(--gray-200); transition: background 0.2s ease, color 0.2s ease; } .admin-bell:hover { background: var(--gray-100); color: var(--olive-700); } .admin-bell.has-unread { background: var(--olive-50); border-color: var(--olive-300); color: var(--olive-700); } .admin-bell-badge { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 20px; background: var(--danger); color: var(--white); font-size: 0.72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; border: 2px solid var(--white); } .admin-content { padding: 1.5rem; } .admin-content .container.messages-container { margin-top: 0; } .admin-intro { color: var(--text-muted); margin-bottom: 1.25rem; } /* Admin stats */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .stat-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 1.25rem; display: flex; flex-direction: column; gap: 0.25rem; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; margin-bottom: 0.5rem; background: linear-gradient(135deg, var(--olive-100), var(--purple-100)); color: var(--olive-700); } .stat-number { font-size: 2rem; font-weight: 800; color: var(--olive-700); } .stat-label { color: var(--text-muted); font-size: 0.85rem; font-weight: 500; } .stat-card-today { background: linear-gradient(135deg, var(--olive-700), var(--olive-800)); border-color: var(--olive-700); color: var(--white); } .stat-card-today .stat-number { color: var(--white); } .stat-card-today .stat-label { color: rgba(255,255,255,0.85); } .dashboard-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; } /* Admin panels & tables */ .admin-panel { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; } .admin-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--gray-200); } .admin-panel-head h2 { margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; } .admin-panel-head h2 .icon { color: var(--olive-700); } .admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .admin-table th, .admin-table td { padding: 0.75rem 1.25rem; text-align: left; border-bottom: 1px solid var(--gray-100); vertical-align: middle; } .admin-table th { background: var(--gray-50); font-weight: 600; color: var(--gray-700); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; } .admin-table tr:hover td { background: var(--gray-50); } .admin-table tr.unread { background: var(--purple-50); } .table-actions { white-space: nowrap; display: flex; gap: 0.35rem; flex-wrap: wrap; } .table-actions .btn { gap: 0.35rem; padding-top: 0.28rem; padding-bottom: 0.28rem; } .social-name-cell { margin-left: 0.5rem; vertical-align: middle; } td .social-icon, .admin-table .social-icon { width: 28px; height: 28px; display: inline-flex; vertical-align: middle; } .admin-table td { vertical-align: middle; } .empty-cell { text-align: center; color: var(--text-muted); padding: 2rem !important; } .image-cell img { width: 60px; height: 45px; object-fit: cover; border-radius: var(--radius-sm); } .badge-status-draft { background: var(--gray-200); color: var(--gray-700); } .badge-status-published { background: var(--olive-100); color: var(--olive-800); } .badge-status-scheduled { background: var(--purple-100); color: var(--purple-700); } .badge-status-news { background: var(--purple-100); color: var(--purple-700); } .badge-status-article { background: var(--olive-100); color: var(--olive-800); } .recent-uploads { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 0.5rem; padding: 1rem; } .recent-upload-item { position: relative; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; } .recent-upload-item img { width: 100%; height: 100%; object-fit: cover; } .recent-upload-title { position: absolute; left: 0; right: 0; bottom: 0; font-size: 0.65rem; background: rgba(0,0,0,0.6); color: var(--white); padding: 0.2rem 0.4rem; } /* Admin toolbar & filters */ .admin-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; } .admin-filter { display: flex; gap: 0.5rem; flex-wrap: wrap; } .admin-filter .form-control { width: auto; min-width: 150px; } /* Admin form */ .admin-form { max-width: 860px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow-sm); } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .form-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; } .form-check-group { display: flex; gap: 1.5rem; margin: 1rem 0; flex-wrap: wrap; } .check-label { display: flex; align-items: center; gap: 0.4rem; font-weight: 500; } .check-label input[type="checkbox"] { transform: scale(1.2); accent-color: var(--olive-600); } .form-preview { margin-bottom: 1.25rem; text-align: center; } .form-preview img { max-height: 200px; border-radius: var(--radius-sm); } .message-detail { padding: 1.5rem; } .message-detail hr { margin: 1rem 0; border: none; border-top: 1px solid var(--gray-200); } .message-body { white-space: pre-wrap; } .confirm-card { max-width: 520px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow-sm); } .confirm-card p { margin-bottom: 1.25rem; } .confirm-card form { display: flex; gap: 0.75rem; } .confirm-icon { text-align: center; color: var(--danger); margin-bottom: 1rem !important; } .confirm-icon.alert { color: var(--warning); } .admin-note { margin: 1rem 0; padding: 0.9rem 1.2rem; background: var(--purple-50); border: 1px solid var(--purple-100); border-radius: var(--radius-sm); font-size: 0.9rem; } .inline-form { display: inline; } /* Upload progress */ .upload-progress { margin: 1rem 0; } .upload-error { margin-top: 0.5rem; } .progress-track { height: 12px; background: var(--gray-200); border-radius: 20px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } .progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--olive-600), var(--purple-600)); border-radius: 20px; transition: width 0.2s ease; } .progress-status { display: block; margin-top: 0.4rem; font-size: 0.85rem; color: var(--text-muted); } /* Library admin list helpers */ .table-thumb { width: 56px; height: 38px; object-fit: cover; border-radius: 6px; } .form-preview-img { max-height: 120px; border-radius: var(--radius-sm); margin-top: 0.5rem; display: block; } .badge-type-pdf { background: #fdecea; color: var(--danger); } .badge-type-docx, .badge-type-doc { background: var(--purple-100); color: var(--purple-700); } .badge-type-mp4, .badge-type-webm, .badge-type-video { background: var(--olive-100); color: var(--olive-800); } .upload-sheet { margin: 0.5rem 0; } .upload-progress-block { max-width: 860px; } .quick-actions { margin-top: 1.5rem; } .quick-action-buttons { display: flex; gap: 0.75rem; flex-wrap: wrap; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 992px) { .hero-inner, .two-col, .profile-layout, .about-layout, .contact-layout { grid-template-columns: 1fr; } .about-preview { position: static; } .gallery-detail { grid-template-columns: 1fr; } .dashboard-cols { grid-template-columns: 1fr; } .nav-toggle { display: block; } .site-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; } body:not(.admin-body):not(.login-body) { padding-top: 72px; } .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--white); border-bottom: 1px solid var(--gray-200); flex-direction: column; align-items: stretch; padding: 1rem 1.25rem; gap: 0.75rem; box-shadow: var(--shadow-md); } .nav-menu.open { display: flex; } .nav-links { flex-direction: column; gap: 0.25rem; } .nav-links a { display: block; padding: 0.6rem 0; border-bottom: 1px solid var(--gray-100); } .nav-links a:hover { transform: translateX(4px); } .nav-menu.open .nav-links li { opacity: 0; animation: navSlideIn 0.35s ease forwards; } .nav-menu.open .nav-links li:nth-child(1) { animation-delay: 0.05s; } .nav-menu.open .nav-links li:nth-child(2) { animation-delay: 0.1s; } .nav-menu.open .nav-links li:nth-child(3) { animation-delay: 0.15s; } .nav-menu.open .nav-links li:nth-child(4) { animation-delay: 0.2s; } .nav-menu.open .nav-links li:nth-child(5) { animation-delay: 0.25s; } .nav-menu.open .nav-links li:nth-child(6) { animation-delay: 0.3s; } .nav-menu.open .nav-links li:nth-child(7) { animation-delay: 0.35s; } .nav-search .search-input { width: 100%; } .nav-item-has-dropdown { position: static; } .nav-item-has-dropdown > a { border-bottom: 1px solid var(--gray-100); } .nav-dropdown { position: static; min-width: 0; box-shadow: none; border: none; border-radius: 0; padding: 0 0 0 1rem; margin: 0; background: var(--gray-50); opacity: 1; visibility: visible; transform: none; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; } .nav-item-has-dropdown.open .nav-dropdown { max-height: 200px; padding: 0.5rem 0 0.5rem 1rem; } .nav-dropdown a { padding: 0.5rem 0; border-bottom: 1px solid var(--gray-100); } .admin-sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform 0.3s ease; z-index: 150; } .admin-sidebar.open { transform: translateX(0); } .admin-sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255,255,255,0.15); border: none; color: var(--white); font-size: 1.25rem; border-radius: var(--radius-sm); cursor: pointer; } } @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; } .footer-bottom .container { justify-content: center; text-align: center; } .footer-social-row { justify-content: center; } .hero { padding: 2.5rem 0; } .section { padding: 2.5rem 0; } .about-role-card { grid-template-columns: 1fr; } .admin-content { padding: 1rem; } .admin-table { display: block; overflow-x: auto; white-space: nowrap; } } @media (max-width: 480px) { .article-grid, .featured-grid, .recent-grid, .related-grid, .document-grid, .video-grid { grid-template-columns: 1fr; } .doc-card { flex-direction: column; } .doc-card-icon { width: 100%; min-width: 0; border-right: none; border-bottom: 1px solid var(--gray-200); padding: 0.9rem; } .doc-text-content { padding: 1.25rem; } .pdf-viewer { height: 60vh; min-height: 320px; } .doc-pdf-scroll { height: 60vh; min-height: 320px; } .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .brand-tagline { display: none; } .hero-title { font-size: 1.8rem; } .card-grid { gap: 1rem; } } /* Mobile menu: staggered slide-in for links */ @keyframes navSlideIn { from { opacity: 0; transform: translateX(-15px); } to { opacity: 1; transform: translateX(0); } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ========================================================================== Social sharing buttons ========================================================================== */ .share-block { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 1.5rem 0 0.5rem; padding-top: 1.25rem; border-top: 1px solid var(--gray-200); } .share-label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); } .share-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; } .share-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: var(--white); transition: transform var(--transition), opacity var(--transition); } .share-btn:hover { transform: translateY(-2px); opacity: 0.9; color: var(--white); } .share-btn .icon { width: 18px; height: 18px; } .share-facebook { background: #1877f2; } .share-twitter { background: #111827; } .share-linkedin { background: #0a66c2; } .share-whatsapp { background: #25d366; } .share-email { background: var(--gray-700); } :root[data-theme="dark"] .share-twitter { background: #e7e9ea; color: #111827; } :root[data-theme="dark"] .share-twitter .icon { color: #111827; } /* ========================================================================== Cookie notice ========================================================================== */ .cookie-notice { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 500; max-width: 460px; margin: 0 auto; background: var(--white); color: var(--text); border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1rem 1.25rem; } .cookie-notice-inner { display: flex; gap: 0.75rem; align-items: flex-start; } .cookie-notice-icon { color: var(--olive-600); flex-shrink: 0; margin-top: 2px; } .cookie-notice-text { font-size: 0.88rem; margin: 0; line-height: 1.5; color: var(--text); } .cookie-notice-text a { color: var(--olive-700); text-decoration: underline; } .cookie-notice-actions { display: flex; gap: 0.5rem; flex-shrink: 0; flex-wrap: wrap; } .cookie-notice[hidden] { display: none; } @media (max-width: 520px) { .cookie-notice-inner { flex-direction: column; } } /* ========================================================================== Back to top button ========================================================================== */ .back-to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 400; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.9rem; border: none; cursor: pointer; background: var(--olive-600); color: var(--white); border-radius: 50px; font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600; box-shadow: var(--shadow-md); transition: opacity var(--transition), transform var(--transition), background var(--transition); opacity: 0; visibility: hidden; transform: translateY(12px); } .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: var(--olive-700); transform: translateY(-2px); } .back-to-top:focus-visible { outline: 2px solid var(--olive-500); outline-offset: 2px; } .back-to-top-label { line-height: 1; } @media (max-width: 520px) { .back-to-top { right: 0.85rem; bottom: 0.85rem; padding: 0.55rem 0.75rem; } } /* ========================================================================== Error page (404) ========================================================================== */ .error-page { text-align: center; padding: 4rem 1rem; } .error-container { max-width: 620px; display: flex; flex-direction: column; align-items: center; } .error-code { font-size: clamp(4rem, 12vw, 7rem); font-weight: 800; line-height: 1; color: var(--olive-500); opacity: 0.35; letter-spacing: 4px; } .error-logo { max-height: 110px; margin: 1.25rem auto 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow-md); } .error-logo-mark { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; margin: 1.25rem auto 1.5rem; border-radius: var(--radius); background: var(--olive-600); color: var(--white); font-size: 2.6rem; font-weight: 800; } .error-title { font-size: 1.6rem; margin: 0 0 0.75rem; color: var(--text); } .error-text { color: var(--text-muted); max-width: 460px; margin: 0 auto 1.75rem; } .error-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; margin-bottom: 1.25rem; } .error-help { font-size: 0.9rem; color: var(--text-muted); } .error-help a { color: var(--olive-700); text-decoration: underline; } /* ========================================================================== Website settings — SEO panel helpers ========================================================================== */ .seo-settings-block { margin-top: 1.5rem; padding: 1.25rem; border: 1px solid var(--gray-200); border-radius: var(--radius); background: var(--gray-50); } :root[data-theme="dark"] .seo-settings-block { background: rgba(255,255,255,0.02); } .form-help { display: block; margin-top: 0.3rem; font-size: 0.82rem; color: var(--text-muted); }