/* ============================================================================ NIMBUS DESIGN SYSTEM Extracted + extended from the launch-page fragments and live site theme. - Brand: Lato, primary #134176 (hover #0e305a), green #1a7a4c, orange #c0672a. - Three explorable DIRECTIONS via [data-direction] on : faithful -> matches the current Divi/Lato pages (the baseline) refined -> same DNA, tighter type, more air, softer elevation modern -> gallery-premium: serif display headings, larger scale, richer - Hero VARIATIONS via [data-hero] on ; non-active heroes are hidden. Tokens are the single source of truth; components read from them. ============================================================================ */ /* ---- Fonts (preview only; live Divi theme already provides Lato) ---- */ /* ============================ TOKENS ============================ */ :root{ /* Brand color */ --nb-blue:#0e305a; --nb-blue-dark:#0a2545; --nb-blue-tint:#eef3f9; --nb-green:#1a7a4c; --nb-green-tint:#e7f5ec; --nb-orange:#c0672a; --nb-orange-tint:#fbf0e7; /* Ink + neutrals */ --nb-ink:#1b2733; --nb-body:#444b53; --nb-muted:#6b7480; --nb-faint:#9aa3ad; --nb-line:#e0e4e8; --nb-line-soft:#eceff2; --nb-bg:#ffffff; --nb-bg-soft:#f8f9fa; --nb-bg-deep:#0f2238; /* Type */ --nb-font-body:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --nb-font-display:var(--nb-font-body); --nb-display-weight:900; --nb-display-tracking:-0.01em; --nb-display-style:normal; --nb-h1:clamp(2.3rem, 1.6rem + 2.6vw, 3.4rem); --nb-h2:clamp(1.7rem, 1.4rem + 1.1vw, 2.2rem); --nb-h3:1.25rem; --nb-lede:clamp(1.12rem, 1.04rem + 0.4vw, 1.3rem); --nb-body-size:1.06rem; --nb-leading:1.7; /* Shape + elevation */ --nb-radius:12px; --nb-radius-sm:6px; --nb-radius-lg:16px; --nb-card-border:1px solid var(--nb-line); --nb-shadow-sm:0 1px 4px rgba(15,34,56,.06); --nb-shadow-md:0 4px 16px rgba(19,65,118,.12); --nb-shadow-lg:0 14px 40px rgba(15,34,56,.14); --nb-card-shadow:var(--nb-shadow-sm); /* Space */ --nb-section:clamp(56px, 4vw + 40px, 104px); --nb-gap:20px; --nb-maxw:1140px; --nb-maxw-narrow:880px; --nb-cta-radius:6px; --nb-cta-transform:uppercase; --nb-cta-tracking:.5px; } /* ---- DIRECTION: refined ---- */ [data-direction="refined"]{ --nb-display-weight:700; --nb-display-tracking:-0.018em; --nb-h1:clamp(2.4rem, 1.6rem + 2.8vw, 3.6rem); --nb-leading:1.75; --nb-radius:10px; --nb-radius-lg:14px; --nb-card-border:1px solid var(--nb-line-soft); --nb-card-shadow:0 2px 10px rgba(15,34,56,.05); --nb-section:clamp(64px, 5vw + 44px, 128px); --nb-cta-radius:8px; } /* ---- DIRECTION: modern (gallery-premium) ---- */ [data-direction="modern"]{ --nb-font-display:'Spectral',Georgia,'Times New Roman',serif; --nb-display-weight:600; --nb-display-tracking:-0.005em; --nb-display-style:normal; --nb-h1:clamp(2.7rem, 1.7rem + 3.6vw, 4.4rem); --nb-h2:clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); --nb-lede:clamp(1.18rem, 1.05rem + 0.55vw, 1.42rem); --nb-leading:1.72; --nb-radius:4px; --nb-radius-sm:3px; --nb-radius-lg:6px; --nb-card-border:1px solid var(--nb-line); --nb-card-shadow:none; --nb-shadow-md:0 10px 30px rgba(15,34,56,.10); --nb-section:clamp(72px, 6vw + 48px, 148px); --nb-cta-radius:2px; --nb-cta-transform:uppercase; --nb-cta-tracking:1.5px; } /* ============================ BASE ============================ */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; font-family:var(--nb-font-body); color:var(--nb-body); background:var(--nb-bg); font-size:var(--nb-body-size); line-height:var(--nb-leading); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3,h4{ font-family:var(--nb-font-display); font-weight:var(--nb-display-weight); letter-spacing:var(--nb-display-tracking); font-style:var(--nb-display-style); color:var(--nb-blue); line-height:1.12; margin:0; text-wrap:balance; } h1{font-size:var(--nb-h1)} h2{font-size:var(--nb-h2)} h3{font-size:var(--nb-h3);line-height:1.25} p{margin:0 0 1em;text-wrap:pretty} a{color:var(--nb-blue);text-decoration:none} img{max-width:100%;display:block} strong{color:var(--nb-ink)} /* ============================ LAYOUT ============================ */ .nb-wrap{max-width:var(--nb-maxw);margin:0 auto;padding:0 24px} .nb-wrap.narrow{max-width:var(--nb-maxw-narrow)} .nb-section{padding:var(--nb-section) 0} .nb-section.soft{background:var(--nb-bg-soft)} .nb-section.tint{background:var(--nb-blue-tint)} .nb-section.deep{background:var(--nb-bg-deep);color:#d6dee8} .nb-section.deep h1,.nb-section.deep h2,.nb-section.deep h3{color:#fff} .nb-eyebrow{ display:inline-block;text-transform:uppercase;letter-spacing:2.5px; font-size:.78rem;font-weight:700;color:var(--nb-orange);margin:0 0 .8em; } .nb-section.deep .nb-eyebrow{color:#7fb0e6} .nb-lede{font-size:var(--nb-lede);color:var(--nb-muted);line-height:1.65;max-width:60ch} .nb-section-head{max-width:62ch;margin:0 0 clamp(28px,3vw,48px)} .nb-section-head.center{margin-left:auto;margin-right:auto;text-align:center} /* ============================ BUTTONS ============================ */ .nb-btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5em; font-family:var(--nb-font-body);font-weight:700;font-size:1.02rem; text-transform:var(--nb-cta-transform);letter-spacing:var(--nb-cta-tracking); padding:15px 34px;border-radius:var(--nb-cta-radius);border:2px solid transparent; cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s; line-height:1;text-align:center; } .nb-btn:active{transform:translateY(1px)} .nb-btn--primary{background:var(--nb-blue);color:#fff;border-color:var(--nb-blue)} .nb-btn--primary:hover{background:var(--nb-blue-dark);border-color:var(--nb-blue-dark);box-shadow:var(--nb-shadow-md)} .nb-btn--ghost{background:transparent;color:var(--nb-blue);border-color:var(--nb-blue)} .nb-btn--ghost:hover{background:var(--nb-blue);color:#fff} .nb-btn--ondeep{background:#fff;color:var(--nb-blue);border-color:#fff} .nb-btn--ondeep:hover{background:var(--nb-blue-tint)} .nb-btn--lg{padding:18px 42px;font-size:1.1rem} .nb-btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .nb-btn-row.center{justify-content:center} .nb-reassure{color:var(--nb-faint);font-size:.95rem;margin:.2em 0 0} /* ============================ CARDS ============================ */ .nb-card{ background:var(--nb-bg);border:var(--nb-card-border);border-radius:var(--nb-radius); box-shadow:var(--nb-card-shadow);padding:28px; } .nb-grid{display:grid;gap:var(--nb-gap)} .nb-grid.cols-2{grid-template-columns:repeat(2,1fr)} .nb-grid.cols-3{grid-template-columns:repeat(3,1fr)} .nb-grid.cols-4{grid-template-columns:repeat(4,1fr)} /* ---- Step cards (how-it-works) ---- */ .nb-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .nb-step{background:var(--nb-bg-soft);border:var(--nb-card-border);border-radius:var(--nb-radius);padding:26px} .nb-section.deep .nb-step{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)} .nb-step .num{ display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center; background:var(--nb-blue);color:#fff;border-radius:50%;font-weight:900;font-size:1.15rem;margin-bottom:14px; } .nb-step h3{margin:0 0 6px} .nb-step p{margin:0;color:var(--nb-muted);font-size:.98rem} /* ---- Callout / highlight ---- */ .nb-callout{ background:var(--nb-blue-tint);border-left:4px solid var(--nb-blue); padding:18px 22px;border-radius:var(--nb-radius-sm);line-height:1.6; } .nb-callout strong{color:var(--nb-blue)} /* ---- Checklist ---- */ .nb-check{list-style:none;padding:0;margin:0;display:grid;gap:10px} .nb-check.two{grid-template-columns:1fr 1fr;gap:10px 36px} .nb-check li{position:relative;padding-left:30px;color:var(--nb-body)} .nb-check li::before{ content:"";position:absolute;left:0;top:.18em;width:19px;height:19px;border-radius:50%; background:var(--nb-green-tint); } .nb-check li::after{ content:"\2713";position:absolute;left:4px;top:.05em;color:var(--nb-green);font-weight:900;font-size:.86rem; } /* ---- Badges / pills ---- */ .nb-badge{ display:inline-block;background:var(--nb-blue);color:#fff;font-size:.72rem;font-weight:700; text-transform:uppercase;letter-spacing:1px;padding:4px 11px;border-radius:3px; } .nb-badge.green{background:var(--nb-green)} .nb-badge.orange{background:var(--nb-orange)} .nb-badge.grey{background:#8a94a0} .nb-pill{ display:inline-flex;align-items:center;gap:7px;background:var(--nb-green-tint);color:var(--nb-green); font-weight:700;font-size:.86rem;padding:6px 14px;border-radius:999px; } /* ---- Product-card media (generated by products/render-products.py) ---- Every product image is normalised to ONE square canvas at build time by products/normalize-product-images.py, so the cards are identical no matter how the product was photographed (Orion is shot portrait, Polaris landscape — both accurate, since the frames rotate). Because the intrinsic sizes now match, the browser reserves identical space and nothing shifts as images load. The box is square to match. object-fit:CONTAIN, never cover — cropping a product shot cuts off the frame's edge, which is the one thing the photograph exists to show. The orientation modifier is kept as a hook but both variants are deliberately identical; sizing is the normaliser's job, not CSS's. */ .nb-media--portrait, .nb-media--landscape{ display:flex;align-items:center;justify-content:center; /* 4:3, not square — the image area is the card's dominant dimension, so this is where a "make the cards smaller" instruction actually lands: 25% less height for the same width. The normalised assets are square and `contain`, so they simply sit smaller with side margin; nothing crops. */ aspect-ratio:4/3;background:#fff;padding:8px; } .nb-media--portrait img, .nb-media--landscape img{ width:100%;height:100%;object-fit:contain;display:block; } /* Non-interactive CTA for out-of-stock / coming-soon cards. Rendered as a , not a disabled