/* ========================================================== /ui/css/public/ljh-banner.css LJH – Banner & News Ticker ---------------------------------------------------------- Ansvar: - Right column banner cards med glow-varianter - Top news ticker (automatisk scroll) ---------------------------------------------------------- OBS: Admin glass panel, form elements, toggles och item row layout finns nu i respektive base/-fil. Prefix: ljh-banner-, ljh-news- Används av: start_site/, banners/ ========================================================== */ /* ========================================================== RIGHT COLUMN – BANNER CARDS ========================================================== */ .ljh-right-stack { display: flex; flex-direction: column; gap: 24px; } .ljh-banner-card { position: relative; padding: 18px 20px; margin-top: 6px; background: linear-gradient( 180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06) ); backdrop-filter: blur(18px) saturate(160%); border-radius: 18px; border: 1px solid rgba(255,255,255,0.18); color: #eaf2ff; box-shadow: 0 12px 30px rgba(0,0,0,0.45), inset 0 0 24px rgba(255,255,255,0.08); transition: transform 0.2s ease, box-shadow 0.2s ease; } .ljh-banner-card:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,0.55), inset 0 0 30px rgba(255,255,255,0.12); } /* Glasblänk */ .ljh-banner-reflection { position: absolute; top: 10px; right: 12px; width: 48px; height: 48px; pointer-events: none; opacity: 0.25; background: radial-gradient( circle at top left, rgba(255,255,255,0.35), rgba(255,255,255,0.0) 70% ); } /* Prioritetsvarianter */ .ljh-banner-card.is-system { opacity: 0.85; transform: scale(0.98); } .ljh-banner-card.banner-ad { transform: scale(1.02); } /* Typografi */ .ljh-banner-title { font-size: 1.05rem; font-weight: 600; letter-spacing: 0.02em; color: #eaf2ff; margin-bottom: 6px; } .ljh-banner-text { font-size: 0.9rem; line-height: 1.45; color: rgba(230,240,255,0.85); } .ljh-banner-sandbox { display: block; font-family: inherit; } /* ========================================================== GLOW-VARIANTER – Publik ========================================================== */ .ljh-banner-card.type-news { border-color: rgba(80,200,120,0.45); box-shadow: 0 0 0 1px rgba(80,200,120,0.20), 0 0 24px rgba(80,200,120,0.22), 0 18px 40px rgba(0,0,0,0.45); } .ljh-banner-card.type-info { border-color: rgba(120,180,255,0.45); box-shadow: 0 0 0 1px rgba(120,180,255,0.18), 0 0 22px rgba(120,180,255,0.18), 0 18px 40px rgba(0,0,0,0.45); } .ljh-banner-card.type-ad { border-color: rgba(255,190,90,0.45); box-shadow: 0 0 0 1px rgba(255,190,90,0.20), 0 0 24px rgba(255,190,90,0.22), 0 18px 40px rgba(0,0,0,0.45); } /* ========================================================== GLOW-VARIANTER – Admin override ========================================================== */ .admin .ljh-banner-card.type-news, .admin .ljh-banner-card.banner-news { border-color: rgba(80,200,120,0.45); box-shadow: 0 0 0 1px rgba(80,200,120,0.20), 0 0 24px rgba(80,200,120,0.22), 0 18px 40px rgba(0,0,0,0.45); } .admin .ljh-banner-card.type-info, .admin .ljh-banner-card.banner-info { border-color: rgba(120,180,255,0.45); box-shadow: 0 0 0 1px rgba(120,180,255,0.18), 0 0 22px rgba(120,180,255,0.18), 0 18px 40px rgba(0,0,0,0.45); } .admin .ljh-banner-card.type-ad, .admin .ljh-banner-card.banner-ad { border-color: rgba(255,190,90,0.45); box-shadow: 0 0 0 1px rgba(255,190,90,0.20), 0 0 24px rgba(255,190,90,0.22), 0 18px 40px rgba(0,0,0,0.45); } /* ========================================================== TOP NEWS TICKER ========================================================== */ .ljh-news-banner { width: 100%; min-height: 62px; padding: 1rem 2rem; background: rgba(15,23,42,0.55); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 1.2rem; color: var(--ljh-text); font-size: 1.05rem; position: relative; z-index: 30; overflow: hidden; } .ljh-news-banner .banner-label { padding: 0.35rem 0.8rem; border-radius: var(--ljh-radius-md); font-weight: 600; color: var(--ljh-aqua-light); white-space: nowrap; position: relative; z-index: 5; } /* Ticker core */ .ljh-news-banner .ticker-viewport { flex: 1; overflow: hidden; white-space: nowrap; position: relative; z-index: 4; } .ljh-news-banner .ticker-track { display: inline-flex; width: max-content; animation: ljhTicker 35s linear infinite; } .ljh-news-banner .ticker-inner { display: inline-flex; } .ljh-news-banner .item { margin: 0 1.1rem; color: var(--ljh-text-soft); } .ljh-news-banner .item a { color: inherit; text-decoration: none; } .ljh-news-banner .item a:hover { color: var(--ljh-aqua-light); } .ljh-news-banner .sep { margin: 0 0.8rem; color: var(--ljh-aqua-light); } .ljh-news-banner .ticker-viewport:hover .ticker-track { animation-play-state: paused; } @keyframes ljhTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Frostat glas – vänster och höger kant */ .ljh-news-banner::before, .ljh-news-banner::after { content: ""; position: absolute; top: 0; bottom: 0; width: 220px; pointer-events: none; z-index: 1; } .ljh-news-banner::before { left: 0; background: linear-gradient(to right, rgba(255,255,255,0.14), rgba(255,255,255,0.06), transparent); backdrop-filter: blur(18px); } .ljh-news-banner::after { right: 0; background: linear-gradient(to left, rgba(255,255,255,0.14), rgba(255,255,255,0.06), transparent); backdrop-filter: blur(18px); } /* CTA-knapp */ .ljh-news-banner .banner-cta { position: relative; z-index: 5; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.30); backdrop-filter: blur(14px); padding: 0.45rem 1.1rem; box-shadow: inset 0 0 24px rgba(255,255,255,0.32), 0 0 22px rgba(96,165,250,0.35), 0 6px 14px rgba(0,0,0,0.35); } .ljh-news-banner .banner-cta:hover { background: rgba(255,255,255,0.25); box-shadow: inset 0 0 30px rgba(255,255,255,0.38), 0 0 30px rgba(96,165,250,0.45), 0 6px 18px rgba(0,0,0,0.4); }