/* ============================================================ NANIVERSE.IO — BASE + COMPONENTS Depends on naniverse-tokens.css (load it first). ============================================================ */ /* --- Fonts ------------------------------------------------- DM Sans is loaded via Google Fonts in the HTML . Clubhouse (brand accent face) loads from ./fonts/. There is NO "Naniverse" font file — the wordmark is logo artwork (SVG only, see ./logos/); display type is DM Sans. ---------------------------------------------------------- */ @font-face { font-family: "Clubhouse"; src: url("../fonts/Clubhouse-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Clubhouse"; src: url("../fonts/Clubhouse-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Clubhouse"; src: url("../fonts/Clubhouse-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Clubhouse"; src: url("../fonts/Clubhouse-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } /* --- Reset -------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-base); font-weight: var(--fw-regular); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; color: inherit; } /* --- Layout helpers ---------------------------------------- */ .nv-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .nv-narrow { max-width: var(--container-narrow); } .nv-section { padding-block: var(--space-9); } .nv-stack > * + * { margin-top: var(--space-4); } /* --- Typography -------------------------------------------- */ .nv-display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: var(--fw-extrabold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--text-strong); } h1, .nv-h1 { font-size: var(--fs-h1); font-weight: var(--fw-extrabold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--text-strong); } h2, .nv-h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-strong); } h3, .nv-h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--text-strong); } h4, .nv-h4 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--text-strong); } p { font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--text); max-width: 68ch; } .nv-lead { font-size: var(--fs-lg); color: var(--text); line-height: var(--lh-relaxed); } .nv-muted { color: var(--text-muted); } .nv-faint { color: var(--text-faint); } .nv-overline { font-size: var(--fs-overline); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-overline); color: var(--primary); } .nv-quote { font-family: var(--font-sans); /* quotes stay DM Sans — accent face was too bold */ font-weight: var(--fw-light); font-style: italic; font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--text-editorial); /* cream lives here and ONLY here */ } .nv-gradient-text { background: var(--grad-red-diag); -webkit-background-clip: text; background-clip: text; color: transparent; } /* --- Buttons ----------------------------------------------- */ .nv-btn { --_bg: var(--primary); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.7em 1.45em; font-weight: var(--fw-semibold); font-size: var(--fs-btn); letter-spacing: 0.01em; line-height: 1; border: 0; border-radius: var(--radius-btn); /* rectangular, slight corner */ background: var(--_bg); color: var(--text-on-red); cursor: pointer; transition: background var(--dur-base) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease); } .nv-btn:hover { --_bg: var(--primary-hover); box-shadow: var(--glow-red-sm); } .nv-btn:active { --_bg: var(--primary-active); transform: translateY(1px); } .nv-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; } /* Premium gradient: narrow colour range + faint top sheen + hairline inner edge. Never the full red→wine sweep — that reads cheap at button scale. */ .nv-btn--gradient { background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 42%), var(--grad-red-subtle); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 0 0 1px rgba(143,0,33,0.45), 0 1px 2px rgba(0,0,0,0.5); } .nv-btn--gradient:hover { background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 42%), var(--grad-red-subtle-deep); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 0 0 1px rgba(143,0,33,0.55), 0 6px 18px rgba(227,27,35,0.28); } .nv-btn--gradient:active { transform: translateY(1px); } .nv-btn--secondary { background: transparent; color: var(--text-strong); border: 1px solid var(--border-strong); } .nv-btn--secondary:hover { border-color: var(--primary); color: var(--primary); box-shadow: none; } .nv-btn--ghost { background: transparent; color: var(--text-muted); padding-inline: var(--space-3); } .nv-btn--ghost:hover { color: var(--text-strong); box-shadow: none; } .nv-btn--lg { font-size: var(--fs-base); padding: 0.8em 1.8em; } .nv-btn--sm { font-size: var(--fs-caption); padding: 0.55em 1em; } /* --- Links ------------------------------------------------- */ .nv-link { color: var(--primary); font-weight: var(--fw-medium); transition: color var(--dur-fast) var(--ease); } .nv-link:hover { color: var(--primary-hover); } .nv-link--underline { position: relative; } .nv-link--underline::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease); } .nv-link--underline:hover::after { transform: scaleX(1); } /* --- Surfaces / Cards -------------------------------------- */ .nv-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } .nv-card:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: var(--shadow-md); } .nv-card--raised { background: var(--grad-surface); border-color: var(--border-strong); } .nv-card--glow:hover { border-color: var(--primary); box-shadow: var(--glow-red-sm); } /* --- Badges / Tags ----------------------------------------- */ .nv-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.35em 0.8em; border-radius: var(--radius-sm); /* squared to match button language */ font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; } .nv-badge--red { background: rgba(227,27,35,0.14); color: var(--nv-red-glow); border: 1px solid rgba(227,27,35,0.3); } .nv-badge--cream { background: rgba(242,232,213,0.1); color: var(--text-editorial); border: 1px solid var(--border); } .nv-badge--soon { background: var(--surface-raised); color: var(--text-muted); border: 1px solid var(--border); } /* --- Form controls ----------------------------------------- */ .nv-field { display: flex; flex-direction: column; gap: var(--space-2); } .nv-label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-muted); } .nv-input, .nv-textarea { width: 100%; background: var(--bg-alt); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 0.9em 1.1em; color: var(--text-strong); transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } .nv-input::placeholder, .nv-textarea::placeholder { color: var(--text-faint); } .nv-input:focus, .nv-textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(227,27,35,0.18); } .nv-textarea { min-height: 7rem; resize: vertical; } .nv-checkbox { display: inline-flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-muted); cursor: pointer; } .nv-checkbox input { accent-color: var(--primary); width: 1.1em; height: 1.1em; margin-top: 0.15em; } /* --- Waitlist module (the hero CTA pattern) ---------------- */ .nv-waitlist { display: flex; gap: var(--space-3); flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); /* rectangular family, slightly softer than the button inside */ padding: var(--space-2); max-width: 520px; } .nv-waitlist .nv-input { flex: 1 1 220px; border: 0; background: transparent; padding-inline: var(--space-4); } .nv-waitlist .nv-input:focus { box-shadow: none; } .nv-waitlist .nv-btn { flex: 0 0 auto; } /* --- Navigation -------------------------------------------- */ .nv-nav { position: sticky; top: 0; z-index: var(--z-nav); display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--gutter); background: color-mix(in srgb, var(--surface) 72%, transparent); /* grey-hinted bar, carries the Look 001 hero tone */ backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .nv-nav__links { display: flex; gap: var(--space-6); align-items: center; } .nv-nav__link { color: var(--text-muted); font-weight: var(--fw-medium); font-size: var(--fs-sm); transition: color var(--dur-fast) var(--ease); } .nv-nav__link:hover, .nv-nav__link[aria-current="page"] { color: var(--text-strong); } .nv-wordmark { font-family: var(--font-display); font-weight: var(--fw-extrabold); letter-spacing: var(--ls-tight); color: var(--text-strong); font-size: var(--fs-xl); } .nv-wordmark span { color: var(--primary); } /* Brand logo (SVG). Use instead of a typed wordmark, always. Source of truth: ./logos/ (cropped viewBoxes, ready to size by height). See the Logo Key section in index.html + LOGO-MAP.md for pillar ownership. -w = white art for dark backgrounds, -b = black art for light backgrounds. Master brand: naniverse-text-*.svg wordmark strip, ~8.6:1 -> nav/menu, default 24px tall naniverse-full-*.svg vertical lockup w/ insignia, ~0.83:1 -> footer/hero, default 88px tall nani-kanji-*.svg roughly square crest -> favicon-scale marks, default 32px tall Pillars: naniverse-studios-*.svg wide lockup, ~4.8:1 -> Studios pages, ~32-40px tall nani-talks-*.svg lockup, ~2.4:1 -> Nani Talks pages, ~48-64px tall nani-wear-*.svg NANI lockup, ~2.9:1 -> Nani Wear pages, ~40-56px tall clubhouse-*.svg 1:1 circular seal, transparent bg -> Clubhouse pages, 96px MINIMUM */ .nv-logo { display: inline-flex; align-items: center; } .nv-logo img { height: 24px; width: auto; } .nv-logo--lg img { height: 88px; } /* full lockup: big enough that the NANIVERSE text under the insignia stays readable */ .nv-logo--crest img { height: 32px; } /* kanji crest scale */ .nv-logo--pillar img { height: 48px; } /* pillar lockups, tune per page */ /* --- Footer ------------------------------------------------ */ .nv-footer { border-top: 1px solid var(--border); padding-block: var(--space-8); color: var(--text-muted); } .nv-footer a { color: var(--text-muted); transition: color var(--dur-fast) var(--ease); } .nv-footer a:hover { color: var(--primary); } /* --- Utility ----------------------------------------------- */ .nv-divider { height: 1px; background: var(--border); border: 0; margin-block: var(--space-7); } .nv-grid { display: grid; gap: var(--space-5); } .nv-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .nv-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .nv-ember-bg { background: var(--grad-ember), var(--bg); }