/* ───────────────────────────────────────────────────────────────────────── * Navi Design Tokens — CSS variables + material classes * v3.5 · 2026-09-11 · LOCKED. One theme: the city is the ground, glass is the * chrome, the plan is made of objects, the things you press are molded resin. * Matches navi-tokens.jsx. * * Settled 2026-09-11 (decisions/2026-09-11-primitives-v3-final.md): * the blue is cobalt #1F4BE6 (canon; #4E8FE0 is historical) * the take is clear frosted glass, weight from depth, never colour * no outlines on any box: an edge is a sheen on top and shade inside the bottom * no score coins, no volt: the pop is the blue * the amber light cue is canon (golden hour, open now, leave by) * * Fonts (load before use): * https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Newsreader:ital,opsz,wght@1,6..72,400;1,6..72,500&family=Martian+Mono:wght@400;500;700&display=swap * * Scale: every material class reads --navi-k (default 1). Set --navi-k: 3.2 on * a 1320px App Store canvas and shadows, sheens and highlights scale with it. * The class "navi-theme-lap" on is accepted and does nothing (v2 pages). * ───────────────────────────────────────────────────────────────────────── */ :root { --navi-k: 1; /* ── Surfaces ──────────────────────────────────────────────────────── */ --navi-bg: #F0F3F7; /* pale cool paper: screens with no city behind */ --navi-bg-alt: #E8EBEE; /* sections, sidebars */ --navi-bg-card: #FFFFFF; /* card fills */ --navi-cream: #DCE7F3; /* text on dark */ /* ── Ground (the city behind the interface) ────────────────────────── */ --navi-city: #E7EDF4; /* city base; also the map's loading colour */ --navi-street: rgba(255,255,255,0.97); --navi-block: rgba(6,13,26,0.07); --navi-park: #E2E8EE; /* no green on the ground */ --navi-park-glow: rgba(226,232,238,0.7); --navi-fade-1: rgba(231,237,244,0.55); /* city fades toward the sheet */ --navi-fade-2: rgba(231,237,244,0.88); /* ── Ink (text) ────────────────────────────────────────────────────── */ --navi-ink: #060D1A; --navi-ink-soft: #515761; --navi-ink-muted: #8E929A; /* ── Hairlines (dividers inside a slab only, never around a box) ───── */ --navi-hairline: rgba(6, 13, 26, 0.08); --navi-hairline-strong: rgba(6, 13, 26, 0.14); /* ── Accent: Navi blue is cobalt (2026-09-11) ──────────────────────── */ --navi-accent: #1F4BE6; /* display sizes, objects, the accent word */ --navi-accent-soft: #DCE3FB; /* tints, hover */ --navi-accent-ink: #1839B8; /* small text on white (7.4:1) */ --navi-accent-glow: rgba(31,75,230,0.24); /* ── Tone (sparingly). The pop is the blue; volt is retired. ───────── */ --navi-amber: #F5A524; /* the light cue: golden hour, open now, leave by */ --navi-butter: #FFD23F; /* draft / waiting / swap */ --navi-rose: #FF6B8A; /* "not for" */ --navi-lilac: #B08FFF; /* highlight */ --navi-sage: #1F4BE6; /* RETIRED alias: volt call sites now get the blue */ --navi-sky: #1F4BE6; /* alias of accent */ /* ── Type ──────────────────────────────────────────────────────────── */ --navi-font-display: "Schibsted Grotesk", system-ui, sans-serif; --navi-font-body: "Schibsted Grotesk", system-ui, sans-serif; --navi-font-serif: "Newsreader", Georgia, serif; /* the italic accent word ONLY */ /* 2026-09-14 (Thais): Martian Mono retired ("mono bugs me across the board"). The label face is the display face, uppercase and tracked; the variable name stays so every call site flips at once. */ --navi-font-mono: "Schibsted Grotesk", -apple-system, "Helvetica Neue", sans-serif; --navi-track-display: -0.03em; --navi-track-mono: 0.02em; /* ── Radii ─────────────────────────────────────────────────────────── */ --navi-r-xs: 6px; --navi-r-sm: 10px; --navi-r-md: 14px; --navi-r-lg: 18px; --navi-r-xl: 22px; --navi-r-2xl: 28px; --navi-r-pill: 999px; /* ── Spacing scale (4px grid) ──────────────────────────────────────── */ --navi-s-1: 4px; --navi-s-2: 8px; --navi-s-3: 12px; --navi-s-4: 16px; --navi-s-5: 20px; --navi-s-6: 24px; --navi-s-8: 32px; --navi-s-10: 40px; /* ── Elevation (flat surfaces, non-material) ───────────────────────── */ --navi-shadow-sm: 0 2px 6px rgba(6, 13, 26, 0.06); --navi-shadow-md: 0 6px 20px rgba(6, 13, 26, 0.08); --navi-shadow-lg: 0 10px 30px rgba(6, 13, 26, 0.12); --navi-shadow-xl: 0 20px 60px rgba(6, 13, 26, 0.18); --navi-shadow-stamp: 0 2px 6px rgba(0, 0, 0, 0.12); /* ── Material: glass. One recipe for chrome and for anything you read. ─ */ --navi-glass: linear-gradient(180deg, rgba(255,255,255,0.74) 0%, rgba(255,255,255,0.46) 100%); --navi-glass-sheet: rgba(255,255,255,0.55); --navi-glass-hi: rgba(255,255,255,1); --navi-glass-blur: 24px; /* ── Material: the take (clear frosted, the widest and thickest object) ─ */ --navi-take: linear-gradient(165deg, rgba(255,255,255,0.46) 0%, rgba(238,242,250,0.28) 55%, rgba(228,234,247,0.34) 100%); --navi-take-blur: 36px; /* ── Material: bubble gradients (one specular top-left, shaded below) ─ */ --navi-coin-ink: radial-gradient(circle at 30% 24%, #fff 0, rgba(255,255,255,.8) 8%, #6F8FFF 22%, #2A56EA 55%, #1230A8 100%); --navi-coin-white: radial-gradient(circle at 30% 24%, #fff 0, #fff 10%, #F2F5FA 40%, #C9D2E0 100%); --navi-sphere-blue:radial-gradient(circle at 30% 24%, #fff 0, rgba(255,255,255,.8) 8%, #7A98FF 22%, #2F5BF0 55%, #1230A8 100%); --navi-jelly-white:linear-gradient(180deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.52) 100%); --navi-jelly-blue: linear-gradient(180deg, #86A4FF 0%, #3560F2 50%, #1E43D0 100%); --navi-jelly-ink: linear-gradient(180deg, rgba(50,62,90,.92) 0%, rgba(6,13,26,.92) 100%); --navi-lite: linear-gradient(180deg, #FFF3C4 0%, #FFCF57 55%, #F0A31C 100%); --navi-noticed: linear-gradient(180deg, rgba(31,75,230,.16) 0%, rgba(31,75,230,.08) 100%); --navi-globe-land: linear-gradient(180deg, #B9F58A, #7FCB55); /* the logo mark keeps its green */ /* ── Motion ────────────────────────────────────────────────────────── */ --navi-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --navi-dur-fast: 120ms; --navi-dur-base: 220ms; --navi-dur-slow: 380ms; } /* ═══════════════════════════════════════════════════════════════════════ * Type * ═══════════════════════════════════════════════════════════════════════ */ .navi-display { font-family: var(--navi-font-display); font-weight: 700; letter-spacing: var(--navi-track-display); line-height: 1.02; color: var(--navi-ink); } .navi-body { font-family: var(--navi-font-body); font-weight: 400; color: var(--navi-ink); } .navi-em { font-family: var(--navi-font-serif); font-style: italic; font-weight: 400; font-variation-settings: "opsz" 24; color: var(--navi-accent); letter-spacing: -0.01em; } .navi-mono { font-family: var(--navi-font-mono); font-weight: 400; letter-spacing: var(--navi-track-mono); } .navi-kicker { font-family: var(--navi-font-mono); font-weight: 600; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navi-accent-ink); font-variant-numeric: tabular-nums; } .navi-kicker--muted { color: var(--navi-ink-muted); font-weight: 500; } .navi-kicker--volt { color: var(--navi-accent-ink); } /* retired alias */ /* ═══════════════════════════════════════════════════════════════════════ * Ground: the city behind the interface. .navi-ground--map is the real * basemap: the app's own Mapbox style (navi-next6 NaviMapStyleLight) via * Mapbox GL JS; the drawn grid is the no-token fallback. Never sky. * ═══════════════════════════════════════════════════════════════════════ */ .navi-ground { position: relative; overflow: hidden; background: var(--navi-city); } .navi-ground::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 40% at 70% 20%, var(--navi-park-glow), transparent 70%), repeating-linear-gradient(90deg, transparent 0 calc(34px * var(--navi-k)), var(--navi-street) calc(34px * var(--navi-k)) calc(38px * var(--navi-k))), repeating-linear-gradient(0deg, transparent 0 calc(30px * var(--navi-k)), var(--navi-street) calc(30px * var(--navi-k)) calc(33px * var(--navi-k))); } .navi-ground::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--navi-fade-1) 45%, var(--navi-fade-2) 80%); } .navi-ground > * { position: relative; z-index: 1; } /* a card-sized map (inside a board or a chat reply) has no sheet below it, so no fade */ .navi-ground--flat::after { display: none; } .navi-ground .navi-block { position: absolute; z-index: 0; background: var(--navi-block); border-radius: calc(3px * var(--navi-k)); } .navi-ground .navi-park { position: absolute; z-index: 0; background: var(--navi-park); border-radius: calc(6px * var(--navi-k)); } .navi-ground--map::before { display: none; } .navi-ground--map .navi-map-tiles { position: absolute; inset: 0; z-index: 0; background: var(--navi-city); } .navi-ground--map .navi-map-tiles.mapboxgl-map { font: inherit; } /* no map chrome anywhere the ground is drawn (licence check pending for marketing use) */ .mapboxgl-ctrl-logo, .mapboxgl-ctrl-attrib, .mapboxgl-ctrl-bottom-left, .mapboxgl-ctrl-bottom-right { display: none !important; } .navi-map-tiles .mapboxgl-canvas { outline: 0; } .navi-marker { position: absolute; width: 0; height: 0; } .navi-marker .navi-pin { transform: translate(-50%, -100%); } .navi-marker .navi-me { transform: translate(-50%, -50%); } /* ═══════════════════════════════════════════════════════════════════════ * Glass and slab. No outline: the edge is a sheen at the top, shade inside * the bottom, and the box lifts on a wide, low shadow. Glass is chrome * (composer, sheet, back, map pills, navi's short reply); slab is anything * you read (option rows, stop lists, cards). Same recipe, different job. * ═══════════════════════════════════════════════════════════════════════ */ .navi-glass, .navi-slab { border: 0; border-radius: calc(24px * var(--navi-k)); background: var(--navi-glass); -webkit-backdrop-filter: blur(var(--navi-glass-blur)) saturate(1.5); backdrop-filter: blur(var(--navi-glass-blur)) saturate(1.5); box-shadow: inset 0 calc(8px * var(--navi-k)) calc(14px * var(--navi-k)) calc(-6px * var(--navi-k)) var(--navi-glass-hi), inset 0 calc(-12px * var(--navi-k)) calc(18px * var(--navi-k)) calc(-10px * var(--navi-k)) rgba(6,13,26,.12), 0 calc(22px * var(--navi-k)) calc(44px * var(--navi-k)) calc(-8px * var(--navi-k)) rgba(6,13,26,.20), 0 calc(4px * var(--navi-k)) calc(10px * var(--navi-k)) rgba(6,13,26,.04); } /* the top pick: emphasis from light and depth, not a border. A cobalt * refraction along the bottom edge and a cobalt glow under the box. */ .navi-slab--pick { box-shadow: inset 0 calc(8px * var(--navi-k)) calc(14px * var(--navi-k)) calc(-6px * var(--navi-k)) var(--navi-glass-hi), inset 0 calc(-3px * var(--navi-k)) 0 rgba(255,255,255,.85), inset 0 calc(-9px * var(--navi-k)) calc(12px * var(--navi-k)) calc(-6px * var(--navi-k)) rgba(31,75,230,.30), 0 calc(24px * var(--navi-k)) calc(48px * var(--navi-k)) calc(-8px * var(--navi-k)) rgba(31,75,230,.28), 0 calc(4px * var(--navi-k)) calc(10px * var(--navi-k)) rgba(31,75,230,.06); } .navi-sheet { border: 0; border-radius: calc(24px * var(--navi-k)) calc(24px * var(--navi-k)) 0 0; background: var(--navi-glass-sheet); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); box-shadow: inset 0 calc(8px * var(--navi-k)) calc(14px * var(--navi-k)) calc(-6px * var(--navi-k)) var(--navi-glass-hi), 0 calc(-16px * var(--navi-k)) calc(44px * var(--navi-k)) rgba(6,13,26,.14); } .navi-sheet-grab { width: calc(36px * var(--navi-k)); height: calc(4px * var(--navi-k)); border-radius: 999px; background: var(--navi-ink-muted); opacity: .5; margin: 0 auto; } /* ═══════════════════════════════════════════════════════════════════════ * The take: navi's answer. Clear frosted glass, differentiated by everything * except colour: the widest object on the screen (it bleeds 6px past the * column), a thick slab with a visible bottom edge and a cobalt refraction * along it, a faint cobalt glow, the icon's globe as a signature, a bigger * lead. Ink text, so it never fights the user's blue bubble. * ═══════════════════════════════════════════════════════════════════════ */ .navi-take { position: relative; border: 0; color: var(--navi-ink); margin-left: calc(-6px * var(--navi-k)); margin-right: calc(-6px * var(--navi-k)); padding: calc(16px * var(--navi-k)) calc(20px * var(--navi-k)) calc(18px * var(--navi-k)); border-radius: calc(30px * var(--navi-k)); background: var(--navi-take); -webkit-backdrop-filter: blur(var(--navi-take-blur)) saturate(1.5) brightness(1.04); backdrop-filter: blur(var(--navi-take-blur)) saturate(1.5) brightness(1.04); box-shadow: inset 0 calc(12px * var(--navi-k)) calc(20px * var(--navi-k)) calc(-8px * var(--navi-k)) rgba(255,255,255,.98), inset 0 calc(-3px * var(--navi-k)) 0 rgba(255,255,255,.85), inset 0 calc(-9px * var(--navi-k)) calc(12px * var(--navi-k)) calc(-6px * var(--navi-k)) rgba(31,75,230,.30), 0 0 0 calc(5px * var(--navi-k)) rgba(31,75,230,.05), 0 calc(32px * var(--navi-k)) calc(64px * var(--navi-k)) calc(-10px * var(--navi-k)) var(--navi-accent-glow), 0 calc(8px * var(--navi-k)) calc(16px * var(--navi-k)) rgba(6,13,26,.06); } .navi-take .navi-em { color: var(--navi-accent); } .navi-take .navi-kicker { color: var(--navi-accent-ink); } .navi-take .navi-take-sig { position: absolute; right: calc(14px * var(--navi-k)); top: calc(12px * var(--navi-k)); } .navi-take-lead { font-family: var(--navi-font-display); font-weight: 700; letter-spacing: var(--navi-track-display); line-height: 1.06; color: var(--navi-ink); } /* ═══════════════════════════════════════════════════════════════════════ * Bubble objects. Frontal, one specular top-left, shaded toward the bottom * edge. Never tilted. Bubble lands only on things you touch. * ═══════════════════════════════════════════════════════════════════════ */ /* spheres: the composer globe, the send button, "you are here" */ .navi-sphere { display: inline-flex; align-items: center; justify-content: center; flex: none; width: calc(32px * var(--navi-k)); height: calc(32px * var(--navi-k)); border-radius: 50%; color: #fff; background: var(--navi-sphere-blue); box-shadow: inset 0 calc(-5px * var(--navi-k)) calc(7px * var(--navi-k)) rgba(10,30,120,.5), inset 0 calc(2px * var(--navi-k)) calc(3px * var(--navi-k)) rgba(255,255,255,.6), 0 calc(6px * var(--navi-k)) calc(10px * var(--navi-k)) rgba(6,13,26,.35); } .navi-globe { position: relative; overflow: visible; } .navi-globe::after { content: ""; position: absolute; left: 22%; top: 33%; width: 44%; height: 32%; border-radius: 50% 40% 60% 40%; background: var(--navi-globe-land); box-shadow: inset 0 calc(1px * var(--navi-k)) 0 rgba(255,255,255,.7), inset 0 calc(-2px * var(--navi-k)) calc(2px * var(--navi-k)) rgba(0,60,0,.25); } /* jelly: the button family, molded resin (v3.5, 2026-09-11: the icon's * material on the things you press). One face with the light on its top-left * bevel, one solid side wall straight below (--wall), one ambient pool. No * outlines, no rim. White for a choice, blue for the primary, ink for the * quiet confirm ("keep this"). Add .navi-tilt for the icon's three-quarter * camera on a lone object (a hero button, the offer's yes, a standalone cue). */ .navi-jelly { --wall: #B4BECD; --hi: rgba(255,255,255,.95); --lo: rgba(6,13,26,.10); --pool: rgba(6,13,26,.22); --dx: 0px; --dy: calc(5px * var(--navi-k)); display: inline-flex; align-items: center; justify-content: center; gap: .5em; position: relative; padding: calc(9px * var(--navi-k)) calc(16px * var(--navi-k)); border-radius: 999px; border: 0; font-family: var(--navi-font-body); font-weight: 600; font-size: calc(14px * var(--navi-k)); letter-spacing: -0.01em; color: var(--navi-ink); background-image: radial-gradient(130% 100% at 14% 0%, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 55%), linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.74) 100%); box-shadow: inset 0 calc(1.5px * var(--navi-k)) 0 var(--hi), inset calc(1.5px * var(--navi-k)) 0 0 rgba(255,255,255,.7), inset 0 calc(-3px * var(--navi-k)) calc(6px * var(--navi-k)) calc(-3px * var(--navi-k)) var(--lo), var(--dx) var(--dy) 0 0 var(--wall), calc(var(--dx) * 1.5) calc(var(--dy) + 14px * var(--navi-k)) calc(26px * var(--navi-k)) calc(-10px * var(--navi-k)) var(--pool); transform: translateY(calc(-2px * var(--navi-k))); cursor: pointer; white-space: nowrap; text-decoration: none; } .navi-jelly--blue, .navi-jelly--volt { --wall: #1436B0; --hi: rgba(255,255,255,.85); --lo: rgba(0,10,80,.35); --pool: rgba(31,75,230,.40); color: #fff; border: 0; background-image: radial-gradient(130% 100% at 14% 0%, rgba(255,255,255,.62) 0%, rgba(255,255,255,0) 55%), linear-gradient(180deg, #8FAAFF 0%, #3560F2 60%, #2A50E0 100%); } .navi-jelly--ink { --wall: #05091A; --hi: rgba(255,255,255,.32); --lo: rgba(0,0,0,.5); --pool: rgba(6,13,26,.4); color: #fff; border: 0; background-image: radial-gradient(130% 100% at 14% 0%, rgba(255,255,255,.36) 0%, rgba(255,255,255,0) 55%), linear-gradient(180deg, #3A4A68 0%, #1B2740 60%, #101A30 100%); } .navi-jelly--sm { padding: calc(6px * var(--navi-k)) calc(12px * var(--navi-k)); font-size: calc(12.5px * var(--navi-k)); font-weight: 500; --dy: calc(4px * var(--navi-k)); } .navi-jelly--block { display: flex; width: 100%; } /* the icon's camera, for one object that stands alone */ .navi-tilt { --dx: calc(-3px * var(--navi-k)); --dy: calc(6px * var(--navi-k)); transform: perspective(700px) rotateX(9deg) rotateY(-10deg); transform-origin: 50% 60%; } /* the user's message: blue jelly with a tail corner, right-aligned. A message * is not a button, so it keeps the jelly gloss, not the molded wall. */ .navi-user-bubble { display: inline-block; max-width: 82%; margin-left: auto; padding: calc(10px * var(--navi-k)) calc(14px * var(--navi-k)); border-radius: calc(22px * var(--navi-k)) calc(22px * var(--navi-k)) calc(8px * var(--navi-k)) calc(22px * var(--navi-k)); font-family: var(--navi-font-body); font-size: calc(15px * var(--navi-k)); line-height: 1.35; color: #fff; border: 0; background: var(--navi-jelly-blue); box-shadow: inset 0 calc(6px * var(--navi-k)) calc(10px * var(--navi-k)) calc(-4px * var(--navi-k)) rgba(255,255,255,.85), inset 0 calc(-10px * var(--navi-k)) calc(14px * var(--navi-k)) calc(-8px * var(--navi-k)) rgba(0,10,80,.5), 0 calc(16px * var(--navi-k)) calc(32px * var(--navi-k)) calc(-6px * var(--navi-k)) rgba(31,75,230,.5), 0 calc(3px * var(--navi-k)) calc(8px * var(--navi-k)) rgba(31,75,230,.10); } /* @mention inside the user bubble: a translucent white pill with an initial dot */ .navi-mention { display: inline-flex; align-items: center; gap: calc(6px * var(--navi-k)); vertical-align: baseline; padding: calc(2px * var(--navi-k)) calc(10px * var(--navi-k)) calc(2px * var(--navi-k)) calc(4px * var(--navi-k)); margin: 0 calc(1px * var(--navi-k)); border-radius: 999px; border: 0; background: rgba(255,255,255,.22); box-shadow: inset 0 calc(2px * var(--navi-k)) calc(3px * var(--navi-k)) calc(-1px * var(--navi-k)) rgba(255,255,255,.55), inset 0 calc(-3px * var(--navi-k)) calc(4px * var(--navi-k)) calc(-3px * var(--navi-k)) rgba(0,10,80,.35); font-weight: 600; line-height: 1.2; white-space: nowrap; color: #fff; } .navi-mention > i { width: calc(20px * var(--navi-k)); height: calc(20px * var(--navi-k)); border-radius: 50%; background: #fff; color: var(--navi-accent); font-family: var(--navi-font-display); font-style: normal; font-weight: 700; font-size: calc(12px * var(--navi-k)); display: inline-flex; align-items: center; justify-content: center; flex: none; } /* the composer: glass shell, the icon's globe left, send sphere right */ .navi-composer { display: flex; align-items: center; gap: calc(10px * var(--navi-k)); height: calc(56px * var(--navi-k)); padding: calc(2px * var(--navi-k)) calc(8px * var(--navi-k)) calc(2px * var(--navi-k)) calc(10px * var(--navi-k)); border-radius: 999px; border: 0; background: var(--navi-jelly-white); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); box-shadow: inset 0 calc(6px * var(--navi-k)) calc(10px * var(--navi-k)) calc(-5px * var(--navi-k)) #fff, inset 0 calc(-8px * var(--navi-k)) calc(12px * var(--navi-k)) calc(-8px * var(--navi-k)) rgba(6,13,26,.12), 0 calc(14px * var(--navi-k)) calc(28px * var(--navi-k)) calc(-6px * var(--navi-k)) rgba(6,13,26,.20), 0 calc(3px * var(--navi-k)) calc(8px * var(--navi-k)) rgba(6,13,26,.04); font-family: var(--navi-font-body); font-size: calc(15px * var(--navi-k)); color: var(--navi-ink-muted); } .navi-composer > .navi-sphere { flex: none; } .navi-composer > span:not(.navi-sphere) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* small glass chrome: back button, map pills */ .navi-back, .navi-map-pill { display: inline-flex; align-items: center; justify-content: center; gap: .5em; flex: none; border: 0; background: var(--navi-jelly-white); color: var(--navi-ink); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: inset 0 calc(6px * var(--navi-k)) calc(10px * var(--navi-k)) calc(-5px * var(--navi-k)) #fff, inset 0 calc(-8px * var(--navi-k)) calc(12px * var(--navi-k)) calc(-8px * var(--navi-k)) rgba(6,13,26,.12), 0 calc(14px * var(--navi-k)) calc(28px * var(--navi-k)) calc(-6px * var(--navi-k)) rgba(6,13,26,.20), 0 calc(3px * var(--navi-k)) calc(8px * var(--navi-k)) rgba(6,13,26,.04); } .navi-back { width: calc(30px * var(--navi-k)); height: calc(30px * var(--navi-k)); border-radius: 50%; } .navi-map-pill { padding: calc(5px * var(--navi-k)) calc(10px * var(--navi-k)); border-radius: 999px; font-family: var(--navi-font-mono); font-size: calc(10px * var(--navi-k)); letter-spacing: 0.06em; } /* the do-pill: the one thing to do at this option ("go first", "sit outside, 6:15") */ .navi-do { --wall: #A9B8EA; --dx: 0px; --dy: calc(4px * var(--navi-k)); display: inline-flex; align-items: center; flex: none; border: 0; border-radius: 999px; position: relative; padding: calc(6px * var(--navi-k)) calc(10px * var(--navi-k)); font-family: var(--navi-font-body); font-size: calc(13.5px * var(--navi-k)); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; color: var(--navi-accent); background-image: radial-gradient(130% 100% at 14% 0%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 55%), linear-gradient(180deg, #E8EDFB 0%, #D6DEF8 100%); box-shadow: inset 0 calc(1.5px * var(--navi-k)) 0 rgba(255,255,255,.95), inset calc(1.5px * var(--navi-k)) 0 0 rgba(255,255,255,.7), inset 0 calc(-3px * var(--navi-k)) calc(6px * var(--navi-k)) calc(-3px * var(--navi-k)) rgba(6,13,26,.10), var(--dx) var(--dy) 0 0 var(--wall), 0 calc(14px * var(--navi-k)) calc(24px * var(--navi-k)) calc(-10px * var(--navi-k)) rgba(6,13,26,.2); transform: translateY(calc(-1px * var(--navi-k))); } /* the source tag: where a memory came from ("you told navi", "guessed") */ .navi-tag { display: inline-flex; align-items: center; white-space: nowrap; border: 0; border-radius: calc(6px * var(--navi-k)); padding: calc(4px * var(--navi-k)) calc(8px * var(--navi-k)); font-family: var(--navi-font-mono); font-size: calc(9.5px * var(--navi-k)); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navi-ink-soft); background: rgba(6,13,26,.07); } /* "navi noticed": a cobalt-tinted glass card, no outline, asks before it keeps */ .navi-noticed { border: 0; border-radius: calc(24px * var(--navi-k)); background: var(--navi-noticed); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: inset 0 calc(8px * var(--navi-k)) calc(14px * var(--navi-k)) calc(-6px * var(--navi-k)) rgba(255,255,255,.9), inset 0 calc(-10px * var(--navi-k)) calc(14px * var(--navi-k)) calc(-8px * var(--navi-k)) rgba(31,75,230,.28), 0 calc(22px * var(--navi-k)) calc(44px * var(--navi-k)) calc(-8px * var(--navi-k)) rgba(31,75,230,.26), 0 calc(4px * var(--navi-k)) calc(10px * var(--navi-k)) rgba(31,75,230,.05); } /* map pins: a bubble with a tail and a ground shadow. White for a pick, * ink (cobalt) for the top pick. The top pick glows; it does not get a ring. */ .navi-pin { position: absolute; z-index: 2; transform: translate(-50%, -100%); display: flex; align-items: center; justify-content: center; width: calc(30px * var(--navi-k)); height: calc(30px * var(--navi-k)); border-radius: 50%; font-family: var(--navi-font-mono); font-weight: 700; font-size: calc(11px * var(--navi-k)); color: var(--navi-ink); background: var(--navi-coin-white); box-shadow: inset 0 calc(-5px * var(--navi-k)) calc(7px * var(--navi-k)) rgba(6,13,26,.22), inset 0 calc(2px * var(--navi-k)) calc(2px * var(--navi-k)) #fff, 0 calc(8px * var(--navi-k)) calc(12px * var(--navi-k)) rgba(6,13,26,.35); } .navi-pin::after { content: ""; position: absolute; left: 50%; bottom: calc(-6px * var(--navi-k)); z-index: -1; width: calc(11px * var(--navi-k)); height: calc(11px * var(--navi-k)); border-radius: 1px 1px 3px 1px; background: #D4DCE8; transform: translateX(-50%) rotate(45deg); } .navi-pin::before { content: ""; position: absolute; left: 50%; bottom: calc(-14px * var(--navi-k)); z-index: -2; width: calc(16px * var(--navi-k)); height: calc(6px * var(--navi-k)); border-radius: 50%; background: rgba(6,13,26,.3); transform: translateX(-50%); filter: blur(calc(2px * var(--navi-k))); } .navi-pin--ink, .navi-pin--volt { color: #fff; background: var(--navi-coin-ink); box-shadow: inset 0 calc(-5px * var(--navi-k)) calc(7px * var(--navi-k)) rgba(10,30,120,.5), inset 0 calc(2px * var(--navi-k)) calc(2px * var(--navi-k)) rgba(255,255,255,.6), 0 calc(8px * var(--navi-k)) calc(12px * var(--navi-k)) rgba(6,13,26,.35), 0 calc(14px * var(--navi-k)) calc(36px * var(--navi-k)) rgba(31,75,230,.45); } .navi-pin--ink::after, .navi-pin--volt::after { background: #1A3FCC; } /* the photo pin (v3.4): the place is its photo. A column: name chip · photo coin · tail · ground shadow. * --pp is the coin size. The marker element is anchored top-left at the tail's point by the wrapper below. */ .navi-ppin { --pp: calc(46px * var(--navi-k)); position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: calc(5px * var(--navi-k)); width: calc(150px * var(--navi-k)); transform: translate(-50%, calc(-100% + 4px * var(--navi-k))); transition: transform var(--navi-dur-slow) var(--navi-ease); } .navi-ppin-chip { max-width: calc(150px * var(--navi-k)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: calc(5px * var(--navi-k)) calc(10px * var(--navi-k)); border-radius: 999px; border: 0; font-family: var(--navi-font-display); font-weight: 700; font-size: calc(11px * var(--navi-k)); letter-spacing: -0.01em; color: var(--navi-ink); background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.72) 100%); -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5); box-shadow: inset 0 calc(3px * var(--navi-k)) calc(6px * var(--navi-k)) calc(-3px * var(--navi-k)) #fff, inset 0 calc(-5px * var(--navi-k)) calc(8px * var(--navi-k)) calc(-5px * var(--navi-k)) rgba(6,13,26,.12), 0 calc(8px * var(--navi-k)) calc(16px * var(--navi-k)) calc(-6px * var(--navi-k)) rgba(6,13,26,.3); transition: all var(--navi-dur-base) var(--navi-ease); } .navi-ppin-coin { position: relative; width: var(--pp); height: var(--pp); border-radius: 50%; overflow: hidden; flex: none; background: #C9D2E0; isolation: isolate; box-shadow: 0 calc(10px * var(--navi-k)) calc(16px * var(--navi-k)) calc(-4px * var(--navi-k)) rgba(6,13,26,.4); transition: transform var(--navi-dur-slow) var(--navi-ease), box-shadow var(--navi-dur-slow) var(--navi-ease); } .navi-ppin-coin img { width: 100%; height: 100%; object-fit: cover; display: block; } /* the bubble surface over the photo: white rim, one highlight top, shade below */ .navi-ppin-coin::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 0 calc(2.5px * var(--navi-k)) #fff, inset 0 calc(6px * var(--navi-k)) calc(10px * var(--navi-k)) calc(-4px * var(--navi-k)) rgba(255,255,255,.75), inset 0 calc(-8px * var(--navi-k)) calc(12px * var(--navi-k)) calc(-6px * var(--navi-k)) rgba(6,13,26,.35); } .navi-ppin-open { position: absolute; right: 6%; top: 6%; width: calc(10px * var(--navi-k)); height: calc(10px * var(--navi-k)); border-radius: 50%; background: linear-gradient(180deg, #FFF0B8, #F0A31C); box-shadow: 0 0 0 calc(1.5px * var(--navi-k)) #fff, 0 calc(2px * var(--navi-k)) calc(4px * var(--navi-k)) rgba(120,80,0,.35); } .navi-ppin-tail { width: calc(11px * var(--navi-k)); height: calc(11px * var(--navi-k)); margin-top: calc(-11px * var(--navi-k)); border-radius: 1px 1px 3px 1px; background: #fff; transform: rotate(45deg); box-shadow: calc(2px * var(--navi-k)) calc(2px * var(--navi-k)) calc(3px * var(--navi-k)) rgba(6,13,26,.15); } .navi-ppin-ground { width: calc(18px * var(--navi-k)); height: calc(6px * var(--navi-k)); margin-top: calc(-2px * var(--navi-k)); border-radius: 50%; background: rgba(6,13,26,.3); filter: blur(calc(2px * var(--navi-k))); } /* selected: bigger, a cobalt glow (no ring), the chip goes cobalt jelly, the tail follows */ .navi-ppin--selected .navi-ppin-coin { transform: scale(1.3); box-shadow: 0 calc(16px * var(--navi-k)) calc(28px * var(--navi-k)) calc(-6px * var(--navi-k)) rgba(31,75,230,.6), 0 calc(4px * var(--navi-k)) calc(10px * var(--navi-k)) rgba(31,75,230,.15); } .navi-ppin--selected .navi-ppin-coin::after { box-shadow: inset 0 0 0 calc(3px * var(--navi-k)) #fff, inset 0 calc(6px * var(--navi-k)) calc(10px * var(--navi-k)) calc(-4px * var(--navi-k)) rgba(255,255,255,.75), inset 0 calc(-8px * var(--navi-k)) calc(12px * var(--navi-k)) calc(-6px * var(--navi-k)) rgba(6,13,26,.35); } .navi-ppin--selected .navi-ppin-chip { color: #fff; background: var(--navi-jelly-blue); box-shadow: inset 0 calc(4px * var(--navi-k)) calc(8px * var(--navi-k)) calc(-3px * var(--navi-k)) rgba(255,255,255,.85), inset 0 calc(-6px * var(--navi-k)) calc(10px * var(--navi-k)) calc(-6px * var(--navi-k)) rgba(0,10,80,.5), 0 calc(10px * var(--navi-k)) calc(20px * var(--navi-k)) calc(-4px * var(--navi-k)) rgba(31,75,230,.5); } .navi-ppin--selected .navi-ppin-tail { background: #2F5BF0; margin-top: calc(-6px * var(--navi-k)); } .navi-ppin--selected { gap: calc(12px * var(--navi-k)); } /* ghost: a skipped or remembered place. faded, grey, still there */ .navi-ppin--ghost { opacity: .62; } .navi-ppin--ghost .navi-ppin-coin { transform: scale(.82); } .navi-ppin--ghost .navi-ppin-coin img { filter: grayscale(1); } .navi-ppin--ghost .navi-ppin-chip { color: var(--navi-ink-muted); } /* the card rail (v3.4): glass cards under the map, one per place, snap-scrolling; page dots above */ .navi-rail-wrap { position: relative; padding-bottom: calc(16px * var(--navi-k)); background: linear-gradient(180deg, transparent, rgba(231,237,244,.55) 60%); } .navi-rail-dots { display: flex; justify-content: center; gap: calc(6px * var(--navi-k)); margin-bottom: calc(8px * var(--navi-k)); } .navi-rail-dots i { width: calc(6px * var(--navi-k)); height: calc(6px * var(--navi-k)); border-radius: 999px; background: rgba(6,13,26,.18); transition: all var(--navi-dur-slow) var(--navi-ease); } .navi-rail-dots i.on { width: calc(18px * var(--navi-k)); background: var(--navi-accent); } .navi-rail { display: flex; gap: calc(10px * var(--navi-k)); overflow-x: auto; scroll-snap-type: x mandatory; padding: calc(8px * var(--navi-k)) calc(45px * var(--navi-k)) calc(10px * var(--navi-k)); scrollbar-width: none; } .navi-rail::-webkit-scrollbar { display: none; } .navi-rail-card { flex: none; scroll-snap-align: center; display: flex; align-items: center; gap: calc(12px * var(--navi-k)); border: 0; cursor: pointer; text-align: left; padding: calc(10px * var(--navi-k)) calc(14px * var(--navi-k)) calc(10px * var(--navi-k)) calc(10px * var(--navi-k)); border-radius: calc(24px * var(--navi-k)); background: linear-gradient(180deg, rgba(255,255,255,.84) 0%, rgba(255,255,255,.62) 100%); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: inset 0 calc(8px * var(--navi-k)) calc(14px * var(--navi-k)) calc(-6px * var(--navi-k)) #fff, inset 0 calc(-12px * var(--navi-k)) calc(18px * var(--navi-k)) calc(-10px * var(--navi-k)) rgba(6,13,26,.12), 0 calc(22px * var(--navi-k)) calc(44px * var(--navi-k)) calc(-8px * var(--navi-k)) rgba(6,13,26,.20); font-family: var(--navi-font-body); color: var(--navi-ink); transition: transform var(--navi-dur-slow) var(--navi-ease), opacity var(--navi-dur-slow) var(--navi-ease), box-shadow var(--navi-dur-slow) var(--navi-ease); } .navi-rail-card--active { box-shadow: inset 0 calc(8px * var(--navi-k)) calc(14px * var(--navi-k)) calc(-6px * var(--navi-k)) #fff, inset 0 calc(-3px * var(--navi-k)) 0 rgba(255,255,255,.85), inset 0 calc(-9px * var(--navi-k)) calc(12px * var(--navi-k)) calc(-6px * var(--navi-k)) rgba(31,75,230,.30), 0 calc(26px * var(--navi-k)) calc(50px * var(--navi-k)) calc(-12px * var(--navi-k)) rgba(31,75,230,.4), 0 calc(4px * var(--navi-k)) calc(10px * var(--navi-k)) rgba(31,75,230,.06); } .navi-rail-card--muted { transform: scale(.96); opacity: .72; } /* the name tag beside the top pick */ .navi-pin-tag { position: absolute; white-space: nowrap; border: 0; border-radius: 999px; padding: calc(9px * var(--navi-k)) calc(13px * var(--navi-k)); font-family: var(--navi-font-display); font-weight: 700; font-size: calc(17px * var(--navi-k)); line-height: 1; letter-spacing: -0.02em; color: #fff; background: var(--navi-ink); box-shadow: inset 0 calc(2px * var(--navi-k)) 0 rgba(255,255,255,.18), 0 calc(8px * var(--navi-k)) calc(18px * var(--navi-k)) calc(-6px * var(--navi-k)) rgba(6,13,26,.4); } .navi-me { position: absolute; z-index: 2; transform: translate(-50%, -50%); width: calc(14px * var(--navi-k)); height: calc(14px * var(--navi-k)); border-radius: 50%; background: radial-gradient(circle at 30% 24%, #fff 0, #7A98FF 25%, #1F4BE6 100%); border: calc(2px * var(--navi-k)) solid #fff; box-shadow: 0 0 0 calc(5px * var(--navi-k)) rgba(31,75,230,.22), 0 calc(4px * var(--navi-k)) calc(8px * var(--navi-k)) rgba(6,13,26,.3); } .navi-route { fill: none; stroke: #fff; stroke-width: calc(3.5px * var(--navi-k)); stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 calc(2px * var(--navi-k)) calc(2px * var(--navi-k)) rgba(6,13,26,.3)); opacity: .95; } /* the light cue (amber, canon 2026-09-11): golden hour, open now, leave by. * The only warm object on a screen; one per take. Floats, no outline. */ .navi-lite { --wall: #B8781A; --dx: 0px; --dy: calc(4px * var(--navi-k)); display: inline-flex; align-items: center; gap: .4em; vertical-align: middle; border: 0; position: relative; padding: calc(2px * var(--navi-k)) calc(8px * var(--navi-k)); border-radius: 999px; font-family: var(--navi-font-mono); font-size: calc(10px * var(--navi-k)); letter-spacing: 0.08em; color: #3A2A08; background-image: radial-gradient(130% 100% at 14% 0%, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 55%), linear-gradient(180deg, #FFF3C4 0%, #FFCF57 60%, #F2A824 100%); box-shadow: inset 0 calc(1.5px * var(--navi-k)) 0 rgba(255,255,255,.95), inset calc(1.5px * var(--navi-k)) 0 0 rgba(255,255,255,.6), inset 0 calc(-3px * var(--navi-k)) calc(6px * var(--navi-k)) calc(-3px * var(--navi-k)) rgba(150,90,0,.35), var(--dx) var(--dy) 0 0 var(--wall), 0 calc(12px * var(--navi-k)) calc(22px * var(--navi-k)) calc(-10px * var(--navi-k)) rgba(200,120,0,.35); transform: translateY(calc(-1px * var(--navi-k))); } /* an inline cue in a sentence stays flat on the line: no wall, no lift */ .navi-lite--inline { --dy: 0px; --wall: transparent; transform: none; box-shadow: inset 0 calc(1.5px * var(--navi-k)) 0 rgba(255,255,255,.95), inset 0 calc(-3px * var(--navi-k)) calc(5px * var(--navi-k)) calc(-3px * var(--navi-k)) rgba(150,90,0,.35), 0 calc(4px * var(--navi-k)) calc(8px * var(--navi-k)) calc(-2px * var(--navi-k)) rgba(200,120,0,.3); } /* vibe tags: frosted chips with a tone dot, no outline. Word-level only. */ .navi-vibe { display: inline-flex; align-items: center; gap: calc(6px * var(--navi-k)); border: 0; padding: calc(4px * var(--navi-k)) calc(10px * var(--navi-k)) calc(4px * var(--navi-k)) calc(8px * var(--navi-k)); border-radius: 999px; font-family: var(--navi-font-body); font-size: calc(11px * var(--navi-k)); font-weight: 500; letter-spacing: -0.01em; color: var(--navi-ink); white-space: nowrap; background: linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.5) 100%); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 calc(4px * var(--navi-k)) calc(6px * var(--navi-k)) calc(-3px * var(--navi-k)) #fff, inset 0 calc(-5px * var(--navi-k)) calc(8px * var(--navi-k)) calc(-5px * var(--navi-k)) rgba(6,13,26,.10), 0 calc(6px * var(--navi-k)) calc(14px * var(--navi-k)) calc(-4px * var(--navi-k)) rgba(6,13,26,.16); } .navi-vibe-dot { width: calc(7px * var(--navi-k)); height: calc(7px * var(--navi-k)); border-radius: 50%; flex: none; background: radial-gradient(circle at 30% 24%, #fff 0, var(--dot) 45%, color-mix(in srgb, var(--dot) 60%, black) 100%); box-shadow: 0 0 0 calc(3px * var(--navi-k)) color-mix(in srgb, var(--dot) 18%, transparent), 0 calc(2px * var(--navi-k)) calc(4px * var(--navi-k)) rgba(6,13,26,.2); } .navi-vibe--dark { background: var(--navi-jelly-ink); color: #fff; } /* ═══════════════════════════════════════════════════════════════════════ * Variants (in code, not in screens). Coins are a filled disc; the option * marker is the photo Thumb, and scores are retired, so coins only appear * as glyph coins if a stop-type marker is ever wanted. * ═══════════════════════════════════════════════════════════════════════ */ .navi-coin { display: inline-flex; align-items: center; justify-content: center; flex: none; width: calc(28px * var(--navi-k)); height: calc(28px * var(--navi-k)); border-radius: 50%; font-family: var(--navi-font-mono); font-weight: 700; font-size: calc(12px * var(--navi-k)); color: #fff; background: var(--navi-coin-ink); box-shadow: inset 0 calc(-4px * var(--navi-k)) calc(6px * var(--navi-k)) rgba(10,30,120,.5), inset 0 calc(2px * var(--navi-k)) calc(3px * var(--navi-k)) rgba(255,255,255,.6), 0 calc(6px * var(--navi-k)) calc(12px * var(--navi-k)) rgba(31,75,230,.35); } .navi-coin--white { color: var(--navi-ink); background: var(--navi-coin-white); box-shadow: inset 0 calc(-5px * var(--navi-k)) calc(7px * var(--navi-k)) rgba(6,13,26,.22), inset 0 calc(2px * var(--navi-k)) calc(2px * var(--navi-k)) #fff, 0 calc(8px * var(--navi-k)) calc(12px * var(--navi-k)) rgba(6,13,26,.35); } .navi-coin--blue, .navi-coin--volt { color: #fff; background: var(--navi-coin-ink); } .navi-coin--amber { color: #fff; background: radial-gradient(circle at 30% 24%, #fff 0, rgba(255,255,255,.85) 8%, #FFD98A 22%, #F5A524 55%, #B86D00 100%); box-shadow: inset 0 calc(-4px * var(--navi-k)) calc(6px * var(--navi-k)) rgba(120,60,0,.5), inset 0 calc(2px * var(--navi-k)) calc(3px * var(--navi-k)) rgba(255,255,255,.7), 0 calc(8px * var(--navi-k)) calc(14px * var(--navi-k)) calc(-2px * var(--navi-k)) rgba(245,165,36,.5); } .navi-coin--coral { color: #fff; background: radial-gradient(circle at 30% 24%, #fff 0, rgba(255,255,255,.85) 8%, #FFB3C2 22%, #FF6B8A 55%, #C2385A 100%); box-shadow: inset 0 calc(-4px * var(--navi-k)) calc(6px * var(--navi-k)) rgba(120,20,50,.5), inset 0 calc(2px * var(--navi-k)) calc(3px * var(--navi-k)) rgba(255,255,255,.7), 0 calc(8px * var(--navi-k)) calc(14px * var(--navi-k)) calc(-2px * var(--navi-k)) rgba(255,107,138,.5); } .navi-coin--lilac { color: #fff; background: radial-gradient(circle at 30% 24%, #fff 0, rgba(255,255,255,.85) 8%, #D9C8FF 22%, #B08FFF 55%, #6E4BC8 100%); box-shadow: inset 0 calc(-4px * var(--navi-k)) calc(6px * var(--navi-k)) rgba(60,30,140,.5), inset 0 calc(2px * var(--navi-k)) calc(3px * var(--navi-k)) rgba(255,255,255,.7), 0 calc(8px * var(--navi-k)) calc(14px * var(--navi-k)) calc(-2px * var(--navi-k)) rgba(176,143,255,.5); } .navi-coin > svg { width: 56%; height: 56%; display: block; filter: drop-shadow(0 calc(1px * var(--navi-k)) calc(1px * var(--navi-k)) rgba(0,0,0,.25)); } /* ═══════════════════════════════════════════════════════════════════════ * The planning card (v3.2, from the Whimsical comps): the plan rail inside * the chat before it is locked. Dots are coins: white = proposed, cobalt = * anchor / locked, ghost = placeholder (frosted, no dashed outline). * ═══════════════════════════════════════════════════════════════════════ */ .navi-coin--ghost { color: var(--navi-ink-muted); background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.35) 100%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 calc(3px * var(--navi-k)) calc(5px * var(--navi-k)) calc(-2px * var(--navi-k)) #fff, inset 0 calc(-4px * var(--navi-k)) calc(6px * var(--navi-k)) calc(-4px * var(--navi-k)) rgba(6,13,26,.14), 0 calc(4px * var(--navi-k)) calc(8px * var(--navi-k)) calc(-2px * var(--navi-k)) rgba(6,13,26,.12); } /* the rail variant: photo thumbs on a route line, the walk between them */ .navi-plan-rail { position: relative; } .navi-plan-rail::before { content: ""; position: absolute; left: calc(19px * var(--navi-k)); top: calc(20px * var(--navi-k)); bottom: calc(20px * var(--navi-k)); width: calc(4px * var(--navi-k)); border-radius: 999px; background: #fff; box-shadow: 0 calc(1px * var(--navi-k)) calc(2px * var(--navi-k)) rgba(6,13,26,.25), inset 0 0 0 calc(1px * var(--navi-k)) rgba(31,75,230,.10); } .navi-plan-stop { position: relative; display: flex; gap: calc(12px * var(--navi-k)); align-items: flex-start; padding: calc(7px * var(--navi-k)) 0; } .navi-plan-stop-marker { flex: none; width: calc(46px * var(--navi-k)); display: flex; justify-content: center; } .navi-plan-stop--anchor .navi-plan-stop-marker > span > span:first-child { box-shadow: 0 0 0 calc(4px * var(--navi-k)) rgba(31,75,230,.10), 0 calc(12px * var(--navi-k)) calc(22px * var(--navi-k)) calc(-6px * var(--navi-k)) rgba(31,75,230,.45), 0 calc(2px * var(--navi-k)) calc(5px * var(--navi-k)) rgba(6,13,26,.08) !important; } .navi-plan-stop--ghost { opacity: .75; } /* the walk between two stops: tappable (swap the route), reads as a line, not a button */ .navi-plan-walk { display: inline-flex; align-items: center; gap: calc(5px * var(--navi-k)); margin-top: calc(6px * var(--navi-k)); padding: calc(3px * var(--navi-k)) calc(8px * var(--navi-k)) calc(3px * var(--navi-k)) calc(4px * var(--navi-k)); margin-left: calc(-4px * var(--navi-k)); border: 0; border-radius: 999px; background: transparent; cursor: pointer; text-align: left; font-family: var(--navi-font-mono); font-size: calc(10px * var(--navi-k)); letter-spacing: 0.04em; color: var(--navi-ink-muted); line-height: 1.4; } .navi-plan-walk:hover { background: rgba(6,13,26,.05); color: var(--navi-ink-soft); } .navi-plan-walk > svg:last-child { opacity: .6; margin-left: calc(2px * var(--navi-k)); } /* the ghost thumb: a placeholder stop, frosted, its number muted */ .navi-thumb-ghost { display: inline-flex; align-items: center; justify-content: center; flex: none; font-family: var(--navi-font-mono); font-weight: 700; font-size: calc(12px * var(--navi-k)); color: var(--navi-ink-muted); background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.35) 100%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 calc(3px * var(--navi-k)) calc(5px * var(--navi-k)) calc(-2px * var(--navi-k)) #fff, inset 0 calc(-6px * var(--navi-k)) calc(10px * var(--navi-k)) calc(-6px * var(--navi-k)) rgba(6,13,26,.14), 0 calc(8px * var(--navi-k)) calc(16px * var(--navi-k)) calc(-6px * var(--navi-k)) rgba(6,13,26,.16); } .navi-radio { flex: none; width: calc(18px * var(--navi-k)); height: calc(18px * var(--navi-k)); border-radius: 50%; background: var(--navi-sphere-blue); box-shadow: inset 0 0 0 calc(4px * var(--navi-k)) #fff, inset 0 calc(-3px * var(--navi-k)) calc(4px * var(--navi-k)) rgba(10,30,120,.4), 0 calc(3px * var(--navi-k)) calc(6px * var(--navi-k)) rgba(31,75,230,.3); } /* ── ConversationCover (v3.6): the six drawn neutral covers. Illustrative colour, not UI emphasis. ── */ .navi-cover { display: block; } .navi-cover--navi-globe { background: radial-gradient(120% 90% at 30% 20%, #E9EEFF 0%, #C9D6FF 45%, #7E9CF5 100%); } .navi-cover--city-grid { background-color: #DCE6F8; background-image: linear-gradient(rgba(255,255,255,.85) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(255,255,255,.85) 1.5px, transparent 1.5px), linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px); background-size: 34px 34px, 34px 34px, 8.5px 8.5px, 8.5px 8.5px; } .navi-cover--horizon { background: linear-gradient(180deg, #DCE8FF 0%, #BFD3FF 44%, #6C93F2 52%, #2A56EA 100%); } .navi-cover--horizon::before { content: ""; position: absolute; left: 50%; top: 52%; width: 38%; padding-top: 38%; margin: -34% 0 0 -19%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFF6D6, #FFCF57 60%, #F5A524); box-shadow: 0 0 22px 6px rgba(255,207,87,.45); } .navi-cover--horizon::after { content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 1px; background: rgba(255,255,255,.55); } .navi-cover--topographic { background: linear-gradient(160deg, #EDF1F8 0%, #D8E1F2 100%); } .navi-cover--spark { background: linear-gradient(150deg, #C9B8FF 0%, #7F8CFF 55%, #1F4BE6 100%); } .navi-cover--abstract { background: linear-gradient(170deg, #F2F5FA 0%, #D6DFF2 100%); } /* ── the poster (v3.7, 2026-09-14, Thais): lambe-lambe, paper glued to the page ───────────────────── * What navi holds about you, on home and in memory. Paper on paper: no shadow, no edge of light; torn on * every side (the polygon comes from torn() in the JSX, seeded so a scrap always tears the same way), a * white fiber edge, print grain, a slight skew. The kicker is a stamp. Tape across a corner is the glass * element. One poster per screen, never inside a chat answer, never next to a take. Tones: paper, the * cobalt tint, cobalt (white type), glass. Type on paper is ink. */ .navi-scrap { position: absolute; } .navi-scrap > .navi-scrap-fiber { position: absolute; inset: calc(-3px * var(--navi-k)); background: #FFFDF7; } .navi-scrap > .navi-scrap-face { position: absolute; inset: 0; padding: calc(12px * var(--navi-k)) calc(14px * var(--navi-k)); background-color: #FFFFFF; background-image: url("data:image/svg+xml;utf8,"); } .navi-scrap--tint > .navi-scrap-face { background-color: var(--navi-accent-soft, #DCE3FB); } .navi-scrap--cobalt > .navi-scrap-face { background-color: var(--navi-accent); color: #fff; } .navi-scrap--glass > .navi-scrap-face { background-color: rgba(255,255,255,.42); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); background-image: none; } .navi-scrap--glass > .navi-scrap-fiber { background: rgba(255,255,255,.85); } .navi-tape { position: absolute; height: calc(22px * var(--navi-k)); width: calc(76px * var(--navi-k)); background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(3px) saturate(1.2); backdrop-filter: blur(3px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 1px 2px rgba(6,13,26,.06); background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 2px, rgba(255,255,255,0) 2px 5px); clip-path: polygon(2% 0, 98% 0, 100% 18%, 97% 36%, 100% 55%, 98% 100%, 2% 100%, 0 80%, 3% 60%, 0 40%, 2% 20%); } .navi-stamp { display: inline-block; padding: calc(3px * var(--navi-k)) calc(8px * var(--navi-k)); border-radius: calc(3px * var(--navi-k)); background: var(--navi-accent); color: #fff; font-family: var(--navi-font-display); font-weight: 700; font-size: calc(10px * var(--navi-k)); letter-spacing: .12em; text-transform: uppercase; transform: rotate(-3deg); transform-origin: 0 100%; } .navi-scrap--cobalt .navi-stamp { background: #FFFDF7; color: var(--navi-accent); } .navi-poster-type { font-family: var(--navi-font-display); font-weight: 800; letter-spacing: -.035em; line-height: 1.0; color: var(--navi-ink); }