/*
* nearly.css — Nearly app website styles
*
* SETUP
* ─────
* 1. Place this file at: wwwroot/css/nearly.css
* 2. Add to in App.razor / _Host.cshtml:
*
*
*
*
*
* 3. Place app icon at: wwwroot/images/icon.png
*/
/* ═══════════════════════════════════════════════
TOKENS (all brand values live here)
═══════════════════════════════════════════════ */
:root {
/* Brand */
--n-lime: #D2FC69; /* NCEvent — primary accent */
--n-lime-soft: #EAF7C9; /* NCMintSoft */
--n-navy: #1A3A6B; /* NCGray — primary dark */
/* Supporting palette */
--n-orange: #F6B37F;
--n-purple: #C9A7F5;
--n-green: #BFE8A3;
--n-pink: #F3A6D8;
--n-yellow: #F9DE6C;
--n-cherry: #A12B77;
/* Neutrals */
--n-bg: #F6F7F3; /* NAppBackground */
--n-surface: #FFFFFF; /* NSurface */
--n-active: #FAFAF7; /* NActive */
--n-divider: #E6E7E2; /* NDivider */
--n-divider2: #EAEBE8; /* NDivider2 */
--n-text: #2B2E2A; /* NTextPrimary */
--n-text-sec: #727272; /* NTextSecondary */
/* Semantic */
--n-danger: #E53935;
--n-danger-light: #FFF1F0;
/* Layout */
--n-nav-height: 64px;
--n-radius-sm: 10px;
--n-radius-md: 16px;
--n-radius-lg: 24px;
--n-radius-xl: 36px;
/* Shadows */
--n-shadow-sm: 0 2px 10px rgba(0,0,0,.06);
--n-shadow-md: 0 8px 36px rgba(0,0,0,.10);
--n-shadow-lg: 0 24px 72px rgba(0,0,0,.14);
}
/* ═══════════════════════════════════════════════
BASE
═══════════════════════════════════════════════ */
body {
font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--n-bg);
color: var(--n-text);
-webkit-font-smoothing: antialiased;
}
*, *::before, *::after {
box-sizing: border-box;
}
/* ═══════════════════════════════════════════════
NAV
═══════════════════════════════════════════════ */
.n-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
height: var(--n-nav-height);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 max(20px, 5vw);
background: rgba(246, 247, 243, 0.88);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--n-divider);
}
.n-nav-logo {
display: flex;
align-items: center;
gap: 10px;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: 1.2rem;
color: var(--n-text);
text-decoration: none;
letter-spacing: -0.01em;
}
.n-nav-icon-img {
width: 48px;
height: 48px;
border-radius: 8px;
object-fit: cover;
}
.n-nav-links {
display: flex;
align-items: center;
gap: 28px;
}
.n-nav-link {
font-size: 0.875rem;
font-weight: 400;
color: var(--n-text-sec);
text-decoration: none;
transition: color 0.2s;
}
.n-nav-link:hover {
color: var(--n-text);
}
.n-nav-cta {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--n-navy);
color: var(--n-lime) !important;
text-decoration: none;
font-size: 0.875rem;
font-weight: 600;
padding: 8px 18px;
border-radius: 980px;
transition: opacity 0.2s, transform 0.15s;
}
.n-nav-cta:hover {
opacity: 0.88;
transform: translateY(-1px);
}
.n-nav-back {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--n-navy);
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
transition: opacity 0.2s;
}
.n-nav-back:hover {
opacity: 0.7;
}
/* Mobile drawer */
/*@media (max-width: 960px) {
.n-mobile-drawer.mud-drawer--open {
visibility: visible !important;
--mud-drawer-height: auto !important;
}
.n-mobile-drawer.mud-drawer--open .mud-drawer-content {
visibility: visible !important;
}
.n-mobile-drawer .mud-drawer,
.n-mobile-drawer .mud-paper {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 9999 !important;
}
.n-mobile-drawer.mud-drawer--closed {
display: none !important;
}
}*/
@media (max-width: 960px) {
.n-mobile-drawer.mud-drawer--open {
visibility: visible !important;
--mud-drawer-height: auto !important;
}
.n-mobile-drawer.mud-drawer--open .mud-drawer-content {
visibility: visible !important;
}
.n-mobile-drawer.mud-drawer,
.n-mobile-drawer.mud-paper {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 9999 !important;
}
.n-mobile-drawer.mud-drawer--closed {
display: none !important;
}
}
/* The actual drawer panel for top anchor */
.mud-drawer--anchor-top {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 9999 !important;
}
.n-drawer-inner {
padding: 20px 20px 28px;
display: flex;
flex-direction: column;
gap: 4px;
}
.n-drawer-logo {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
font-size: 1.1rem;
color: var(--n-text);
margin-bottom: 12px;
}
.n-btn-block {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 13px;
border-radius: 980px;
background: var(--n-navy);
color: var(--n-lime);
text-decoration: none;
font-weight: 600;
font-size: 0.9375rem;
transition: opacity 0.2s;
}
.n-btn-block:hover {
opacity: 0.88;
}
/* ═══════════════════════════════════════════════
BUTTONS
═══════════════════════════════════════════════ */
.n-btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--n-navy);
color: var(--n-lime);
text-decoration: none;
font-family: 'Open Sans', sans-serif;
font-size: 0.9375rem;
font-weight: 600;
padding: 12px 24px;
border-radius: 980px;
border: none;
cursor: pointer;
transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
box-shadow: 0 4px 18px rgba(26, 58, 107, 0.22);
}
.n-btn-primary:hover {
opacity: 0.9;
transform: translateY(-1px);
box-shadow: 0 8px 28px rgba(26, 58, 107, 0.28);
}
.n-btn-lg {
font-size: 1rem;
padding: 15px 32px;
}
.n-btn-ghost {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--n-navy);
font-size: 0.9375rem;
font-weight: 600;
text-decoration: none;
padding: 12px 16px;
border-radius: 980px;
transition: background 0.2s;
}
.n-btn-ghost:hover {
background: var(--n-lime-soft);
}
.n-btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 2px solid var(--n-divider);
color: var(--n-text);
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
padding: 10px 20px;
border-radius: 980px;
transition: border-color 0.2s, background 0.2s;
white-space: nowrap;
}
.n-btn-outline:hover {
border-color: var(--n-navy);
background: var(--n-active);
}
.n-btn-lime {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
background: var(--n-lime);
color: var(--n-navy);
font-size: 1rem;
font-weight: 750;
text-decoration: none;
padding: 11px 22px;
border-radius: 980px;
transition: opacity 0.2s, transform 0.15s;
white-space: nowrap;
box-shadow: 0 4px 16px rgba(210, 252, 105, 0.35);
}
.n-btn-lime:hover {
opacity: 0.88;
transform: translateY(-1px);
}
.n-gplay-btn {
display: inline-flex;
transition: opacity 0.2s, transform 0.15s;
}
.n-gplay-btn:hover {
opacity: 0.88;
transform: translateY(-1px);
}
/* ═══════════════════════════════════════════════
HERO
═══════════════════════════════════════════════ */
.n-hero {
min-height: 100vh;
padding: calc(var(--n-nav-height) + 64px) max(20px, 5vw) 80px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
overflow: hidden;
background: var(--n-bg);
}
.n-hero-bg {
position: absolute;
inset: 0;
z-index: 0;
background: radial-gradient(ellipse 70% 55% at 50% -5%, rgba(210, 252, 105, 0.22) 0%, transparent 70%), radial-gradient(ellipse 40% 35% at 85% 80%, rgba(26, 58, 107, 0.06) 0%, transparent 60%), var(--n-bg);
}
.n-hero-content {
position: relative;
z-index: 1;
max-width: 780px;
}
.n-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--n-lime-soft);
color: var(--n-navy);
font-size: 0.8rem;
font-weight: 600;
padding: 6px 14px;
border-radius: 980px;
margin-bottom: 24px;
letter-spacing: 0.01em;
animation: nFadeUp 0.6s ease both;
}
.n-eyebrow-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--n-navy);
animation: nPulse 2.2s ease infinite;
}
@keyframes nPulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.4;
transform: scale(0.65);
}
}
.n-hero-h1 {
font-family: 'Open Sans', sans-serif;
font-size: clamp(2.75rem, 7.5vw, 6rem);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--n-text);
margin: 0 0 18px;
animation: nFadeUp 0.6s 0.1s ease both;
}
.n-hero-h1 em {
font-style: italic;
color: var(--n-navy);
position: relative;
}
.n-hero-h1 em::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
right: 0;
height: 4px;
border-radius: 2px;
background: var(--n-lime);
}
.n-hero-sub {
font-size: clamp(1rem, 2.2vw, 1.1875rem);
color: var(--n-text-sec);
font-weight: 300;
line-height: 1.65;
max-width: 44ch;
margin: 0 auto 40px;
animation: nFadeUp 0.6s 0.2s ease both;
}
.n-hero-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
animation: nFadeUp 0.6s 0.3s ease both;
}
/* ─── Phone mockups ─── */
.n-phones {
perspective: 1200px;
position: relative;
gap: 20px;
z-index: 1;
margin-top: 64px;
animation: nFadeUp 0.8s 0.4s ease both;
display: flex;
align-items: flex-end;
justify-content: center;
width: 100%;
max-width: 860px;
}
.n-phone {
transform-style: preserve-3d;
width: 195px;
background: var(--n-navy);
border-radius: 24px;
padding: 8px;
box-shadow: var(--n-shadow-lg);
flex-shrink: 0;
display: flex;
}
.n-phone-main {
width: 232px;
z-index: 2;
margin: 0 -24px;
box-shadow: 0 36px 50px rgba(26, 58, 107, 0.28);
}
.n-phone-left {
transform: scale(0.9) translateY(20px) rotateY(20deg);
box-shadow: 8px 24px 80px rgba(26, 58, 107, 0.25);
}
.n-phone-right {
transform: scale(0.9) translateY(20px) rotateY(-20deg);
box-shadow: -8px 24px 80px rgba(26, 58, 107, 0.25);
}
.n-phone-shell {
background: var(--n-active);
border-radius: 16px;
overflow: hidden;
aspect-ratio: 9 / 19.5;
width: 100%;
}
.n-phone-main-img {
width: 98%;
height: 98%;
object-fit: cover;
display: block;
margin: 5px 0px 0px 2.5px;
}
.n-phone-side-img {
width: 98%;
height: 98%;
object-fit: cover;
display: block;
margin: 0px 0px 0px 3px;
}
.n-phone-screen {
height: 100%;
background: var(--n-surface);
padding: 13px 11px;
display: flex;
flex-direction: column;
gap: 7px;
overflow: hidden;
}
/* phone screen UI pieces */
.nps-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 7px;
border-bottom: 1px solid var(--n-divider);
}
.nps-label-top {
font-size: 0.58rem;
font-weight: 700;
color: var(--n-text);
letter-spacing: -0.01em;
}
.nps-avatar {
width: 17px;
height: 17px;
border-radius: 50%;
background: var(--n-divider);
}
.nps-section-title {
font-size: 0.6rem;
font-weight: 700;
color: var(--n-text);
}
.nps-micro-label {
font-size: 0.5rem;
font-weight: 600;
color: var(--n-text-sec);
text-transform: uppercase;
letter-spacing: 0.07em;
}
.nps-micro-label.mt6 {
margin-top: 4px;
}
.nps-bars {
display: flex;
align-items: flex-end;
gap: 2px;
height: 26px;
}
.nps-bar {
flex: 1;
border-radius: 2px 2px 0 0;
background: var(--n-divider);
}
.nps-bar.active {
background: var(--n-navy);
}
.nps-bar.h1 {
height: 14%;
}
.nps-bar.h2 {
height: 28%;
}
.nps-bar.h3 {
height: 44%;
}
.nps-bar.h4 {
height: 60%;
}
.nps-bar.h5 {
height: 76%;
}
.nps-bar.h6 {
height: 88%;
}
.nps-bar.h7 {
height: 100%;
}
.nps-note {
font-size: 0.5rem;
color: var(--n-text-sec);
font-weight: 300;
line-height: 1.5;
}
.nps-device-card {
background: var(--n-bg);
border-radius: 7px;
padding: 6px 8px;
display: flex;
align-items: center;
gap: 6px;
}
.nps-device-avatar {
width: 20px;
height: 20px;
border-radius: 50%;
flex-shrink: 0;
}
.dot-lime {
background: linear-gradient(135deg, var(--n-lime), #a8e63a);
}
.dot-navy {
background: linear-gradient(135deg, var(--n-navy), #2e5fa3);
}
.nps-device-info {
flex: 1;
min-width: 0;
}
.nps-device-name {
font-size: 0.56rem;
font-weight: 600;
color: var(--n-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nps-device-status {
font-size: 0.5rem;
color: var(--n-text-sec);
margin-top: 1px;
}
.nps-status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--n-divider);
flex-shrink: 0;
}
.nps-status-dot.active {
background: #34c759;
}
.nps-geozone {
background: var(--n-lime-soft);
border-radius: 7px;
padding: 7px 9px;
display: flex;
align-items: center;
gap: 6px;
flex: 1;
min-height: 28px;
}
.nps-gz-circle {
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid rgba(26,58,107,.35);
background: rgba(26,58,107,.1);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.nps-gz-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--n-navy);
}
.nps-gz-label {
font-size: 0.5rem;
font-weight: 600;
color: var(--n-navy);
}
.nps-zone-card {
background: var(--n-bg);
border-radius: 7px;
padding: 6px 8px;
display: flex;
align-items: center;
gap: 6px;
}
.nps-zone-emoji {
font-size: 0.75rem;
}
.nps-premium-tag {
font-size: 0.5rem;
color: var(--n-navy);
font-weight: 700;
margin-top: auto;
padding: 3px 7px;
background: var(--n-lime-soft);
border-radius: 4px;
display: inline-block;
align-self: flex-start;
}
/* ═══════════════════════════════════════════════
SHARED SECTION
═══════════════════════════════════════════════ */
.n-section {
padding: 96px max(20px, 5vw);
}
.n-container {
max-width: 1080px;
margin: 0 auto;
}
.n-section-label {
display: block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--n-navy);
margin-bottom: 12px;
}
.n-section-heading {
font-family: 'Open Sans', sans-serif;
font-size: clamp(2rem, 4.5vw, 3.25rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--n-text);
margin: 0 0 14px;
}
.n-section-heading em {
font-style: italic;
color: var(--n-navy);
}
.n-section-sub {
font-size: 1.0625rem;
color: var(--n-text-sec);
font-weight: 300;
line-height: 1.65;
max-width: 50ch;
}
.n-section-intro {
margin-bottom: 52px;
}
/* ═══════════════════════════════════════════════
HOW IT WORKS
═══════════════════════════════════════════════ */
.n-how {
background: var(--n-surface);
}
.n-steps-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
border-radius: var(--n-radius-md);
overflow: hidden;
}
.n-step-card {
background: var(--n-bg);
padding: 32px 24px;
transition: background 0.25s;
cursor: default;
}
.n-step-card:hover {
background: rgba(26, 58, 107, 0.06);
}
.n-step-number {
font-family: 'Open Sans', sans-serif;
font-size: 2.5rem;
font-weight: 700;
color: var(--n-mid-gray, #C4C7BF);
line-height: 1;
margin-bottom: 16px;
letter-spacing: -0.04em;
transition: color 0.25s;
}
.n-step-card:hover .n-step-number {
color: var(--n-navy);
}
.n-step-icon-wrap {
width: 40px;
height: 40px;
background: var(--n-lime);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.n-step-title {
font-size: 0.9375rem;
font-weight: 700;
color: var(--n-text);
margin-bottom: 7px;
line-height: 1.3;
}
.n-step-desc {
font-size: 0.875rem;
color: var(--n-text-sec);
font-weight: 300;
line-height: 1.6;
}
/* ═══════════════════════════════════════════════
FEATURES
═══════════════════════════════════════════════ */
.n-features-intro {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: end;
margin-bottom: 48px;
}
.n-feature-card {
background: var(--n-surface);
border-radius: var(--n-radius-md);
padding: 26px 22px;
height: 100%;
position: relative;
border-top: 3px solid transparent;
transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
cursor: default;
}
.n-feature-card:hover {
transform: translateY(-3px);
box-shadow: var(--n-shadow-md);
border-top-color: var(--n-lime);
}
.n-feature-dark {
background: var(--n-navy) !important;
border-top-color: var(--n-lime) !important;
}
.n-feature-dark:hover {
border-top-color: var(--n-lime) !important;
}
.n-feature-icon-wrap {
width: 44px;
height: 44px;
background: var(--n-lime-soft);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.n-feature-dark .n-feature-icon-wrap {
background: rgba(210, 252, 105, 0.12);
}
.n-feature-title {
font-size: 0.9375rem;
font-weight: 700;
color: var(--n-text);
margin-bottom: 7px;
line-height: 1.35;
}
.n-feature-dark .n-feature-title {
color: var(--n-surface);
}
.n-feature-desc {
font-size: 0.875rem;
color: var(--n-text-sec);
font-weight: 300;
line-height: 1.6;
}
.n-feature-dark .n-feature-desc {
color: rgba(255,255,255,.5);
}
.n-premium-badge {
display: inline-block;
background: rgba(210, 252, 105, 0.15);
color: var(--n-lime);
font-size: 0.68rem;
font-weight: 700;
padding: 3px 10px;
border-radius: 980px;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-top: 12px;
}
/* ═══════════════════════════════════════════════
PLANS / COMPARE TABLE
═══════════════════════════════════════════════ */
.n-plans-section {
background: var(--n-surface);
}
.n-plans-inner {
max-width: 860px;
margin: 0 auto;
}
.n-compare-wrap {
margin-top: 48px;
border-radius: var(--n-radius-lg);
overflow: hidden;
box-shadow: var(--n-shadow-md);
}
/* Desktop table */
.n-compare-table {
width: 100%;
border-collapse: collapse;
background: var(--n-surface);
font-family: 'Open Sans', sans-serif;
}
/* Header row */
.n-th-feature {
width: 38%;
padding: 28px 24px 20px;
background: var(--n-bg);
border-bottom: 2px solid var(--n-divider);
}
.n-th {
width: 31%;
padding: 28px 20px 20px;
text-align: center;
background: var(--n-bg);
border-bottom: 2px solid var(--n-divider);
border-left: 1px solid var(--n-divider);
}
.n-th-premium {
background: var(--n-navy);
border-bottom-color: rgba(210, 252, 105, 0.3);
border-left-color: rgba(255,255,255,.08);
position: relative;
}
.n-plan-popular {
display: inline-block;
background: var(--n-lime);
color: var(--n-navy);
font-size: 0.68rem;
font-weight: 700;
padding: 3px 11px;
border-radius: 980px;
letter-spacing: 0.04em;
margin-bottom: 8px;
}
.n-plan-name {
font-size: 1rem;
font-weight: 700;
color: var(--n-text);
line-height: 1;
}
.n-plan-sub {
font-size: 0.8rem;
color: var(--n-text-sec);
font-weight: 400;
margin-top: 3px;
}
/* Body rows */
.n-tr {
border-bottom: 1px solid var(--n-divider);
}
.n-tr:last-of-type {
border-bottom: none;
}
.n-td-feature {
padding: 14px 24px;
font-size: 0.875rem;
color: var(--n-text-sec);
font-weight: 400;
background: var(--n-bg);
}
.n-td {
padding: 14px 20px;
text-align: center;
font-size: 0.875rem;
color: var(--n-text);
font-weight: 600;
background: var(--n-surface);
border-left: 1px solid var(--n-divider);
}
.n-td-premium {
background: rgba(26, 58, 107, 0.04);
border-left-color: var(--n-divider);
}
.n-check {
color: var(--n-navy);
font-weight: 700;
}
.n-x {
color: var(--n-text-sec);
font-weight: 400;
}
.n-trial-note {
font-size: 0.75rem;
color: var(--n-text-sec);
margin-top: 7px;
font-weight: 400;
}
/* tfoot CTA cells — equal top padding so buttons sit on the same line */
.n-td-cta {
padding-top: 20px !important;
padding-bottom: 20px !important;
vertical-align: middle;
}
/* Mobile plan cards — shown only on small screens */
.n-mobile-plans {
display: none;
flex-direction: column;
gap: 16px;
margin-top: 32px;
}
.n-mobile-plan-card {
border-radius: var(--n-radius-lg);
overflow: hidden;
box-shadow: var(--n-shadow-md);
}
.n-mobile-plan-header {
padding: 24px 22px 18px;
background: var(--n-bg);
border-bottom: 1px solid var(--n-divider);
}
.n-mobile-plan-header.dark {
background: var(--n-navy);
border-bottom-color: rgba(210,252,105,.15);
}
.n-mobile-plan-rows {
background: var(--n-surface);
}
.n-mobile-plan-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
border-bottom: 1px solid var(--n-divider);
font-size: 0.875rem;
}
.n-mobile-plan-row:last-child {
border-bottom: none;
}
.n-mobile-plan-row-label {
color: var(--n-text-sec);
font-weight: 400;
}
.n-mobile-plan-row-value {
color: var(--n-text);
font-weight: 600;
text-align: right;
max-width: 55%;
}
.n-mobile-plan-footer {
padding: 16px 20px;
background: var(--n-surface);
border-top: 2px solid var(--n-divider);
display: flex;
flex-direction: column;
gap: 8px;
align-items: stretch;
}
.n-mobile-plan-footer.dark {
background: rgba(26,58,107,.04);
border-top-color: var(--n-divider);
}
.n-plans-disclaimer {
margin-top: 20px;
font-size: 0.8rem;
color: var(--n-text-sec);
font-weight: 300;
line-height: 1.6;
max-width: 68ch;
text-align: center;
margin-left: auto;
margin-right: auto;
}
/* ═══════════════════════════════════════════════
FOOTER CTA
═══════════════════════════════════════════════ */
.n-footer-cta {
text-align: center;
padding: 112px max(20px, 5vw);
position: relative;
overflow: hidden;
background: var(--n-bg);
}
.n-footer-cta-bg {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 65% 70% at 50% 110%, rgba(210, 252, 105, 0.18) 0%, transparent 65%), var(--n-bg);
z-index: 0;
}
.n-footer-cta-inner {
position: relative;
z-index: 1;
max-width: 540px;
margin: 0 auto;
}
.n-footer-cta-pin {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -45%);
width: 380px;
height: 475px;
opacity: 0.07;
pointer-events: none;
z-index: 0;
}
.n-footer-cta-pin svg {
width: 100%;
height: 100%;
}
.n-footer-cta-heading {
font-family: 'Open Sans', sans-serif;
font-size: clamp(1.875rem, 4.5vw, 3rem);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.1;
margin: 0 0 14px;
color: var(--n-text);
}
.n-footer-cta-sub {
font-size: 1.0625rem;
color: var(--n-text-sec);
font-weight: 300;
line-height: 1.6;
margin: 0 0 32px;
}
/* ═══════════════════════════════════════════════
FOOTER
═══════════════════════════════════════════════ */
.n-footer {
background: var(--n-navy);
padding: 32px max(20px, 5vw);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
}
.n-footer-logo {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: 1.1rem;
color: var(--n-lime);
}
.n-footer-links {
display: flex;
gap: 22px;
flex-wrap: wrap;
}
.n-footer-links a {
color: rgba(255,255,255,.5);
text-decoration: none;
font-size: 0.85rem;
font-weight: 400;
transition: color 0.2s;
}
.n-footer-links a:hover {
color: var(--n-lime);
}
.n-footer-copy {
font-size: 0.8rem;
color: rgba(255,255,255,.5);
}
.n-footer-copy > a {
font-size: 0.8rem;
color: rgba(255,255,255,.5);
text-decoration: none;
font-size: 0.85rem;
font-weight: 400;
transition: color 0.2s;
}
.n-footer-copy a:hover {
color: var(--n-lime);
}
.n-demo-hint {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--n-text-sec);
font-size: 0.8rem;
font-weight: 400;
text-decoration: none;
padding: 6px 12px;
border-radius: 980px;
transition: color 0.2s, background 0.2s;
margin-top: 4px;
}
.n-demo-hint:hover {
color: var(--n-navy);
background: var(--n-lime-soft);
}
/* Step note — soft callout inside step card */
.n-step-note {
margin-top: 10px;
padding: 8px 10px 8px 12px;
border-left: 2px solid var(--n-lime);
font-size: 0.8rem;
font-weight: 300;
color: var(--n-text-sec);
line-height: 1.55;
}
.n-demo-callout {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 28px;
padding: 14px 18px;
background: var(--n-lime-soft);
border-radius: var(--n-radius-md);
font-size: 0.85rem;
font-weight: 300;
color: var(--n-navy);
line-height: 1.6;
max-width: 560px;
margin-inline: auto;
}
.n-demo-callout strong {
font-weight: 600;
}
.n-demo-callout .mud-icon-root {
flex-shrink: 0;
margin-top: 2px;
opacity: 0.7;
}
/* ═══════════════════════════════════════════════
DELETE ACCOUNT PAGE
═══════════════════════════════════════════════ */
.n-da-main {
padding-top: calc(var(--n-nav-height) + 60px);
padding-bottom: 96px;
background: var(--n-bg);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
.n-da-container {
width: 100%;
max-width: 620px;
padding: 0 max(20px, 5vw);
}
.n-da-warning-badge {
display: inline-flex;
align-items: center;
gap: 7px;
background: var(--n-danger-light);
color: var(--n-danger);
font-size: 0.8rem;
font-weight: 600;
padding: 6px 13px;
border-radius: 980px;
margin-bottom: 22px;
animation: nFadeUp 0.5s ease both;
}
.n-da-heading {
font-family: 'Open Sans', sans-serif;
font-size: clamp(2.25rem, 6vw, 3.25rem);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.08;
margin: 0 0 16px;
color: var(--n-text);
animation: nFadeUp 0.5s 0.07s ease both;
}
.n-da-sub {
font-size: 1.0625rem;
color: var(--n-text-sec);
font-weight: 300;
line-height: 1.65;
margin: 0 0 40px;
animation: nFadeUp 0.5s 0.13s ease both;
}
/* Steps */
.n-da-steps {
border: 1px solid var(--n-divider);
border-radius: var(--n-radius-md);
overflow: hidden;
margin-bottom: 24px;
background: var(--n-surface);
animation: nFadeUp 0.5s 0.17s ease both;
}
.n-da-step-row {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 22px 24px;
border-bottom: 1px solid var(--n-divider);
transition: background 0.2s;
}
.n-da-step-row:last-child {
border-bottom: none;
}
.n-da-step-row:hover {
background: var(--n-active);
}
.n-da-step-num {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--n-navy);
color: var(--n-lime);
font-size: 0.8rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
}
.n-da-step-title {
font-size: 0.9375rem;
font-weight: 700;
color: var(--n-text);
margin-bottom: 3px;
line-height: 1.3;
}
.n-da-step-desc {
font-size: 0.875rem;
color: var(--n-text-sec);
font-weight: 300;
line-height: 1.6;
}
.n-da-step-desc strong {
color: var(--n-text);
font-weight: 600;
}
/* Danger card */
.n-da-danger-card {
background: var(--n-danger-light);
border: 1px solid rgba(229, 57, 53, 0.15);
border-radius: var(--n-radius-md);
padding: 22px 24px;
margin-bottom: 20px;
animation: nFadeUp 0.5s 0.21s ease both;
}
.n-da-danger-title {
display: flex;
align-items: center;
gap: 7px;
font-size: 0.9rem;
font-weight: 700;
color: var(--n-danger);
margin-bottom: 12px;
}
.n-da-danger-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 7px;
}
.n-da-danger-list li {
font-size: 0.875rem;
color: var(--n-danger);
opacity: 0.8;
font-weight: 300;
line-height: 1.5;
display: flex;
align-items: flex-start;
gap: 9px;
}
.n-da-danger-list li::before {
content: '';
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--n-danger);
flex-shrink: 0;
margin-top: 8px;
}
/* Info card */
.n-da-info-card {
background: var(--n-lime-soft);
border-radius: var(--n-radius-md);
padding: 20px 22px;
display: flex;
gap: 14px;
align-items: flex-start;
animation: nFadeUp 0.5s 0.25s ease both;
}
.n-da-info-icon {
width: 34px;
height: 34px;
background: var(--n-surface);
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--n-shadow-sm);
flex-shrink: 0;
margin-top: 1px;
}
.n-da-info-title {
font-size: 0.9rem;
font-weight: 700;
color: var(--n-navy);
margin-bottom: 4px;
}
.n-da-info-desc {
font-size: 0.875rem;
color: var(--n-navy);
opacity: 0.75;
font-weight: 300;
line-height: 1.6;
}
.n-da-divider {
height: 1px;
background: var(--n-divider);
margin: 40px 0;
}
/* Alternatives */
.n-da-alt-heading {
font-family: 'Open Sans', sans-serif;
font-size: 1.625rem;
font-weight: 700;
letter-spacing: -0.02em;
margin: 0 0 7px;
color: var(--n-text);
}
.n-da-alt-sub {
font-size: 0.9375rem;
color: var(--n-text-sec);
font-weight: 300;
line-height: 1.6;
margin: 0 0 20px;
}
.n-da-alt-card {
background: var(--n-surface);
border-radius: var(--n-radius-md);
padding: 20px;
height: 100%;
transition: background 0.2s;
cursor: default;
}
.n-da-alt-card:hover {
background: var(--n-active);
}
.n-da-alt-icon {
width: 34px;
height: 34px;
background: var(--n-lime-soft);
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.n-da-alt-title {
font-size: 0.875rem;
font-weight: 700;
color: var(--n-text);
margin-bottom: 4px;
}
.n-da-alt-desc {
font-size: 0.84rem;
color: var(--n-text-sec);
font-weight: 300;
line-height: 1.55;
}
/* Contact */
.n-da-contact {
background: var(--n-navy);
border-radius: var(--n-radius-md);
padding: 26px 22px;
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 48px;
}
.n-da-contact-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(255,255,255,.1);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.n-da-contact-body {
flex: 1;
min-width: 160px;
}
.n-da-contact-title {
font-size: 0.9375rem;
font-weight: 700;
color: var(--n-surface);
margin-bottom: 3px;
}
.n-da-contact-desc {
font-size: 0.85rem;
color: rgba(255,255,255,.5);
font-weight: 300;
line-height: 1.5;
}
.n-da-contact-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--n-lime);
color: var(--n-navy);
text-decoration: none;
font-size: 0.875rem;
font-weight: 700;
padding: 10px 20px;
border-radius: 980px;
flex-shrink: 0;
transition: opacity 0.2s;
white-space: nowrap;
}
.n-da-contact-btn:hover {
opacity: 0.88;
}
/* ═══════════════════════════════════════════════
LEGAL PAGES (Terms / Privacy)
═══════════════════════════════════════════════ */
.n-legal-page {
background: var(--n-bg);
min-height: 100vh;
}
.n-legal-container {
padding-top: calc(var(--n-nav-height) + 40px) !important;
padding-bottom: 80px !important;
}
.n-legal-paper.mud-paper {
border-radius: var(--n-radius-md) !important;
padding: 40px 36px !important;
background: var(--n-surface) !important;
}
.n-legal-title.mud-typography {
font-family: 'Open Sans', sans-serif !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
color: var(--n-text) !important;
margin-bottom: 2px !important;
}
.n-legal-app-name.mud-typography {
font-family: 'Open Sans', sans-serif !important;
font-weight: 300 !important;
color: var(--n-navy) !important;
margin-bottom: 6px !important;
}
.n-legal-date.mud-typography {
color: var(--n-text-sec) !important;
}
.n-legal-h6.mud-typography {
font-family: 'Open Sans', sans-serif !important;
font-weight: 700 !important;
color: var(--n-navy) !important;
margin-top: 28px !important;
margin-bottom: 10px !important;
font-size: 1rem !important;
padding-left: 12px !important;
border-left: 3px solid var(--n-lime) !important;
}
/* ═══════════════════════════════════════════════
ANIMATIONS
═══════════════════════════════════════════════ */
@keyframes nFadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ═══════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 960px) {
.n-steps-row {
grid-template-columns: 1fr 1fr;
}
.n-features-intro {
grid-template-columns: 1fr;
gap: 14px;
}
}
@media (max-width: 640px) {
.n-steps-row {
grid-template-columns: 1fr;
gap: 2px;
}
/* Hide table, show mobile cards */
.n-compare-wrap {
display: none;
}
.n-mobile-plans {
display: flex;
}
.n-da-contact {
flex-direction: column;
align-items: flex-start;
}
.n-da-contact-btn {
width: 100%;
justify-content: center;
}
.n-footer {
flex-direction: column;
align-items: flex-start;
}
.n-legal-paper.mud-paper {
padding: 24px 18px !important;
}
}
/* Subscription prerequisite card */
.n-da-prereq-card {
background: var(--n-lime-soft);
border: 1px solid rgba(210, 252, 105, 0.6);
border-radius: var(--n-radius-md);
padding: 20px 22px;
display: flex;
gap: 14px;
align-items: flex-start;
margin-bottom: 28px;
animation: nFadeUp 0.5s 0.11s ease both;
}
.n-da-prereq-icon {
width: 34px;
height: 34px;
background: var(--n-surface);
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--n-shadow-sm);
flex-shrink: 0;
margin-top: 1px;
}
.n-da-prereq-title {
font-size: 0.9rem;
font-weight: 700;
color: var(--n-navy);
margin-bottom: 4px;
}
.n-da-prereq-desc {
font-size: 0.875rem;
color: var(--n-navy);
opacity: 0.75;
font-weight: 300;
line-height: 1.6;
}
.n-da-prereq-desc strong {
opacity: 1;
font-weight: 600;
}
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus,
p:focus, div:focus, section:focus {
outline: none;
}