` column and force the layout to stack or scroll. */ body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) .sn-main-content img, body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) .sn-main-content video, body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) .sn-main-content iframe { max-width: 100%; height: auto; display: block; margin: 1rem auto; border-radius: 12px; } /* Typography inside the article body — without these, the browser-default h1/h2/h3 sizes (especially the 2em default H1) compete with the page H1 and look oversized. */ body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) .sn-main-content h1 { font-size: 1.875rem; line-height: 1.25; font-weight: 700; margin: 0.75em 0 0.5em; } body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) .sn-main-content h2 { font-size: 1.5rem; line-height: 1.3; font-weight: 700; margin: 1.25em 0 0.5em; } body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) .sn-main-content h3 { font-size: 1.25rem; line-height: 1.35; font-weight: 600; margin: 1em 0 0.4em; } body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) .sn-main-content p { margin: 0 0 1em; } body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) .sn-main-content a { color: var(--theme-primary); text-decoration: none; } body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) .sn-main-content a:hover { text-decoration: underline; } /* Sidebar nav link wrapping — long site-page titles in the narrow col-md-2 sidebar must wrap fully rather than clip mid-line. We previously clamped to 2 lines with ellipsis to keep the nav compact, but that hid the rest of long titles (e.g. "Capturing the Pulse: Trending Social Media Topics in 2023" lost half its words). Owner pref: show the full title; readers click what they can read. Tight line-height keeps the nav from getting tall. */ body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) #sn-nav .sn-nav-link { display: block; line-height: 1.3; overflow-wrap: anywhere; word-break: break-word; } body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) .sn-alt-content { padding: 18px 0; border-bottom: 1px solid var(--sk-divider); } body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) .sn-alt-content:last-child { border-bottom: 0; } body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) .sn-alt-content-title { margin: 0 0 6px; font-size: 1.15rem; } body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) .sn-alt-content-title a { color: var(--theme-text); font-weight: 700; text-decoration: none; } body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) .sn-alt-content-title a:hover { color: var(--theme-primary); } body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) .sn-alt-content-excerpt { color: var(--theme-text-muted); margin: 0 0 6px; } body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) .sn-alt-content-more a { color: var(--theme-primary); font-weight: 600; font-size: .9rem; text-decoration: none; } body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) .sn-alt-content-more a:hover { text-decoration: underline; } /* --- Search box ----------------------------------------------------------- */ body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) .sn-search .form-control { background: var(--sk-input-bg); border: 1px solid transparent; border-radius: 10px 0 0 10px; color: var(--theme-text); padding: .6rem .9rem; } body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) .sn-search .form-control::placeholder { color: var(--theme-text-muted); } body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) .sn-search .form-control:focus { background: var(--sk-card-bg); border-color: var(--theme-primary); box-shadow: 0 0 0 .2rem rgba(var(--theme-primary-rgb), .2); } body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) .sn-search .input-group .btn-primary { background: var(--theme-primary); border-color: var(--theme-primary); border-radius: 0 10px 10px 0; padding-inline: 1rem; } body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) .sn-search-recent-badge { background: rgba(var(--theme-primary-rgb), .10); border: 1px solid transparent; color: var(--theme-primary); } body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) .sn-search-recent-badge:hover { background: rgba(var(--theme-primary-rgb), .18); color: var(--theme-primary); } /* --- Popular / featured sites --------------------------------------------- */ body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) .sn-popular-sites-list a { color: var(--theme-primary); text-decoration: none; } body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) .sn-popular-sites-list a:hover { text-decoration: underline; } /* --- Buttons (search "Back to Home", CTAs) -------------------------------- */ body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) .sn-btn-primary { background: var(--theme-primary); border: 1px solid var(--theme-primary); border-radius: 10px; color: #fff; /* solid, flat — matches the search button (.sn-search .btn-primary) */ } body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) .sn-btn-primary:hover { background: color-mix(in srgb, var(--theme-primary) 88%, #000); border-color: color-mix(in srgb, var(--theme-primary) 88%, #000); color: #fff; } /* No-results panel as a soft card */ body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) .sn-no-results { background: var(--sk-card-bg); border: var(--sk-card-border); border-radius: var(--sk-card-radius); box-shadow: var(--sk-card-shadow); } /* --- Footer band: drop bg-light --------------------------------------------*/ body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) #sn-footer { background: transparent !important; /* override .bg-light */ } body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed) .sn-site-footer { border-top: 1px solid var(--sk-divider); color: var(--theme-text-muted); } /* ============================================================================= SNI: GLASSED OVER — glass treatment on top of the shared modern skin above. Same layout/skeleton/slots as SNI: Classic, but a frosted dark-glass look out of the box: dark gradient base + translucent cards with backdrop-blur, even on the System default (no theme). A selected theme still recolors it (Full mode); a glass theme just deepens the effect. ========================================================================== */ /* Base (System default, no theme): dark gradient + glass tokens so it reads as glass without a theme. A .theme-* class out-specifies this (more classes) and recolors. */ body.sn-skin-page.template-glassed:not([class*="theme-"]) { /* --sk-* (the modern skin's card tokens) */ --sk-card-bg: rgba(255, 255, 255, 0.05); --sk-card-border: 1px solid rgba(255, 255, 255, 0.10); --sk-card-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); --sk-divider: rgba(255, 255, 255, 0.10); --sk-input-bg: rgba(0, 0, 0, 0.22); --sk-nav-hover: rgba(255, 255, 255, 0.08); /* --theme-* (consumed DIRECTLY by modules: .sn-search, .sn-sidebar-product, etc.). Without these the modules fall back to the light :root values (white surfaces). */ --theme-surface: rgba(255, 255, 255, 0.05); --theme-border: rgba(255, 255, 255, 0.10); --theme-text: #e8eaf2; --theme-text-muted: rgba(255, 255, 255, 0.72); --theme-primary: #a78bfa; --theme-primary-rgb: 167, 139, 250; --theme-secondary: #c4b5fd; --theme-secondary-rgb: 196, 181, 253; /* EXACT admin/HubSiteEdit backdrop (theme.css .backend-theme body). The #0f3460 endpoint is what makes the gradient visibly blue instead of flat near-black. */ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); color: var(--theme-text); min-height: 100vh; } /* CRITICAL for the glass look on TALL pages: pin the gradient to the viewport (like the admin's .backend-theme body) so the full dark→blue range is always visible behind the content. Without this, a long article stretches the gradient over the whole document and the visible top shows only the dark start, so translucent panels read as dark/opaque. Applies to Glassed Over and any themed skin page (all carry a gradient). */ body.sn-skin-page.template-glassed, body.sn-skin-page:is(.template-classic, .template-legacy, .template-glassed)[class*="theme-"], body.sn-skin-page[class*="theme-"] { background-attachment: fixed; } /* Headings readable on the dark glass base regardless of theme presence (the front-end rule pins them to --sn-gray-900 dark otherwise). --theme-text adapts per theme. */ body.sn-skin-page.template-glassed h1, body.sn-skin-page.template-glassed h2, body.sn-skin-page.template-glassed h3, body.sn-skin-page.template-glassed h4, body.sn-skin-page.template-glassed h5, body.sn-skin-page.template-glassed h6 { color: var(--theme-text); } /* Drop the skeleton's bg-light bands so the gradient shows through (theme path already handles this; this covers Glassed Over on the System default too). */ body.sn-skin-page.template-glassed .bg-light { background: transparent !important; } /* Always-frosted cards on Glassed Over (independent of the per-theme IsFrosted flag). */ body.sn-skin-page.template-glassed .card, body.sn-skin-page.template-glassed .card-body, body.sn-skin-page.template-glassed .sn-search, body.sn-skin-page.template-glassed .sn-no-results { -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); } /* Glassed Over: dialed-down boxiness — only the left NAV becomes a frosted glass panel. The main article stays open over the gradient (no big central box) and the sidebar teasers keep the shared skin's hairline dividers (not individual cards). The search / ad slots are still .card (glass). Keeps the glass feel without boxing everything. */ body.sn-skin-page.template-glassed .sn-site-nav { background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 16px; padding: 20px; -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); } /* Header: dim a site's own header background image with a dark scrim so the band reads as part of the dark glass instead of a clashing bright photo. Title stays readable (it already has a white color + shadow when a bg image is present). */ body.sn-skin-page.template-glassed .sn-site-header { position: relative; } body.sn-skin-page.template-glassed .sn-site-header[style*="background-image"]::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 15, 26, 0.55) 0%, rgba(15, 15, 26, 0.78) 100%); pointer-events: none; } body.sn-skin-page.template-glassed .sn-site-header-inner { position: relative; z-index: 1; } /* =========================================================================== TEMPLATE-AWARE HEADER HARMONIZATION --------------------------------------------------------------------------- The canned .sn-header-* classes (Glass Bar / Hero / Centered / Minimal) still control header layout + content placement. These per-template rules layer the template's edge / glass / shadow language on top so a header doesn't look like a foreign component bolted onto the skin — the operator can pick any header style within any template and the visual treatment reads as one design system. =========================================================================== */ /* Glassed Over — frosted aesthetic carried into the header. Soft rounded bottom (mirrors the template's card chrome elsewhere), a low-opacity border to suggest a panel rather than a slab, and a gentle drop shadow to lift it above the gradient page background. overflow:hidden keeps the existing background-image scrim and the canned-style backdrop-filter honored inside the rounded clip. */ body.sn-skin-page.template-glassed .sn-site-header { border-radius: 0 0 18px 18px; border: 1px solid rgba(255, 255, 255, 0.08); border-top: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28); overflow: hidden; } /* Glass Bar specifically WITHIN the Glassed template — stronger blur + a touch more saturation to give the bar that "real frosted glass" depth. Non-glassed templates keep the base Glass Bar treatment (less aggressive). */ body.sn-skin-page.template-glassed .sn-site-header.sn-header-glass-bar::before { -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); } /* Classic — clean editorial banner; just a hair of bottom-edge shadow so the header reads as separated from the content column without losing the flat newsprint feel the template is going for. */ body.sn-skin-page.template-classic .sn-site-header { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08); } /* Legacy stays bare on purpose — its design language is unadorned. No override here; the canned style's own rules are the whole treatment. */ /* =========================================================================== TEMPLATE THUMBNAIL FALLBACK --------------------------------------------------------------------------- Rendered on the Site Appearance template picker when a HubTemplate has no cached preview thumbnail yet (e.g. freshly-seeded templates on a new deploy). Reads as "intentional placeholder, preview coming" instead of "broken / black void". Themed gradient + subtle grid overlay matches the rest of the dark UI; bootstrap-icons layout-text-window suggests "this is a layout preview slot". =========================================================================== */ .sn-tpl-fallback { aspect-ratio: 16 / 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; position: relative; overflow: hidden; border-radius: 0.375rem 0.375rem 0 0; background: linear-gradient(135deg, var(--theme-surface, rgba(99, 102, 241, 0.18)) 0%, var(--theme-primary, rgba(168, 85, 247, 0.22)) 100%); color: rgba(255, 255, 255, 0.92); } /* Subtle grid pattern overlay — reads as "design canvas" without screaming. Pure CSS so it works regardless of image-asset deployment quirks. */ .sn-tpl-fallback::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 16px 16px; pointer-events: none; } .sn-tpl-fallback-icon { font-size: 1.75rem; color: rgba(255, 255, 255, 0.55); z-index: 1; } .sn-tpl-fallback-name { font-weight: 600; font-size: 0.85rem; text-align: center; padding: 0 8px; z-index: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } .sn-tpl-fallback-hint { font-size: 0.7rem; color: rgba(255, 255, 255, 0.55); z-index: 1; } /* ============================================================================= Auth pages (Login / Register) — Hub 2026 dark glass skin. The standalone /Account pages shipped in a warm-gray light theme that jarred against the dark app shell + the Hub 2026 auth modal. This block reskins them dark. EVERYTHING is scoped under .sn-auth-container / .sn-auth-card, and .sn-form-control is used ONLY on these two pages, so nothing here leaks into the dashboard / admin forms. ============================================================================= */ .sn-auth-container { --a-accent: #7c3aed; --a-accent-2: #22d3ee; --a-surface: #10131c; --a-surface-2: #161a26; --a-field: rgba(0, 0, 0, .3); --a-line: rgba(255, 255, 255, .10); --a-line-2: rgba(255, 255, 255, .14); --a-text: #f1f3f9; --a-text-2: #aab2c5; --a-text-3: #6f7891; } .sn-auth-container .sn-auth-card { background: var(--a-surface); border: 1px solid var(--a-line-2); box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .8); } .sn-auth-container .sn-auth-header { background: linear-gradient(135deg, rgba(124, 58, 237, .22) 0%, rgba(34, 211, 238, .12) 100%), var(--a-surface-2); border-bottom: 1px solid var(--a-line); color: var(--a-text); } .sn-auth-container .sn-auth-header h1 { color: #fff; } .sn-auth-container .sn-auth-header h1 i { color: var(--a-accent-2); } .sn-auth-container .sn-auth-header p { color: var(--a-text-2); opacity: 1; } .sn-auth-container .sn-auth-body { background: var(--a-surface); } .sn-auth-container .sn-auth-footer { background: var(--a-surface-2); border-top: 1px solid var(--a-line); } .sn-auth-container .sn-auth-footer p { color: var(--a-text-2); } .sn-auth-container .sn-auth-footer a, .sn-auth-container .sn-auth-body a:not(.sn-btn) { color: var(--a-accent-2); } .sn-auth-container .sn-form-label { color: var(--a-text-2); } .sn-auth-container .sn-form-label .text-muted, .sn-auth-container .text-muted { color: var(--a-text-3) !important; } /* Fields — both the custom .sn-form-control and the Bootstrap .form-control the password input-groups use. */ .sn-auth-container .sn-form-control, .sn-auth-container .form-control { background-color: var(--a-field); border: 1px solid var(--a-line-2); color: var(--a-text); } .sn-auth-container .sn-form-control::placeholder, .sn-auth-container .form-control::placeholder { color: var(--a-text-3); } .sn-auth-container .sn-form-control:focus, .sn-auth-container .form-control:focus { background-color: var(--a-field); border-color: var(--a-accent); box-shadow: 0 0 0 3px rgba(124, 58, 237, .25); color: var(--a-text); } .sn-auth-container input[readonly] { background-color: var(--a-surface-2) !important; color: var(--a-text-2); } /* Chrome autofill repaint (same fix as the modal). */ .sn-auth-container .sn-form-control:-webkit-autofill, .sn-auth-container .form-control:-webkit-autofill, .sn-auth-container .sn-form-control:-webkit-autofill:focus, .sn-auth-container .form-control:-webkit-autofill:focus { -webkit-text-fill-color: var(--a-text); -webkit-box-shadow: 0 0 0 1000px #0d0f17 inset; box-shadow: 0 0 0 1000px #0d0f17 inset; caret-color: var(--a-text); transition: background-color 9999s ease-in-out 0s; } /* Primary button — Hub accent gradient. */ .sn-auth-container .sn-btn-primary { background: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, transparent 100%), var(--a-accent); color: #fff; } .sn-auth-container .sn-btn-primary:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, transparent 100%), var(--a-accent); } /* Password-toggle + Generate/Copy buttons (Bootstrap outline/link variants). */ .sn-auth-container .input-group .btn-outline-secondary { background: rgba(255, 255, 255, .04); border: 1px solid var(--a-line-2); color: var(--a-text-2); border-radius: 0 .5rem .5rem 0; } .sn-auth-container .input-group .btn-outline-secondary:hover { background: rgba(255, 255, 255, .08); color: var(--a-text); } .sn-auth-container .btn-link { color: var(--a-accent-2); text-decoration: none; } .sn-auth-container .btn-outline-primary { color: var(--a-accent-2); border-color: var(--a-line-2); } /* Remember-me checkbox. */ .sn-auth-container .form-check-input { background-color: var(--a-field); border-color: var(--a-line-2); } .sn-auth-container .form-check-input:checked { background-color: var(--a-accent); border-color: var(--a-accent); } .sn-auth-container .form-check-label { color: var(--a-text-2); } /* Bootstrap alerts -> dark tinted. */ .sn-auth-container .alert-info { background: rgba(34, 211, 238, .10); border: 1px solid rgba(34, 211, 238, .35); color: var(--a-accent-2); } .sn-auth-container .alert-success { background: rgba(34, 197, 94, .10); border: 1px solid rgba(34, 197, 94, .35); color: #4ade80; } .sn-auth-container .alert-danger { background: rgba(239, 68, 68, .10); border: 1px solid rgba(239, 68, 68, .38); color: #f87171; } .sn-auth-container hr { border-color: var(--a-line); opacity: 1; } .sn-auth-container code { background: rgba(255, 255, 255, .06); color: var(--a-accent-2); padding: 2px 6px; border-radius: 6px; }