/* Newsline — community UI. Inherits the active theme's design tokens (--abl-*) when present, with brand-matched fallbacks so it looks native on Pepteez and sensible elsewhere. All rules are scoped under .nl-app to avoid clashing with the theme. */ /* Design tokens — shared by the app AND the modals (which render as siblings of .nl-app or directly on , so they can't inherit from .nl-app). */ .nl-app, .nl-modal { --nl-primary: var(--abl-primary, #202c44); --nl-primary-2: var(--abl-primary-hover, #161e2e); --nl-accent: var(--abl-accent, #6366f1); --nl-ink: var(--abl-text, #0f172a); --nl-muted: var(--abl-text-muted, #6b7280); --nl-bg: var(--abl-bg, #ffffff); --nl-soft: var(--abl-bg-soft, #f8f9fc); --nl-alt: var(--abl-bg-alt, #f1f0fb); --nl-border: var(--abl-border, #e7e8ee); --nl-like: #e11d48; --nl-radius: var(--abl-radius, 14px); --nl-radius-sm: var(--abl-radius-sm, 10px); --nl-pill: 999px; --nl-shadow-sm: var(--abl-shadow-sm, 0 1px 2px rgba(16,24,40,.05)); --nl-shadow: var(--abl-shadow, 0 4px 20px rgba(16,24,40,.08)); --nl-font: var(--abl-font, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); } .nl-app { max-width: 680px; margin: 0 auto; padding: 8px 16px 64px; color: var(--nl-ink); font-family: var(--nl-font); line-height: 1.6; } .nl-modal { font-family: var(--nl-font); color: var(--nl-ink); } .nl-modal *, .nl-modal *::before, .nl-modal *::after { box-sizing: border-box; } .nl-app.nl-narrow { max-width: 680px; } .nl-app *, .nl-app *::before, .nl-app *::after { box-sizing: border-box; } .nl-app h1, .nl-app h2, .nl-app h3, .nl-app h4 { letter-spacing: -.02em; margin: 0; color: var(--nl-ink); } /* Flash messages */ .nl-flash { max-width: 680px; margin: 12px auto; padding: 12px 16px; border-radius: var(--nl-radius-sm); font-size: 14px; font-weight: 500; } .nl-flash--error { background: #fdecec; color: #b3261e; } .nl-flash--notice { background: rgba(22,163,74,.1); color: #15803d; } /* ---------------------------------------------------------------- Toolbar */ .nl-header { margin-bottom: 20px; } .nl-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--nl-border); } .nl-feed-tabs { display: flex; gap: 4px; margin-right: auto; } .nl-search { position: relative; } .nl-search input { border: 1.5px solid var(--nl-border); border-radius: var(--nl-pill); padding: 9px 16px 9px 38px; font-size: 14px; width: 220px; max-width: 100%; background: var(--nl-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 14px center; color: var(--nl-ink); transition: border-color .15s, background-color .15s; } .nl-search input:focus { outline: none; border-color: var(--nl-accent); background-color: #fff; } /* Buttons */ .nl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1.5px solid transparent; border-radius: var(--nl-pill); padding: 10px 20px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: transform .15s, background .15s, box-shadow .15s, border-color .15s; white-space: nowrap; } .nl-btn--primary { background: var(--nl-primary); color: #fff; } .nl-btn--primary:hover { background: var(--nl-primary-2); color: #fff; transform: translateY(-1px); box-shadow: var(--nl-shadow); } .nl-btn--ghost { background: #fff; border-color: var(--nl-border); color: var(--nl-primary); } .nl-btn--ghost:hover { background: var(--nl-soft); } .nl-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; } .nl-btn svg { width: 16px; height: 16px; } /* Tabs */ .nl-tab { background: none; border: none; padding: 8px 14px; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--nl-muted); cursor: pointer; border-radius: var(--nl-pill); transition: color .15s, background .15s; } .nl-tab:hover { color: var(--nl-ink); } .nl-tab.is-active { color: var(--nl-primary); background: var(--nl-alt); } /* Topic chips — horizontal scroll with faded edges, no visible scrollbar */ .nl-topics { display: flex; gap: 8px; overflow-x: auto; padding: 14px 2px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%); } .nl-topics::-webkit-scrollbar { display: none; } .nl-chip { background: #fff; border: 1.5px solid var(--nl-border); border-radius: var(--nl-pill); padding: 7px 15px; font-size: 13px; font-weight: 600; color: var(--nl-muted); cursor: pointer; white-space: nowrap; text-decoration: none; transition: all .15s; } .nl-chip:hover { border-color: var(--nl-accent); color: var(--nl-primary); } .nl-chip.is-active { background: var(--nl-primary); border-color: var(--nl-primary); color: #fff; } .nl-chip--sm { padding: 4px 11px; font-size: 12px; } /* ---------------------------------------------------------------- Theme unwrap The AscendBioLabs page template wraps content in .abl-entry.abl-narrow (max-width 820px) and underlines all links. Break out to full container width on Newsline pages and neutralize the inherited entry typography. */ .newsline-page .abl-entry.abl-narrow, .newsline-page .abl-entry { max-width: none; margin-inline: 0; font-size: inherit; color: inherit; } .newsline-page .nl-app a, .newsline-page .nl-app a:hover { text-decoration: none; } .newsline-page .nl-app p { line-height: 1.6; } /* Only strip the theme's forced image margin — NOT radius (that broke circles). */ .newsline-page .nl-app img, .newsline-page .nl-app video { margin: 0; } /* Radius per component; two classes always beat the theme's `.abl-entry img`. */ .newsline-page .nl-avatar, .newsline-page .nl-profile__avatar, .newsline-page .nl-author__avatar, .newsline-page .nl-author-card__avatar, .newsline-page .nl-comment img, .newsline-page .nl-comment__avatar { border-radius: 50%; } .newsline-page .nl-gallery__item { border-radius: var(--nl-radius); } .newsline-page .nl-card__media img, .newsline-page .nl-card__media video { border-radius: 0; } /* ---------------------------------------------------------------- Feed layout (wide, 2-column) */ .nl-app.nl-feed-layout { max-width: 1180px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 28px; row-gap: 20px; align-items: start; padding-top: 16px; } .nl-app.nl-feed-layout > .nl-header { grid-column: 1 / -1; margin-bottom: 0; } .nl-app.nl-feed-layout .nl-main .nl-feed { margin-top: 0; } .nl-main { min-width: 0; } .nl-sidebar { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 16px; } .nl-side-card { background: var(--nl-soft); border: 1px solid var(--nl-border); border-radius: var(--nl-radius); padding: 16px; } .nl-side-card--brand { background: linear-gradient(160deg, var(--nl-alt) 0%, #fff 100%); } .nl-side-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--nl-accent); } .nl-side-title { font-size: 19px; margin: 10px 0 8px; } .nl-side-text { font-size: 13.5px; color: var(--nl-muted); margin: 0 0 18px; line-height: 1.6; } .nl-side-cta { width: 100%; } .nl-side-stats { display: flex; gap: 22px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--nl-border); font-size: 13px; color: var(--nl-muted); } .nl-side-stats strong { display: block; font-size: 20px; color: var(--nl-ink); line-height: 1.1; } .nl-side-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .nl-side-heading { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--nl-muted); margin: 0; } .nl-side-clear { background: none; border: none; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--nl-accent); cursor: pointer; padding: 0; } .nl-side-clear:hover { text-decoration: underline; } .nl-side-empty { font-size: 13.5px; color: var(--nl-muted); margin: 0; } /* Top authors list */ .nl-authors { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .nl-author { display: flex; align-items: center; gap: 6px; padding: 2px 4px 2px 0; border-radius: var(--nl-radius-sm); transition: background .15s; } .nl-author:hover { background: #fff; } .nl-author__main { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; background: none; border: none; padding: 5px 4px 5px 0; border-radius: var(--nl-radius-sm); font-family: inherit; cursor: pointer; text-align: left; } .nl-author__main.is-active { background: var(--nl-primary); } .nl-author__avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--nl-alt); } .nl-author__meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; flex: 1; } .nl-author__name { font-size: 14px; font-weight: 700; color: var(--nl-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nl-author__sub { font-size: 12px; color: var(--nl-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nl-author__main.is-active .nl-author__name { color: #fff; } .nl-author__main.is-active .nl-author__sub { color: rgba(255,255,255,.78); } .nl-follow--sm { flex: 0 0 auto; padding: 5px 12px; font-size: 12px; } .nl-authors__note { font-size: 11px; color: var(--nl-muted); margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--nl-border); text-align: center; } /* Initials avatars (fallback when no photo uploaded) */ .nl-avatar--init { display: inline-flex; align-items: center; justify-content: center; background: var(--nl-ini-bg, #4f46e5); color: #fff; font-weight: 700; text-transform: uppercase; line-height: 1; overflow: hidden; } /* Compound selectors (0,0,2,0) so the initials color beats each avatar's base `background: var(--nl-alt)` rule regardless of source order. */ .nl-avatar.nl-avatar--init, .nl-author__avatar.nl-avatar--init, .nl-profile__avatar.nl-avatar--init, .nl-comment__avatar.nl-avatar--init, .nl-author-card__avatar.nl-avatar--init { background: var(--nl-ini-bg, #4f46e5); color: #fff; } .nl-avatar.nl-avatar--init { font-size: 15px; } .nl-author__avatar.nl-avatar--init { font-size: 14px; } .nl-profile__avatar.nl-avatar--init { font-size: 34px; } .nl-comment__avatar.nl-avatar--init { font-size: 14px; } @media (max-width: 980px) { .nl-app.nl-feed-layout { grid-template-columns: 1fr; max-width: 680px; gap: 0; } .nl-sidebar { display: none; } } /* ---------------------------------------------------------------- Feed / cards */ .nl-feed { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; } .nl-card { background: var(--nl-bg); border: 1px solid var(--nl-border); border-radius: var(--nl-radius); box-shadow: var(--nl-shadow-sm); padding: 20px; transition: box-shadow .18s, transform .18s, border-color .18s; } .nl-card:hover { box-shadow: var(--nl-shadow); transform: translateY(-2px); border-color: #dcdde6; } .nl-card__head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; } .nl-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--nl-alt); } .nl-card__meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; } .nl-card__author { font-weight: 700; font-size: 14.5px; color: var(--nl-ink); text-decoration: none; } .nl-card__author:hover { color: var(--nl-accent); } .nl-card__date { font-size: 12.5px; color: var(--nl-muted); } .nl-card__topic { color: var(--nl-accent); font-weight: 700; text-decoration: none; } .nl-card__topic:hover { color: var(--nl-accent); text-decoration: underline; } .nl-follow { margin-left: auto; background: none; border: 1.5px solid var(--nl-border); color: var(--nl-primary); border-radius: var(--nl-pill); padding: 6px 16px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; } .nl-follow:hover { border-color: var(--nl-accent); } .nl-follow.is-following { background: var(--nl-primary); border-color: var(--nl-primary); color: #fff; } .nl-icon-btn { background: none; border: none; font-size: 22px; color: var(--nl-muted); cursor: pointer; line-height: .6; padding: 4px 6px; border-radius: 8px; } .nl-icon-btn:hover { background: var(--nl-soft); color: var(--nl-ink); } .nl-card__head .nl-follow + .nl-icon-btn { margin-left: 6px; } .nl-card__head .nl-icon-btn:only-of-type { margin-left: auto; } .nl-card__link { text-decoration: none; color: inherit; display: block; } .nl-card__title { font-size: 19px; font-weight: 700; margin: 0 0 7px; line-height: 1.35; } .nl-card__link:hover .nl-card__title { color: var(--nl-accent); } .nl-card__excerpt { font-size: 14.5px; color: #475066; margin: 0 0 14px; } /* Media */ .nl-card__media { display: grid; gap: 4px; border-radius: var(--nl-radius-sm); overflow: hidden; margin-bottom: 14px; } .nl-card__media:empty { display: none; } .nl-card__media.nl-media--2, .nl-card__media.nl-media--3, .nl-card__media.nl-media--4 { grid-template-columns: 1fr 1fr; } .nl-card__media.nl-media--1 img, .nl-card__media.nl-media--1 video { max-height: 420px; } .nl-card__media img, .nl-card__media video { width: 100%; height: 100%; max-height: 300px; object-fit: cover; display: block; background: var(--nl-alt); } .nl-card__media.nl-media--3 :first-child { grid-row: span 2; height: 100%; } .nl-card__topics { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; } .nl-card__topics:empty { display: none; } /* Video in cards — Twitter-style play/pause overlay */ .nl-card__media .nl-video { position: relative; width: 100%; height: 100%; } .nl-video video { width: 100%; height: 100%; max-height: 300px; object-fit: cover; display: block; background: #000; } .nl-media--1 .nl-video video { max-height: 420px; } .nl-video__btn { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; border: none; background: rgba(15,23,42,.6); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, transform .15s; padding: 0; } .nl-video__btn:hover { background: rgba(15,23,42,.82); transform: scale(1.06); } .nl-video__btn svg { width: 24px; height: 24px; margin-left: 2px; } .nl-video.is-playing .nl-video__btn { display: none; } /* Action bar — the hover highlight is a consistent circle behind the icon (never a pill that changes shape with the adjacent count). */ .nl-card__actions, .nl-single__actions { display: flex; align-items: center; gap: 8px; padding-top: 6px; margin-top: 4px; } .nl-action { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; color: var(--nl-muted); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; padding: 0 6px 0 0; transition: color .15s; } .nl-ico { width: 19px; height: 19px; box-sizing: content-box; padding: 8px; border-radius: 50%; flex: 0 0 auto; transition: background .15s; display: block; } .nl-like:hover { color: var(--nl-like); } .nl-like:hover .nl-ico { background: rgba(225,29,72,.1); } .nl-like.is-active { color: var(--nl-like); } .nl-like.is-active .nl-ico { fill: currentColor; stroke: currentColor; animation: nl-pop .3s ease; } .nl-comment:hover { color: var(--nl-ink); } .nl-comment:hover .nl-ico { background: var(--nl-soft); } .nl-save:hover { color: var(--nl-accent); } .nl-save:hover .nl-ico { background: rgba(99,102,241,.1); } .nl-save.is-active { color: var(--nl-accent); } .nl-save.is-active .nl-ico { fill: currentColor; stroke: currentColor; } .nl-report:hover { color: var(--nl-like); } .nl-report:hover .nl-ico { background: rgba(225,29,72,.1); } .nl-save { margin-left: auto; } .nl-single__actions .nl-save { margin-left: auto; } @keyframes nl-pop { 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} } /* Loader / empty */ .nl-feed__empty { text-align: center; color: var(--nl-muted); padding: 56px 24px; font-size: 15px; background: var(--nl-soft); border: 1px dashed var(--nl-border); border-radius: var(--nl-radius); margin-top: 18px; } .nl-loader { text-align: center; padding: 24px; color: var(--nl-muted); } .nl-loader::after { content: ""; display: inline-block; width: 26px; height: 26px; border: 3px solid var(--nl-border); border-top-color: var(--nl-accent); border-radius: 50%; animation: nl-spin .7s linear infinite; } @keyframes nl-spin { to { transform: rotate(360deg); } } .nl-load-more { display: block; margin: 22px auto 0; } /* ---------------------------------------------------------------- Forms */ .nl-form { display: flex; flex-direction: column; gap: 18px; } .nl-field { display: flex; flex-direction: column; gap: 7px; } .nl-field__label { font-size: 13px; font-weight: 700; color: var(--nl-ink); } .nl-form input[type=text], .nl-form input[type=email], .nl-form input[type=url], .nl-form input[type=password], .nl-form textarea, .nl-auth input { width: 100%; border: 1.5px solid var(--nl-border); border-radius: var(--nl-radius-sm); padding: 12px 14px; font-size: 15px; font-family: inherit; background: var(--nl-soft); color: var(--nl-ink); transition: border-color .15s, background .15s; } .nl-form input:focus, .nl-form textarea:focus, .nl-auth input:focus { outline: none; border-color: var(--nl-accent); background: #fff; } .nl-form textarea { resize: vertical; min-height: 120px; } .nl-page-title { font-size: 26px; font-weight: 800; margin: 8px 0 6px; } .nl-page-sub { color: var(--nl-muted); margin: 0 0 22px; font-size: 15px; } .nl-section-title { font-size: 18px; font-weight: 700; margin: 28px 0 14px; } .nl-form__footer { display: flex; align-items: center; gap: 14px; } .nl-form__status { font-size: 14px; color: var(--nl-muted); } /* Topic picker */ .nl-topic-picker { display: flex; flex-wrap: wrap; gap: 9px; } .nl-topic-option { position: relative; } .nl-topic-option input { position: absolute; opacity: 0; pointer-events: none; } .nl-topic-option span { display: inline-flex; align-items: center; border: 1.5px solid var(--nl-border); border-radius: var(--nl-pill); padding: 8px 15px; font-size: 13px; font-weight: 600; color: var(--nl-muted); cursor: pointer; transition: all .15s; background: #fff; } .nl-topic-option input:checked + span { background: var(--nl-primary); border-color: var(--nl-primary); color: #fff; } .nl-topic-option span:hover { border-color: var(--nl-accent); } /* Dropzone / previews */ .nl-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 2px dashed var(--nl-border); border-radius: var(--nl-radius); padding: 34px; text-align: center; color: var(--nl-muted); cursor: pointer; background: var(--nl-soft); transition: all .15s; font-size: 14px; } .nl-dropzone:hover { border-color: var(--nl-accent); background: #fff; color: var(--nl-primary); } .nl-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 12px; } .nl-previews:empty { display: none; } .nl-preview { position: relative; border-radius: var(--nl-radius-sm); overflow: hidden; aspect-ratio: 1; background: var(--nl-alt); } .nl-preview img, .nl-preview video { width: 100%; height: 100%; object-fit: cover; } .nl-preview__remove { position: absolute; top: 5px; right: 5px; background: rgba(15,23,42,.7); color: #fff; border: none; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; } .nl-preview__remove:hover { background: var(--nl-like); } /* ---------------------------------------------------------------- Auth */ .nl-auth { max-width: 440px; margin: 32px auto; background: var(--nl-bg); border: 1px solid var(--nl-border); border-radius: var(--nl-radius); padding: 32px; box-shadow: var(--nl-shadow); } .nl-auth__intro { text-align: center; color: var(--nl-muted); margin: 0 0 22px; font-size: 15px; } .nl-auth__tabs { display: flex; gap: 8px; margin-bottom: 22px; background: var(--nl-soft); padding: 5px; border-radius: var(--nl-radius-sm); } .nl-auth__tabs .nl-tab { flex: 1; text-align: center; padding: 10px; border-radius: 8px; } .nl-auth__tabs .nl-tab.is-active { background: #fff; color: var(--nl-primary); box-shadow: var(--nl-shadow-sm); } .nl-auth__panel { display: none; flex-direction: column; gap: 16px; } .nl-auth__panel.is-active { display: flex; } .nl-auth label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 700; } .nl-auth label small { font-weight: 400; color: var(--nl-muted); } .nl-check { flex-direction: row !important; align-items: center; gap: 9px !important; font-weight: 500 !important; } .nl-check input { width: auto; accent-color: var(--nl-accent); } .nl-auth .nl-btn { margin-top: 4px; } /* ---------------------------------------------------------------- Profile */ .nl-profile { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 8px; padding: 24px; background: var(--nl-soft); border: 1px solid var(--nl-border); border-radius: var(--nl-radius); } .nl-profile__avatar { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; background: var(--nl-alt); flex: 0 0 auto; } .nl-profile__name { font-size: 23px; margin: 0 0 5px; } .nl-profile__field { color: var(--nl-accent); font-weight: 700; margin: 0 0 8px; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; } .nl-profile__bio { color: #475066; margin: 0 0 14px; font-size: 14.5px; } .nl-profile__stats { display: flex; gap: 24px; margin-bottom: 16px; font-size: 14px; color: var(--nl-muted); } .nl-profile__stats strong { color: var(--nl-ink); font-size: 16px; } .nl-accordion { border: 1px solid var(--nl-border); border-radius: var(--nl-radius); padding: 16px 20px; margin: 16px 0; } .nl-accordion summary { cursor: pointer; font-weight: 700; color: var(--nl-ink); } .nl-accordion .nl-form { margin-top: 18px; } /* ---------------------------------------------------------------- Single post (full-width, 2-column) */ .nl-single-wrap { padding: 32px 16px 64px; } .nl-app.nl-single-layout { max-width: 1120px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; padding-top: 0; } .nl-single-main { min-width: 0; } .nl-single__topics { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; } .nl-single__title { font-size: 32px; line-height: 1.2; font-weight: 800; margin: 0 0 22px; } .nl-single__byline { display: flex; align-items: center; gap: 11px; margin-top: 4px; margin-bottom: 28px; } .nl-single__name { font-weight: 700; font-size: 14.5px; } .nl-single__date { font-size: 13px; color: var(--nl-muted); } .nl-single__body { font-size: 16.5px; line-height: 1.75; margin: 0 0 20px; color: #2b3444; } .nl-single__body p { margin: 0 0 1em; } /* Media grid on the detail page */ .nl-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 20px 0; } .nl-gallery--single { grid-template-columns: 1fr; } .nl-gallery__item { width: 100%; border-radius: var(--nl-radius); max-height: 360px; object-fit: cover; background: var(--nl-alt); } .nl-gallery--single .nl-gallery__item { max-height: 560px; } .nl-single__actions { border-top: 1px solid var(--nl-border); border-bottom: 1px solid var(--nl-border); padding: 10px 0; margin: 20px 0; } .nl-report { margin-left: 0 !important; } /* Author card in the detail sidebar */ .nl-single-side { position: sticky; top: 92px; } .nl-author-card { text-align: center; } .nl-author-card__avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 0 auto 12px; background: var(--nl-alt); } .nl-author-card__avatar.nl-avatar--init { font-size: 26px; } .nl-author-card__name { font-size: 17px; font-weight: 700; } .nl-author-card__field { color: var(--nl-accent); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; } .nl-author-card__bio { font-size: 13px; color: var(--nl-muted); margin: 12px 0 0; line-height: 1.55; } .nl-author-card__stat { font-size: 13px; color: var(--nl-muted); margin: 14px 0; } .nl-author-card__stat strong { color: var(--nl-ink); font-size: 15px; } .nl-author-card__follow { width: 100%; } .nl-author-card__link { display: block; margin-top: 12px; font-size: 13px; color: var(--nl-accent); font-weight: 700; } @media (max-width: 980px) { .nl-app.nl-single-layout { grid-template-columns: 1fr; max-width: 680px; } .nl-single-side { display: none; } .nl-gallery { grid-template-columns: 1fr; } } /* Comments */ .nl-comments__title { font-size: 18px; margin: 0 0 16px; } .nl-comment-form { display: flex; gap: 12px; margin-bottom: 22px; align-items: flex-start; } .nl-comment-form textarea { flex: 1; border: 1.5px solid var(--nl-border); border-radius: var(--nl-radius-sm); padding: 12px; font-family: inherit; font-size: 14.5px; resize: vertical; background: var(--nl-soft); min-height: 46px; } .nl-comment-form textarea:focus { outline: none; border-color: var(--nl-accent); background: #fff; } .nl-comments__gate { color: var(--nl-muted); padding: 16px; background: var(--nl-soft); border-radius: var(--nl-radius-sm); text-align: center; } .nl-comments__gate a { color: var(--nl-accent); font-weight: 600; } .nl-comment { display: flex; gap: 12px; padding: 16px 0; border-top: 1px solid var(--nl-border); } .nl-comment img, .nl-comment__avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--nl-alt); } .nl-comment__body { flex: 1; min-width: 0; } .nl-comment__author { font-weight: 700; font-size: 14px; } .nl-comment__date { font-size: 12px; color: var(--nl-muted); margin-left: 8px; font-weight: 500; } .nl-comment__text { font-size: 14.5px; margin-top: 3px; color: #2b3444; } .nl-comment--reply { margin-left: 50px; } .nl-comments__empty { color: var(--nl-muted); font-size: 14px; padding: 8px 0; } /* Comment actions: like + reply */ .nl-comment__actions { display: flex; align-items: center; gap: 14px; margin-top: 8px; } .nl-clike { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 0; cursor: pointer; color: var(--nl-muted); font-family: inherit; font-size: 12.5px; font-weight: 700; transition: color .15s; } .nl-clike .nl-ico { width: 15px; height: 15px; } .nl-clike:hover { color: var(--nl-like); } .nl-clike.is-active { color: var(--nl-like); } .nl-clike.is-active .nl-ico { fill: currentColor; stroke: currentColor; } .nl-creply { background: none; border: none; padding: 0; cursor: pointer; color: var(--nl-muted); font-family: inherit; font-size: 12.5px; font-weight: 700; transition: color .15s; } .nl-creply:hover { color: var(--nl-accent); } .nl-reply-slot:empty { display: none; } .nl-reply-form { margin-top: 10px; } .nl-reply-form textarea { width: 100%; border: 1.5px solid var(--nl-border); border-radius: var(--nl-radius-sm); padding: 10px 12px; font-family: inherit; font-size: 14px; resize: vertical; background: var(--nl-soft); } .nl-reply-form textarea:focus { outline: none; border-color: var(--nl-accent); background: #fff; } .nl-reply-form__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; } .nl-reply-form .nl-btn { padding: 7px 16px; font-size: 13px; } /* Notifications */ .nl-notif__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .nl-notif-list { display: flex; flex-direction: column; gap: 4px; } .nl-notif { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border: 1px solid var(--nl-border); text-decoration: none; color: var(--nl-ink); border-radius: var(--nl-radius-sm); transition: background .15s; } .nl-notif:hover { background: var(--nl-soft); } .nl-notif.is-unread { background: var(--nl-alt); border-color: transparent; } .nl-notif.is-unread::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--nl-accent); flex: 0 0 auto; } .nl-notif__text { font-size: 14.5px; font-weight: 500; } .nl-notif__date { font-size: 12.5px; color: var(--nl-muted); margin-left: auto; white-space: nowrap; } /* Modals (report + create) */ .nl-modal { position: fixed; inset: 0; background: rgba(15,23,42,.55); display: flex; align-items: flex-start; justify-content: center; z-index: 99999; padding: 40px 20px; backdrop-filter: blur(2px); overflow-y: auto; } .nl-modal[hidden] { display: none; } .nl-modal__box { background: #fff; border-radius: var(--nl-radius); padding: 26px; max-width: 400px; width: 100%; box-shadow: var(--abl-shadow-lg, 0 24px 60px rgba(16,24,40,.18)); margin: auto; } .nl-create-box { max-width: 580px; max-height: none; } .nl-create-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .nl-create-head h3 { font-size: 20px; margin: 0; } .nl-create-head .nl-icon-btn { font-size: 26px; } .nl-modal__box h3 { margin: 0 0 18px; font-size: 18px; } .nl-modal__box select, .nl-modal__box textarea { width: 100%; margin-bottom: 14px; border: 1.5px solid var(--nl-border); border-radius: var(--nl-radius-sm); padding: 10px 12px; font-family: inherit; font-size: 14.5px; background: var(--nl-soft); } .nl-modal__actions { display: flex; justify-content: flex-end; gap: 10px; } /* ---------------------------------------------------------------- Account dashboard (theme cards) */ .nl-acct-community { margin-top: 32px; } .nl-acct-community__title { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--abl-primary, #202c44); margin: 0 0 16px; } /* Fallback card styling when the theme has no .abl-acct-card system. */ .nl-acct-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .nl-acct-card { display: block; padding: 22px; border: 1px solid var(--nl-border, #e7e8ee); border-radius: 14px; background: #fff; text-decoration: none; color: inherit; transition: box-shadow .18s, transform .18s; } .nl-acct-card:hover { box-shadow: 0 4px 20px rgba(16,24,40,.08); transform: translateY(-2px); } .nl-acct-card__title { font-size: 17px; font-weight: 700; margin: 0 0 6px; color: var(--nl-ink, #0f172a); } .nl-acct-card__desc { font-size: 14px; color: var(--nl-muted, #6b7280); margin: 0; } /* ---------------------------------------------------------------- Responsive */ @media (max-width: 640px) { .nl-toolbar { gap: 10px; } .nl-feed-tabs { order: 2; margin-right: 0; } .nl-search { order: 1; flex: 1 1 100%; } .nl-search input { width: 100%; } .nl-toolbar .nl-btn--primary { order: 3; margin-left: auto; } .nl-page-title { font-size: 22px; } .nl-profile { flex-direction: column; align-items: center; text-align: center; } .nl-profile__stats { justify-content: center; } .nl-comment--reply { margin-left: 24px; } }