/* dewereldvan.ai — kosmische design-taal (uit teaser/index.html). * * Scope-veilig: alle effecten en typografie hangen onder `.cosmic` zodat de * gewone (lichte) app onaangeraakt blijft. Twee pagina's zetten : de publieke profielpagina (profiles/view.html) en de * levende AI-profielbouw (ai/live.html). prefers-reduced-motion schakelt alle motion uit. */ .cosmic { --bg-0: #04040e; --bg-1: #0a0a24; --indigo: #15123a; --violet: #6d5dfc; --cyan: #3fd2ff; --magenta: #b15cff; --gold: #f6cd86; --text: #eef0ff; --muted: #9097c4; --line: rgba(255, 255, 255, 0.09); --card: rgba(255, 255, 255, 0.035); --maxw: 1180px; background: var(--bg-0); color: var(--text); font-family: "Spline Sans", system-ui, sans-serif; font-weight: 300; line-height: 1.6; min-height: 100vh; position: relative; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---- atmosphere: layered nebula mesh ---- */ .cosmic .mesh { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .cosmic .mesh::before, .cosmic .mesh::after { content: ""; position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; mix-blend-mode: screen; } .cosmic .mesh::before { width: 60vmax; height: 60vmax; left: -10vmax; top: -15vmax; background: radial-gradient(circle at 50% 50%, var(--violet), transparent 62%); animation: cosmic-drift1 26s ease-in-out infinite alternate; } .cosmic .mesh::after { width: 55vmax; height: 55vmax; right: -12vmax; bottom: -18vmax; background: radial-gradient(circle at 50% 50%, var(--magenta), transparent 60%); animation: cosmic-drift2 32s ease-in-out infinite alternate; } .cosmic .glow-cyan { position: fixed; z-index: 0; width: 46vmax; height: 46vmax; border-radius: 50%; left: 50%; top: 64%; transform: translate(-50%, -50%); background: radial-gradient(circle at 50% 50%, rgba(63, 210, 255, 0.34), transparent 60%); filter: blur(80px); mix-blend-mode: screen; pointer-events: none; animation: cosmic-pulse 14s ease-in-out infinite; } @keyframes cosmic-drift1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(8vmax, 6vmax) scale(1.15); } } @keyframes cosmic-drift2 { from { transform: translate(0, 0) scale(1.05); } to { transform: translate(-7vmax, -5vmax) scale(0.9); } } @keyframes cosmic-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 0.95; } } /* starfield canvas — the living constellation */ .cosmic #stars { position: fixed; inset: 0; z-index: 1; pointer-events: none; } /* grain + vignette */ .cosmic .grain { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .cosmic .vignette { position: fixed; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(120% 90% at 50% 35%, transparent 55%, rgba(0, 0, 0, 0.55) 100%); } /* ---- structure ---- */ .cosmic .wrap { position: relative; z-index: 3; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(22px, 5vw, 56px); min-height: 100vh; display: flex; flex-direction: column; } .cosmic .wrap--narrow { max-width: 880px; } .cosmic .c-head { display: flex; justify-content: space-between; align-items: center; padding: 26px 0; font-family: "JetBrains Mono", monospace; font-size: 12.5px; letter-spacing: 0.04em; } .cosmic .brand { display: flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; } .cosmic .brand .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px 2px var(--gold); animation: cosmic-twinkle 3.4s ease-in-out infinite; } @keyframes cosmic-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } .cosmic .c-head .links { display: flex; gap: 18px; align-items: center; color: var(--muted); } .cosmic .c-head a.link { color: var(--muted); text-decoration: none; transition: color 0.25s; } .cosmic .c-head a.link:hover { color: var(--gold); } /* ---- hoofdnav (cnav) — herbruikbaar, vervangt de ad-hoc .c-head-headers ---- Erft de .c-head-typografie (mono 12.5px). Niet sticky/geen backdrop-filter (GPU-duur op zwakke devices). Mobiel: CSS-only flex-wrap, geen hamburger. */ .cosmic .cnav { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 26px 0; font-family: "JetBrains Mono", monospace; font-size: 12.5px; letter-spacing: 0.04em; flex-wrap: wrap; } .cosmic .cnav__links, .cosmic .cnav__end { display: flex; gap: 18px; align-items: center; color: var(--muted); } .cosmic .cnav__end { margin-left: auto; } .cosmic .cnav__link { color: var(--muted); text-decoration: none; position: relative; transition: color 0.25s; } .cosmic .cnav__link:hover { color: var(--gold); } .cosmic .cnav__link:focus-visible { outline: none; border-radius: 4px; box-shadow: 0 0 0 4px rgba(63, 210, 255, 0.18); } /* Active-state als wayfinding: gouden glow-dot + statische underline. Geen animatie → valt onder de bestaande reduced-motion-regel, blijft zichtbaar. */ .cosmic .cnav__link--active { color: var(--text); } .cosmic .cnav__link--active::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; vertical-align: middle; background: var(--gold); box-shadow: 0 0 10px 2px var(--gold); } .cosmic .cnav__link--active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--gold); } .cosmic .cnav__link--admin { color: var(--cyan); } @media (max-width: 640px) { .cosmic .cnav { gap: 12px; font-size: 11.5px; } .cosmic .cnav__links, .cosmic .cnav__end { gap: 14px; } } /* ---- home-poortkaart-accenten (constellatie-preview + sublabel) ---- */ .cosmic .home-gate__stars { display: flex; gap: 8px; margin-top: 16px; } .cosmic .home-gate__stars .member-star__avatar { position: static; left: auto; bottom: auto; width: 38px; height: 38px; font-size: 0.95rem; } .cosmic .home-gate__note { margin-top: 12px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } /* ---- Homepage-kopstuk: W2-demo (de agent bouwt vóór je ogen) ---- */ .cosmic .home-demo { position: relative; border: 1px solid var(--line); border-radius: 20px; background: radial-gradient(120% 140% at 8% 0%, rgba(109, 93, 252, 0.16), transparent 60%), var(--card); padding: 22px 22px 26px; max-width: 560px; min-height: 300px; /* CLS-guard: ruimte gereserveerd vóór de velden landen */ overflow: hidden; } .cosmic .home-demo__badge { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; } .cosmic .home-demo__field { margin-bottom: 6px; } .cosmic .home-demo__reasoning { margin: 14px 0 4px; } .cosmic .home-demo__profile { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; } .cosmic .home-demo__identity .display-name { font-family: "Fraunces", serif; font-size: 1.7rem; line-height: 1.05; color: var(--text); } .cosmic .home-demo__headline { font-family: "Fraunces", serif; font-size: 1.1rem; color: var(--muted); margin-top: 4px; } .cosmic .home-demo__themes { display: flex; flex-wrap: wrap; gap: 8px; } .cosmic .home-demo__card { margin: 0; } /* ---- Homepage-kopstuk: W1-constellatie van ECHTE makers ---- */ .cosmic .home-constellation { position: relative; width: 100%; aspect-ratio: 16 / 9; max-width: 920px; } /* Weinig makers (<=4): een kortere, smallere box zodat de sterren 'm vullen en er geen lege verticale ruimte onder de constellatie overblijft (compositie-fix). */ .cosmic .home-constellation--sparse { aspect-ratio: 5 / 2; max-width: 760px; } @media (max-width: 640px) { .cosmic .home-constellation { aspect-ratio: 3 / 4; } .cosmic .home-constellation--sparse { aspect-ratio: 1 / 1; } } .cosmic .home-constellation__links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .cosmic .home-constellation__links line { stroke: rgba(120, 170, 255, 0.28); stroke-width: 1; } .cosmic .home-constellation__stars { position: absolute; inset: 0; } .cosmic .home-star { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; color: var(--text); width: 96px; text-align: center; } .cosmic .home-star__dot { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--indigo); border: 1px solid rgba(63, 210, 255, 0.4); box-shadow: 0 0 16px -4px rgba(63, 210, 255, 0.5); font-family: "Fraunces", serif; font-size: 1.1rem; color: var(--text); transition: transform 0.25s, box-shadow 0.4s, border-color 0.3s; } .cosmic .home-star__dot img { width: 100%; height: 100%; object-fit: cover; } .cosmic .home-star--gold .home-star__dot { border-color: rgba(246, 205, 134, 0.65); box-shadow: 0 0 20px -3px rgba(246, 205, 134, 0.6); } /* "Pas verschenen" (slice 2): een maker die deze week verscheen ademt zachtjes, zodat het lid de groei opmerkt. Alleen de canvas levert ``new_star_ids`` → de publieke voordeur blijft rustig. prefers-reduced-motion dooft de pulse. */ .cosmic .home-star--new .home-star__dot { border-color: rgba(246, 205, 134, 0.85); box-shadow: 0 0 22px -2px rgba(246, 205, 134, 0.75); animation: home-star-breathe 3.2s ease-in-out infinite; } .cosmic .home-star__new { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); padding: 1px 7px; border-radius: 999px; background: rgba(246, 205, 134, 0.16); border: 1px solid rgba(246, 205, 134, 0.55); color: #f6cd86; font-family: "JetBrains Mono", monospace; font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.4; pointer-events: none; z-index: 4; } @keyframes home-star-breathe { 0%, 100% { box-shadow: 0 0 16px -3px rgba(246, 205, 134, 0.55); } 50% { box-shadow: 0 0 28px 0 rgba(246, 205, 134, 0.9); } } @media (prefers-reduced-motion: reduce) { .cosmic .home-star--new .home-star__dot { animation: none; } } .cosmic .canvas-ambient__new { color: #f6cd86; } /* Showcase-embeds (pivot Fase C): ingesloten video/audio-speler. De iframe is server-side gebouwd uit een provider-allowlist (embed_service) en sandboxed. */ .cosmic .embed-frame--video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #04040e; } .cosmic .embed-frame--video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .cosmic .embed-frame--audio { width: 100%; height: 166px; border: 0; border-radius: 14px; } /* Workshop/sessie-meta (datum + locatie) op de projectdetailpagina. */ .cosmic .workshop-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; } .cosmic .workshop-meta__item { font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: 0.02em; color: var(--text); padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(246, 205, 134, 0.4); background: rgba(246, 205, 134, 0.08); } /* Discipline-filter-chips op /leden (Fase D): de maker-soort, afgeleid uit de werk-items. Radio's visueel als pills; de actieve (checked/is-active) gloeit. */ .cosmic .member-filters__disciplines { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; } .cosmic .disc-chip { display: inline-flex; align-items: center; cursor: pointer; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--muted); font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.02em; transition: color 0.2s, border-color 0.2s, background 0.2s; user-select: none; } .cosmic .disc-chip input { position: absolute; opacity: 0; width: 0; height: 0; } .cosmic .disc-chip:hover { color: var(--text); border-color: rgba(63, 210, 255, 0.45); } .cosmic .disc-chip:has(input:checked) { color: #04040e; background: var(--cyan, #3fd2ff); border-color: var(--cyan, #3fd2ff); } .cosmic .disc-chip:focus-within { outline: 2px solid rgba(63, 210, 255, 0.5); outline-offset: 2px; } /* "Open voor"-filterrij: zelfde chips, met een mono-label ervoor. */ .cosmic .member-filters__open { align-items: center; } .cosmic .member-filters__open-label { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-right: 2px; } /* ---- Slimme bijdrage-input (agenda/nieuws): één veld → agent maakt de draft ---- */ .cosmic .smart-add__lead { font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: 0.01em; color: var(--gold); margin-bottom: 10px; } .cosmic .smart-add__field { width: 100%; resize: vertical; min-height: 56px; } .cosmic .smart-add__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; } .cosmic .smart-add__foot .btn[type="submit"] { margin-left: auto; } .cosmic .smart-add__voice.is-listening { color: #04040e; background: var(--gold); border-color: var(--gold); box-shadow: 0 0 14px rgba(246, 205, 134, 0.5); } .cosmic .smart-add__busy { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--muted); } /* htmx-indicator: standaard verborgen, zichtbaar tijdens het verzoek. */ .cosmic .htmx-indicator { opacity: 0; transition: opacity 0.2s; } .cosmic .htmx-request .htmx-indicator, .cosmic .htmx-request.htmx-indicator { opacity: 1; } /* ---- "Waar ik voor opensta" — editor-chips (checkbox, multi-select) ---- */ .cosmic .open-chips { display: flex; flex-wrap: wrap; gap: 9px; } .cosmic .open-chip { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--muted); font-size: 13px; transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s; user-select: none; } .cosmic .open-chip input { position: absolute; opacity: 0; width: 0; height: 0; } .cosmic .open-chip:hover { color: var(--text); border-color: rgba(177, 92, 255, 0.5); } .cosmic .open-chip:has(input:checked) { color: #f3eaff; border-color: var(--violet); background: rgba(109, 93, 252, 0.22); box-shadow: 0 0 14px rgba(109, 93, 252, 0.35); } .cosmic .open-chip:focus-within { outline: 2px solid rgba(177, 92, 255, 0.55); outline-offset: 2px; } .cosmic .open-chip__icon { font-size: 14px; line-height: 1; } .cosmic .open-chip--suggested { border-style: dashed; border-color: rgba(246, 205, 134, 0.5); } .cosmic .open-chip__hint { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.04em; color: var(--gold); opacity: 0.9; } /* ---- "Open voor" — publieke beacons (gloeiende signalen, vaak actionable) ---- */ .cosmic .open-beacons { display: flex; flex-wrap: wrap; gap: 12px; } .cosmic .open-beacon { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 18px; border-radius: 16px; border: 1px solid rgba(109, 93, 252, 0.4); background: radial-gradient(120% 140% at 0% 0%, rgba(109, 93, 252, 0.22), transparent 70%), rgba(255, 255, 255, 0.02); color: var(--text); text-align: left; font: inherit; position: relative; overflow: hidden; } .cosmic .open-beacon__icon { font-size: 18px; line-height: 1; margin-bottom: 4px; } .cosmic .open-beacon__label { font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: 0.02em; color: #eef0ff; } .cosmic .open-beacon__blurb { font-size: 12px; color: var(--muted); } .cosmic .open-beacon__cta { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.03em; color: var(--gold); opacity: 0; transform: translateY(2px); transition: opacity 0.2s, transform 0.2s; margin-top: 4px; } .cosmic .open-beacon--action { cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; } .cosmic .open-beacon--action:hover { border-color: var(--violet); box-shadow: 0 0 22px rgba(109, 93, 252, 0.4); transform: translateY(-2px); } .cosmic .open-beacon--action:hover .open-beacon__cta { opacity: 1; transform: translateY(0); } .cosmic .open-beacon--action:focus-visible { outline: 2px solid rgba(177, 92, 255, 0.6); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .cosmic .open-beacon--action:hover { transform: none; } .cosmic .open-beacon__cta { transition: none; } } /* Discipline-tags op een ledenkaart (afgeleid uit de werk-items). */ .cosmic .member-star__disciplines { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; } .cosmic .disc-tag { padding: 1px 8px; border-radius: 999px; background: rgba(63, 210, 255, 0.12); border: 1px solid rgba(63, 210, 255, 0.35); color: var(--cyan, #3fd2ff); font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; } /* Kind-badge op een projectkaart (video/audio-showreel/workshop). */ .cosmic .card-kind { display: inline-block; margin-bottom: 8px; padding: 2px 9px; border-radius: 999px; background: rgba(63, 210, 255, 0.12); border: 1px solid rgba(63, 210, 255, 0.4); color: var(--cyan, #3fd2ff); font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; } .cosmic .home-star__name { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.03em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 96px; } .cosmic .home-star:hover .home-star__dot, .cosmic .home-star:focus-visible .home-star__dot { transform: translateY(-3px) scale(1.06); border-color: rgba(63, 210, 255, 0.7); } .cosmic .home-star:hover .home-star__name, .cosmic .home-star:focus-visible .home-star__name { color: var(--text); } .cosmic .home-star:focus-visible { outline: none; } .cosmic .home-star:focus-visible .home-star__dot { box-shadow: 0 0 0 4px rgba(63, 210, 255, 0.22); } .cosmic .home-star__card { position: absolute; top: 58px; left: 50%; transform: translateX(-50%) translateY(6px); width: 180px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(10, 10, 36, 0.96); font-size: 0.82rem; line-height: 1.35; color: var(--text); opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; z-index: 3; } .cosmic .home-star:hover .home-star__card, .cosmic .home-star:focus-visible .home-star__card { opacity: 1; transform: translateX(-50%) translateY(0); } .cosmic .home-constellation__all { display: inline-block; } /* ---- Homepage-kopstuk: proef-de-agent-chips ---- */ .cosmic .home-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .cosmic .home-chips__lead { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .cosmic .home-chip { font-family: "Spline Sans", sans-serif; font-size: 0.88rem; color: var(--text); background: rgba(109, 93, 252, 0.12); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: border-color 0.25s, background 0.25s, transform 0.2s; } .cosmic .home-chip:hover, .cosmic .home-chip:focus-visible { outline: none; border-color: rgba(63, 210, 255, 0.55); background: rgba(63, 210, 255, 0.12); transform: translateY(-1px); } .cosmic .home-chips__note { font-size: 0.82rem; color: var(--muted); flex-basis: 100%; } /* ---- /proef: "agent leest …"-staat (zichtbaar tijdens de call) + bron ---- */ #proef-reading { display: none; } #proef-reading.htmx-request { display: block; } .cosmic .proef-source { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.04em; color: var(--cyan); margin-top: 8px; } /* ---- Publiek profiel: "Verbonden in de wereld" (graaf-buren) ---- */ .cosmic .related-makers { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .cosmic .related-maker { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); text-decoration: none; color: var(--text); transition: border-color 0.25s, transform 0.2s, box-shadow 0.4s; } .cosmic .related-maker:hover, .cosmic .related-maker:focus-visible { outline: none; border-color: rgba(63, 210, 255, 0.5); transform: translateY(-2px); box-shadow: 0 14px 40px -22px rgba(63, 210, 255, 0.6); } .cosmic .related-maker__name { font-family: "Fraunces", serif; font-size: 1.1rem; line-height: 1.15; } .cosmic .related-maker__headline { font-size: 0.85rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cosmic .related-maker__bond { margin-top: 4px; font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.03em; color: var(--cyan); } /* ---- Project-pagina: AI-samenvatting-label + werkende "Bekijk →" in .card ---- */ .cosmic .project-ai-note { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.04em; color: var(--cyan); margin-top: 2px; } /* member-star__pull is voor .member-star (hover-trigger); in een .card miste die trigger → permanent onzichtbaar. Geef 'm hier z'n eigen hover/focus-reveal. */ .cosmic .card:hover .member-star__pull, .cosmic .card:focus-within .member-star__pull { opacity: 1; transform: none; } /* ---- Ledengids: graaf-graad per kaart (verbonden knoop, geen losse kaart) ---- */ .cosmic .member-star__bond { margin-top: 6px; font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.03em; color: var(--cyan); } /* ---- Ideeënbus: live 'lijkt-op'-hint (anti-duplicaat) ---- */ .cosmic .idea-similar { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(63, 210, 255, 0.06); padding: 10px 12px; } .cosmic .idea-similar__lead { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.03em; color: var(--cyan); margin-bottom: 6px; } .cosmic .idea-similar__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; text-decoration: none; color: var(--text); border-top: 1px solid var(--line); } .cosmic .idea-similar__row:first-of-type { border-top: none; } .cosmic .idea-similar__row:hover .idea-similar__title, .cosmic .idea-similar__row:focus-visible .idea-similar__title { color: var(--cyan); } .cosmic .idea-similar__title { font-size: 0.9rem; } .cosmic .idea-similar__votes { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--gold); flex: none; } /* ---- typography ---- */ .cosmic .eyebrow { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 14px; } .cosmic .eyebrow::before { content: ""; width: 42px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); } .cosmic .eyebrow--plain::before { display: none; } .cosmic .headline { font-family: "Fraunces", serif; font-weight: 300; letter-spacing: -0.02em; line-height: 1.0; font-size: clamp(2.4rem, 6vw, 4.6rem); color: var(--text); } .cosmic .display-name { font-family: "Fraunces", serif; font-style: italic; font-weight: 300; color: var(--muted); font-size: clamp(1.1rem, 2.2vw, 1.5rem); } .cosmic .section-title { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); } .cosmic .lede { font-size: clamp(1rem, 1.6vw, 1.2rem); color: #c7cbe8; font-weight: 300; } .cosmic .lede b { color: var(--text); font-weight: 400; } /* ---- cover hero ---- */ .cosmic .cover { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 7; background: radial-gradient(80% 120% at 20% 0%, rgba(109, 93, 252, 0.35), transparent 60%), radial-gradient(80% 120% at 90% 100%, rgba(177, 92, 255, 0.3), transparent 60%), var(--indigo); } .cosmic .cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cosmic .cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(4, 4, 14, 0.85) 100%); } /* ---- galerij-grid (kind='gallery') — een raster van gehotlinkte portfolio-beelden ---- */ .cosmic .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; } .cosmic .gallery-grid__item { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; border: 1px solid var(--line); background: var(--indigo); display: block; } @media (max-width: 560px) { .cosmic .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } } /* ---- cards ---- */ .cosmic .card { position: relative; display: block; border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 18px; text-decoration: none; color: var(--text); transition: border-color 0.3s, transform 0.25s, box-shadow 0.35s; overflow: hidden; } .cosmic a.card:hover { border-color: rgba(63, 210, 255, 0.45); transform: translateY(-3px); box-shadow: 0 14px 40px -18px rgba(63, 210, 255, 0.5); } .cosmic .card .thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; margin-bottom: 12px; border: 1px solid var(--line); background: var(--indigo); } .cosmic .card .card-label { font-family: "Spline Sans", sans-serif; font-weight: 500; color: var(--text); } .cosmic .card .card-desc { margin-top: 6px; font-size: 0.92rem; color: var(--muted); } .cosmic .card .card-url { margin-top: 10px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.03em; color: var(--cyan); word-break: break-all; } .cosmic .grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } /* ---- seeking ---- */ .cosmic .seeking { border: 1px solid rgba(246, 205, 134, 0.25); border-radius: 16px; background: linear-gradient(180deg, rgba(246, 205, 134, 0.06), transparent); padding: 20px 22px; } /* ---- tags / chips ---- */ .cosmic .chips { display: flex; flex-wrap: wrap; gap: 9px; } .cosmic .chip { font-family: "JetBrains Mono", monospace; font-size: 11.5px; letter-spacing: 0.03em; color: var(--cyan); border: 1px solid rgba(63, 210, 255, 0.3); background: rgba(63, 210, 255, 0.06); border-radius: 100px; padding: 6px 13px; } /* ---- tool-stack (AI-toolsets op een profiel) ---- */ .cosmic .tool-stack { display: flex; flex-wrap: wrap; gap: 9px; } .cosmic .tool-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(168, 130, 255, 0.28); background: rgba(168, 130, 255, 0.06); border-radius: 100px; padding: 5px 13px 5px 5px; color: var(--ink); text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .cosmic a.tool-pill:hover { border-color: rgba(168, 130, 255, 0.55); background: rgba(168, 130, 255, 0.12); transform: translateY(-1px); } .cosmic .tool-pill__logo { width: 22px; height: 22px; border-radius: 6px; object-fit: contain; background: rgba(255, 255, 255, 0.04); flex: 0 0 auto; } .cosmic .tool-pill__tile { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 500; color: var(--violet, #a882ff); background: rgba(168, 130, 255, 0.16); flex: 0 0 auto; } .cosmic .tool-pill__name { font-family: "JetBrains Mono", monospace; font-size: 11.5px; letter-spacing: 0.02em; } .cosmic .member-star__tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .cosmic .tool-pill--mini { gap: 6px; padding: 3px 10px 3px 3px; } .cosmic .tool-pill--mini .tool-pill__logo, .cosmic .tool-pill--mini .tool-pill__tile { width: 18px; height: 18px; font-size: 10px; } .cosmic .tool-pill--mini .tool-pill__name { font-size: 10.5px; } /* ---- buttons ---- */ .cosmic .btn { position: relative; display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; border-radius: 100px; padding: 13px 24px; font-family: "JetBrains Mono", monospace; font-size: 12.5px; letter-spacing: 0.05em; font-weight: 500; color: #1a1330; background: linear-gradient(100deg, var(--gold), #ffe6b0); text-decoration: none; transition: transform 0.25s ease, box-shadow 0.35s ease; } .cosmic .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 34px -8px rgba(246, 205, 134, 0.6); } .cosmic .btn:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; } .cosmic .btn--ghost { background: transparent; color: var(--text); border: 1px solid var(--line); } .cosmic .btn--ghost:hover { border-color: rgba(63, 210, 255, 0.5); box-shadow: none; } /* Verfijnde "gevaar"-variant (AVG-wisknop). Geen knal-rood vlak: een rustige, warm-rode rand op de ghost-knop — duidelijk maar in de kosmische identiteit. */ .cosmic .btn--danger { background: transparent; color: #f7c8c2; border: 1px solid rgba(232, 110, 96, 0.55); } .cosmic .btn--danger:hover { border-color: rgba(232, 110, 96, 0.9); background: linear-gradient(180deg, rgba(232, 110, 96, 0.1), transparent); box-shadow: none; } /* ---- forms / inputs ---- */ .cosmic input, .cosmic textarea, .cosmic select { width: 100%; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line); border-radius: 14px; padding: 13px 16px; color: var(--text); font-family: "Spline Sans", sans-serif; font-size: 15px; outline: none; transition: border-color 0.3s, box-shadow 0.3s, background 0.3s; } .cosmic textarea { resize: vertical; } .cosmic input::placeholder, .cosmic textarea::placeholder { color: #6b7099; } .cosmic input:focus, .cosmic textarea:focus, .cosmic select:focus { border-color: rgba(63, 210, 255, 0.55); background: rgba(63, 210, 255, 0.05); box-shadow: 0 0 0 4px rgba(63, 210, 255, 0.1), 0 0 30px rgba(63, 210, 255, 0.12); } .cosmic label.field-label { display: block; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } /* ---- chat ---- */ .cosmic .chat-stream { display: flex; flex-direction: column; gap: 16px; } .cosmic .bubble { max-width: 78%; padding: 14px 18px; border-radius: 18px; font-size: 0.98rem; white-space: pre-wrap; line-height: 1.55; } .cosmic .bubble--user { align-self: flex-end; background: linear-gradient(100deg, rgba(109, 93, 252, 0.3), rgba(177, 92, 255, 0.22)); border: 1px solid rgba(109, 93, 252, 0.4); color: var(--text); } .cosmic .bubble--assistant { align-self: flex-start; background: var(--card); border: 1px solid var(--line); color: #dfe2fb; } .cosmic .bubble--refusal { align-self: flex-start; background: rgba(255, 120, 120, 0.08); border: 1px solid rgba(255, 120, 120, 0.35); color: #ffd5d5; } .cosmic .bubble--system { align-self: center; background: transparent; border: 1px dashed var(--line); color: var(--muted); font-family: "JetBrains Mono", monospace; font-size: 11.5px; letter-spacing: 0.03em; max-width: 100%; text-align: center; } /* typing indicator */ .cosmic .typing { display: inline-flex; gap: 5px; align-items: center; } .cosmic .typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); opacity: 0.5; animation: cosmic-blink 1.2s infinite ease-in-out; } .cosmic .typing span:nth-child(2) { animation-delay: 0.2s; } .cosmic .typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes cosmic-blink { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } /* ---- divider / generic ---- */ .cosmic .rule { height: 1px; background: var(--line); border: none; margin: 0; } .cosmic a.text-link { color: var(--cyan); text-decoration: none; } .cosmic a.text-link:hover { text-decoration: underline; } .cosmic .muted { color: var(--muted); } /* entrance choreography — basis "rise" (default, backwards compatible) */ .cosmic [data-reveal] { opacity: 0; transform: translateY(22px); filter: blur(8px); } /* Onthuld bij page-load (.ready op de body, alles via --d-stagger) ÓF per element wanneer het in beeld scrollt (.is-in, gezet door de reveal-director in _cosmic_canvas.html op pagina's met `data-reveal-scroll`). Scroll-reveal houdt de pagina levend: content verschijnt terwijl je leest, niet alles in één klap. */ .cosmic.ready [data-reveal], .cosmic [data-reveal].is-in { opacity: 1; transform: none; filter: blur(0); transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1s cubic-bezier(0.2, 0.8, 0.2, 1), filter 1s ease; transition-delay: var(--d, 0ms); } /* Scroll-pad: cap de stagger zodat content diep in de pagina niet seconden hangt voor het verschijnt (de --d's zijn voor een load-choreografie bedoeld). */ .cosmic [data-reveal].is-in { transition-delay: min(var(--d, 0ms), 200ms); } /* --- Reveal-varianten (opt-in via data-reveal="") — zodat niet elk element met hetzelfde gebaar binnenkomt. Eén identiteit, ander accent per betekenis. Allemaal gedekt door het reduced-motion-vangnet (zelfde [data-reveal]-selector, regel ~1095). --- */ /* "materialize": vervaagt + schaalt in alsof de AI het net opbouwt. Voor AI-gebouwde / hero-inhoud (profiel-identity, samenvattingen). */ .cosmic [data-reveal="materialize"] { transform: translateY(10px) scale(0.985); filter: blur(12px) brightness(1.25); } .cosmic.ready [data-reveal="materialize"], .cosmic [data-reveal="materialize"].is-in { transform: none; filter: blur(0) brightness(1); } /* "drift": komt zijdelings binnen i.p.v. van onder; wissel links/rechts per positie (even/oneven) zodat een grid niet als één blok opstijgt. */ .cosmic [data-reveal="drift"] { transform: translateX(-26px); filter: blur(8px); } .cosmic [data-reveal="drift"]:nth-child(even) { transform: translateX(26px); } .cosmic.ready [data-reveal="drift"], .cosmic [data-reveal="drift"].is-in { transform: none; } /* --- Per-bezoek reveal-"moods" (één gekozen per page-load door de director) — subtiele variatie in de easing-curve zodat een herbezoek nooit exact hetzelfde gebaar herhaalt (mood-b zet een lichte overshoot, mood-c een strakkere settle). Alleen de timing-function — raakt de transform/filter van de varianten niet, dus geen clash met materialize/drift. Reduced-motion dooft alle transitions. */ .cosmic.reveal-mood-b.ready [data-reveal], .cosmic.reveal-mood-b [data-reveal].is-in { transition-timing-function: cubic-bezier(0.18, 0.9, 0.22, 1.12); } .cosmic.reveal-mood-c.ready [data-reveal], .cosmic.reveal-mood-c [data-reveal].is-in { transition-timing-function: cubic-bezier(0.34, 0.8, 0.2, 1); } /* ========================================================================= Ledenpagina (L2) — constellatie van leden + member-star kaarten ========================================================================= */ .cosmic .constellation { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); } .cosmic .member-star { position: relative; display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); padding: 18px; text-decoration: none; color: var(--text); overflow: hidden; transition: border-color 0.3s, transform 0.25s, box-shadow 0.4s; } .cosmic .member-star::before { /* subtiele nevel-gloed achter de kaart, intenser op hover */ content: ""; position: absolute; inset: -40% 30% auto -20%; height: 80%; background: radial-gradient(circle at 30% 30%, rgba(109, 93, 252, 0.22), transparent 65%); opacity: 0; transition: opacity 0.4s; pointer-events: none; } .cosmic .member-star:hover { border-color: rgba(63, 210, 255, 0.5); transform: translateY(-4px); box-shadow: 0 18px 50px -22px rgba(63, 210, 255, 0.6); } .cosmic .member-star:hover::before { opacity: 1; } .cosmic .member-star:focus-visible { outline: none; border-color: rgba(63, 210, 255, 0.65); box-shadow: 0 0 0 4px rgba(63, 210, 255, 0.18); } .cosmic .member-star__visual { position: relative; display: flex; align-items: center; justify-content: center; } .cosmic .member-star__cover { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); background: var(--indigo); } .cosmic .member-star__initials { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; border: 1px solid var(--line); background: radial-gradient(80% 120% at 30% 10%, rgba(109, 93, 252, 0.35), transparent 60%), var(--indigo); font-family: "Fraunces", serif; font-size: 2.4rem; color: var(--text); letter-spacing: 0.02em; } /* compacte avatar overlay (person/balanced kaarten met projectbeeld of cover) */ .cosmic .member-star__avatar { position: absolute; left: 12px; bottom: -16px; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(63, 210, 255, 0.4); box-shadow: 0 0 18px -2px rgba(63, 210, 255, 0.5); background: var(--indigo); display: grid; place-items: center; font-family: "Fraunces", serif; color: var(--text); } .cosmic .member-star__avatar img { width: 100%; height: 100%; object-fit: cover; } .cosmic .member-star.emphasis-person .member-star__visual { padding-bottom: 8px; } .cosmic .member-star__body { display: flex; flex-direction: column; gap: 7px; } .cosmic .member-star__name { font-family: "Fraunces", serif; font-weight: 400; font-size: 1.25rem; line-height: 1.1; color: var(--text); } .cosmic .member-star.emphasis-person .member-star__name { font-size: 1.5rem; } .cosmic .member-star__headline { font-size: 0.92rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cosmic .member-star__meta { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.04em; color: var(--cyan); } .cosmic .member-star__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; } .cosmic .member-star__pull { position: absolute; right: 16px; bottom: 16px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.05em; color: var(--gold); opacity: 0; transform: translateX(-6px); transition: opacity 0.3s, transform 0.3s; } .cosmic .member-star:hover .member-star__pull, .cosmic .member-star:focus-visible .member-star__pull { opacity: 1; transform: none; } /* filter/zoek-balk */ .cosmic .member-filters { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border: 1px solid var(--line); border-radius: 18px; background: var(--card); padding: 18px 20px; } .cosmic .member-filters__field { display: flex; flex-direction: column; } /* lege / geen-resultaten staat */ .cosmic .constellation-empty { text-align: center; padding: 64px 20px; border: 1px dashed var(--line); border-radius: 22px; background: radial-gradient(80% 120% at 50% 0%, rgba(109, 93, 252, 0.12), transparent 60%); } .cosmic .constellation-empty__spark { display: inline-block; font-size: 2rem; color: var(--gold); text-shadow: 0 0 20px var(--gold); margin-bottom: 12px; animation: cosmic-twinkle 3.4s ease-in-out infinite; } /* ========================================================================= Profielpagina (L3) — foto-hero + emphasis-layout ========================================================================= */ .cosmic .profile-identity { display: flex; gap: clamp(20px, 4vw, 40px); align-items: flex-start; flex-wrap: wrap; } .cosmic .profile-identity__photo { flex: none; } .cosmic .profile-identity__text { flex: 1 1 320px; min-width: 0; } /* person-emphasis (PRD L1: "Vooral ik" → foto/headline/bio GROOT): de hero- foto en de naam/headline schalen zichtbaar op t.o.v. balanced, zodat de prominentie-keuze óók op de detailpagina voelbaar landt (styleguide-toetssteen "emphasis stuurt de prominentie zichtbaar"). */ .cosmic .emphasis-person .profile-identity { align-items: center; } .cosmic .emphasis-person .profile-identity__photo .photo-ring--hero { width: 208px; height: 208px; } .cosmic .emphasis-person .profile-identity__text .display-name { font-size: clamp(1.3rem, 2.6vw, 1.9rem); } .cosmic .emphasis-person .profile-identity__text .headline { font-size: clamp(2.8rem, 6.6vw, 5.2rem); } /* projects-emphasis: compacte persoon bovenaan + ingetogen headline */ .cosmic .emphasis-projects .profile-identity__text .headline { font-size: clamp(2rem, 4vw, 2.8rem); } .cosmic .emphasis-projects .profile-identity__photo .photo-ring--hero { width: 96px; height: 96px; } /* ========================================================================= Profielfoto (L1) — sterren-ring + magische drag-drop upload ========================================================================= */ .cosmic .photo-ring { position: relative; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(70% 70% at 30% 25%, rgba(109, 93, 252, 0.4), transparent 60%), var(--indigo); border: 1px solid var(--line); box-shadow: 0 0 0 1px rgba(63, 210, 255, 0.18), 0 0 28px -6px rgba(63, 210, 255, 0.45), 0 0 60px -10px rgba(177, 92, 255, 0.4); overflow: hidden; } .cosmic .photo-ring--hero { width: 168px; height: 168px; } .cosmic .photo-ring__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .cosmic .photo-ring__initials { font-family: "Fraunces", serif; font-size: 2.6rem; color: var(--text); letter-spacing: 0.02em; } .cosmic .photo-ring__halo { position: absolute; inset: -2px; border-radius: 50%; pointer-events: none; background: conic-gradient( from 0deg, transparent 0deg, rgba(63, 210, 255, 0.5) 90deg, transparent 180deg, rgba(246, 205, 134, 0.5) 270deg, transparent 360deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); opacity: 0.55; animation: photo-ring-spin 14s linear infinite; } @keyframes photo-ring-spin { to { transform: rotate(360deg); } } /* materialisatie bij verse upload */ .cosmic .photo-ring.is-materializing .photo-ring__img { animation: photo-materialize 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); } @keyframes photo-materialize { from { opacity: 0; filter: blur(14px) brightness(1.6); transform: scale(1.08); } to { opacity: 1; filter: none; transform: none; } } .cosmic .photo-ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; } .cosmic .photo-ring__msg { font-size: 0.85rem; color: var(--muted); text-align: center; } .cosmic .photo-ring__msg--err { color: #ffd5d5; } .cosmic .photo-ring__msg--ok { color: var(--gold); } .cosmic .photo-ring__remove button { font-size: 0.82rem; cursor: pointer; background: none; border: none; } .cosmic .photo-upload { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; } .cosmic .photo-upload__drop { flex: 1 1 280px; } .cosmic .photo-upload__zone { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 26px 22px; border: 1.5px dashed rgba(63, 210, 255, 0.3); border-radius: 18px; background: radial-gradient(90% 120% at 50% 0%, rgba(63, 210, 255, 0.07), transparent 60%); cursor: pointer; transition: border-color 0.3s, background 0.3s, box-shadow 0.3s; } .cosmic .photo-upload__zone:hover, .cosmic .photo-upload__zone:focus-visible, .cosmic .photo-upload__zone.is-over { outline: none; border-color: rgba(63, 210, 255, 0.7); background: rgba(63, 210, 255, 0.08); box-shadow: 0 0 0 4px rgba(63, 210, 255, 0.12), inset 0 0 30px rgba(63, 210, 255, 0.08); } .cosmic .photo-upload__spark { font-size: 1.4rem; color: var(--gold); text-shadow: 0 0 16px var(--gold); } .cosmic .photo-upload__label { font-family: "JetBrains Mono", monospace; font-size: 12.5px; letter-spacing: 0.04em; color: var(--text); } .cosmic .photo-upload__hint { font-size: 0.78rem; color: var(--muted); } .cosmic .photo-upload__progress { display: flex; align-items: center; margin-top: 12px; } /* ========================================================================= Emphasis-keuze (L1) — 3 kosmische opties ========================================================================= */ .cosmic .emphasis-options { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .cosmic .emphasis-options form { margin: 0; } .cosmic .emphasis-opt { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 6px; cursor: pointer; border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 16px; color: var(--text); transition: border-color 0.3s, transform 0.2s, box-shadow 0.3s, background 0.3s; } .cosmic .emphasis-opt:hover { transform: translateY(-2px); border-color: rgba(63, 210, 255, 0.45); } .cosmic .emphasis-opt.is-active { border-color: rgba(246, 205, 134, 0.6); background: linear-gradient(180deg, rgba(246, 205, 134, 0.08), transparent); box-shadow: 0 0 0 1px rgba(246, 205, 134, 0.4), 0 12px 34px -16px rgba(246, 205, 134, 0.5); } .cosmic .emphasis-opt:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(63, 210, 255, 0.18); } .cosmic .emphasis-opt__glyph { width: 34px; height: 34px; border-radius: 9px; background: var(--indigo); border: 1px solid var(--line); position: relative; } .cosmic .emphasis-opt__glyph--person::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 38%, var(--gold) 0 18%, transparent 22%), linear-gradient(180deg, transparent 55%, rgba(63,210,255,.5) 55%); } .cosmic .emphasis-opt__glyph--projects::after { content: ""; position: absolute; inset: 6px; background: linear-gradient(rgba(63,210,255,.6) 0 100%) 0 0/45% 45% no-repeat, linear-gradient(rgba(177,92,255,.6) 0 100%) 100% 0/45% 45% no-repeat, linear-gradient(rgba(109,93,252,.6) 0 100%) 0 100%/45% 45% no-repeat, linear-gradient(rgba(246,205,134,.6) 0 100%) 100% 100%/45% 45% no-repeat; } .cosmic .emphasis-opt__glyph--balanced::after { content: ""; position: absolute; inset: 6px; background: radial-gradient(circle at 30% 50%, var(--gold) 0 28%, transparent 32%), radial-gradient(circle at 70% 50%, var(--cyan) 0 28%, transparent 32%); } .cosmic .emphasis-opt__title { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.03em; color: var(--text); } .cosmic .emphasis-opt__desc { font-size: 0.82rem; color: var(--muted); line-height: 1.4; } @media (max-width: 640px) { .cosmic .profile-identity { gap: 18px; } .cosmic .photo-ring--hero { width: 120px; height: 120px; } /* Person-emphasis blijft op mobiel groter dan balanced, maar getemperd zodat hij niet de hele viewport opslokt (styleguide §5: responsive even sterk). */ .cosmic .emphasis-person .profile-identity__photo .photo-ring--hero { width: 148px; height: 148px; } } @media (max-width: 560px) { .cosmic .bubble { max-width: 90%; } } @media (prefers-reduced-motion: reduce) { .cosmic *, .cosmic *::before, .cosmic *::after { animation: none !important; transition: none !important; } .cosmic [data-reveal] { opacity: 1; transform: none; filter: none; } /* De feedback-affordance is bewust NIET onder .cosmic (werkt op zowel cosmic- als lichte pagina's), dus de .cosmic *-regel hierboven dooft haar motion NIET. Doof 'm hier expliciet — styleguide §1/§5: geen uitzondering. */ .feedback-fab, .feedback-panel, .feedback-panel *, .feedback-panel *::before, .feedback-panel *::after { animation: none !important; transition: none !important; } } /* ========================================================================= Ervaring-laag (E1-E4 + W) — feedback / ideeen / roadmap / onboarding / wacht-UX. Alles op de bestaande tokens; geen tweede look. De .cosmic-gescopete componenten (ideeen/roadmap/wacht-UX) erven de reduced-motion-regel (.cosmic *) hierboven; de NIET-.cosmic feedback-fab/-paneel krijgen daar een eigen, expliciete reduced-motion-uitzondering (zie het media-block hierboven). ========================================================================= */ /* ---- kleine knop-variant (admin-acties) ---- */ .cosmic .btn--sm { padding: 8px 15px; font-size: 11px; } /* ---- helpers ---- */ .cosmic .btn--sm + .btn--sm { margin-left: 2px; } /* ========================================================================= Form-/funnel-primitieven (SPEC-frontend-polish §B, C1-C4) — gedeeld door de auth-funnel, foutpagina's, profiel-edit en admin. Alles onder .cosmic, alleen bestaande tokens; geen tweede look. Motion erft de .cosmic *-doving in het prefers-reduced-motion-block. ========================================================================= */ /* C1 — notice/alert-blok (form-fout + succes). Zacht violet/goud accent, nooit knal-rood (styleguide: rustig, verfijnd). role="alert" in template. */ .cosmic .notice { border: 1px solid var(--line); border-radius: 14px; padding: 13px 16px; font-size: 0.95rem; color: var(--text); background: var(--card); } .cosmic .notice--error { border-color: rgba(177, 92, 255, 0.4); background: linear-gradient(180deg, rgba(177, 92, 255, 0.08), transparent); } .cosmic .notice--ok { border-color: rgba(246, 205, 134, 0.45); background: linear-gradient(180deg, rgba(246, 205, 134, 0.08), transparent); } /* C2 — generieke toetsenbord-focus voor links/knoppen (a11y-funnel). De cnav/ widgets hebben al focus-visible; dit dekt .btn/a binnen .cosmic. */ .cosmic a:focus-visible, .cosmic .btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } /* C3 — completeness-progressbar (profiel-edit). Track = lijn, fill = goud→violet. */ .cosmic .progress { width: 100%; height: 6px; border-radius: 100px; background: var(--line); overflow: hidden; } .cosmic .progress__fill { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--gold), var(--violet)); } /* C4 — status-chips (modifiers op .chip): completeness/admin-status getint. */ .cosmic .chip--pending { color: var(--gold); border-color: rgba(246, 205, 134, 0.4); background: rgba(246, 205, 134, 0.06); } .cosmic .chip--ok { color: var(--gold); border-color: rgba(246, 205, 134, 0.5); background: rgba(246, 205, 134, 0.08); } .cosmic .chip--warn { color: #ffb3b3; border-color: rgba(255, 120, 120, 0.35); background: rgba(255, 120, 120, 0.06); } .cosmic .chip--muted { color: var(--muted); border-color: var(--line); background: rgba(255, 255, 255, 0.03); } /* ========================================================================= E1 — Globale feedback-affordance (fab) + paneel ========================================================================= */ .feedback-fab { position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); z-index: 40; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(63, 210, 255, 0.3); border-radius: 100px; padding: 11px 18px; cursor: pointer; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.04em; color: #eef0ff; /* token-onafhankelijke donkere fill: werkt op zowel cosmic- als light-pagina's */ background: linear-gradient(120deg, rgba(21, 18, 58, 0.92), rgba(10, 10, 36, 0.92)); box-shadow: 0 10px 30px -12px rgba(63, 210, 255, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04); backdrop-filter: blur(6px); transition: transform 0.25s ease, box-shadow 0.35s ease, border-color 0.3s; } .feedback-fab:hover { transform: translateY(-2px); border-color: rgba(63, 210, 255, 0.6); box-shadow: 0 16px 40px -14px rgba(63, 210, 255, 0.6); } .feedback-fab:focus-visible { outline: none; border-color: rgba(63, 210, 255, 0.75); box-shadow: 0 0 0 4px rgba(63, 210, 255, 0.22); } .feedback-panel { position: fixed; right: clamp(16px, 3vw, 28px); bottom: calc(clamp(16px, 3vw, 28px) + 58px); z-index: 41; width: min(380px, calc(100vw - 32px)); border: 1px solid var(--line, rgba(255, 255, 255, 0.09)); border-radius: 18px; padding: 18px 18px 16px; color: #eef0ff; background: radial-gradient(120% 80% at 100% 0%, rgba(109, 93, 252, 0.18), transparent 60%), rgba(10, 10, 30, 0.96); box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.04); backdrop-filter: blur(10px); animation: fb-rise 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); } @keyframes fb-rise { from { opacity: 0; transform: translateY(14px) scale(0.98); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } } .feedback-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .feedback-panel__eyebrow { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold, #f6cd86); } .feedback-panel__close { border: none; background: none; color: #9097c4; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; transition: color 0.2s; } .feedback-panel__close:hover { color: #eef0ff; } .feedback-panel select, .feedback-panel textarea, .feedback-panel input { width: 100%; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line, rgba(255, 255, 255, 0.09)); border-radius: 12px; padding: 11px 13px; color: #eef0ff; font-family: "Spline Sans", system-ui, sans-serif; font-size: 14px; outline: none; transition: border-color 0.3s, box-shadow 0.3s, background 0.3s; } .feedback-panel select:focus, .feedback-panel textarea:focus, .feedback-panel input:focus { border-color: rgba(63, 210, 255, 0.55); background: rgba(63, 210, 255, 0.05); box-shadow: 0 0 0 4px rgba(63, 210, 255, 0.1); } .feedback-panel .field-label { display: block; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #9097c4; margin-bottom: 5px; } .feedback-panel__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; } .feedback-panel__hint { font-size: 11px; color: #7b7ea6; } .feedback-panel__hint code { color: #9097c4; word-break: break-all; } .feedback-panel__err { margin: 0 0 10px; font-size: 13px; color: #ffd5d5; } .feedback-panel--sent { text-align: center; padding: 26px 22px; } .feedback-panel__spark { font-size: 2rem; color: var(--gold, #f6cd86); text-shadow: 0 0 22px var(--gold, #f6cd86); display: block; margin-bottom: 8px; animation: cosmic-twinkle 3s ease-in-out infinite; } .feedback-panel__thanks { font-family: "Fraunces", Georgia, serif; font-size: 1.05rem; color: #eef0ff; margin: 0 0 16px; } /* Paneel-knoppen thema-onafhankelijk (net als de rest van het paneel): de feedback-affordance kan buiten een .cosmic-voorouder gerenderd worden, dus deze regels staan bewust ongescoped. Zonder hen vallen de submit- (.btn) en sluit-knop (.btn--ghost) terug op kale browser-defaults — de goud-gradient pill en de ghost-variant hieronder spiegelen .cosmic .btn / .btn--ghost. */ .feedback-panel .btn { position: relative; display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; border-radius: 100px; padding: 13px 24px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12.5px; letter-spacing: 0.05em; font-weight: 500; color: #1a1330; background: linear-gradient(100deg, var(--gold, #f6cd86), #ffe6b0); text-decoration: none; transition: transform 0.25s ease, box-shadow 0.35s ease; } .feedback-panel .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 34px -8px rgba(246, 205, 134, 0.6); } .feedback-panel .btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(63, 210, 255, 0.22); } .feedback-panel .btn:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; } .feedback-panel .btn--ghost { background: transparent; color: #eef0ff; border: 1px solid var(--line, rgba(255, 255, 255, 0.09)); } .feedback-panel .btn--ghost:hover { border-color: rgba(63, 210, 255, 0.5); box-shadow: none; } /* ========================================================================= E2 — Ideeenbus: indien-formulier, kaarten, stemknop ========================================================================= */ .cosmic .idea-form { border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(90% 120% at 100% 0%, rgba(63, 210, 255, 0.08), transparent 55%), var(--card); padding: 22px; } .cosmic .idea-form__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; } .cosmic .idea-form__hint { font-size: 0.85rem; color: var(--muted); } .cosmic .idea-form__err { margin: 0 0 14px; color: #ffd5d5; font-size: 0.9rem; } .cosmic .idea-grid { display: flex; flex-direction: column; gap: 14px; } .cosmic .idea-card { display: flex; gap: 16px; align-items: flex-start; border: 1px solid var(--line); border-radius: 18px; background: var(--card); padding: 18px; transition: border-color 0.3s, transform 0.25s, box-shadow 0.35s; } .cosmic .idea-card:hover { border-color: rgba(63, 210, 255, 0.4); transform: translateY(-2px); box-shadow: 0 16px 44px -22px rgba(63, 210, 255, 0.5); } .cosmic .idea-card__vote { flex: none; } .cosmic .idea-card__body { flex: 1 1 auto; min-width: 0; } .cosmic .idea-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .cosmic .idea-card__title { font-family: "Fraunces", serif; font-weight: 400; font-size: 1.2rem; line-height: 1.2; color: var(--text); } .cosmic .idea-card__text { margin-top: 7px; color: #c7cbe8; font-size: 0.95rem; } .cosmic .idea-card__by { margin-top: 9px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.03em; color: var(--muted); } .cosmic .idea-card__admin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .cosmic .idea-admin-status { margin: 0; } .cosmic .idea-admin-status select { width: auto; padding: 7px 10px; font-size: 12px; } /* status-pill */ .cosmic .idea-status { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; } .cosmic .idea-status--gepland { color: var(--cyan); border-color: rgba(63, 210, 255, 0.35); } .cosmic .idea-status--gedaan { color: var(--gold); border-color: rgba(246, 205, 134, 0.4); } .cosmic .idea-status--afgewezen { color: #ffb3b3; border-color: rgba(255, 120, 120, 0.3); } /* stemknop */ .cosmic .vote-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 58px; padding: 12px 0; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.03); color: var(--text); cursor: pointer; transition: border-color 0.25s, transform 0.2s, box-shadow 0.3s, background 0.25s; } .cosmic .vote-btn:hover { border-color: rgba(63, 210, 255, 0.5); transform: translateY(-2px); box-shadow: 0 10px 26px -14px rgba(63, 210, 255, 0.55); } .cosmic .vote-btn:focus-visible { outline: none; border-color: rgba(63, 210, 255, 0.7); box-shadow: 0 0 0 4px rgba(63, 210, 255, 0.18); } .cosmic .vote-btn__arrow { font-size: 12px; color: var(--cyan); line-height: 1; } .cosmic .vote-btn__count { font-family: "Fraunces", serif; font-size: 1.25rem; line-height: 1; color: var(--text); } .cosmic .vote-btn__label { font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .cosmic .vote-btn--voted { border-color: rgba(246, 205, 134, 0.5); background: linear-gradient(180deg, rgba(246, 205, 134, 0.1), transparent); box-shadow: 0 0 0 1px rgba(246, 205, 134, 0.3); } .cosmic .vote-btn--voted .vote-btn__arrow, .cosmic .vote-btn--voted .vote-btn__label { color: var(--gold); } /* ========================================================================= E3 — Roadmap board + items (leden + admin) ========================================================================= */ .cosmic .roadmap-board { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: start; } .cosmic .roadmap-col { border: 1px solid var(--line); border-radius: 20px; background: radial-gradient(80% 60% at 50% 0%, rgba(109, 93, 252, 0.1), transparent 60%), var(--card); padding: 18px; } .cosmic .roadmap-col__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 14px; } .cosmic .roadmap-col__phase { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); } .cosmic .roadmap-col__count { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 100px; padding: 2px 9px; } .cosmic .roadmap-col__items { display: flex; flex-direction: column; gap: 12px; } .cosmic .roadmap-item { border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.025); padding: 14px 16px; transition: border-color 0.3s, transform 0.25s, box-shadow 0.35s; } .cosmic .roadmap-item:hover { border-color: rgba(63, 210, 255, 0.4); transform: translateY(-2px); box-shadow: 0 14px 36px -20px rgba(63, 210, 255, 0.5); } .cosmic .roadmap-item__status { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .cosmic .roadmap-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 10px 1px currentColor; } .cosmic .roadmap-dot--overwegen { color: var(--muted); background: var(--muted); } .cosmic .roadmap-dot--gepland { color: var(--cyan); background: var(--cyan); } .cosmic .roadmap-dot--bezig { color: var(--magenta); background: var(--magenta); animation: cosmic-pulse 2.4s ease-in-out infinite; } .cosmic .roadmap-dot--gedaan { color: var(--gold); background: var(--gold); } .cosmic .roadmap-item__statuslabel { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .cosmic .roadmap-item__title { font-family: "Fraunces", serif; font-weight: 400; font-size: 1.08rem; line-height: 1.25; color: var(--text); } .cosmic .roadmap-item__desc { margin-top: 6px; font-size: 0.9rem; color: var(--muted); } .cosmic .roadmap-item__origin { display: inline-block; margin-top: 9px; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.04em; color: var(--gold); text-decoration: none; transition: color 0.2s, transform 0.2s; } a.roadmap-item__origin:hover, a.roadmap-item__origin:focus-visible { color: var(--text); transform: translateX(2px); } /* admin board */ .cosmic .rm-create { border: 1px solid var(--line); border-radius: 18px; background: var(--card); padding: 20px; } .cosmic .rm-create__grid, .cosmic .rm-admin-item__grid { display: grid; gap: 12px; grid-template-columns: 2fr 1fr 1fr 0.7fr; } .cosmic .rm-create__foot { margin-top: 14px; display: flex; justify-content: flex-end; } .cosmic .rm-admin-list { display: flex; flex-direction: column; gap: 12px; } .cosmic .rm-admin-item { border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.02); padding: 16px; } .cosmic .rm-admin-item__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .cosmic .rm-admin-item__origin { margin-right: auto; font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--gold); } .cosmic .rm-saved { color: var(--gold); font-family: "JetBrains Mono", monospace; font-size: 12px; } @media (max-width: 720px) { .cosmic .rm-create__grid, .cosmic .rm-admin-item__grid { grid-template-columns: 1fr 1fr; } } /* ========================================================================= E1 admin — feedback-overzicht-rijen ========================================================================= */ .fb-list { display: flex; flex-direction: column; gap: 12px; } .cosmic .fb-row { border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 16px 18px; transition: opacity 0.3s, border-color 0.3s; } .cosmic .fb-row--hidden { opacity: 0.5; border-style: dashed; } .cosmic .fb-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.03em; margin-bottom: 8px; } .cosmic .fb-row__kind { color: var(--cyan); border: 1px solid rgba(63, 210, 255, 0.3); border-radius: 100px; padding: 2px 9px; text-transform: uppercase; } .cosmic .fb-row__path code { color: var(--muted); word-break: break-all; } .cosmic .fb-row__who { color: var(--text); } .cosmic .fb-row__who--anon { color: var(--muted); font-style: italic; } .cosmic .fb-row__body { color: #c7cbe8; font-size: 0.96rem; white-space: pre-wrap; } .cosmic .fb-row__summary { margin-top: 10px; padding: 8px 12px; border-left: 2px solid var(--gold); background: rgba(246, 205, 134, 0.06); border-radius: 0 8px 8px 0; font-size: 0.88rem; color: #e7d9bd; } .cosmic .fb-row__actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .cosmic .fb-row__flag { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } /* ========================================================================= E4b — Onboarding: cinematische "Welkom in de wereld van…"-aankomst ========================================================================= */ .cosmic.welcome .welcome__wrap { min-height: 100vh; justify-content: center; } .cosmic .welcome__stage { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8vh 0; max-width: 760px; margin: 0 auto; } .cosmic .welcome__star { position: relative; width: 96px; height: 96px; margin-bottom: 8px; display: grid; place-items: center; } .cosmic .welcome__star-core { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 30px 8px rgba(246, 205, 134, 0.8), 0 0 80px 20px rgba(246, 205, 134, 0.35); animation: welcome-pulse 3.6s ease-in-out infinite; } .cosmic .welcome__star-halo { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(246, 205, 134, 0.35); box-shadow: inset 0 0 30px rgba(246, 205, 134, 0.18); animation: welcome-halo 6s linear infinite; } @keyframes welcome-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: 0.8; } } @keyframes welcome-halo { from { transform: rotate(0deg) scale(1); } to { transform: rotate(360deg) scale(1.05); } } .cosmic .welcome__eyebrow { justify-content: center; margin-top: 6px; } .cosmic .welcome__headline { margin-top: 18px; font-size: clamp(2.2rem, 6vw, 4.2rem); } .cosmic .welcome__name { font-style: italic; color: var(--gold); text-shadow: 0 0 40px rgba(246, 205, 134, 0.35); } .cosmic .welcome__lede { margin: 22px auto 0; } .cosmic .welcome__actions { margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .cosmic .welcome__autohint { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .cosmic.welcome--leaving { transition: opacity 0.8s ease, filter 0.8s ease; opacity: 0; filter: blur(8px); } /* ========================================================================= W — Wacht-UX: gloeiend "AI aan het werk"-redenering-paneel ========================================================================= */ .cosmic .reasoning { display: flex; gap: 16px; align-items: flex-start; align-self: flex-start; max-width: 88%; padding: 16px 18px; border: 1px solid rgba(109, 93, 252, 0.3); border-radius: 18px; background: radial-gradient(120% 120% at 0% 0%, rgba(109, 93, 252, 0.16), transparent 55%), var(--card); box-shadow: 0 0 40px -16px rgba(109, 93, 252, 0.5); animation: reasoning-breathe 3.4s ease-in-out infinite; } @keyframes reasoning-breathe { 0%, 100% { box-shadow: 0 0 40px -16px rgba(109, 93, 252, 0.5); } 50% { box-shadow: 0 0 60px -12px rgba(63, 210, 255, 0.5); } } .cosmic .reasoning--done { opacity: 0; transform: translateY(-6px) scale(0.98); transition: opacity 0.35s ease, transform 0.35s ease; } /* Het antwoord stroomt — kalmeer het paneel (geen busy-puls meer) maar houd het leesbaar zodat de zojuist-gesurfacede redenering/fetch-status zichtbaar blijft tot het "done"-event het hele blok vervangt. */ .cosmic .reasoning--settled { animation: none; opacity: 0.78; box-shadow: 0 0 30px -20px rgba(109, 93, 252, 0.5); } .cosmic .reasoning--settled .reasoning__orbit, .cosmic .reasoning--settled .reasoning__core { animation: none; } .cosmic .reasoning__aura { position: relative; flex: none; width: 34px; height: 34px; display: grid; place-items: center; } .cosmic .reasoning__core { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px 3px rgba(63, 210, 255, 0.8); animation: cosmic-twinkle 1.8s ease-in-out infinite; } .cosmic .reasoning__orbit { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(63, 210, 255, 0.35); animation: reasoning-spin 3.2s linear infinite; } .cosmic .reasoning__orbit--2 { inset: 7px; border-color: rgba(177, 92, 255, 0.4); animation-duration: 2.1s; animation-direction: reverse; } @keyframes reasoning-spin { to { transform: rotate(360deg); } } .cosmic .reasoning__body { flex: 1 1 auto; min-width: 0; } .cosmic .reasoning__label { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); margin-bottom: 6px; } .cosmic .reasoning__spark { color: var(--gold); } .cosmic .reasoning__fetch { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; } .cosmic .fetch-line { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.02em; color: var(--muted); } .cosmic .fetch-line--ok { color: var(--cyan); } .cosmic .fetch-line--err { color: #ffb3b3; } .cosmic .reasoning__think { font-size: 0.9rem; line-height: 1.55; color: #aab0dd; font-style: italic; white-space: pre-wrap; max-height: 220px; overflow-y: auto; } /* ========================================================================= Levende profielbouw — inline-edit-affordance, onzekerheids-marker, veld-materialisatie (SPEC-living-profielbouw §C). Alles binnen .cosmic, erft bestaande tokens (--violet/--cyan/--gold/--card/--line) + fonts. Geen tweede look. Alle nieuwe motion wordt door de .cosmic *-regel in het prefers-reduced-motion-block hierboven al gedoofd; de markers/states blijven zichtbaar (statisch). Onderaan staat een expliciete reduced-motion-vangnet voor de nieuwe field-materialize-keyframe (styleguide §1/§5: geen uitzondering). ========================================================================= */ /* ---- klik-tot-edit affordance (lees-slot dat een mini-form opent) ---- */ .cosmic .slot { position: relative; cursor: pointer; border-radius: 14px; /* onzichtbare rand zodat de hover/focus-fade niet 'springt' (layout-stabiel) */ border: 1px solid transparent; /* lichte negatieve marge + padding zodat de hover-vlek de tekst ademt zonder de typografische uitlijning te verschuiven */ margin: -6px -10px; padding: 6px 10px; transition: border-color 0.3s ease, background 0.3s ease, transform 0.25s ease, box-shadow 0.35s ease; } .cosmic .slot:hover, .cosmic .slot:focus-visible { outline: none; border-color: rgba(63, 210, 255, 0.4); background: rgba(63, 210, 255, 0.04); transform: translateY(-1px); box-shadow: 0 10px 30px -18px rgba(63, 210, 255, 0.5); } .cosmic .slot:focus-visible { border-color: rgba(63, 210, 255, 0.6); box-shadow: 0 0 0 4px rgba(63, 210, 255, 0.16); } /* tekst-variant: geen kaart-fill, alleen de fade — voor headline/bio/seeking */ .cosmic .slot--text { display: block; } /* potlood/✦-hint, rechtsboven; alleen zichtbaar op hover/focus van het slot */ .cosmic .field-edit-hint { position: absolute; top: 6px; right: 10px; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.06em; color: var(--cyan); display: inline-flex; align-items: center; gap: 5px; opacity: 0; transform: translateY(-2px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } .cosmic .field-edit-hint::before { content: "✎"; color: var(--gold); } .cosmic .slot:hover .field-edit-hint, .cosmic .slot:focus-visible .field-edit-hint { opacity: 0.85; transform: none; } /* inline-form-container die het lees-slot vervangt tijdens bewerken */ .cosmic .slot-edit, .cosmic .field-edit { display: flex; flex-direction: column; gap: 10px; border: 1px solid rgba(63, 210, 255, 0.4); border-radius: 14px; background: radial-gradient(90% 120% at 0% 0%, rgba(63, 210, 255, 0.06), transparent 60%), var(--card); padding: 14px 16px; box-shadow: 0 0 0 4px rgba(63, 210, 255, 0.08); } .cosmic .field-edit__row, .cosmic .slot-edit__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* knoppenrij van een mini-form: Bewaar (gold) links, Annuleer (ghost) ernaast */ .cosmic .field-edit__actions, .cosmic .slot-edit__actions { display: flex; align-items: center; gap: 8px; margin-top: 2px; } /* ---- onzekerheids-marker: ontbrekend veld ("vul aan") ---- */ .cosmic .slot--ask { border: 1px dashed rgba(246, 205, 134, 0.5); border-radius: 14px; background: linear-gradient(180deg, rgba(246, 205, 134, 0.05), transparent); color: var(--muted); padding: 14px 16px; margin: 0; font-family: "Spline Sans", sans-serif; transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.35s ease; } .cosmic .slot--ask:hover, .cosmic .slot--ask:focus-visible { outline: none; border-color: rgba(246, 205, 134, 0.75); background: linear-gradient(180deg, rgba(246, 205, 134, 0.09), transparent); box-shadow: 0 0 0 4px rgba(246, 205, 134, 0.1); } /* de invul-microcopy zelf: ingetogen, met een gouden vonk ervoor */ .cosmic .slot--ask__copy { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.95rem; } .cosmic .slot--ask__copy::before { content: "✦"; color: var(--gold); font-size: 0.9em; } /* ---- onzekerheids-marker: afgeleid veld ("dit leidde ik af — klopt het?") ---- */ .cosmic .uncertain { position: relative; } /* gouden ✦-stip rechtsboven het afgeleide veld */ .cosmic .uncertain__dot { position: absolute; top: 2px; right: 4px; font-size: 0.8rem; line-height: 1; color: var(--gold); text-shadow: 0 0 12px rgba(246, 205, 134, 0.7); animation: cosmic-twinkle 3.4s ease-in-out infinite; pointer-events: none; } /* de uitleg-regel + acties — getoond op hover/focus van het veld */ .cosmic .uncertain__hint { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.03em; color: var(--muted); max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.3s ease; } .cosmic .uncertain:hover .uncertain__hint, .cosmic .uncertain:focus-within .uncertain__hint, .cosmic .uncertain__hint:focus-within { max-height: 80px; opacity: 1; } .cosmic .uncertain__act { display: inline-flex; align-items: center; gap: 8px; } /* ---- veld-materialisatie: het veld verschijnt live tijdens de stream ---- */ /* lege-staat (placeholder vóór de AI iets invult): ingetogen, geen flits */ .cosmic .field--empty { color: var(--muted); text-shadow: 0 0 18px rgba(109, 93, 252, 0.25); } /* het zojuist gematerialiseerde veld speelt een veralgemeniseerde photo-materialize af (blur-in + lichte translate/scale) */ .cosmic .field--materializing, .cosmic .materialize { animation: field-materialize 0.85s cubic-bezier(0.2, 0.8, 0.2, 1); } @keyframes field-materialize { from { opacity: 0; filter: blur(8px) brightness(1.3); transform: translateY(8px) scale(0.98); } to { opacity: 1; filter: none; transform: none; } } /* eindstaat na de keyframe — neutraal, zodat niets blijft hangen */ .cosmic .field--ready { opacity: 1; filter: none; transform: none; } /* ---- kaart-slot: rol/project-kaart met edit-overlay + verwijder-knop ---- De kaart-div draagt `slot slot--card`; de inner .card levert de rand zelf, dus we neutraliseren de tekst-slot-marge en laten alleen de overlay-knoppen los. */ .cosmic .slot--card { margin: 0; padding: 0; border: 0; border-radius: 16px; } .cosmic .slot--card:hover, .cosmic .slot--card:focus-within { background: transparent; box-shadow: none; transform: none; } /* volledige, toetsenbord-focusbare klik-tot-edit-zone over de kaart */ .cosmic .slot__edit-zone { position: absolute; inset: 0; z-index: 2; width: 100%; border: 1px solid transparent; border-radius: 16px; background: transparent; cursor: pointer; padding: 0; transition: border-color 0.3s ease, box-shadow 0.35s ease; } .cosmic .slot__edit-zone:hover, .cosmic .slot__edit-zone:focus-visible { outline: none; border-color: rgba(63, 210, 255, 0.4); box-shadow: 0 0 0 4px rgba(63, 210, 255, 0.12); } /* ✎-hint binnen de kaart: rechtsONDER, weg van de ✕ rechtsboven */ .cosmic .slot--card .field-edit-hint { top: auto; bottom: 10px; right: 12px; z-index: 3; } .cosmic .slot__edit-zone:hover .field-edit-hint, .cosmic .slot__edit-zone:focus-visible .field-edit-hint { opacity: 0.85; transform: none; } /* ✕-verwijderknop rechtsboven; verschijnt op hover/focus van de kaart */ .cosmic .slot__delete { position: absolute; top: 8px; right: 8px; z-index: 4; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line); background: rgba(4, 4, 14, 0.6); color: var(--muted); font-size: 13px; line-height: 1; cursor: pointer; opacity: 0; transform: scale(0.9); transition: opacity 0.25s ease, transform 0.25s ease, color 0.2s ease, border-color 0.2s ease; } .cosmic .slot--card:hover .slot__delete, .cosmic .slot--card:focus-within .slot__delete { opacity: 1; transform: none; } .cosmic .slot__delete:hover, .cosmic .slot__delete:focus-visible { outline: none; color: var(--gold); border-color: rgba(246, 205, 134, 0.5); } /* ---- lege-staat-copy binnen een slot (vóór de AI/het lid iets invult) ---- */ .cosmic .slot--empty { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-family: "Spline Sans", sans-serif; font-size: 0.95rem; } .cosmic .slot--empty::before { content: "✦"; color: var(--gold); font-size: 0.9em; } /* ---- seeking-kaart hergebruikt card-label/-desc buiten een .card-context ---- */ .cosmic .seeking .card-label { font-family: "Spline Sans", sans-serif; font-weight: 500; color: var(--text); } .cosmic .seeking .card-desc { margin-top: 6px; font-size: 0.92rem; color: var(--muted); } /* ---- expliciet reduced-motion-vangnet voor de nieuwe keyframe ---- De .cosmic *-regel hierboven dooft animation/transition al; dit borgt dat een veld dat met .field--materializing landt direct zichtbaar is (geen 0-opacity die blijft hangen als de animatie nooit start) en dat de ✦-stip statisch blijft (styleguide §5: prefers-reduced-motion dooft ALLE motion). */ @media (prefers-reduced-motion: reduce) { .cosmic .field--materializing, .cosmic .materialize { animation: none !important; opacity: 1; filter: none; transform: none; } .cosmic .uncertain__dot { animation: none !important; } } /* ========================================================================= De Concierge (PRD §2/§4/§5) — het kosmische intent-oppervlak + de preview-band. Eén additief blok; raakt geen bestaande regels. Alleen bestaande tokens (--violet/--cyan/--gold/--card/--line/--muted/--text). Alle motion valt onder de bestaande `.cosmic *`-reduced-motion-regel; de preview-band en de Concierge-knop in de nav krijgen onderaan een expliciet reduced-motion-vangnet (net als de feedback-fab, want sommige zijn niet onder .cosmic gescopet). ========================================================================= */ /* ---- Preview-band (boven de nav, op élke pagina) ---- */ .preview-banner { display: flex; align-items: center; justify-content: center; gap: 14px; position: relative; padding: 7px 40px 7px 16px; border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.09)); background: linear-gradient(180deg, rgba(246, 205, 134, 0.06), transparent); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted, #9097c4); } .preview-banner__spark { color: var(--gold, #f6cd86); margin-right: 6px; } .preview-banner__text { display: inline-flex; align-items: center; } .preview-banner__close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); border: none; background: none; color: var(--muted, #9097c4); font-size: 15px; line-height: 1; cursor: pointer; padding: 4px 6px; transition: color 0.2s; } .preview-banner__close:hover { color: var(--text, #eef0ff); } /* ---- "Bekijk als bezoeker"-preview-chrome (owner-only, /profiel/voorbeeld) ---- Rustige, sticky bovenbalk die de publieke profielpagina omkadert. Goud-getint hairline + glas-blur in het Concierge-register; blijft in beeld bij scrollen zodat "Bewerken"/"Maak openbaar" altijd één klik weg zijn. */ .preview-frame { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(246, 205, 134, 0.22); background: linear-gradient(180deg, rgba(246, 205, 134, 0.08), rgba(10, 10, 36, 0.72)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .preview-frame__inner { max-width: 980px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 22px; flex-wrap: wrap; } .preview-frame__lead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; } .preview-frame__eyebrow { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold, #f6cd86); white-space: nowrap; } .preview-frame__spark { color: var(--gold, #f6cd86); } .preview-frame__text { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: "Spline Sans", system-ui, sans-serif; font-size: 13.5px; color: var(--text, #eef0ff); } .preview-frame__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } @media (max-width: 560px) { .preview-frame__inner { padding: 9px 16px; } .preview-frame__text { font-size: 12.5px; } } /* ---- Concierge-ingang in de nav ---- */ .cosmic .cnav__concierge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(63, 210, 255, 0.25); border-radius: 100px; padding: 7px 14px; cursor: pointer; font-family: "JetBrains Mono", monospace; font-size: 11.5px; letter-spacing: 0.04em; color: var(--muted); background: rgba(255, 255, 255, 0.02); transition: color 0.25s, border-color 0.3s, box-shadow 0.35s, transform 0.2s; } .cosmic .cnav__concierge:hover { color: var(--text); border-color: rgba(63, 210, 255, 0.55); box-shadow: 0 8px 26px -14px rgba(63, 210, 255, 0.6); transform: translateY(-1px); } .cosmic .cnav__concierge:focus-visible { outline: none; border-color: rgba(63, 210, 255, 0.7); box-shadow: 0 0 0 4px rgba(63, 210, 255, 0.18); } .cosmic .cnav__concierge-spark { color: var(--gold); } @media (max-width: 640px) { .cosmic .cnav__concierge { padding: 6px 11px; } .cosmic .cnav__concierge-text { display: none; } } /* ---- Het oppervlak: overlay + naar-voren-ademend paneel ---- */ .concierge-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: clamp(48px, 12vh, 140px) 16px 16px; overflow-y: auto; } .concierge-overlay[hidden] { display: none; } /* Het scrim is bewust GEEN harde zwart-overlay-modal (= standaard): een zachte, kosmische verdieping zodat het mesh erachter blijft driften (PRD §2.1). */ .concierge-overlay__scrim { position: fixed; inset: 0; background: radial-gradient(120% 90% at 50% 0%, rgba(13, 12, 38, 0.55), transparent 70%), rgba(4, 4, 14, 0.55); backdrop-filter: blur(3px); } .concierge-panel { position: relative; width: min(640px, 100%); border: 1px solid rgba(109, 93, 252, 0.3); border-radius: 22px; padding: 18px 18px 16px; background: radial-gradient(120% 90% at 0% 0%, rgba(109, 93, 252, 0.16), transparent 55%), rgba(10, 10, 30, 0.94); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.04); backdrop-filter: blur(12px); opacity: 0; transform: translateY(16px) scale(0.985); filter: blur(8px); transition: opacity 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.42s ease; } .concierge-panel--in { opacity: 1; transform: none; filter: none; } .concierge-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .concierge-panel__eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); } .concierge-panel__close { border: none; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; transition: color 0.2s; } .concierge-panel__close:hover { color: var(--text); } /* ---- Invoerveld ---- */ .concierge-form { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 14px; padding: 4px 6px 4px 14px; background: rgba(255, 255, 255, 0.035); transition: border-color 0.3s, box-shadow 0.3s, background 0.3s; } .concierge-form:focus-within { border-color: rgba(63, 210, 255, 0.45); background: rgba(63, 210, 255, 0.05); /* Eén zachte halo i.p.v. een harde 4px-ring — die las samen met de 1px border als een dubbele rand (storend op het grote canvas-veld). */ box-shadow: 0 0 28px rgba(63, 210, 255, 0.12); } .concierge-form__spark { color: var(--gold); font-size: 14px; } /* Specifieker dan de globale `.cosmic input`-regel (0,1,1), anders krijgt het veld een EIGEN border/background/focus-border bovenop de form-frame → dubbele rand. De form levert de enige rand; het veld zelf is kaal. */ .cosmic .concierge-form__input { flex: 1 1 auto; width: auto; min-width: 0; border: none; background: none; border-radius: 0; outline: none; box-shadow: none; color: var(--text); font-family: "Spline Sans", system-ui, sans-serif; font-size: 16px; padding: 11px 0; } .cosmic .concierge-form__input:focus { border: none; background: none; box-shadow: none; } .concierge-form__input::placeholder { color: var(--muted); opacity: 0.85; } .concierge-form__go { flex: none; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.04); color: var(--cyan); font-family: "JetBrains Mono", monospace; font-size: 14px; cursor: pointer; padding: 8px 12px; transition: color 0.2s, border-color 0.3s, background 0.3s; } .concierge-form__go:hover { color: var(--text); border-color: rgba(63, 210, 255, 0.5); } .concierge-form__go:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(63, 210, 255, 0.2); } /* ---- INSTANT-laag: deterministische resultaten ---- */ .concierge-instant { display: flex; flex-direction: column; margin-top: 8px; } .concierge-instant:empty { display: none; } .concierge-instant__row { display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%; border: none; border-radius: 10px; background: none; cursor: pointer; padding: 9px 12px; color: var(--text); text-decoration: none; font-family: "Spline Sans", system-ui, sans-serif; transition: background 0.2s; } .concierge-instant__row:hover, .concierge-instant__row:focus-visible { outline: none; background: rgba(63, 210, 255, 0.08); } .concierge-instant__label { font-size: 14px; } .concierge-instant__sub { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.04em; color: var(--muted); } .concierge-instant__ask .concierge-instant__label { color: var(--gold); } /* ---- Proactieve nudge ---- */ .concierge-nudge { margin-top: 14px; border: 1px solid rgba(109, 93, 252, 0.3); border-radius: 16px; padding: 14px 16px; background: radial-gradient(120% 120% at 0% 0%, rgba(109, 93, 252, 0.12), transparent 60%), var(--card); } .concierge-nudge--founder { border-color: rgba(246, 205, 134, 0.35); } .concierge-nudge__eyebrow { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 6px; } .concierge-nudge--founder .concierge-nudge__eyebrow { color: var(--gold); } .concierge-nudge__text { font-size: 0.96rem; line-height: 1.5; color: var(--text); margin: 0 0 12px; } .concierge-nudge__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .concierge-nudge__do { border: none; border-radius: 100px; cursor: pointer; padding: 8px 16px; font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.04em; color: #1a1330; background: linear-gradient(100deg, var(--gold), #ffe6b0); transition: transform 0.2s, box-shadow 0.3s; } .concierge-nudge__do:hover { transform: translateY(-1px); box-shadow: 0 8px 26px -10px rgba(246, 205, 134, 0.6); } .concierge-nudge__do:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(63, 210, 255, 0.22); } .concierge-nudge__dismiss { border: none; background: none; cursor: pointer; color: var(--muted); font-family: "JetBrains Mono", monospace; font-size: 11.5px; letter-spacing: 0.03em; padding: 4px 2px; transition: color 0.2s; } .concierge-nudge__dismiss:hover { color: var(--text); } .concierge-nudge__dismiss:focus-visible { outline: none; border-radius: 4px; box-shadow: 0 0 0 4px rgba(63, 210, 255, 0.18); } /* ---- De levende flow + materialiserende kaarten ---- */ .concierge-flow { margin-top: 14px; } .concierge-flow:empty { margin-top: 0; } .concierge-answer { display: block; max-width: 100%; margin-top: 12px; white-space: pre-wrap; } .concierge-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 14px; } .concierge-results:empty { display: none; margin-top: 0; } /* De kaart-in-de-stroom hergebruikt .member-star 1:1; deze wrapper voegt alleen de in-vloei-choreografie + de "waarom"-regel toe. */ .concierge-card { display: flex; flex-direction: column; gap: 8px; } .concierge-card .member-star { height: 100%; } .concierge-card--in { animation: concierge-card-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); } @keyframes concierge-card-in { from { opacity: 0; filter: blur(7px); transform: translateY(10px) scale(0.98); } to { opacity: 1; filter: none; transform: none; } } .concierge-card__why { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.03em; color: var(--muted); } .concierge-card__why span[aria-hidden] { color: var(--gold); } @media (max-width: 640px) { .concierge-overlay { padding-top: 24px; } .concierge-form__input { font-size: 16px; } .concierge-results { grid-template-columns: 1fr; } } /* ---- Reduced-motion-vangnet (de preview-band + de nav-knop zijn deels niet onder .cosmic; de panel-entrance valt al onder `.cosmic *`, maar we maken het expliciet zodat niets blijft hangen — styleguide §5: geen uitzondering). ---- */ @media (prefers-reduced-motion: reduce) { .preview-banner__close, .cosmic .cnav__concierge, .concierge-panel, .concierge-card--in { animation: none !important; transition: none !important; } .concierge-panel { opacity: 1; transform: none; filter: none; } } /* ========================================================================= Agent-Shell (Fase 1) — de levende canvas. Additief; hergebruikt de tokens en de concierge-machinerie. Geen tweede palette. ========================================================================= */ .canvas { min-height: 100vh; padding-bottom: 96px; } .canvas-intro { margin-top: 40px; } /* Het primaire, altijd-zichtbare veld is een ruimere variant van .concierge-form. */ .canvas-form { max-width: 620px; } .canvas-form .concierge-form__input { font-size: 17px; } .canvas-stream { margin-top: 28px; } /* Ambient ruststaat van de canvas: de levende graaf + één gegrond signaal, zodat een lid niet in een leeg veld landt maar in een ademende wereld. */ .cosmic .canvas-ambient__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; } .cosmic .canvas-ambient__count { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.04em; color: var(--muted); } /* Een surface-fragment is een NEUTRALE wrapper (geen eigen kaart-chrome dat het grid/board dubbel omlijst) en spant de volle breedte van de resultaten-grid, zodat een heel ledengrid/roadmap-board niet in één kolom wordt geperst. */ .surface-card { grid-column: 1 / -1; display: block; } .surface-card:focus { outline: none; } .surface-card:focus-visible { outline: 1px solid rgba(63, 210, 255, 0.5); outline-offset: 6px; border-radius: 14px; } /* Contextuele suggestie-chips — de "wegwijs zonder menu". */ .canvas-suggesties { margin-top: 28px; } .canvas-suggesties:empty { margin-top: 0; } .canvas-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; } .canvas-chip { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); background: var(--card); border-radius: 999px; transition: border-color 0.18s ease, background 0.18s ease; } .canvas-chip:hover { border-color: rgba(63, 210, 255, 0.4); } .canvas-chip__do { appearance: none; background: transparent; border: 0; color: var(--text); font: inherit; font-size: 13px; padding: 8px 14px; cursor: pointer; text-decoration: none; border-radius: 999px 0 0 999px; } .canvas-chip__do:focus-visible { outline: 1px solid rgba(63, 210, 255, 0.6); outline-offset: 2px; } .canvas-chip__dismiss { appearance: none; background: transparent; border: 0; color: var(--muted); font-size: 12px; line-height: 1; padding: 8px 12px 8px 4px; cursor: pointer; border-radius: 0 999px 999px 0; } .canvas-chip__dismiss:hover { color: var(--text); } .canvas-chip__dismiss:focus-visible { outline: 1px solid rgba(63, 210, 255, 0.6); outline-offset: 2px; } /* Subtiele footer-fallback (escape-hatch). Klein, --muted, onderaan. */ .canvas-fallback { margin-top: 56px; display: flex; flex-direction: column; gap: 12px; } .canvas-fallback__toggle { appearance: none; background: transparent; border: 0; color: var(--muted); font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.06em; display: inline-flex; align-items: center; gap: 7px; padding: 6px 2px; cursor: pointer; width: fit-content; opacity: 0.7; transition: opacity 0.18s ease, color 0.18s ease; } .canvas-fallback__toggle:hover { opacity: 1; color: var(--text); } .canvas-fallback__toggle:focus-visible { outline: 1px solid rgba(63, 210, 255, 0.5); outline-offset: 3px; opacity: 1; } .canvas-fallback__menu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; border-top: 1px solid var(--line); padding-top: 14px; } .canvas-fallback__route { appearance: none; background: transparent; border: 0; color: var(--muted); font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; padding: 2px 0; transition: color 0.16s ease; } .canvas-fallback__route:hover { color: var(--text); } .canvas-fallback__route:focus-visible { outline: 1px solid rgba(63, 210, 255, 0.5); outline-offset: 3px; color: var(--text); } .canvas-fallback__route--out { color: var(--muted); opacity: 0.8; } .canvas-fallback__logout { display: inline; margin: 0; } @media (max-width: 640px) { .canvas-form { max-width: 100%; } } @media (prefers-reduced-motion: reduce) { .canvas-chip, .canvas-fallback__toggle, .canvas-fallback__route { transition: none !important; } } /* ---- Profielbouw in de canvas (Agent-Shell A) ---- */ .profile-builder { display: block; } .profile-builder__eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .profile-builder__eyebrow span[aria-hidden] { color: var(--gold); } .profile-builder__lead { margin-top: 8px; max-width: 60ch; color: var(--text); line-height: 1.6; } .profile-builder__form { align-items: flex-end; } .profile-builder__input { resize: vertical; min-height: 2.8em; line-height: 1.5; } .profile-builder__go { flex: none; align-self: flex-end; } .profile-builder__stage:empty { margin-top: 0; } .profile-builder__full { display: inline-block; margin-top: 22px; color: var(--muted); font-size: 13px; text-decoration: none; transition: color 0.16s ease; } .profile-builder__full:hover { color: var(--text); } /* ---- First-run profiel-aanbod (rustige inline-kaart, geen pop-up) ---- */ .canvas-firstrun { margin-top: 26px; max-width: 620px; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; background: linear-gradient(180deg, rgba(63, 210, 255, 0.045), rgba(255, 255, 255, 0.02)); } .canvas-firstrun__eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .canvas-firstrun__eyebrow span[aria-hidden] { color: var(--gold); } .canvas-firstrun__text { margin: 10px 0 16px; line-height: 1.6; color: var(--text); } .canvas-firstrun__go { font-size: 14px; } /* ---- Schrijf-surfaces (Fase 2): voorgevuld concept-formulier in de stroom ---- */ .concierge-draft { display: block; } .concierge-draft__head { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 12px; } .concierge-draft__head span[aria-hidden] { color: var(--gold); } .concierge-draft__field { margin-bottom: 12px; } .concierge-draft .field-label { display: block; margin-bottom: 5px; } .concierge-draft__actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; } /* ---- Publieke demo/showcase (gescript, fictief profiel) ---- */ .demo-badge { position: sticky; top: 0; z-index: 30; text-align: center; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); background: rgba(20, 16, 40, 0.7); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding: 9px 16px; } .demo-typed { color: var(--text); font-size: 17px; padding: 11px 0; opacity: 0.9; } .demo-tags { display: flex; flex-wrap: wrap; gap: 8px; } .demo-tag { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.03em; color: var(--cyan); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; } .demo-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .demo-card { padding: 18px 20px; } .demo-card__title { font-family: "Fraunces", serif; font-size: 1.15rem; color: var(--text); } .demo-card__desc { margin: 8px 0 10px; line-height: 1.55; } .demo-card__link { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--gold); } .demo-cta .btn { font-size: 15px; } /* ---- Gerenderde AI-antwoord-markdown (md.js) ---- */ .md-rendered { white-space: normal; } .md-rendered > :first-child { margin-top: 0; } .md-rendered h1, .md-rendered h2, .md-rendered h3, .md-rendered h4 { font-family: "Fraunces", serif; font-weight: 400; line-height: 1.25; color: var(--text); margin: 16px 0 6px; } .md-rendered h1 { font-size: 1.35rem; } .md-rendered h2 { font-size: 1.2rem; } .md-rendered h3 { font-size: 1.05rem; } .md-rendered h4 { font-size: 0.95rem; color: var(--muted); letter-spacing: 0.02em; } .md-rendered p { margin: 8px 0; line-height: 1.6; } .md-rendered ul { margin: 8px 0; padding-left: 20px; } .md-rendered li { margin: 3px 0; line-height: 1.55; } .md-rendered strong { color: var(--text); font-weight: 600; } .md-rendered em { color: var(--cyan); font-style: italic; } .md-rendered code { font-family: "JetBrains Mono", monospace; font-size: 0.9em; background: rgba(255, 255, 255, 0.06); padding: 1px 5px; border-radius: 5px; } .md-rendered hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; } /* ---- Demo: sfeerbeeld-hero + tijdlijn ---- */ .demo-cover { margin: 0 0 8px; } .demo-cover img { width: 100%; max-height: 320px; object-fit: cover; border-radius: 16px; border: 1px solid var(--line); display: block; } .demo-cover figcaption { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.04em; margin-top: 8px; } .demo-cover figcaption span[aria-hidden] { color: var(--gold); } .demo-timeline { list-style: none; padding: 0; margin: 0; } .demo-timeline li { display: flex; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--line); line-height: 1.5; } .demo-timeline li:last-child { border-bottom: 0; } .demo-timeline__when { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--gold); min-width: 48px; } /* ---- Demo: prominente startknop ---- */ .demo-play { font-size: 16px; padding: 14px 28px; } /* ============================================================ */ /* Agenda (event) + Nieuws (news) — Post-kaarten */ /* ============================================================ */ .cosmic .event-grid, .cosmic .news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } /* ---- gedeelde kaart-basis ---- */ .cosmic .event-card, .cosmic .news-card { position: relative; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(120% 100% at 0% 0%, rgba(109, 93, 252, 0.07), transparent 60%), var(--card); padding: 20px; transition: border-color 0.3s, transform 0.25s, box-shadow 0.35s; } .cosmic .event-card:hover, .cosmic .news-card:hover { transform: translateY(-3px); border-color: rgba(63, 210, 255, 0.4); box-shadow: 0 18px 48px -24px rgba(63, 210, 255, 0.55); } .cosmic .event-card__head, .cosmic .news-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cosmic .event-card__title, .cosmic .news-card__title { font-family: "Fraunces", serif; font-weight: 400; font-size: 1.28rem; line-height: 1.18; color: var(--text); margin: 0; } .cosmic .event-card__text, .cosmic .news-card__text { color: #c7cbe8; font-size: 0.94rem; margin: 0; } .cosmic .event-card__foot, .cosmic .news-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; } .cosmic .event-card__by, .cosmic .news-card__by { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.03em; color: var(--muted); } .cosmic .event-card__link, .cosmic .news-card__link { font-size: 0.85rem; color: var(--cyan); text-decoration: none; white-space: nowrap; } .cosmic .event-card__link:hover, .cosmic .news-card__link:hover { text-decoration: underline; } .cosmic .event-card__admin, .cosmic .news-card__admin { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); } .cosmic .event-card__hidden, .cosmic .news-card__hidden { font-family: "JetBrains Mono", monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: #ffb3b3; } /* ---- event-specifiek ---- */ .cosmic .event-card__when { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--gold); letter-spacing: 0.02em; white-space: nowrap; } .cosmic .event-card__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.85rem; color: var(--muted); } .cosmic .event-card__cadence { color: var(--cyan); } /* frequentie-badge — terugkerend = cyaan/levend, eenmalig = goud */ .cosmic .freq-badge { display: inline-flex; align-items: center; gap: 5px; font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 11px; border-radius: 100px; border: 1px solid rgba(63, 210, 255, 0.35); color: var(--cyan); background: rgba(63, 210, 255, 0.07); white-space: nowrap; } .cosmic .freq-badge--eenmalig { color: var(--gold); border-color: rgba(246, 205, 134, 0.4); background: rgba(246, 205, 134, 0.07); } .cosmic .freq-badge--doorlopend { color: var(--magenta); border-color: rgba(177, 92, 255, 0.4); background: rgba(177, 92, 255, 0.07); } /* terugkerend krijgt een zachte, levende puls (reduced-motion-safe) */ @media (prefers-reduced-motion: no-preference) { .cosmic .freq-badge--wekelijks, .cosmic .freq-badge--tweewekelijks, .cosmic .freq-badge--maandelijks { animation: freqpulse 3.4s ease-in-out infinite; } } @keyframes freqpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(63, 210, 255, 0); } 50% { box-shadow: 0 0 16px -2px rgba(63, 210, 255, 0.45); } } /* ---- nieuws-specifiek ---- */ .cosmic .news-card__date { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--muted); white-space: nowrap; } .cosmic .news-card__source { font-size: 0.82rem; color: var(--muted); font-style: italic; } /* De gegronde graaf-verbinding ("raakt ") leest als een edge, niet als een gewone bronregel: mono-cyaan label + de chips krijgen een zachte cyaan gloed. */ .cosmic .news-card__source[data-connection] { font-style: normal; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.03em; color: var(--cyan); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; } .cosmic [data-connection] .role-badge { border-color: rgba(63, 210, 255, 0.45); box-shadow: 0 0 12px -4px rgba(63, 210, 255, 0.5); } /* rol-badge — hoe een lid bij het artikel zit */ .cosmic .role-badge { display: inline-flex; align-items: center; font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 11px; border-radius: 100px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; } .cosmic .role-badge--geschreven { color: #c3b6ff; border-color: rgba(109, 93, 252, 0.45); background: rgba(109, 93, 252, 0.08); } .cosmic .role-badge--geinterviewd { color: var(--cyan); border-color: rgba(63, 210, 255, 0.4); background: rgba(63, 210, 255, 0.07); } .cosmic .role-badge--vermeld { color: var(--gold); border-color: rgba(246, 205, 134, 0.4); background: rgba(246, 205, 134, 0.07); } /* ---- toevoeg-formulier (event + nieuws) ---- */ .cosmic .event-form__lead, .cosmic .news-form .event-form__lead { font-family: "Fraunces", serif; font-size: 1.1rem; color: var(--text); margin-bottom: 16px; } .cosmic .event-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 560px) { .cosmic .event-form__grid { grid-template-columns: 1fr; } } .cosmic .event-form__title { grid-column: 1 / -1; } /* ============================================================ */ /* Matchmaking (Tier 1) — vraag↔aanbod-kaarten */ /* ============================================================ */ .cosmic .match-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .cosmic .match-card { position: relative; display: flex; flex-direction: column; gap: 9px; border: 1px solid rgba(109, 93, 252, 0.28); border-radius: 18px; background: radial-gradient(130% 110% at 0% 0%, rgba(109, 93, 252, 0.12), transparent 60%), var(--card); padding: 20px; transition: border-color 0.3s, transform 0.25s, box-shadow 0.35s; } .cosmic .match-card:hover { transform: translateY(-3px); border-color: rgba(177, 92, 255, 0.5); box-shadow: 0 18px 48px -24px rgba(177, 92, 255, 0.55); } .cosmic .match-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cosmic .match-badge { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 11px; border-radius: 100px; border: 1px solid rgba(177, 92, 255, 0.4); color: #d9c2ff; background: rgba(177, 92, 255, 0.08); white-space: nowrap; } .cosmic .match-card__score { font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 500; color: var(--cyan); } .cosmic .match-card__title { font-family: "Fraunces", serif; font-weight: 400; font-size: 1.24rem; line-height: 1.18; color: var(--text); margin: 0; } .cosmic .match-card__who { font-size: 0.88rem; color: var(--muted); } .cosmic .match-card__why { margin: 4px 0 0; color: #d7d9f2; font-size: 0.95rem; line-height: 1.5; padding-top: 10px; border-top: 1px solid var(--line); } /* ============================================================ */ /* Intro's / Connections (Tier 1 Fase 2) */ /* ============================================================ */ /* intro-formulier in de match-kaart */ .cosmic .match-card__foot { margin-top: 4px; } .cosmic .match-card__intro:not(:empty) { margin-top: 12px; } .cosmic .intro-form { border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.03); padding: 14px; } .cosmic .intro-form textarea { width: 100%; margin-top: 6px; } .cosmic .intro-form__actions { display: flex; gap: 8px; margin-top: 10px; } .cosmic .intro-done { font-size: 0.9rem; color: var(--cyan); padding: 10px 0; } .cosmic .intro-done__warn { margin-top: 6px; color: #ffd5d5; font-size: 0.82rem; } /* connections-surface */ .cosmic .conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .cosmic .conn-card { display: flex; flex-direction: column; gap: 9px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); padding: 18px; transition: border-color 0.3s, transform 0.25s; } .cosmic .conn-card--accepted { border-color: rgba(63, 210, 255, 0.4); } .cosmic .conn-card--declined { opacity: 0.62; } .cosmic .conn-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cosmic .conn-badge { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; border: 1px solid var(--line); color: var(--muted); } .cosmic .conn-status { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--muted); } .cosmic .conn-status--accepted { color: var(--cyan); } .cosmic .conn-status--declined { color: #ffb3b3; } .cosmic .conn-card__who { font-family: "Fraunces", serif; font-size: 1.08rem; color: var(--text); } .cosmic .conn-card__msg { margin: 0; color: #c7cbe8; font-size: 0.92rem; line-height: 1.5; } .cosmic .conn-card__contact { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--cyan); } .cosmic .conn-card__actions { display: flex; gap: 8px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); } /* ============================================================ */ /* Verbind je AI-tool (MCP connect) */ /* ============================================================ */ .cosmic .connect-step { display: flex; gap: 16px; align-items: flex-start; border: 1px solid var(--line); border-radius: 18px; background: var(--card); padding: 20px; } .cosmic .connect-step__n { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(109, 93, 252, 0.5); color: #c3b6ff; font-family: "JetBrains Mono", monospace; font-size: 14px; } .cosmic .connect-step__h { font-family: "Fraunces", serif; font-size: 1.15rem; color: var(--text); } .cosmic .connect-step__p { margin: 6px 0 12px; color: var(--muted); font-size: 0.92rem; } .cosmic .connect-step__p em { color: #cfd2ef; font-style: italic; } .cosmic .connect-gen { display: flex; gap: 10px; flex-wrap: wrap; } .cosmic .connect-gen input { flex: 1 1 240px; } .cosmic .connect-cmd { margin: 4px 0 0; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: rgba(4, 4, 14, 0.6); overflow-x: auto; } .cosmic .connect-cmd code { font-family: "JetBrains Mono", monospace; font-size: 12.5px; line-height: 1.6; color: #cfe6ff; white-space: pre; } .cosmic .connect-cmd--token code { color: var(--gold); word-break: break-all; white-space: pre-wrap; } .cosmic .new-token { margin-top: 16px; border: 1px solid rgba(246, 205, 134, 0.4); border-radius: 16px; background: rgba(246, 205, 134, 0.05); padding: 18px; } .cosmic .new-token__head { font-family: "Fraunces", serif; color: var(--gold); margin-bottom: 10px; } .cosmic .new-token__cmd-label, .cosmic .new-token__refresh { margin-top: 12px; } .cosmic .new-token__cmd-label { color: var(--muted); font-size: 0.88rem; } .cosmic .token-list { display: flex; flex-direction: column; gap: 10px; } .cosmic .token-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 14px 16px; } .cosmic .token-row__label { color: var(--text); font-size: 0.95rem; } .cosmic .token-row__meta { display: block; font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--muted); margin-top: 2px; } /* Verbind-paneel als in-canvas surface + vraag-bubbel */ .cosmic .concierge-question { margin-bottom: 12px; } .cosmic .connect-panel { display: flex; flex-direction: column; gap: 14px; } .cosmic .connect-panel__head { font-family: "Fraunces", serif; font-size: 1.2rem; color: var(--text); } .cosmic .connect-panel__full { align-self: flex-start; font-size: 0.85rem; margin-top: 4px; } /* ========================================================================= Discovery (Fase 1a) — de live-streamende footprint-ontdekking. De "ik zoek…"- puls + de kandidaat-kaarten die voorbijvliegen + crystalliseren. Eén additief blok; alleen bestaande tokens (--violet/--cyan/--gold/--card/--line/--muted/ --text). Motion valt onder de bestaande `.cosmic *`-reduced-motion-regel; de kaart-materialisatie hergebruikt .field--materializing/.field--ready. ========================================================================= */ .cosmic .ontdek { display: block; } /* "ik zoek…"-pulse-paneel: pulserende orb + live status/redenering */ .cosmic .ontdek__pulse { display: flex; align-items: center; gap: 12px; color: var(--text); font-family: "Spline Sans", sans-serif; font-size: 0.98rem; } .cosmic .ontdek__orb { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--cyan), var(--violet) 70%); box-shadow: 0 0 14px 3px rgba(109, 93, 252, 0.45); animation: welcome-pulse 1.6s ease-in-out infinite; } .cosmic .ontdek__reason { margin-top: 8px; font-family: "JetBrains Mono", monospace; font-size: 0.82rem; line-height: 1.55; color: var(--muted); opacity: 0.85; } .cosmic .ontdek__result { margin: 6px 0 0; font-family: "Spline Sans", sans-serif; font-size: 0.95rem; color: var(--muted); } /* de stroom kandidaat-kaarten */ .cosmic .ontdek__cards { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; } .cosmic .ontdek-card { grid-column: 1 / -1; } .cosmic .ontdek-card__inner { padding: 18px 20px; } .cosmic .ontdek-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .cosmic .ontdek-card__conf { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--gold); letter-spacing: 0.03em; } .cosmic .ontdek-card__title { font-family: "Fraunces", serif; font-size: 1.12rem; color: var(--text); margin: 0 0 6px; } .cosmic .ontdek-card__why { font-size: 0.92rem; line-height: 1.55; margin: 0 0 10px; } .cosmic .ontdek-card__link { display: inline-block; font-family: "JetBrains Mono", monospace; font-size: 0.8rem; color: var(--cyan); word-break: break-all; text-decoration: none; border-bottom: 1px solid rgba(63, 210, 255, 0.25); } .cosmic .ontdek-card__link:hover { border-bottom-color: var(--cyan); } .cosmic .ontdek-card__actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .cosmic .ontdek-card__actions form { display: inline; margin: 0; } /* ---- Fase 1b: crystalliseer/bevestig-laag ---------------------------------- */ /* De "klopt dit?"-vraag op een twijfelkaart en de "ik koppel dit…"-regel op een auto-kaart — ingetogen, kosmisch, helder. */ .cosmic .ontdek-card__ask { font-size: 0.9rem; margin: 4px 0 0; } .cosmic .ontdek-card__settling { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; margin: 12px 0 0; } .cosmic .ontdek-card__spark { color: var(--gold); animation: ontdek-spark 1.4s ease-in-out infinite; } @keyframes ontdek-spark { 0%, 100% { opacity: 0.45; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.15); } } /* Gekoppeld: een korte settle-glow, dan rust (een echte mijlpaal, geen lichtshow). */ .cosmic .ontdek-card--done .ontdek-card__added { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; color: var(--text); margin: 0 0 12px; } .cosmic .ontdek-card__check { color: var(--gold); font-size: 1.05rem; } .cosmic .field--crystallized { animation: ontdek-crystallize 1s cubic-bezier(0.2, 0.8, 0.2, 1); } @keyframes ontdek-crystallize { 0% { opacity: 0.6; transform: scale(0.985); box-shadow: 0 0 0 0 rgba(244, 196, 110, 0.35); } 45% { box-shadow: 0 0 26px 2px rgba(244, 196, 110, 0.28); } 100% { opacity: 1; transform: none; box-shadow: 0 0 0 0 rgba(244, 196, 110, 0); } } .cosmic .ontdek-card--undone { opacity: 0.92; } @media (prefers-reduced-motion: reduce) { .cosmic .ontdek-card__spark, .cosmic .field--crystallized { animation: none; } } /* ---- Notificatie-instellingen-paneel ------------------------------------- */ .cosmic .notif-panel { display: flex; flex-direction: column; gap: 26px; } .cosmic .notif-panel__group { display: flex; flex-direction: column; gap: 10px; } .cosmic .notif-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .cosmic .notif-choice form { margin: 0; } .cosmic .notif-opt { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.02); color: var(--text); cursor: pointer; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; } .cosmic .notif-opt:hover:not([disabled]) { border-color: var(--cyan); } .cosmic .notif-opt--on { border-color: var(--gold); box-shadow: 0 0 22px -6px rgba(244, 196, 110, 0.4); background: rgba(244, 196, 110, 0.06); } .cosmic .notif-opt[disabled] { opacity: 0.5; cursor: not-allowed; } .cosmic .notif-opt__title { font-weight: 500; } .cosmic .notif-opt__sub { font-size: 0.85rem; color: var(--muted); } .cosmic .notif-ok { color: var(--gold); } /* ----------------------------------------------------------------------- */ /* Cosmic working-state — een levend "de agent is bezig"-denkveld. */ /* Herbruikbaar: include _cosmic_working.html binnen een SSE-host. Beweegt */ /* altijd (constellatie-echo) + een statusregel gevoed door echte events; */ /* tussen events roteren on-brand geruststellingen (de JS in de partial). */ /* Performant: alleen transform/opacity. prefers-reduced-motion-veilig. */ /* ----------------------------------------------------------------------- */ .cosmic-working { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 22px 0; } .cosmic-working__field { position: relative; width: 148px; height: 148px; flex: none; } /* Nevel-glow die langzaam ademt. */ .cosmic-working__nebula { position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--violet), transparent 60%); opacity: 0.22; filter: blur(14px); animation: cw-breathe 6s ease-in-out infinite; } /* Pulserende kern. */ .cosmic-working__core { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px 2px var(--gold), 0 0 28px 7px rgba(109, 93, 252, 0.5); animation: cw-core 2.4s ease-in-out infinite; } /* Faint ringen (constellatie-echo) die ronddraaien, elk met een driftende node. */ .cosmic-working__orbit { position: absolute; top: 50%; left: 50%; border-radius: 50%; border: 1px solid var(--line); will-change: transform; } .cosmic-working__orbit--a { width: 64px; height: 64px; margin: -32px 0 0 -32px; animation: cw-spin 9s linear infinite; } .cosmic-working__orbit--b { width: 104px; height: 104px; margin: -52px 0 0 -52px; animation: cw-spin 15s linear infinite reverse; } .cosmic-working__orbit--c { width: 146px; height: 146px; margin: -73px 0 0 -73px; animation: cw-spin 24s linear infinite; } .cosmic-working__node { position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px 1px var(--cyan); } .cosmic-working__orbit--b .cosmic-working__node { background: var(--magenta); box-shadow: 0 0 8px 1px var(--magenta); } .cosmic-working__orbit--c .cosmic-working__node { background: var(--violet); box-shadow: 0 0 8px 1px var(--violet); } .cosmic-working__status { font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: 0.02em; color: var(--muted); text-align: center; min-height: 1.3em; max-width: 44ch; margin: 0; transition: opacity 0.18s ease, transform 0.18s ease; } .cosmic-working__status.is-swapping { opacity: 0; transform: translateY(4px); } /* Persistente, eerlijke verwachtings-regel (roteert niet) + subtiele teller. */ .cosmic-working__hint { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.04em; line-height: 1.5; color: var(--muted); opacity: 0.66; text-align: center; max-width: 46ch; margin: -6px 0 0; } .cosmic-working__elapsed { color: var(--cyan); opacity: 0.85; } /* Tijdens reasoning klopt de kern sneller (echte denk-intensiteit). */ .cosmic-working--thinking .cosmic-working__core { animation-duration: 1.4s; } @keyframes cw-spin { to { transform: rotate(360deg); } } @keyframes cw-breathe { 0%, 100% { opacity: 0.16; transform: scale(0.92); } 50% { opacity: 0.30; transform: scale(1.08); } } @keyframes cw-core { 0%, 100% { opacity: 0.7; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } } @media (prefers-reduced-motion: reduce) { .cosmic-working__orbit, .cosmic-working__nebula { animation: none; } .cosmic-working__core { animation: cw-core 3s ease-in-out infinite; } }