/* Nubel landing-page global styles. Builds on tokens.css — defines themes, sections, tweaks panel. */ /* ---------- Reset-ish ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin:0; padding:0; } body { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-1); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } /* ---------- THEMES ---------- data-theme on or body: "light" — default "dark" — ink base "warm" — warm paper base data-accent: "orange" — default brand "ink" — monochrome (CTAs use ink, accents subdued) */ html[data-theme="dark"] { --bg-1: #0A0A0A; --bg-2: #111111; --bg-3: #1C1C1C; --bg-warm: #141210; --fg-1: #FFFFFF; --fg-2: #B5B5B5; --fg-3: #7A7A7A; --border-1: #262626; --border-2: #3A3A3A; --slate-100: #1C1C1C; --slate-50: #111111; color-scheme: dark; } html[data-theme="warm"] { --bg-1: #FAF8F5; --bg-2: #F2EEE7; --bg-3: #E9E3D8; --bg-warm: #F5F0E6; --border-1: #E5DFD2; --border-2: #D4CBB8; --slate-100: #EDE7DA; --slate-50: #F5F0E6; } html[data-accent="ink"] { --nubel-orange: #0A0A0A; --nubel-orange-hover: #1C1C1C; --nubel-orange-press: #000; --nubel-orange-soft: #F5F5F5; --nubel-orange-ring: rgba(10,10,10,0.15); } html[data-accent="ink"][data-theme="dark"] { --nubel-orange: #FFFFFF; --nubel-orange-hover: #E5E5E5; --nubel-orange-press: #CCC; --nubel-orange-soft: #1C1C1C; --nubel-orange-ring: rgba(255,255,255,0.15); --fg-on-brand: #0A0A0A; } /* ---------- Keyframes ---------- */ @keyframes nb-marquee { from { transform: translateX(0); } to { transform: translateX(-33.333%); } } @keyframes nb-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes nb-blink { 50% { opacity: 0.25; } } .nb-fade-up { animation: nb-fade-up 520ms var(--ease-std) both; } /* ---------- Layout ---------- */ .nb-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 40px); } .nb-wrap-tight { max-width: 960px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 40px); } .nb-section { padding: clamp(72px, 11vw, 128px) 0; } /* ---------- Text utilities ---------- */ .nb-balance { text-wrap: balance; } .nb-pretty { text-wrap: pretty; } .nb-mono { font-family: var(--font-mono); } .nb-accent { color: var(--nubel-orange); } .nb-italic-accent { font-style: italic; font-weight: 500; color: var(--nubel-orange); } /* Eyebrow override (slight tweak from kit) */ .nb-eyebrow { font-family: var(--font-sans); } /* ---------- Buttons used in this site ---------- */ .btn { display:inline-flex; align-items:center; gap:8px; padding:14px 24px; border-radius:9999px; font-family: var(--font-sans); font-weight:600; font-size:15px; border:0; cursor:pointer; transition: all 120ms var(--ease-std); letter-spacing:-0.005em; } .btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .btn-primary { background: var(--btn-accent); color: #fff; } .btn-primary:hover { background: var(--btn-accent-hover); } .btn-primary:active{ background: var(--btn-accent-press); transform: scale(0.99); } .btn-secondary { background: var(--fg-1); color: var(--bg-1); } .btn-secondary:hover { opacity: 0.88; } .btn-ghost { background: transparent; color: var(--fg-1); border:1px solid var(--border-2); } .btn-ghost:hover { background: var(--bg-3); } .btn-sm { padding: 8px 16px; font-size: 13px; } .btn-lg { padding: 16px 28px; font-size: 17px; } /* ---------- Nav ---------- */ .nb-nav { position:sticky; top:0; z-index:50; background: color-mix(in srgb, var(--bg-1) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom:1px solid var(--border-1); } .nb-nav-inner { display:flex; align-items:center; justify-content:space-between; padding-top: 16px; padding-bottom: 16px; } .nb-nav-links { display:flex; align-items:center; gap: 32px; } .nb-nav-links a { font-size: 14px; font-weight: 500; color: var(--fg-2); transition: color 120ms var(--ease-std); } .nb-nav-links a:hover { color: var(--fg-1); } /* ---------- Cards ---------- */ .nb-card { background: var(--bg-1); border:1px solid var(--border-1); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); transition: all 200ms var(--ease-std); } .nb-card:hover { border-color: var(--border-2); box-shadow: var(--shadow-md); } /* ---------- Divider ---------- */ .nb-divider { border-top: 1px solid var(--border-1); } /* ---------- Tweaks panel ---------- */ .tweaks { position: fixed; bottom: 20px; right: 20px; z-index: 100; background: var(--bg-1); border:1px solid var(--border-1); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 16px; min-width: 260px; font-family: var(--font-sans); } .tweaks h4 { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-3); } .tweaks .row { display:flex; flex-direction:column; gap: 6px; margin-top: 12px; } .tweaks .row-label { font-size: 12px; color: var(--fg-2); font-weight: 600; } .tweaks .chips { display:flex; gap: 6px; flex-wrap: wrap; } .tweaks .chip { padding: 6px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; border: 1px solid var(--border-1); background: var(--bg-1); color: var(--fg-2); cursor: pointer; transition: all 120ms var(--ease-std); } .tweaks .chip:hover { border-color: var(--border-2); color: var(--fg-1); } .tweaks .chip.active { background: var(--fg-1); color: var(--bg-1); border-color: var(--fg-1); } /* Floating tweak toggle */ .tweaks-close { position:absolute; top:10px; right:10px; width:24px; height:24px; border-radius:50%; background: var(--bg-3); color: var(--fg-2); border:0; cursor:pointer; font-size: 14px; display:flex; align-items:center; justify-content:center; } /* ---------- Hero shared ---------- */ .hero-eyebrow-wrap { display:flex; justify-content:center; } /* ---------- Hero A background ---------- */ .hero-a { background: linear-gradient(180deg, #FAF8F5 0%, var(--bg-1) 100%); } .hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } /* Fine grid */ .hero-bg-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(15, 8, 76, 0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(15, 8, 76, 0.06) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 78%); opacity: 0.9; } /* Soft glows */ .hero-bg-glow { position: absolute; border-radius: 50%; filter: blur(80px); } .hero-bg-glow-1 { width: 540px; height: 540px; top: -160px; left: -120px; background: radial-gradient(circle, rgba(15, 8, 76, 0.18), transparent 70%); } .hero-bg-glow-2 { width: 460px; height: 460px; bottom: -160px; right: -120px; background: radial-gradient(circle, rgba(243, 91, 4, 0.10), transparent 70%); } /* Soft fade to white at the bottom */ .hero-bg-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, transparent, var(--bg-1)); } /* Ambient mark glyphs */ .hero-bg-mark { position: absolute; color: var(--nubel-orange); } .hero-bg-mark-1 { width: 76px; height: 76px; top: 14%; left: 8%; opacity: 0.7; } .hero-bg-mark-2 { width: 110px; height: 110px; bottom: 16%; right: 7%; color: var(--nubel-orange); opacity: 0.55; } .hero-bg-mark-3 { width: 52px; height: 52px; top: 18%; right: 14%; color: #F35B04; opacity: 0.7; } @media (max-width: 760px) { .hero-bg-mark { display: none; } } /* Field card — for "Who it's for" */ .field-card { position: relative; background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--r-lg); padding: 24px; min-height: 380px; display: flex; flex-direction: column; gap: 16px; transition: all 200ms var(--ease-std); overflow: hidden; } .field-card:hover { border-color: var(--border-2); transform: translateY(-2px); box-shadow: var(--shadow-md); } .field-card .idx { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); letter-spacing: 0.08em; } .field-art { width: 100%; aspect-ratio: 5/3; background: var(--bg-warm); border-radius: 12px; border: 1px solid var(--border-1); display: flex; align-items: center; justify-content: center; padding: 14px; overflow: hidden; } /* Step */ .step-num { font-family: var(--font-sans); font-weight: 700; font-size: clamp(64px, 9vw, 128px); line-height: 0.9; color: var(--nubel-orange); letter-spacing: -0.04em; } /* Shine divider dot */ .dotline { display:flex; align-items:center; gap: 10px; color: var(--fg-3); font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; } .dotline::before, .dotline::after { content:""; flex:1; height:1px; background: var(--border-1); } /* Manifesto big text */ .manifesto { font-weight: 800; font-size: clamp(40px, 7vw, 104px); line-height: 0.98; letter-spacing: -0.035em; } .manifesto s { text-decoration-color: var(--nubel-orange); text-decoration-thickness: 0.09em; color: var(--fg-3); } .manifesto mark { background: transparent; color: var(--nubel-orange); padding: 0; } /* Full-bleed dark block */ .dark-block { background: var(--bg-warm); color: var(--fg-1); border: 1px solid var(--border-1); border-radius: var(--r-xl); padding: clamp(48px, 7vw, 96px) clamp(28px, 5vw, 72px); position: relative; overflow: hidden; } .dark-block h2 { color: var(--fg-1); } html[data-theme="dark"] .dark-block { background: #141414; border:1px solid #262626; } /* Screen mock (for hero B) */ .mock-phone { width: 280px; aspect-ratio: 9/19; border-radius: 36px; background: var(--bg-1); border:10px solid var(--ink); box-shadow: var(--shadow-xl); overflow: hidden; position: relative; } html[data-theme="dark"] .mock-phone { border-color: #262626; } /* Responsive */ @media (max-width: 760px) { .tweaks { right: 12px; bottom: 12px; min-width: 240px; } .nb-nav-links { display: none; } .nb-nav-inner { padding-top: 12px; padding-bottom: 12px; } .step-glyph { display: none !important; } /* When the glyph is hidden, the Step grid becomes 2 columns (num + text) */ .field-grid { grid-template-columns: 1fr !important; } .dark-block { padding: 40px 24px !important; } .dark-block > div[style*="grid"] { grid-template-columns: 1fr !important; gap: 32px !important; } section .nb-wrap > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 32px !important; } }