/* ============================================================================ noem.ai — Components (built from tokens.css) Scoped to .premium-theme. Powers the brand guide AND the WordPress theme. ============================================================================ */ /* ===================== BASE ===================== */ .premium-theme{ background:var(--bg-deep); color:var(--ink-60); font-family:var(--font-sans); font-size:var(--fs-body); line-height:var(--lh-normal); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .premium-theme img{ max-width:100%; height:auto; } .ns-container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(20px,4vw,56px); } .ns-container--narrow{ max-width:var(--container-narrow); } /* ===================== TYPOGRAPHY ===================== */ .premium-theme h1,.premium-theme h2,.premium-theme h3,.premium-theme h4,.premium-theme h5,.premium-theme h6{ font-family:var(--font-display); color:var(--ink); line-height:var(--lh-tight); letter-spacing:var(--tracking-tight); font-weight:var(--fw-bold); margin:0 0 .5em; } .ns-display{ font-size:var(--fs-display); font-weight:var(--fw-medium); letter-spacing:var(--tracking-display); line-height:var(--lh-tight); } .premium-theme h1{ font-size:var(--fs-h1); } .premium-theme h2{ font-size:var(--fs-h2); } .premium-theme h3{ font-size:var(--fs-h3); } .premium-theme h4{ font-size:var(--fs-h4); } .ns-lead{ font-size:var(--fs-lead); color:var(--ink-80); line-height:var(--lh-normal); } .ns-eyebrow{ font-family:var(--font-mono); font-size:var(--fs-mono); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--periwinkle); display:inline-flex; align-items:center; gap:.5em; } .premium-theme p{ margin:0 0 1em; color:var(--ink-60); } .premium-theme a{ color:var(--periwinkle); text-decoration:none; } /* ===================== UTILITIES ===================== */ .grad-text{ background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .glass{ background:var(--bg-glass); backdrop-filter:saturate(160%) blur(var(--blur)); -webkit-backdrop-filter:saturate(160%) blur(var(--blur)); border:1px solid var(--line-3); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), var(--shadow-md); } .grad-border{ position:relative; background:var(--bg-elev); border:1px solid transparent; background-clip:padding-box; } .grad-border::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; background:var(--grad-border); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .glow{ position:relative; } .glow::after{ content:""; position:absolute; inset:-1px; z-index:-1; border-radius:inherit; background:var(--glow-indigo); filter:blur(24px); opacity:.5; } /* ===================== BUTTONS ===================== */ .ns-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55em; font-family:var(--font-sans); font-weight:var(--fw-semibold); font-size:var(--fs-small); letter-spacing:.01em; padding:.85em 1.6em; border-radius:var(--r-pill); border:1px solid transparent; background-clip:padding-box; /* keep gradient off the 1px border so corners don't fringe magenta */ cursor:pointer; white-space:nowrap; transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base); } .ns-btn--primary{ background:var(--grad-brand); background-clip:padding-box; color:#fff; box-shadow:0 12px 34px -10px rgba(164,92,224,.55); } .ns-btn--primary:hover{ transform:translateY(-2px); box-shadow:0 18px 48px -10px rgba(164,92,224,.72); } .ns-btn--ghost{ background:transparent; color:var(--ink-80); border-color:var(--line-3); } .ns-btn--ghost:hover{ color:#fff; border-color:var(--periwinkle); background:rgba(165,175,246,.08); } .ns-btn--lg{ padding:1.05em 2em; font-size:var(--fs-body); } /* ===================== FOCUS (keyboard accessibility) ===================== Visible periwinkle focus ring for keyboard users on every interactive element. :focus-visible so mouse clicks don't show the ring. */ .premium-theme :is(.ns-btn,.ns-input,.ns-header__nav a,.ns-footer a,.ns-carousel__btn,summary,a.ns-link):focus-visible, .premium-theme .ns-field:focus-within{ outline:2px solid var(--periwinkle); outline-offset:2px; border-radius:var(--r-sm); } .premium-theme .ns-btn:focus-visible{ outline-offset:3px; } .premium-theme .ns-field:focus-within{ outline-offset:0; border-color:var(--periwinkle); } /* --- Icon CTA: gradient pill with a white arrow chip that slides across on hover while the label slides aside (the blog "Try It for Free" button). Markup: … */ .ns-btn--icon{ position:relative; overflow:hidden; gap:.7em; padding:.45em 1.5em .45em .5em; } .ns-btn__icon{ position:relative; left:0; flex:0 0 auto; width:2.1em; height:2.1em; border-radius:50%; background:#fff; display:inline-flex; align-items:center; justify-content:center; transition:left var(--dur-base) var(--ease-out); } .ns-btn__icon::before{ content:""; width:.72em; height:.72em; background:var(--indigo); -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; } .ns-btn__text{ position:relative; left:0; transition:left var(--dur-base) var(--ease-out); } .ns-btn--icon:hover .ns-btn__icon{ left:calc(100% - 2.1em); } .ns-btn--icon:hover .ns-btn__text{ left:calc(-2.1em - .7em); } @media (prefers-reduced-motion: reduce){ .ns-btn__icon, .ns-btn__text{ transition:none; } .ns-btn--icon:hover .ns-btn__icon, .ns-btn--icon:hover .ns-btn__text{ left:0; } } /* ===================== HEADER ===================== */ .ns-header{ position:sticky; top:0; z-index:var(--z-header); background:rgba(7,8,12,.72); backdrop-filter:saturate(160%) blur(var(--blur)); -webkit-backdrop-filter:saturate(160%) blur(var(--blur)); border-bottom:1px solid var(--line-2); } .ns-header__inner{ display:flex; align-items:center; gap:28px; min-height:68px; max-width:var(--container); margin-inline:auto; padding-inline:clamp(20px,4vw,56px); } .ns-header__logo{ flex:0 0 auto; height:32px; width:auto; max-height:32px; object-fit:contain; } .ns-header__nav{ flex:1 1 auto; display:flex; justify-content:center; gap:6px; } .ns-header__nav a{ color:var(--ink-80); font-weight:var(--fw-medium); font-size:var(--fs-small); padding:10px 14px; border-radius:var(--r-sm); transition:color var(--dur-fast); } .ns-header__nav a:hover{ color:#fff; } .ns-header__cta{ flex:0 0 auto; display:flex; align-items:center; gap:12px; } .ns-burger{ display:none; background:none; border:0; color:var(--ink); font-size:24px; cursor:pointer; } @media (max-width:1024px){ .ns-header__nav{ display:none; } .ns-burger{ display:inline-flex; } .ns-header__cta .ns-btn--ghost{ display:none; } } /* ===================== FOOTER ===================== */ .ns-footer{ background:var(--bg-base); border-top:1px solid var(--line-2); color:var(--ink-60); padding-top:var(--space-8); padding-bottom:var(--space-6); } .ns-footer__grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:var(--space-6); } .ns-footer h4{ font-size:var(--fs-small); color:var(--ink); margin-bottom:var(--space-4); } .ns-footer a{ display:block; color:var(--ink-60); padding:.3em 0; } .ns-footer a:hover{ color:var(--ink); } .ns-footer__bottom{ margin-top:var(--space-6); padding-top:var(--space-5); border-top:1px solid var(--line-1); font-size:var(--fs-small); color:var(--ink-40); } /* ===================== SECTION / SUB-SECTION ===================== */ /* PHYSICAL longhands on purpose: the legacy theme sheet (style.min.css) ships `section{ padding-bottom:0 }` (physical). Logical `padding-block` does NOT reliably beat a physical longhand in the cascade, so every .ns-section was collapsing its bottom padding to 0 and content/buttons touched the next band. Physical top+bottom here win cleanly on specificity. Do NOT revert to padding-block. */ .ns-section{ padding-top:var(--section-pad); padding-bottom:var(--section-pad); } .ns-section--alt{ background:rgba(11,13,19,.55); } /* semi-transparent — lets --bg-deep bleed through visibly */ /* --- Uniform section rhythm ------------------------------------------------- COLLAPSE a seam to one --section-pad ONLY when the two neighbours share the same background (no visible colour line) — otherwise two stacked paddings read as a double gap. When the background CHANGES (transparent <-> --alt dark band) there IS a colour line at the seam, and BOTH sides must keep their full padding so neither the upper content (e.g. cards) nor the lower content hugs that line. The old rule zeroed the upper section's bottom padding before an --alt band, which glued the cards to the top of the dark band — that was the "cards touching the next black section" bug. Do NOT reintroduce a collapse on a background-change seam. • same-bg seam (plain↔plain, alt↔alt) → collapse the lower section's TOP. • background-change seam (plain↔alt) → keep both (base padding stands). First/last sections keep their outer padding. Physical padding-top so the legacy `section{padding:0}` reset can't re-collapse it. Scoped to .premium-main; pricing/services use a separate section system. */ .premium-main .ns-section:not(.ns-section--alt) + .ns-section:not(.ns-section--alt){ padding-top:0; } .premium-main .ns-section--alt + .ns-section--alt{ padding-top:0; } /* --- Section-spacing guarantee: a CTA must never touch the next title ------- The #1 spacing bug is a button at the bottom of a band sitting flush against the heading of the next band. This is the site-wide backstop for the rule documented in brand-guide.html → "Spacing between sections": any action row (or bare button) that ENDS a band keeps a guaranteed floor of space below it, even on Elementor pages where a section's bottom padding was zeroed in the editor. Additive + last-child only, so well-padded sections are unaffected. The real fix for a band is still its section padding — see the guide. */ .premium-theme .ns-btnrow:last-child, .premium-theme .ns-hero__actions:last-child, .premium-theme .ns-cta__actions:last-child, .premium-theme .ns-hero__cta:last-child, .premium-theme > .ns-btn:last-child, .premium-theme .ns-section > .ns-btn:last-child{ margin-bottom: clamp(24px, 4vw, 56px); } .ns-section__head{ max-width:var(--container-narrow); margin:0 auto var(--space-7); text-align:center; } .ns-section__head .ns-eyebrow{ margin-bottom:var(--space-3); } /* ============================================================================ SPACING GUARANTEES — nothing may touch across a seam, on ANY page type. Belt-and-braces for brand-guide.html → "Spacing between sections". The #1 design bug is a button / CTA cluster sitting flush against the cards or the title below it. Native .ns-* pages get the rhythm system above; Elementor pages don't, so these floors catch them too. They use MARGIN (not padding) so a per-section padding override in the Elementor editor can't collapse the seam. The proper fix for a band is still its own section padding — these only stop a band from ever collapsing to touching. ============================================================================ */ /* (3) A button/CTA that ends a CARD or BENTO tile keeps the card's bottom edge off it, on top of the card's own padding. Cards must never crowd their CTA. */ .premium-theme .ns-card > .ns-btn:last-child, .premium-theme .ns-card > .ns-btnrow:last-child, .premium-theme .ns-bento__tile > .ns-btn:last-child, .premium-theme .ns-bento__tile > .ns-btnrow:last-child{ margin-top: var(--space-5); } /* (4) Phones: bento collapses to a single column (2-up is too cramped < 560). */ @media (max-width:560px){ .ns-bento{ grid-template-columns:1fr; } .ns-bento__tile,.ns-bento__tile--wide,.ns-bento__tile--full,.ns-bento__tile--tall{ grid-column:1 / -1; grid-row:auto; } } /* ===================== HERO (typography-forward) ===================== */ .ns-hero{ position:relative; padding-top:clamp(6rem,4rem + 6vw,10rem); padding-bottom:var(--section-pad); text-align:center; overflow:hidden; } /* Heroes carry no background glow (brand decision). The signature radial glow stays a CTA-band-only device (see .ns-cta--block). */ .ns-hero__inner{ position:relative; max-width:920px; margin-inline:auto; } .ns-hero h1,.ns-hero .ns-display{ margin-bottom:var(--space-5); } .ns-hero .ns-lead{ max-width:680px; margin:0 auto var(--space-6); } .ns-hero__media{ margin-top:var(--space-7); border-radius:var(--r-xl); border:1px solid var(--line-2); box-shadow:var(--shadow-lg); overflow:hidden; } /* ===================== BENTO GRID ===================== */ .ns-bento{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--space-5); } .ns-bento__tile{ background:var(--bg-elev); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:var(--space-6); box-shadow:var(--shadow-md); position:relative; overflow:hidden; transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base); grid-column:span 4; } .ns-bento__tile:hover{ transform:translateY(-4px); border-color:rgba(164,92,224,.5); } .ns-bento__tile::after{ content:""; position:absolute; inset:0; background:var(--grad-brand-soft); opacity:0; transition:opacity var(--dur-base); pointer-events:none; } .ns-bento__tile:hover::after{ opacity:1; } .ns-bento__tile > *{ position:relative; z-index:1; } .ns-bento__tile--wide{ grid-column:span 8; } .ns-bento__tile--tall{ grid-row:span 2; } .ns-bento__tile--full{ grid-column:span 12; } .ns-bento__icon{ width:52px; height:52px; display:grid; place-items:center; border-radius:var(--r-md); background:rgba(164,92,224,.12); border:1px solid var(--line-2); margin-bottom:var(--space-4); } @media (max-width:880px){ .ns-bento{ grid-template-columns:repeat(2,1fr); } .ns-bento__tile,.ns-bento__tile--wide,.ns-bento__tile--full{ grid-column:span 2; } .ns-bento__tile--tall{ grid-row:auto; } } /* ===================== CARD ===================== */ .ns-card{ background:var(--bg-elev); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:var(--space-6); box-shadow:var(--shadow-md); } /* ===================== FAQ / ACCORDION ===================== */ .ns-accordion__item{ background:var(--bg-elev); border:1px solid var(--line-2); border-radius:var(--r-md); margin-bottom:var(--space-3); overflow:hidden; } .ns-accordion__title{ font-family:var(--font-display); font-weight:var(--fw-semibold); color:var(--ink); padding:var(--space-5); cursor:pointer; display:flex; justify-content:space-between; align-items:center; } .ns-accordion__title::after{ content:"+"; color:var(--violet); font-size:1.4em; } .ns-accordion__body{ padding:0 var(--space-5) var(--space-5); color:var(--ink-60); line-height:var(--lh-relaxed); } /* ===================== COMPARISON / PRICING TABLE ===================== */ .ns-table{ width:100%; border-collapse:separate; border-spacing:0; background:var(--bg-elev); border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden; } /* header row: a REAL (visible) brand tint — not the old near-invisible white .04 */ .ns-table th{ background:linear-gradient(180deg, rgba(164,92,224,.16), rgba(77,97,254,.07)); color:var(--ink); font-family:var(--font-display); text-align:left; padding:var(--space-4) var(--space-5); font-weight:var(--fw-semibold); border-bottom:1px solid var(--line-3); } .ns-table td{ padding:var(--space-4) var(--space-5); color:var(--ink-60); border-bottom:1px solid var(--line-1); } .ns-table tr:last-child td{ border-bottom:0; } /* ===================== CTA BAND ===================== */ .ns-cta{ text-align:center; padding-top:var(--section-pad); padding-bottom:var(--section-pad); } .ns-cta__inner{ max-width:900px; margin-inline:auto; padding:var(--space-8) var(--space-6); border-radius:var(--r-xl); border:1px solid var(--line-2); box-shadow:var(--shadow-lg); background:linear-gradient(180deg, rgba(164,92,224,.14), rgba(77,97,254,.06)), var(--bg-elev); } /* ===================== TESTIMONIALS ===================== */ .ns-quote{ background:var(--bg-elev); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:var(--space-6); box-shadow:var(--shadow-md); } .ns-quote__text{ font-size:var(--fs-lead); color:var(--ink-80); line-height:var(--lh-normal); } .ns-quote__author{ display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-5); } .ns-quote__author img{ width:44px; height:44px; border-radius:var(--r-pill); object-fit:cover; } .ns-quote__name{ color:var(--ink); font-weight:var(--fw-semibold); } .ns-quote__role{ color:var(--ink-40); font-size:var(--fs-small); } /* ===================== LOGO STRIP ===================== */ .ns-logos{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--space-7); opacity:.7; } .ns-logos img{ height:28px; filter:grayscale(1) brightness(1.6); } /* ===================== FORMS ===================== */ .ns-field{ display:flex; gap:var(--space-3); background:var(--bg-elev-2); border:1px solid var(--line-2); border-radius:var(--r-pill); padding:6px 6px 6px var(--space-5); } .ns-input{ flex:1; background:transparent; border:0; color:var(--ink); font-size:var(--fs-body); outline:none; } .ns-input::placeholder{ color:var(--ink-40); } .ns-input:focus, .ns-field:focus-within{ } /* ===================== MOTION ===================== IntersectionObserver (motion.js) toggles .is-visible. CSS owns the animation. Elements only HIDE once .motion-ready is set (JS confirmed running) — so a script failure can never leave content permanently invisible. */ /* --- premium reveal: SUBTLE. Short travel, quick fade, no blur, no scale. Premium motion is barely perceptible enhancement — never a full-viewport blank that reads as "unloaded". Pairs with an earlier trigger + bigger safety rootMargin in motion.js so content is effectively visible-by-default and the rise is just a gentle settle. Keep travel small (≤20px). */ :root{ --ns-reveal-ease:cubic-bezier(.22,.61,.36,1); } .premium-theme.motion-ready [data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity 460ms var(--ns-reveal-ease), transform 460ms var(--ns-reveal-ease); will-change:opacity, transform; } .premium-theme.motion-ready [data-reveal].is-visible{ opacity:1; transform:none; } /* directional reveals: slide IN from a side, short travel. Only the start transform changes (opacity/transition inherit above; .is-visible resets to none). Use ONLY on the two halves of a split/2-col row — left half from the left, right half from the right. Never on stacked bands or text you must read. */ .premium-theme.motion-ready [data-reveal="left"]{ transform:translateX(-28px); } .premium-theme.motion-ready [data-reveal="right"]{ transform:translateX(28px); } /* staggered group: children cascade in (short travel, quick) */ .premium-theme.motion-ready [data-reveal="stagger"]{ opacity:1; transform:none; } .premium-theme.motion-ready [data-reveal="stagger"] > *{ opacity:0; transform:translateY(16px); transition:opacity 440ms var(--ns-reveal-ease), transform 440ms var(--ns-reveal-ease); } .premium-theme.motion-ready [data-reveal="stagger"].is-visible > *{ opacity:1; transform:none; } .premium-theme.motion-ready [data-reveal="stagger"].is-visible > *:nth-child(1){ transition-delay:0ms; } .premium-theme.motion-ready [data-reveal="stagger"].is-visible > *:nth-child(2){ transition-delay:55ms; } .premium-theme.motion-ready [data-reveal="stagger"].is-visible > *:nth-child(3){ transition-delay:110ms; } .premium-theme.motion-ready [data-reveal="stagger"].is-visible > *:nth-child(4){ transition-delay:165ms; } .premium-theme.motion-ready [data-reveal="stagger"].is-visible > *:nth-child(5){ transition-delay:220ms; } .premium-theme.motion-ready [data-reveal="stagger"].is-visible > *:nth-child(6){ transition-delay:275ms; } .premium-theme.motion-ready [data-reveal="stagger"].is-visible > *:nth-child(7){ transition-delay:330ms; } .premium-theme.motion-ready [data-reveal="stagger"].is-visible > *:nth-child(8){ transition-delay:385ms; } @media (prefers-reduced-motion: reduce){ .premium-theme.motion-ready [data-reveal], .premium-theme.motion-ready [data-reveal="stagger"] > *, .premium-theme.motion-ready .ns-intmap[data-reveal]{ opacity:1 !important; transform:none !important; filter:none !important; } } /* count-up: tabular figures + reserved width (set by motion.js) so the number never reflows the elements beside it as it ticks up. */ .premium-theme [data-count]{ display:inline-block; text-align:center; font-variant-numeric:tabular-nums; } /* layout resets */ .premium-theme .page-wrapper, .premium-theme .site-main{ background-color:transparent !important; } .premium-theme .site-main, .premium-theme .page-wrapper{ margin-top:0 !important; padding-top:0 !important; } .premium-theme .header{ display:none !important; } /* fonts */ .premium-theme h1,.premium-theme h2,.premium-theme h3,.premium-theme h4,.premium-theme h5,.premium-theme h6, .premium-theme p, .premium-theme li{ font-family:var(--font-sans) !important; } .premium-theme .colorText{ background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } /* px-hero layout */ .premium-theme .px-hero{ text-align:center; padding-top:clamp(6rem,4rem + 5vw,9rem); padding-bottom:var(--section-pad); } /* tables (fix dark-on-dark) */ .premium-theme table{ background-color:transparent !important; } .premium-theme table, .premium-theme td, .premium-theme th, .premium-theme .compare, .premium-theme .compare td, .premium-theme .compare th, .premium-theme .compare td *{ color:var(--ink-80) !important; } .premium-theme th, .premium-theme thead th, .premium-theme .compare thead th{ color:var(--ink) !important; background-color:rgba(255,255,255,.04) !important; } .premium-theme table td, .premium-theme table th{ border-color:var(--line-1) !important; } .premium-theme .pill{ background:rgba(255,255,255,.06) !important; color:var(--ink-80) !important; border:1px solid var(--line-1) !important; } /* ============================================================================ CENTRALIZED THEME HEADER (.ns-site-header) — the single global header on every premium view. Renders the WP "Menu 2.0". Sticky glass bar + CSS dropdowns + pure-CSS mobile toggle. ============================================================================ */ .premium-theme .ns-site-header{ position:sticky; top:0; z-index:var(--z-header, 300); background:rgba(11,13,19,0.72); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur)); border-bottom:1px solid var(--line-2); } .premium-theme .ns-site-header__inner{ max-width:var(--container); margin:0 auto; padding:14px clamp(16px,4vw,40px); display:flex; align-items:center; gap:var(--space-5); } .premium-theme .ns-site-header__logo{ display:inline-flex; align-items:center; flex:0 0 auto; } .premium-theme .ns-site-header__logo img{ height:30px; width:auto; display:block; } .premium-theme .ns-site-header__nav{ flex:1 1 auto; display:flex; justify-content:center; } .premium-theme .ns-site-header__cta{ display:flex; align-items:center; gap:var(--space-3); flex:0 0 auto; } /* menu (top level) */ .premium-theme .ns-menu, .premium-theme .ns-menu .sub-menu{ list-style:none; margin:0; padding:0; } .premium-theme .ns-menu{ display:flex; align-items:center; gap:4px; } .premium-theme .ns-menu > li{ position:relative; } .premium-theme .ns-menu a{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; padding:10px 16px; border-radius:var(--r-md); color:var(--ink-80) !important; font-size:var(--fs-body); font-weight:var(--fw-medium); transition:color var(--dur-fast), background var(--dur-fast); } /* root toggles render as role="button" with no href — restore the pointer cursor */ .premium-theme .ns-menu a[role="button"]{ cursor:pointer; } /* dropdown items a touch smaller than top-level for hierarchy */ .premium-theme .ns-menu .sub-menu a{ font-size:var(--fs-small); } /* header CTAs + logo scaled to match the larger nav */ .premium-theme .ns-site-header__cta .ns-btn{ font-size:var(--fs-small); padding:.7em 1.4em; } /* Demote the header Login (ghost) to a borderless text link so the primary "Try for Free" CTA stands out. Scoped to the header — hero/other ghost buttons keep their outline. */ .premium-theme .ns-site-header__cta .ns-btn--ghost{ border-color:transparent; background:transparent; } .premium-theme .ns-site-header__cta .ns-btn--ghost:hover{ border-color:transparent; background:transparent; color:#fff; } .premium-theme .ns-site-header__logo img{ height:34px; } .premium-theme .ns-menu a:hover{ color:#fff !important; background:rgba(255,255,255,.05); } .premium-theme .ns-menu .menu-item-has-children > a::after{ content:""; width:7px; height:7px; margin-left:2px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.6; } /* dropdowns */ .premium-theme .ns-menu .sub-menu{ position:absolute; top:calc(100% + 10px); left:0; min-width:230px; padding:8px; background:var(--bg-elev-2); border:1px solid var(--line-2); border-radius:var(--r-md); box-shadow:var(--shadow-md); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity var(--dur-base), transform var(--dur-base), visibility var(--dur-base); z-index:2; } /* .is-open (set by motion.js on hover / focus / click) is the SOLE visibility driver so opening one submenu force-closes any other — only one li is .is-open at a time. Deliberately NOT :focus-within: a clicked parent keeps focus, and :focus-within would leave its submenu stuck open behind the next one. motion.js handles keyboard focus via focusin/focusout instead. */ .premium-theme .ns-menu > li.is-open > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); } .premium-theme .ns-menu .sub-menu a{ display:block; padding:9px 12px; border-radius:var(--r-sm); } .premium-theme .ns-menu .sub-menu a:hover{ background:rgba(164,92,224,.16); } /* hover-bridge so the dropdown doesn't close in the 10px gap */ .premium-theme .ns-menu .menu-item-has-children::before{ content:""; position:absolute; top:100%; left:0; right:0; height:12px; } /* ---- grouped MEGA-MENU (any sub-menu containing .ns-megahead headings) ------- Two-column layout via CSS multicol; .ns-megahead--break forces the 2nd group into column 2. Headings render as non-clickable eyebrow labels. */ .premium-theme .ns-menu .sub-menu:has(.ns-megahead){ column-count:2; column-gap:var(--space-6); min-width:480px; padding:12px; } .premium-theme .ns-menu .sub-menu:has(.ns-megahead) > li{ break-inside:avoid; } .premium-theme .ns-menu .sub-menu .ns-megahead{ break-inside:avoid; margin-top:6px; } .premium-theme .ns-menu .sub-menu .ns-megahead:first-child{ margin-top:0; } .premium-theme .ns-menu .sub-menu .ns-megahead--break{ break-before:column; margin-top:0; } .premium-theme .ns-menu .sub-menu .ns-megahead > a{ font-family:var(--font-mono); font-size:var(--fs-mono); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--ink-40) !important; padding:4px 12px 6px; pointer-events:none; cursor:default; } .premium-theme .ns-menu .sub-menu .ns-megahead > a::after{ display:none; } /* no caret */ .premium-theme .ns-menu .sub-menu .ns-megahead > a:hover{ background:transparent; color:var(--ink-40) !important; } /* mobile toggle (pure CSS) */ .premium-theme .ns-site-header__burger{ display:none; flex:0 0 auto; width:42px; height:42px; border-radius:var(--r-md); border:1px solid var(--line-3); cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:4px; } .premium-theme .ns-site-header__burger span{ width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform var(--dur-fast), opacity var(--dur-fast); } @media (max-width:1024px){ .premium-theme .ns-site-header__burger{ display:inline-flex; order:3; } .premium-theme .ns-site-header__cta{ order:2; margin-left:auto; } .premium-theme .ns-site-header__nav{ order:4; flex-basis:100%; justify-content:flex-start; max-height:0; overflow:hidden; transition:max-height var(--dur-base) var(--ease-out); } .premium-theme .ns-site-header__inner{ flex-wrap:wrap; row-gap:0; } .premium-theme .ns-site-header__toggle:checked ~ .ns-site-header__nav{ max-height:80vh; overflow:auto; margin-top:12px; } .premium-theme .ns-site-header__nav .ns-menu{ flex-direction:column; align-items:stretch; gap:2px; width:100%; padding-bottom:12px; } .premium-theme .ns-menu .sub-menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; background:transparent; border:0; border-left:1px solid var(--line-2); border-radius:0; margin:2px 0 6px 14px; padding:2px 0; } .premium-theme .ns-menu .menu-item-has-children > a::after{ margin-left:auto; } } @media (max-width:560px){ .premium-theme .ns-site-header__cta .ns-btn--ghost{ display:none; } /* keep just the primary CTA on phones */ } .premium-theme .footer{ background:var(--bg-base) !important; } /* legacy theme footer (global) */ /* footer polish: hairline top, muted links → brand on hover */ .premium-theme .footer{ border-top:1px solid var(--line-2); } .premium-theme .footer a{ color:var(--ink-60) !important; transition:color var(--dur-fast); } .premium-theme .footer a:hover{ color:var(--ink) !important; } .premium-theme .footer .footer__subtitile{ color:var(--ink) !important; } /* ============================================================================ BLOG / ARTICLES — search box + filter to premium dark glass ============================================================================ */ .premium-theme .search-form, .premium-theme .search-form__label{ background:transparent !important; } .premium-theme .search-form__container{ background:var(--bg-glass) !important; backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur)); border:1px solid var(--line-2) !important; border-radius:var(--r-pill) !important; box-shadow:var(--shadow-md); padding:6px 6px 6px 8px; } .premium-theme .search-form__input{ background:transparent !important; border:0 !important; color:var(--ink) !important; } .premium-theme .search-form__input::placeholder{ color:var(--ink-40) !important; } .premium-theme .search-form__submit, .premium-theme .ui-button--variant--is-bg-blue{ background:var(--grad-brand) !important; color:#fff !important; border:0 !important; border-radius:var(--r-pill) !important; } .premium-theme .search-form__submit .ui-button__text{ color:#fff !important; } /* ============================================================================ BETTERDOCS (Help Center) — dark premium re-skin ============================================================================ */ /* search */ .premium-theme .betterdocs-searchform, .premium-theme .betterdocs-advance-searchform{ background:var(--bg-glass) !important; backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur)); border:1px solid var(--line-2) !important; border-radius:var(--r-pill) !important; box-shadow:var(--shadow-md) !important; } .premium-theme .betterdocs-search-field, .premium-theme .betterdocs-searchform input{ background:transparent !important; color:var(--ink) !important; border:0 !important; } .premium-theme .betterdocs-search-field::placeholder{ color:var(--ink-40) !important; } .premium-theme .betterdocs-search-button, .premium-theme .betterdocs-searchform button{ background:var(--grad-brand) !important; color:#fff !important; border:0 !important; } .premium-theme .betterdocs-instant-result, .premium-theme .betterdocs-search-result-wrapper{ background:var(--bg-elev-2) !important; border:1px solid var(--line-2) !important; color:var(--ink-80) !important; border-radius:var(--r-md) !important; } /* sidebar + category cards */ .premium-theme .betterdocs-sidebar-content, .premium-theme .betterdocs-category-sidebar, .premium-theme .betterdocs-single-category-inner, .premium-theme .betterdocs-category-box, .premium-theme .docs-single-cat-wrap, .premium-theme .betterdocs-categories-wrap{ background:var(--bg-elev) !important; border:1px solid var(--line-2) !important; border-radius:var(--r-lg) !important; box-shadow:var(--shadow-sm) !important; } .premium-theme .betterdocs-single-category-inner:hover{ border-color:var(--line-3) !important; } /* inner header containers carry their own white bg → clear them so light text is readable */ .premium-theme .betterdocs-category-header, .premium-theme .betterdocs-category-header-inner, .premium-theme .betterdocs-category-icon, .premium-theme .betterdocs-category-icon img, .premium-theme .betterdocs-category-content, .premium-theme .betterdocs-category-body{ background:transparent !important; box-shadow:none !important; } .premium-theme .betterdocs-category-sidebar *, .premium-theme .betterdocs-single-category-inner *, .premium-theme .betterdocs-cat-list-title, .premium-theme .docs-cat-title{ color:var(--ink) !important; } .premium-theme .betterdocs-category-sidebar a, .premium-theme .betterdocs-cat-list a{ color:var(--ink-80) !important; } .premium-theme .betterdocs-category-sidebar a:hover, .premium-theme .betterdocs-cat-list a:hover{ color:#fff !important; } .premium-theme .betterdocs-cat-icon, .premium-theme .docs-cat-icon img{ filter:none; opacity:.9; } /* count badge → brand gradient */ .premium-theme .betterdocs-category-count, .premium-theme .docs-cat-count, .premium-theme .betterdocs-cat-list-count{ background:var(--grad-brand) !important; color:#fff !important; border:0 !important; } /* doc body, TOC */ .premium-theme .betterdocs-content, .premium-theme .betterdocs-entry-content, .premium-theme .betterdocs-toc, .premium-theme #betterdocs-table-of-contents{ background:transparent !important; color:var(--ink-60) !important; } .premium-theme .betterdocs-toc, .premium-theme .betterdocs-entry-toc{ background:var(--bg-elev) !important; background-image:var(--grad-brand-soft) !important; border:1px solid var(--line-2) !important; border-radius:var(--r-lg) !important; box-shadow:var(--shadow-sm) !important; } .premium-theme .betterdocs-toc-title, .premium-theme .betterdocs-entry-toc-title{ color:var(--ink) !important; font-weight:700 !important; } .premium-theme .betterdocs-toc a, .premium-theme #betterdocs-table-of-contents a, .premium-theme .betterdocs-entry-toc a, .premium-theme .betterdocs-toc li{ color:var(--ink-80) !important; } .premium-theme .betterdocs-toc a:hover, .premium-theme .betterdocs-entry-toc a:hover{ color:var(--periwinkle) !important; } .premium-theme .betterdocs-toc li::marker{ color:var(--ink-40) !important; } /* heading anchor permalink (# next to headings) — subtle */ .premium-theme .betterdocs-entry-content .betterdocs-anchor, .premium-theme .betterdocs-entry-content h2 a[href^="#"]{ color:var(--ink-30) !important; } .premium-theme .betterdocs-content h1, .premium-theme .betterdocs-content h2, .premium-theme .betterdocs-content h3, .premium-theme .betterdocs-content h4{ color:var(--ink) !important; } /* generic white-card cleanup inside docs main */ .premium-theme .betterdocs-articles-wrapper, .premium-theme .betterdocs-single-wrapper{ background:transparent !important; } /* ============================================================================ ATMOSPHERE — non-flat background (matches app.noem.ai) Fixed glow layer behind content; sections slightly translucent so it bleeds. ============================================================================ */ body.premium-theme{ background-color:var(--bg-deep) !important; } body.premium-theme::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background:var(--bg-atmosphere); } body.premium-theme .page-wrapper, body.premium-theme .doc{ position:relative; z-index:1; } /* gradient-text utility now also offers the signature indigo->magenta->gold */ .grad-text--signature{ background:linear-gradient(100deg,#A5AFF6,#C850C0 55%,#FFCC70); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } /* ============================================================================ TYPOGRAPHY REFINEMENT — premium weight contrast + Inter optical features Hero = heavy & tight; section heads = semibold; body = regular. Weight CONTRAST. ============================================================================ */ .premium-theme{ font-optical-sizing:auto; font-feature-settings:"cv11" 1, "ss01" 1, "cv05" 1; } /* section headings: semibold + tight (sleeker than 700) */ .premium-theme h2,.premium-theme h3,.premium-theme h4,.premium-theme h5,.premium-theme h6{ font-weight:600 !important; letter-spacing:-0.022em; } /* hero / display: LIGHT + very tight = confidence, not shout (luxury display). */ .premium-theme .ns-display{ font-weight:500 !important; letter-spacing:-0.038em; } .premium-theme h1{ font-weight:600 !important; letter-spacing:-0.03em; } /* body & lead: regular, never bold; lead a touch lighter for elegance */ .premium-theme .ns-lead{ font-weight:400; } .premium-theme .ns-eyebrow{ font-weight:500; } /* gradient-background buttons ALWAYS have white text (incl. inner spans/icons) */ .ns-btn--primary, .ns-btn--primary *{ color:#fff !important; } /* ============================================================================ CAROUSEL — .ns-carousel : scroll-snap track, peeking next slide, glass cards, gradient-bordered, with prev/next controls + dots. No JS framework required; motion.js wires the arrow/dot buttons. ============================================================================ */ .ns-carousel{ position:relative; } .ns-carousel__track{ display:flex; align-items:stretch; gap:var(--space-5); overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:8px 4px 30px; -webkit-overflow-scrolling:touch; /* bottom pad = room for card shadow (overflow-y becomes auto) */ scrollbar-width:none; } .ns-carousel__track::-webkit-scrollbar{ display:none; } .ns-carousel__slide{ scroll-snap-align:start; flex:0 0 clamp(280px, 68%, 460px); display:flex; /* flex so inner stretches to the tallest slide */ position:relative; border-radius:var(--r-lg); padding:1px; /* 1px = gradient border */ background:var(--grad-border); box-shadow:var(--shadow-md); } .ns-carousel__inner{ flex:1 1 auto; /* fill the (stretched) slide; NO height:100% — that collapsed content & clipped the card */ border-radius:calc(var(--r-lg) - 1px); padding:var(--space-6); background:var(--bg-glass); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur)); display:flex; flex-direction:column; gap:var(--space-4); } .ns-carousel__ctrls{ display:flex; align-items:center; justify-content:center; gap:var(--space-4); margin-top:var(--space-4); } .ns-carousel__btn{ width:44px; height:44px; border-radius:var(--r-pill); cursor:pointer; border:1px solid var(--line-3); background:var(--bg-elev); color:var(--ink); font-size:18px; display:grid; place-items:center; transition:transform var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast); } .ns-carousel__btn:hover{ transform:translateY(-1px); border-color:transparent; background:var(--grad-brand); color:#fff; } .ns-carousel__dots{ display:flex; gap:8px; align-items:center; } .ns-carousel__dot{ width:8px; height:8px; border-radius:99px; background:var(--line-3); border:0; padding:0; cursor:pointer; transition:width var(--dur-base), background var(--dur-base); } .ns-carousel__dot.is-active{ width:26px; background:var(--grad-brand); } /* 8px dot + 16px gap = 24px center-to-center, meeting WCAG 2.5.8 touch-target spacing */ .premium-main .ns-carousel__dots{ gap:16px; } /* ============================================================================ CHAOS → ORDER — signature scroll storytelling. Items start scattered & rotated; as the section scrolls through view, motion.js ramps --p 0->1 and each item slides/rotates into a clean checklist; checks flip to green at the end. Per-item scatter set inline via --sx/--sy/--rot. Scroll-driven (no compositor dependency), reduced-motion safe (--p forced to 1). ============================================================================ */ .ns-chaos{ display:flex; flex-direction:column; gap:var(--space-4); --p:0; } .ns-chaos__item{ --sx:0px; --sy:0px; --rot:0deg; display:flex; align-items:center; gap:var(--space-4); padding:var(--space-4) var(--space-5); border-radius:var(--r-md); background:var(--bg-elev); border:1px solid var(--line-2); box-shadow:var(--shadow-sm); transform: translate(calc(var(--sx) * (1 - var(--p))), calc(var(--sy) * (1 - var(--p)))) rotate(calc(var(--rot) * (1 - var(--p)))); /* opacity floor kept high so the un-ramped state (below the fold, or if motion.js never runs) still meets WCAG contrast and is never an invisible-text a11y fail */ opacity:calc(.85 + .15 * var(--p)); transition:transform 120ms linear, opacity 120ms linear, border-color var(--dur-base); will-change:transform, opacity; } /* per-item ordered state — each row flips as it individually settles (staggered) */ .ns-chaos__item.is-ordered{ border-color:rgba(70,224,138,.4); } .ns-chaos__check{ flex:0 0 auto; width:26px; height:26px; border-radius:var(--r-pill); border:2px solid var(--line-3); display:grid; place-items:center; color:transparent; font-size:14px; font-weight:700; transition:background var(--dur-base), border-color var(--dur-base), color var(--dur-base); } .ns-chaos__item.is-ordered .ns-chaos__check{ background:var(--success); border-color:var(--success); color:#04210f; } .ns-chaos__label{ color:var(--ink-80); font-weight:500; } .ns-chaos__item.is-ordered .ns-chaos__label{ color:var(--ink); } @media (prefers-reduced-motion: reduce){ .ns-chaos{ --p:1 !important; } } /* ============================================================================ MEDIA CARDS — .ns-mediacard : image + body, with the image on the left / right / top / bottom, plus a standalone full-bleed cover variant. __media can be an (object-fit:cover) or any element (gradient block). ============================================================================ */ .ns-mediacard{ display:flex; overflow:hidden; background:var(--bg-elev); border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:var(--shadow-md); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base); } .ns-mediacard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--line-3); } .ns-mediacard__media{ display:block; flex:0 0 42%; min-height:150px; object-fit:cover; width:100%; height:100%; background:var(--grad-brand-soft); /* placeholder fill when no */ } .ns-mediacard__body{ padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-3); justify-content:center; } .ns-mediacard__body h4{ margin:0; } .ns-mediacard__body p{ margin:0; color:var(--ink-60); } /* placement */ .ns-mediacard--left{ flex-direction:row; } .ns-mediacard--right{ flex-direction:row-reverse; } .ns-mediacard--top{ flex-direction:column; } .ns-mediacard--bottom{ flex-direction:column-reverse; } .ns-mediacard--top .ns-mediacard__media, .ns-mediacard--bottom .ns-mediacard__media{ flex:0 0 auto; height:170px; } /* standalone: one full-bleed image with text scrim at the bottom */ .ns-mediacard--cover{ position:relative; min-height:240px; align-items:flex-end; } .ns-mediacard--cover .ns-mediacard__media{ position:absolute; inset:0; flex:none; height:100%; } .ns-mediacard--cover .ns-mediacard__body{ position:relative; z-index:1; width:100%; background:linear-gradient(to top, rgba(7,8,12,.92) 12%, rgba(7,8,12,.55) 55%, transparent); } /* responsive: side-by-side cards stack their image on top on small screens */ @media (max-width:640px){ .ns-mediacard--left, .ns-mediacard--right{ flex-direction:column; } .ns-mediacard--left .ns-mediacard__media, .ns-mediacard--right .ns-mediacard__media{ flex:0 0 auto; height:170px; } } /* ============================================================================ REPORT CARD — .sent-hero__report : a self-framed inline-SVG "report" mock (its own card, shadow & gradients live inside the SVG). Reusable on any premium page (sentiment hero, home sentiment showcase, …). Adds only the float-on-hover lift and the chart-line draw-in on scroll reveal. ============================================================================ */ .premium-main .sent-hero__report{ position:relative; z-index:1; margin:0; } .premium-main .sent-hero__report svg{ width:100%; height:auto; display:block; transition:transform var(--dur-slow) var(--ease-out); } .premium-main .sent-hero__report:hover svg{ transform:translateY(-6px); } .premium-main .sent-hero__report .hero-line{ stroke-dasharray:900; stroke-dashoffset:900; } .premium-main .is-visible .sent-hero__report .hero-line{ animation:sent-hero-draw 1.6s var(--ease-out) .35s forwards; } @keyframes sent-hero-draw{ to{ stroke-dashoffset:0; } } @media (prefers-reduced-motion:reduce){ .premium-main .sent-hero__report:hover svg{ transform:none; } .premium-main .sent-hero__report .hero-line{ stroke-dashoffset:0; animation:none; } } /* media card hosting a report card: keep the report's aspect (no stretch/crop), centre it in the panel and let the leftover area blend into the card so there is no awkward empty gradient band. */ .premium-main .ns-mediacard--report{ align-items:center; } .premium-main .ns-mediacard--report .ns-mediacard__media{ flex-basis:46%; background:transparent; align-self:center; display:flex; align-items:center; justify-content:center; padding:clamp(10px,1.6vw,22px); } .premium-main .ns-mediacard--report .ns-mediacard__media .sent-hero__report{ width:100%; } @media (max-width:640px){ .premium-main .ns-mediacard--report .ns-mediacard__media{ flex-basis:auto; height:auto; } } /* ============================================================================ NATIVE MIGRATION — pages rebuilt off Elementor render inside
. Scoped to .premium-main so it never collides with brand-guide component usage. ========================================================================== */ .premium-main{ overflow-x:clip; } .premium-main .ns-hero{ text-align:left; } .premium-main .ns-hero__grid{ display:grid; gap:var(--space-7); align-items:center; } @media (min-width:900px){ .premium-main .ns-hero__grid{ grid-template-columns:1.05fr .95fr; } } .premium-main .ns-hero__copy{ position:relative; z-index:1; } .premium-main .ns-hero__cta{ margin-top:var(--space-6); } .premium-main .ns-hero__media{ margin-top:0; } .premium-main .ns-hero__media img{ width:100%; display:block; border-radius:var(--r-xl); border:1px solid var(--line-2); box-shadow:var(--shadow-lg); transition:transform 1.2s var(--ease-out); } .premium-main .ns-hero__media:hover img{ transform:scale(1.045); } @media (prefers-reduced-motion:reduce){ .premium-main .ns-hero__media:hover img{ transform:none; } } /* hero brand eyebrow with pulsing status dot */ .premium-main .ns-hero__eyebrow{ margin-bottom:var(--space-4); } .ns-eyebrow__dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--violet); box-shadow:0 0 0 0 rgba(164,92,224,.55); animation:ns-dot-pulse 2.4s ease-out infinite; } @keyframes ns-dot-pulse{ 0%{ box-shadow:0 0 0 0 rgba(164,92,224,.5); } 70%{ box-shadow:0 0 0 9px rgba(164,92,224,0); } 100%{ box-shadow:0 0 0 0 rgba(164,92,224,0); } } @media (prefers-reduced-motion:reduce){ .ns-eyebrow__dot{ animation:none; } } .premium-main .ns-section__title{ font-size:var(--fs-h2); font-weight:700; letter-spacing:-0.02em; line-height:var(--lh-snug); color:var(--ink); margin-bottom:var(--space-7); max-width:28ch; } /* centered section head (intro copy that sits above a grid) */ .premium-main .ns-section--head{ padding-bottom:var(--space-6); } .premium-main .ns-section__head{ max-width:var(--container-narrow); margin:0 auto var(--space-8); text-align:center; } .premium-main .ns-section__head .ns-eyebrow{ justify-content:center; margin-bottom:var(--space-3); } .premium-main .ns-section__head .ns-section__title{ max-width:22ch; margin-inline:auto; margin-bottom:var(--space-4); } .premium-main .ns-section__head .ns-lead{ max-width:60ch; margin-inline:auto; color:var(--ink-60); } .premium-main .ns-subhead{ font-size:var(--fs-h3); color:var(--ink); margin:var(--space-7) 0 var(--space-3); } /* bento of generated .ns-card tiles → balanced grid (no orphan rows) */ .premium-main .ns-bento{ grid-template-columns:repeat(4,1fr); gap:var(--space-5); } @media (max-width:1024px){ .premium-main .ns-bento{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .premium-main .ns-bento{ grid-template-columns:1fr; } } /* Base .ns-bento__tile carries grid-column:span 4 (a 12-col layout). The premium-main bento is only 4 cols wide, so span 4 = the whole row → tiles stack as full-width bars. Reset .ns-bento__tile to one track each so a plain .ns-bento (the 4-up feature wall on Product pages) lays out correctly; the width modifiers map onto the 4-col grid. .pr-mosaic sets its own spans. */ .premium-main .ns-bento > .ns-bento__tile{ grid-column:auto; } .premium-main .ns-bento > .ns-bento__tile--wide{ grid-column:span 2; } .premium-main .ns-bento > .ns-bento__tile--full{ grid-column:1 / -1; } @media (max-width:560px){ .premium-main .ns-bento > .ns-bento__tile--wide, .premium-main .ns-bento > .ns-bento__tile--full{ grid-column:auto; } } .premium-main .ns-card{ position:relative; display:flex; flex-direction:column; gap:var(--space-4); padding:var(--space-6); transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base); overflow:hidden; } .premium-main .ns-card::after{ content:""; position:absolute; inset:0; background:var(--grad-brand-soft); opacity:0; transition:opacity var(--dur-base); pointer-events:none; } .premium-main .ns-card:hover{ transform:translateY(-4px); border-color:rgba(164,92,224,.45); box-shadow:var(--shadow-lg); } .premium-main .ns-card:hover::after{ opacity:1; } .premium-main .ns-card > *{ position:relative; z-index:1; } /* unify the mismatched PNG glyphs into one cohesive branded badge */ .premium-main .ns-card__icon{ width:30px; height:30px; object-fit:contain; padding:13px; box-sizing:content-box; background:rgba(164,92,224,.10); border:1px solid var(--line-2); border-radius:var(--r-md); } .premium-main .ns-card__title{ font-size:var(--fs-h4); font-weight:600; color:var(--ink); line-height:var(--lh-snug); } .premium-main .ns-card__body{ color:var(--ink-60); line-height:var(--lh-normal); } .premium-main .ns-card__body p:last-child{ margin-bottom:0; } /* use-cases chaos→order: center the list, stack solution + muted challenge per item */ .premium-main .ns-chaos{ max-width:680px; margin-inline:auto; } .premium-main .ns-chaos .ns-chaos__label{ display:flex; flex-direction:column; gap:3px; } .premium-main .ns-chaos__solution{ color:var(--ink); font-weight:600; line-height:var(--lh-snug); } .premium-main .ns-chaos.is-ordered .ns-chaos__solution{ color:var(--ink); } .premium-main .ns-chaos__challenge{ color:var(--ink-60); font-weight:400; font-size:var(--fs-small); line-height:var(--lh-normal); } /* core-powers cards: numbered mono badge for parity with icon cards */ .premium-main .ns-bento--powers{ counter-reset:power; } .premium-main .ns-bento--powers .ns-card::before{ counter-increment:power; content:"0" counter(power); display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; z-index:1; font-family:var(--font-mono); font-size:15px; font-weight:700; letter-spacing:.04em; color:var(--violet); background:rgba(164,92,224,.10); border:1px solid var(--line-2); border-radius:var(--r-md); } /* use-cases comparison table → premium framed panel */ .premium-main .ns-table-wrap{ overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--line-2); box-shadow:var(--shadow-md); background:var(--bg-elev); -webkit-overflow-scrolling:touch; } .premium-main .ns-table-wrap .ns-table{ border:0; border-radius:0; box-shadow:none; background:transparent; min-width:580px; } .premium-main .ns-table th{ font-size:var(--fs-small); text-transform:uppercase; letter-spacing:.05em; } .premium-main .ns-table--usecases th:last-child{ color:var(--ink); background-image:var(--grad-brand-soft); } .premium-main .ns-table tbody tr{ transition:background var(--dur-fast); } .premium-main .ns-table tbody tr:hover{ background:rgba(164,92,224,.05); } .premium-main .ns-table td strong{ color:var(--ink); } /* ============================================================================ CANONICAL FAQ / ACCORDION — the ONE pattern every page must use. Native
/ (zero JS, accessible, SEO-friendly). Markup:
Question?

Answer.

… (repeat)
The shared name="faq" makes it a true accordion (one open at a time). Global (not scoped to .premium-main) so the brand guide + every page match. ========================================================================== */ .ns-accordion{ max-width:780px; margin-inline:auto; } details.ns-accordion__item{ background:var(--bg-elev); border:1px solid var(--line-2); border-radius:var(--r-md); margin-bottom:var(--space-3); overflow:hidden; padding:0; transition:border-color var(--dur-base), box-shadow var(--dur-base), background-color var(--dur-base); } details.ns-accordion__item:hover{ border-color:var(--line-3); } details.ns-accordion__item[open]{ border-color:rgba(164,92,224,.45); background-image:var(--grad-brand-soft); box-shadow:var(--shadow-md); } details.ns-accordion__item > summary{ list-style:none; cursor:pointer; padding:var(--space-5); font-family:var(--font-sans); font-weight:var(--fw-semibold); font-size:var(--fs-body); color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); transition:color var(--dur-fast); } details.ns-accordion__item > summary:hover{ color:var(--periwinkle); } details.ns-accordion__item > summary::-webkit-details-marker{ display:none; } details.ns-accordion__item > summary::after{ content:"+"; color:var(--violet); font-size:1.4em; line-height:1; flex:0 0 auto; transition:transform var(--dur-base) var(--ease-out); } details.ns-accordion__item[open] > summary::after{ transform:rotate(45deg); } .ns-accordion__panel{ padding:0 var(--space-5) var(--space-5); color:var(--ink-60); line-height:var(--lh-relaxed); } .ns-accordion__panel p:last-child{ margin-bottom:0; } /* Open/close height animation is driven by motion.js (WAAPI on .ns-accordion__panel): on toggle it tweens the panel height between 0 and its natural height. Native
stays the no-JS / SEO / a11y fallback (instant toggle). The CSS-only ::details-content + interpolate-size route proved unreliable in-engine. */ .ns-accordion__panel{ overflow:hidden; } /* reduced-motion: no icon spin (motion.js also skips the height tween) */ @media (prefers-reduced-motion: reduce){ details.ns-accordion__item > summary::after{ transition:none; } } .premium-main .ns-richtext{ color:var(--ink-80); line-height:var(--lh-relaxed); max-width:74ch; } .premium-main .ns-richtext p{ margin-bottom:var(--space-4); } .premium-main .ns-richtext p:last-child{ margin-bottom:0; } .premium-main img{ max-width:100%; height:auto; } /* native-migration extras: list, stat, cta block, video, quote, price, embed */ .premium-main .ns-btnrow{ margin-top:var(--space-5); } .premium-main .ns-list{ list-style:none; padding:0; margin:var(--space-4) 0; display:grid; gap:var(--space-3); max-width:74ch; } .premium-main .ns-list li{ position:relative; padding-left:1.9em; color:var(--ink-80); line-height:var(--lh-normal); } .premium-main .ns-list li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--success); font-weight:700; } .premium-main .ns-list a{ color:var(--periwinkle); } .premium-main .ns-figure{ margin:var(--space-5) 0; } .premium-main .ns-figure img{ width:100%; border-radius:var(--r-lg); border:1px solid var(--line-2); } /* native-page stat band: 4-up grid in a glass panel (reusable across native pages) */ .premium-main .ns-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; text-align:center; background:var(--bg-glass); background-image:var(--grad-brand-soft); border:1px solid var(--line-2); border-radius:var(--r-xl); padding:clamp(28px,3vw,44px) var(--space-4); box-shadow:var(--shadow-md); } .premium-main .ns-stats > .ns-stat + .ns-stat{ border-left:1px solid var(--line-2); } @media (max-width:760px){ .premium-main .ns-stats{ grid-template-columns:repeat(2,1fr); gap:var(--space-6); } .premium-main .ns-stats > .ns-stat + .ns-stat{ border-left:0; } } .premium-main .ns-stat{ display:flex; flex-direction:column; align-items:center; gap:var(--space-2); padding:0 var(--space-3); } .premium-main .ns-stat__num{ font-size:clamp(36px,5vw,56px); font-weight:800; line-height:1; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .premium-main .ns-stat__label{ color:var(--ink-60); font-size:var(--fs-small); max-width:20ch; } /* native-page 3-up grid (testimonials / equal benefit cards), reusable */ .premium-main .ns-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); } @media (max-width:900px){ .premium-main .ns-grid3{ grid-template-columns:1fr; } } .premium-main .ns-cta--block{ position:relative; overflow:hidden; background:var(--bg-glass); border:1px solid var(--line-2); border-radius:var(--r-xl); padding:clamp(40px,5vw,72px) clamp(28px,4vw,56px); text-align:center; background-image:var(--grad-brand-soft); } .premium-main .ns-cta--block::before{ content:""; position:absolute; left:50%; top:-50%; width:65%; height:140%; transform:translateX(-50%); background:var(--glow-brand); filter:blur(72px); opacity:.5; pointer-events:none; } .premium-main .ns-cta--block > *{ position:relative; z-index:1; } .premium-main .ns-cta--block .ns-eyebrow{ justify-content:center; margin-bottom:var(--space-4); } .premium-main .ns-cta__title{ font-size:var(--fs-h2); font-weight:700; color:var(--ink); margin-bottom:var(--space-3); } .premium-main .ns-cta__text{ color:var(--ink-70,var(--ink-60)); max-width:56ch; margin:0 auto var(--space-6); } .premium-main .ns-cta--block .ns-btnrow{ display:flex; justify-content:center; margin-top:0; } .premium-main .ns-video{ position:relative; aspect-ratio:16/9; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line-2); box-shadow:var(--shadow-lg); margin:var(--space-5) 0; } .premium-main .ns-video iframe,.premium-main .ns-video video{ position:absolute; inset:0; width:100%; height:100%; border:0; } .premium-main .ns-quote{ background:var(--bg-elev); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:var(--space-6); margin:0; } .premium-main .ns-quote blockquote{ margin:0; color:var(--ink-80); font-size:var(--fs-lead); line-height:var(--lh-normal); } .premium-main .ns-quote figcaption{ margin-top:var(--space-4); color:var(--ink-40); font-size:var(--fs-small); } .premium-main .ns-price{ text-align:center; } .premium-main .ns-price__sub{ color:var(--ink-60); } .premium-main .ns-price__amount{ font-size:var(--fs-h1); font-weight:800; color:var(--ink); margin:var(--space-4) 0; } .premium-main .ns-price__per{ font-size:var(--fs-small); font-weight:400; color:var(--ink-40); } .premium-main .ns-price .ns-list{ text-align:left; margin-inline:auto; display:inline-grid; } .premium-main .ns-embed{ margin:var(--space-5) 0; } .premium-main .ns-embed img{ max-width:100%; height:auto; } .premium-main .ns-hero__fine{ color:var(--ink-40); font-size:var(--fs-small); margin-top:var(--space-3); } .premium-main .ns-step__num{ width:44px; height:44px; border-radius:var(--r-pill); display:grid; place-items:center; font-size:18px; font-weight:800; color:#fff; background:var(--grad-brand); margin-bottom:var(--space-3); flex-shrink:0; } .premium-main .ns-bento--steps{ grid-template-columns:repeat(3,1fr); } .premium-main .ns-bento--steps > .ns-bento__tile{ grid-column:auto; } @media (max-width:760px){ .premium-main .ns-bento--steps{ grid-template-columns:1fr; } } .premium-main .ns-pills{ display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:center; margin:var(--space-5) 0; } .premium-main .ns-pill{ display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); background:var(--bg-elev); border:1px solid var(--line-2); border-radius:var(--r-pill); font-size:var(--fs-small); font-weight:500; color:var(--ink-60); transition:border-color var(--dur-fast),color var(--dur-fast); } .premium-main .ns-pill:hover{ border-color:var(--indigo); color:var(--ink); } .premium-main .ns-pill img{ width:20px; height:20px; object-fit:contain; } /* click-to-load video facade: no third-party iframe (or cookie) until the visitor clicks. Reusable across native pages; sits inside .ns-video's 16/9 box. */ .premium-main .ns-videofacade{ position:absolute; inset:0; width:100%; height:100%; border:0; cursor:pointer; display:flex; align-items:center; justify-content:center; background-image:var(--grad-brand-soft); background-color:var(--bg-elev); } .premium-main .ns-videofacade__play{ width:72px; height:72px; border-radius:var(--r-pill); display:flex; align-items:center; justify-content:center; background:var(--grad-brand); color:#fff; font-size:26px; padding-left:5px; box-shadow:var(--shadow-glow); transition:transform var(--dur-base) var(--ease-out); } .premium-main .ns-videofacade:hover .ns-videofacade__play, .premium-main .ns-videofacade:focus-visible .ns-videofacade__play{ transform:scale(1.08); } /* ============================================================================ HOME (template-home.php) — premium, brand-guide-aligned. Overrides the generic .premium-main assumptions where the hand-built home differs. ========================================================================== */ .premium-home .ns-hero{ text-align:center; } .premium-home .ns-hero__inner{ max-width:920px; margin-inline:auto; } .premium-home .ns-hero__actions{ display:flex; gap:var(--space-3); justify-content:center; flex-wrap:wrap; margin-top:var(--space-6); } .premium-home .ns-hero__fine{ margin-top:var(--space-4); color:var(--ink-40); font-size:var(--fs-small); } .premium-home .ns-hero__media{ margin:var(--space-8) auto 0; max-width:900px; } .premium-home .ns-section__head{ max-width:var(--container-narrow); margin:0 auto var(--space-8); text-align:center; } .premium-home .ns-section__title--center{ text-align:center; max-width:none; margin-inline:auto; } .premium-home .ns-section__head .ns-lead{ margin-top:var(--space-4); } /* stat band */ .premium-home .ns-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-6); text-align:center; } @media (max-width:760px){ .premium-home .ns-stats{ grid-template-columns:repeat(2,1fr); } } .premium-home .ns-stat{ align-items:center; gap:var(--space-2); } .premium-home .ns-stat__num{ font-size:clamp(40px,5vw,64px); font-weight:800; line-height:1; } .premium-home .ns-stat__label{ font-size:var(--fs-small); color:var(--ink-60); max-width:18ch; } /* domain preview cta */ .premium-home .ns-botcta{ background:var(--bg-glass); background-image:var(--grad-brand-soft); border:1px solid var(--line-2); border-radius:var(--r-xl); box-shadow:var(--shadow-md); padding:clamp(28px,4vw,48px); text-align:center; } .premium-home .ns-botcta__title{ font-size:var(--fs-h3); font-weight:600; color:var(--ink); margin:var(--space-3) 0 var(--space-5); letter-spacing:var(--tracking-tight); } .premium-home .ns-botcta__form{ display:flex; gap:var(--space-3); max-width:560px; margin:0 auto; } @media (max-width:560px){ .premium-home .ns-botcta__form{ flex-direction:column; } } .premium-home .ns-botcta__input{ flex:1 1 auto; height:56px; padding:0 var(--space-5); background:var(--bg-elev); border:1px solid var(--line-2); border-radius:var(--r-md); color:var(--ink); font-size:var(--fs-body); } .premium-home .ns-botcta__input::placeholder{ color:var(--ink-40); } .premium-home .ns-botcta__input:focus{ outline:none; border-color:var(--indigo); box-shadow:0 0 0 3px rgba(77,97,254,.25); } .premium-home .ns-botcta__btn{ height:56px; white-space:nowrap; } .premium-home .ns-botcta__fine{ margin-top:var(--space-4); color:var(--ink-60); font-size:var(--fs-small); } .premium-home .ns-botcta__fine strong{ color:var(--periwinkle); } /* testimonial avatars */ .premium-home .ns-quote{ display:flex; flex-direction:column; gap:var(--space-5); } .premium-home .ns-quote__text{ color:var(--ink-80); font-size:var(--fs-body); line-height:var(--lh-normal); margin:0; } .premium-home .ns-quote__author{ display:flex; align-items:center; gap:var(--space-3); margin-top:auto; } .premium-home .ns-quote__avatar{ width:46px; height:46px; border-radius:var(--r-pill); object-fit:cover; border:1px solid var(--line-2); } .premium-home .ns-quote__name{ display:block; color:var(--ink); font-weight:600; font-size:var(--fs-small); } .premium-home .ns-quote__role{ display:block; color:var(--ink-40); font-size:var(--fs-small); } /* featured video testimonial spotlight (Jon Benson) */ .premium-home .ns-spotlight{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--space-7); align-items:center; margin-bottom:var(--space-8); } @media (max-width:860px){ .premium-home .ns-spotlight{ grid-template-columns:1fr; gap:var(--space-6); } } .premium-home .ns-spotlight__media{ position:relative; display:block; width:100%; aspect-ratio:16/9; padding:0; border:1px solid var(--line-2); border-radius:var(--r-xl); overflow:hidden; cursor:pointer; background:#000; box-shadow:var(--shadow-lg); } .premium-home .ns-spotlight__poster{ width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--dur-slow) var(--ease-out); } .premium-home .ns-spotlight__media:hover .ns-spotlight__poster{ transform:scale(1.04); } .premium-home .ns-spotlight__play{ position:absolute; inset:0; margin:auto; width:72px; height:72px; border-radius:50%; display:grid; place-items:center; background:var(--grad-brand); color:#fff; box-shadow:0 12px 34px -8px rgba(164,92,224,.7); transition:transform var(--dur-base) var(--ease-spring); } .premium-home .ns-spotlight__media:hover .ns-spotlight__play{ transform:scale(1.08); } .premium-home .ns-spotlight__play svg{ width:30px; height:30px; margin-left:3px; } .premium-home .ns-spotlight__iframe{ width:100%; aspect-ratio:16/9; border:1px solid var(--line-2); border-radius:var(--r-xl); display:block; } .premium-home .ns-spotlight__quote{ margin:0; font-size:var(--fs-lead); line-height:var(--lh-snug,1.35); color:var(--ink); font-weight:var(--fw-medium); } .premium-home .ns-spotlight__quote strong{ color:var(--periwinkle); font-weight:var(--fw-semibold); } .premium-home .ns-spotlight__author{ margin-top:var(--space-5); } .premium-home .ns-spotlight__name{ display:block; color:var(--ink); font-weight:var(--fw-semibold); } .premium-home .ns-spotlight__role{ display:block; color:var(--ink-40); font-size:var(--fs-small); } .premium-home .ns-spotlight__stats{ list-style:none; margin:var(--space-5) 0 0; padding:var(--space-5) 0 0; border-top:1px solid var(--line-2); display:flex; flex-direction:column; gap:var(--space-3); } .premium-home .ns-spotlight__stats li{ color:var(--ink-60); font-size:var(--fs-small); } .premium-home .ns-spotlight__stats strong{ color:var(--ink); font-weight:var(--fw-semibold); margin-right:var(--space-2); } /* onboarding step number */ .premium-home .ns-step__num{ width:44px; height:44px; border-radius:var(--r-pill); display:grid; place-items:center; font-weight:800; color:#fff; background:var(--grad-brand); margin-bottom:var(--space-2); } /* platform video — narrower, centered */ .premium-home .ns-video--wide{ max-width:920px; margin-inline:auto; } /* cta band actions */ .premium-home .ns-cta__actions{ display:flex; gap:var(--space-3); justify-content:center; flex-wrap:wrap; margin-top:var(--space-6); } .premium-home .ns-cta__inner .ns-eyebrow{ margin-bottom:var(--space-3); } /* mediacard body padding (ensure copy breathes) */ .premium-home .ns-mediacard__body{ padding:var(--space-6); } /* home — verbatim rebuild extras */ .premium-home .ns-feat__img{ width:100%; max-width:120px; height:auto; border-radius:var(--r-md); margin-bottom:var(--space-4); } .premium-home .ns-promo .ns-section__title{ max-width:22ch; } .premium-home .ns-botcta__anim{ margin-top:var(--space-5); font-size:var(--fs-h4); font-weight:600; color:var(--ink); } .premium-home .ns-gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5); } @media (max-width:760px){ .premium-home .ns-gallery{ grid-template-columns:1fr; } } .premium-home .ns-gallery__item{ margin:0; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line-2); box-shadow:var(--shadow-md); background:var(--bg-elev); } .premium-home .ns-gallery__item img{ width:100%; height:auto; display:block; } /* embedded verbatim HTML blocks (compare table / reviews masonry / chatbot embed) keep their own self-contained styling; we just center + frame them on the dark page. */ .premium-home .ns-compare, .premium-home .ns-reviews, .premium-home .ns-embedwrap{ border-radius:var(--r-xl); overflow:hidden; } .premium-home .ns-compare .compare-wrap{ margin:0 auto; } .premium-home .ns-embedwrap{ max-width:760px; margin:0 auto; border:1px solid var(--line-2); box-shadow:var(--shadow-lg); } .premium-home .ns-reviews{ margin-top:var(--space-2); } .premium-home .ns-cta__actions{ display:flex; gap:var(--space-3); justify-content:center; flex-wrap:wrap; margin-top:var(--space-6); } /* home hero — two-column (copy left, real product video right), dark premium */ .premium-home .ns-hero--split{ text-align:left; } .premium-home .ns-hero--split .ns-hero__grid{ display:grid; gap:var(--space-7); align-items:center; } @media (min-width:900px){ .premium-home .ns-hero--split .ns-hero__grid{ grid-template-columns:1fr 1fr; } } .premium-home .ns-hero--split .ns-hero__copy{ position:relative; z-index:1; } .premium-home .ns-hero--split .ns-display{ margin-bottom:var(--space-5); } /* hero headline: force a synthesized italic on emphasized words (Inter ships upright-only here) */ .premium-home .ns-hero--split .ns-display em{ font-style:italic; font-synthesis:style; } .premium-home .ns-hero--split .ns-hero__actions{ justify-content:flex-start; align-items:center; } .premium-home .ns-hero__nocc{ color:var(--ink-40); font-size:var(--fs-small); } .premium-home .ns-hero__col{ margin:0; } .premium-home .ns-hero__media{ margin:0; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line-2); box-shadow:var(--shadow-lg); background:#000; } .premium-home .ns-hero__video{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; } /* portrait hero: a real poster paints as LCP instantly; the video layers on top and fades in only once it actually plays (kept off the critical path) */ .premium-home .ns-hero__media--portrait{ position:relative; max-width:min(380px,100%); margin-inline:auto; aspect-ratio:9/16; max-height:min(78vh,680px); } .premium-home .ns-hero__media--portrait .ns-hero__poster, .premium-home .ns-hero__media--portrait .ns-hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .premium-home .ns-hero__media--portrait .ns-hero__poster{ z-index:0; } .premium-home .ns-hero__media--portrait .ns-hero__video{ z-index:1; opacity:0; transition:opacity var(--dur-base) var(--ease-out); } .premium-home .ns-hero__media--portrait .ns-hero__video.is-playing{ opacity:1; } .premium-home .ns-hero__col .ns-hero__fine{ margin-top:var(--space-3); color:var(--ink-40); font-size:var(--fs-small); text-align:center; } .premium-home .ns-video--wide video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; } /* domain-preview CTA — approved design: left-aligned, pill input bar w/ inset Generate */ .premium-home .ns-botcta{ text-align:left; padding:clamp(28px,4vw,44px); border-radius:var(--r-xl); background:var(--bg-glass); background-image:var(--grad-brand-soft); border:1px solid var(--line-2); box-shadow:var(--shadow-md); } .premium-home .ns-botcta__title{ font-size:var(--fs-h2); font-weight:800; letter-spacing:var(--tracking-tight); color:var(--ink); margin:0 0 var(--space-2); } .premium-home .ns-botcta__sub{ color:var(--ink-40); font-size:var(--fs-body); margin:0 0 var(--space-5); } .premium-home .ns-botcta__form{ display:flex; align-items:center; gap:var(--space-2); max-width:none; margin:0; background:var(--bg-deep); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:8px; transition:border-color var(--dur-base), box-shadow var(--dur-base); } .premium-home .ns-botcta__form:focus-within{ border-color:var(--indigo); box-shadow:0 0 0 3px rgba(77,97,254,.2); } .premium-home .ns-botcta__input{ flex:1 1 auto; height:52px; padding:0 var(--space-4); background:transparent; border:none; color:var(--ink); font-size:var(--fs-body); } .premium-home .ns-botcta__input:focus{ outline:none; box-shadow:none; border:none; } .premium-home .ns-botcta__input::placeholder{ color:var(--ink-40); } .premium-home .ns-botcta__btn{ flex:0 0 auto; height:52px; padding:0 var(--space-6); border:none; border-radius:var(--r-md); background:var(--grad-brand); color:#fff; font-weight:var(--fw-semibold); font-size:var(--fs-body); display:inline-flex; align-items:center; gap:var(--space-2); cursor:pointer; box-shadow:var(--shadow-glow); transition:transform var(--dur-base) var(--ease-spring), filter var(--dur-base); } .premium-home .ns-botcta__btn:hover{ transform:translateY(-1px); filter:brightness(1.06); } .premium-home .ns-botcta__fine{ margin:var(--space-4) 0 0; color:var(--ink-40); font-size:var(--fs-small); } .premium-home .ns-botcta__fine strong{ color:var(--periwinkle); font-weight:var(--fw-semibold); } /* hero nudge: turn the dead "free" line into a directional cue back to the input */ .premium-home .ns-hero__nudge{ display:inline-flex; align-items:center; gap:var(--space-2); color:var(--ink-60); font-weight:var(--fw-medium); } .premium-home .ns-hero__nudge strong{ color:var(--periwinkle); font-weight:var(--fw-semibold); } .premium-home .ns-hero__nudge-arrow{ color:var(--periwinkle); font-weight:var(--fw-semibold); animation:ns-nudge 1.8s var(--ease-in-out) infinite; } @keyframes ns-nudge{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } } @media (prefers-reduced-motion:reduce){ .premium-home .ns-hero__nudge-arrow{ animation:none; } } .premium-home .ns-botcta__link{ display:inline-block; margin-top:var(--space-4); color:var(--periwinkle); font-weight:var(--fw-semibold); font-size:var(--fs-body); text-decoration:none; } .premium-home .ns-botcta__link:hover{ color:var(--violet); } @media (max-width:560px){ .premium-home .ns-botcta__form{ flex-direction:column; align-items:stretch; } .premium-home .ns-botcta__btn{ width:100%; justify-content:center; } } /* merged hero: preview tool is the single CTA, guarantee is a supporting strip under it */ .premium-home .ns-hero__form{ margin-top:var(--space-6); } /* money-back guarantee strip — lives near pricing, centered, counters the cost objection */ .premium-home .ns-guarantee{ display:flex; align-items:center; gap:var(--space-3); max-width:680px; margin:var(--space-6) auto 0; padding:var(--space-4) var(--space-5); border:1px solid var(--line-2); border-radius:var(--r-md); background:var(--bg-elev); color:var(--ink-60); font-size:var(--fs-small); line-height:1.45; text-decoration:none; transition:border-color var(--dur-base) var(--ease-out); } .premium-home .ns-guarantee:hover{ border-color:var(--line-3); } .premium-home .ns-guarantee strong{ color:var(--ink); font-weight:var(--fw-semibold); } .premium-home .ns-guarantee svg{ flex:0 0 auto; width:24px; height:24px; color:var(--gold); } .premium-home .ns-guarantee__arrow{ margin-left:auto; color:var(--periwinkle); font-weight:var(--fw-semibold); } .premium-home .ns-guarantee__fine{ max-width:680px; margin:var(--space-3) auto 0; text-align:center; color:var(--ink-40); font-size:var(--fs-small); } /* integrations section — intro left, then [map | pills] two-column (approved design) */ .premium-home .ns-int{ text-align:left; } .premium-home .ns-int__intro{ max-width:640px; margin-bottom:var(--space-8); } .premium-home .ns-int__intro .ns-section__title{ text-align:left; max-width:none; margin:0 0 var(--space-4); } .premium-home .ns-int__intro .ns-lead{ margin:0; } .premium-home .ns-int__main{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:var(--space-8); align-items:center; } @media (max-width:900px){ .premium-home .ns-int__main{ grid-template-columns:1fr; } } /* integration map placeholder card */ .premium-home .ns-intmap{ aspect-ratio:1/1; border-radius:var(--r-xl); border:1px solid var(--line-2); display:grid; place-items:center; overflow:hidden; position:relative; background: radial-gradient(60% 60% at 35% 30%, rgba(77,97,254,.22), transparent 60%), radial-gradient(50% 50% at 75% 78%, rgba(193,96,226,.20), transparent 60%), var(--bg-elev); } .premium-home .ns-intmap::before{ /* diagonal hairline texture */ content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(45deg, transparent 0 22px, rgba(255,255,255,.035) 22px 23px); } .premium-home .ns-intmap span{ position:relative; font-family:var(--font-mono); font-size:var(--fs-mono); color:var(--ink-40); letter-spacing:.04em; padding:0 var(--space-5); text-align:center; } /* tool pills */ .premium-home .ns-pills{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--space-3); align-content:center; } .premium-home .ns-pills li{ display:inline-flex; align-items:center; gap:var(--space-2); padding:10px 18px; background:var(--bg-elev); border:1px solid var(--line-2); border-radius:var(--r-pill); color:var(--ink-80); font-weight:var(--fw-medium); font-size:var(--fs-small); transition:border-color var(--dur-base), transform var(--dur-base); } .premium-home .ns-pills li:hover{ border-color:rgba(164,92,224,.5); transform:translateY(-2px); } .premium-home .ns-pill__dot{ width:8px; height:8px; border-radius:50%; background:var(--violet); box-shadow:0 0 8px rgba(164,92,224,.6); flex:0 0 auto; } /* promo band — dark separator using the --alt surface */ .premium-home .ns-promo{ background:var(--bg-base) !important; background-image:none !important; border-top:1px solid var(--line-1); border-bottom:1px solid var(--line-1); } /* hero headline container — no background/glow (flat on page) */ .premium-home .ns-hero--split{ background:transparent !important; background-image:none !important; } .premium-home .ns-hero--split::before{ display:none !important; } .premium-home .ns-hero--split .ns-hero__copy{ background:transparent !important; } /* integration map now holds the real integrations.png */ .premium-home .ns-intmap{ padding:var(--space-5); } .premium-home .ns-intmap img{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; display:block; } .premium-home .ns-intmap img{ border-radius:var(--r-md); box-shadow:var(--shadow-sm); } /* extra breathing room below the hero */ .premium-home .ns-hero--split{ padding-bottom:clamp(64px,40px + 5vw,112px); } /* icon badges inside the integration feature bento */ .premium-home .ns-bento__icon svg{ width:24px; height:24px; color:var(--periwinkle); } .premium-home .ns-bento--feat .ns-bento__tile{ background-image:var(--grad-brand-soft); } /* integration feature bento → clean 3-up (tiles must not span the legacy 12-col) */ .premium-home .ns-bento--feat{ grid-template-columns:repeat(3,1fr); } .premium-home .ns-bento--feat > .ns-bento__tile{ grid-column:auto; } @media (max-width:880px){ .premium-home .ns-bento--feat{ grid-template-columns:1fr; } } /* integration map — no card background, natural aspect ratio, rounded per brand guide */ .premium-home .ns-intmap{ aspect-ratio:auto !important; background:none !important; border:0 !important; padding:0 !important; box-shadow:none !important; display:block !important; overflow:visible !important; } .premium-home .ns-intmap::before{ display:none !important; } .premium-home .ns-intmap img{ position:static !important; width:100% !important; height:auto !important; object-fit:contain !important; border-radius:var(--r-xl) !important; box-shadow:var(--shadow-md) !important; } /* platform section — video left, role cards as a 2x2 bento right */ .premium-home .ns-platform{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-7); align-items:center; } @media (max-width:900px){ .premium-home .ns-platform{ grid-template-columns:1fr; } } .premium-home .ns-platform__video{ position:relative; aspect-ratio:1/1; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line-2); box-shadow:var(--shadow-lg); margin:0; } .premium-home .ns-platform__video video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; } .premium-home .ns-platform__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5); } .premium-home .ns-platform__grid > .ns-bento__tile{ grid-column:auto; } @media (max-width:520px){ .premium-home .ns-platform__grid{ grid-template-columns:1fr; } } /* platform roles → compact premium list beside the video */ .premium-home .ns-platform--list{ grid-template-columns:1fr 1fr; gap:var(--space-8); } @media (max-width:900px){ .premium-home .ns-platform--list{ grid-template-columns:1fr; } } .premium-home .ns-platform__aside{ display:flex; flex-direction:column; } .premium-home .ns-platform__aside .ns-section__title{ margin-top:var(--space-2); } .premium-home .ns-rolelist{ list-style:none; margin:var(--space-6) 0 0; padding:0; border-top:1px solid var(--line-2); } .premium-home .ns-role{ display:flex; align-items:center; gap:var(--space-4); padding:var(--space-4) 0; border-bottom:1px solid var(--line-2); } .premium-home .ns-role__icon{ flex:0 0 auto; display:grid; place-items:center; width:42px; height:42px; border-radius:var(--r-md); background-image:var(--grad-brand-soft); border:1px solid var(--line-2); } .premium-home .ns-role__icon svg{ width:20px; height:20px; color:var(--periwinkle); } .premium-home .ns-role__text{ font-size:var(--fs-small); color:var(--ink-60); line-height:1.5; } .premium-home .ns-role__text strong{ display:block; color:var(--ink); font-weight:var(--fw-semibold); font-size:var(--fs-body); line-height:1.3; margin-bottom:2px; } /* chatbot vs concierge contrast — two cards, muted vs brand-accented */ .premium-home .ns-versus{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5); align-items:stretch; } @media (max-width:760px){ .premium-home .ns-versus{ grid-template-columns:1fr; } } .premium-home .ns-versus__card h3{ margin:var(--space-3) 0 var(--space-2); } .premium-home .ns-versus__card > p{ color:var(--ink-60); } .premium-home .ns-versus__tag{ font-family:var(--font-mono); font-size:var(--fs-small); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-40); } .premium-home .ns-versus__tag--brand{ color:var(--periwinkle); } .premium-home .ns-versus__list{ list-style:none; margin:var(--space-5) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--space-3); } .premium-home .ns-versus__list li{ position:relative; padding-left:28px; color:var(--ink-60); font-size:var(--fs-small); line-height:1.5; } .premium-home .ns-versus__list li::before{ content:"–"; position:absolute; left:0; top:0; color:var(--ink-40); font-weight:var(--fw-semibold); } .premium-home .ns-versus__list--brand li{ color:var(--ink-80); } .premium-home .ns-versus__list--brand li::before{ content:"✓"; color:var(--success); } /* keep the chatbot card visually calm: no brand bloom/lift, it is the lesser option */ .premium-home .ns-versus__card--muted::after{ display:none; } .premium-home .ns-versus__card--muted:hover{ transform:none; border-color:var(--line-2); box-shadow:var(--shadow-md); } /* more breathing room under the hero grid */ .premium-home .ns-hero__grid{ padding-bottom:clamp(40px,24px + 4vw,80px); } .premium-home .ns-hero--split .ns-hero__grid{ padding-bottom:clamp(48px,28px + 4vw,96px); } /* integration pills — slide in from the right (staggered reveal) */ .premium-theme.motion-ready .ns-pills[data-reveal="stagger"] > li{ transform:translateX(60px); } .premium-theme.motion-ready .ns-pills[data-reveal="stagger"].is-visible > li{ transform:none; } .premium-theme.motion-ready .ns-pills.is-visible > li:nth-child(7){ transition-delay:540ms; } .premium-theme.motion-ready .ns-pills.is-visible > li:nth-child(8){ transition-delay:630ms; } .premium-theme.motion-ready .ns-pills.is-visible > li:nth-child(9){ transition-delay:720ms; } .premium-theme.motion-ready .ns-pills.is-visible > li:nth-child(10){ transition-delay:810ms; } .premium-theme.motion-ready .ns-pills.is-visible > li:nth-child(11){ transition-delay:900ms; } .premium-theme.motion-ready .ns-pills.is-visible > li:nth-child(12){ transition-delay:990ms; } /* hero — symmetric top/bottom padding */ .premium-home .ns-hero--split{ padding-top:var(--section-pad) !important; padding-bottom:var(--section-pad) !important; } .premium-home .ns-hero--split .ns-hero__grid{ padding-bottom:0 !important; } /* hero media — gradient-border frame + glow + custom play button (premium) */ .premium-home .ns-hero__media{ position:relative; box-shadow:0 40px 90px -34px rgba(164,92,224,.55), var(--shadow-lg); } .premium-home .ns-hero__media::after{ content:""; position:absolute; inset:0; border-radius:var(--r-xl); padding:1.5px; background:var(--grad-border); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:2; } .premium-home .ns-hero__play{ position:absolute; inset:0; margin:auto; width:74px; height:74px; border-radius:50%; border:1px solid rgba(255,255,255,.25); cursor:pointer; display:grid; place-items:center; background:var(--grad-brand); color:#fff; box-shadow:0 12px 34px -8px rgba(164,92,224,.7); z-index:3; transition:transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base); } .premium-home .ns-hero__play:hover{ transform:scale(1.08); box-shadow:0 16px 44px -8px rgba(164,92,224,.85); } .premium-home .ns-hero__play svg{ width:30px; height:30px; margin-left:3px; } .premium-home .ns-hero__play.is-hidden{ display:none; } /* trust line with check icon */ .premium-home .ns-hero__nocc{ display:inline-flex; align-items:center; gap:7px; } .premium-home .ns-hero__nocc svg{ width:16px; height:16px; color:var(--success); flex:0 0 auto; } /* domain CTA panel — gradient-border frame + soft glow (consistent premium framing) */ .premium-home .ns-botcta{ position:relative; box-shadow:0 40px 90px -40px rgba(77,97,254,.45), var(--shadow-md); } .premium-home .ns-botcta::after{ content:""; position:absolute; inset:0; border-radius:var(--r-xl); padding:1px; background:var(--grad-border); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } /* integration map — brand glow halo + slide-in from left (mirrors pills from right) */ .premium-home .ns-intmap img{ box-shadow:0 30px 80px -28px rgba(77,97,254,.5), 0 0 70px -12px rgba(164,92,224,.4); } .premium-theme.motion-ready .ns-intmap[data-reveal]{ opacity:0; transform:translateX(-64px) scale(.96); filter:blur(7px); transition:opacity 900ms var(--ns-reveal-ease), transform 900ms var(--ns-reveal-ease), filter 900ms var(--ns-reveal-ease); } .premium-theme.motion-ready .ns-intmap[data-reveal].is-visible{ opacity:1; transform:none; filter:none; } /* sentiment mediacard — media fills its column (no empty gap) + gradient-border frame */ .premium-home .ns-mediacard{ align-items:stretch; position:relative; } .premium-home .ns-mediacard__media{ align-self:stretch; } .premium-home .ns-mediacard__media img{ width:100%; height:100%; object-fit:cover; display:block; } .premium-home .ns-mediacard::after{ content:""; position:absolute; inset:0; border-radius:var(--r-lg); padding:1px; background:var(--grad-border); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:2; } .premium-home .ns-mediacard__media{ height:auto !important; align-self:stretch; min-height:0; } /* feature cards — tidy 4-up grid (was full-width stacked) */ .premium-home .ns-bento--cards{ grid-template-columns:repeat(4,1fr); } .premium-home .ns-bento--cards > .ns-bento__tile{ grid-column:auto; text-align:center; align-items:center; } .premium-home .ns-bento--cards .ns-feat__img{ margin-inline:auto; } @media (max-width:900px){ .premium-home .ns-bento--cards{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .premium-home .ns-bento--cards{ grid-template-columns:1fr; } } /* stats — unified glass "stat bar" with hairline dividers */ .premium-home .ns-stats{ background:var(--bg-glass); background-image:var(--grad-brand-soft); border:1px solid var(--line-2); border-radius:var(--r-xl); padding:clamp(28px,3vw,44px) var(--space-4); box-shadow:var(--shadow-md); gap:0; } .premium-home .ns-stats > .ns-stat{ padding:var(--space-2) var(--space-4); border-left:1px solid var(--line-2); } .premium-home .ns-stats > .ns-stat:first-child{ border-left:0; } @media (max-width:760px){ .premium-home .ns-stats{ gap:var(--space-6); } .premium-home .ns-stats > .ns-stat{ border-left:0; } } /* testimonial cards — decorative gradient quote-mark watermark (premium accent) */ .premium-home .ns-carousel__inner{ position:relative; overflow:hidden; } .premium-home .ns-carousel__inner::before{ content:"\201C"; position:absolute; top:-6px; right:18px; font-family:Georgia, 'Times New Roman', serif; font-size:120px; line-height:1; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; opacity:.22; pointer-events:none; } .premium-home .ns-carousel__inner > *{ position:relative; z-index:1; } /* platform gallery — 3-up cohesive row, gradient-border frames */ .premium-home .ns-gallery{ grid-template-columns:repeat(3,1fr); } @media (max-width:760px){ .premium-home .ns-gallery{ grid-template-columns:1fr; } } .premium-home .ns-gallery__item{ position:relative; } .premium-home .ns-gallery__item::after{ content:""; position:absolute; inset:0; border-radius:var(--r-lg); padding:1px; background:var(--grad-border); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; opacity:.7; } /* platform video — gradient-border frame + brand bg behind custom play button */ .premium-home .ns-platform__video{ position:relative; background:var(--bg-elev); background-image:var(--grad-brand-soft); } .premium-home .ns-platform__video video{ background:#0a0c12; } .premium-home .ns-platform__video::after{ content:""; position:absolute; inset:0; border-radius:var(--r-xl); padding:1.5px; background:var(--grad-border); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:2; } /* SMS — premium glass card with icon badge + tap-to-text button */ .premium-home .ns-sms{ background:var(--bg-glass); background-image:var(--grad-brand-soft); border:1px solid var(--line-2); border-radius:var(--r-xl); padding:clamp(36px,5vw,64px); text-align:center; box-shadow:var(--shadow-md); } .premium-home .ns-sms__icon{ width:64px; height:64px; border-radius:var(--r-lg); display:grid; place-items:center; margin:0 auto var(--space-5); background:var(--grad-brand); color:#fff; box-shadow:var(--shadow-glow); } .premium-home .ns-sms__icon svg{ width:30px; height:30px; } .premium-home .ns-sms .ns-section__title{ margin-bottom:var(--space-3); } .premium-home .ns-sms .ns-btn{ margin-top:var(--space-6); } /* comparison table — emphasize the NOEM.ai winning row */ .premium-home .ns-compare .compare tbody tr:first-child{ background:linear-gradient(90deg, rgba(77,97,254,.16), rgba(193,96,226,.10)) !important; } .premium-home .ns-compare .compare tbody tr:first-child td{ border-bottom-color:rgba(164,92,224,.3) !important; } .premium-home .ns-compare .compare tbody tr:first-child td:first-child{ box-shadow:inset 3px 0 0 0 var(--violet); font-weight:700 !important; color:var(--ink) !important; } /* onboarding steps — clean 3-up row */ .premium-home .ns-bento--steps{ grid-template-columns:repeat(3,1fr); } .premium-home .ns-bento--steps > .ns-bento__tile{ grid-column:auto; } @media (max-width:760px){ .premium-home .ns-bento--steps{ grid-template-columns:1fr; } } /* ============================================================================ BetterDocs /help — premium dark theme (fix white bodies + invisible links) ========================================================================== */ .premium-theme .betterdocs-single-category-inner{ background:var(--bg-elev) !important; border:1px solid var(--line-2) !important; border-radius:var(--r-lg) !important; box-shadow:var(--shadow-md) !important; overflow:hidden; transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base); } .premium-theme .betterdocs-single-category-inner:hover{ transform:translateY(-4px); border-color:rgba(164,92,224,.5) !important; box-shadow:var(--shadow-lg) !important; } /* the white list container → transparent */ .premium-theme .betterdocs-body{ background:transparent !important; padding:var(--space-2) 0 var(--space-4) !important; } .premium-theme .betterdocs-category-header{ border-bottom:1px solid var(--line-2) !important; padding:var(--space-5) var(--space-5) var(--space-4) !important; } .premium-theme .betterdocs-category-title{ font-weight:700 !important; letter-spacing:var(--tracking-tight); } /* count badge → gradient pill */ .premium-theme .betterdocs-category-items-counts{ background:var(--grad-brand) !important; border-radius:var(--r-pill) !important; /* !important on the geometry: BetterDocs' category-grid.css ships a more-specific padding:6px that otherwise pushes the count off-center inside the pill. */ min-width:28px !important; height:28px !important; padding:0 9px !important; display:inline-grid !important; place-items:center !important; font-weight:600 !important; color:#fff !important; box-shadow:var(--shadow-glow); } /* article list — readable, hairline hover rows */ .premium-theme .betterdocs-articles-list{ list-style:none !important; margin:0 !important; padding:var(--space-2) 0 !important; } .premium-theme .betterdocs-articles-list li{ display:flex !important; align-items:center; gap:10px; margin:0 !important; padding:0 var(--space-5) !important; border:0 !important; border-radius:0 !important; transition:background var(--dur-fast); } .premium-theme .betterdocs-articles-list li:hover{ background:rgba(164,92,224,.10) !important; } .premium-theme .betterdocs-articles-list li a{ color:var(--ink-60) !important; padding:10px 0 !important; flex:1 1 auto; transition:color var(--dur-fast); background:transparent !important; } .premium-theme .betterdocs-articles-list li:hover a{ color:var(--ink) !important; } .premium-theme .betterdocs-articles-list li > svg{ width:15px; height:15px; flex:0 0 auto; } .premium-theme .betterdocs-articles-list li > svg path, .premium-theme .betterdocs-articles-list li > svg .st0{ fill:var(--ink-40) !important; transition:fill var(--dur-fast); } .premium-theme .betterdocs-articles-list li:hover > svg path, .premium-theme .betterdocs-articles-list li:hover > svg .st0{ fill:var(--periwinkle) !important; } /* "Find More" button (was white-on-white) → premium ghost → gradient on hover */ .premium-theme .docs-cat-link-btn, .premium-theme .betterdocs-category-link-btn{ background:transparent !important; color:var(--periwinkle) !important; border:1px solid var(--line-3) !important; border-radius:var(--r-pill) !important; padding:9px 22px !important; font-weight:600 !important; box-shadow:none !important; transition:transform var(--dur-base) var(--ease-out), background var(--dur-base), color var(--dur-base), border-color var(--dur-base); } .premium-theme .docs-cat-link-btn:hover, .premium-theme .betterdocs-category-link-btn:hover{ background:var(--grad-brand) !important; color:#fff !important; border-color:transparent !important; transform:translateY(-2px); } /* folder icon in header */ .premium-theme .betterdocs-category-icon svg path, .premium-theme .betterdocs-category-icon .st0{ fill:var(--periwinkle) !important; } /* The category icon ships as an (not inline SVG) with a dark fill, so the fill rule above can't reach it — whiten it via filter instead. */ .premium-theme .betterdocs-category-icon-img, .premium-theme .betterdocs-category-icon img{ filter:brightness(0) invert(1) !important; opacity:1 !important; } /* card footer band (held the white bg behind Find More) */ .premium-theme .betterdocs-footer{ background:transparent !important; border-top:1px solid var(--line-2) !important; padding:var(--space-4) var(--space-5) !important; } /* BetterDocs single doc — kill the light-gray content panel + force readable dark-theme text */ .premium-theme .betterdocs-content-area, .premium-theme .betterdocs-content-wrapper, .premium-theme .betterdocs-single-main, .premium-theme .betterdocs-doc-single{ background:transparent !important; } .premium-theme .betterdocs-entry-content, .premium-theme .betterdocs-content{ color:var(--ink-80) !important; } .premium-theme .betterdocs-entry-content p, .premium-theme .betterdocs-entry-content li, .premium-theme .betterdocs-entry-content span:not(.betterdocs-category-items-counts), .premium-theme .betterdocs-entry-content td, .premium-theme .betterdocs-content p, .premium-theme .betterdocs-content li{ color:var(--ink-80) !important; } .premium-theme .betterdocs-entry-content h1, .premium-theme .betterdocs-entry-content h2, .premium-theme .betterdocs-entry-content h3, .premium-theme .betterdocs-entry-content h4, .premium-theme .betterdocs-entry-content h5, .premium-theme .betterdocs-entry-content h6, .premium-theme .betterdocs-content-heading{ color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important; } .premium-theme .betterdocs-entry-content strong, .premium-theme .betterdocs-entry-content b{ color:var(--ink) !important; } .premium-theme .betterdocs-entry-content a:not(.docs-cat-link-btn){ color:var(--periwinkle) !important; } .premium-theme .betterdocs-entry-content a:not(.docs-cat-link-btn):hover{ color:var(--violet) !important; } .premium-theme .betterdocs-entry-content code, .premium-theme .betterdocs-entry-content pre{ background:var(--bg-elev-2) !important; color:var(--ink) !important; border:1px solid var(--line-2) !important; border-radius:var(--r-sm) !important; } .premium-theme .betterdocs-entry-content blockquote{ border-left:3px solid var(--violet) !important; background:var(--bg-elev) !important; color:var(--ink-80) !important; } /* BetterDocs — remaining light leaks (print btn, related-docs grid, search modal, mobile nav) */ .premium-theme .betterdocs-print-btn{ background:var(--bg-elev) !important; border:1px solid var(--line-2) !important; border-radius:var(--r-md) !important; align-items:center !important; justify-content:center !important; } /* The print button ships a multi-colour, layered printer ILLUSTRATION (13 paths). Forcing a single fill on it flattened every path to one grey, collapsing the whole thing into a featureless silhouette. Hide it and draw a clean, single-weight line printer icon (inline data-URI SVG) instead. */ .premium-theme .betterdocs-print-btn svg{ display:none !important; } .premium-theme .betterdocs-print-btn::before{ content:""; display:block; width:20px; height:20px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a3aab9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V2h12v7'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8' rx='1'/%3E%3C/svg%3E") center / contain no-repeat; transition:opacity var(--dur-fast); } .premium-theme .betterdocs-print-btn:hover::before{ opacity:.8; } .premium-theme .betterdocs-shortcode, .premium-theme .betterdocs-category-grid-wrapper, .premium-theme .betterdocs-category-grid-inner-wrapper, .premium-theme .betterdocs-related-docs, .premium-theme .betterdocs-doc-footer-nav{ background:transparent !important; } .premium-theme .betterdocs-modal .modal-content, .premium-theme .betterdocs-search-modal .modal-content, .premium-theme .betterdocs-popup-modal .modal-content, .premium-theme .modal-content{ background:var(--bg-elev) !important; color:var(--ink) !important; border:1px solid var(--line-2) !important; border-radius:var(--r-lg) !important; } .premium-theme .betterdocs-mobile-nav, .premium-theme .betterdocs-mobile-nav-icon-svg{ background:var(--bg-elev) !important; } .premium-theme .betterdocs-mobile-nav-icon-svg path{ fill:var(--ink) !important; } /* FAQ section wrapper (canonical) */ .ns-faq .ns-section__head{ margin-bottom:var(--space-7); } .ns-faq .ns-accordion{ margin-inline:auto; } /* Healing Halo (home) — interactive concierge demo canvas (halo.js). One-off home section: the canvas IS the component, so only the frame + hints live here. aspect-ratio reserves the box before JS runs (zero CLS). */ .premium-home .ns-halo{ margin-top:var(--space-7); } .premium-home .ns-halo__canvas{ display:block; width:100%; height:auto; aspect-ratio:16/8; background:var(--bg-elev); background-image:var(--grad-brand-soft); border:1px solid var(--line-2); border-radius:var(--r-xl); box-shadow:var(--shadow-md); touch-action:pan-y; /* finger drives the orb, vertical scroll stays native */ } @media (max-width:720px){ .premium-home .ns-halo__canvas{ aspect-ratio:4/5; } } .premium-home .ns-halo__hint{ margin-top:var(--space-4); text-align:center; font-family:var(--font-mono); font-size:var(--fs-small); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-60); } /* one hint per input type: cursor copy on pointer devices, drag copy on touch */ .premium-home .ns-halo__hint--touch{ display:none; } @media (hover:none){ .premium-home .ns-halo__hint--pointer{ display:none; } .premium-home .ns-halo__hint--touch{ display:block; } } /* the visitor's cursor becomes the concierge orb */ @media (hover:hover) and (pointer:fine){ .premium-home .ns-halo__canvas{ cursor:none; } }