#bnv-page[data-engine="ed-page"] /* ════════════════════════════════════════════════════════════════════ BINNOVY · SHELL SH-3 · EDITORIAL · namespace .ed- A dated editorial feed: a lead featured story + a chronological stream of entries, #bnv-page[data-engine="ed-page"] with lightweight type filtering. Serif-led, #bnv-page[data-engine="ed-page"] text-forward — distinct from SH-2's card grid. Aligned to the real design system. Backs: Press/Newsroom (C3), #bnv-page[data-engine="ed-page"] Resources (I8), #bnv-page[data-engine="ed-page"] Release Notes (I9). ════════════════════════════════════════════════════════════════════ */ .ed-page, #bnv-page[data-engine="ed-page"]{ --ed-accent:#ff5f87; --ed-tint:#fde7ed; } #bnv-page[data-engine="ed-page"][data-edaccent="indigo"]{ --ed-accent:#6366f1; --ed-tint:#e8e9fd; } #bnv-page[data-engine="ed-page"] .ed-wrap{ width:var(--cw); margin-inline:auto; } #bnv-page[data-engine="ed-page"] .ed-narrow{ width:min(820px, calc(100vw - var(--gutter)*2)); margin-inline:auto; } #bnv-page[data-engine="ed-page"] .ed-hero{ position:relative; padding:80px 0 30px; background:var(--paper-0); overflow:hidden; } #bnv-page[data-engine="ed-page"] .ed-hero::before{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 54% 64% at 84% -14%, color-mix(in srgb,var(--ed-accent) 8%,transparent), transparent 60%); } #bnv-page[data-engine="ed-page"] .ed-hero .ed-wrap{ position:relative; } #bnv-page[data-engine="ed-page"] .ed-crumb{ display:flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-5); margin-bottom:24px; } #bnv-page[data-engine="ed-page"] .ed-crumb a{ color:var(--ink-5); text-decoration:none; transition:color .2s var(--ease); } #bnv-page[data-engine="ed-page"] .ed-crumb a:hover{ color:var(--ed-accent); } #bnv-page[data-engine="ed-page"] .ed-crumb .sep{ opacity:.4; } #bnv-page[data-engine="ed-page"] .ed-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-family:var(--f-mono); font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ed-accent); margin-bottom:18px; } #bnv-page[data-engine="ed-page"] .ed-eyebrow::before{ content:''; width:18px; height:1px; background:currentColor; opacity:.6; } #bnv-page[data-engine="ed-page"] .ed-h1{ font-family:var(--f-sans); font-size:clamp(34px,5vw,56px); font-weight:300; letter-spacing:-.03em; line-height:1.04; color:var(--ink-0); max-width:18ch; text-wrap:balance; margin:0; } #bnv-page[data-engine="ed-page"] .ed-h1 em{ font-family:var(--f-serif); font-style:italic; font-weight:400; color:var(--ed-accent); } #bnv-page[data-engine="ed-page"] .ed-lead{ font-size:clamp(16px,1.5vw,19px); line-height:1.62; color:var(--ink-3); max-width:58ch; margin:20px 0 0; letter-spacing:-.006em; } #bnv-page[data-engine="ed-page"] .ed-featured{ padding:34px 0 8px; background:var(--paper-0); } #bnv-page[data-engine="ed-page"] .ed-feat{ display:grid; grid-template-columns:1.1fr .9fr; gap:0; border:1px solid var(--hair); border-radius:22px; overflow:hidden; background:var(--paper-0); transition:box-shadow .3s var(--ease),transform .3s var(--ease); text-decoration:none; } #bnv-page[data-engine="ed-page"] .ed-feat:hover{ box-shadow:0 22px 60px rgba(10,14,26,.09); transform:translateY(-3px); } #bnv-page[data-engine="ed-page"] .ed-feat-vis{ position:relative; min-height:300px; background: radial-gradient(ellipse 90% 80% at 30% 20%, color-mix(in srgb,var(--ed-accent) 22%,transparent), transparent 60%), linear-gradient(150deg, var(--ink-0), color-mix(in srgb,var(--ink-0) 70%, var(--ed-accent))); overflow:hidden; } #bnv-page[data-engine="ed-page"] .ed-feat-vis::after{ content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size:22px 22px; opacity:.5; } #bnv-page[data-engine="ed-page"] .ed-feat-badge{ position:absolute; top:22px; left:22px; z-index:1; font-family:var(--f-mono); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.14); backdrop-filter:blur(6px); padding:6px 12px; border-radius:100px; border:1px solid rgba(255,255,255,.2); } #bnv-page[data-engine="ed-page"] .ed-feat-body{ padding:40px 38px; display:flex; flex-direction:column; gap:14px; justify-content:center; } #bnv-page[data-engine="ed-page"] .ed-feat-meta{ display:flex; align-items:center; gap:12px; font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-5); } #bnv-page[data-engine="ed-page"] .ed-feat-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--ink-6); } #bnv-page[data-engine="ed-page"] .ed-feat-t{ font-family:var(--f-sans); font-size:clamp(24px,2.8vw,32px); font-weight:300; letter-spacing:-.022em; line-height:1.12; color:var(--ink-0); text-wrap:balance; } #bnv-page[data-engine="ed-page"] .ed-feat-t em{ font-family:var(--f-serif); font-style:italic; color:var(--ed-accent); } #bnv-page[data-engine="ed-page"] .ed-feat-ex{ font-size:15px; line-height:1.62; color:var(--ink-4); max-width:48ch; } #bnv-page[data-engine="ed-page"] .ed-feat-go{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--ed-accent); margin-top:4px; } #bnv-page[data-engine="ed-page"] .ed-feat-go .arr{ transition:transform .2s var(--ease); } #bnv-page[data-engine="ed-page"] .ed-feat:hover .ed-feat-go .arr{ transform:translateX(4px); } #bnv-page[data-engine="ed-page"] /* FILTER chips (lightweight, #bnv-page[data-engine="ed-page"] reused pattern) */ .ed-filters{ padding:36px 0 4px; background:var(--paper-0); } #bnv-page[data-engine="ed-page"] .ed-filters-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-bottom:8px; border-bottom:1px solid var(--hair); } #bnv-page[data-engine="ed-page"] .ed-chip{ cursor:pointer; font-family:var(--f-sans); font-size:13px; font-weight:500; color:var(--ink-4); padding:7px 14px; border-radius:100px; border:1px solid transparent; background:transparent; transition:all .2s var(--ease); } #bnv-page[data-engine="ed-page"] .ed-chip:hover{ color:var(--ink-0); } #bnv-page[data-engine="ed-page"] .ed-chip.active{ color:var(--ed-accent); background:color-mix(in srgb,var(--ed-accent) 9%,transparent); } #bnv-page[data-engine="ed-page"] .ed-feed{ padding:18px 0 70px; background:var(--paper-0); } #bnv-page[data-engine="ed-page"] .ed-entry{ display:grid; grid-template-columns:150px 1fr auto; gap:28px; align-items:start; padding:30px 0; border-bottom:1px solid var(--hair); text-decoration:none; transition:opacity .2s var(--ease); } #bnv-page[data-engine="ed-page"] .ed-entry:hover .ed-entry-t{ color:var(--ed-accent); } #bnv-page[data-engine="ed-page"] .ed-entry.hidden{ display:none; } #bnv-page[data-engine="ed-page"] .ed-entry-date{ display:flex; flex-direction:column; gap:6px; } #bnv-page[data-engine="ed-page"] .ed-entry-d{ font-family:var(--f-mono); font-size:12.5px; color:var(--ink-4); letter-spacing:.02em; } #bnv-page[data-engine="ed-page"] .ed-entry-tag{ font-family:var(--f-mono); font-size:9.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ed-accent); width:fit-content; } #bnv-page[data-engine="ed-page"] .ed-entry-main{ display:flex; flex-direction:column; gap:8px; } #bnv-page[data-engine="ed-page"] .ed-entry-t{ font-family:var(--f-sans); font-size:21px; font-weight:500; letter-spacing:-.018em; line-height:1.2; color:var(--ink-0); transition:color .2s var(--ease); text-wrap:balance; } #bnv-page[data-engine="ed-page"] .ed-entry-ex{ font-size:14px; line-height:1.6; color:var(--ink-4); max-width:62ch; } #bnv-page[data-engine="ed-page"] .ed-entry-src{ font-family:var(--f-mono); font-size:11px; color:var(--ink-5); letter-spacing:.04em; } #bnv-page[data-engine="ed-page"] .ed-entry-go{ align-self:center; color:var(--ink-5); transition:color .2s var(--ease),transform .2s var(--ease); } #bnv-page[data-engine="ed-page"] .ed-entry:hover .ed-entry-go{ color:var(--ed-accent); transform:translateX(3px); } #bnv-page[data-engine="ed-page"] .ed-cta{ padding:70px 0; background:var(--ink-0); } #bnv-page[data-engine="ed-page"] .ed-cta-card{ display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center; } #bnv-page[data-engine="ed-page"] .ed-cta-l{ } #bnv-page[data-engine="ed-page"] .ed-cta-tag{ font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:color-mix(in srgb,var(--ed-accent) 80%,white); margin-bottom:12px; } #bnv-page[data-engine="ed-page"] .ed-cta-h{ font-family:var(--f-sans); font-size:clamp(24px,2.6vw,32px); font-weight:300; letter-spacing:-.022em; line-height:1.14; color:#fff; max-width:24ch; } #bnv-page[data-engine="ed-page"] .ed-cta-h em{ font-family:var(--f-serif); font-style:italic; color:color-mix(in srgb,var(--ed-accent) 75%,white); } #bnv-page[data-engine="ed-page"] .ed-cta-p{ font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.6); margin-top:12px; max-width:46ch; } #bnv-page[data-engine="ed-page"] .ed-cta-form{ display:flex; gap:10px; flex-wrap:wrap; } #bnv-page[data-engine="ed-page"] .ed-cta-input{ font-family:var(--f-sans); font-size:14px; color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:11px; padding:13px 16px; min-width:240px; transition:border-color .2s var(--ease); } #bnv-page[data-engine="ed-page"] .ed-cta-input::placeholder{ color:rgba(255,255,255,.4); } #bnv-page[data-engine="ed-page"] .ed-cta-input:focus{ outline:none; border-color:var(--ed-accent); } #bnv-page[data-engine="ed-page"] .ed-cta-btn{ background:#fff; color:var(--ink-0); border:0; border-radius:11px; padding:13px 22px; font-family:var(--f-sans); font-size:14px; font-weight:600; cursor:pointer; transition:transform .2s var(--ease),background .2s var(--ease); white-space:nowrap; } #bnv-page[data-engine="ed-page"] .ed-cta-btn:hover{ transform:translateY(-1px); background:color-mix(in srgb,var(--ed-accent) 30%, white); } #bnv-page[data-engine="ed-page"] .ed-cta-ok{ font-family:var(--f-mono); font-size:12px; color:color-mix(in srgb,var(--ed-accent) 70%,white); display:none; } #bnv-page[data-engine="ed-page"] .ed-cta-ok.show{ display:block; } #bnv-page[data-engine="ed-page"] .ed-rv{ opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease),transform .55s var(--ease); } #bnv-page[data-engine="ed-page"] .ed-rv.in{ opacity:1; transform:none; } @media(prefers-reduced-motion:reduce){ .ed-rv{ opacity:1; transform:none; transition:none; }} @media(max-width:860px){ .ed-feat{ grid-template-columns:1fr; } .ed-feat-vis{ min-height:180px; } .ed-entry{ grid-template-columns:1fr; gap:12px; } .ed-entry-date{ flex-direction:row; align-items:center; gap:12px; } .ed-entry-go{ display:none; } .ed-cta-card{ grid-template-columns:1fr; gap:24px; }} html.rtl #bnv-page[data-engine="ed-page"] .ed-feat-badge{ left:auto; right:22px; } html.rtl #bnv-page[data-engine="ed-page"] .ed-feat-go .arr, html.rtl #bnv-page[data-engine="ed-page"] .ed-entry-go{ transform:scaleX(-1); } html.rtl #bnv-page[data-engine="ed-page"] .ed-feat:hover .ed-feat-go .arr{ transform:scaleX(-1) translateX(4px); } html.rtl #bnv-page[data-engine="ed-page"] .ed-entry:hover .ed-entry-go{ transform:scaleX(-1) translateX(3px); } html.rtl #bnv-page[data-engine="ed-page"] .ed-entry, html.rtl #bnv-page[data-engine="ed-page"] .ed-feat-body, html.rtl #bnv-page[data-engine="ed-page"] .ed-cta-l{ text-align:right; } html.rtl #bnv-page[data-engine="ed-page"] .ed-cta-input{ text-align:right; } #bnv-page[data-engine="ed-page"]