/* ============================================================ IRU ONLINE — Public stylesheet RTL-first (dir="rtl" on ). All accent borders use border-right. Sidebar/indent padding uses padding-right. Auto-margins that push to the LEFT use margin-right: auto. ============================================================ */ /* ----- Fonts ----- */ @font-face { font-family: 'MVFaseyha'; src: url('../fonts/MV_Faseyha.otf') format('opentype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'MVAWaheed'; src: url('../fonts/MVAWaheed.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } /* ----- Design tokens ----- */ :root { --orange: #e8601a; --orange-dk: #c24d0e; --orange-lt: #fff5ed; --orange-md: #fddcca; --ink: #111827; --ink-soft: #374151; --muted: #6b7280; --bg: #f1f5f9; --surface: #ffffff; --border: #e5e7eb; --shadow: 0 2px 12px rgba(0,0,0,.08); --shadow-h: 0 5px 20px rgba(0,0,0,.13); --radius: 10px; --radius-sm: 6px; } /* ----- Reset ----- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'MVFaseyha', 'MVAWaheed', sans-serif; background: var(--bg); color: var(--ink); font-size: 1.08rem; /* dir="rtl" is on so text-align defaults to right automatically */ line-height: 2.1; -webkit-font-smoothing: antialiased; } /* MVAWaheed for headings — it's a tighter display face, good for titles */ h1, h2, h3, h4, h5, h6, .featured-hero h2, .article-title, .site-logo-text, .nc-title, .sec-heading { font-family: 'MVAWaheed', 'MVFaseyha', sans-serif; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { cursor: pointer; font-family: inherit; } /* ============================================================ LAYOUT CONTAINER ============================================================ */ .page-wrap { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem; } /* ============================================================ TOPBAR — dark strip, date on RIGHT, actions on LEFT In RTL flex the first child (date span) sits at the right edge; tb-actions (second) naturally sit at the left edge. ============================================================ */ .site-topbar { background: linear-gradient(to right, #0c1322 0%, #111827 45%, #1c2a3a 100%); color: #94a3b8; font-size: .78rem; line-height: 1; } .site-topbar .inner { max-width: 1200px; margin: 0 auto; padding: .52rem 1.5rem; display: flex; align-items: center; justify-content: space-between; /* RTL: first child = right, second child = left */ } .site-topbar .tb-actions { display: flex; align-items: center; gap: .7rem; } .site-topbar a { color: #94a3b8; transition: color .15s; } .site-topbar a:hover { color: var(--orange); } .topbar-divider { color: #374151; user-select: none; } .topbar-btn { background: var(--orange); color: #fff !important; padding: .22rem .9rem; border-radius: 999px; font-size: .74rem; font-weight: 700; transition: background .15s; } .topbar-btn:hover { background: var(--orange-dk) !important; } /* ============================================================ SITE HEADER — white, logo on RIGHT, mobile toggle on LEFT In RTL flex: logo link (first) = right; mobile btn (second) = left ============================================================ */ .site-header { background: var(--surface); border-bottom: 3px solid var(--orange); padding: .85rem 0; } .site-header .inner { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; } .site-logo { height: 64px; width: auto; } .mobile-menu-btn { display: none; background: none; border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: .4rem .65rem; font-size: 1.2rem; color: var(--ink); } /* ============================================================ CATEGORY NAV — solid orange, sticky, white active underline ============================================================ */ .cat-nav { background: linear-gradient(to right, #b84510 0%, #e8601a 45%, #f2782e 100%); position: sticky; top: 0; z-index: 100; box-shadow: 0 3px 14px rgba(232,96,26,.35); } .cat-nav .inner { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none; } .cat-nav .inner::-webkit-scrollbar { display: none; } .cat-nav a { display: inline-flex; align-items: center; gap: .4rem; color: rgba(255,255,255,.82); padding: .72rem 1.05rem; font-size: .875rem; white-space: nowrap; border-bottom: 3px solid transparent; transition: color .15s, border-color .15s, background .15s; flex-shrink: 0; } .cat-nav a:hover { color: #fff; background: rgba(0,0,0,.1); } .cat-nav a.active { color: #fff; font-weight: 700; border-bottom-color: #fff; } /* ============================================================ FLASH MESSAGES — accent border on RIGHT (RTL) ============================================================ */ .flash-ok { background: #f0fdf4; color: #166534; border-right: 3px solid #16a34a; border-radius: var(--radius-sm); padding: .75rem 1rem; margin-bottom: 1.25rem; font-size: .88rem; } .flash-err { background: #fef2f2; color: #991b1b; border-right: 3px solid #dc2626; border-radius: var(--radius-sm); padding: .75rem 1rem; margin-bottom: 1.25rem; font-size: .88rem; } /* ============================================================ SECTION HEADING — accent bar on RIGHT (RTL) ============================================================ */ .sec-heading { font-size: .95rem; font-weight: 700; color: var(--ink); border-right: 4px solid var(--orange); padding-right: .75rem; /* indentation from the right border */ margin-bottom: 1.25rem; } /* ============================================================ FEATURED SECTION Grid: hero (right, larger) | 2 side-cards (left, narrower) In RTL grid, col-track-1 is the RIGHTMOST track. grid-template-columns: 2fr 1fr → 2fr = right, 1fr = left ✓ ============================================================ */ .featured-section { display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; margin-bottom: 2.5rem; } /* Hero card */ .featured-hero { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .featured-hero > img { width: 100%; height: 480px; object-fit: cover; display: block; } .featured-hero .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.08) 55%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.75rem; } .featured-hero .cat-pill { display: inline-block; background: var(--orange); color: #fff; font-size: .7rem; font-weight: 700; padding: .18rem .8rem; border-radius: 999px; margin-bottom: .75rem; width: fit-content; } .featured-hero h2 { font-size: 1.65rem; font-weight: 700; line-height: 1.5; color: #fff; margin-bottom: .6rem; } .featured-hero h2 a { color: #fff; } .featured-hero h2 a:hover { text-decoration: underline; } .featured-hero .meta { display: flex; align-items: center; gap: .75rem; font-size: .8rem; color: rgba(255,255,255,.72); } .featured-hero .meta i { color: #fdba74; } /* Side-card column — two cards stacked vertically */ .featured-side { display: flex; flex-direction: column; gap: 1.25rem; } .side-card { background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; flex: 1; display: flex; flex-direction: column; } .side-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-h); } .side-card-img { width: 100%; height: 134px; object-fit: cover; display: block; } .side-card-placeholder { height: 134px; background: linear-gradient(135deg, var(--orange-lt), #fde68a); display: flex; align-items: center; justify-content: center; color: var(--orange); font-size: 2rem; } .side-card-body { padding: .9rem 1rem; flex: 1; display: flex; flex-direction: column; } .side-card-cat { display: inline-block; background: var(--orange-lt); color: var(--orange-dk); font-size: .68rem; font-weight: 700; padding: .12rem .6rem; border-radius: 999px; margin-bottom: .45rem; width: fit-content; } .side-card-title { font-size: .95rem; font-weight: 700; line-height: 1.85; color: var(--ink); flex: 1; margin-bottom: .45rem; } .side-card-title a:hover { color: var(--orange); } .side-card-meta { font-size: .72rem; color: var(--muted); } .side-card-meta i { color: var(--orange); } /* ============================================================ NEWS GRID — 3 equal columns, cards lift on hover ============================================================ */ .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 3rem; } .news-card { background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; } .news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-h); } .news-card-img { width: 100%; height: 185px; object-fit: cover; display: block; } .nc-img-placeholder { height: 185px; background: linear-gradient(135deg, var(--orange-lt), #fde68a); display: flex; align-items: center; justify-content: center; color: var(--orange); font-size: 2.2rem; } .news-card-body { padding: 1rem; flex: 1; display: flex; flex-direction: column; } /* Shared category pill */ .cat-pill { display: inline-block; background: var(--orange-lt); color: var(--orange-dk); font-size: .7rem; font-weight: 700; padding: .15rem .65rem; border-radius: 999px; margin-bottom: .55rem; width: fit-content; transition: background .15s; } .cat-pill:hover { background: var(--orange-md); } .nc-title { font-size: 1rem; font-weight: 700; line-height: 1.85; flex: 1; color: var(--ink); margin-bottom: .6rem; } .nc-title a:hover { color: var(--orange); } .nc-meta { font-size: .75rem; color: var(--muted); display: flex; align-items: center; gap: .35rem; } .nc-meta i { color: var(--orange); font-size: .78rem; } /* Author avatar — shared between cards and article page */ .author-av { border-radius: 50%; flex-shrink: 0; object-fit: cover; display: inline-block; vertical-align: middle; } .author-av-init { display: inline-flex; align-items: center; justify-content: center; background: var(--orange-md); color: var(--orange-dk); font-family: 'MVAWaheed', sans-serif; font-weight: 700; border-radius: 50%; flex-shrink: 0; } .author-av-sm { width: 22px; height: 22px; font-size: .58rem; } .author-av-md { width: 40px; height: 40px; font-size: .9rem; } /* ============================================================ ARTICLE PAGE 2-column grid: article on RIGHT (1fr), sidebar on LEFT (290px) In RTL: first track (rightmost) = 1fr = article ✓ ============================================================ */ .article-layout { display: grid; grid-template-columns: 1fr 290px; gap: 2.5rem; align-items: start; } .article-cat-pill { display: inline-block; background: var(--orange); color: #fff; font-size: .75rem; font-weight: 700; padding: .22rem .9rem; border-radius: 999px; margin-bottom: .9rem; } .article-cat-pill:hover { background: var(--orange-dk); } .article-title { font-size: 1.9rem; font-weight: 700; line-height: 1.55; color: var(--ink); margin-bottom: .85rem; } .article-meta { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; font-size: .82rem; color: var(--muted); padding-bottom: 1.25rem; border-bottom: 2px solid var(--border); margin-bottom: 1.5rem; } .article-meta i { color: var(--orange); } .article-featured-img { width: 100%; border-radius: var(--radius); max-height: 440px; object-fit: cover; margin-bottom: 1.5rem; } .article-body { font-size: 1.12rem; line-height: 2.3; color: var(--ink-soft); } .article-body p { margin-bottom: 1.2rem; } /* Article sidebar */ .article-sidebar-card { background: var(--surface); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); position: sticky; top: 56px; } .article-sidebar-card h3 { font-size: .88rem; font-weight: 700; border-right: 3px solid var(--orange); /* RTL accent */ padding-right: .6rem; margin-bottom: 1rem; } /* Side article list inside sidebar */ .side-article { display: flex; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--border); } .side-article:last-child { border-bottom: none; padding-bottom: 0; } /* RTL flex: img (first) = right, text (second) = left */ .side-article img { width: 76px; height: 58px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; } .side-article-no-img { width: 76px; height: 58px; background: var(--orange-lt); border-radius: var(--radius-sm); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--orange); font-size: 1.1rem; } .side-article a { font-size: .83rem; font-weight: 600; line-height: 1.55; color: var(--ink); display: block; } .side-article a:hover { color: var(--orange); } .side-meta { font-size: .72rem; color: var(--muted); margin-top: .2rem; } /* ============================================================ COMMENTS ============================================================ */ .comments-section { margin-top: 2.5rem; } .comments-section h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 1.25rem; } .comment-card { background: var(--surface); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: .85rem; box-shadow: var(--shadow); border-right: 3px solid var(--orange-lt); /* RTL accent */ } .comment-author { font-weight: 700; font-size: .88rem; } .comment-time { font-size: .72rem; color: var(--muted); } .comment-text { font-size: .98rem; line-height: 2.1; margin-top: .4rem; color: var(--ink-soft); } .comment-form-card { background: var(--surface); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); margin-top: 1.25rem; } .comment-form-card h3 { font-size: .95rem; font-weight: 700; margin-bottom: 1rem; } /* ============================================================ FORMS (public pages) ============================================================ */ .form-group { margin-bottom: 1.1rem; } .form-label { display: block; font-size: .83rem; font-weight: 700; margin-bottom: .35rem; color: var(--ink); } .form-control { width: 100%; border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: .6rem .9rem; font-family: 'MVFaseyha', 'MVAWaheed', sans-serif; font-size: .9rem; color: var(--ink); background: var(--surface); direction: rtl; outline: none; transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; } .form-control:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232,96,26,.12); } select.form-control { cursor: pointer; } textarea.form-control { resize: vertical; line-height: 2; } textarea.dv { direction: rtl; } .form-hint { font-size: .75rem; color: var(--muted); margin-top: .3rem; } .d-none { display: none !important; } /* File input */ input[type="file"].form-control { padding: .45rem .9rem; } /* ============================================================ BUTTONS (public) ============================================================ */ .btn { display: inline-flex; align-items: center; gap: .45rem; border-radius: var(--radius-sm); padding: .6rem 1.3rem; font-family: 'MVFaseyha', 'MVAWaheed', sans-serif; font-size: .88rem; font-weight: 700; cursor: pointer; border: none; transition: background .15s, transform .1s; line-height: 1.4; white-space: nowrap; } .btn:active { transform: scale(.98); } .btn-primary { background: var(--orange); color: #fff; } .btn-primary:hover { background: var(--orange-dk); color: #fff; } .btn-secondary { background: #f3f4f6; color: var(--ink); } .btn-secondary:hover { background: #e5e7eb; } .btn-outline { background: transparent; border: 1.5px solid var(--border); color: var(--ink-soft); } .btn-outline:hover { border-color: var(--orange); color: var(--orange); } .btn-danger { background: #fef2f2; color: #dc2626; } .btn-danger:hover { background: #fee2e2; } .btn-sm { padding: .36rem .9rem; font-size: .8rem; } .btn-full { width: 100%; justify-content: center; } /* ============================================================ STATUS BADGES (shared public/admin) ============================================================ */ .badge { display: inline-block; padding: .18rem .75rem; border-radius: 999px; font-size: .72rem; font-weight: 700; } .badge-pending { background: #fef9c3; color: #854d0e; } .badge-approved { background: #dcfce7; color: #166534; } .badge-rejected { background: #fee2e2; color: #991b1b; } .badge-needs_revision { background: #fef3c7; color: #92400e; } /* Revision page */ .revision-feedback-box { border-right: 4px solid #f59e0b; background: #fffbeb; border-radius: var(--radius); overflow: hidden; } .revision-feedback-header { background: #fef3c7; color: #92400e; font-weight: 700; font-size: .85rem; padding: .65rem 1rem; } .revision-feedback-body { padding: 1rem 1.1rem; font-size: .95rem; line-height: 2; color: #78350f; direction: rtl; } .revision-teacher-version { background: #fff; border: 1.5px solid #e5e7eb; border-right: 4px solid #6366f1; border-radius: var(--radius); overflow: hidden; } .rtv-label { background: #eef2ff; color: #4338ca; font-size: .75rem; font-weight: 700; padding: .5rem 1rem; } .rtv-body { padding: 1rem 1.1rem; font-size: .95rem; line-height: 2.1; color: var(--ink-soft); direction: rtl; white-space: pre-wrap; } .badge-student { background: #eff6ff; color: #1d4ed8; } .badge-teacher { background: #f0fdf4; color: #166534; } .badge-admin { background: #fef2f2; color: #dc2626; } /* ============================================================ FOOTER — dark, 3 columns, logo+tagline on RIGHT (first col) In RTL grid: first column = rightmost ✓ ============================================================ */ .site-footer { background: linear-gradient(135deg, #1b2d42 0%, #111827 45%, #090e18 100%); color: #94a3b8; padding: 3rem 0 0; margin-top: 4rem; } .footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; display: grid; grid-template-columns: 1fr; gap: 3rem; } .footer-logo { height: 52px; margin-bottom: .75rem; } .footer-tagline { font-size: .85rem; color: #6b7280; line-height: 1.85; } .footer-col h4 { font-size: .78rem; font-weight: 700; color: #e5e7eb; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .75rem; } .footer-links { list-style: none; } .footer-links li { margin-bottom: .4rem; } .footer-links a { font-size: .85rem; color: #94a3b8; transition: color .15s; } .footer-links a:hover { color: var(--orange); } .footer-bottom { max-width: 1200px; margin: 2rem auto 0; padding: 1.25rem 1.5rem; border-top: 1px solid #1f2937; display: flex; align-items: center; justify-content: space-between; font-size: .78rem; color: #6b7280; } /* ============================================================ LOGIN PAGE — standalone, centered card ============================================================ */ .login-page { min-height: 100vh; background: linear-gradient(145deg, var(--orange-lt) 0%, var(--bg) 55%); display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; } .login-card { background: var(--surface); border-radius: 16px; padding: 2.5rem 2rem; box-shadow: 0 8px 40px rgba(0,0,0,.12); width: 100%; max-width: 380px; text-align: center; } .login-logo { height: 78px; margin: 0 auto 1rem; } .login-title { font-size: 1.3rem; font-weight: 700; color: var(--ink); margin-bottom: .25rem; } .login-sub { font-size: .83rem; color: var(--muted); margin-bottom: 1.75rem; } .login-card .form-group { text-align: right; } .login-error { background: #fef2f2; color: #991b1b; border-right: 3px solid #dc2626; /* RTL accent */ border-radius: var(--radius-sm); padding: .65rem 1rem; font-size: .85rem; margin-bottom: 1rem; text-align: right; } /* ============================================================ STUDENT PANEL 2-column grid: sidebar on RIGHT (240px), content on LEFT (1fr) In RTL: first track = rightmost = 240px = sidebar ✓ ============================================================ */ .student-panel { display: grid; grid-template-columns: 240px 1fr; gap: 2rem; align-items: start; } .student-sidebar-card { background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .student-sidebar-top { background: var(--orange); padding: 1.25rem; color: #fff; text-align: center; } .student-sidebar-top .s-name { font-weight: 700; font-size: 1rem; } .student-sidebar-top .s-role { font-size: .75rem; opacity: .85; margin-top: .15rem; } .s-avatar-wrap { position: relative; display: inline-block; margin-bottom: .75rem; } .s-avatar-img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,.4); } .s-avatar-init { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-family: 'MVAWaheed', sans-serif; font-weight: 700; border: 3px solid rgba(255,255,255,.4); } .s-avatar-upload { position: absolute; bottom: 0; left: 0; width: 22px; height: 22px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--orange-dk); font-size: .7rem; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.2); } .student-sidebar-nav { padding: .5rem; } .student-sidebar-nav a { display: flex; align-items: center; gap: .6rem; padding: .6rem .85rem; border-radius: var(--radius-sm); font-size: .88rem; color: var(--ink); border-right: 3px solid transparent; /* RTL: active indicator placeholder */ transition: background .15s, border-color .15s, color .15s; } .student-sidebar-nav a:hover { background: var(--bg); } .student-sidebar-nav a.active { background: var(--orange-lt); color: var(--orange-dk); font-weight: 700; border-right-color: var(--orange); /* RTL active indicator */ } .student-sidebar-nav a.danger { color: #dc2626; } .student-sidebar-nav a.danger:hover { background: #fef2f2; } /* ============================================================ CATEGORY PAGE ============================================================ */ .cat-page-header { background: var(--surface); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 2rem; box-shadow: var(--shadow); display: flex; align-items: center; gap: 1rem; /* RTL: icon (first) = right, text (second) = left */ } .cat-page-icon { width: 48px; height: 48px; background: var(--orange); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.3rem; flex-shrink: 0; } .cat-page-header h1 { font-size: 1.4rem; font-weight: 700; } /* ============================================================ HOME — BOTTOM GRID (categories + most viewed) RTL: categories (2fr) on RIGHT, most viewed (1fr) on LEFT ============================================================ */ .home-bottom-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2.5rem; align-items: start; margin-top: 2rem; } /* Category cards */ .cat-cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; } .cat-card-item { display: flex; align-items: center; gap: .85rem; background: var(--surface); border-radius: var(--radius); padding: .9rem 1rem; box-shadow: var(--shadow); text-decoration: none; color: var(--ink); transition: transform .18s, box-shadow .18s; } .cat-card-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-h); } .cci-icon { width: 10px; align-self: stretch; border-radius: 4px; flex-shrink: 0; } .cci-name { font-weight: 700; font-size: .9rem; line-height: 1.4; } .cci-count { font-size: .72rem; color: var(--muted); margin-top: .1rem; } /* Most viewed list */ .mv-list { display: flex; flex-direction: column; } .mv-item { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--ink); transition: color .15s; } .mv-item:last-child { border-bottom: none; } .mv-item:hover .mv-title { color: var(--orange); } .mv-rank { width: 26px; height: 26px; border-radius: 50%; background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; flex-shrink: 0; } .mv-item:nth-child(1) .mv-rank { background: var(--orange-dk); } .mv-item:nth-child(2) .mv-rank { background: var(--orange); } .mv-item:nth-child(3) .mv-rank { background: #f59e0b; } .mv-item:nth-child(n+4) .mv-rank { background: #d1d5db; color: var(--ink); } .mv-thumb { width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; max-width: none; } .mv-thumb-placeholder { background: var(--orange-lt); display: flex; align-items: center; justify-content: center; color: var(--orange); font-size: 1.1rem; } .mv-body { flex: 1; min-width: 0; } .mv-title { font-weight: 700; font-size: .88rem; line-height: 1.6; transition: color .15s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mv-meta { display: flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--muted); margin-top: .25rem; } .mv-meta i { color: var(--orange); } /* ============================================================ PAGINATION ============================================================ */ .pagination { display:flex; justify-content:center; align-items:center; gap:.3rem; margin:2rem 0 1rem; } .pg-btn { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 .5rem; border-radius:var(--radius-sm); font-size:.85rem; font-weight:600; color:var(--ink); background:var(--surface); border:1.5px solid var(--border); text-decoration:none; transition:background .15s, border-color .15s, color .15s; } .pg-btn:hover { background:var(--orange-lt); border-color:var(--orange); color:var(--orange-dk); } .pg-btn.pg-active { background:var(--orange); border-color:var(--orange); color:#fff; } .pg-btn.pg-disabled { opacity:.35; pointer-events:none; } .pg-ellipsis { color:var(--muted); padding:0 .2rem; font-size:.85rem; } /* ============================================================ RESPONSIVE ============================================================ */ /* 960px — two-column layouts collapse */ @media (max-width: 960px) { .home-bottom-grid { grid-template-columns: 1fr; gap: 2rem; } .featured-section { grid-template-columns: 1fr; } .featured-hero > img { height: 340px; } .featured-side { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .side-card { flex-direction: row; } .side-card-img, .side-card-placeholder { width: 120px; flex-shrink: 0; height: auto; min-height: 110px; border-radius: var(--radius) 0 0 var(--radius); } .side-card-body { flex: 1; } .news-grid { grid-template-columns: repeat(2, 1fr); } .article-layout { grid-template-columns: 1fr; } .article-sidebar-card { position: static; } } /* 768px — mobile nav + student sidebar compact */ @media (max-width: 768px) { /* ── Site header: sticky on mobile so hamburger is always reachable ── */ .site-header { position: sticky; top: 0; z-index: 200; box-shadow: 0 2px 8px rgba(0,0,0,.09); } /* ── Show hamburger button ── */ .mobile-menu-btn { display: flex; align-items: center; justify-content: center; } /* ── Cat-nav: hidden by default, shown as dropdown when .open ── */ .cat-nav { position: static; display: none; box-shadow: none; } .cat-nav.open { display: block; box-shadow: 0 6px 24px rgba(0,0,0,.22); } .cat-nav .inner { flex-direction: column; padding: .3rem 0; overflow-x: visible; max-width: 100%; } .cat-nav a { padding: .82rem 1.35rem; white-space: normal; border-bottom: 1px solid rgba(255,255,255,.1); border-bottom-color: rgba(255,255,255,.1); } .cat-nav a:last-child { border-bottom: none; } .cat-nav a.active { border-bottom-color: rgba(255,255,255,.1); border-right: 3px solid rgba(255,255,255,.85); background: rgba(0,0,0,.12); color: #fff; font-weight: 700; } /* ── Student sidebar: compact top bar ── */ .student-panel { grid-template-columns: 1fr; gap: 1rem; } .student-sidebar-top { padding: .85rem 1.1rem; text-align: right; display: flex; align-items: center; gap: .85rem; } .s-avatar-wrap { margin-bottom: 0; flex-shrink: 0; } .s-avatar-init { width: 44px !important; height: 44px !important; font-size: 1rem !important; } .s-avatar-img { width: 44px !important; height: 44px !important; } .s-avatar-upload { width: 18px; height: 18px; font-size: .6rem; } .student-sidebar-nav { display: flex; flex-wrap: wrap; gap: .3rem; padding: .65rem; border-top: 1px solid rgba(0,0,0,.07); } .student-sidebar-nav a { border-right: none; border-radius: 999px; font-size: .78rem; padding: .35rem .85rem; flex: 0 0 auto; } .student-sidebar-nav a.active { border-right-color: transparent; background: var(--orange-lt); color: var(--orange-dk); font-weight: 700; } } /* 600px — compact everywhere, news stays 2-col */ @media (max-width: 600px) { .page-wrap { padding: .85rem .9rem; } /* Topbar: hide date, keep user actions */ .site-topbar .inner > span:first-child { display: none; } /* Header */ .site-logo { height: 44px; } /* Featured hero */ .featured-hero > img { height: 210px; } .featured-hero h2 { font-size: 1.05rem; line-height: 1.45; } .featured-hero .overlay { padding: .9rem 1rem; } .featured-hero .meta { font-size: .7rem; gap: .4rem; } /* Side cards: single column on very small screens */ .featured-side { grid-template-columns: 1fr; } .side-card { flex-direction: column; } .side-card-img, .side-card-placeholder { width: 100%; height: 150px; border-radius: var(--radius) var(--radius) 0 0; } /* News grid stays 2 columns — reduce image height & text to fit */ .news-card-img, .nc-img-placeholder { height: 120px; } .cat-cards-grid { grid-template-columns: repeat(2, 1fr); } .mv-thumb { width: 50px; height: 50px; } .nc-title { font-size: .88rem; line-height: 1.7; } .nc-meta { font-size: .7rem; } .news-card-body { padding: .65rem .75rem; } /* Article page */ .article-title { font-size: 1.25rem; line-height: 1.5; } .article-meta { gap: .5rem; font-size: .75rem; } .article-body { font-size: .98rem; line-height: 2.0; } .article-featured-img { max-height: 210px; } /* Comments */ .comment-card { padding: .85rem .9rem; } .comment-form-card { padding: 1rem .9rem; } /* Footer */ .footer-inner { grid-template-columns: 1fr; gap: 1.5rem; } .footer-bottom { flex-direction: column; gap: .4rem; text-align: center; } /* Login */ .login-card { padding: 1.75rem 1.25rem; } }