/* ========================================================================== Northlight for WHMCS — design layer -------------------------------------------------------------------------- Everything is scoped under html.nl-on. That class is added by the addon module only while the license is valid, which is what makes the licence kill-switch work: without the class the client area renders exactly as the parent Twenty-One theme, with no broken layout and no visible error. The token values below are defaults. The addon module overwrites them with inline custom properties on from the Brand tab, so an administrator never edits this file. ========================================================================== */ html.nl-on{ --nl-accent:#2f6df6; --nl-accent-ink:#ffffff; --nl-radius:12px; --nl-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --nl-bg:#ffffff; --nl-bg-soft:#f6f7f9; --nl-ink:#0e1116; --nl-ink-soft:#5b6472; --nl-line:#e4e7ec; --nl-card:#ffffff; --nl-shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px -12px rgba(16,24,40,.12); } /* Dark mode is opt-in per install. The module adds html.nl-dark-auto when the Brand tab has dark mode enabled; without it the light palette always wins. */ @media (prefers-color-scheme: dark){ html.nl-on.nl-dark-auto{ --nl-bg:#0d1017; --nl-bg-soft:#141922; --nl-ink:#eef1f6; --nl-ink-soft:#9aa4b2; --nl-line:#232a36; --nl-card:#141922; --nl-shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6); } } html.nl-on body{ font-family:var(--nl-font); background:var(--nl-bg); color:var(--nl-ink); -webkit-font-smoothing:antialiased; line-height:1.55; } html.nl-on a{color:inherit} html.nl-on img{max-width:100%} /* -------------------------------------------------------------------------- Parent-theme surfaces Twenty-One's own header, footer and inner pages are restyled with the same tokens so the whole client area matches, without overriding its templates. Selector list is deliberately broad; harmless where a selector is absent. -------------------------------------------------------------------------- */ html.nl-on #header, html.nl-on .navbar-default, html.nl-on #main-menu{ background:var(--nl-bg) !important; border:0; border-bottom:1px solid var(--nl-line); box-shadow:none; } html.nl-on #main-menu .navbar-nav > li > a{ color:var(--nl-ink-soft); font-weight:500; } html.nl-on #main-menu .navbar-nav > li > a:hover, html.nl-on #main-menu .navbar-nav > .active > a{ color:var(--nl-ink); background:transparent; } html.nl-on #footer{ background:var(--nl-bg); border-top:1px solid var(--nl-line); color:var(--nl-ink-soft); } html.nl-on .panel, html.nl-on .card, html.nl-on .well{ background:var(--nl-card); border:1px solid var(--nl-line); border-radius:calc(var(--nl-radius) + 2px); box-shadow:none; } html.nl-on .btn{ border-radius:var(--nl-radius); font-weight:600; border:1px solid transparent; } html.nl-on .btn-primary{ background:var(--nl-accent); border-color:var(--nl-accent); color:var(--nl-accent-ink); } html.nl-on .btn-primary:hover, html.nl-on .btn-primary:focus{ background:var(--nl-accent); border-color:var(--nl-accent); filter:brightness(.93); } html.nl-on .form-control{ border-radius:var(--nl-radius); border-color:var(--nl-line); box-shadow:none; } /* -------------------------------------------------------------------------- Northlight homepage -------------------------------------------------------------------------- */ .nl-wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 24px} .nl-btn{ display:inline-flex;align-items:center;gap:8px; padding:11px 20px;border-radius:var(--nl-radius); font-weight:600;font-size:14.5px;line-height:1; border:1px solid transparent;cursor:pointer;text-decoration:none; transition:transform .12s ease, background .15s ease, border-color .15s ease; } .nl-btn:hover{text-decoration:none} .nl-btn:active{transform:translateY(1px)} .nl-btn--primary{background:var(--nl-accent);color:var(--nl-accent-ink)} .nl-btn--primary:hover{filter:brightness(.93);color:var(--nl-accent-ink)} .nl-btn--ghost{background:transparent;color:var(--nl-ink);border-color:var(--nl-line)} .nl-btn--ghost:hover{background:var(--nl-bg-soft);color:var(--nl-ink)} .nl-btn--lg{padding:14px 26px;font-size:15.5px} .nl-btn--block{width:100%;justify-content:center} /* hero */ .nl-hero{padding:96px 0 72px;text-align:center} .nl-eyebrow{ display:inline-flex;align-items:center;gap:8px; padding:6px 14px;border-radius:999px; border:1px solid var(--nl-line);background:var(--nl-bg-soft); font-size:13px;color:var(--nl-ink-soft);font-weight:500;margin-bottom:26px; } .nl-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--nl-accent);display:block} .nl-hero h1{ font-size:clamp(34px,5.2vw,54px);line-height:1.08; letter-spacing:-.035em;font-weight:700;margin:0 0 20px; max-width:20ch;margin-left:auto;margin-right:auto; } .nl-hero .nl-lede{font-size:18px;color:var(--nl-ink-soft);max-width:56ch;margin:0 auto 34px} .nl-hero .nl-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .nl-search{ display:flex;gap:8px;max-width:560px;margin:38px auto 0; padding:8px;border:1px solid var(--nl-line);border-radius:calc(var(--nl-radius) + 4px); background:var(--nl-card);box-shadow:var(--nl-shadow); } .nl-search input{ flex:1;border:0;outline:0;background:transparent;color:var(--nl-ink); font:inherit;font-size:15px;padding:0 12px;height:auto;box-shadow:none; } .nl-search input::placeholder{color:var(--nl-ink-soft)} /* trust strip */ .nl-trust{border-top:1px solid var(--nl-line);border-bottom:1px solid var(--nl-line);background:var(--nl-bg-soft)} .nl-trust .nl-row{ display:flex;gap:44px;justify-content:center;flex-wrap:wrap; padding:22px 0;font-size:13.5px;color:var(--nl-ink-soft);font-weight:500; } .nl-trust span{display:flex;align-items:center;gap:8px} /* section shell */ .nl-block{padding:84px 0} .nl-block--soft{background:var(--nl-bg-soft);border-top:1px solid var(--nl-line);border-bottom:1px solid var(--nl-line)} .nl-head{text-align:center;max-width:60ch;margin:0 auto 48px} .nl-head h2{font-size:clamp(26px,3.4vw,34px);letter-spacing:-.03em;margin:0 0 12px;font-weight:700} .nl-head p{color:var(--nl-ink-soft);font-size:16.5px;margin:0} /* product cards */ .nl-cards{display:grid;gap:20px} .nl-cards--2{grid-template-columns:repeat(2,1fr)} .nl-cards--3{grid-template-columns:repeat(3,1fr)} .nl-cards--4{grid-template-columns:repeat(4,1fr)} .nl-card{ background:var(--nl-card);border:1px solid var(--nl-line); border-radius:calc(var(--nl-radius) + 4px);padding:28px; display:flex;flex-direction:column;position:relative; transition:border-color .15s ease, transform .15s ease; } .nl-card:hover{border-color:var(--nl-accent);transform:translateY(-2px)} .nl-card--badged{border-color:var(--nl-accent);box-shadow:var(--nl-shadow)} .nl-badge{ position:absolute;top:-11px;left:28px; background:var(--nl-accent);color:var(--nl-accent-ink); font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase; padding:4px 10px;border-radius:999px; } .nl-card h3{margin:0 0 6px;font-size:18px;letter-spacing:-.02em} .nl-card .nl-desc{color:var(--nl-ink-soft);font-size:14.5px;margin:0 0 22px;min-height:44px} .nl-price{display:flex;align-items:baseline;gap:6px;margin-bottom:22px;flex-wrap:wrap} .nl-price .nl-amount{font-size:34px;font-weight:700;letter-spacing:-.03em} .nl-price .nl-cycle{color:var(--nl-ink-soft);font-size:14px} .nl-feats{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:10px} .nl-feats li{display:flex;gap:10px;font-size:14.5px;color:var(--nl-ink-soft);align-items:flex-start} .nl-feats li::before{ content:"";flex:none;width:15px;height:15px;margin-top:3px;background:var(--nl-accent); -webkit-mask:var(--nl-tick) center/contain no-repeat; mask:var(--nl-tick) center/contain no-repeat; } html.nl-on{--nl-tick:url("data:image/svg+xml;utf8,")} .nl-card .nl-btn{margin-top:auto} /* feature grid */ .nl-features{display:grid;grid-template-columns:repeat(4,1fr);gap:28px} .nl-feature .nl-ico{ width:40px;height:40px;border-radius:10px;display:grid;place-items:center; background:var(--nl-bg-soft);color:var(--nl-accent);margin-bottom:16px; } .nl-feature h4{margin:0 0 6px;font-size:15.5px;letter-spacing:-.01em} .nl-feature p{margin:0;color:var(--nl-ink-soft);font-size:14.5px} /* faq */ .nl-faq{max-width:760px;margin:0 auto;border-top:1px solid var(--nl-line)} .nl-faq details{border-bottom:1px solid var(--nl-line)} .nl-faq summary{ list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative; font-weight:600;font-size:16px; } .nl-faq summary::-webkit-details-marker{display:none} .nl-faq summary::after{ content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%); font-size:20px;font-weight:400;color:var(--nl-ink-soft); } .nl-faq details[open] summary::after{content:"\2013"} .nl-faq .nl-answer{padding:0 40px 22px 0;color:var(--nl-ink-soft);font-size:15px} /* cta band */ .nl-ctaband{ background:var(--nl-bg-soft);border:1px solid var(--nl-line); border-radius:calc(var(--nl-radius) + 8px);padding:56px 40px;text-align:center; } .nl-ctaband h2{margin:0 0 12px;font-size:clamp(24px,3.2vw,32px);letter-spacing:-.03em} .nl-ctaband p{margin:0 auto 28px;color:var(--nl-ink-soft);max-width:52ch} /* custom html block */ .nl-html{max-width:860px;margin:0 auto} @media (max-width:900px){ .nl-cards--2,.nl-cards--3,.nl-cards--4{grid-template-columns:1fr} .nl-features{grid-template-columns:repeat(2,1fr)} .nl-hero{padding:64px 0 48px} .nl-block{padding:60px 0} .nl-trust .nl-row{gap:20px} } @media (max-width:560px){ .nl-features{grid-template-columns:1fr} }