/* ========================================================================== JStore Node Style — Task 4 Per-content-type layout variants driven by CSS custom properties set by jstore.node-style.js. No hard-coded colors — all come from adg-tokens (--adg-*, --type-*, --f-*). ========================================================================== */ /* ── Runtime CSS custom properties (defaults; overridden by JS) ────── */ :root { --ns-title-size: clamp(26px, 3.5vw, 44px); --ns-body-size: 17px; --ns-body-font: var(--f-body, Georgia, serif); --ns-max-width: 820px; --ns-sidebar-width: 280px; --ns-accent: var(--adg-gold, #C4920A); } /* ── Node page wrapper ────────────────────────────────────────────── */ [data-content-type] { padding-top: 32px; padding-bottom: 64px; transition: max-width 280ms ease; } /* ── Title ────────────────────────────────────────────────────────── */ [data-content-type] .adg-node__title, [data-content-type] h1.page-title { font-size: var(--ns-title-size); color: var(--adg-text); } /* ── Body text ────────────────────────────────────────────────────── */ [data-content-type] .adg-node__body, [data-content-type] .field--name-body { font-family: var(--ns-body-font); font-size: var(--ns-body-size); line-height: 1.8; color: var(--adg-text2); } /* ── Accent bar at top of node ────────────────────────────────────── */ [data-content-type]::before { content: ''; display: block; height: 3px; background: var(--ns-accent); border-radius: 2px; margin-bottom: 28px; transform-origin: left; animation: ns-accent-in 500ms cubic-bezier(0.16,1,0.3,1) both; } @keyframes ns-accent-in { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ═══════════════════════════════════════════════════════════════════ LAYOUT VARIANTS Applied as .ns-variant--* on [data-content-type] by JStore. ═══════════════════════════════════════════════════════════════════ */ /* ── Full width ───────────────────────────────────────────────────── */ .ns-variant--full_width { max-width: var(--ns-max-width); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } .ns-layout--full-width .adg-node__body { max-width: var(--ns-max-width); } /* ── With sidebar ─────────────────────────────────────────────────── */ .ns-variant--with_sidebar { display: grid; grid-template-columns: 1fr var(--ns-sidebar-width); gap: 48px; max-width: calc(var(--ns-max-width) + var(--ns-sidebar-width) + 48px); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; align-items: start; } .ns-variant--with_sidebar .adg-node__sidebar { position: sticky; top: 80px; padding: 20px; background: var(--adg-surface); border: 1px solid var(--adg-bdr); border-radius: var(--r-lg); } @media (max-width: 1023px) { .ns-variant--with_sidebar { grid-template-columns: 1fr; gap: 28px; } .ns-variant--with_sidebar .adg-node__sidebar { position: static; order: -1; /* sidebar above content on tablet/mobile */ } } /* ── Two column ───────────────────────────────────────────────────── */ .ns-variant--two_column { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: var(--ns-max-width); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } .ns-variant--two_column .adg-node__title, .ns-variant--two_column [data-content-type] > *:first-child { grid-column: 1 / -1; } @media (max-width: 767px) { .ns-variant--two_column { grid-template-columns: 1fr; gap: 24px; } } /* ── Profile ──────────────────────────────────────────────────────── */ .ns-variant--profile { max-width: var(--ns-max-width); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } /* ═══════════════════════════════════════════════════════════════════ CONTENT-TYPE BODY CLASSES (applied to by JStore) ═══════════════════════════════════════════════════════════════════ */ /* Article — serif body, larger headings ─────────────────────────── */ body.ns-type--article .adg-node__body { font-family: var(--f-body, 'Source Serif 4', Georgia, serif); font-size: 18px; font-weight: 300; } body.ns-type--article .adg-node__body h2 { font-size: 26px; font-family: var(--f-serif); } body.ns-type--article .adg-node__reading-time { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 10px; color: var(--adg-muted); margin-bottom: 20px; } body.ns-type--article .adg-node__terms--pill .adg-node__term { border-radius: var(--r-pill); background: var(--adg-gold-dim); color: var(--adg-gold); border: 1px solid rgba(196,146,10,.2); } /* Publication — abstract box ─────────────────────────────────────── */ body.ns-type--publication .adg-node__abstract { background: var(--adg-surface); border-left: 3px solid var(--type-publication, #4E6A9A); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 16px 20px; margin-bottom: 24px; font-style: italic; font-size: 15px; color: var(--adg-text2); } body.ns-type--publication .adg-node__authors-list { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--f-mono); font-size: 10px; color: var(--adg-muted); } body.ns-type--publication .adg-node__doi-badge { font-family: var(--f-mono); font-size: 9px; background: var(--adg-surface); border: 1px solid var(--adg-bdr); border-radius: var(--r-sm); padding: 4px 10px; color: var(--adg-muted); } /* Dataset — full-width, monospace title, chip ────────────────────── */ body.ns-type--dataset .adg-node__title { font-family: var(--f-ui); font-weight: 600; font-style: normal; } body.ns-type--dataset .adg-node__body { font-family: var(--f-ui); font-size: 15px; } body.ns-type--dataset .adg-node__chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 10px; color: var(--adg-gold); background: var(--adg-gold-dim); border: 1px solid rgba(196,146,10,.2); border-radius: var(--r-pill); padding: 6px 14px; margin-bottom: 20px; } body.ns-type--dataset .adg-node__format-tags { display: flex; flex-wrap: wrap; gap: 6px; } /* Blog — author bio box + highlighted comments ───────────────────── */ body.ns-type--blog .adg-node__author-bio-box { background: var(--adg-surface2); border: 1px solid var(--adg-bdr); border-radius: var(--r-lg); padding: 20px; margin-top: 40px; display: flex; gap: 16px; align-items: flex-start; } body.ns-type--blog .adg-node__social-share { display: flex; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--adg-bdr); } body.ns-type--blog .adg-node__comments--highlighted { background: var(--adg-surface); border-radius: var(--r-lg); padding: 24px; margin-top: 40px; border-left: 3px solid var(--type-blog, #CC8010); } /* Researcher — circular photo ────────────────────────────────────── */ body.ns-type--researcher .adg-node__photo--circle img { border-radius: 50%; width: 96px; height: 96px; object-fit: cover; border: 3px solid var(--adg-bdr); } body.ns-type--researcher .adg-researcher__institution { font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--adg-muted); margin-bottom: 12px; } body.ns-type--researcher .adg-researcher__focus { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; } body.ns-type--researcher .adg-node__pub-list { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--adg-bdr); } /* Page — centered minimal ────────────────────────────────────────── */ body.ns-type--page .adg-node__body--centered { max-width: 680px; margin: 0 auto; text-align: left; } body.ns-type--page [data-content-type] { padding-top: 48px; } /* ── Layout switcher bar (logged-in users, injected by JStore) ─── */ .adg-node-layout-switcher { display: flex; gap: 4px; margin-bottom: 24px; } .adg-node-layout-btn { font-family: var(--f-mono); font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 5px 12px; border: 1px solid var(--adg-bdr); border-radius: var(--r-pill); color: var(--adg-muted); background: none; cursor: pointer; transition: all 180ms ease; } .adg-node-layout-btn:hover { color: var(--adg-text); border-color: var(--adg-bdr-h); } .adg-node-layout-btn.is-active { color: var(--adg-page-bg); background: var(--adg-gold); border-color: var(--adg-gold); } /* ── Field hero image ─────────────────────────────────────────────── */ .adg-node__image--hero { margin-bottom: 32px; } .adg-node__image--hero img { width: 100%; max-height: 480px; object-fit: cover; border-radius: var(--r-lg); display: block; } /* ── Responsive ───────────────────────────────────────────────────── */ @media (max-width: 599px) { [data-content-type] { padding-top: 20px; padding-left: 16px; padding-right: 16px; } .ns-variant--full_width, .ns-variant--profile { padding-left: 0; padding-right: 0; } .adg-node-layout-switcher { flex-wrap: wrap; } }