/** * BorgX Layout Styles * Flex-based layout with width control classes. * Fast-loading, minimal, expandable. * * Width control — add class to or .content-area: * (default) → var(--container-lg) = 1024px * .content-width-sm → var(--container-sm) = 640px * .content-width-md → var(--container-md) = 768px * .content-width-xl → var(--container-xl) = 1280px * .content-width-2xl → var(--container-2xl) = 1536px * .content-width-full → 100% (no max-width) * .content-width-960 → 960px (custom) * * File: borgx/assets/css/borgx/layout.css */ /* ============================================ SITE LAYOUT ============================================ */ .site { min-height: 100vh; background: var(--color-background); } .site-main { padding: var(--space-lg) var(--space-md); } @media (min-width: 768px) { .site-main { padding: var(--space-xl) var(--space-lg); } } /* ============================================ HEADER ============================================ */ .site-header { position: sticky; top: 0; z-index: 1000; background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .site-header__inner { height: 56px; max-width: var(--container-2xl); margin: 0 auto; } /* ── Brand: Trident + Wordmark + Section ── */ .site-header__brand:hover { text-decoration: none; } .site-header__trident { color: var(--brand-1); flex-shrink: 0; } .site-header__wordmark { font-family: var(--font-headline); font-size: 20px; font-weight: 700; background: linear-gradient(135deg, var(--brand-1), var(--brand-2), var(--brand-3), var(--brand-4)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.3; padding-bottom: 2px; } .site-header__section { font-family: var(--font-headline); font-size: 20px; font-weight: 700; color: var(--color-text-muted); } /* ============================================ NAVIGATION ============================================ */ .main-navigation { display: none; align-items: center; gap: var(--space-xs); } @media (min-width: 768px) { .main-navigation { display: flex; } } .main-navigation ul { list-style: none; margin: 0; padding: 0; } .main-navigation a { padding: var(--space-xs) var(--space-sm); font-size: var(--typescale_label-large_size); font-weight: 500; color: var(--color-text-subtle); text-decoration: none; border-radius: var(--radius-md); transition: var(--transition-fast); } .main-navigation a:hover { color: var(--color-primary); background: var(--color-hover); text-decoration: none; } .main-navigation .current-menu-item a, .main-navigation .current_page_item a { color: var(--color-primary); } /* ============================================ HEADER ACTIONS ============================================ */ .header-actions { margin-left: auto; } /* ============================================ CONTENT AREA — Flex-based Sidebar hides → content goes full width automatically. ============================================ */ .content-area { max-width: var(--container-lg); width: 100%; margin: 0 auto; } .content-area > .primary { min-width: 0; } .content-area > .widget-area { width: 280px; flex-shrink: 0; } /* ── Width control classes ── */ .content-width-sm .content-area, .content-area.content-width-sm { max-width: var(--container-sm); } .content-width-md .content-area, .content-area.content-width-md { max-width: var(--container-md); } .content-width-xl .content-area, .content-area.content-width-xl { max-width: var(--container-xl); } .content-width-2xl .content-area, .content-area.content-width-2xl { max-width: var(--container-2xl); } .content-width-full .content-area, .content-area.content-width-full { max-width: 100%; } .content-width-960 .content-area, .content-area.content-width-960 { max-width: 960px; } /* ── Wide variant (BuddyPress) ── */ .content-area--wide { max-width: var(--container-xl); } /* ============================================ PAGE HEADER ============================================ */ .page-header { margin-bottom: var(--space-lg); } .page-title { margin: 0; font-family: var(--font-headline); font-size: var(--typescale_headline-small_size); font-weight: 500; color: var(--color-text); } .page-description { margin-top: var(--space-xs); font-size: var(--typescale_body-medium_size); color: var(--color-text-muted); } /* ============================================ FOOTER ============================================ */ .site-footer { padding: var(--space-xl) var(--space-md); border-top: 1px solid var(--color-border); background: var(--color-surface); } .site-footer__inner { max-width: var(--container-lg); margin: 0 auto; } .site-footer p { margin: 0; font-size: var(--typescale_body-small_size); color: var(--color-text-muted); } .site-footer a { color: var(--color-text-subtle); } .site-footer a:hover { color: var(--color-primary); } /* ============================================ SIDEBAR ============================================ */ .widget { padding: var(--space-md); background: var(--color-surface); border-radius: var(--radius-lg); } .widget-title { margin: 0 0 var(--space-sm) 0; font-family: var(--font-headline); font-size: var(--typescale_label-large_size); font-weight: 600; color: var(--color-text); } .widget ul { list-style: none; margin: 0; padding: 0; } .widget li { margin: 0; padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-border-subtle); } .widget li:last-child { border-bottom: none; } .widget a { color: var(--color-text); font-size: var(--typescale_body-medium_size); } .widget a:hover { color: var(--color-primary); } /* ============================================ DESKTOP: Sidebar side-by-side ============================================ */ @media (min-width: 1024px) { .content-area { flex-direction: row; } .content-area--wide > .widget-area { width: 320px; } } /* Mobile: sidebar stacks below */ @media (max-width: 1023px) { .content-area { flex-direction: column; } .content-area > .widget-area { width: 100%; } } /* ============================================ WORKSPACE PANEL ============================================ */ .workspace-panel { position: fixed; top: 56px; right: 0; bottom: 0; width: 100%; max-width: 550px; background: var(--color-background); border-left: 1px solid var(--color-border); transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); z-index: var(--z-modal); display: flex; flex-direction: column; overflow: hidden; } .workspace-panel--open { transform: translateX(0); } .workspace-panel__header { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .workspace-panel__close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: none; background: transparent; color: var(--color-text-muted); border-radius: var(--radius-full); cursor: pointer; transition: var(--transition-fast); } .workspace-panel__close:hover { background: var(--color-hover); color: var(--color-text); } .workspace-panel__label { font-family: var(--font-headline); font-size: var(--typescale_label-large_size); font-weight: 500; color: var(--color-text-subtle); } .workspace-panel__content { flex: 1; overflow-y: auto; padding: var(--space-lg); } @media (max-width: 768px) { .workspace-panel { top: 0; max-width: 100%; border-left: none; } } /* ============================================ USER MENU — Matches Qwik UserMenu component ============================================ */ .um-container { position: relative; } /* ── Toggle Button ── */ .um-toggle { width: 40px; height: 40px; border-radius: var(--radius-full); border: 2px solid transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); padding: 0; background: transparent; color: var(--color-text-subtle); } .um-toggle--guest { background: linear-gradient(135deg, var(--brand-1-5) 0%, var(--brand-3-5) 50%, var(--brand-5-5) 100%); color: white; box-shadow: var(--shadow-sm); } .um-toggle--guest:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .um-toggle--avatar { padding: 0; overflow: hidden; } .um-toggle--avatar:hover { border-color: var(--brand-1); transform: scale(1.05); } .um-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); } .um-toggle__avatar-img { width: 100%; height: 100%; border-radius: var(--radius-full); object-fit: cover; } /* ── Dropdown ── */ .um-dropdown { position: absolute; top: calc(100% + var(--space-sm)); right: 0; width: 300px; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); border: 1px solid var(--color-border); overflow: hidden; z-index: 2000; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.15s ease-out, transform 0.15s ease-out, visibility 0.15s; } .um-container.active .um-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } /* ── Profile Header (logged in) ── */ .um-profile__avatar { width: 56px; height: 56px; border-radius: var(--radius-full); object-fit: cover; flex-shrink: 0; border: 2px solid var(--brand-1-5); } .um-profile__info { flex: 1; min-width: 0; } .um-profile__name { font-size: var(--typescale_title-small_size, 1rem); font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .um-profile__username { font-size: var(--typescale_body-small_size, 0.8125rem); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Welcome Header (logged out) ── */ .um-welcome { padding: var(--space-lg); background: linear-gradient(135deg, var(--brand-1-4, #5a8fd6) 0%, var(--brand-1-5, #306ac0) 100%); color: white; text-align: center; } .um-welcome__title { font-size: var(--typescale_title-medium_size, 1.125rem); font-weight: 600; margin: 0 0 var(--space-xs); } .um-welcome__desc { font-size: var(--typescale_body-small_size, 0.8125rem); opacity: 0.9; margin: 0; line-height: 1.4; } /* ── Action Buttons (logged out) ── */ .um-btn--cta { background: var(--brand-3-5, #ff6311); color: white; box-shadow: var(--shadow-sm); } .um-btn--cta:hover { background: var(--brand-3-6, #e05600); box-shadow: var(--shadow-md); transform: translateY(-1px); text-decoration: none; color: white; } .um-btn--secondary { background: var(--color-surface); color: var(--brand-1-5, #306ac0); border: 1px solid var(--brand-1-5, #306ac0); } .um-btn--secondary:hover { background: var(--brand-1-5, #306ac0); color: white; text-decoration: none; } /* ── Navigation Links ── */ .um-nav__link { text-decoration: none; color: var(--color-text); font-size: var(--typescale_body-medium_size, 0.875rem); font-weight: 500; transition: var(--transition-fast); } .um-nav__link:hover { background: var(--color-hover); text-decoration: none; } .um-nav__link:focus-visible { outline: none; box-shadow: var(--focus-ring); } .um-nav__arrow { margin-left: auto; opacity: 0; transition: var(--transition-fast); color: var(--color-text-muted); } .um-nav__link:hover .um-nav__arrow { opacity: 1; } /* ── Sign Out ── */ .um-signout { text-decoration: none; color: var(--color-error, #b91412); font-size: var(--typescale_body-medium_size, 0.875rem); font-weight: 500; transition: var(--transition-fast); } .um-signout:hover { background: var(--brand-4-1, rgba(185, 20, 18, 0.05)); text-decoration: none; } .um-signout:focus-visible { outline: none; box-shadow: var(--focus-ring); } @media (max-width: 480px) { .um-dropdown { width: 280px; right: -8px; } } /* ============================================ SR-ONLY ============================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .sr-only:focus { position: fixed; top: var(--space-sm); left: var(--space-sm); width: auto; height: auto; padding: var(--space-sm) var(--space-md); margin: 0; overflow: visible; clip: auto; white-space: normal; background: var(--color-surface-raised); color: var(--color-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 10000; }