/* nexusatlas.eu v2 additions — layered on top of the Candidate-13 design system. New components only; base.css and theme.css are untouched copies. */ /* ---------- Navigation: active states driven by ---------- */ body[data-active="why"] .nav-links > a[data-nav="why"], body[data-active="platform"] .nav-links a[data-nav="platform"], body[data-active="solutions"] .nav-links a[data-nav="solutions"], body[data-active="evidence"] .nav-links > a[data-nav="evidence"], body[data-active="company"] .nav-links > a[data-nav="company"] { color:var(--accent); background:var(--accent-soft); } /* ---------- Navigation: dropdown groups ---------- */ .nav-caret { margin-left:5px; font-size:9px; opacity:.55; } .nav-group { position:relative; display:flex; } .nav-group > a { display:inline-flex; align-items:center; } .nav-group .dropdown { position:absolute; top:100%; left:50%; transform:translateX(-50%); padding-top:10px; opacity:0; visibility:hidden; transition:opacity .16s ease, visibility .16s ease; z-index:80; } .nav-group:hover .dropdown, .nav-group:focus-within .dropdown { opacity:1; visibility:visible; } .dropdown-panel { min-width:238px; display:grid; gap:2px; padding:8px; background:var(--bg); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); } .dropdown-panel a { display:block; padding:9px 12px; border-radius:8px; color:var(--muted); font-size:14px; font-weight:560; } .dropdown-panel a:hover { color:var(--ink); background:var(--surface); } /* ---------- Hero audience tabs (segmented control) ---------- */ .hero { padding-top:42px; } .hero-tabs-wrap { display:flex; justify-content:center; margin-bottom:34px; } .hero-tabs { display:inline-flex; gap:2px; max-width:100%; overflow-x:auto; padding:4px; border:1px solid var(--line); border-radius:999px; background:var(--surface); scrollbar-width:none; } .hero-tabs::-webkit-scrollbar { display:none; } .hero-tab { border:0; background:transparent; padding:8px 16px; border-radius:999px; color:var(--muted); font:inherit; font-size:13px; font-weight:620; line-height:1.2; white-space:nowrap; cursor:pointer; transition:color .16s, background .16s; } .hero-tab:hover { color:var(--ink); } .hero-tab[aria-selected="true"] { background:var(--accent-soft); color:var(--accent); } .hero-tab:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .hero-grid.is-swapping { animation:heroSwap .28s ease; } @keyframes heroSwap { from { opacity:.4; } to { opacity:1; } } @media (max-width:640px) { .hero { padding-top:26px; } .hero-tabs-wrap { justify-content:flex-start; margin-bottom:26px; } .hero-tab { padding:8px 13px; font-size:12.5px; } } /* ---------- Per-audience hero diagrams ---------- */ .atlas-card svg[hidden] { display:none; } .atlas-diagram .d-path-cut { stroke:var(--line-strong); stroke-dasharray:5 7; opacity:.85; } .atlas-diagram .d-relay { fill:var(--surface-2); stroke:var(--accent); stroke-width:1.3; } .atlas-diagram .d-note { fill:var(--muted); font-size:9.5px; } /* Scene-diagram vocabulary (all theme tokens — safe in light and dark) */ .atlas-diagram .d-glyph { fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } .atlas-diagram .d-glyph-soft { fill:none; stroke:var(--muted); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; } .atlas-diagram .d-anode { fill:var(--accent); stroke:var(--surface); stroke-width:1.6; } .atlas-diagram .d-zone { fill:none; stroke:var(--line-strong); stroke-dasharray:3 7; opacity:.7; } /* ---------- Compact capability cards (home): stat line instead of maturity ---------- */ .card-grid-compact .feature-card { min-height:0; display:flex; flex-direction:column; padding:22px 24px 18px; } .card-grid-compact .feature-card h3 { display:flex; align-items:center; gap:10px; margin-bottom:9px; font-size:19px; } .cap-num { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:27px; height:27px; border-radius:8px; background:var(--accent-soft); color:var(--accent); font-size:11.5px; font-weight:800; } .card-grid-compact .feature-card p { margin:0 0 12px; } .cap-stat { margin-top:auto; padding-top:11px; border-top:1px solid var(--line); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11px; letter-spacing:.02em; color:var(--muted); } .cap-stat strong { color:var(--accent); font-weight:650; } @media (prefers-reduced-motion:reduce) { .hero-grid.is-swapping { animation:none; } } /* ---------- Hero capability ticker ---------- Contained strip: hairline border + surface fill separate it from the hero fine print below; fixed height keeps the crossfade layout-stable. */ .hero-ticker { position:relative; margin:24px 0 18px; height:42px; border:1px solid var(--line); border-radius:10px; background:var(--surface); overflow:hidden; } .hero-ticker span { position:absolute; left:15px; right:15px; top:50%; transform:translateY(-50%); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px; letter-spacing:.03em; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0; transition:opacity .7s ease; } .hero-ticker span::before { content:"▸ "; color:var(--accent); } .hero-ticker span.is-active { opacity:1; } /* Hero fine print: tight rows, roomy columns — reads as one compact block. */ .hero-notes { column-gap:20px; row-gap:8px; } /* ---------- Maturity badges (§2.4 truth-labeling system) ---------- */ .badge { display:inline-flex; align-items:center; padding:4px 10px; border:1px solid var(--line-strong); border-radius:999px; font-size:10px; font-weight:740; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); white-space:nowrap; } .b-proven { border-color:transparent; background:var(--accent-soft); color:var(--accent); } .b-shipped { border-color:var(--accent); color:var(--accent); } .b-optin { border-color:var(--good); color:var(--good); } .b-live { border-color:var(--good); background:color-mix(in srgb, var(--good) 10%, transparent); color:var(--good); } .b-indev { border-color:var(--line-strong); color:var(--text); } .b-roadmap { border-style:dashed; color:var(--muted); } .b-research { border-style:dashed; color:var(--muted); } .detail-label .badge { vertical-align:top; } /* ---------- Engineering deep-link chip ---------- */ .io-chip { display:inline-flex; align-items:center; gap:4px; margin-left:10px; padding:2px 9px; border:1px solid var(--line); border-radius:999px; font-size:11px; font-weight:620; letter-spacing:.04em; color:var(--muted); vertical-align:3px; transition:color .16s, border-color .16s; } .io-chip:hover { color:var(--accent); border-color:var(--accent); } /* ---------- Anchor chip row (in-page navigation) ---------- */ .anchor-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; } .anchor-chips a { padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:var(--surface); font-size:12.5px; font-weight:600; color:var(--muted); transition:color .16s, border-color .16s, background .16s; } .anchor-chips a:hover { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); } /* ---------- Pain rows: the “what Atlas changes” follow-up paragraph ---------- */ .problem-row .fix { margin-top:9px; } .problem-row .fix strong { color:var(--ink); } /* ---------- Wide comparison table (Why Atlas) ---------- */ .comparison-table.compare-wide { min-width:1080px; } .comparison-table.compare-wide th { width:auto; min-width:128px; font-size:13px; } .comparison-table.compare-wide th:first-child { min-width:210px; } .comparison-table.compare-wide td { font-size:13.5px; padding:16px 18px; } .comparison-table.compare-wide th:last-child, .comparison-table.compare-wide td:last-child { background:var(--accent-soft); color:var(--ink); } /* Row hover: a quiet contrast shift so the eye keeps its line across 7 columns. Ink-mix goes darker on the light theme and lighter on the dark theme — the correct "highlight" direction in each. Hover-capable pointers only. */ @media (hover:hover) { .comparison-table tbody td { transition:background-color .18s ease; } .comparison-table tbody tr:hover td { background-color:color-mix(in srgb, var(--ink) 5%, transparent); } .comparison-table.compare-wide tbody tr:hover td:last-child { background-color:color-mix(in srgb, var(--ink) 7%, var(--accent-soft)); } } @media (prefers-reduced-motion:reduce) { .comparison-table tbody td { transition:none; } } /* ---------- Clickable proof-strip cells (home trust strip) ---------- */ a.proof-item { display:block; color:inherit; transition:background .16s; } a.proof-item:hover { background:var(--surface); } a.proof-item:hover strong { color:var(--accent); } /* ---------- Playbook pattern cards ---------- */ .pb-list { display:grid; gap:14px; max-width:1000px; } details.pb-card { border:1px solid var(--line); border-radius:14px; background:var(--surface); } details.pb-card summary { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; padding:18px 22px; cursor:pointer; list-style:none; } details.pb-card summary::-webkit-details-marker { display:none; } .pb-title h3 { margin:0; font-size:17.5px; letter-spacing:-.015em; } .pb-title p { margin:3px 0 0; font-size:13.5px; color:var(--muted); } .pb-caret { font-size:19px; font-weight:300; color:var(--muted); transition:transform .18s ease; } details[open] .pb-caret { transform:rotate(45deg); } .pb-body { display:grid; gap:10px; margin:0 22px; padding:16px 0 20px; border-top:1px solid var(--line); } .pb-body p { margin:0; font-size:14.5px; color:var(--text); } .pb-body strong { color:var(--ink); } /* ---------- Screenshot gallery strip + lightbox ---------- */ /* ---------- Screenshot galleries ---------- A snap-scrolling rail of uniform, top-anchored thumbnails. Controls are injected by site.js and appear only when the rail actually overflows, so a short gallery has no dead chrome. Without JS the rail still swipes/scrolls and the thumbnails are plain links to the full images. */ .gallery { position:relative; margin-top:18px; } .gallery-strip { display:flex; gap:16px; overflow-x:auto; padding:9px 2px 14px; scroll-snap-type:x mandatory; scroll-padding-inline-start:2px; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; } .gallery-strip::-webkit-scrollbar { display:none; } .gallery-strip:focus-visible { outline:2px solid var(--accent); outline-offset:6px; border-radius:4px; } .gallery-strip figure { margin:0; flex:0 0 auto; width:min(374px,78vw); scroll-snap-align:start; } .gallery-strip.gallery-tall figure { width:min(198px,46vw); } /* Thumbnail: fixed aspect box + object-fit keeps every card the same height, anchored to the top so each interface's header stays readable. */ .gallery-strip figure > a { position:relative; display:block; overflow:hidden; aspect-ratio:16/11; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .gallery-strip.gallery-tall figure > a { aspect-ratio:9/18; } .gallery-strip img { display:block; width:100%; height:100%; object-fit:cover; object-position:top center; } .gallery-strip figure > a::after { content:"⤢"; position:absolute; right:10px; bottom:10px; display:grid; place-items:center; width:29px; height:29px; border-radius:9px; background:color-mix(in srgb, var(--dark) 74%, transparent); color:#f3fbff; font-size:13px; line-height:1; opacity:0; transform:translateY(5px); transition:opacity .18s ease, transform .18s ease; } @media (hover:hover) { .gallery-strip figure > a:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow); } .gallery-strip figure > a:hover::after { opacity:1; transform:none; } } .gallery-strip figure > a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; } .gallery-strip figcaption { margin-top:11px; font-size:12.5px; line-height:1.5; color:var(--muted); } .section-dark .gallery-strip figcaption { color:var(--on-dark-dim); } .section-dark .gallery-strip figure > a { border-color:color-mix(in srgb, var(--on-dark) 18%, transparent); background:color-mix(in srgb, var(--on-dark) 6%, transparent); } /* Rail controls — hidden unless the rail overflows, and never on touch. */ .gallery-nav { position:absolute; top:50%; z-index:3; display:none; place-items:center; width:38px; height:38px; padding:0; border:1px solid var(--line-strong); border-radius:50%; background:var(--bg); color:var(--ink); font-size:19px; line-height:1; cursor:pointer; box-shadow:var(--shadow-soft); transform:translateY(calc(-50% - 16px)); transition:color .18s ease, border-color .18s ease, opacity .18s ease; } .gallery-nav-prev { left:-15px; } .gallery-nav-next { right:-15px; } .gallery.has-nav .gallery-nav { display:grid; } .gallery-nav:hover { color:var(--accent); border-color:var(--accent); } .gallery-nav:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .gallery-nav[disabled] { opacity:0; pointer-events:none; } .gallery-tall + .gallery-nav-prev, .gallery-tall ~ .gallery-nav-prev { left:-9px; } .gallery-tall ~ .gallery-nav-next { right:-9px; } @media (hover:none) { .gallery-nav { display:none !important; } } @media (max-width:1080px) { .gallery-nav-prev { left:-6px; } .gallery-nav-next { right:-6px; } } /* ---------- Lightbox ---------- */ html:has(dialog.lightbox[open]) { overflow:hidden; } dialog.lightbox { width:min(1120px,94vw); max-width:none; max-height:92vh; padding:0; border:0; border-radius:16px; background:var(--bg); color:var(--ink); box-shadow:0 40px 120px rgba(0,0,0,.45); overflow:hidden; } dialog.lightbox::backdrop { background:rgba(3,8,16,.84); backdrop-filter:blur(3px); } dialog.lightbox[open] { animation:lbIn .2s ease; } @keyframes lbIn { from { opacity:0; transform:scale(.985); } to { opacity:1; transform:none; } } .lb-figure { margin:0; display:grid; } .lb-media { display:grid; place-items:center; padding:20px 20px 0; } .lb-media img { display:block; width:auto; height:auto; max-width:100%; max-height:calc(92vh - 124px); border-radius:10px; background:var(--surface-2); } .lb-bar { display:flex; align-items:center; gap:14px; padding:15px 20px 18px; } .lb-caption { flex:1; min-width:0; font-size:13.5px; line-height:1.5; color:var(--muted); } .lb-count { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11.5px; letter-spacing:.04em; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; } .lb-btn { display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid var(--line-strong); border-radius:50%; background:var(--bg); color:var(--ink); font-size:18px; line-height:1; cursor:pointer; transition:color .16s ease, border-color .16s ease; } .lb-btn:hover { color:var(--accent); border-color:var(--accent); } .lb-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .lb-close { position:absolute; top:13px; right:13px; z-index:2; width:32px; height:32px; font-size:14px; background:color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter:blur(4px); } dialog.lightbox.is-single .lb-prev, dialog.lightbox.is-single .lb-next, dialog.lightbox.is-single .lb-count { display:none; } @media (max-width:640px) { .lb-media { padding:16px 14px 0; } .lb-media img { max-height:calc(92vh - 140px); } .lb-bar { flex-wrap:wrap; padding:13px 14px 16px; } .lb-caption { order:3; flex-basis:100%; } } @media (prefers-reduced-motion:reduce) { .gallery-strip { scroll-behavior:auto; } .gallery-strip figure > a, .gallery-strip figure > a::after, .gallery-nav, .lb-btn { transition:none; } dialog.lightbox[open] { animation:none; } } /* ---------- Media video block ---------- */ .media-video { position:relative; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface); } .media-video video { display:block; width:100%; height:auto; } /* Centre play affordance over the poster. It sits above the native control bar rather than replacing it, and hides itself while the clip is running so it never covers the picture. */ .vplay { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; display:grid; place-items:center; width:76px; height:76px; padding:0; border:1px solid color-mix(in srgb,#fff 34%,transparent); border-radius:50%; background:color-mix(in srgb,#04101c 62%,transparent); color:#fff; cursor:pointer; transition:opacity .18s ease, transform .18s ease, background .18s ease, border-color .18s ease; backdrop-filter:blur(3px); } .vplay svg { width:34px; height:34px; margin-left:3px; fill:currentColor; } .vplay:hover { background:color-mix(in srgb,var(--accent) 82%,#04101c); border-color:transparent; color:#04101c; transform:translate(-50%,-50%) scale(1.06); } .vplay:focus-visible { outline:2px solid var(--accent); outline-offset:3px; } .media-video.is-playing .vplay { opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.9); } @media (max-width:640px) { .vplay { width:60px; height:60px; } .vplay svg { width:27px; height:27px; } } @media (prefers-reduced-motion:reduce) { .vplay { transition:opacity .18s ease; } .vplay:hover { transform:translate(-50%,-50%); } } /* Quality pill. Sits in the corner the native control bar never reaches; see assets/video-quality.js for why it is not inside the player's own bar. */ .vq { position:absolute; right:10px; top:10px; z-index:3; } .vq-btn { display:flex; align-items:center; gap:5px; padding:5px 8px 5px 10px; border:1px solid color-mix(in srgb,#fff 22%,transparent); border-radius:8px; background:color-mix(in srgb,#000 52%,transparent); color:#e8f4ff; font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.06em; cursor:pointer; opacity:.72; transition:opacity .16s ease, border-color .16s ease; } .vq-btn:hover, .vq-btn[aria-expanded="true"] { opacity:1; border-color:color-mix(in srgb,var(--accent) 60%,transparent); } .vq-btn svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .16s ease; } .vq-btn[aria-expanded="true"] svg { transform:rotate(180deg); } .vq-menu { position:absolute; right:0; top:calc(100% + 6px); min-width:186px; padding:6px; border:1px solid color-mix(in srgb,#fff 16%,transparent); border-radius:10px; background:color-mix(in srgb,#04080f 92%,transparent); box-shadow:0 14px 34px rgba(0,0,0,.45); backdrop-filter:blur(6px); } .vq-head { margin:4px 8px 6px; color:#7f95ad; font:600 9.5px/1 ui-monospace,Menlo,monospace; letter-spacing:.14em; text-transform:uppercase; } .vq-menu [data-tier] { display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:2px 8px; width:100%; padding:7px 9px; border:0; border-radius:7px; background:none; color:#cfdeee; text-align:left; cursor:pointer; transition:background .14s ease; } .vq-menu [data-tier]:hover, .vq-menu [data-tier]:focus-visible { background:color-mix(in srgb,#fff 9%,transparent); outline:none; } .vq-menu [data-tier] b { font:700 11.5px/1.2 ui-monospace,Menlo,monospace; letter-spacing:.05em; color:#e8f4ff; } .vq-menu [data-tier] span { font-size:11.5px; color:#cfdeee; } .vq-menu [data-tier] em { grid-column:2; font-style:normal; font-size:10.5px; color:#7f95ad; } .vq-menu [data-tier][aria-checked="true"] b { color:var(--accent); } .vq-menu [data-tier][aria-checked="true"]::before { content:""; position:absolute; left:6px; width:3px; height:22px; margin-top:2px; border-radius:2px; background:var(--accent); } .vq-menu [data-tier] { position:relative; } @media (max-width:640px) { .vq-btn { padding:4px 7px; font-size:10px; } .vq-menu { min-width:168px; } } /* ---------- Badges inside headings and cards ---------- */ h3 .badge { margin-left:8px; vertical-align:3px; } .feature-card h3 { display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .feature-card .text-link { display:inline-block; margin-top:12px; } .pillar em { color:inherit; opacity:.75; font-style:normal; font-size:13px; } /* ---------- Notes & callouts: joined to the rounded card language ---------- The old square accent-bar block clashed with the card system. Now: rounded container, hairline border, faint accent wash; the accent signal survives as a slim keyline clipped by the radius. */ .callout, .timing-note { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb, var(--accent) 5%, var(--surface)); } .callout::before, .timing-note::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); } .callout { padding:19px 24px 19px 28px; } .timing-note { padding:20px 26px 20px 30px; } .callout.callout-dark { border-color:color-mix(in srgb, var(--on-dark) 16%, transparent); background:color-mix(in srgb, var(--on-dark) 6%, transparent); } /* ---------- CTA band: real breathing room ---------- base.css gave the band only min-height:310px with centered content, so a three-line heading (e.g. /why-atlas) filled it edge to edge. Fixed padding keeps short bands the same height and gives long ones room. */ .cta-inner { min-height:0; padding:76px 0; } @media (max-width:640px) { .cta-inner { padding:58px 0; } } /* Multi-paragraph capability/detail rows: a real blank-line gap between paragraphs. */ .detail-content p + p { margin-top: 15px; } /* ---------- Small helpers ---------- */ .badge-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; } .badge-legend { display:grid; gap:10px; margin-top:18px; } .badge-legend div { display:flex; align-items:baseline; gap:12px; font-size:13.5px; color:var(--muted); } .mt-8 { margin-top:8px; } .mt-16 { margin-top:16px; } .mt-24 { margin-top:24px; } /* ---------- Responsive ---------- */ @media (max-width:820px) { .nav-group { display:block; } .nav-group .dropdown { position:static; transform:none; opacity:1; visibility:visible; padding-top:0; } .dropdown-panel { min-width:0; border:0; box-shadow:none; background:transparent; padding:0 0 6px 16px; } .dropdown-panel a { padding:9px 12px; font-size:13.5px; } .comparison-table.compare-wide { min-width:900px; } } @media (prefers-reduced-motion:reduce) { .hero-ticker span { transition:none; } .pb-caret { transition:none; } } /* ---------- Consent bar ---------- Bottom sheet, not a wall: it never covers the page content it interrupts, and Accept/Decline carry equal visual weight so the choice is real. */ .consent-bar { position:fixed; left:0; right:0; bottom:0; z-index:900; border-top:1px solid var(--line); background:var(--bg); box-shadow:0 -18px 50px rgba(10,20,35,.16); animation:consentIn .26s ease; } @keyframes consentIn { from { transform:translateY(100%); } to { transform:none; } } .consent-inner { display:flex; align-items:center; gap:32px; padding:20px 0 22px; } .consent-copy strong { display:block; margin-bottom:5px; color:var(--ink); font-size:15px; } .consent-copy p { margin:0; max-width:78ch; color:var(--muted); font-size:13.5px; line-height:1.6; } .consent-copy a { color:var(--accent); } .consent-actions { display:flex; flex:0 0 auto; gap:10px; } .consent-actions .button { white-space:nowrap; } .consent-actions .button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } @media (max-width:820px) { .consent-inner { flex-direction:column; align-items:stretch; gap:16px; padding:18px 0 20px; } .consent-actions { justify-content:flex-end; } } @media (max-width:520px) { .consent-actions { flex-direction:column-reverse; } .consent-actions .button { justify-content:center; } } @media (prefers-reduced-motion:reduce) { .consent-bar { animation:none; } } /* Newsletter consent line — small, quiet, still an explicit opt-in. */ .newsletter-consent { display:flex; align-items:flex-start; gap:9px; margin-top:12px; font-size:12.5px; line-height:1.5; color:var(--muted); } .newsletter-consent input { margin-top:2px; } .newsletter-status:not(:empty) { display:block; margin-top:10px; font-size:13px; color:var(--accent); }