/* N2 Product Playbook — shared theme + site-wide dark mode Applied when (set via localStorage n2-palette=dark) */ :root { --n2-bg: #FAF9F6; --n2-surface: #ffffff; --n2-surface-2: #FAF9F6; --n2-text: #3D3936; --n2-text-secondary: #5C5546; --n2-text-muted: #8A8370; --n2-border: #EDECEA; --n2-nav-bg: rgba(255, 255, 255, 0.88); --n2-input-bg: #ffffff; --n2-hover: #FAF9F6; --n2-shadow: 0 1px 3px rgb(0 0 0 / 0.06); --n2-theme-duration: 150ms; --n2-menu-duration: 100ms; --n2-hero-duration: 350ms; --n2-ease: cubic-bezier(0.22, 1, 0.36, 1); --n2-nav-z: 100; } /* Site header — sticky on all pages so primary nav is always reachable */ .site-nav { position: sticky; top: 0; z-index: var(--n2-nav-z); background-color: var(--n2-nav-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--n2-border); } /* Anchor links clear the sticky bar */ :target, .scroll-mt-8, #process, #design, #marketing, #glossary, #ux-patterns, #ux-research, #information-architecture, #data-model-relationships, #playbook-shell, #tokens-theming, #tenets, #coming-soon, #where, #lesson-1, #lesson-2, #lesson-3, #mad-lib, #board { scroll-margin-top: 5rem; } html.theme-dark .site-nav { background-color: var(--n2-nav-bg); border-bottom-color: var(--n2-border); } /* Theme menu must paint above sticky bar content */ .site-nav .n2-theme-switcher, .site-nav .n2-theme-menu { z-index: calc(var(--n2-nav-z) + 1); } /* Soft theme transitions — only after first paint (html.n2-theme-ready) so boot/FOUC doesn't flash-animate */ html.n2-theme-ready body { transition: background-color var(--n2-theme-duration) var(--n2-ease), color var(--n2-theme-duration) var(--n2-ease); } html.n2-theme-ready .bg-white, html.n2-theme-ready .bg-\[\#FAF9F6\], html.n2-theme-ready .bg-white\/80, html.n2-theme-ready .bg-white\/60, html.n2-theme-ready nav, html.n2-theme-ready .glossary-term, html.n2-theme-ready input, html.n2-theme-ready select, html.n2-theme-ready textarea { transition: background-color var(--n2-theme-duration) var(--n2-ease), border-color var(--n2-theme-duration) var(--n2-ease), color var(--n2-theme-duration) var(--n2-ease), box-shadow var(--n2-theme-duration) var(--n2-ease); } html.n2-theme-ready .text-\[\#3d3936\], html.n2-theme-ready .text-\[\#3D3936\], html.n2-theme-ready .text-\[\#5C5546\], html.n2-theme-ready .text-\[\#8A8370\], html.n2-theme-ready #process h1, html.n2-theme-ready #design h1, html.n2-theme-ready #marketing h1, html.n2-theme-ready #glossary h1, html.n2-theme-ready .w-\[6px\] { transition: color var(--n2-theme-duration) var(--n2-ease), background-color var(--n2-theme-duration) var(--n2-ease); } html.theme-dark { color-scheme: dark; --n2-bg: #1A1816; --n2-surface: #252220; --n2-surface-2: #2C2825; --n2-text: #E7E5E4; --n2-text-secondary: #C4BFB8; --n2-text-muted: #9C958A; --n2-border: #3D3936; --n2-nav-bg: rgba(26, 24, 22, 0.88); --n2-input-bg: #1F1C1A; --n2-hover: #2C2825; --n2-shadow: 0 1px 3px rgb(0 0 0 / 0.35); } /* Base page surfaces */ html.theme-dark body, html.theme-dark body.bg-\[\#FAF9F6\], html.theme-dark .bg-\[\#FAF9F6\] { background-color: var(--n2-bg) !important; color: var(--n2-text); } html.theme-dark .bg-white, html.theme-dark .bg-white\/80, html.theme-dark .bg-white\/60 { background-color: var(--n2-surface) !important; } html.theme-dark nav.bg-white\/80, html.theme-dark nav.backdrop-blur, html.theme-dark .site-nav { background-color: var(--n2-nav-bg) !important; border-color: var(--n2-border) !important; } /* Borders */ html.theme-dark .border-\[\#EDECEA\], html.theme-dark .border-\[\#edecea\], html.theme-dark .divide-\[\#EDECEA\] > :not([hidden]) ~ :not([hidden]), html.theme-dark .border { border-color: var(--n2-border) !important; } html.theme-dark .border-t, html.theme-dark .border-b { border-color: var(--n2-border) !important; } /* Text */ html.theme-dark .text-\[\#3d3936\], html.theme-dark .text-\[\#3D3936\], html.theme-dark .text-\[\#3D3936\] { color: var(--n2-text) !important; } html.theme-dark .text-\[\#5C5546\], html.theme-dark .text-\[\#5c5546\] { color: var(--n2-text-secondary) !important; } html.theme-dark .text-\[\#8A8370\], html.theme-dark .text-\[\#8a8370\] { color: var(--n2-text-muted) !important; } /* Cards / surfaces used as secondary bg */ html.theme-dark .bg-\[\#FFF8F3\], html.theme-dark .bg-\[\#F5F4FA\], html.theme-dark .hover\:bg-\[\#FAF9F6\]:hover, html.theme-dark .hover\:bg-\[\#FFF8F3\]:hover, html.theme-dark .hover\:bg-\[\#F5F4FA\]:hover, html.theme-dark .focus\:bg-\[\#FAF9F6\]:focus { background-color: var(--n2-hover) !important; } /* Form controls */ html.theme-dark input, html.theme-dark select, html.theme-dark textarea { background-color: var(--n2-input-bg) !important; color: var(--n2-text) !important; border-color: var(--n2-border) !important; } html.theme-dark input::placeholder, html.theme-dark textarea::placeholder { color: var(--n2-text-muted) !important; opacity: 0.85; } html.theme-dark input:focus, html.theme-dark select:focus, html.theme-dark textarea:focus { border-color: var(--spectrum-teal, #14B8A6) !important; } /* Glossary term cards */ html.theme-dark .glossary-term { background-color: var(--n2-surface) !important; border-color: var(--n2-border) !important; color: var(--n2-text); } /* Shadows on dark cards feel flatter without a bit of depth */ html.theme-dark .shadow-sm, html.theme-dark .shadow-lg { box-shadow: var(--n2-shadow) !important; } /* Home hero spectrum tweaks + settle animation */ html.n2-theme-ready .literal-spectrum, html.n2-theme-ready .home-hero { transition: background-color var(--n2-theme-duration) var(--n2-ease); } html.n2-theme-ready .hero-spectrum-layer, html.n2-theme-ready .literal-spectrum > div[style*="spectrum.png"] { transition: opacity var(--n2-hero-duration) var(--n2-ease), filter var(--n2-theme-duration) var(--n2-ease), background-size var(--n2-theme-duration) var(--n2-ease), background-position var(--n2-theme-duration) var(--n2-ease); } html.n2-theme-ready .hero-frequency-layer { transition: opacity var(--n2-theme-duration) var(--n2-ease), filter var(--n2-theme-duration) var(--n2-ease); } html.n2-theme-ready .hero-gradient-layer, html.n2-theme-ready .literal-spectrum > div[style*="linear-gradient"] { transition: background var(--n2-theme-duration) var(--n2-ease), opacity var(--n2-theme-duration) var(--n2-ease); } html.theme-dark .literal-spectrum, html.theme-dark .home-hero { background-color: #11100F !important; } html.theme-dark .hero-spectrum-layer, html.theme-dark .literal-spectrum > div[style*="spectrum.png"] { opacity: 0.55; } html.theme-dark .hero-gradient-layer, html.theme-dark .literal-spectrum > div[style*="linear-gradient"] { background: linear-gradient(rgba(17, 16, 15, 0.25), rgba(17, 16, 15, 0.5)) !important; } /* Brief “settle” when entering dark on the homepage hero */ @keyframes n2-hero-settle { from { opacity: 0.82; filter: brightness(1.08); } to { opacity: 0.55; filter: brightness(1); } } html.n2-hero-settle .hero-spectrum-layer, html.n2-hero-settle .literal-spectrum > div[style*="spectrum.png"] { animation: n2-hero-settle var(--n2-hero-duration) var(--n2-ease) both; } /* ============================================================ n2 Red theme ONLY — homepage hero = Style Guide v8 treatment WHITE base · ONE Frequency Field wave + Spectrum composite (assets/frequency-field-spectrum.png — not stacked dual waves) ============================================================ */ html[data-n2-palette="n2-red"] { --hero-dark: #ffffff; --n2-red: #D70321; } html[data-n2-palette="n2-red"] .home-hero, html[data-n2-palette="n2-red"] .literal-spectrum.home-hero { background-color: #ffffff !important; background-image: none !important; } /* Single style-guide plate: black frequency lines + color spectrum in one asset. Soft “nod” opacity — full-strength feels poster-y; keep it atmospheric. */ html[data-n2-palette="n2-red"] .home-hero .hero-frequency-layer { z-index: 1 !important; opacity: 0.28 !important; mix-blend-mode: multiply !important; filter: none !important; background-image: url('assets/frequency-field-spectrum.png') !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; } /* Hide separate spectrum / dual-wave layers — already in the composite */ html[data-n2-palette="n2-red"] .home-hero .hero-spectrum-layer { display: none !important; } /* Readability gradient: solid white behind type → clears toward the right so the Frequency + Spectrum plate stays a quiet nod, not a fight with words. */ html[data-n2-palette="n2-red"] .home-hero .hero-gradient-layer { z-index: 2 !important; background: linear-gradient( 100deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.94) 18%, rgba(255, 255, 255, 0.78) 34%, rgba(255, 255, 255, 0.42) 52%, rgba(255, 255, 255, 0.12) 68%, rgba(255, 255, 255, 0) 84% ) !important; } /* Extra legibility on the text column only (doesn’t flatten the whole hero) */ html[data-n2-palette="n2-red"] .home-hero .pointer-events-auto { position: relative; } html[data-n2-palette="n2-red"] .home-hero .pointer-events-auto::before { content: ''; position: absolute; inset: -1.5rem -2rem -1.5rem -1.25rem; background: linear-gradient( 90deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.28) 55%, rgba(255, 255, 255, 0) 100% ); border-radius: 1rem; z-index: -1; pointer-events: none; } /* Hero type: black on white (overrides Tailwind text-white utilities) */ html[data-n2-palette="n2-red"] .home-hero .text-white, html[data-n2-palette="n2-red"] .home-hero .large-type, html[data-n2-palette="n2-red"] .home-hero h1 { color: #0a0a0a !important; } html[data-n2-palette="n2-red"] .home-hero .text-white\/80 { color: rgba(10, 10, 10, 0.78) !important; } html[data-n2-palette="n2-red"] .home-hero .opacity-60 { color: #0a0a0a !important; opacity: 0.55; } /* Hero CTA on white style-guide treatment */ html[data-n2-palette="n2-red"] .home-hero .hero-cta { background: #0a0a0a !important; color: #ffffff !important; border: 1px solid #0a0a0a; } html[data-n2-palette="n2-red"] .home-hero .hero-cta:hover { background: #1a1a1a !important; color: #ffffff !important; } /* Section accents below the fold still use n2 red via CSS vars */ /* Frequency field overlays: screen blend reads better on dark bands */ html.theme-dark .frequency-field, html.theme-dark .freq-overlay { mix-blend-mode: soft-light; opacity: 0.18; } /* Soft white CTAs on dark pages */ html.theme-dark a.px-6.py-3.bg-white { background-color: #F5F5F4 !important; color: #1C1917 !important; } /* Demo / filter lists */ html.theme-dark #filter-list, html.theme-dark .divide-y > * { border-color: var(--n2-border) !important; } /* Side nav on product-design */ html.theme-dark aside .bg-white\/60 { background-color: rgba(37, 34, 32, 0.9) !important; } html.theme-dark aside a:hover { background-color: var(--n2-hover) !important; } /* Login page (classless) */ html.theme-dark body .card { background: var(--n2-surface); border-color: var(--n2-border); color: var(--n2-text); box-shadow: var(--n2-shadow); } html.theme-dark body .title { color: var(--n2-text); } html.theme-dark body .subtitle, html.theme-dark body .hint { color: var(--n2-text-muted); } html.theme-dark body .desc { color: var(--n2-text-secondary); } html.theme-dark body .mark { background: var(--n2-surface-2); color: var(--n2-text-muted); } html.theme-dark body input { background: var(--n2-input-bg); border-color: var(--n2-border); color: var(--n2-text); } html.theme-dark body button { background: #E7E5E4; color: #1C1917; } html.theme-dark body button:hover:not(:disabled) { background: #F5F5F4; } /* —— Page headers (match homepage section typography) —— */ .page-header { margin-bottom: 2.5rem; } .page-header .page-header-back { display: inline-block; font-size: 0.875rem; margin-bottom: 1.5rem; text-decoration: none; } .page-header .page-header-back:hover { text-decoration: underline; } .page-header h1 { font-size: clamp(2.5rem, 6.5vw, 4.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 0.95; margin: 0; } .page-header .page-header-sub { font-size: 1.25rem; line-height: 1.4; color: var(--n2-text, #3d3936); margin: 0.35rem 0 0; max-width: 40rem; } html.theme-dark .page-header .page-header-sub { color: var(--n2-text-secondary); } /* —— Playbook left-bar definition cards —— Canonical shell pattern (Process is the reference). Accent: --playbook-card-accent (falls back to spectrum-teal). */ .playbook-card { display: flex; width: 100%; --playbook-card-accent: var(--spectrum-teal, #475569); } .playbook-card__bar { width: 6px; flex-shrink: 0; background: var(--playbook-card-accent); } .playbook-card__body { flex: 1; min-width: 0; background: var(--n2-surface, #ffffff); padding: 1.5rem; border-radius: 0 1rem 1rem 0; border: 1px solid var(--n2-border, #EDECEA); border-left: 0; box-shadow: var(--n2-shadow, 0 1px 3px rgb(0 0 0 / 0.06)); color: var(--n2-text, #3D3936); } .playbook-card--compact .playbook-card__body { padding: 1.25rem; } /* Homepage feature: full-radius body (bar flush left, body keeps left border) */ .playbook-card--feature .playbook-card__body { padding: 2rem; border-radius: 1rem; border-left: 1px solid var(--n2-border, #EDECEA); } .playbook-card--feature .playbook-card__bar { border-radius: 0.25rem 0 0 0.25rem; } html.theme-dark .playbook-card__body { background: var(--n2-surface); border-color: var(--n2-border); box-shadow: var(--n2-shadow); color: var(--n2-text); } /* —— UX 101 interactive story cards —— */ .story-blank { display: inline-block; field-sizing: content; min-width: 5.5rem; max-width: 100%; width: auto; margin: 0 0.1em; padding: 0.05em 0.2em; font: inherit; font-size: 0.875rem; line-height: 1.4; color: var(--n2-text, #3d3936); background: transparent; border: none; border-bottom: 1px dashed var(--n2-text-muted, #8a8370); border-radius: 0; vertical-align: baseline; cursor: text; overflow-x: auto; } .story-blank--wide { min-width: 10rem; } .story-blank:focus { outline: none; border-bottom-style: solid; border-bottom-color: var(--spectrum-teal, #475569); box-shadow: 0 2px 0 0 color-mix(in srgb, var(--spectrum-teal, #475569) 35%, transparent); } .story-blank::placeholder { color: var(--n2-text-muted, #8a8370); opacity: 1; } .story-line { font-size: 0.875rem; line-height: 1.7; color: var(--n2-text-secondary, #5c5546); overflow-wrap: anywhere; } .role-chip { position: relative; display: inline-flex; align-items: center; cursor: pointer; } .role-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .role-chip span { display: inline-block; font-size: 10px; line-height: 1.4; padding: 0.2rem 0.5rem; border-radius: 999px; border: 1px solid var(--n2-border, #edecea); color: var(--n2-text, #3d3936); background: var(--n2-surface, #fff); transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .role-chip:hover span { border-color: var(--n2-text-muted, #8a8370); } .role-chip--other span { border-style: dashed; color: var(--n2-text-muted, #8a8370); } .role-chip input:focus-visible + span { outline: 2px solid var(--spectrum-teal, #475569); outline-offset: 2px; } .role-chip input:checked + span { background: var(--spectrum-teal, #475569); border-color: var(--spectrum-teal, #475569); color: #fff; border-style: solid; } .story-card { display: flex; flex-direction: column; } .story-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .story-card-actions--anchor { margin-top: auto; padding-top: 1rem; justify-content: flex-end; } .story-card-actions--toolbar { margin-top: 0; padding-top: 0; justify-content: flex-end; flex-shrink: 0; } .story-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 0.5rem; border: 1px solid var(--n2-border, #edecea); background: var(--n2-surface, #fff); color: var(--spectrum-teal, #475569); cursor: pointer; text-decoration: none; font: inherit; } .story-icon-btn:hover { border-color: var(--spectrum-teal, #475569); background: #faf9f6; } .story-icon-btn:focus-visible { outline: 2px solid var(--spectrum-teal, #475569); outline-offset: 2px; } .story-icon-btn svg { width: 1.25rem; height: 1.25rem; display: block; } .story-icon-btn svg.story-icon-btn__done { display: none; } .story-icon-btn.is-copied { border-color: var(--spectrum-teal, #475569); color: var(--spectrum-teal, #475569); } .story-icon-btn.is-copied svg.story-icon-btn__copy { display: none; } .story-icon-btn.is-copied svg.story-icon-btn__done { display: block; } @media (prefers-reduced-motion: reduce) { .story-blank, .role-chip span { transition: none; } } html.theme-dark .story-blank { color: var(--n2-text); } html.theme-dark .role-chip span { background: var(--n2-surface); border-color: var(--n2-border); color: var(--n2-text); } html.theme-dark .role-chip input:checked + span { background: var(--spectrum-teal, #475569); border-color: var(--spectrum-teal, #475569); color: #fff; } html.theme-dark .story-icon-btn { background: var(--n2-surface); border-color: var(--n2-border); color: var(--spectrum-teal, #94a3b8); } html.theme-dark .story-icon-btn:hover { background: var(--n2-bg, #1c1917); } /* —— Theme switcher control —— */ .n2-theme-switcher { position: relative; margin-left: 0.25rem; } .n2-theme-btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.5rem; font-size: 10px; letter-spacing: 1px; border-radius: 0.5rem; border: 1px solid var(--n2-border); background: transparent; color: inherit; cursor: pointer; transition: background var(--n2-theme-duration) var(--n2-ease), border-color var(--n2-theme-duration) var(--n2-ease), color var(--n2-theme-duration) var(--n2-ease), transform 0.12s var(--n2-ease); } .n2-theme-btn:hover { background: var(--n2-hover); } .n2-theme-btn:active { transform: scale(0.97); } .n2-theme-btn:focus { outline: none; } .n2-theme-btn:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--spectrum-teal, #14B8A6) 45%, transparent); } .n2-theme-btn[aria-expanded="true"] { border-color: color-mix(in srgb, var(--spectrum-teal, #14B8A6) 55%, var(--n2-border)); } /* Theme control on light sticky chrome (default) uses dark ink */ /* Theme menu: 100ms fade + slight translate */ .n2-theme-menu { position: absolute; right: 0; top: calc(100% + 0.375rem); width: 14rem; background: var(--n2-surface); color: var(--n2-text); border: 1px solid var(--n2-border); border-radius: 1rem; box-shadow: 0 10px 28px rgb(0 0 0 / 0.18); padding: 0.25rem 0; z-index: 100; opacity: 0; transform: translateY(-6px) scale(0.98); transform-origin: top right; pointer-events: none; transition: opacity var(--n2-menu-duration) var(--n2-ease), transform var(--n2-menu-duration) var(--n2-ease), background-color var(--n2-theme-duration) var(--n2-ease), border-color var(--n2-theme-duration) var(--n2-ease), color var(--n2-theme-duration) var(--n2-ease); } .n2-theme-menu.n2-theme-menu-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .n2-theme-menu[hidden] { display: none !important; } .n2-theme-option { width: 100%; display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; text-align: left; background: transparent; border: none; color: inherit; cursor: pointer; font-size: 0.875rem; transition: background 0.12s var(--n2-ease), transform 0.12s var(--n2-ease); } .n2-theme-option:active { transform: scale(0.99); } .n2-theme-option:hover, .n2-theme-option:focus { background: var(--n2-hover); outline: none; } .n2-theme-option[aria-checked="true"] { font-weight: 600; background: var(--n2-hover); } .n2-theme-option .check { margin-left: auto; font-size: 0.75rem; color: var(--spectrum-teal, #14B8A6); } .n2-theme-swatches { display: inline-flex; align-items: center; } .n2-theme-swatches span { width: 9px; height: 9px; border-radius: 999px; margin-left: -2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); } .n2-theme-option .n2-theme-swatches span { width: 12px; height: 12px; margin-left: 1px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12); } html.theme-dark .n2-theme-option .n2-theme-swatches span { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.15); } @media (prefers-reduced-motion: reduce) { html.n2-theme-ready body, html.n2-theme-ready .bg-white, html.n2-theme-ready .bg-\[\#FAF9F6\], html.n2-theme-ready .bg-white\/80, html.n2-theme-ready .bg-white\/60, html.n2-theme-ready nav, html.n2-theme-ready .glossary-term, html.n2-theme-ready input, html.n2-theme-ready select, html.n2-theme-ready textarea, html.n2-theme-ready .text-\[\#3d3936\], html.n2-theme-ready .text-\[\#3D3936\], html.n2-theme-ready .text-\[\#5C5546\], html.n2-theme-ready .text-\[\#8A8370\], html.n2-theme-ready #process h1, html.n2-theme-ready #design h1, html.n2-theme-ready #marketing h1, html.n2-theme-ready #glossary h1, html.n2-theme-ready .w-\[6px\], html.n2-theme-ready .literal-spectrum, html.n2-theme-ready .home-hero, html.n2-theme-ready .hero-spectrum-layer, html.n2-theme-ready .hero-frequency-layer, html.n2-theme-ready .hero-gradient-layer, html.n2-theme-ready .literal-spectrum > div[style*="spectrum.png"], html.n2-theme-ready .literal-spectrum > div[style*="linear-gradient"], .n2-theme-btn, .n2-theme-menu, .n2-theme-option { transition: none !important; animation: none !important; } .n2-theme-btn:active, .n2-theme-option:active { transform: none; } .n2-theme-menu { opacity: 1; transform: none; } .n2-theme-menu:not(.n2-theme-menu-open) { opacity: 0; } }