/* ============================================================================= SocialNet - Front-End Stylesheet Modern, clean design for viral content/blog site ============================================================================= */ /* ----------------------------------------------------------------------------- CSS Variables / Design Tokens ----------------------------------------------------------------------------- */ :root { /* Brand Colors. The primary/secondary derive from the ACTIVE THEME (--theme-*, set by the body's .theme-* class) so the theme picker recolors the whole layout; the hex fallbacks are the System-default scheme (no theme selected). The -dark shade tracks the primary via color-mix so link hovers stay on-palette per theme. */ --sn-primary: var(--theme-primary, #4a6fa5); --sn-primary-light: var(--theme-secondary, #6b8cbe); --sn-primary-dark: color-mix(in srgb, var(--sn-primary) 80%, #000); /* System-default THEME variables (the "no theme selected" scheme). Modules like .sn-search consume --theme-* ; the .theme-* classes are DARK schemes that override these on . Defined here (light, matching the --sn-* base) so modules are styled even when no theme is selected. */ --theme-primary: #4a6fa5; --theme-primary-rgb: 74, 111, 165; --theme-secondary: #6b8cbe; --theme-secondary-rgb: 107, 140, 190; --theme-surface: #ffffff; --theme-border: #e8e4dc; /* = --sn-gray-200 */ --theme-text: #2e2a26; /* = --sn-gray-800 */ --theme-text-muted: #7d766c; /* = --sn-gray-500 */ /* Neutral Colors - Warm, off-white tones */ --sn-gray-50: #faf9f7; /* Warm off-white - main background */ --sn-gray-100: #f5f3ef; /* Cream */ --sn-gray-200: #e8e4dc; /* Light tan */ --sn-gray-300: #d4cfc4; /* Warm light gray */ --sn-gray-400: #a8a198; /* Muted gray */ --sn-gray-500: #7d766c; /* Medium warm gray */ --sn-gray-600: #5c564e; /* Darker warm gray */ --sn-gray-700: #45403a; /* Dark warm brown-gray */ --sn-gray-800: #2e2a26; /* Very dark brown */ --sn-gray-900: #1c1917; /* Near black, warm */ /* Accent Colors - Muted, earthy */ --sn-accent-red: #c45c4a; --sn-accent-orange: #c9834d; --sn-accent-green: #5a9a6e; --sn-accent-teal: #4a9b93; /* Typography */ --sn-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --sn-font-serif: 'Georgia', 'Times New Roman', serif; /* Spacing */ --sn-spacing-xs: 0.25rem; --sn-spacing-sm: 0.5rem; --sn-spacing-md: 1rem; --sn-spacing-lg: 1.5rem; --sn-spacing-xl: 2rem; --sn-spacing-2xl: 3rem; /* Border Radius */ --sn-radius-sm: 0.375rem; --sn-radius-md: 0.5rem; --sn-radius-lg: 0.75rem; --sn-radius-xl: 1rem; /* Shadows */ --sn-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --sn-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --sn-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* Transitions */ --sn-transition-fast: 150ms ease; --sn-transition-normal: 250ms ease; } /* ----------------------------------------------------------------------------- Base Styles (Front-end pages only - not .backend-theme) ----------------------------------------------------------------------------- */ body:not(.backend-theme) { font-family: var(--sn-font-sans); color: var(--sn-gray-800); background-color: var(--sn-gray-50); line-height: 1.6; } body:not(.backend-theme) h1, body:not(.backend-theme) h2, body:not(.backend-theme) h3, body:not(.backend-theme) h4, body:not(.backend-theme) h5, body:not(.backend-theme) h6 { font-weight: 700; line-height: 1.3; color: var(--sn-gray-900); } body:not(.backend-theme) a { color: var(--sn-primary); text-decoration: none; transition: color var(--sn-transition-fast); } body:not(.backend-theme) a:hover { color: var(--sn-primary-dark); } /* ----------------------------------------------------------------------------- Front-End Navigation ----------------------------------------------------------------------------- */ .sn-navbar { background: var(--sn-gray-100); border-bottom: 1px solid var(--sn-gray-200); padding: var(--sn-spacing-md) 0; position: sticky; top: 0; z-index: 1000; } .sn-navbar .navbar-brand { font-weight: 800; font-size: 1.5rem; color: var(--sn-gray-900); letter-spacing: -0.025em; } .sn-navbar .navbar-brand:hover { color: var(--sn-primary); } .sn-navbar .nav-link { color: var(--sn-gray-600); font-weight: 500; padding: var(--sn-spacing-sm) var(--sn-spacing-md); border-radius: var(--sn-radius-md); transition: all var(--sn-transition-fast); } .sn-navbar .nav-link:hover { color: var(--sn-primary); background-color: var(--sn-gray-100); } .sn-navbar .btn-signin { background-color: var(--sn-primary); color: white; font-weight: 600; padding: var(--sn-spacing-sm) var(--sn-spacing-lg); border-radius: var(--sn-radius-md); border: none; transition: all var(--sn-transition-fast); } .sn-navbar .btn-signin:hover { background-color: var(--sn-primary-dark); color: white; transform: translateY(-1px); } /* ----------------------------------------------------------------------------- Hero Section ----------------------------------------------------------------------------- */ .sn-hero { background: linear-gradient(135deg, var(--sn-gray-700) 0%, var(--sn-gray-800) 100%); color: var(--sn-gray-100); padding: var(--sn-spacing-2xl) 0; margin-bottom: var(--sn-spacing-2xl); } .sn-hero h1 { font-size: 2.5rem; font-weight: 800; color: var(--sn-gray-50); margin-bottom: var(--sn-spacing-md); } .sn-hero p { font-size: 1.125rem; opacity: 0.9; max-width: 600px; } .sn-hero-small { padding: var(--sn-spacing-xl) 0; } .sn-hero-small h1 { font-size: 1.75rem; margin-bottom: var(--sn-spacing-sm); } /* ----------------------------------------------------------------------------- Content Cards - Blog/Viral Post Style ----------------------------------------------------------------------------- */ .sn-card { background: var(--sn-gray-100); border-radius: var(--sn-radius-lg); overflow: hidden; box-shadow: var(--sn-shadow-sm); border: 1px solid var(--sn-gray-200); transition: all var(--sn-transition-normal); height: 100%; display: flex; flex-direction: column; } .sn-card:hover { box-shadow: var(--sn-shadow-lg); transform: translateY(-4px); border-color: var(--sn-gray-300); } .sn-card-img { width: 100%; height: 200px; object-fit: cover; background-color: var(--sn-gray-200); } .sn-card-img-placeholder { width: 100%; height: 200px; background: linear-gradient(135deg, var(--sn-gray-300) 0%, var(--sn-gray-400) 100%); display: flex; align-items: center; justify-content: center; color: var(--sn-gray-500); font-size: 3rem; } .sn-card-body { padding: var(--sn-spacing-lg); flex: 1; display: flex; flex-direction: column; } .sn-card-category { display: inline-block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sn-primary); margin-bottom: var(--sn-spacing-sm); } .sn-card-title { font-size: 1.125rem; font-weight: 700; color: var(--sn-gray-900); margin-bottom: var(--sn-spacing-sm); line-height: 1.4; } .sn-card-title a { color: inherit; } .sn-card-title a:hover { color: var(--sn-primary); } .sn-card-excerpt { color: var(--sn-gray-600); font-size: 0.9375rem; line-height: 1.6; flex: 1; } .sn-card-meta { display: flex; align-items: center; gap: var(--sn-spacing-md); margin-top: var(--sn-spacing-md); padding-top: var(--sn-spacing-md); border-top: 1px solid var(--sn-gray-100); font-size: 0.8125rem; color: var(--sn-gray-500); } .sn-card-meta i { margin-right: var(--sn-spacing-xs); } /* Featured Card - Larger variant */ .sn-card-featured { grid-column: span 2; } .sn-card-featured .sn-card-img, .sn-card-featured .sn-card-img-placeholder { height: 300px; } .sn-card-featured .sn-card-title { font-size: 1.5rem; } @media (max-width: 767.98px) { .sn-card-featured { grid-column: span 1; } .sn-card-featured .sn-card-img, .sn-card-featured .sn-card-img-placeholder { height: 200px; } .sn-card-featured .sn-card-title { font-size: 1.125rem; } } /* ----------------------------------------------------------------------------- Content Grid ----------------------------------------------------------------------------- */ .sn-content-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sn-spacing-xl); } @media (max-width: 991.98px) { .sn-content-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .sn-content-grid { grid-template-columns: 1fr; } } /* ----------------------------------------------------------------------------- Sidebar ----------------------------------------------------------------------------- */ .sn-sidebar { position: sticky; top: 100px; } .sn-sidebar-section { background: var(--sn-gray-100); border-radius: var(--sn-radius-lg); padding: var(--sn-spacing-lg); margin-bottom: var(--sn-spacing-lg); border: 1px solid var(--sn-gray-200); } .sn-sidebar-title { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sn-gray-500); margin-bottom: var(--sn-spacing-md); padding-bottom: var(--sn-spacing-sm); border-bottom: 2px solid var(--sn-primary); } .sn-sidebar-list { list-style: none; padding: 0; margin: 0; } .sn-sidebar-list li { padding: var(--sn-spacing-sm) 0; border-bottom: 1px solid var(--sn-gray-100); } .sn-sidebar-list li:last-child { border-bottom: none; } .sn-sidebar-list a { color: var(--sn-gray-700); font-weight: 500; display: flex; align-items: center; gap: var(--sn-spacing-sm); } .sn-sidebar-list a:hover { color: var(--sn-primary); } /* Search Widget */ .sn-search-form { display: flex; gap: var(--sn-spacing-sm); } .sn-search-form input { flex: 1; border: 1px solid var(--sn-gray-300); border-radius: var(--sn-radius-md); padding: var(--sn-spacing-sm) var(--sn-spacing-md); font-size: 0.9375rem; transition: border-color var(--sn-transition-fast); background-color: var(--sn-gray-50); } .sn-search-form input:focus { outline: none; border-color: var(--sn-primary); box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.15); background-color: var(--sn-gray-50); } .sn-search-form button { background-color: var(--sn-primary); color: white; border: none; border-radius: var(--sn-radius-md); padding: var(--sn-spacing-sm) var(--sn-spacing-md); cursor: pointer; transition: background-color var(--sn-transition-fast); } .sn-search-form button:hover { background-color: var(--sn-primary-dark); } /* Tags/Keywords */ .sn-tags { display: flex; flex-wrap: wrap; gap: var(--sn-spacing-sm); } .sn-tag { display: inline-block; background-color: var(--sn-gray-100); color: var(--sn-gray-700); padding: var(--sn-spacing-xs) var(--sn-spacing-sm); border-radius: var(--sn-radius-sm); font-size: 0.8125rem; font-weight: 500; transition: all var(--sn-transition-fast); } .sn-tag:hover { background-color: var(--sn-primary); color: white; } /* ----------------------------------------------------------------------------- Auth Pages (Login, Register) ----------------------------------------------------------------------------- */ .sn-auth-container { min-height: calc(100vh - 200px); display: flex; align-items: center; justify-content: center; padding: var(--sn-spacing-xl) var(--sn-spacing-md); } .sn-auth-card { background: var(--sn-gray-100); border-radius: var(--sn-radius-xl); box-shadow: var(--sn-shadow-lg); width: 100%; max-width: 420px; overflow: hidden; border: 1px solid var(--sn-gray-200); } .sn-auth-header { background: linear-gradient(135deg, var(--sn-gray-500) 0%, var(--sn-gray-600) 100%); color: var(--sn-gray-100); padding: var(--sn-spacing-xl); text-align: center; } .sn-auth-header h1 { color: white; font-size: 1.5rem; margin-bottom: var(--sn-spacing-xs); } .sn-auth-header p { opacity: 0.9; margin: 0; font-size: 0.9375rem; } .sn-auth-body { padding: var(--sn-spacing-xl); } .sn-auth-footer { background-color: var(--sn-gray-50); padding: var(--sn-spacing-lg); text-align: center; border-top: 1px solid var(--sn-gray-200); } .sn-auth-footer p { margin: 0; color: var(--sn-gray-600); font-size: 0.9375rem; } /* Form Elements */ .sn-form-group { margin-bottom: var(--sn-spacing-lg); } .sn-form-label { display: block; font-weight: 600; color: var(--sn-gray-700); margin-bottom: var(--sn-spacing-sm); font-size: 0.9375rem; } .sn-form-control { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--sn-gray-300); border-radius: var(--sn-radius-md); font-size: 1rem; transition: all var(--sn-transition-fast); background-color: var(--sn-gray-50); } .sn-form-control:focus { outline: none; border-color: var(--sn-primary); box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.15); background-color: var(--sn-gray-50); } .sn-form-control::placeholder { color: var(--sn-gray-400); } .sn-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sn-spacing-sm); padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 600; border-radius: var(--sn-radius-md); border: none; cursor: pointer; text-decoration: none; /* it's an anchor styled as a button — never underline */ transition: all var(--sn-transition-fast); } .sn-btn:hover { text-decoration: none; } /* A primary button's label is ALWAYS white-on-primary. !important so it beats the generic `body a { color: var(--sn-primary) }` rule (line ~98), which otherwise renders the label the same color as the button background → invisible until hovered. */ .sn-btn-primary { background-color: var(--sn-primary); color: #fff !important; } .sn-btn-primary:hover { background-color: var(--sn-primary-dark); color: #fff !important; transform: translateY(-1px); } .sn-btn-block { width: 100%; } /* Free-subdomain indicator chip (cyan = "info"). Clickable, opens the site in a new tab. Used on the My Sites list and the Site Management tab header. Doubles as the site's PRIMARY reachable address (.is-primary) when there's no ported domain. */ .sn-sub-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: .78em; line-height: 1.5; text-decoration: none; white-space: nowrap; vertical-align: middle; background: rgba(34, 211, 238, .12); color: #67e8f9; border: 1px solid rgba(34, 211, 238, .35); } .sn-sub-chip:hover { background: rgba(34, 211, 238, .22); color: #a5f3fc; text-decoration: none; } .sn-sub-chip .bi { font-size: .9em; opacity: .85; } .sn-sub-chip.is-primary { font-weight: 600; } /* ----------------------------------------------------------------------------- Footer ----------------------------------------------------------------------------- */ .sn-footer { background-color: var(--sn-gray-800); color: var(--sn-gray-400); padding: var(--sn-spacing-2xl) 0 var(--sn-spacing-lg); margin-top: var(--sn-spacing-2xl); } .sn-footer a { color: var(--sn-gray-400); transition: color var(--sn-transition-fast); } .sn-footer a:hover { color: var(--sn-gray-100); } .sn-footer-brand { font-size: 1.25rem; font-weight: 700; color: var(--sn-gray-100); margin-bottom: var(--sn-spacing-md); } .sn-footer-links { list-style: none; padding: 0; margin: 0; } .sn-footer-links li { margin-bottom: var(--sn-spacing-sm); } .sn-footer-title { color: var(--sn-gray-100); font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--sn-spacing-md); } .sn-footer-bottom { border-top: 1px solid var(--sn-gray-700); padding-top: var(--sn-spacing-lg); margin-top: var(--sn-spacing-xl); text-align: center; font-size: 0.875rem; } /* ----------------------------------------------------------------------------- Coming Soon / Placeholder ----------------------------------------------------------------------------- */ .sn-coming-soon { text-align: center; padding: var(--sn-spacing-2xl) var(--sn-spacing-md); } .sn-coming-soon-icon { font-size: 4rem; color: var(--sn-gray-300); margin-bottom: var(--sn-spacing-lg); } .sn-coming-soon h1 { font-size: 2rem; margin-bottom: var(--sn-spacing-md); } .sn-coming-soon p { color: var(--sn-gray-600); font-size: 1.125rem; max-width: 500px; margin: 0 auto; } /* ----------------------------------------------------------------------------- Utilities ----------------------------------------------------------------------------- */ .sn-text-muted { color: var(--sn-gray-500); } .sn-text-small { font-size: 0.875rem; } .sn-mb-0 { margin-bottom: 0; } .sn-mb-1 { margin-bottom: var(--sn-spacing-sm); } .sn-mb-2 { margin-bottom: var(--sn-spacing-md); } .sn-mb-3 { margin-bottom: var(--sn-spacing-lg); } .sn-mb-4 { margin-bottom: var(--sn-spacing-xl); } .sn-mt-0 { margin-top: 0; } .sn-mt-1 { margin-top: var(--sn-spacing-sm); } .sn-mt-2 { margin-top: var(--sn-spacing-md); } .sn-mt-3 { margin-top: var(--sn-spacing-lg); } .sn-mt-4 { margin-top: var(--sn-spacing-xl); } /* ----------------------------------------------------------------------------- Subtle Login Link (for unauthenticated users) ----------------------------------------------------------------------------- */ .sn-subtle-login { position: fixed; bottom: 20px; right: 20px; opacity: 0.4; z-index: 1000; font-size: 1rem; color: var(--sn-gray-500); transition: opacity var(--sn-transition-fast); } .sn-subtle-login:hover { opacity: 1; color: var(--sn-primary); } /* ----------------------------------------------------------------------------- Search Results Page ----------------------------------------------------------------------------- */ .sn-search-results { min-height: 100vh; } .sn-search-header { background: linear-gradient(135deg, var(--sn-gray-200) 0%, var(--sn-gray-100) 100%); padding: var(--sn-spacing-xl) 0; margin-bottom: var(--sn-spacing-lg); border-bottom: 1px solid var(--sn-gray-300); } .sn-search-header h1 { font-size: 1.75rem; margin-bottom: var(--sn-spacing-sm); color: var(--sn-gray-800); } .sn-search-query { color: var(--sn-gray-600); margin-bottom: var(--sn-spacing-lg); } .sn-search-query strong { color: var(--sn-gray-800); } .sn-result-count { color: var(--sn-gray-500); font-size: 0.9rem; } .sn-search-form-large { display: flex; max-width: 500px; background: white; border-radius: var(--sn-radius-lg); overflow: hidden; box-shadow: var(--sn-shadow-md); } .sn-search-form-large input { flex: 1; border: none; padding: var(--sn-spacing-md) var(--sn-spacing-lg); font-size: 1rem; outline: none; } .sn-search-form-large button { background: var(--sn-primary); border: none; padding: var(--sn-spacing-md) var(--sn-spacing-lg); color: white; cursor: pointer; transition: background var(--sn-transition-fast); } .sn-search-form-large button:hover { background: var(--sn-primary-dark); } /* ----------------------------------------------------------------------------- Product Grid - Clean, Compact Design ----------------------------------------------------------------------------- */ .sn-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sn-spacing-md); } .sn-product-card { background: white; border-radius: var(--sn-radius-md); overflow: hidden; border: 1px solid var(--sn-gray-200); display: flex; flex-direction: column; transition: border-color var(--sn-transition-fast), box-shadow var(--sn-transition-fast), transform var(--sn-transition-fast); cursor: pointer; } .sn-product-card:hover { border-color: var(--sn-primary-light); box-shadow: var(--sn-shadow-md); transform: translateY(-2px); } .sn-product-card:hover .sn-product-title { color: var(--sn-primary); } .sn-product-link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; } .sn-product-link:hover { color: inherit; } .sn-product-image { width: 100%; height: 140px; display: flex; align-items: center; justify-content: center; background: white; padding: var(--sn-spacing-sm); } .sn-product-image img { max-width: 100%; max-height: 100%; object-fit: contain; } .sn-product-image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--sn-gray-300); font-size: 2rem; } .sn-product-details { padding: var(--sn-spacing-sm); flex: 1; display: flex; flex-direction: column; border-top: 1px solid var(--sn-gray-100); } .sn-product-brand { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.3px; color: var(--sn-gray-400); margin-bottom: 2px; } .sn-product-title { font-size: 0.8rem; font-weight: 500; color: var(--sn-gray-700); margin-bottom: var(--sn-spacing-xs); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sn-product-features { display: none; /* Hide features for cleaner look */ } .sn-product-pricing { margin-top: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .sn-product-price { font-size: 0.95rem; font-weight: 700; color: var(--sn-gray-800); } .sn-product-original-price { font-size: 0.75rem; color: var(--sn-gray-400); text-decoration: line-through; } .sn-product-discount { font-size: 0.65rem; font-weight: 600; color: var(--sn-accent-green); background: rgba(90, 154, 110, 0.12); padding: 1px 4px; border-radius: 3px; } .sn-product-prime { font-size: 0.7rem; color: var(--sn-primary); display: inline-flex; align-items: center; gap: 2px; margin-top: 4px; } .sn-product-prime i { font-size: 0.6rem; } .sn-product-btn { display: none; /* Hide the button for cleaner look - card itself is clickable */ } .sn-product-btn:hover { background: var(--sn-primary-dark); color: white; } .sn-product-btn i { font-size: 0.65rem; margin-left: 4px; } /* ----------------------------------------------------------------------------- Sidebar Product Card (for Amazon products in sidebar) ----------------------------------------------------------------------------- */ .sn-sidebar-product { background: white; border-radius: var(--sn-radius-md); border: 1px solid var(--sn-gray-200); overflow: hidden; margin-bottom: var(--sn-spacing-md); } .sn-sidebar-product a { display: block; text-decoration: none; color: inherit; } .sn-sidebar-product a:hover { color: inherit; } .sn-sidebar-product-image { width: 100%; height: 160px; display: flex; align-items: center; justify-content: center; background: white; padding: var(--sn-spacing-sm); } .sn-sidebar-product-image img { max-width: 100%; max-height: 100%; object-fit: contain; } .sn-sidebar-product-details { padding: var(--sn-spacing-sm) var(--sn-spacing-md); border-top: 1px solid var(--sn-gray-100); } .sn-sidebar-product-title { font-size: 0.85rem; font-weight: 500; color: var(--sn-primary); line-height: 1.4; margin-bottom: var(--sn-spacing-xs); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .sn-sidebar-product-title:hover { text-decoration: underline; } /* No Results State */ .sn-no-results { text-align: center; padding: var(--sn-spacing-2xl); background: white; border-radius: var(--sn-radius-lg); border: 1px solid var(--sn-gray-200); } .sn-no-results-icon { font-size: 4rem; color: var(--sn-gray-300); margin-bottom: var(--sn-spacing-lg); } .sn-no-results h2 { color: var(--sn-gray-700); margin-bottom: var(--sn-spacing-md); } .sn-no-results p { color: var(--sn-gray-600); margin-bottom: var(--sn-spacing-lg); } /* Affiliate Notice */ .sn-affiliate-notice { background: var(--sn-gray-100); border-radius: var(--sn-radius-md); padding: var(--sn-spacing-md) !important; } .sn-affiliate-notice p { margin: 0; color: var(--sn-gray-500); } /* ----------------------------------------------------------------------------- Responsive Adjustments ----------------------------------------------------------------------------- */ @media (max-width: 991.98px) { .sn-product-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } } @media (max-width: 767.98px) { .sn-hero h1 { font-size: 1.75rem; } .sn-hero p { font-size: 1rem; } .sn-auth-card { margin: var(--sn-spacing-md); } .sn-sidebar { position: static; margin-top: var(--sn-spacing-xl); } .sn-product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sn-spacing-sm); } .sn-search-form-large { max-width: 100%; } .sn-product-image { height: 120px; } .sn-product-title { font-size: 0.75rem; } .sn-product-btn { padding: 6px; font-size: 0.7rem; } } /* ============================================================================= ADMIN PAGES - Consistent Styling ============================================================================= */ /* Admin Page Header - Dark gradient with accent */ .admin-page-header { background: linear-gradient(135deg, #1a1a2e 0%, #2d2d4a 100%); color: #fff; padding: 24px 32px; border-radius: 12px; margin-bottom: 24px; } .admin-page-header h1 { margin: 0; font-size: 28px; font-weight: 600; color: #fff; } .admin-page-header h1 i { color: #7c3aed; } .admin-page-header p { margin: 8px 0 0 0; color: rgba(255, 255, 255, 0.7); font-size: 14px; } /* Cross-tier switcher (Dashboard / Admin / SuperAdmin) — Phase 5 IA nav */ .sn-tier-nav { flex-wrap: wrap; } .sn-tier-nav .nav-link { border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 10px; color: #344054; background: #fff; min-width: 160px; line-height: 1.2; } .sn-tier-nav .nav-link:hover { border-color: #7c3aed; background: #faf8ff; } .sn-tier-nav .nav-link.active { background: linear-gradient(135deg, #1a1a2e 0%, #2d2d4a 100%); border-color: transparent; color: #fff; } /* Admin Primary Button - Gradient with visible text */ .btn-admin-primary { background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%) !important; border: none !important; color: #fff !important; padding: 10px 24px; font-weight: 600; font-size: 15px; border-radius: 8px; box-shadow: 0 4px 14px rgba(124, 58, 237, 0.4); transition: all 0.2s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .btn-admin-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(124, 58, 237, 0.5); color: #fff !important; text-decoration: none; } .btn-admin-primary:focus { color: #fff !important; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.3); } /* Admin Secondary Button */ .btn-admin-secondary { background: #374151 !important; border: none !important; color: #fff !important; padding: 10px 24px; font-weight: 600; font-size: 15px; border-radius: 8px; transition: all 0.2s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .btn-admin-secondary:hover { background: #4b5563 !important; color: #fff !important; text-decoration: none; } /* Admin Action Buttons (for tables) */ .btn-admin-edit { background: #7c3aed !important; border: none !important; color: #fff !important; font-weight: 500; } .btn-admin-edit:hover { background: #6d28d9 !important; color: #fff !important; } .btn-admin-view { background: #6b7280 !important; border: none !important; color: #fff !important; font-weight: 500; } .btn-admin-view:hover { background: #4b5563 !important; color: #fff !important; } .btn-admin-delete { background: #dc2626 !important; border: none !important; color: #fff !important; font-weight: 500; } .btn-admin-delete:hover { background: #b91c1c !important; color: #fff !important; } /* Admin Cards */ .admin-card { background: #fff; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .admin-card .card-header { background: #f9fafb; border-bottom: 1px solid #e5e7eb; padding: 16px 20px; font-weight: 600; } /* Admin Empty State */ .admin-empty-state { text-align: center; padding: 60px 20px; } .admin-empty-state i { font-size: 4rem; color: #d1d5db; margin-bottom: 20px; } .admin-empty-state h4 { color: #374151; margin-bottom: 8px; } .admin-empty-state p { color: #6b7280; margin-bottom: 24px; } /* Admin Table Styles */ .admin-table { margin-bottom: 0; } .admin-table thead th { background: #f9fafb; border-bottom: 2px solid #e5e7eb; font-weight: 600; color: #374151; padding: 12px 16px; } .admin-table tbody td { padding: 12px 16px; vertical-align: middle; } .admin-table tbody tr:hover { background: #f9fafb; } /* Status Badges */ .badge-admin-success { background: #10b981 !important; color: #fff !important; font-weight: 500; padding: 4px 10px; } .badge-admin-warning { background: #f59e0b !important; color: #000 !important; font-weight: 500; padding: 4px 10px; } .badge-admin-danger { background: #ef4444 !important; color: #fff !important; font-weight: 500; padding: 4px 10px; } .badge-admin-info { background: #3b82f6 !important; color: #fff !important; font-weight: 500; padding: 4px 10px; } /* ============================================================================= SUPERADMIN PAGES - Red/Dark Theme ============================================================================= */ /* SuperAdmin Page Header - Red gradient */ /* SuperAdmin page header — match Template Management: plain text on the page gradient (no boxed panel), with the small muted badge. */ .superadmin-page-header { background: transparent; color: #fff; padding: 4px 0 12px; border-radius: 0; margin-bottom: 16px; border-left: none; } .superadmin-page-header h1 { margin: 0; font-size: 28px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 12px; } .superadmin-page-header h1 i { color: #a5b4fc; } .superadmin-page-header p { margin: 8px 0 0 0; color: rgba(255, 255, 255, 0.6); font-size: 14px; } /* Muted maroon pill — mirrors Template Management's `badge bg-danger`. */ .superadmin-badge { background: #4a2c2f; color: #f0b8bc; padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: normal; } /* SuperAdmin Stat Cards — uniform translucent glass (Template Management look). */ .stat-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 20px; height: 100%; } /* Colour variants kept as class hooks but neutralised so all cards are uniform. */ .stat-card-danger, .stat-card-warning, .stat-card-dark, .stat-card-success { border-left: 1px solid rgba(255, 255, 255, 0.1); } .stat-card-title { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.6); margin-bottom: 8px; } .stat-card-danger .stat-card-title, .stat-card-warning .stat-card-title, .stat-card-success .stat-card-title { color: rgba(255, 255, 255, 0.6); } .stat-card-value { font-size: 44px; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 4px; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; } .stat-card-label { font-size: 12px; color: rgba(255, 255, 255, 0.4); } /* SuperAdmin Section Cards — glass surfaces with uniform headers. */ .section-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; overflow: hidden; height: 100%; display: flex; flex-direction: column; } .section-card-header { padding: 16px 20px; font-weight: 600; font-size: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); color: #e4e6eb; } /* Colour variants kept as class hooks; tinted icon only, uniform glass header. */ .section-card-header-danger, .section-card-header-primary, .section-card-header-dark, .section-card-header-info { background: rgba(255, 255, 255, 0.05); color: #e4e6eb; } .section-card-header-danger i { color: #f0b8bc; } .section-card-header-primary i { color: #a8c4f0; } .section-card-header-dark i { color: #cbd5e1; } .section-card-header-info i { color: #a8f0f0; } /* "Across your sites" cross-site/domain aggregate panel (_TrafficSiteBreakdown) — used on the dashboard home + the full analytics page, so the styling is global (not inline like the analytics-only bits). */ .sn-sitebd .sn-chart-body { position: relative; } .sn-sitebd .sn-data-link { color: var(--bs-info, #6ec1e4); text-decoration: none; word-break: break-all; } .sn-sitebd .sn-data-link:hover { text-decoration: underline; } .sn-bd-tbl { font-size: .9rem; } .sn-bd-tbl th { color: var(--theme-text-muted, #94a3b8); font-weight: 600; border-bottom-color: rgba(255, 255, 255, .1); white-space: nowrap; } .sn-bd-tbl td { border-bottom-color: rgba(255, 255, 255, .06); vertical-align: middle; } .sn-bd-name { font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sn-bd-ref { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Typeahead "switch / view site" picker (per-site analytics — Dashboard + SuperAdmin). Shared partial _SiteSwitchTypeahead. */ .sn-siteswitch { position: relative; min-width: 240px; } .sn-siteswitch-menu { position: absolute; z-index: 30; top: calc(100% + 4px); right: 0; left: 0; max-height: 340px; overflow-y: auto; background: #1a1d29; border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); padding: 4px; } .sn-siteswitch-hdr { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; padding: 6px 10px 2px; } .sn-siteswitch-item { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 6px; cursor: pointer; color: #e2e8f0; font-size: .92rem; } .sn-siteswitch-item:hover, .sn-siteswitch-item.active { background: rgba(var(--bs-primary-rgb, 124, 58, 237), .22); } .sn-siteswitch-item .v { color: #94a3b8; font-size: .82rem; white-space: nowrap; } .sn-siteswitch-item.current { opacity: .55; } .sn-siteswitch-sys { font-size: .66rem; text-transform: uppercase; letter-spacing: .03em; color: #fcd34d; border: 1px solid rgba(252, 211, 77, .4); border-radius: 4px; padding: 0 5px; margin-left: 6px; } .sn-siteswitch-empty { padding: 8px 10px; color: #94a3b8; font-size: .88rem; } .section-card-body { padding: 16px; flex: 1; } .section-card-body .btn { margin-bottom: 8px; text-align: left; justify-content: flex-start; } .section-card-body .btn:last-child { margin-bottom: 0; } /* SuperAdmin Buttons */ .btn-superadmin-danger { background: transparent; border: 1px solid #dc2626; color: #f87171; } .btn-superadmin-danger:hover { background: rgba(220, 38, 38, 0.18); color: #fca5a5; } .btn-superadmin-primary { background: transparent; border: 1px solid #3b82f6; color: #60a5fa; } .btn-superadmin-primary:hover { background: rgba(59, 130, 246, 0.18); color: #93c5fd; } .btn-superadmin-dark { background: transparent; border: 1px solid #6b7280; color: #9ca3af; } .btn-superadmin-dark:hover { background: #4b5563; color: #fff; } .btn-superadmin-warning { background: transparent; border: 1px solid #f59e0b; color: #fbbf24; } .btn-superadmin-warning:hover { background: rgba(245, 158, 11, 0.18); color: #fcd34d; } .btn-superadmin-info { background: transparent; border: 1px solid #06b6d4; color: #22d3ee; } .btn-superadmin-info:hover { background: rgba(6, 182, 212, 0.18); color: #67e8f9; } .btn-superadmin-disabled { background: transparent; border: 1px solid #374151; color: #4b5563; cursor: not-allowed; } /* ============================================ Dashboard Kit (Link-Lytics-style, SNI accent) Shared landing-dashboard pieces: header action row, stat cards, chart panels, quick-action icon tiles, data panels. Dark-glass on the backend-theme body; indigo/purple accent. ============================================ */ /* Header action button row (top-right of the page header). */ .sn-dash-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .sn-dash-actions .btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; border-radius: 8px; padding: 8px 14px; } /* Stat card: a small uppercase trend/sub line under the value. */ .stat-card .stat-card-sub { font-size: 12px; color: rgba(255, 255, 255, 0.45); margin-top: 6px; } .stat-card .stat-card-sub .up { color: #34d399; } /* Chart panel — a section-card sized for a canvas. */ .sn-chart-body { padding: 16px 20px 20px; } /* Quick-action icon tiles (replaces vertical button lists). */ .sn-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 992px) { .sn-tiles { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .sn-tiles { grid-template-columns: 1fr; } } .sn-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; min-height: 132px; padding: 20px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.10); color: #e4e6eb; text-decoration: none; transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease; position: relative; } .sn-tile:hover { transform: translateY(-2px); border-color: rgba(124, 58, 237, 0.6); background: rgba(124, 58, 237, 0.10); color: #fff; } .sn-tile i { font-size: 28px; color: #a5b4fc; } .sn-tile:hover i { color: #c4b5fd; } .sn-tile-label { font-weight: 600; font-size: 14px; } .sn-tile-badge { position: absolute; top: 10px; right: 10px; min-width: 22px; padding: 1px 7px; border-radius: 11px; font-size: 11px; font-weight: 700; background: rgba(99, 102, 241, 0.25); color: #c7d2fe; } .sn-tile-badge.warn { background: rgba(245, 158, 11, 0.22); color: #fcd34d; } .sn-tile-badge.danger { background: rgba(220, 38, 38, 0.25); color: #fca5a5; } .sn-tile.disabled { opacity: 0.45; pointer-events: none; } /* Simple key/value data rows inside a section-card (top hosts, by company). */ .sn-data-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .sn-data-row:last-child { border-bottom: none; } .sn-data-row .label { color: #d1d5db; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%; } .sn-data-row .val { font-weight: 700; color: #fff; } /* Company-context banner (SuperAdmin operating-as a company). */ .sn-context-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 18px; margin-bottom: 16px; border-radius: 12px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(168, 85, 247, 0.12) 100%); border: 1px solid rgba(255, 255, 255, 0.12); color: #e4e6eb; } .sn-context-bar strong { color: #fff; } /* Highlight the currently-active company card in the chooser. */ .sn-company-active { border-color: rgba(16, 185, 129, 0.6) !important; box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.4); } /* Thin active-users progress bar on company cards. */ .sn-active-bar { height: 5px; background: rgba(255, 255, 255, 0.08); border-radius: 3px; } .sn-active-bar .progress-bar { background: #6366f1; } /* ============================================ Hub Management - Glassmorphism & Pastels ============================================ */ /* Container with subtle gradient background */ .hub-container { /* Transparent so the shared body gradient (theme.css backend-theme) shows through — avoids a second, mismatched gradient block behind the panels. */ background: transparent; padding: 24px; } /* Glassmorphism base card */ .hub-glass { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; } /* Header with glass effect */ .hub-glass-header { background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(168, 85, 247, 0.15) 100%); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 16px; padding: 24px 32px; margin-bottom: 24px; } .hub-glass-header h1 { margin: 0; font-size: 28px; font-weight: 600; color: #e0e7ff; display: flex; align-items: center; gap: 12px; } .hub-glass-header h1 i { color: #a78bfa; } .hub-glass-header p { margin: 8px 0 0 0; color: rgba(224, 231, 255, 0.7); font-size: 14px; } /* Hub badge - purple/violet pastel */ .hub-badge { background: linear-gradient(135deg, rgba(139, 92, 246, 0.8) 0%, rgba(124, 58, 237, 0.8) 100%); color: #fff; padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; backdrop-filter: blur(4px); } /* Primary domain badge - gold/amber glow */ .hub-badge-primary { background: linear-gradient(135deg, rgba(251, 191, 36, 0.9) 0%, rgba(245, 158, 11, 0.9) 100%); color: #1a1a2e; box-shadow: 0 0 20px rgba(251, 191, 36, 0.4); animation: primaryGlow 2s ease-in-out infinite alternate; } @keyframes primaryGlow { from { box-shadow: 0 0 15px rgba(251, 191, 36, 0.3); } to { box-shadow: 0 0 25px rgba(251, 191, 36, 0.5); } } /* Stat cards with glass effect and pastel accents */ .hub-stat-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 20px 24px; height: 100%; transition: all 0.3s ease; } .hub-stat-card:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.15); transform: translateY(-2px); } /* Pastel accent colors for stat cards */ .hub-stat-card-violet { border-left: 3px solid #a78bfa; background: linear-gradient(135deg, rgba(167, 139, 250, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%); } .hub-stat-card-amber { border-left: 3px solid #fbbf24; background: linear-gradient(135deg, rgba(251, 191, 36, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%); } .hub-stat-card-cyan { border-left: 3px solid #22d3ee; background: linear-gradient(135deg, rgba(34, 211, 238, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%); } .hub-stat-card-emerald { border-left: 3px solid #34d399; background: linear-gradient(135deg, rgba(52, 211, 153, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%); } .hub-stat-card-rose { border-left: 3px solid #fb7185; background: linear-gradient(135deg, rgba(251, 113, 133, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%); } .hub-stat-card .stat-title { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } .hub-stat-card .stat-value { font-size: 32px; font-weight: 700; color: #fff; line-height: 1; } .hub-stat-card .stat-label { font-size: 12px; color: rgba(255, 255, 255, 0.5); margin-top: 4px; } .hub-stat-card-violet .stat-value { color: #c4b5fd; } .hub-stat-card-amber .stat-value { color: #fde68a; } .hub-stat-card-cyan .stat-value { color: #a5f3fc; } .hub-stat-card-emerald .stat-value { color: #a7f3d0; } .hub-stat-card-rose .stat-value { color: #fecdd3; } /* Glass table */ .hub-glass-table { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; overflow: hidden; } .hub-glass-table .table { margin-bottom: 0; color: #e0e7ff; } .hub-glass-table .table thead th { background: rgba(99, 102, 241, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: #a5b4fc; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; padding: 14px 16px; } .hub-glass-table .table tbody tr { transition: background 0.2s ease; } .hub-glass-table .table tbody tr:hover { background: rgba(255, 255, 255, 0.05); } .hub-glass-table .table tbody td { border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding: 14px 16px; vertical-align: middle; } /* Primary row highlight in table */ .hub-glass-table .table tbody tr.row-primary { background: linear-gradient(90deg, rgba(251, 191, 36, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%); border-left: 3px solid #fbbf24; } .hub-glass-table .table tbody tr.row-primary:hover { background: linear-gradient(90deg, rgba(251, 191, 36, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%); } /* Glass form card */ .hub-glass-form { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; overflow: hidden; } /* Primary domain editing - prominent header */ .hub-primary-edit-header { background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.15) 100%); border: 1px solid rgba(251, 191, 36, 0.3); border-radius: 16px; padding: 24px 32px; margin-bottom: 24px; position: relative; overflow: hidden; } .hub-primary-edit-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent 0%, rgba(251, 191, 36, 0.1) 50%, transparent 100%); animation: primaryShimmer 3s ease-in-out infinite; } @keyframes primaryShimmer { 0%, 100% { transform: translateX(-100%); } 50% { transform: translateX(100%); } } .hub-primary-edit-header h1 { margin: 0; font-size: 28px; font-weight: 600; color: #fef3c7; display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; } .hub-primary-edit-header h1 i { color: #fbbf24; } .hub-primary-edit-header p { margin: 8px 0 0 0; color: rgba(254, 243, 199, 0.8); font-size: 14px; position: relative; z-index: 1; } .hub-primary-edit-header .hub-badge-primary { position: relative; z-index: 1; } /* Glass tabs */ .hub-glass-tabs { background: rgba(255, 255, 255, 0.02); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .hub-glass-tabs .nav-tabs { border-bottom: none; padding: 0 16px; } .hub-glass-tabs .nav-tabs .nav-link { color: rgba(255, 255, 255, 0.6); border: none; border-bottom: 2px solid transparent; padding: 16px 20px; font-weight: 500; transition: all 0.2s ease; background: transparent; border-radius: 0; } .hub-glass-tabs .nav-tabs .nav-link:hover { color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.03); } .hub-glass-tabs .nav-tabs .nav-link.active { color: #a5b4fc; background: rgba(99, 102, 241, 0.1); border-bottom-color: #818cf8; } .hub-glass-tabs .nav-tabs .nav-link i { margin-right: 8px; } /* Tab content area */ .hub-glass-content { padding: 24px; background: rgba(255, 255, 255, 0.02); } /* Form controls with glass styling */ .hub-glass-content .form-control, .hub-glass-content .form-select { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #e0e7ff; border-radius: 10px; transition: all 0.2s ease; } .hub-glass-content .form-control:focus, .hub-glass-content .form-select:focus { background: rgba(255, 255, 255, 0.08); border-color: rgba(139, 92, 246, 0.5); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15); color: #fff; } .hub-glass-content .form-control::placeholder { color: rgba(255, 255, 255, 0.35); } .hub-glass-content .form-label { color: rgba(255, 255, 255, 0.8); font-weight: 500; } .hub-glass-content .form-text { color: rgba(255, 255, 255, 0.5); } .hub-glass-content .form-check-input { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); } .hub-glass-content .form-check-input:checked { background-color: #8b5cf6; border-color: #8b5cf6; } /* Glass buttons */ .btn-hub-primary { background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%); border: none; color: #fff; border-radius: 10px; padding: 10px 20px; font-weight: 500; transition: all 0.2s ease; } .btn-hub-primary:hover { background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25); } .btn-hub-secondary { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.8); border-radius: 10px; padding: 10px 20px; font-weight: 500; transition: all 0.2s ease; } .btn-hub-secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.25); color: #fff; } .btn-hub-success { background: linear-gradient(135deg, rgba(52, 211, 153, 0.8) 0%, rgba(16, 185, 129, 0.8) 100%); border: 1px solid rgba(52, 211, 153, 0.5); color: #fff; border-radius: 10px; } .btn-hub-success:hover { background: linear-gradient(135deg, rgba(52, 211, 153, 0.95) 0%, rgba(16, 185, 129, 0.95) 100%); color: #fff; box-shadow: 0 4px 12px rgba(52, 211, 153, 0.3); } .btn-hub-warning { background: linear-gradient(135deg, rgba(251, 191, 36, 0.8) 0%, rgba(245, 158, 11, 0.8) 100%); border: 1px solid rgba(251, 191, 36, 0.5); color: #1a1a2e; border-radius: 10px; } .btn-hub-warning:hover { background: linear-gradient(135deg, rgba(251, 191, 36, 0.95) 0%, rgba(245, 158, 11, 0.95) 100%); color: #1a1a2e; box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3); } .btn-hub-danger { background: linear-gradient(135deg, rgba(239, 68, 68, 0.8) 0%, rgba(220, 38, 38, 0.8) 100%); border: 1px solid rgba(239, 68, 68, 0.5); color: #fff; border-radius: 10px; } .btn-hub-danger:hover { background: linear-gradient(135deg, rgba(239, 68, 68, 0.95) 0%, rgba(220, 38, 38, 0.95) 100%); color: #fff; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); } /* Glass alerts */ .hub-glass-content .alert-info { background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); color: #93c5fd; border-radius: 12px; } .hub-glass-content .alert-warning { background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.3); color: #fde68a; border-radius: 12px; } .hub-glass-content .alert-danger { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #fecaca; border-radius: 12px; } /* Mode cards with glass effect */ .hub-mode-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 20px; cursor: pointer; transition: all 0.3s ease; height: 100%; } .hub-mode-card:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.2); transform: translateY(-3px); } .hub-mode-card.selected { background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(99, 102, 241, 0.1) 100%); border-color: rgba(139, 92, 246, 0.5); box-shadow: 0 0 20px rgba(139, 92, 246, 0.2); } .hub-mode-card .mode-icon { font-size: 32px; color: rgba(255, 255, 255, 0.5); margin-bottom: 12px; } .hub-mode-card.selected .mode-icon { color: #a78bfa; } .hub-mode-card .mode-title { font-weight: 600; color: rgba(255, 255, 255, 0.9); margin-bottom: 4px; } .hub-mode-card .mode-desc { font-size: 13px; color: rgba(255, 255, 255, 0.5); } /* Theme cards */ .hub-theme-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 16px; cursor: pointer; transition: all 0.3s ease; } .hub-theme-card:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.2); transform: translateY(-2px); } .hub-theme-card.selected { background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(99, 102, 241, 0.1) 100%); border-color: rgba(139, 92, 246, 0.5); box-shadow: 0 0 15px rgba(139, 92, 246, 0.2); } /* Header style cards (Hub Site Edit) — share the theme-card look. */ .hub-header-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 16px; cursor: pointer; transition: all 0.3s ease; height: 100%; } .hub-header-card:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.2); transform: translateY(-2px); } .hub-header-card.selected { background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(99, 102, 241, 0.1) 100%); border-color: rgba(139, 92, 246, 0.5); box-shadow: 0 0 15px rgba(139, 92, 246, 0.2); } /* Template cards (layout selection with SVG previews) */ .hub-template-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; cursor: pointer; transition: all 0.3s ease; overflow: hidden; } .hub-template-card:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.2); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); } .hub-template-card.selected { background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(99, 102, 241, 0.1) 100%); border-color: rgba(139, 92, 246, 0.5); box-shadow: 0 0 20px rgba(139, 92, 246, 0.25); } .hub-template-card.premium { position: relative; } .hub-template-card .template-preview { position: relative; padding: 12px; background: rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .hub-template-card .template-preview svg { width: 100%; height: auto; display: block; border-radius: 4px; } .hub-template-card .premium-badge { position: absolute; top: 8px; right: 8px; background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 10px; } .hub-template-card .template-info { padding: 12px; text-align: center; } .hub-template-card .template-name { color: #e0e7ff; font-weight: 500; font-size: 14px; margin-bottom: 4px; } .hub-template-card .template-desc { color: rgba(255, 255, 255, 0.5); font-size: 11px; line-height: 1.3; } /* ============================================================================ GRAPESJS-STYLE TEMPLATE GALLERY Rich visual previews showing actual mini-website layouts ============================================================================ */ .template-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-bottom: 24px; } .template-gallery-item { background: rgba(255, 255, 255, 0.03); border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 16px; overflow: hidden; cursor: pointer; transition: all 0.3s ease; position: relative; } .template-gallery-item:hover { border-color: rgba(139, 92, 246, 0.4); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); } .template-gallery-item.selected { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3), 0 12px 40px rgba(139, 92, 246, 0.2); } .template-gallery-item.premium::before { content: ''; position: absolute; top: 0; right: 0; width: 60px; height: 60px; background: linear-gradient(135deg, transparent 50%, rgba(245, 158, 11, 0.9) 50%); z-index: 10; } /* Mini Website Preview Container */ .template-mini-preview { position: relative; height: 200px; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); overflow: hidden; padding: 8px; } .template-premium-badge { position: absolute; top: 8px; right: 8px; background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; padding: 4px 10px; border-radius: 20px; font-size: 10px; font-weight: 600; z-index: 20; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4); } /* Mini Site Base Styles */ .mini-site { width: 100%; height: 100%; background: #0f0f1a; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); } /* Mini Header Styles */ .mini-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .mini-header.minimal { justify-content: center; background: transparent; } .mini-header.centered { justify-content: center; } .mini-header.ecom { gap: 8px; } .mini-logo { width: 40px; height: 10px; background: linear-gradient(90deg, #8b5cf6, #a78bfa); border-radius: 2px; } .mini-logo.light { background: rgba(255, 255, 255, 0.9); } .mini-logo.centered { width: 50px; } .mini-nav { display: flex; gap: 6px; } .mini-nav span { width: 20px; height: 4px; background: rgba(255, 255, 255, 0.3); border-radius: 2px; } .mini-nav.light span { background: rgba(255, 255, 255, 0.7); } .mini-search { flex: 1; height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; max-width: 80px; } .mini-cart { width: 12px; height: 12px; background: rgba(139, 92, 246, 0.6); border-radius: 2px; } /* Mini Hero Header */ .mini-hero-header { padding: 15px 10px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.4) 0%, rgba(59, 130, 246, 0.3) 100%); display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 70px; } .mini-hero-header.gradient { background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 50%, #06b6d4 100%); } .mini-hero-content { text-align: center; margin-top: 4px; } .mini-hero-title { width: 80px; height: 8px; background: rgba(255, 255, 255, 0.9); border-radius: 2px; margin: 0 auto 4px; } .mini-hero-subtitle { width: 60px; height: 4px; background: rgba(255, 255, 255, 0.5); border-radius: 2px; margin: 0 auto; } .mini-hero-btn { width: 40px; height: 10px; background: rgba(255, 255, 255, 0.9); border-radius: 4px; margin: 6px auto 0; } /* Mini Body Styles */ .mini-body { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 6px; } .mini-body.with-sidebar { flex-direction: row; gap: 8px; } .mini-body.with-filters { flex-direction: row; gap: 6px; } .mini-body.centered { max-width: 70%; margin: 0 auto; padding: 12px 8px; } .mini-body.magazine-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 6px; } /* Mini Content Elements */ .mini-content { flex: 1; display: flex; flex-direction: column; gap: 4px; } .mini-title { width: 70%; height: 8px; background: rgba(255, 255, 255, 0.8); border-radius: 2px; } .mini-title.large { width: 80%; height: 10px; margin: 0 auto; } .mini-text { width: 100%; height: 4px; background: rgba(255, 255, 255, 0.2); border-radius: 2px; } .mini-text.short { width: 60%; } .mini-divider { width: 30px; height: 2px; background: rgba(139, 92, 246, 0.6); margin: 4px auto; border-radius: 1px; } /* Mini Sidebar */ .mini-sidebar { width: 50px; display: flex; flex-direction: column; gap: 4px; } .mini-widget { height: 25px; background: rgba(139, 92, 246, 0.15); border-radius: 4px; border: 1px solid rgba(139, 92, 246, 0.2); } /* Mini Cards */ .mini-cards { display: flex; gap: 4px; margin-top: 4px; } .mini-card { flex: 1; height: 30px; background: rgba(255, 255, 255, 0.05); border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.1); } .mini-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; } .mini-feature-card { height: 35px; background: rgba(255, 255, 255, 0.05); border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.1); } /* Mini Magazine Layout */ .mini-featured { grid-column: 1; grid-row: 1; background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(59, 130, 246, 0.2)); border-radius: 4px; min-height: 50px; } .mini-article-list { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 3px; } .mini-article { height: 14px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; } .mini-article-grid { grid-column: span 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .mini-article-card { height: 25px; background: rgba(255, 255, 255, 0.05); border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.08); } /* Mini Landing Page Sections */ .mini-section { padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .mini-section.alt { background: rgba(255, 255, 255, 0.03); } .mini-section-title { width: 50px; height: 6px; background: rgba(255, 255, 255, 0.7); border-radius: 2px; } .mini-feature-row { display: flex; gap: 6px; width: 100%; } .mini-feature-row > div { flex: 1; height: 20px; background: rgba(255, 255, 255, 0.05); border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.1); } .mini-testimonial { width: 80%; height: 20px; background: rgba(255, 255, 255, 0.08); border-radius: 6px; } .mini-cta { padding: 10px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(59, 130, 246, 0.15)); display: flex; justify-content: center; } .mini-cta-btn { width: 50px; height: 12px; background: #8b5cf6; border-radius: 4px; } /* Mini Portfolio Grid */ .mini-portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; } .mini-portfolio-item { background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(59, 130, 246, 0.15)); border-radius: 4px; min-height: 25px; } .mini-portfolio-item.tall { grid-row: span 2; } .mini-portfolio-item.wide { grid-column: span 2; } /* Mini Dashboard Layout */ .mini-site.dashboard { flex-direction: row; } .mini-dash-sidebar { width: 40px; background: rgba(255, 255, 255, 0.05); border-right: 1px solid rgba(255, 255, 255, 0.1); padding: 6px 4px; display: flex; flex-direction: column; gap: 4px; } .mini-dash-logo { width: 100%; height: 8px; background: linear-gradient(90deg, #8b5cf6, #a78bfa); border-radius: 2px; margin-bottom: 6px; } .mini-dash-menu { display: flex; flex-direction: column; gap: 3px; } .mini-dash-menu > div { height: 6px; background: rgba(255, 255, 255, 0.15); border-radius: 2px; } .mini-dash-menu > div.active { background: rgba(139, 92, 246, 0.6); } .mini-dash-main { flex: 1; padding: 6px; display: flex; flex-direction: column; gap: 6px; } .mini-dash-header { height: 10px; background: rgba(255, 255, 255, 0.05); border-radius: 4px; } .mini-dash-widgets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; flex: 1; } .mini-dash-widget { background: rgba(255, 255, 255, 0.05); border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.08); } .mini-dash-widget.wide { grid-column: span 2; } /* Mini E-Commerce Layout */ .mini-filters { width: 45px; display: flex; flex-direction: column; gap: 3px; } .mini-filter { height: 20px; background: rgba(255, 255, 255, 0.05); border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.08); } .mini-products { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .mini-product { background: rgba(255, 255, 255, 0.05); border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.08); min-height: 25px; } /* Mini Footer Styles */ .mini-footer { padding: 6px 10px; background: rgba(255, 255, 255, 0.03); border-top: 1px solid rgba(255, 255, 255, 0.08); } .mini-footer.simple { height: 12px; } .mini-footer.minimal { height: 8px; background: transparent; border: none; display: flex; justify-content: center; align-items: center; } .mini-footer.minimal::after { content: ''; width: 30px; height: 3px; background: rgba(255, 255, 255, 0.2); border-radius: 2px; } .mini-footer.multi { display: flex; gap: 6px; } .mini-footer.multi > div { flex: 1; height: 15px; background: rgba(255, 255, 255, 0.05); border-radius: 2px; } /* Template Gallery Info */ .template-gallery-info { padding: 16px; background: rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(255, 255, 255, 0.05); } .template-gallery-name { font-size: 16px; font-weight: 600; color: #e0e7ff; margin-bottom: 6px; } .template-gallery-desc { font-size: 12px; color: rgba(255, 255, 255, 0.5); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .template-selected-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 12px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(99, 102, 241, 0.2)); border: 1px solid rgba(139, 92, 246, 0.5); border-radius: 20px; font-size: 12px; font-weight: 500; color: #a78bfa; } .template-selected-badge i { color: #8b5cf6; } /* ============================================================================ PROFESSIONAL TEMPLATE GALLERY (CDN-BASED) GrapesJS-inspired gallery with CDN images and CSS fallbacks ============================================================================ */ .template-gallery-pro { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-bottom: 24px; } .template-card-pro { background: rgba(15, 15, 26, 0.95); border: 2px solid rgba(255, 255, 255, 0.08); border-radius: 16px; overflow: hidden; cursor: pointer; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .template-card-pro:hover { border-color: rgba(139, 92, 246, 0.5); transform: translateY(-6px) scale(1.02); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(139, 92, 246, 0.15); } .template-card-pro.selected { border-color: #8b5cf6; border-width: 4px; box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.45), 0 0 60px rgba(139, 92, 246, 0.35), 0 20px 50px rgba(139, 92, 246, 0.25); transform: translateY(-2px); } /* Big "SELECTED" badge in top-left corner of the thumbnail, always visible when the card is selected (the bottom pill is easy to miss inside a busy gallery). Unicode checkmark + plain text - no icon font dependency. */ .template-card-pro.selected .template-preview-pro::before { content: "\2713 SELECTED"; /* U+2713 CHECK MARK */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; position: absolute; top: 12px; left: 12px; z-index: 20; padding: 7px 14px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; border-radius: 999px; box-shadow: 0 4px 16px rgba(16, 185, 129, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.15); display: flex; align-items: center; gap: 6px; text-transform: uppercase; pointer-events: none; } /* Slight tint over the preview so the eye is drawn to the selected card */ .template-card-pro.selected .template-preview-pro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(16, 185, 129, 0.06) 100%); pointer-events: none; z-index: 15; } .template-card-pro.premium { border-color: rgba(245, 158, 11, 0.3); } /* Preview Container */ .template-preview-pro { position: relative; height: 200px; overflow: hidden; background: linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 100%); } .template-thumb-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .template-card-pro:hover .template-thumb-img { transform: scale(1.08); } /* CSS Fallback - displayed when image fails */ .template-css-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 8px; } /* Overlay */ .template-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); opacity: 0; transition: opacity 0.3s ease; } .template-card-pro:hover .template-overlay { opacity: 1; } .template-type-badge { display: inline-block; padding: 4px 10px; background: rgba(139, 92, 246, 0.9); border-radius: 20px; font-size: 10px; font-weight: 600; color: #fff; text-transform: capitalize; } /* PRO Badge */ .template-pro-badge { position: absolute; top: 10px; right: 10px; padding: 5px 12px; background: linear-gradient(135deg, #f59e0b, #d97706); border-radius: 20px; font-size: 11px; font-weight: 700; color: #fff; z-index: 10; box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4); display: flex; align-items: center; gap: 4px; } /* Info Section */ .template-info-pro { padding: 16px 18px; background: rgba(0, 0, 0, 0.3); border-top: 1px solid rgba(255, 255, 255, 0.05); } .template-name-pro { font-size: 16px; font-weight: 600; color: #e0e7ff; margin: 0 0 6px 0; } .template-desc-pro { font-size: 13px; color: rgba(255, 255, 255, 0.5); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .template-selected-indicator { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 6px 14px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(99, 102, 241, 0.2)); border: 1px solid rgba(139, 92, 246, 0.5); border-radius: 20px; font-size: 12px; font-weight: 600; color: #a78bfa; } .template-selected-indicator i { color: #8b5cf6; } /* Responsive adjustments */ @media (max-width: 768px) { .template-gallery-pro { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .template-preview-pro { height: 160px; } } @media (min-width: 1400px) { .template-gallery-pro { grid-template-columns: repeat(4, 1fr); } } /* ============================================================================ TEMPLATE ACTIONS OVERLAY (Preview/Select buttons on hover) ============================================================================ */ .template-actions-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; gap: 12px; opacity: 0; transition: opacity 0.3s ease; z-index: 5; } .template-card-pro:hover .template-actions-overlay { opacity: 1; } .btn-template-action { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all 0.2s ease; border: 2px solid transparent; } .btn-template-action.btn-preview { background: rgba(255, 255, 255, 0.15); color: #fff; border-color: rgba(255, 255, 255, 0.3); } .btn-template-action.btn-preview:hover { background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.5); transform: scale(1.1); } .btn-template-action.btn-select { background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; border-color: transparent; } .btn-template-action.btn-select:hover { background: linear-gradient(135deg, #a78bfa, #818cf8); transform: scale(1.1); box-shadow: 0 0 20px rgba(139, 92, 246, 0.5); } /* ============================================================================ TEMPLATE SOURCES GRID (External template providers) ============================================================================ */ .template-load-more-section { padding: 20px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 16px; } .template-sources-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; } .template-source-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 16px 12px; text-align: center; cursor: pointer; transition: all 0.25s ease; } .template-source-card:hover { background: rgba(139, 92, 246, 0.1); border-color: rgba(139, 92, 246, 0.3); transform: translateY(-2px); } .template-source-card .source-icon { font-size: 24px; color: #a78bfa; margin-bottom: 8px; } .template-source-card .source-name { font-size: 13px; font-weight: 600; color: #e0e7ff; margin-bottom: 4px; } .template-source-card .source-count { font-size: 11px; color: rgba(255, 255, 255, 0.4); } /* ============================================================================ TEMPLATE PREVIEW MODAL ============================================================================ */ .preview-detail-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 16px; text-align: center; } .preview-detail-card i { font-size: 24px; color: #8b5cf6; margin-bottom: 8px; display: block; } .preview-detail-card .detail-label { display: block; font-size: 11px; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .preview-detail-card .detail-value { display: block; font-size: 14px; font-weight: 600; color: #e0e7ff; } /* ============================================================================ IMPORT TEMPLATES MODAL ============================================================================ */ .import-source-tab { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; color: rgba(255, 255, 255, 0.7) !important; border-radius: 8px !important; padding: 8px 16px !important; font-size: 13px !important; } .import-source-tab:hover { background: rgba(255, 255, 255, 0.1) !important; color: #fff !important; } .import-source-tab.active { background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(99, 102, 241, 0.2)) !important; border-color: rgba(139, 92, 246, 0.5) !important; color: #fff !important; } .import-templates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .import-template-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; overflow: hidden; transition: all 0.3s ease; } .import-template-card:hover { border-color: rgba(139, 92, 246, 0.4); transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); } .import-template-img { position: relative; height: 180px; overflow: hidden; } .import-template-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .import-template-card:hover .import-template-img img { transform: scale(1.05); } .import-template-actions { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.75); display: flex; align-items: center; justify-content: center; gap: 10px; opacity: 0; transition: opacity 0.3s ease; } .import-template-card:hover .import-template-actions { opacity: 1; } .import-template-info { padding: 16px; } .import-template-info h6 { font-size: 15px; font-weight: 600; color: #e0e7ff; margin: 0 0 6px 0; } .import-template-info p { font-size: 13px; color: rgba(255, 255, 255, 0.5); margin: 0 0 10px 0; } .import-template-tags { display: flex; flex-wrap: wrap; gap: 6px; } .import-template-tags .tag { padding: 3px 8px; background: rgba(139, 92, 246, 0.15); border-radius: 4px; font-size: 11px; color: #a78bfa; } /* Page cards */ .hub-page-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 16px; cursor: pointer; transition: all 0.2s ease; } .hub-page-card:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.2); } .hub-page-card.selected { background: linear-gradient(135deg, rgba(52, 211, 153, 0.1) 0%, rgba(16, 185, 129, 0.08) 100%); border-color: rgba(52, 211, 153, 0.5); } /* Glass footer */ .hub-glass-footer { background: rgba(255, 255, 255, 0.02); border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 16px 24px; } /* Accordion with glass styling */ .hub-glass-content .accordion-item { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px !important; margin-bottom: 8px; } .hub-glass-content .accordion-button { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.8); border-radius: 12px !important; } .hub-glass-content .accordion-button:not(.collapsed) { background: rgba(99, 102, 241, 0.1); color: #a5b4fc; } .hub-glass-content .accordion-button::after { filter: invert(1) opacity(0.5); } .hub-glass-content .accordion-body { background: transparent; } /* Section dividers */ .hub-section-title { color: rgba(255, 255, 255, 0.9); font-size: 18px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; } .hub-section-title i { color: #a78bfa; } /* Character counter styling */ .hub-char-counter { font-size: 12px; color: rgba(255, 255, 255, 0.5); } .hub-char-counter.warning { color: #fbbf24; } .hub-char-counter.danger { color: #f87171; } /* ============================================================================ HUB SITE THEMES (Color Schemes) Applied to via ViewBag.Request.Site.ThemeCssClass ============================================================================ */ /* Base theme variables - These are overridden by specific themes */ body[class*="theme-"] { --theme-primary: #8b5cf6; --theme-primary-rgb: 139, 92, 246; --theme-secondary: #a78bfa; --theme-secondary-rgb: 167, 139, 250; --theme-bg: #0f0f1a; --theme-surface: rgba(255, 255, 255, 0.03); --theme-border: rgba(255, 255, 255, 0.1); --theme-text: #e0e7ff; --theme-text-muted: rgba(255, 255, 255, 0.72); } /* Theme 1: Default Dark (Violet) */ /* NOTE: these specific themes are prefixed `body` so their specificity (0,1,1) ties the base `body[class*="theme-"]` var block (0,1,1) and wins by source order (defined later) — otherwise a bare `.theme-ocean-blue` (0,1,0) loses to the base block and every theme renders with the base violet primary. */ body.theme-default-dark { --theme-primary: #8b5cf6; --theme-primary-rgb: 139, 92, 246; --theme-secondary: #a78bfa; --theme-secondary-rgb: 167, 139, 250; background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 50%, #16213e 100%); min-height: 100vh; } /* Theme 2: Ocean Blue */ body.theme-ocean-blue { --theme-primary: #0ea5e9; --theme-primary-rgb: 14, 165, 233; --theme-secondary: #38bdf8; --theme-secondary-rgb: 56, 189, 248; background: linear-gradient(135deg, #0c1929 0%, #0f2744 50%, #0d3b66 100%); min-height: 100vh; } /* Theme 3: Forest Green */ body.theme-forest-green { --theme-primary: #10b981; --theme-primary-rgb: 16, 185, 129; --theme-secondary: #34d399; --theme-secondary-rgb: 52, 211, 153; background: linear-gradient(135deg, #0d1f17 0%, #132f20 50%, #1a4731 100%); min-height: 100vh; } /* Theme 4: Sunset Orange */ body.theme-sunset-orange { --theme-primary: #f59e0b; --theme-primary-rgb: 245, 158, 11; --theme-secondary: #fbbf24; --theme-secondary-rgb: 251, 191, 36; background: linear-gradient(135deg, #1a1207 0%, #2d1f0a 50%, #44290e 100%); min-height: 100vh; } /* Theme 5: Rose Pink */ body.theme-rose-pink { --theme-primary: #ec4899; --theme-primary-rgb: 236, 72, 153; --theme-secondary: #f472b6; --theme-secondary-rgb: 244, 114, 182; background: linear-gradient(135deg, #1a0d14 0%, #2d1423 50%, #441d32 100%); min-height: 100vh; } /* Theme 6: Crimson Red */ body.theme-crimson-red { --theme-primary: #b91c1c; --theme-primary-rgb: 185, 28, 28; --theme-secondary: #dc2626; --theme-secondary-rgb: 220, 38, 38; background: linear-gradient(135deg, #1a0a0a 0%, #2d1010 50%, #441515 100%); min-height: 100vh; } /* Theme 7: Midnight (Dark Slate) */ body.theme-midnight { --theme-primary: #475569; --theme-primary-rgb: 71, 85, 105; --theme-secondary: #64748b; --theme-secondary-rgb: 100, 116, 139; background: linear-gradient(135deg, #0f1115 0%, #1a1d24 50%, #252a33 100%); min-height: 100vh; } /* Theme 8: Light Glass */ body.theme-light-glass { --theme-primary: #6366f1; --theme-primary-rgb: 99, 102, 241; --theme-secondary: #818cf8; --theme-secondary-rgb: 129, 140, 248; --theme-bg: #f8fafc; --theme-surface: rgba(255, 255, 255, 0.8); --theme-border: rgba(0, 0, 0, 0.1); --theme-text: #1e293b; --theme-text-muted: rgba(0, 0, 0, 0.6); background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%); min-height: 100vh; color: var(--theme-text); } /* --------------------------------------------------------------------------- Glass themes (frosted) — deep gradient + translucent white surfaces, mirroring the .hub-glass admin look. Seeded IsFrosted=1 (HubThemes), so the body gets `sn-frosted` and the frosted card rules below add backdrop-blur. Surfaces use the same rgba(255,255,255,.05/.1) as .hub-glass. --------------------------------------------------------------------------- */ body.theme-amethyst-glass { --theme-primary: #a78bfa; --theme-primary-rgb: 167, 139, 250; --theme-secondary: #c4b5fd; --theme-secondary-rgb: 196, 181, 253; --theme-surface: rgba(255, 255, 255, 0.05); --theme-border: rgba(255, 255, 255, 0.1); --theme-text: #ece9ff; --theme-text-muted: rgba(255, 255, 255, 0.72); background: linear-gradient(135deg, #150f29 0%, #221a40 50%, #2d1f55 100%); min-height: 100vh; color: var(--theme-text); } body.theme-aurora-glass { --theme-primary: #2dd4bf; --theme-primary-rgb: 45, 212, 191; --theme-secondary: #5eead4; --theme-secondary-rgb: 94, 234, 212; --theme-surface: rgba(255, 255, 255, 0.05); --theme-border: rgba(255, 255, 255, 0.1); --theme-text: #e0fbf4; --theme-text-muted: rgba(255, 255, 255, 0.72); background: linear-gradient(135deg, #07201f 0%, #0a2e33 50%, #0d3f4a 100%); min-height: 100vh; color: var(--theme-text); } body.theme-rose-quartz-glass { --theme-primary: #fb7185; --theme-primary-rgb: 251, 113, 133; --theme-secondary: #fda4af; --theme-secondary-rgb: 253, 164, 175; --theme-surface: rgba(255, 255, 255, 0.05); --theme-border: rgba(255, 255, 255, 0.1); --theme-text: #ffeaf0; --theme-text-muted: rgba(255, 255, 255, 0.72); background: linear-gradient(135deg, #261019 0%, #3a1827 50%, #4d2236 100%); min-height: 100vh; color: var(--theme-text); } body.theme-smoke-glass { --theme-primary: #cbd5e1; --theme-primary-rgb: 203, 213, 225; --theme-secondary: #e2e8f0; --theme-secondary-rgb: 226, 232, 240; --theme-surface: rgba(255, 255, 255, 0.05); --theme-border: rgba(255, 255, 255, 0.1); --theme-text: #eef1f5; --theme-text-muted: rgba(255, 255, 255, 0.7); background: linear-gradient(135deg, #131519 0%, #1c1f26 50%, #272b34 100%); min-height: 100vh; color: var(--theme-text); } /* Frosted effect: when the selected theme is frosted (HubThemes.IsFrosted → body.sn-frosted from BaseController), give translucent surfaces a real backdrop-blur so the gradient shows through like frosted glass. Only on Full-mode themed pages (Accent/None keep the template's own surfaces). */ body.sn-frosted[class*="theme-"]:not(.sn-mode-accent):not(.sn-mode-none) .card, body.sn-frosted[class*="theme-"]:not(.sn-mode-accent):not(.sn-mode-none) .card-body, body.sn-frosted[class*="theme-"]:not(.sn-mode-accent):not(.sn-mode-none) .hub-glass, body.sn-frosted[class*="theme-"]:not(.sn-mode-accent):not(.sn-mode-none) .sn-search, body.sn-frosted[class*="theme-"]:not(.sn-mode-accent):not(.sn-mode-none) .sn-product-card, body.sn-frosted[class*="theme-"]:not(.sn-mode-accent):not(.sn-mode-none) .sn-no-results { -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); background-color: rgba(255, 255, 255, 0.07); } /* Apply theme colors to common elements when a theme is active. How far the theme reaches is gated by the template's Theme Mode, emitted as a body class by BaseController.InjectThemeClass from HubTemplates.ThemeModeId (see SocialNet.Core.Common.TemplateThemeModeIds): - Full (sn-theme-full) : recolor text + surfaces/cards AND accents - Accent (sn-theme-accent) : only tint links/buttons; keep own text & cards - None (sn-theme-none) : theme ignored The :not() form preserves the original full-recolor behaviour for any page WITHOUT a mode class (non-skin front-end pages, older callers) — only explicit Accent/None templates opt out. So self-styled templates (SB Admin 2) keep their own text/cards while still letting the theme tint their accents. */ /* Text + surfaces: every themed page EXCEPT Accent / None modes. */ body[class*="theme-"]:not(.sn-mode-accent):not(.sn-mode-none) main { color: var(--theme-text); } /* Headings too: the front-end rule `body:not(.backend-theme) h1..h6` pins headings to --sn-gray-900 (a fixed dark), which is dark-on-dark under a dark theme (e.g. search results "No products found"). Re-point them at the theme text color. Universal across templates; higher specificity than the front-end heading rule so it wins. */ body[class*="theme-"]:not(.sn-mode-accent):not(.sn-mode-none) h1, body[class*="theme-"]:not(.sn-mode-accent):not(.sn-mode-none) h2, body[class*="theme-"]:not(.sn-mode-accent):not(.sn-mode-none) h3, body[class*="theme-"]:not(.sn-mode-accent):not(.sn-mode-none) h4, body[class*="theme-"]:not(.sn-mode-accent):not(.sn-mode-none) h5, body[class*="theme-"]:not(.sn-mode-accent):not(.sn-mode-none) h6 { color: var(--theme-text); } /* Muted/secondary text that modules hard-code to a fixed gray (e.g. search "We couldn't find…", .text-muted) reads too dark on a dark theme — re-point it at the theme's muted color. Universal across Full-mode themed templates. */ body[class*="theme-"]:not(.sn-mode-accent):not(.sn-mode-none) .sn-no-results p, body[class*="theme-"]:not(.sn-mode-accent):not(.sn-mode-none) .text-muted, body[class*="theme-"]:not(.sn-mode-accent):not(.sn-mode-none) .sn-product-features { color: var(--theme-text-muted) !important; } body[class*="theme-"]:not(.sn-mode-accent):not(.sn-mode-none) .card, body[class*="theme-"]:not(.sn-mode-accent):not(.sn-mode-none) .hub-glass { background: var(--theme-surface); border-color: var(--theme-border); } /* UNIVERSAL (any Full-mode template, not just Legacy): a theme's background is dark, so any template's Bootstrap light-surface bands (bg-light header/nav/footer, bg-white) would stay white with light --theme-text on top = unreadable. Neutralize them so the theme background shows through. Accent/None modes keep the template's own surfaces. */ body[class*="theme-"]:not(.sn-mode-accent):not(.sn-mode-none) .bg-light, body[class*="theme-"]:not(.sn-mode-accent):not(.sn-mode-none) .bg-white { background-color: transparent !important; background-image: none !important; } /* Accent tinting (links + buttons): every themed page EXCEPT None mode. */ /* Recolor links to the theme accent — but NOT anchors styled as buttons (.sn-btn). Those carry their own bg + text color (e.g. .sn-btn-primary is white-on-primary); letting this rule win made the "Back to Home" button on the search empty-state render its label in the same blue as its background → invisible. */ body[class*="theme-"]:not(.sn-mode-none) a:not(.sn-btn) { color: var(--theme-primary); } body[class*="theme-"]:not(.sn-mode-none) a:not(.sn-btn):hover { color: var(--theme-secondary); } body[class*="theme-"]:not(.sn-mode-none) .btn-primary, body[class*="theme-"]:not(.sn-mode-none) .btn-hub-primary { background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%); border-color: var(--theme-primary); } /* Accent / None: the template owns its own background — don't take the theme class's dark body gradient or forced full-height (those are for Full-mode layouts built to be themed). Without this a self-styled template (SB Admin 2) gets a dark bg bleeding behind it and a stray vertical scrollbar from min-height:100vh stacking with the fixed admin-chrome spacer. Specificity (0,2,1) beats the body.theme-* rule (0,1,1) so no !important needed. */ body.sn-mode-accent[class*="theme-"], body.sn-mode-none[class*="theme-"] { background: none; min-height: 0; } /* ============================================================================ HUB SITE TEMPLATES (Layout Structures) Applied to via ViewBag.Request.Site.TemplateCssClass ============================================================================ */ /* Base template styles */ body[class*="template-"] main { max-width: 1400px; margin: 0 auto; padding: 0 20px; } /* (Removed: stale `.template-classic main { display: grid; … }` historical block. That ruleset never matched any active template — the SNI: Classic body class was `template-legacy` until 2026-05-30 — and now that the rename makes it actually `template-classic`, the old grid rule would conflict with the modern skin's container/row/col Bootstrap layout below. Modern skin styles for SNI: Classic live under the `body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed)` block farther down.) */ /* Template 2: Modern Hero - Full-width hero with card content */ .template-modern-hero main { display: flex; flex-direction: column; gap: 40px; } .template-modern-hero .hero-section { width: 100vw; margin-left: calc(-50vw + 50%); min-height: 60vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.2) 0%, rgba(var(--theme-secondary-rgb), 0.1) 100%); text-align: center; padding: 60px 20px; } .template-modern-hero .content-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; } /* Template 3: Minimal - Clean, typography-focused */ .template-minimal main { max-width: 800px; margin: 60px auto; padding: 0 24px; } .template-minimal main h1, .template-minimal main h2, .template-minimal main h3 { font-weight: 300; letter-spacing: -0.02em; } .template-minimal main p { font-size: 1.125rem; line-height: 1.75; color: var(--theme-text-muted); } /* Template 4: Magazine - Multi-column grid */ .template-magazine main { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding-top: 30px; } .template-magazine .featured-article { grid-column: span 8; } .template-magazine .sidebar-articles { grid-column: span 4; display: flex; flex-direction: column; gap: 16px; } .template-magazine .article-grid { grid-column: span 12; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } @media (max-width: 992px) { .template-magazine .featured-article, .template-magazine .sidebar-articles { grid-column: span 12; } } /* Template 5: Landing Page - Conversion-focused sections */ .template-landing main { display: flex; flex-direction: column; } .template-landing .section { padding: 80px 20px; width: 100vw; margin-left: calc(-50vw + 50%); } .template-landing .section:nth-child(even) { background: var(--theme-surface); } .template-landing .section-content { max-width: 1200px; margin: 0 auto; } .template-landing .cta-section { background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.15) 0%, rgba(var(--theme-secondary-rgb), 0.1) 100%); text-align: center; } /* Template 6: Portfolio - Visual masonry grid */ .template-portfolio main { padding-top: 40px; } .template-portfolio .portfolio-header { text-align: center; margin-bottom: 40px; } .template-portfolio .portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .template-portfolio .portfolio-item { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 4/3; } .template-portfolio .portfolio-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .template-portfolio .portfolio-item:hover img { transform: scale(1.05); } /* Template 7: Dashboard - Sidebar navigation layout */ .template-dashboard { display: flex; min-height: 100vh; } .template-dashboard .sidebar-nav { width: 260px; background: var(--theme-surface); border-right: 1px solid var(--theme-border); padding: 20px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .template-dashboard main { flex: 1; padding: 30px; } .template-dashboard .dashboard-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } @media (max-width: 992px) { .template-dashboard { flex-direction: column; } .template-dashboard .sidebar-nav { width: 100%; height: auto; position: static; border-right: none; border-bottom: 1px solid var(--theme-border); } } /* Template 8: E-Commerce - Shop layout with filters */ .template-ecommerce main { display: grid; grid-template-columns: 260px 1fr; gap: 30px; padding-top: 30px; } .template-ecommerce .filter-sidebar { background: var(--theme-surface); border-radius: 12px; padding: 20px; height: fit-content; position: sticky; top: 20px; } .template-ecommerce .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; } .template-ecommerce .product-card { background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 12px; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .template-ecommerce .product-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); } @media (max-width: 992px) { .template-ecommerce main { grid-template-columns: 1fr; } .template-ecommerce .filter-sidebar { position: static; } } /* ============================================================================ SN Frontend Module Styles (Phase 1A ViewComponents) These rules style the new ViewComponents (SiteHeader, SiteNav, MainContent, AltContent, Search, AmazonProducts, PopularSites, AdBlock, Keywords, Footer) using the theme tokens defined above (--theme-surface, --theme-text, etc.) so they inherit colors from whichever theme class is on . ============================================================================ */ /* Generic shell wrapper - reserves the spot where the template class lives. Inherits text color so nested modules don't need to redeclare. */ .sn-template-frame { color: var(--theme-text); } /* Site header --------------------------------------------------------------- */ /* Fallback background — when no canned header-style class (sn-header-*) is applied AND no background-image is set, the header would otherwise render transparent and the page-body color shows through (looks like a flat dark void on dark themes). The fallback paints a subtle theme-aware accent so the header reads as a header even unstyled. Canned styles' more-specific selectors (.sn-header-glass-bar, .sn-header-hero, etc.) still win on top. */ .sn-site-header { background: var(--theme-surface, rgba(255, 255, 255, 0.06)); background-size: cover; background-position: center; background-repeat: no-repeat; } .sn-site-header-inner { padding: 40px 24px; } /* DEFAULT banner header ONLY: flex column so the primary image can be positioned (horizontal via align-self / cross axis, vertical via auto margins / main axis), with vertical room when an image is present. The canned header styles (glass-bar / hero / centered / minimal) define their own layout and must NOT inherit this — otherwise the slim styles blow up to a tall band. Scoped via the sn-header-default marker class. */ .sn-site-header.sn-header-default .sn-site-header-inner { display: flex; flex-direction: column; align-items: flex-start; } .sn-site-header.sn-header-default.has-primary-image .sn-site-header-inner { min-height: 260px; } /* Default-banner 3x3 GRID layout (title + logo placement, HUB_DOMAIN_SITE_DESIGN 14b). The inner becomes a 3-col x 3-row grid; each item is placed into its cell via grid-row/column + align-self/justify-self. Inline min-height (the site setting) governs height (grid still grows to fit a tall logo), overriding the fixed 260px above for grid-mode headers. */ .sn-site-header.sn-header-default .sn-site-header-inner.sn-hdr-grid { display: grid; /* Side columns size to their content, the middle absorbs the slack: a left/right item (e.g. the logo) shrinks to its own width instead of reserving a full third, so a left-justified title butts right up against it rather than starting at the 1/3 line. A spanning item that includes the middle column gets the remaining width and justifies within it. */ grid-template-columns: auto 1fr auto; /* Three rows: top + flexible filler + bottom. Rows size to their content (no equal-row "tripling"), so a tall logo in the bottom row sets the header height; the 1fr middle row absorbs slack so top/middle/bottom map to the real top/centre/bottom. Items are placed by grid-row/column (the view), so a title and logo in the SAME column but different rows sit apart (no overlap) and the header grows to fit both; same exact cell → they stack (handled in the view). align-items:stretch resets the parent's flex-only 'flex-start' (invalid in grid). */ grid-template-rows: auto 1fr auto; align-items: stretch; gap: 8px 16px; } /* Mobile: the auto/1fr/auto grid keeps logo + title side-by-side, which crushes a long title into a sliver on a phone. Below 600px, STACK the cells (logo on top, then title), each full-width + centered, so the header wraps cleanly. Applies to every skin (SNI: Classic, SNI: Glassed Over, …) since they all render the shared SiteHeader. !important overrides the per-item inline grid-column/align-self the view emits. */ @media (max-width: 600px) { .sn-site-header.sn-header-default .sn-site-header-inner.sn-hdr-grid { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; } .sn-site-header.sn-header-default .sn-hdr-grid > * { grid-column: auto !important; grid-row: auto !important; width: 100% !important; align-self: auto !important; justify-self: auto !important; text-align: center !important; } .sn-site-header.sn-header-default .sn-hdr-grid .sn-site-logo-link { order: -1; } /* logo above the title */ .sn-site-header.sn-header-default .sn-hdr-grid .sn-site-header-image { max-width: 80%; height: auto; } } /* Draw the eye to "Save changes" after a Header-layout Apply (changes aren't live until saved). */ .sn-save-attn { animation: snSaveAttn 1.1s ease-in-out 3; } @keyframes snSaveAttn { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); } 50% { box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.55); } } .sn-site-title { margin: 0; color: var(--theme-text); } /* When a header background image is set, give the title a readable scrim instead of relying on the image to have the right contrast. Author controls image; we control legibility. (.has-bg-image is set when the bg renders in its own layer — the older [style*=background-image] match no longer applies then.) */ .sn-site-header[style*="background-image"] .sn-site-title, .sn-site-header.has-bg-image .sn-site-title { color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); } /* =========================================================================== CANNED HEADER STYLES (Sites.HeaderStyleId -> .sn-site-header.) The class is added to the rendered .sn-site-header. NULL style = legacy banner (these rules just don't apply). Each arranges the existing title + logo (Image1) + optional bg image into a defined layout. =========================================================================== */ /* 1. Glass Bar — slim frosted band, logo + title left. The frosted overlay (::before) sits OVER the header background image when one is set ("real glass over the photo"); with no image it IS the theme-surface bar (the original look). The bg image itself lives on the .sn-site-header element (inline, from the image editor: position/size/crop). */ .sn-site-header.sn-header-glass-bar { position: relative; overflow: hidden; background-size: cover; background-position: center; border-bottom: 1px solid var(--theme-border, rgba(255, 255, 255, 0.1)); } .sn-site-header.sn-header-glass-bar::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--theme-surface, rgba(255, 255, 255, 0.06)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .sn-site-header.sn-header-glass-bar .sn-site-header-inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; padding: 14px 28px; } .sn-site-header.sn-header-glass-bar .sn-site-title { font-size: 1.55rem; margin: 0; line-height: 1.1; } .sn-site-header.sn-header-glass-bar .sn-site-header-image { order: -1; /* logo before the title */ max-width: 100%; object-fit: contain; /* honour the image editor (size/shape); no forced circle */ flex-shrink: 0; } /* 2. Hero Banner — tall bg image + dark scrim, title (and logo) at the bottom. */ .sn-site-header.sn-header-hero { position: relative; min-height: 280px; display: flex; align-items: flex-end; background-size: cover; background-position: center; } /* WITH image: dark scrim so the title remains legible regardless of the photo. */ .sn-site-header.sn-header-hero[style*="background-image"]::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.7) 100%); } /* WITHOUT image: themed gradient + soft radial accents so the hero doesn't render as a flat void (the historical default when no DefaultHeaderBkgImage was set). User can still override by setting a bg image URL later. */ .sn-site-header.sn-header-hero:not([style*="background-image"]) { background: linear-gradient(135deg, var(--theme-primary, #6366f1) 0%, var(--theme-accent, #8b5cf6) 100%); } .sn-site-header.sn-header-hero:not([style*="background-image"])::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.10) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.06) 0%, transparent 50%); pointer-events: none; } .sn-site-header.sn-header-hero .sn-site-header-inner { position: relative; z-index: 1; padding: 34px 30px; } .sn-site-header.sn-header-hero .sn-site-title { font-size: clamp(2rem, 4vw, 3rem); margin: 0; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); } .sn-site-header.sn-header-hero .sn-site-header-image { max-width: 100%; object-fit: contain; /* honour the image editor (size/shape); no forced circle */ margin-bottom: 12px; display: block; } /* 3. Centered Hero — logo centered above a centered title (over bg image if set). */ .sn-site-header.sn-header-centered { position: relative; background-size: cover; background-position: center; text-align: center; } /* WITH image: dark overlay for title legibility. */ .sn-site-header.sn-header-centered[style*="background-image"]::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); } /* WITHOUT image: themed radial gradient so the centered style reads as intentional even before a bg image is uploaded. */ .sn-site-header.sn-header-centered:not([style*="background-image"]) { background: radial-gradient(ellipse at center, var(--theme-primary, #6366f1) 0%, var(--theme-surface, #1e1b4b) 100%); } .sn-site-header.sn-header-centered .sn-site-header-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 44px 24px; } .sn-site-header.sn-header-centered .sn-site-header-image { order: -1; /* logo above the title */ max-width: 100%; object-fit: contain; /* honour the image editor (size/shape); no forced circle */ } .sn-site-header.sn-header-centered .sn-site-title { margin: 0; font-size: clamp(1.9rem, 3.5vw, 2.6rem); } /* 4. Minimal Band — thin, compact band that SHOWS the header background image when one is set (with a light scrim for title legibility). With no image it's a clean thin band on the theme. The bg image lives on .sn-site-header (inline, from the image editor). For a deliberate no-image header use the "No Image" style below. */ .sn-site-header.sn-header-minimal { position: relative; overflow: hidden; background-size: cover; background-position: center; border-bottom: 1px solid var(--theme-border, var(--sn-gray-200, #e8e4dc)); } /* Scrim only when an image is set, so the title stays readable over the photo. */ .sn-site-header.sn-header-minimal[style*="background-image"]::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.48) 100%); } .sn-site-header.sn-header-minimal .sn-site-header-inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; padding: 16px 22px; } .sn-site-header.sn-header-minimal .sn-site-title { font-size: 1.7rem; margin: 0; } /* Title over the scrim → force light text for legibility when an image is set. */ .sn-site-header.sn-header-minimal[style*="background-image"] .sn-site-title { color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55); } .sn-site-header.sn-header-minimal .sn-site-header-image { order: -1; /* small logo before the title (like Glass Bar) */ max-width: 100%; object-fit: contain; /* honour the image editor (size/shape); no forced circle */ flex-shrink: 0; } /* 5. No Image — title only, NEVER shows a header image (content-first). The deliberate "no banner" option; even if the site/page has a header image set, this style suppresses it. */ .sn-site-header.sn-header-noimage { background-image: none !important; background: transparent; border-bottom: 1px solid var(--theme-border, var(--sn-gray-200, #e8e4dc)); } .sn-site-header.sn-header-noimage .sn-site-header-image { display: none; } .sn-site-header.sn-header-noimage .sn-site-header-inner { padding: 18px 4px; } .sn-site-header.sn-header-noimage .sn-site-title { font-size: 1.7rem; margin: 0; } /* Site nav (mix of local + global links — viral linking) ------------------- */ /* Inherit-friendly styling: no background, no forced colours, no Bootstrap `.nav-link` collision. Color comes from the template's slot context via `currentColor` inheritance. The accent dots use `currentColor` too so they pick up whatever the surrounding text colour is. */ .sn-site-nav, .sn-site-pages { padding: 8px 0; background: transparent; color: inherit; } /* Hamburger for the site-page links. Hidden on desktop (links always shown); on phones the list collapses behind this toggle. Skin-neutral: inherits the nav's colour, no icon-font dependency. */ .sn-nav-toggle { display: none; } @media (max-width: 600px) { .sn-site-nav .sn-nav-toggle { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font: inherit; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 0.375rem; padding: 0.45rem 0.8rem; opacity: 0.9; } .sn-site-nav .sn-nav-toggle-bars { font-size: 1.15rem; line-height: 1; } /* Collapsed by default; !important beats any inline ListFlowStyle (e.g. display:flex) the slot emits. */ .sn-site-nav .sn-site-nav-list { display: none !important; } .sn-site-nav.sn-nav-open .sn-site-nav-list { display: block !important; margin-top: 8px; } } .sn-site-nav-heading, .sn-site-pages-heading { margin: 0 0 6px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; color: inherit; } /* Suppress bullets. !important because host themes scope `