:root { --nav-accent: var(--ithun-accent, #0f766e); --nav-accent-dark: var(--ithun-accent-hover, #0d9488); --nav-accent-bg: var(--ithun-accent-soft, #f0fdfa); --ithun-header-offset: 60px; --ithun-admin-subnav-height: 46px; } body.has-admin-subnav { --ithun-header-offset: calc(60px + var(--ithun-admin-subnav-height)); } #mainNav { flex: 1; display: flex; justify-content: center; align-items: center; min-width: 0; overflow: visible; } .portal-nav { display: flex; align-items: center; justify-content: center; flex: 1; min-width: 0; } .portal-nav--empty { font-size: 0.85rem; color: var(--muted); } .portal-nav-tabs { display: flex; align-items: center; gap: 0.25rem; overflow-x: auto; max-width: 100%; scrollbar-width: none; } .portal-nav-tabs::-webkit-scrollbar { display: none; } .portal-nav-tab { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.7rem; font-size: 0.84rem; font-weight: 600; color: var(--muted); white-space: nowrap; border-radius: 8px; transition: background 0.15s, color 0.15s; } .portal-nav-tab i { font-size: 0.75rem; opacity: 0.75; } .portal-nav-tab:hover { color: var(--text); background: var(--bg); } .portal-nav-tab.is-active { color: var(--nav-accent); background: var(--nav-accent-bg); } .portal-nav-store { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: 0.25rem; padding: 0.45rem 0.85rem; border-radius: 8px; font-size: 0.8rem; font-weight: 600; color: #fff; background: var(--nav-accent); white-space: nowrap; } .portal-nav-store:hover { background: var(--nav-accent-dark); color: #fff; } .portal-nav-admin-slot { flex-shrink: 0; } .portal-nav-admin-links { display: flex; align-items: center; gap: 0.35rem; } .portal-nav-admin-link { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.75rem; border-radius: 8px; font-size: 0.8rem; font-weight: 600; color: var(--muted); white-space: nowrap; border: 1px solid var(--border); background: var(--card); } .portal-nav-admin-link:hover { color: var(--nav-accent); border-color: var(--nav-accent); background: var(--nav-accent-bg); } .portal-nav-admin-link.is-active { color: var(--nav-accent); border-color: var(--nav-accent); background: var(--nav-accent-bg); } .portal-nav-admin-link--primary { color: #fff; background: var(--nav-accent); border-color: var(--nav-accent); } .portal-nav-admin-link--primary:hover, .portal-nav-admin-link--primary.is-active { color: #fff; background: var(--nav-accent-dark); border-color: var(--nav-accent-dark); } .header-admin-add { white-space: nowrap; } .portal-nav-tab--admin { border: 1px solid var(--border); background: var(--card); } .portal-nav-tab--admin.is-active, .portal-nav-tab--admin:hover { color: var(--nav-accent); border-color: var(--nav-accent); background: var(--nav-accent-bg); } .portal-nav-tab--admin-inline { align-self: center; margin-left: 0.35rem; } .admin-tools-subnav { border-bottom: 1px solid var(--border); background: var(--card); position: sticky; top: 60px; z-index: 90; } .admin-tools-subnav[hidden] { display: none !important; } .admin-tools-subnav-inner { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; display: flex; gap: 0.35rem; min-height: var(--ithun-admin-subnav-height); align-items: center; overflow-x: auto; scrollbar-width: none; } .admin-tools-subnav-inner::-webkit-scrollbar { display: none; } .admin-tools-subnav-link { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.85rem; border-radius: 8px; font-size: 0.84rem; font-weight: 600; color: var(--muted); white-space: nowrap; border: 1px solid var(--border); background: var(--card); flex-shrink: 0; } .admin-tools-subnav-link:hover, .admin-tools-subnav-link.is-active { color: var(--nav-accent); border-color: var(--nav-accent); background: var(--nav-accent-bg); } .admin-tools-subnav-link--primary { color: #fff; background: var(--nav-accent); border-color: var(--nav-accent); } .admin-tools-subnav-link--primary:hover, .admin-tools-subnav-link--primary.is-active { color: #fff; background: var(--nav-accent-dark); border-color: var(--nav-accent-dark); } .nav-mobile-link--admin { color: var(--nav-accent); background: var(--nav-accent-bg); } .portal-nav-apps { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; justify-content: center; } .portal-nav-app { position: relative; } .portal-nav-app-trigger { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.7rem 0.35rem 0.4rem; border-radius: 8px; border: 1px solid var(--border); background: var(--card); font-family: inherit; font-size: 0.84rem; font-weight: 600; color: var(--text); cursor: pointer; } .portal-nav-app-trigger:hover, .portal-nav-app.is-open .portal-nav-app-trigger { border-color: var(--nav-accent); background: var(--nav-accent-bg); } .portal-nav-app-icon { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--nav-accent-bg); } .portal-nav-app-icon .software-icon-img { width: 24px; height: 24px; object-fit: cover; } .portal-nav-app-chevron { font-size: 0.6rem; color: var(--muted); transition: transform 0.2s; } .portal-nav-app.is-open .portal-nav-app-chevron { transform: rotate(180deg); } .portal-nav-app-menu { display: none; position: absolute; top: calc(100% + 0.35rem); left: 0; min-width: 200px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); padding: 0.4rem; z-index: 150; } .portal-nav-app.is-open .portal-nav-app-menu { display: block; } .portal-nav-app-menu-label { padding: 0.35rem 0.6rem; font-size: 0.7rem; font-weight: 700; color: var(--muted); } .portal-nav-app-menu a { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; border-radius: 6px; font-size: 0.84rem; font-weight: 600; color: var(--text); } .portal-nav-app-menu a:hover { background: var(--nav-accent-bg); color: var(--nav-accent); } .portal-nav-app-menu-divider { height: 1px; background: var(--border); margin: 0.25rem; } .portal-nav-site { display: flex; align-items: center; gap: 1.25rem; flex-wrap: nowrap; justify-content: center; overflow: visible; } .portal-nav--site { min-width: 0; overflow: visible; } .portal-nav-site-link, .portal-nav-site-trigger { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1.15rem; border-radius: 8px; font-size: 1rem; font-weight: 700; color: var(--muted); white-space: nowrap; border: none; background: transparent; font-family: inherit; cursor: pointer; transition: background 0.15s, color 0.15s; } .portal-nav-site-link i, .portal-nav-site-trigger i { font-size: 0.88rem; opacity: 0.85; } .portal-nav-site-link:hover, .portal-nav-site-trigger:hover, .portal-nav-site-item.is-open .portal-nav-site-trigger, .portal-nav-site-link.is-active, .portal-nav-site-item.is-active > .portal-nav-site-trigger { color: var(--nav-accent); background: var(--nav-accent-bg); } .portal-nav-site-item { position: relative; } .portal-nav-site-chevron { font-size: 0.72rem; color: var(--muted); transition: transform 0.2s; } .portal-nav-site-item.is-open .portal-nav-site-chevron { transform: rotate(180deg); } .portal-nav-site-menu { display: none; position: absolute; top: calc(100% + 0.35rem); left: 50%; transform: translateX(-50%); min-width: 180px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); padding: 0.4rem; z-index: 200; } .portal-nav-site-item.is-open .portal-nav-site-menu { display: block; } .portal-nav-site-menu-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.65rem; border-radius: 6px; font-size: 0.84rem; font-weight: 600; color: var(--text); } .portal-nav-site-menu-link:hover, .portal-nav-site-menu-link.is-active { background: var(--nav-accent-bg); color: var(--nav-accent); } .nav-mobile-link.is-active { background: var(--nav-accent-bg); color: var(--nav-accent); } .store-type-tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .store-type-tab { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.55rem 0.9rem; border-radius: 999px; border: 1px solid var(--border); background: var(--card); font-size: 0.85rem; font-weight: 600; color: var(--muted); } .store-type-tab:hover, .store-type-tab.is-active { color: var(--nav-accent); border-color: var(--nav-accent); background: var(--nav-accent-bg); } .store-platform-tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: -0.35rem 0 1.25rem; padding-left: 0.15rem; } .store-platform-tab { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.8rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); font-size: 0.8rem; font-weight: 600; color: var(--muted); } .store-platform-tab:hover, .store-platform-tab.is-active { color: var(--nav-accent); border-color: color-mix(in srgb, var(--nav-accent) 55%, var(--border)); background: var(--nav-accent-bg); } .store-type-chip { color: var(--nav-accent); font-weight: 600; } .page-hero { max-width: 1200px; margin: 0 auto; padding: 2.5rem 1.25rem 1rem; } .page-hero h1 { font-size: clamp(1.6rem, 3vw, 2rem); margin-bottom: 0.5rem; } .page-hero p { color: var(--muted); max-width: 640px; } .content-page { max-width: 920px; margin: 0 auto; padding: 0 1.25rem 3rem; } .content-page section + section { margin-top: 2rem; } .content-page h2 { font-size: 1.15rem; margin-bottom: 0.75rem; } .content-page p, .content-page li { color: var(--text); line-height: 1.7; } .content-page ul { padding-left: 1.2rem; } .info-card { border: 1px solid var(--border); border-radius: 12px; background: var(--card); padding: 1.25rem; } .info-card dl { display: grid; grid-template-columns: 120px 1fr; gap: 0.65rem 1rem; font-size: 0.92rem; } .info-card dt { color: var(--muted); font-weight: 600; } .info-card dd { margin: 0; } .support-form { max-width: 640px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); padding: 1.5rem; } .support-form .form-group { margin-bottom: 1rem; } .support-form label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; } .support-form input, .support-form select, .support-form textarea { width: 100%; padding: 0.65rem 0.75rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; background: var(--bg); color: var(--text); } .support-form textarea { min-height: 140px; resize: vertical; } .support-form .form-msg { min-height: 1.2rem; font-size: 0.85rem; margin: 0.5rem 0; } .support-form .form-msg.ok { color: #059669; } .support-form .form-msg.err { color: #dc2626; } .support-aside { margin-top: 1.5rem; font-size: 0.9rem; color: var(--muted); } .support-aside a { color: var(--nav-accent); font-weight: 600; } .software-nav-bar { border-bottom: 1px solid var(--border); background: var(--card); position: sticky; top: var(--ithun-header-offset); z-index: 90; } .software-nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; display: flex; align-items: center; gap: 1rem; min-height: 48px; } .software-nav-inner--tabs-only .software-nav-tabs-wrap { flex: 1; justify-content: flex-start; } .software-nav-apps-row { display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; } .software-nav-app-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.6rem; border-radius: 6px; font-size: 0.78rem; font-weight: 600; color: var(--muted); white-space: nowrap; } .software-nav-app-pill.is-active { background: var(--nav-accent-bg); color: var(--nav-accent); } .software-nav-tabs-wrap { flex: 1; min-width: 0; display: flex; justify-content: flex-start; } .software-nav-tabs { display: flex; gap: 0.15rem; overflow-x: auto; scrollbar-width: none; max-width: 100%; } .software-nav-tab { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.55rem 0.75rem; font-size: 0.85rem; font-weight: 600; color: var(--muted); white-space: nowrap; border-radius: 8px; } .software-nav-tab:hover { color: var(--text); background: var(--bg); } .software-nav-tab.is-active { color: var(--nav-accent); background: var(--nav-accent-bg); } .nav-mobile-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); cursor: pointer; flex-shrink: 0; } .nav-mobile-toggle:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: 2px; } .nav-mobile-panel { display: none; position: fixed; inset: 0; top: var(--ithun-header-offset); background: rgba(15, 23, 42, 0.3); z-index: 110; } .nav-mobile-panel.is-open { display: block; } .nav-mobile-sheet { background: var(--card); border-bottom: 1px solid var(--border); padding: 1rem 1.25rem; max-height: calc(100vh - var(--ithun-header-offset)); overflow-y: auto; } .nav-mobile-section-title { font-size: 0.7rem; font-weight: 700; color: var(--muted); margin-bottom: 0.4rem; } .nav-mobile-link { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0.75rem; border-radius: 8px; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.15rem; } .nav-mobile-link:hover { background: var(--nav-accent-bg); color: var(--nav-accent); } .nav-mobile-store { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.5rem; padding: 0.7rem; border-radius: 8px; background: var(--nav-accent-bg); color: var(--nav-accent); font-weight: 600; font-size: 0.85rem; } @media (max-width: 900px) { .portal-nav { display: none; } .portal-nav-admin-slot { display: none !important; } .nav-mobile-toggle { display: inline-flex; } .software-nav-inner > .portal-nav-store { display: none; } .software-nav-inner { flex-wrap: wrap; padding: 0.4rem 1.25rem; } .software-nav-tabs-wrap { order: 3; flex-basis: 100%; justify-content: flex-start; } } @media (min-width: 901px) { .nav-mobile-panel { display: none !important; } }