/* ─────────────────────────────────────────────────────────────── NexaGH Paid Platform — unified stylesheet Aligned to design templates/globals.css tokens. Used by: buyer login, buyer dashboard, protected readers, purchase pages. ─────────────────────────────────────────────────────────────── */ :root { /* Surfaces — warmer editorial paper (palette A: warm paper + brighter gold) */ --bg-body: #F7F1E3; /* warmer paper */ --bg-card: #FFFFFF; /* pure white */ --bg-soft: #EDE5D0; /* warm muted */ --bg-sidebar: #F1E9D5; /* sidebar distinct warm */ /* Ink — warm deep navy for editorial gravitas */ --primary: #0B1A2E; /* warm deep navy */ --primary-hover:#152A44; --secondary: #0F1A2D; /* near-black authoritative */ --text-main: #3B424D; /* warm charcoal body */ --text-light: #6E7580; /* muted secondary */ --text-tertiary:#9BA1AD; /* Accent — brighter gold (richer, more luminous) */ --accent: #C89442; --accent-ink: #8A6518; --accent-soft: rgba(200, 148, 66, 0.14); /* Supporting accent — deep teal (link/cta only) */ --link: #0F766E; --link-hover: #0B5A54; /* Lines */ --border-color: #E6E0D1; --border-whisper: rgba(11, 26, 46, 0.08); --border-strong: rgba(11, 26, 46, 0.16); /* Status */ --success: #059669; --success-light:#ECFDF5; --warning: #D97706; --warning-light:#FFFBEB; --danger: #B91C1C; --danger-light: rgba(185, 28, 28, 0.06); /* Shadows — whisper-soft editorial */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.04); --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.06); /* Radius — sharp architectural (per templates) */ --r-sm: 2px; --r-md: 4px; --r-lg: 8px; --r-pill: 9999px; /* Type */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-serif: "Playfair Display", Georgia, serif; /* Layout */ --page-max: 1200px; --reader-col: 760px; --sidebar-w: 320px; --dash-side-w: 280px; /* Legacy spacing tokens (inline refs in stage-1 reader HTML) */ --space-xs: 6px; --space-sm: 10px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; } /* ─── Per-family palette overrides ───────────────────────────── Each blueprint family gets a distinct accent tone so readers can tell at a glance which route they are looking at. Applied on or a wrapping container. */ [data-family="trades"] { --accent: #2C7A7B; /* deep teal */ --accent-ink: #1A5253; --accent-soft: rgba(44, 122, 123, 0.12); --link: #1A5253; --link-hover: #134141; } [data-family="schooling"] { --accent: #5E7C3C; /* olive emerald */ --accent-ink: #3F5624; --accent-soft: rgba(94, 124, 60, 0.12); --link: #3F5624; --link-hover: #2B3C18; } [data-family="educator"] { --accent: #7A3E65; /* warm plum */ --accent-ink: #5A2848; --accent-soft: rgba(122, 62, 101, 0.12); --link: #5A2848; --link-hover: #401832; } /* ─── Reset ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); background: var(--bg-body); color: var(--text-main); line-height: 1.7; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; } img { display: block; max-width: 100%; height: auto; } ::selection { background: rgba(184, 134, 59, 0.26); color: var(--secondary); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-body); } ::-webkit-scrollbar-thumb { background: rgba(11, 26, 46, 0.20); border-radius: var(--r-md); } ::-webkit-scrollbar-thumb:hover { background: rgba(11, 26, 46, 0.34); } /* ─── Typography — editorial, Playfair for display ─────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); color: var(--secondary); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; } h1 { font-size: clamp(2.4rem, 4vw, 3.5rem); line-height: 1.1; letter-spacing: -0.025em; } h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); line-height: 1.2; } h3 { font-size: 1.2rem; font-weight: 600; } h4 { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; letter-spacing: 0; } p { color: var(--secondary); line-height: 1.8; } strong, b { color: var(--secondary); font-weight: 600; } em, i { font-style: italic; color: var(--accent-ink); } small { font-size: 0.85rem; color: var(--text-light); } /* ─── Editorial badge (the templates' signature) ─────────── */ .eyebrow, .nx-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); padding-bottom: 6px; border-bottom: 1px solid var(--accent); } @media (min-width: 768px) { .eyebrow, .nx-eyebrow { font-size: 0.8rem; } } /* ─── Brand wordmark (no logo chip) ─────────────────────── */ .nx-brand { display: inline-flex; align-items: baseline; gap: 12px; font-family: var(--font-serif); text-decoration: none; color: var(--secondary); line-height: 1; } .nx-brand-name { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--secondary); } .nx-brand-name em { font-style: italic; color: var(--accent); } .nx-brand-sub { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-light); padding-left: 12px; border-left: 1px solid var(--border-color); } /* ─── Topbar — minimal, border-bottom only ────────────────── */ .nx-topbar { width: min(var(--page-max), calc(100% - 48px)); margin: 0 auto; padding: 1.5rem 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-bottom: 1px solid var(--border-color); } .nx-topbar-links { display: flex; gap: 2.5rem; flex-wrap: wrap; align-items: center; } .nx-topbar-links a { font-family: var(--font-sans); color: var(--text-main); text-decoration: none; font-weight: 500; font-size: 0.9rem; letter-spacing: 0.05em; text-transform: uppercase; transition: color 0.3s ease; } .nx-topbar-links a:hover, .nx-topbar-links a.is-current { color: var(--accent); text-decoration: none; } /* ─── Buttons (sharp, authoritative) ─────────────────────── */ .nx-btn { display: inline-flex; justify-content: center; align-items: center; gap: 0.75rem; padding: 1rem 2rem; border: 1px solid transparent; border-radius: var(--r-sm); font-family: var(--font-sans); font-weight: 600; text-decoration: none; font-size: 0.9rem; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; } .nx-btn-primary { background: var(--primary); color: #fff; } .nx-btn-primary:hover { background: var(--secondary); color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-md); } .nx-btn-outline { background: transparent; border-color: var(--border-color); color: var(--secondary); } .nx-btn-outline:hover { border-color: var(--secondary); background: var(--bg-body); color: var(--secondary); text-decoration: none; transform: translateY(-1px); } .nx-btn-quiet { background: transparent; color: var(--text-light); padding: 0.6rem 1rem; font-weight: 500; text-transform: none; letter-spacing: 0; } .nx-btn-quiet:hover { color: var(--secondary); background: var(--bg-soft); text-decoration: none; } .nx-btn-full { width: 100%; } /* ─── Tags ────────────────────────────────────────────────── */ .nx-tag { display: inline-flex; align-items: center; gap: 6px; padding: 0.25rem 0.6rem; border-radius: var(--r-sm); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; background: var(--bg-soft); color: var(--text-light); border: 1px solid var(--border-color); } .nx-tag--success { background: var(--success-light); color: var(--success); border-color: rgba(5, 150, 105, 0.2); } .nx-tag--gold { background: var(--accent-soft); color: var(--accent-ink); border-color: rgba(184, 134, 59, 0.24); } .nx-tag--warning { background: var(--warning-light); color: var(--warning); border-color: rgba(217, 119, 6, 0.22); } .nx-tag--danger { background: var(--danger-light); color: var(--danger); border-color: rgba(185, 28, 28, 0.22); } /* ─── Cards ──────────────────────────────────────────────── */ .nx-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--r-md); padding: 2rem; box-shadow: var(--shadow-xs); } @media (min-width: 720px) { .nx-card { padding: 2.5rem; } } .nx-card--flat { box-shadow: none; } .nx-card--soft { background: var(--bg-soft); box-shadow: none; } .nx-card--hover { transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .nx-card--hover:hover { border-color: rgba(10, 25, 47, 0.2); box-shadow: var(--shadow-md); transform: translateY(-4px); } /* ─── Callouts (contextual message blocks) ────────────────── */ .nx-callout { padding: 1.25rem 1.5rem; border: 1px solid var(--border-color); border-left: 3px solid var(--accent); background: var(--bg-card); color: var(--text-main); line-height: 1.8; margin: 1.5rem 0; border-radius: var(--r-sm); } .nx-callout strong { color: var(--secondary); } .nx-callout--warning { border-left-color: var(--warning); background: var(--warning-light); } .nx-callout--danger { border-left-color: var(--danger); background: var(--danger-light); } .nx-callout--success { border-left-color: var(--success); background: var(--success-light); } /* ─── Form fields ────────────────────────────────────────── */ .nx-field { display: grid; gap: 0.5rem; margin-bottom: 1.5rem; } .nx-field > label { font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--secondary); } .nx-field > input, .nx-field > select, .nx-field > textarea { width: 100%; padding: 1rem; font-family: var(--font-sans); font-size: 1rem; font-weight: 400; color: var(--secondary); background: var(--bg-body); border: 1px solid var(--border-color); border-radius: var(--r-sm); transition: all 0.3s ease; } .nx-field > textarea { min-height: 120px; resize: vertical; } .nx-field > input::placeholder, .nx-field > textarea::placeholder { color: var(--text-tertiary); } .nx-field > input:focus, .nx-field > select:focus, .nx-field > textarea:focus { outline: none; border-color: var(--secondary); background: #fff; } .nx-field__hint { color: var(--text-light); font-size: 0.85rem; } /* ─── Grids ──────────────────────────────────────────────── */ .nx-grid-2, .nx-grid-3, .nx-grid-auto { display: grid; gap: 1.5rem; } .nx-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nx-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nx-grid-auto { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } @media (max-width: 860px) { .nx-grid-2, .nx-grid-3 { grid-template-columns: 1fr; } } /* ─── Tables ─────────────────────────────────────────────── */ .nx-table-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--r-sm); } .nx-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .nx-table th, .nx-table td { padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid var(--border-color); vertical-align: top; } .nx-table thead th { background: var(--bg-soft); color: var(--secondary); font-family: var(--font-sans); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; } .nx-table tbody tr:last-child td { border-bottom: none; } /* ─── Light editorial hero (in normal flow, not a dark card) ── */ .nx-hero { padding: 4rem 0 2rem; max-width: 820px; } .nx-hero h1 { margin: 1.5rem 0; color: var(--secondary); } .nx-hero p { font-size: 1.15rem; color: var(--text-main); line-height: 1.8; max-width: 68ch; } /* ─── Section header ─────────────────────────────────────── */ .nx-section { padding: 2rem 0; } .nx-section-head { margin-bottom: 2rem; max-width: 780px; } .nx-section-head .eyebrow { margin-bottom: 1rem; } .nx-section-head h2 { margin-bottom: 1rem; } .nx-section-head p { color: var(--text-main); line-height: 1.8; } /* ─── Checklist ──────────────────────────────────────────── */ .nx-checklist { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; } .nx-checklist li { position: relative; padding-left: 2rem; line-height: 1.75; color: var(--secondary); } .nx-checklist li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; } /* ─── Numbered steps (editorial, inline — no boxed cards) ─── */ .nx-steps { display: grid; gap: 2.5rem; margin-top: 2rem; } .nx-step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 1.5rem; } .nx-step__num { font-family: var(--font-serif); font-weight: 700; font-size: 1.5rem; color: var(--accent); line-height: 1; padding-top: 0.2rem; } .nx-step__body h3 { margin-bottom: 0.5rem; font-family: var(--font-sans); font-size: 1.15rem; font-weight: 600; color: var(--secondary); } .nx-step__body p { margin: 0; color: var(--text-light); font-size: 1.05rem; } /* ─── Flow map ────────────────────────────────────────────── */ .nx-flow { display: grid; gap: 0; margin: 1.5rem 0; border: 1px solid var(--border-color); border-radius: var(--r-sm); } .nx-flow-step { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 1.5rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-color); } .nx-flow-step:last-child { border-bottom: none; } .nx-flow-step strong { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; color: var(--accent-ink); font-weight: 700; padding-top: 0.2rem; } @media (max-width: 720px) { .nx-flow-step { grid-template-columns: 1fr; } } /* ─── Budget grid ─────────────────────────────────────────── */ .nx-fee-grid { display: grid; gap: 0; margin: 1.5rem 0; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border: 1px solid var(--border-color); border-radius: var(--r-sm); } .nx-fee { padding: 2rem 1.5rem; border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .nx-fee:last-child { border-right: none; } .nx-fee__label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 1rem; } .nx-fee__amount { font-family: var(--font-serif); font-size: 2rem; font-weight: 600; color: var(--secondary); letter-spacing: -0.02em; line-height: 1; margin-bottom: 0.5rem; } .nx-fee__desc { color: var(--text-main); font-size: 0.95rem; line-height: 1.6; margin: 0; } /* ─── Visual asset block (image with caption) ────────────── */ .nx-visual { margin-top: 1.5rem; padding: 1.5rem; background: var(--bg-soft); border-radius: var(--r-sm); border: 1px solid var(--border-color); } .nx-visual strong { display: block; color: var(--secondary); margin-bottom: 0.25rem; font-family: var(--font-sans); font-size: 0.95rem; } .nx-visual p { color: var(--text-light); margin: 0 0 1rem; font-size: 0.95rem; } .nx-visual img { width: 100%; border-radius: var(--r-sm); border: 1px solid var(--border-color); cursor: zoom-in; } /* ─── Lightbox ───────────────────────────────────────────── */ .nx-lightbox { position: fixed; inset: 0; background: rgba(11, 26, 46, 0.92); display: none; align-items: center; justify-content: center; padding: 24px; z-index: 9999; } .nx-lightbox.is-open { display: flex; } .nx-lightbox img { max-width: 100%; max-height: 88vh; border-radius: var(--r-sm); } .nx-lightbox-close { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: var(--r-pill); border: none; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; font-size: 1.4rem; } .nx-lightbox-close:hover { background: rgba(255, 255, 255, 0.24); } /* ─── Utility ────────────────────────────────────────────── */ .nx-muted { color: var(--text-light); } .nx-ink { color: var(--secondary); } .nx-center { text-align: center; } .nx-hidden { display: none !important; } .nx-max { width: min(var(--page-max), calc(100% - 48px)); margin: 0 auto; } .nx-max-reader { width: min(var(--reader-col), calc(100% - 40px)); margin: 0 auto; } /* ─── Animations (from globals.css) ──────────────────────── */ @keyframes nx-fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-up { animation: nx-fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; } .delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; } .delay-3 { animation-delay: 0.3s; } /* ─── Country brand strip (shared across paid surfaces) ────── */ .country-strip { display: inline-flex; align-items: center; gap: 12px; padding: 8px 14px 8px 10px; background: var(--bg-soft); border: 1px solid var(--border-color); border-radius: var(--r-sm); margin-bottom: 20px; position: relative; overflow: hidden; } .country-strip::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--country-accent, var(--accent)); } .country-flag { display: inline-flex; width: 28px; height: 20px; border-radius: 2px; overflow: hidden; flex: 0 0 auto; } .country-flag svg { width: 100%; height: 100%; display: block; border-radius: 2px; } .country-text { display: grid; gap: 2px; line-height: 1.15; } .country-text strong { font-family: var(--font-serif); font-size: 1rem; font-weight: 700; color: var(--secondary); letter-spacing: -0.01em; } .country-text span { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-light); font-weight: 600; } /* ─── Small screens ──────────────────────────────────────── */ @media (max-width: 720px) { body { font-size: 15.5px; } .nx-topbar { padding: 1rem 0; } .nx-card { padding: 1.5rem; } .nx-hero { padding: 3rem 0 1.5rem; } }