/* ========================================================================== SoftwareCMS — "Dark Utility" design system ========================================================================== */ :root { --bg: #0f1117; --surface: #1a1d27; --surface2: #22263a; --border: #2e3248; --accent: #4f8ef7; --accent-hover: #3a7ae8; --green: #22c55e; --red: #ef4444; --grey-badge: #6b7280; --text: #e2e8f0; --text-muted: #8892a4; --text-dim: #4a5568; --freeware: #10b981; --shareware: #f59e0b; --opensource: #6366f1; --trial: #ec4899; --radius: 8px; } /* Light theme values — applied via the manual toggle (data-theme="light" on ), and also automatically when the OS is in light mode AND the visitor has not made an explicit dark choice (see the @media block below). accent/green/red/freeware/shareware/opensource/trial stay the same in both themes; only the base surface/text/border tokens flip. */ [data-theme="light"] { --bg: #f0f2f5; --surface: #ffffff; --surface2: #f5f7fa; --border: #e2e8f0; --text: #1a202c; --text-muted: #4a5568; --text-dim: #a0aec0; } /* Respect the OS/browser "light" preference only when the visitor hasn't made an explicit choice via the toggle. An explicit data-theme="dark" always wins over this; data-theme="light" is already covered above. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]) { --bg: #f0f2f5; --surface: #ffffff; --surface2: #f5f7fa; --border: #e2e8f0; --text: #1a202c; --text-muted: #4a5568; --text-dim: #a0aec0; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* Always reserve the vertical scrollbar's width, even on short pages that don't need to scroll — otherwise the page content jumps left/ right by the scrollbar's width when navigating between a tall page and a short one. scrollbar-gutter is the modern way; overflow-y is the fallback for browsers that don't support it yet. */ overflow-y: scroll; scrollbar-gutter: stable; } body { margin: 0; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; /* No overflow-x:hidden here on purpose — it breaks position:sticky on any ancestor (the homepage/post sidebar uses it), which is what caused the sidebar to float over the content instead of sitting in its own column. The min-width:0 grid-children fix below plus overflow-wrap are what actually stop the page from ever growing wider than the viewport; that's enough on its own. */ /* Long unbroken strings (URLs, slugs, filenames) wrap instead of forcing the page wider than the viewport. */ overflow-wrap: break-word; word-break: break-word; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } img { max-width: 100%; } .container { max-width: 1240px; margin: 0 auto; padding: 0 20px; } .version, .file-size, code { font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, Consolas, monospace; } /* ---------------------------------------------------------------------- */ /* Header */ /* ---------------------------------------------------------------------- */ /* Top slim strip: quick links (left) + theme/lang toggles (right) */ .topbar { background: #0a0a0f; padding: 6px 0; font-size: .78rem; border-bottom: 1px solid var(--border); } .topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .topbar-right { display: flex; align-items: center; gap: 10px; } .topbar .lang-switcher { padding: 3px 8px; font-size: 11.5px; } /* Browser-language suggestion banner — dismissible, never auto-applied */ .lang-suggest-bar { background: rgba(79, 142, 247, .12); border-bottom: 1px solid var(--border); } .lang-suggest-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 20px; font-size: .82rem; color: var(--text); } .lang-suggest-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .lang-suggest-switch { color: var(--accent); font-weight: 700; text-decoration: none; } .lang-suggest-switch:hover { text-decoration: underline; } .lang-suggest-dismiss { color: var(--text-muted); text-decoration: none; font-size: .9rem; line-height: 1; } .lang-suggest-dismiss:hover { color: var(--text); } .site-header { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 0; flex-wrap: wrap; } .logo-block { display: flex; align-items: center; gap: 12px; color: var(--text); flex-shrink: 0; } .logo-block:hover { color: var(--text); } .logo-icon { width: 52px; height: 52px; border-radius: 12px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; overflow: hidden; } .logo-icon img { width: 100%; height: 100%; object-fit: cover; } .logo-text { display: flex; flex-direction: column; line-height: 1.25; } .logo-name { font-size: 20px; font-weight: 700; color: var(--text); } .logo-text .tagline { font-size: 12px; font-weight: 400; color: var(--text-muted); letter-spacing: .02em; } .search-form { display: flex; flex: 1; max-width: 460px; position: relative; } .search-form-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; opacity: .6; pointer-events: none; } .search-form input { flex: 1; padding: 10px 14px 10px 36px; background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-radius: 999px 0 0 999px; font-size: 13px; outline: none; } .search-form input::placeholder { color: var(--text-dim); } .search-form input:focus { border-color: var(--accent); } .search-form button { padding: 10px 20px; background: var(--accent); color: #fff; border: none; border-radius: 0 999px 999px 0; cursor: pointer; font-size: 13px; font-weight: 600; } .search-form button:hover { background: var(--accent-hover); } /* Sticky dark/light switch — fixed to the bottom-left of the viewport, styled as a real toggle switch (sliding thumb) rather than an icon button, per the site's own convention request. */ .theme-toggle-fab { position: fixed; left: 18px; bottom: 18px; z-index: 999; display: inline-flex; align-items: center; width: 58px; height: 32px; padding: 3px; background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.28); } .theme-toggle-fab .toggle-track-icon { flex: 1; text-align: center; font-size: 12px; opacity: .5; } .theme-toggle-fab .toggle-thumb { position: absolute; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: transform .25s ease; } .theme-toggle-fab[data-theme-state="dark"] .toggle-thumb { transform: translateX(26px); } @media (max-width: 640px) { .theme-toggle-fab { left: 12px; bottom: 12px; } } .lang-switcher { padding: 8px 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-size: 12.5px; font-weight: 600; cursor: pointer; flex-shrink: 0; } .lang-switcher:focus { border-color: var(--accent); outline: none; } /* ---------------------------------------------------------------------- */ /* Layout */ /* ---------------------------------------------------------------------- */ main.container { padding: 28px 20px 56px; min-height: 60vh; } /* Hero banner — sits inside main-col, side-by-side with the sidebar */ .hero-banner { background: radial-gradient(circle at 12% 22%, rgba(255,255,255,.12) 0, rgba(255,255,255,.12) 2px, transparent 2px), radial-gradient(circle at 60% 15%, rgba(255,255,255,.1) 0, rgba(255,255,255,.1) 2px, transparent 2px), radial-gradient(circle at 80% 60%, rgba(255,255,255,.1) 0, rgba(255,255,255,.1) 2px, transparent 2px), radial-gradient(circle at 30% 80%, rgba(255,255,255,.08) 0, rgba(255,255,255,.08) 2px, transparent 2px), linear-gradient(120deg, #1c2450 0%, #2f2470 55%, #1a1f3a 100%); padding: 40px; border-radius: var(--radius); margin-bottom: 28px; position: relative; overflow: hidden; } .hero-banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; } .hero-text { flex: 1; } .hero-title { font-size: 2rem; font-weight: 800; color: #fff; line-height: 1.2; margin: 0 0 14px; } .hero-title-accent { color: var(--accent); } .hero-subtitle { color: rgba(255,255,255,.7); font-size: 1rem; margin: 0 0 28px; line-height: 1.6; } .hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; } .hero-btn-primary { background: linear-gradient(135deg, var(--accent), var(--opensource)); color: #fff; padding: 12px 26px; border-radius: 999px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 6px 18px rgba(79,142,247,.35); transition: transform .2s, box-shadow .2s; } .hero-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(79,142,247,.5); color: #fff; } .hero-btn-secondary { background: rgba(255,255,255,.1); color: #fff; padding: 12px 26px; border-radius: 999px; font-weight: 600; text-decoration: none; border: 1px solid rgba(255,255,255,.3); display: inline-flex; align-items: center; gap: 8px; transition: transform .2s, background .2s; } .hero-btn-secondary:hover { background: rgba(255,255,255,.18); color: #fff; transform: translateY(-2px); } .hero-illustration { flex-shrink: 0; align-self: center; position: relative; width: 260px; max-width: 38%; margin: 0 4px 14px 0; } .hero-laptop { position: relative; } .hero-laptop-screen { position: relative; display: flex; align-items: center; justify-content: center; gap: 14%; aspect-ratio: 16 / 10; background: linear-gradient(160deg, #0e1730 0%, #1a2547 100%); border: 3px solid rgba(255,255,255,.18); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.45); } .hero-laptop-base { height: 16px; margin: 0 -9%; background: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.06)); border-radius: 0 0 10px 10px; } .hero-laptop-icon { font-size: 1.7rem; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); } .hero-laptop-icon-win { color: #4f8ef7; } .hero-laptop-shield { position: absolute; right: -8%; bottom: -18%; font-size: 2.6rem; filter: drop-shadow(0 12px 18px rgba(0,0,0,.45)); } .hero-laptop-shield-check { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.3rem; font-weight: 800; padding-bottom: 10%; } .hero-dots { display: flex; justify-content: center; gap: 8px; padding: 20px 0 0; } .hero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.3); } .hero-dot.active { background: #fff; width: 20px; border-radius: 4px; } @media (max-width: 768px) { .hero-banner-inner { flex-direction: column; text-align: center; } .hero-buttons { justify-content: center; } .hero-illustration { width: 220px; max-width: 70vw; margin: 0 auto; } .hero-title { font-size: 1.8rem; } } .breadcrumb { font-size: 13px; color: var(--text-muted); margin-bottom: 18px; } .breadcrumb a { color: var(--text-muted); } .breadcrumb a:hover { color: var(--accent); } .breadcrumb .sep { margin: 0 6px; color: var(--text-dim); } .breadcrumb .current { color: var(--text); } .page-title { font-size: 22px; margin: 0 0 18px; letter-spacing: -.01em; } .section-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .section-heading-row .page-title { margin: 0; } .view-all-link { color: var(--accent); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; } .view-all-link:hover { text-decoration: underline; } .tabs { display: flex; gap: 8px; margin-bottom: 20px; } .tabs a { padding: 9px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--text-muted); } .tabs a:hover { color: var(--text); border-color: var(--accent); } .tabs a.active { background: var(--accent); color: #fff; border-color: var(--accent); } .filter-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; } .filter-tabs a { padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; font-weight: 500; background: var(--surface); color: var(--text-muted); } .filter-tabs a:hover { color: var(--text); border-color: var(--accent); } .filter-tabs a.active { background: var(--accent); color: #fff; border-color: var(--accent); } /* Homepage: main grid + sidebar */ .page-layout { display: grid; grid-template-columns: 1fr 260px; gap: 28px; align-items: start; } /* A grid track's default min-width is auto (sized to its widest unbreakable content), not 0 — so a long word/URL inside the 1fr column can silently push the whole grid, and the page, wider than the viewport. Forcing min-width:0 on every direct child is what actually lets that content wrap/shrink instead. */ .page-layout > *, .detail-layout > * { min-width: 0; } .sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 84px; } .sidebar-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; } .sidebar-box h3 { margin: 0 0 12px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; } .sidebar-list { list-style: none; margin: 0; padding: 0; } .sidebar-list li { border-bottom: 1px solid var(--border); } .sidebar-list li:last-child { border-bottom: none; } .sidebar-list a { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; font-size: 13.5px; color: var(--text); } .sidebar-list a:hover { color: var(--accent); } .sidebar-list .count { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--accent); background: rgba(79, 142, 247, .15); border-radius: 999px; padding: 1px 9px; flex-shrink: 0; } .sidebar-list .rank { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700; font-family: 'JetBrains Mono', monospace; margin-right: 10px; flex-shrink: 0; } .rank-fire { background: linear-gradient(135deg, #ff8a3d, #ff4d6d); } .sidebar-box--trending { background: linear-gradient(160deg, var(--surface) 60%, rgba(255, 138, 61, .06)); border-color: rgba(255, 138, 61, .25); } .sidebar-list .name { display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-list .cat-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(79, 142, 247, .15); font-size: 13px; margin-right: 10px; flex-shrink: 0; } .sidebar-box-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .sidebar-box-header h3 { margin: 0; } .sidebar-box-header .view-all-link { font-size: 11.5px; text-transform: none; letter-spacing: normal; } .sidebar-browse-btn { display: block; text-align: center; margin-top: 12px; padding: 9px; border-radius: 999px; border: 1.5px solid var(--accent); color: var(--accent); font-size: 12.5px; font-weight: 600; text-decoration: none; transition: all .15s; } .sidebar-browse-btn:hover { background: var(--accent); color: #fff; } /* Join Our Community sidebar widget */ .community-box { background: linear-gradient(135deg, rgba(79,142,247,.18), rgba(45,27,105,.25)); border: 1px solid var(--accent); border-radius: var(--radius); padding: 18px; display: flex; align-items: center; gap: 14px; justify-content: space-between; } .community-box-text h3 { margin: 0 0 6px; font-size: 14px; color: var(--text); text-transform: none; letter-spacing: normal; } .community-box-text p { margin: 0 0 14px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; } .community-box-icon { display: flex; flex-shrink: 0; } .community-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 16px; border: 2px solid var(--surface); margin-left: -12px; } .community-avatar:first-child { margin-left: 0; } .community-join-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: #fff; padding: 9px 18px; border-radius: 999px; font-size: 12.5px; font-weight: 700; text-decoration: none; } .community-join-btn:hover { background: var(--accent-hover); color: #fff; } @media (max-width: 400px) { .community-box { flex-direction: column; align-items: flex-start; } } /* Main nav tabs — Home / Windows / Android / Mac / Categories, below the header */ .main-nav { background: var(--surface2); border-bottom: 1px solid var(--border); padding: 8px 0; } .main-nav-inner { display: flex; align-items: center; gap: 4px; overflow-x: auto; background: var(--surface2); border-radius: 10px; padding: 4px; } .main-nav-tab { display: flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 8px; color: var(--text-muted); text-decoration: none; font-size: .88rem; font-weight: 500; white-space: nowrap; transition: all .15s; } .main-nav-tab:hover { color: var(--text); } .main-nav-tab.active { color: var(--accent); background: var(--surface); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.12); } .ptab-icon { font-size: 1rem; line-height: 1; } .main-nav-tab--dropdown { background: none; border: none; font-family: inherit; cursor: pointer; } .main-nav-dropdown-caret { font-size: .7rem; margin-left: -2px; transition: transform .15s; } .main-nav-dropdown { position: relative; } .main-nav-dropdown.open .main-nav-dropdown-caret { transform: rotate(180deg); } .main-nav-dropdown-menu { display: none; min-width: 220px; max-height: 70vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.35); padding: 6px; z-index: 200; } .main-nav-dropdown-menu a { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 7px; color: var(--text); text-decoration: none; font-size: .85rem; } .main-nav-dropdown-menu a:hover, .main-nav-dropdown-menu a.active { background: var(--surface2); color: var(--accent); } .main-nav-dropdown-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: rgba(79, 142, 247, .15); font-size: 11px; flex-shrink: 0; } .main-nav-dropdown-viewall { display: block; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--border); text-align: center; color: var(--accent) !important; font-weight: 600; background: none !important; } /* ---------------------------------------------------------------------- */ /* Grid + Card */ /* ---------------------------------------------------------------------- */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .card { position: relative; display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius) + 6px); padding: 18px; color: var(--text); transition: background .2s, box-shadow .25s, transform .2s, border-color .2s; /* A grid item's default min-width is auto (= its content's natural min-content width), not 0 — so a card with an unusually long description silently blows its whole 1fr column wider than the other two, pushing that row past the grid's actual width and under the sticky sidebar next to it. min-width:0 forces the text to wrap/truncate within the card instead of stretching the track. */ min-width: 0; overflow: hidden; } .card::before { /* Soft accent glow in the top corner — purely decorative, gives the card a warmer, less "boxy" first impression without needing an image asset. */ content: ""; position: absolute; top: -30px; right: -30px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, var(--accent) 0%, transparent 70%); opacity: 0; transition: opacity .25s; pointer-events: none; } .card:hover::before { opacity: .18; } .card:hover { background: var(--surface2); border-color: var(--accent); box-shadow: 0 0 0 1px rgba(79,142,247,.15), 0 10px 26px rgba(0,0,0,.35); transform: translateY(-4px); } .card-click-overlay { position: absolute; inset: 0; z-index: 1; } .card-top { display: flex; gap: 14px; } .card-icon { width: 60px; height: 60px; border-radius: 16px; object-fit: cover; flex-shrink: 0; background: linear-gradient(135deg, var(--accent), var(--opensource)); border: 1px solid var(--border); box-shadow: 0 4px 12px rgba(0,0,0,.2); } .card-icon.icon-fallback, .card-icon:not([src]) { background: linear-gradient(135deg, var(--accent), var(--opensource)); } .card-body { min-width: 0; flex: 1; } .card-title { font-size: 15px; margin: 0 0 4px; color: var(--text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-version { font-size: 12px; color: var(--text-muted); margin: 0 0 8px; display: flex; align-items: center; gap: 6px; } .card-desc { font-size: 13px; color: var(--text-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-bottom { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .card-download-btn { width: 38px; height: 38px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--accent), var(--opensource)); display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; font-size: .95rem; transition: all .2s; flex-shrink: 0; box-shadow: 0 4px 12px rgba(79,142,247,.35); } .card-download-btn:hover { transform: scale(1.1) rotate(-6deg); box-shadow: 0 6px 18px rgba(79,142,247,.5); } /* License tag: colored text, no background */ .lic-tag { font-weight: 600; font-size: 12px; } .lic-freeware { color: var(--freeware); } .lic-shareware { color: var(--shareware); } .lic-opensource { color: var(--opensource); } .lic-trial { color: var(--trial); } /* ---------------------------------------------------------------------- */ /* Safety badges */ /* ---------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 700; padding: 4px 11px; border-radius: 999px; letter-spacing: .01em; } .badge-clean { background: rgba(34,197,94,.14); color: var(--green); border: 1px solid rgba(34,197,94,.3); } .badge-flagged { background: rgba(239,68,68,.14); color: var(--red); border: 1px solid rgba(239,68,68,.3); } .badge-unchecked { background: rgba(148,163,184,.14); color: var(--grey-badge); border: 1px solid rgba(148,163,184,.3); } /* ---------------------------------------------------------------------- */ /* Software detail page */ /* ---------------------------------------------------------------------- */ .detail-layout { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; } .detail-heading-block { margin-bottom: 22px; } .detail-heading-block h1 { margin: 0 0 8px; font-size: 26px; letter-spacing: -.01em; } .detail-meta-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--text-muted); margin: 0; font-size: 14px; } .detail-meta-line .sep { color: var(--text-dim); } .feature-image-box { text-align: center; } .feature-image { display: inline-block; max-height: 400px; max-width: 100%; object-fit: contain; margin: 0 auto; } .promo-download-box { text-align: center; padding: 18px; margin-bottom: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .promo-download-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; padding: 13px 32px; border-radius: 999px; font-weight: 700; font-size: .95rem; text-decoration: none; transition: background .15s; } .promo-download-btn:hover { filter: brightness(1.1); } .section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 20px; } .section h2 { margin: 0 0 14px; font-size: 16px; font-weight: 600; } .section :last-child { margin-bottom: 0; } .screenshots { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; } .screenshots img { height: 180px; border-radius: 6px; border: 1px solid var(--border); flex-shrink: 0; } /* Sticky download sidebar box */ .download-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; } .download-box .dl-meta { list-style: none; margin: 14px 0 0; padding: 0; font-size: 13px; } .download-box .dl-meta li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); color: var(--text-muted); } .download-box .dl-meta li:last-child { border-bottom: none; } .download-box .dl-meta strong { color: var(--text); font-weight: 600; } .download-box .safety-box { margin-top: 16px; text-align: center; } .download-box .safety-box p { font-size: 12.5px; color: var(--text-muted); margin: 10px 0 0; text-align: left; } /* System Requirements table (main content) — Image 1 style */ .sysreq-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 8px; overflow: hidden; margin: 24px 0; box-shadow: none; } .sysreq-table-wrap { overflow-x: auto; } .sysreq-heading { font-size: 1.05rem; font-weight: 700; color: var(--text); padding: 14px 20px; margin: 0; background: var(--surface2); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; } .sysreq-table { width: 100%; min-width: 420px; border-collapse: collapse; } .sysreq-table thead tr { background: var(--accent); } .sysreq-table thead th { color: #fff; font-weight: 700; padding: 11px 20px; text-align: left; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; } .sysreq-table tbody tr { border-bottom: 1px solid var(--border); transition: background .12s; } .sysreq-table tbody tr:nth-child(odd) { background: var(--surface); } .sysreq-table tbody tr:nth-child(even) { background: var(--surface2); } .sysreq-table tbody tr:hover { background: rgba(79, 142, 247, .06); } .sysreq-table tbody tr:last-child { border-bottom: none; } .sysreq-label { padding: 11px 20px; color: var(--text); font-weight: 600; font-size: .875rem; width: 38%; vertical-align: middle; border-right: 1px solid var(--border); } .sysreq-value { padding: 11px 20px; color: var(--text-muted); font-size: .875rem; vertical-align: middle; } .sysreq-card:empty { display: none; } /* Related Products card */ .related-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-top: 16px; } .related-card__header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--surface2); border-bottom: 1px solid var(--border); } .related-card__title { font-size: .75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; } .related-card__titles { list-style: none; margin: 0; padding: 6px 14px; } .related-card__titles li { border-bottom: 1px solid var(--border); } .related-card__titles li:last-child { border-bottom: none; } .related-card__titles a { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: .85rem; color: var(--text); text-decoration: none; } .related-card__titles a:hover { color: var(--accent); } .related-card__titles a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .related-card__titles img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: var(--surface2); border: 1px solid var(--border); } .related-card__titles img.icon-fallback, .related-card__titles img:not([src]) { background: var(--surface2); } .related-card__viewall { display: block; text-align: center; padding: 10px 16px; font-size: .8rem; color: var(--accent); text-decoration: none; border-top: 1px solid var(--border); background: var(--surface2); transition: background .15s; } .related-card__viewall:hover { background: var(--border); color: var(--text); } /* Post content (long_description) typography */ .post-content h2 { font-size: 18px; font-weight: 700; margin: 22px 0 10px; color: var(--text); } .post-content h2:first-child { margin-top: 0; } .post-content h3 { font-size: 15px; font-weight: 700; margin: 18px 0 8px; color: var(--text); } .post-content p { margin: 0 0 12px; color: var(--text-muted); font-size: 14px; line-height: 1.7; } .post-content ul, .post-content ol { margin: 0 0 14px; padding-left: 22px; color: var(--text-muted); font-size: 14px; line-height: 1.7; } .post-content li { margin-bottom: 4px; } .post-content li ul, .post-content li ol { margin-top: 4px; margin-bottom: 0; } /* Description "Read More" collapse — ~25 lines at 14px/1.7 line-height */ .post-content-wrapper { position: relative; max-height: 595px; overflow: hidden; transition: max-height .4s ease; } .post-content-wrapper.expanded { max-height: 4000px; } .post-content-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: linear-gradient(transparent, var(--surface)); pointer-events: none; } .read-more-btn { display: block; text-align: right; color: var(--accent); cursor: pointer; padding: 8px 0 0; font-size: .875rem; font-weight: 600; user-select: none; } .read-more-btn:hover { color: var(--accent-hover); } /* ── Comments Section ── */ .comments-section { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border); } .comments-heading { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 24px; } .comments-empty { color: var(--text-muted); font-style: italic; padding: 20px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 24px; } .comment-item { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--border); } .comment-item:last-child { border-bottom: none; } .comment-avatar img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--surface2); } .comment-body { flex: 1; min-width: 0; } .comment-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; } .comment-author { font-weight: 700; font-size: .9rem; color: var(--text); } .comment-date { font-size: .78rem; color: var(--text-muted); } .comment-text { font-size: .875rem; color: var(--text-muted); line-height: 1.6; } .comment-admin-reply { margin-top: 12px; background: rgba(79, 142, 247, .08); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; padding: 12px 16px; } .comment-admin-reply__label { font-size: .75rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; } .comment-admin-reply__text { font-size: .875rem; color: var(--text); line-height: 1.6; } .comment-admin-reply__date { font-size: .72rem; color: var(--text-muted); margin-top: 6px; } .comment-form-wrap { margin-top: 32px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 24px; } .comment-form-heading { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 20px; } .comment-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .comment-form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .comment-form-field label { font-size: .8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; } .comment-form-note { font-weight: 400; text-transform: none; color: var(--text-dim); } .comment-form-field input, .comment-form-field textarea { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 10px 14px; font-size: .875rem; transition: border-color .15s; font-family: inherit; resize: vertical; } .comment-form-field input:focus, .comment-form-field textarea:focus { outline: none; border-color: var(--accent); } .comment-char-count { font-size: .75rem; color: var(--text-dim); text-align: right; margin-top: 4px; display: block; } .comment-submit-btn { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 12px 28px; font-size: .9rem; font-weight: 700; cursor: pointer; transition: background .15s; } .comment-submit-btn:hover { background: var(--accent-hover); } .comment-success { background: rgba(34, 197, 94, .1); border: 1px solid var(--green); color: var(--green); border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; font-size: .875rem; } .comment-error { background: rgba(239, 68, 68, .1); border: 1px solid var(--red); color: var(--red); border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; font-size: .875rem; } @media (max-width: 768px) { .comment-form-grid { grid-template-columns: 1fr; } .comment-item { gap: 10px; } .comment-avatar img { width: 38px; height: 38px; } } .btn-download { display: block; width: 100%; padding: 14px; background: var(--green); color: #fff; font-weight: 700; font-size: 1.05rem; border: none; border-radius: var(--radius); cursor: pointer; text-align: center; transition: background .15s; } .btn-download:hover { background: #16a34a; color: #fff; } /* ---------------------------------------------------------------------- */ /* Forms (public + admin shared basics) */ /* ---------------------------------------------------------------------- */ .form-group { margin-bottom: 16px; } .form-group label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 13px; color: var(--text); } .form-group input[type=text], .form-group input[type=password], .form-group input[type=number], .form-group input[type=url], .form-group input[type=date], .form-group input[type=file], .form-group input[type=email], .form-group select, .form-group textarea { width: 100%; padding: 9px 12px; background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; font-size: 13.5px; font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,142,247,.18); } .form-group textarea { min-height: 120px; resize: vertical; } .form-group input[type=checkbox] { width: auto; } .btn { display: inline-block; padding: 10px 20px; background: var(--accent); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 13.5px; font-weight: 600; } .btn:hover { background: var(--accent-hover); color: #fff; } .btn-danger { background: var(--red); } .btn-danger:hover { background: #dc2626; } .btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); } .btn-outline:hover { border-color: var(--accent); color: var(--accent); background: var(--surface); } /* ---------------------------------------------------------------------- */ /* Static pages */ /* ---------------------------------------------------------------------- */ /* ---------------------------------------------------------------------- */ /* Load more */ /* ---------------------------------------------------------------------- */ .load-more-wrap { text-align: center; margin: 28px 0 4px; } .load-more-wrap .btn { padding: 11px 28px; } /* Trust badges strip — full-bleed, above the footer */ .trust-strip { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 32px 0; margin: 40px calc(-50vw + 50%) 0; width: 100vw; } .trust-strip-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .trust-item { display: flex; align-items: flex-start; gap: 14px; } .trust-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(79, 142, 247, .15); font-size: 1.3rem; flex-shrink: 0; } .trust-title { font-size: .95rem; font-weight: 700; color: var(--text); margin-bottom: 4px; } .trust-desc { font-size: .8rem; color: var(--text-muted); line-height: 1.5; } @media (max-width: 768px) { .trust-strip-inner { grid-template-columns: repeat(2, 1fr); } } /* ---------------------------------------------------------------------- */ /* Lightbox */ /* ---------------------------------------------------------------------- */ .lightbox-trigger { cursor: zoom-in; } .lightbox { display: none; position: fixed; inset: 0; background: rgba(4, 6, 12, .88); z-index: 200; align-items: center; justify-content: center; padding: 40px; } .lightbox.open { display: flex; } .lightbox img { max-width: 100%; max-height: 90vh; border-radius: 8px; border: 1px solid var(--border); box-shadow: 0 20px 60px rgba(0,0,0,.6); } .lightbox-close { position: absolute; top: 18px; right: 24px; background: var(--surface2); border: 1px solid var(--border); color: var(--text); width: 38px; height: 38px; border-radius: 999px; font-size: 22px; line-height: 1; cursor: pointer; } .lightbox-close:hover { border-color: var(--accent); color: var(--accent); } .alert { padding: 11px 16px; border-radius: 6px; margin-bottom: 18px; font-size: 13.5px; } .alert-error { background: #450a0a; color: #fca5a5; border: 1px solid #991b1b; } .alert-success { background: #052e16; color: #86efac; border: 1px solid #166534; } /* ---------------------------------------------------------------------- */ /* Static pages / footer */ /* ---------------------------------------------------------------------- */ .site-footer { background: var(--surface); border-top: 1px solid var(--border); margin-top: 48px; padding: 28px 0; text-align: center; font-size: 13px; color: var(--text-muted); } .footer-links { margin-bottom: 12px; } .footer-links a { color: var(--text-muted); margin: 0 12px; } .footer-links a:hover { color: var(--accent); } .footer-social { margin-bottom: 12px; display: flex; gap: 14px; justify-content: center; } .footer-social a { color: var(--text-muted); font-size: 18px; } .footer-social a:hover { color: var(--accent); } /* ---------------------------------------------------------------------- */ /* Widgets / Ads */ /* ---------------------------------------------------------------------- */ .widget-slot { margin: 16px 0; } .widget-anim-fade { animation: widget-fade .5s ease both; } .widget-anim-slide { animation: widget-slide .5s ease both; } .widget-anim-bounce { animation: widget-bounce .6s ease both; } @keyframes widget-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes widget-slide { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes widget-bounce { 0% { opacity: 0; transform: scale(.9); } 60% { opacity: 1; transform: scale(1.03); } 100% { transform: scale(1); } } /* ---------------------------------------------------------------------- */ /* Responsive */ /* ---------------------------------------------------------------------- */ @media (max-width: 980px) { .page-layout, .detail-layout { grid-template-columns: 1fr; } .sidebar, .download-box { position: static; } .grid { grid-template-columns: repeat(2, 1fr); } } /* All Categories page — 3-col card grid */ .categories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; } .category-card { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--text); font-weight: 600; font-size: .9rem; transition: all .15s; } .category-card:hover { border-color: var(--accent); background: var(--surface2); color: var(--accent); } .category-card__icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(79, 142, 247, .1); border-radius: 8px; font-size: 1.3rem; flex-shrink: 0; } .category-card__name { flex: 1; } @media (max-width: 768px) { .categories-grid { grid-template-columns: repeat(2, 1fr); } .main-nav-tab { padding: 12px 14px; font-size: .82rem; } } @media (max-width: 640px) { .grid { grid-template-columns: 1fr; } .header-inner { height: auto; padding: 12px 0; flex-wrap: wrap; } .search-form { order: 3; max-width: 100%; flex-basis: 100%; } .lightbox { padding: 16px; } } /* ---------------------------------------------------------------------- */ /* RTL support (Hebrew) */ /* Setting `direction: rtl` on the body lets flexbox/grid auto-mirror most */ /* of the layout (nav, cards, sidebar order, header) natively; the rules */ /* below only patch the handful of spots that use hardcoded left/right */ /* positioning or spacing instead of logical properties. */ /* ---------------------------------------------------------------------- */ html[dir="rtl"] body { direction: rtl; text-align: right; } [dir="rtl"] .search-form-icon { left: auto; right: 14px; } [dir="rtl"] .search-form input { padding: 10px 36px 10px 14px; border-radius: 0 999px 999px 0; } [dir="rtl"] .search-form button { border-radius: 999px 0 0 999px; } [dir="rtl"] .breadcrumb .sep { transform: scaleX(-1); display: inline-block; } [dir="rtl"] .cat-icon, [dir="rtl"] .rank { margin-right: 0; margin-left: 10px; } [dir="rtl"] .card-download-btn, [dir="rtl"] .view-all-link, [dir="rtl"] .related-card__viewall { text-align: center; } [dir="rtl"] .sidebar-list a, [dir="rtl"] .related-card__titles a { text-align: right; } [dir="rtl"] .lic-tag, [dir="rtl"] .version, [dir="rtl"] .file-size, [dir="rtl"] code { direction: ltr; unicode-bidi: isolate; } [dir="rtl"] .hero-banner-inner, [dir="rtl"] .hero-buttons { text-align: right; } [dir="rtl"] .main-nav-tab.active { border-left: none; } [dir="rtl"] .comment-avatar { margin-left: 12px; margin-right: 0; } /* ===== Signature: Origami Corner (software) ===== */ .page-title, h1, h2, h3, .hero-title { font-family: 'Fraunces', sans-serif; } .card{position:relative;overflow:hidden;} .card::before{content:"";position:absolute;top:0;left:0;width:0;height:0;border-style:solid;border-width:24px 24px 0 0;border-color:var(--accent) transparent transparent transparent;opacity:.85;}