/* GENERATED by shared/sync.mjs - DO NOT EDIT. Source: shared/css/. Regenerate: node shared/sync.mjs */ /* Design tokens: colours, glass, the z-scale and control sizes. ONE source for both apps. Until now each app carried its own copy, with comments on both sides claiming to be "kept identical" to the other, which is the arrangement that eventually drifts. Vendored by shared/sync.mjs into apps//assets/css/nl-shared.css; never edit the generated file. */ :root { color-scheme: dark; --bg-dark: #050505; --bg-panel: #0d0d0d; --bg-surface: #0a0a0a; --bg-elevated: #111; --bg-tooltip: #1a1a1a; --accent-blue: #3b82f6; --accent-blue-hover: #2563eb; --text-muted: #6b7280; /* Categorical data-viz palette (mirrors NL.components.CAT_PALETTE). Color is no longer pickable per entity; series hues come from here. */ --chart-1: #3b82f6; --chart-2: #f59e0b; --chart-3: #10b981; --chart-4: #ec4899; --chart-5: #06b6d4; --chart-6: #f97316; --chart-7: #8b5cf6; --chart-8: #84cc16; /* Semantic colors */ --color-success: #22c55e; --color-warning: #eab308; --color-error: #ef4444; /* Text hierarchy */ --text-primary: #ffffff; --text-secondary: #d1d5db; --text-tertiary: #9ca3af; --text-disabled: #374151; /* Dim gray scale (accessible — ≥3:1 on --bg-dark) */ --dim-1: #555; --dim-2: #666; --dim-3: #777; --dim-4: #888; --dim-5: #aaa; --dim-6: #bbb; --dim-7: #d4d4d4; /* Chrome base (flips white↔black for light mode) */ --chrome-rgb: 255, 255, 255; --w02: rgba(var(--chrome-rgb), 0.02); --w03: rgba(var(--chrome-rgb), 0.03); --w04: rgba(var(--chrome-rgb), 0.04); --w05: rgba(var(--chrome-rgb), 0.05); --w06: rgba(var(--chrome-rgb), 0.06); --w07: rgba(var(--chrome-rgb), 0.07); --w08: rgba(var(--chrome-rgb), 0.08); --glass-bg: var(--w03); --glass-border: var(--w08); /* Z-index scale */ --z-content: 10; --z-header: 30; --z-popup: 40; --z-sidebar: 100; --z-mobile-overlay: 149; --z-mobile-sidebar: 150; --z-mobile-toggle: 200; --z-modal: 300; /* every dialog: openModal, entityModal, static full-screen modals */ --z-modal-nested: 350; --z-notif-overlay: 400; /* NLShared.confirm — sits above modals */ --z-notif: 410; --z-fab: 450; /* chat fab + popover float above modals (chat stays reachable) */ --z-popover: 460; /* chat popover, searchselect dropdown (.nl-ss-pop) */ --z-toast: 500; /* NLShared.notice banner stack */ --z-consent: 550; /* RGPD consent gate — legal, must sit above everything */ /* Sidebar width (toggled by .sidebar-collapsed on ) */ --sidebar-w: 260px; } /* mosaic.css — o mosaico diagonal do hero (par do shared/js/mosaic.js). Camadas dentro do hero: mosaico (0) → véu (1) → conteúdo (o hero põe o seu texto acima com z-index próprio). O hero anfitrião precisa apenas de position: relative e overflow: hidden. */ /* a máscara vive no wrapper, que não roda: desvanece o mosaico para a base, onde a fila de marcas/áreas assenta em quase-preto quieto */ .nl-mosaic-wrap { position: absolute; inset: 0; z-index: 0; pointer-events: none; contain: paint; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 94%); mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 94%); } /* véu PLANO (revisão do João: o radial escurecia 93% no centro e 20% nas bordas e lia-se como uma nódoa preta oval — "o preto") */ .nl-mosaic-veu { position: absolute; inset: 0; z-index: 1; pointer-events: none; /* 0.6 matava o mosaico nas fases com cards escuros ("nem dá para ver quase nada" — João, 2026-08-28); 0.48 + opacidade 0.5 devolve-lhe vida sem roubar o palco ao texto */ background: rgba(5, 7, 13, 0.48); } /* O ÂNGULO É O BOTÃO. Medido no site: das duas coisas que governam a fluidez deste mosaico, a rotação é a maior — a 45 graus (o pior caso possível para cobrir um retângulo) o número cai a metade contra 0 graus. Se em máquinas fracas engasgar, baixar aqui: 30deg ou 20deg mantêm o efeito e pintam bastante menos. É decisão de desenho. A opacidade idem. */ .nl-mosaic { --nl-mosaic-ang: 45deg; --nl-mosaic-op: 0.5; position: absolute; z-index: 0; left: 50%; top: 50%; display: flex; gap: 10px; transform: translate(-50%, -50%) rotate(var(--nl-mosaic-ang)); opacity: var(--nl-mosaic-op); pointer-events: none; contain: paint; } .nl-mosaic-col { flex: 1 0 0; border-radius: 6px; background-repeat: repeat-y; background-position: 0 0; animation: nl-mos-sobe var(--dur, 70s) linear infinite; will-change: transform; } .nl-mosaic-col.desce { animation-name: nl-mos-desce; } @keyframes nl-mos-sobe { from { transform: translateY(0); } to { transform: translateY(calc(-1 * var(--passo))); } } @keyframes nl-mos-desce { from { transform: translateY(calc(-1 * var(--passo))); } to { transform: translateY(0); } } /* fora do ecrã não há nada para ver, e uma animação parada custa zero por frame: o IntersectionObserver do componente põe e tira este atributo */ .nl-mosaic[data-parado] .nl-mosaic-col { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .nl-mosaic-col { animation: none; } } /* ───────────────────────────────────────────────────────────── cards.css — card global de trabalho (NL.cards, shared/js/cards.js). Estilo canónico = work-card do portfólio: capa cover, overlay em gradiente, kicker+título sobre a imagem, hover = zoom+blur da capa e reveal da descrição. Raio configurável por app: --nlc-radius (default 1.5rem). ───────────────────────────────────────────────────────────── */ .nlc-card { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--nlc-radius, 1.5rem); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); background: #0a0a0a; color: #fff; text-decoration: none; text-align: left; cursor: pointer; padding: 0; font: inherit; transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .nlc-card:hover { border-color: rgba(59, 130, 246, 0.45); transform: translateY(-4px); } button.nlc-card { appearance: none; -webkit-appearance: none; } /* capa */ .nlc-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #0a0a0a; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .nlc-card:hover .nlc-bg { transform: scale(1.08); filter: blur(3px) brightness(0.7); } /* capa "contain" (flyers/prints/ecrãs): imagem inteira + a própria capa desfocada atrás */ .nlc-card.fit .nlc-bg { background-size: contain; } .nlc-bgblur { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(18px) brightness(0.55); transform: scale(1.15); } /* fallback sem capa: gradiente + ícone grande */ .nlc-bg.grad { background: radial-gradient(115% 80% at 50% 40%, rgba(59, 130, 246, 0.22) 0%, transparent 58%), linear-gradient(135deg, #16213e 0%, #0f1830 50%, #07090f 100%); } .nlc-card:hover .nlc-bg.grad { transform: scale(1.04); filter: none; } .nlc-ico { width: 92px; height: 92px; color: #fff; opacity: 0.95; stroke-width: 1.3; filter: drop-shadow(0 6px 26px rgba(59, 130, 246, 0.55)); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); } .nlc-card:hover .nlc-ico { transform: translateY(-1.4rem) scale(0.9); } /* ícone-badge sobre a capa (capa fotográfica + logotipo/ícone por cima) */ .nlc-iconbadge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; filter: drop-shadow(0 6px 26px rgba(0, 0, 0, 0.6)); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); z-index: 2; pointer-events: none; } .nlc-card:hover .nlc-iconbadge { transform: translate(-50%, -50%) translateY(-1.4rem) scale(0.92); } .nlc-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0.1) 100%); } /* pills sobre o card: badge (topo-esq) e corner (topo-dir, ex. "3D") */ .nlc-badge, .nlc-corner { position: absolute; top: 0.9rem; z-index: 3; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 9px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.4rem 0.75rem; border-radius: 9999px; color: #fff; background: rgba(5, 5, 5, 0.5); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(10px); transition: background 0.3s, color 0.3s; } .nlc-badge { left: 0.9rem; pointer-events: none; } .nlc-corner { right: 0.9rem; } .nlc-card:hover .nlc-corner { background: #fff; color: #111; } /* conteúdo */ .nlc-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.75rem; display: block; transform: translateY(2.7rem); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); } .nlc-title, .nlc-desc { display: block; } .nlc-card:hover .nlc-body { transform: translateY(0); } .nlc-card.nodesc .nlc-body { transform: none; } .nlc-kicker { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 9px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-blue, #3b82f6); margin-bottom: 0.6rem; } .nlc-kicker i { opacity: 0.85; } .nlc-title { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 0.6rem; color: #fff; } .nlc-card.nodesc .nlc-title { margin-bottom: 0; } .nlc-desc { font-size: 0.85rem; font-weight: 300; line-height: 1.5; color: rgba(255, 255, 255, 0.7); margin: 0; opacity: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 3em; /* reserva 2 linhas: título alinhado entre cards sem hover */ transition: opacity 0.4s 0.08s; } .nlc-card:hover .nlc-desc { opacity: 1; -webkit-line-clamp: unset; height: auto; overflow: visible; } /* variantes */ .nlc-card.wide { aspect-ratio: 5 / 3; } .nlc-card.sm .nlc-body { padding: 1.1rem 1.2rem; } .nlc-card.sm .nlc-title { font-size: 1rem; letter-spacing: -0.01em; } .nlc-card.sm .nlc-kicker { font-size: 8px; letter-spacing: 0.14em; margin-bottom: 0.35rem; } .nlc-card.sm .nlc-desc { display: none; } .nlc-card.sm .nlc-body { transform: none; } /* toque (sem hover): título+descrição visíveis, sem deslize/zoom/blur de rato */ @media (hover: none) { .nlc-body { transform: translateY(0); } .nlc-desc { opacity: 1; } .nlc-card:hover { transform: none; } .nlc-bg, .nlc-card:hover .nlc-bg { transform: none; filter: none; } .nlc-ico, .nlc-card:hover .nlc-ico, .nlc-iconbadge { transform: translate(-50%, -50%); } } @media (prefers-reduced-motion: reduce) { .nlc-card, .nlc-bg, .nlc-body, .nlc-ico, .nlc-iconbadge { transition: none; } .nlc-card:hover .nlc-bg, .nlc-card:hover .nlc-ico, .nlc-card:hover .nlc-iconbadge { transform: none; } } /* ───────────────────────────────────────────────────────────── deck.css — NL.deck: pilha de "papéis" folheável na página (shared/js/deck.js). Um papel à frente, os seguintes espreitam por trás como uma pilha física. ───────────────────────────────────────────────────────────── */ .nld { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: 1fr; } @media (min-width: 900px) { .nld { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 3rem; } } /* palco: papéis absolutos, centrados; folga à direita/baixo para a pilha */ .nld-stage { position: relative; width: 100%; height: clamp(340px, 52vh, 560px); outline: none; touch-action: pan-y; perspective: 1400px; } .nld-stage:focus-visible { outline: 2px solid var(--accent-blue, #3b82f6); outline-offset: 8px; border-radius: 12px; } .nld-paper { position: absolute; top: 50%; left: 50%; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; transform-origin: center center; transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease; max-width: 82%; max-height: 100%; } .nld-paper-inner { /* recebe o tilt 3D no hover; guarda a sombra e o recorte do papel */ position: relative; display: block; transform-style: preserve-3d; border-radius: 8px; overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06); transition: transform 0.25s ease-out, box-shadow 0.4s ease; } .nld-paper-bg { /* fundo desfocado da própria imagem para preencher o letterbox */ position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; filter: blur(22px) brightness(0.5); transform: scale(1.2); } .nld-paper-img { position: relative; z-index: 1; display: block; max-height: clamp(320px, 50vh, 540px); max-width: 100%; width: auto; height: auto; } /* posições da pilha: 0 = frente, 1..4 espreitam por trás, gone = já folheado (saiu p/ esquerda) */ .nld-paper[data-pos="0"] { transform: translate(-50%, -50%) rotate(0) scale(1); opacity: 1; } .nld-paper[data-pos="1"] { transform: translate(calc(-50% + 30px), calc(-50% + 12px)) rotate(3.5deg) scale(0.965); opacity: 1; } .nld-paper[data-pos="2"] { transform: translate(calc(-50% + 56px), calc(-50% + 22px)) rotate(6.5deg) scale(0.93); opacity: 0.92; } .nld-paper[data-pos="3"] { transform: translate(calc(-50% + 78px), calc(-50% + 30px)) rotate(9deg) scale(0.9); opacity: 0.7; } .nld-paper[data-pos="4"] { transform: translate(calc(-50% + 94px), calc(-50% + 36px)) rotate(10.5deg) scale(0.88); opacity: 0; pointer-events: none; } .nld-paper[data-pos="gone"] { transform: translate(calc(-50% - 155%), -50%) rotate(-9deg) scale(0.96); opacity: 0; pointer-events: none; } .nld-paper.is-front { cursor: zoom-in; } .nld-paper.is-front:hover .nld-paper-inner { box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(59, 130, 246, 0.4); } /* setas */ .nld-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 120; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: #fff; background: rgba(5, 5, 5, 0.55); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(10px); transition: background 0.3s, border-color 0.3s, opacity 0.3s; } .nld-nav:hover { background: var(--accent-blue, #3b82f6); border-color: var(--accent-blue, #3b82f6); } .nld-nav:disabled { opacity: 0.25; cursor: default; } .nld-nav:disabled:hover { background: rgba(5, 5, 5, 0.55); border-color: rgba(255, 255, 255, 0.14); } .nld-prev { left: -6px; } .nld-next { right: -6px; } @media (min-width: 900px) { .nld-prev { left: -22px; } .nld-next { right: -22px; } } /* info */ .nld-info { display: flex; flex-direction: column; gap: 0.85rem; text-align: center; } @media (min-width: 900px) { .nld-info { text-align: left; } } .nld-kicker { font-size: 10px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-blue, #3b82f6); } .nld-title { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: #fff; margin: 0; } .nld-desc { font-size: 0.95rem; font-weight: 300; line-height: 1.6; color: rgba(255, 255, 255, 0.7); margin: 0; } .nld-sub { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); } .nld-count { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.5); } .nld-dots { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; } @media (min-width: 900px) { .nld-dots { justify-content: flex-start; } } .nld-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, 0.2); transition: background 0.3s, transform 0.3s; } .nld-dot:hover { background: rgba(255, 255, 255, 0.45); } .nld-dot.on { background: var(--accent-blue, #3b82f6); transform: scale(1.3); } @media (prefers-reduced-motion: reduce) { .nld-paper { transition: opacity 0.3s ease; } }