/* ============================================================ NW Agentic — Tier subpage styles nwagentic.ai ============================================================ Shared styles for /platform/core/, /platform/forge/, and /platform/private-edge/. Per-tier accent color is driven by a wrapper class on — body.tier-page--core / --forge / --edge. Depends on: tokens.css, base.css, partials.css. See DESIGN.md §5.3. ============================================================ */ @layer components { /* Per-tier accent — overrides --tier-color used by accents below. Core uses navy ink because pure white is unreadable as an accent. The colored chip in the hero still shows the white square. */ body.tier-page--core { --tier-color: var(--text-primary); --tier-bg-soft: rgba(15, 28, 46, 0.04); } body.tier-page--forge { --tier-color: var(--blue); --tier-bg-soft: rgba(37, 99, 235, 0.08); } body.tier-page--edge { --tier-color: var(--amber); --tier-bg-soft: rgba(245, 158, 11, 0.10); } /* ───────────────────────────────────────────────────────── HERO ───────────────────────────────────────────────────────── */ .tier-hero { background: var(--navy-deep); color: var(--text-on-dark); padding-block: 9rem 5rem; position: relative; overflow: hidden; } .tier-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(900px 500px at 90% 10%, rgba(37, 99, 235, 0.18), transparent 60%), radial-gradient(700px 500px at 5% 95%, rgba(245, 158, 11, 0.12), transparent 60%); pointer-events: none; } .tier-hero__inner { position: relative; z-index: 1; max-width: 880px; } .tier-hero__chip { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--text-on-dark); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); padding: 0.4em 1em; border-radius: var(--radius-pill); margin-block-end: var(--space-6); } .tier-hero__chip-square { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; } body.tier-page--core .tier-hero__chip-square { background: #ffffff; border: 1px solid rgba(255, 255, 255, 0.5); } body.tier-page--forge .tier-hero__chip-square { background: var(--blue); } body.tier-page--edge .tier-hero__chip-square { background: var(--amber-light); } .tier-hero h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: var(--fw-extrabold); line-height: var(--lh-display); letter-spacing: var(--tr-display); color: var(--text-on-dark); margin-block-end: var(--space-6); text-wrap: balance; } .tier-hero h1 em, .tier-hero h1 .accent { color: var(--blue-bright); font-style: normal; } body.tier-page--edge .tier-hero h1 em, body.tier-page--edge .tier-hero h1 .accent { color: var(--amber-light); } .tier-hero__sub { font-size: var(--fs-body-lg); color: var(--text-on-dark-soft); line-height: var(--lh-body); max-width: 640px; margin-block-end: var(--space-8); } .tier-hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; } /* ───────────────────────────────────────────────────────── "WHO THIS IS FOR" — three bullets ───────────────────────────────────────────────────────── */ .who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } @media (max-width: 1023px) { .who-grid { grid-template-columns: 1fr; } } .who-card { padding: var(--space-6); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); border-left: 3px solid var(--tier-color); } .who-card__title { font-size: 1.0625rem; font-weight: var(--fw-semibold); color: var(--text-primary); margin-bottom: var(--space-2); } .who-card__body { font-size: var(--fs-body-sm); color: var(--text-secondary); line-height: 1.6; } /* ───────────────────────────────────────────────────────── "WHAT'S INCLUDED" — checklist ───────────────────────────────────────────────────────── */ .included-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-12); } @media (max-width: 767px) { .included-grid { grid-template-columns: 1fr; gap: var(--space-3); } } .included-item { display: flex; align-items: flex-start; gap: var(--space-3); padding-block: var(--space-3); border-bottom: 1px solid var(--border); } .included-item:last-child, .included-grid > .included-item:nth-last-child(-n+2) { border-bottom: none; } @media (max-width: 767px) { .included-grid > .included-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); } .included-grid > .included-item:last-child { border-bottom: none; } } .included-item__icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--tier-bg-soft); color: var(--tier-color); display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; } .included-item__icon svg { width: 12px; height: 12px; } .included-item__text { font-size: var(--fs-body); color: var(--text-secondary); line-height: 1.55; } .included-item__text strong { color: var(--text-primary); font-weight: var(--fw-semibold); } /* ───────────────────────────────────────────────────────── OPERATING MODEL — three columns: NWA / You / System ───────────────────────────────────────────────────────── */ .operating { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } @media (max-width: 1023px) { .operating { grid-template-columns: 1fr; } } .operating-col { padding: var(--space-6); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); } .operating-col__heading { font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); } .operating-col__heading--accent { color: var(--tier-color); border-bottom-color: var(--tier-color); } .operating-col ul { display: flex; flex-direction: column; gap: var(--space-2); } .operating-col li { font-size: var(--fs-body-sm); color: var(--text-secondary); line-height: 1.55; padding-left: 1.25rem; position: relative; } .operating-col li::before { content: ''; position: absolute; left: 0; top: 0.55rem; width: 6px; height: 1px; background: var(--text-tertiary); } /* ───────────────────────────────────────────────────────── ARCHITECTURE BAND — diagram + paragraph ───────────────────────────────────────────────────────── */ .tier-arch { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; padding: var(--space-12); background: var(--navy-deep); border-radius: var(--radius-lg); color: var(--text-on-dark); } @media (max-width: 1023px) { .tier-arch { grid-template-columns: 1fr; padding: var(--space-8); } } .tier-arch h2 { color: var(--text-on-dark); } .tier-arch p { color: var(--text-on-dark-soft); } .tier-arch__visual { background: var(--navy-mid); border: 1px solid var(--border-on-dark); border-radius: var(--radius); padding: var(--space-6); } .tier-arch__visual svg { width: 100%; height: auto; } /* ───────────────────────────────────────────────────────── PRICING POINTER — tier specific ───────────────────────────────────────────────────────── */ .tier-pricing { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-6); padding: var(--space-8) var(--space-12); background: var(--bg-subtle); border-radius: var(--radius-lg); border: 1px solid var(--border); border-left: 4px solid var(--tier-color); } .tier-pricing__amount { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--text-primary); } .tier-pricing__note { font-size: var(--fs-body-sm); color: var(--text-tertiary); margin-top: 0.25rem; } /* ───────────────────────────────────────────────────────── FAQ — schema-friendly accordion ───────────────────────────────────────────────────────── */ .faq-list { display: flex; flex-direction: column; gap: 0; max-width: 880px; margin-inline: auto; border-top: 1px solid var(--border); } .faq-item { border-bottom: 1px solid var(--border); padding-block: var(--space-6); } .faq-item summary { list-style: none; cursor: pointer; font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); color: var(--text-primary); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; color: var(--tier-color); font-size: 1.5rem; font-weight: var(--fw-regular); transition: transform var(--t); } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item__body { padding-top: var(--space-4); color: var(--text-secondary); line-height: var(--lh-body); } .faq-item__body p + p { margin-top: var(--space-3); } /* ───────────────────────────────────────────────────────── SECTION HEAD (left-aligned, narrower) ───────────────────────────────────────────────────────── */ .tier-section-head { margin-bottom: var(--space-8); max-width: 720px; } .tier-section-head h2 { font-size: clamp(1.625rem, 3vw, 2.25rem); margin-bottom: var(--space-3); text-wrap: balance; } .tier-section-head p { font-size: var(--fs-body-lg); color: var(--text-secondary); line-height: 1.6; } }