/* ========================================================================== Nuzic Theme — Visual adaptation for Apps 9+ Activació: afegir data-visual="nuzic" al i importar aquest fitxer. Palette de referència (nuzic_app): --Nuzic_white: white --Nuzic_light: #eee8d8 --Nuzic_grey: #AAA699 --Nuzic_dark: #43433b --Nuzic_red: #e76f68 / light: #f5c6c2 --Nuzic_blue: #7bb4cd / light: #bdd9e6 --Nuzic_green: #7cd6b3 / light: #cbefe1 --Nuzic_yellow: #ffbb33 / light: #ffeecc --Nuzic_pink: #f28aad / light: #ffe5ee ========================================================================== */ /* -------------------------------------------------------------------------- FASE 1: Tokens de color base (light mode) -------------------------------------------------------------------------- */ body[data-visual="nuzic"] { /* Palette nuzic — colors primaris i variants clares */ --nuzic-white: white; --nuzic-light: #eee8d8; --nuzic-grey: #AAA699; --nuzic-dark: #43433b; --nuzic-red: #e76f68; --nuzic-red-light: #f5c6c2; --nuzic-blue: #7bb4cd; --nuzic-blue-light: #bdd9e6; --nuzic-green: #7cd6b3; --nuzic-green-light: #cbefe1; --nuzic-yellow: #ffbb33; --nuzic-yellow-light: #ffeecc; --nuzic-pink: #f28aad; --nuzic-pink-light: #ffe5ee; /* Step colors per a les barres d'estructura escalar (eE): Compartits per App22, App23 i App24 perquè el mateix valor d'interval mantingui el mateix color a totes les apps d'escales. step-1 (semitò) → blau pàl·lid step-2 (to) → groc nuzic step-3 (to i mig) → vermell nuzic */ --scale-step-1: var(--nuzic-blue-light); --scale-step-2: var(--nuzic-yellow); --scale-step-3: var(--nuzic-red); /* Color base dels spinners (`.spin.up` / `.spin.down`) i el seu hover. Default: groc nuzic. Apps que vulguin spinners d'un altre color (App18/19/20 → rosa) sobreescriuen aquestes vars al seu `body`. */ --nuzic-spin-bg: var(--nuzic-yellow); --nuzic-spin-bg-hover: #e6a82e; /* Override dels tokens compartits del Lab */ --bg-light: white; --selection-color: var(--nuzic-blue-light); /* Flash color vermell nuzic */ --idle-flash-color: rgba(231, 111, 104, 0.7); /* --nuzic-red amb opacitat */ /* Offset del grup .controls (ajustable per app) */ --nuzic-controls-offset-x: 0px; --nuzic-controls-offset-y: 0px; /* Offsets individuals de botons dins .controls (ajustable per app) */ --nuzic-play-offset-x: 0px; --nuzic-play-offset-y: 0px; --nuzic-random-offset-x: 0px; --nuzic-random-offset-y: 0px; --nuzic-reset-offset-x: 0px; --nuzic-reset-offset-y: 0px; --nuzic-loop-offset-x: 0px; --nuzic-loop-offset-y: 0px; /* Offset del play-row (play + sound toggles) */ --nuzic-play-row-offset-x: 0px; --nuzic-play-row-offset-y: 0px; /* Offset del BPM inline */ --nuzic-bpm-offset-x: 0px; --nuzic-bpm-offset-y: 0px; } body[data-visual="nuzic"][data-theme="light"] { background: var(--nuzic-white); } /* -------------------------------------------------------------------------- FASE 1: Tokens de color base (dark mode) -------------------------------------------------------------------------- */ body[data-visual="nuzic"][data-theme="dark"] { /* Variants fosques que mantenen l'estructura visual nuzic */ --nuzic-white: #1e1e1e; --nuzic-light: #2a2a25; --nuzic-dark: #eee8d8; --nuzic-pink-light: #ffe5ee; --nuzic-yellow-light: #ffeecc; --nuzic-blue-light: #2a4a5a; --nuzic-green-light: #1e3d2e; --nuzic-red-light: #3d2525; --bg-light: #1e1e1e; --selection-color: var(--nuzic-blue-light); } /* -------------------------------------------------------------------------- FASE 4: Graella — dots negres visibles, rectangles blau sòlid -------------------------------------------------------------------------- */ /* Cel·les base: fons transparent, sense vora visible */ body[data-visual="nuzic"] .musical-cell { background: transparent; border-color: transparent; } /* Hover: rectangle blau clar sòlid (sense transparència) */ body[data-visual="nuzic"] .grid-container:not(.interval-mode) .musical-cell:hover::before { background: var(--nuzic-blue-light); opacity: 0.35; } /* Dots: petits, negres, ben visibles a cada intersecció */ body[data-visual="nuzic"] .np-dot::after { width: 4px; height: 4px; background: var(--nuzic-dark); border: none; opacity: 1; } /* Rectangles actius: blau cel sòlid, sense glow */ body[data-visual="nuzic"] .musical-cell.active::before { background: var(--nuzic-blue-light); border: 1px solid var(--nuzic-blue); opacity: 1; } /* Dot actiu: blau sòlid, sense glow ni scale exagerat */ body[data-visual="nuzic"] .musical-cell.active .np-dot::after { background: var(--nuzic-blue); border: 1px solid var(--nuzic-blue); box-shadow: none; width: 6px; height: 6px; } /* Pulse highlight: mantenir sòlid */ body[data-visual="nuzic"] .musical-cell.pulse-highlight::before { background: var(--nuzic-blue-light); opacity: 0.25; } body[data-visual="nuzic"] .musical-cell.active.pulse-highlight::before { background: var(--nuzic-blue-light); opacity: 1; } /* -------------------------------------------------------------------------- FASE 4: Dark mode — graella -------------------------------------------------------------------------- */ body[data-visual="nuzic"][data-theme="dark"] .musical-cell { background: transparent; border-color: transparent; } body[data-visual="nuzic"][data-theme="dark"] .np-dot::after { background: var(--nuzic-grey); border: none; } body[data-visual="nuzic"][data-theme="dark"] .musical-cell.active::before { background: var(--nuzic-blue-light); border-color: var(--nuzic-blue); opacity: 1; } body[data-visual="nuzic"][data-theme="dark"] .musical-cell.active .np-dot::after { background: var(--nuzic-blue); border-color: var(--nuzic-blue); box-shadow: none; } /* -------------------------------------------------------------------------- FASE 4 (plano-modular): Graella — cel·les netes, rectangles sòlids -------------------------------------------------------------------------- */ /* Cel·les base: fons transparent, sense vora visible */ body[data-visual="nuzic"] .plano-container { --plano-cell-bg: transparent; --plano-grid-line-color: transparent; --plano-bg-color: var(--nuzic-white); --plano-soundline-bg: var(--nuzic-pink-light); } /* Dots a les interseccions (cantonada inferior-esquerra). Plano-modular usa ::before per rectangles i ::after per hover. Solució: dot via radial-gradient al background-image, alliberant pseudo-elements. */ body[data-visual="nuzic"] .plano-cell { /* Original dot position — apps with np-dot elements override this */ background-image: radial-gradient(circle 4px at 0% 100%, var(--nuzic-dark) 45%, transparent 46%); background-repeat: no-repeat; } /* Hover: manté el ::after original posicionat a la divisòria */ body[data-visual="nuzic"] .plano-cell:hover::after { background: var(--nuzic-blue-light); opacity: 0.35; } /* Rectangles seleccionats: blau cel sòlid amb vora, sense glow. Inclou les cel·les de continuació iT (`.duration-highlight`) perquè tot el run es vegi com una sola barra del mateix to. */ body[data-visual="nuzic"] .plano-cell.plano-selected::before, body[data-visual="nuzic"] .plano-cell.duration-highlight::before { background: var(--nuzic-blue-light); border: 1px solid var(--nuzic-blue); } /* Highlight (playback): sòlid, sense glow ni scale */ body[data-visual="nuzic"] .plano-cell.plano-highlight::before { background: var(--nuzic-blue-light); border: 1px solid var(--nuzic-blue); box-shadow: none; transform: none; } /* -------------------------------------------------------------------------- FASE 4 (plano-modular): Dark mode -------------------------------------------------------------------------- */ body[data-visual="nuzic"][data-theme="dark"] .plano-container { --plano-cell-bg: transparent; --plano-grid-line-color: transparent; --plano-bg-color: var(--nuzic-white); } body[data-visual="nuzic"][data-theme="dark"] .plano-cell { background-image: radial-gradient(circle 4px at 0% 100%, var(--nuzic-grey) 45%, transparent 46%); } body[data-visual="nuzic"][data-theme="dark"] .plano-cell.plano-selected::before, body[data-visual="nuzic"][data-theme="dark"] .plano-cell.duration-highlight::before { background: var(--nuzic-blue-light); border-color: var(--nuzic-blue); } body[data-visual="nuzic"][data-theme="dark"] .plano-cell.plano-highlight::before { background: var(--nuzic-blue-light); border-color: var(--nuzic-blue); box-shadow: none; } /* -------------------------------------------------------------------------- FASE 2: Soundline — fons rosa, sense línia vertical, números centrats -------------------------------------------------------------------------- */ /* Musical-grid: reduir columna soundline i gap per encaixar millor */ body[data-visual="nuzic"] .grid-container { grid-template-columns: 60px 1fr; grid-template-rows: 1fr 50px; gap: 0; } /* Musical-grid soundline (dins .grid-container per evitar xocar amb App10). ⚠️ NO aplicar `container-type: inline-size` aquí: trenca el containing block dels `.soundline-number` (position: absolute) i fa col·lapsar la seva amplada. Per evitar desbordament del text, mantenir un clamp viewport amb sostre prudent al `.soundline-number`. */ body[data-visual="nuzic"] .grid-container .soundline-wrapper { background: var(--nuzic-pink-light); border-radius: 4px 0 0 4px; } body[data-visual="nuzic"] .grid-container .soundline::before { display: none; /* Amagar línia vertical gruixuda */ } body[data-visual="nuzic"] .grid-container .soundline-division { display: none; /* Amagar ticks horitzontals */ } body[data-visual="nuzic"] .grid-container .soundline-number { left: 0; width: 100%; text-align: center; font-weight: 700; /* Mida unificada per a totes les apps amb musical-grid (App11/11A/12/15/25/25B): mateix clamp també a pulse-marker. Factor vw alt (1.6vw) perquè dins els iframes del Sistema el `vw` mesura l'amplada (petita) de l'iframe; standalone segueix capat al sostre 1rem. */ font-size: clamp(0.6rem, 1.6vw, 1rem); opacity: 1; } body[data-visual="nuzic"] .grid-container .soundline-number::before { content: '\2013\2002'; /* en-dash + en-space */ } body[data-visual="nuzic"] .grid-container .soundline-number::after { content: '\2002\2013'; /* en-space + en-dash */ } /* Plano-modular soundline. ⚠️ NO aplicar `container-type: inline-size` aquí: trenca el grid-layout intern del plano-modular (App19/App20) i fa que la timeline groga es superposi a la soundline rosa. Si en algun moment cal fer els números responsius al marc, fer-ho a un descendent que no participi del grid. */ body[data-visual="nuzic"] .plano-soundline-container { background: var(--plano-soundline-bg); } body[data-visual="nuzic"] .plano-soundline-note { justify-content: center; padding-right: 0; font-weight: 700; /* Mateix clamp que `.soundline-number` (musical-grid) per coherència visual entre App11-25B i App32-35. */ font-size: clamp(0.6rem, 1.6vw, 1rem); } body[data-visual="nuzic"] .plano-soundline-note::before { content: '\2013\2002'; /* en-dash + en-space */ } body[data-visual="nuzic"] .plano-soundline-note::after { content: '\2002\2013'; /* en-space + en-dash */ } /* Soundline standalone (sense .grid-container ni .plano-container). ⚠️ NO aplicar `container-type` aquí: trenca el containing block dels `.soundline-number` (`position: absolute`) i els fa col·lapsar horitzontalment. Per evitar el desbordament dels números en marcs estrets, mantenim el sostre del clamp viewport conservador. */ body[data-visual="nuzic"] .soundline-container .soundline { margin: 0 auto; transform: none; } body[data-visual="nuzic"] .soundline-container .soundline::before { display: none; } body[data-visual="nuzic"] .soundline-container .soundline-division { display: none; } body[data-visual="nuzic"] .soundline-container .soundline-number { left: 0; width: 100%; font-weight: 700; /* Sostre conservador (1.15rem ≈ 18.4px) perquè el text + dashes laterals (::before/::after distribuïts via `space-between`) no sobresurti del marc rosa en finestres estretes. Apps amb soundline ample poden pujar el sostre via `--soundline-number-size`. */ font-size: var(--soundline-number-size, clamp(0.85rem, 1.4vw, 1.15rem)); opacity: 1; display: flex; justify-content: space-between; align-items: center; padding: 0 6px; box-sizing: border-box; } body[data-visual="nuzic"] .soundline-container .soundline-number::before { content: '\2013'; flex-shrink: 0; } body[data-visual="nuzic"] .soundline-container .soundline-number::after { content: '\2013'; flex-shrink: 0; } /* Note highlights: unificar a blau nuzic (substitueix verd/rosa) */ body[data-visual="nuzic"] .note-highlight { --note-highlight-color: var(--nuzic-blue-light); } body[data-visual="nuzic"] .note-highlight[data-note="1"], body[data-visual="nuzic"] .note-highlight[data-note="3"], body[data-visual="nuzic"] .note-highlight[data-note="5"], body[data-visual="nuzic"] .note-highlight[data-note="7"], body[data-visual="nuzic"] .note-highlight[data-note="9"], body[data-visual="nuzic"] .note-highlight[data-note="11"] { --note-highlight-color: var(--nuzic-blue-light); } /* -------------------------------------------------------------------------- FASE 2: Soundline — dark mode -------------------------------------------------------------------------- */ body[data-visual="nuzic"][data-theme="dark"] .grid-container .soundline-wrapper { background: var(--nuzic-pink-light); } body[data-visual="nuzic"][data-theme="dark"] .plano-soundline-container { background: var(--nuzic-pink-light); } body[data-visual="nuzic"][data-theme="dark"] .soundline-container .soundline { background: var(--nuzic-pink-light); } /* -------------------------------------------------------------------------- FASE 3: Timeline — fons crema, números centrats -------------------------------------------------------------------------- */ /* Musical-grid timeline: fons groc expandit visualment sense moure el grid */ body[data-visual="nuzic"] .grid-container .timeline-wrapper { background: transparent; overflow: visible; position: relative; } body[data-visual="nuzic"] .grid-container .timeline-wrapper::before { content: ''; position: absolute; top: 0; bottom: 0; left: -5px; /* Expandir cap a l'esquerra (cobrir zona soundline) */ right: -10px; /* Expandir una mica a la dreta */ background: var(--nuzic-yellow-light); border-radius: 4px 0 4px 4px; z-index: -1; pointer-events: none; } body[data-visual="nuzic"] .grid-container .timeline-line { display: none; /* Amagar línia horitzontal */ } body[data-visual="nuzic"] .grid-container .pulse-marker { background: none; /* Amagar línia vertical del marcador */ font-weight: 700; /* Mateix clamp que `.soundline-number` per coherència entre apps. */ font-size: clamp(0.6rem, 1.6vw, 1rem); opacity: 1; width: auto; height: auto; line-height: 1; padding-top: 0; top: 50%; transform: translate(-50%, -50%); } /* Amagar interval bars i interval numbers a la timeline del grid */ body[data-visual="nuzic"] .grid-container .timeline-wrapper .interval-bar, body[data-visual="nuzic"] .grid-container .timeline-inner .interval-bar { display: none; } body[data-visual="nuzic"] .grid-container .timeline-wrapper .interval-number, body[data-visual="nuzic"] .grid-container .timeline-inner .interval-number { display: none; } /* Ticks verticals a dalt i baix de cada pulse-marker */ body[data-visual="nuzic"] .grid-container .pulse-marker::before { content: ''; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); width: 2.5px; height: 10px; background: var(--nuzic-dark); opacity: 0.7; margin-bottom: 4px; } body[data-visual="nuzic"] .grid-container .pulse-marker::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: 2.5px; height: 10px; background: var(--nuzic-dark); opacity: 0.7; margin-top: 4px; } /* Highlight de playback: barra daurada sense desplaçament */ body[data-visual="nuzic"] .grid-container .pulse-marker.highlighted { background: var(--nuzic-yellow) !important; border-radius: 2px; color: var(--nuzic-dark); box-shadow: none; } body[data-visual="nuzic"] .grid-container .pulse-marker.highlighted::before, body[data-visual="nuzic"] .grid-container .pulse-marker.highlighted::after { background: var(--nuzic-yellow) !important; opacity: 1 !important; width: 4px; border-radius: 1px; } /* Cycle-end marker (`·` with double dashes `||` above and below) — the last pulse of the sequence acts as a visual closure and doesn't sound. The ticks project LEFT (box-shadow `-5px`) so they stay inside the container's `overflow: hidden`; the `||` midpoint lands at `-5px` from the marker centre. We shift the `·` text left by the same 5px using `padding-right` so it aligns on the same vertical axis as the `||`. The ticks keep their own offsets (unaffected by text padding). */ body[data-visual="nuzic"] .grid-container .pulse-marker.cycle-end { /* text-indent shifts the `·` text left WITHOUT resizing the bounding box, so ::before/::after anchors stay put while the glyph aligns with the midpoint of `||`. The extra 1.5px on top of the 5px tick-shadow compensates for the Ubuntu `·` glyph not being perfectly centred in its character cell. */ text-indent: -6.5px !important; } body[data-visual="nuzic"] .grid-container .pulse-marker.cycle-end::before, body[data-visual="nuzic"] .grid-container .pulse-marker.cycle-end::after { width: 2.5px !important; opacity: 1 !important; background: var(--nuzic-dark) !important; /* Duplicate tick projects LEFT so the `||` stays inside the container (parent has overflow:hidden and the marker sits at the right edge). */ box-shadow: -5px 0 0 0 var(--nuzic-dark) !important; transform: translateX(calc(-50% - 2.5px)) !important; } /* Upper tick: anchor to the top of the pulse-marker box with a fixed offset, not `bottom: 100%` (which depends on the small `·` bounding box and would float up). */ body[data-visual="nuzic"] .grid-container .pulse-marker.cycle-end::before { top: -14px !important; bottom: auto !important; margin-bottom: 0 !important; } /* Lower tick: same trick, anchored below the box with a fixed offset. */ body[data-visual="nuzic"] .grid-container .pulse-marker.cycle-end::after { top: auto !important; bottom: -14px !important; margin-top: 0 !important; } /* Dark mode: the grid bg is light in both themes; pin tick hex so `||` stays identical across themes. */ body[data-visual="nuzic"][data-theme="dark"] .grid-container .pulse-marker.cycle-end::before, body[data-visual="nuzic"][data-theme="dark"] .grid-container .pulse-marker.cycle-end::after { background: #43433b !important; box-shadow: -5px 0 0 0 #43433b !important; } /* Plano-modular timeline */ body[data-visual="nuzic"] .plano-timeline-container { background: var(--nuzic-yellow-light); overflow-y: clip; overflow-x: hidden; } body[data-visual="nuzic"] .plano-timeline-number { position: relative; font-weight: 700; font-size: clamp(0.85rem, 1.6vw, 1.2rem); color: var(--nuzic-dark); justify-content: flex-start; } /* Tick above each number — aligned with np-dot at left: 4px */ body[data-visual="nuzic"] .plano-timeline-number::before { content: ''; position: absolute; left: 7px; top: 0; width: 2.5px; height: 8px; background: var(--nuzic-dark); opacity: 0.7; } /* Tick below each number */ body[data-visual="nuzic"] .plano-timeline-number::after { content: ''; position: absolute; left: 7px; bottom: 0; width: 2.5px; height: 8px; background: var(--nuzic-dark); opacity: 0.7; } /* Downbeat (inici de compàs): tick superior més gruixut */ body[data-visual="nuzic"] .plano-timeline-number.plano-cycle-start::before { width: 5px; opacity: 1; } /* Playback highlight: golden bar around number + ticks only (not full cell) */ body[data-visual="nuzic"] .plano-timeline-number.plano-highlight { color: var(--nuzic-dark) !important; background: var(--nuzic-yellow); width: fit-content; padding: 0 0.25rem; border-radius: 2px; transform: none; text-shadow: none; box-shadow: none; } body[data-visual="nuzic"] .plano-timeline-number.plano-highlight::before, body[data-visual="nuzic"] .plano-timeline-number.plano-highlight::after { background: var(--nuzic-yellow); opacity: 1; width: 4px; border-radius: 1px; } body[data-visual="nuzic"] .plano-timeline-number.plano-cycle-start.plano-highlight { color: var(--nuzic-dark) !important; transform: none; text-shadow: none; } /* Cycle-end marker (`·` with double dashes `||` above and below) for plano-modular grids. Mirrors the .pulse-marker.cycle-end pattern. */ body[data-visual="nuzic"] .plano-timeline-number.plano-cycle-end { height: 1.2em; display: inline-flex; align-items: center; justify-content: center; } body[data-visual="nuzic"] .plano-timeline-number.plano-cycle-end::before, body[data-visual="nuzic"] .plano-timeline-number.plano-cycle-end::after { width: 2.5px !important; opacity: 1 !important; background: var(--nuzic-dark) !important; box-shadow: 5px 0 0 0 var(--nuzic-dark) !important; transform: translateX(calc(-50% - 2.5px)) !important; } body[data-visual="nuzic"][data-theme="dark"] .plano-timeline-number.plano-cycle-end::before, body[data-visual="nuzic"][data-theme="dark"] .plano-timeline-number.plano-cycle-end::after { background: #43433b !important; box-shadow: 5px 0 0 0 #43433b !important; } /* Timeline standalone (apps sense .grid-container: app9, app13, App16, App26-31) Redisseny complet: fons crema, números centrats, ticks verticals, sense dots ni línia */ /* Fons crema a la timeline — box-shadow estén el fons als polsos 0 i 8 sense canviar layout */ body[data-visual="nuzic"] .timeline-wrapper:has(.timeline):not(:has(.soundline-container)) .timeline { background: var(--nuzic-yellow-light); border-radius: 4px; height: 60px; box-shadow: -1.25rem 0 0 var(--nuzic-yellow-light), 1.25rem 0 0 var(--nuzic-yellow-light); } /* Amagar línia horitzontal */ body[data-visual="nuzic"] .timeline-wrapper:has(.timeline):not(:has(.soundline-container)) .timeline::before { display: none; } /* Amagar dots de pulsos (substituïts pels números) */ body[data-visual="nuzic"] .timeline .pulse { display: none !important; } /* Números de pulsos: centrats amb les barres i endpoints */ body[data-visual="nuzic"] .timeline .pulse-number { color: var(--nuzic-dark); font-weight: 700; font-size: clamp(0.85rem, 1.6vw, 1.2rem); top: 50% !important; transform: translate(-50%, -50%) !important; opacity: 1; z-index: 10; } /* Tick a dalt de cada número */ body[data-visual="nuzic"] .timeline .pulse-number::before { content: ''; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); width: 2.5px; height: 10px; background: var(--nuzic-dark); opacity: 0.7; margin-bottom: 4px; } /* Tick a baix de cada número */ body[data-visual="nuzic"] .timeline .pulse-number::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: 2.5px; height: 10px; background: var(--nuzic-dark); opacity: 0.7; margin-top: 4px; } /* Downbeat (inici de compàs): tick superior més gruixut */ body[data-visual="nuzic"] .timeline .pulse-number.cycle-start::before { width: 5px; opacity: 1; } /* End-cap de la timeline (`cycle-end`): el darrer pols es dibuixa com un `·` amb dobles guions `||` a dalt i a baix — lectura com a "tancament" de la seqüència. L'últim pols ja no sona. El `·` és més petit que un dígit (només baseline) així que pin-em height:1.2em + flex-center per mantenir el bounding box idèntic al d'un pulse-number normal i que els ticks s'alineïn amb la resta de la fila. El tick es duplica amb un `box-shadow` horitzontal per fer `||` sense elements extra. */ body[data-visual="nuzic"] .timeline .pulse-number.cycle-end { height: 1.2em; display: inline-flex; align-items: center; justify-content: center; } body[data-visual="nuzic"] .timeline .pulse-number.cycle-end::before, body[data-visual="nuzic"] .timeline .pulse-number.cycle-end::after { width: 2.5px !important; opacity: 1 !important; background: var(--nuzic-dark) !important; box-shadow: 5px 0 0 0 var(--nuzic-dark) !important; transform: translateX(calc(-50% - 2.5px)) !important; } /* Dark mode: mateix dark hex als dos elements (el bg de la timeline és crema en ambdós modes, per tant el trazo s'ha de mantenir fosc). Hardcode el hex per defugir flips de tokens. */ body[data-visual="nuzic"][data-theme="dark"] .timeline .pulse-number.cycle-end::before, body[data-visual="nuzic"][data-theme="dark"] .timeline .pulse-number.cycle-end::after { background: #43433b !important; box-shadow: 5px 0 0 0 #43433b !important; } /* Highlight de playback: barra daurada que cobreix número + ticks */ body[data-visual="nuzic"] .timeline .pulse-number.active { color: var(--nuzic-dark); background: var(--nuzic-yellow); border-radius: 2px; padding: 2px 5px; z-index: 15; } body[data-visual="nuzic"] .timeline .pulse-number.active::before, body[data-visual="nuzic"] .timeline .pulse-number.active::after { background: var(--nuzic-yellow); opacity: 1; width: 4px; border-radius: 1px; } /* Números d'intervals: blau nuzic, enganxats a les barres */ body[data-visual="nuzic"] .timeline .interval-number { color: var(--nuzic-blue); font-weight: 700; font-size: clamp(0.85rem, 1.6vw, 1.2rem); top: 20% !important; opacity: 1; } /* -------------------------------------------------------------------------- FASE 3: Timeline — dark mode -------------------------------------------------------------------------- */ body[data-visual="nuzic"][data-theme="dark"] .timeline-wrapper:has(.timeline):not(:has(.soundline-container)) .timeline { background: var(--nuzic-yellow-light); box-shadow: -1.25rem 0 0 var(--nuzic-yellow-light), 1.25rem 0 0 var(--nuzic-yellow-light); } body[data-visual="nuzic"][data-theme="dark"] .timeline .pulse-number { color: #43433b; } body[data-visual="nuzic"][data-theme="dark"] .timeline .pulse-number::before, body[data-visual="nuzic"][data-theme="dark"] .timeline .pulse-number::after { background: #43433b; } body[data-visual="nuzic"][data-theme="dark"] .timeline .pulse-number.active { color: #43433b; } body[data-visual="nuzic"][data-theme="dark"] .timeline .cycle-marker { background: #43433b; } body[data-visual="nuzic"][data-theme="dark"] .timeline .cycle-marker.active { background: var(--nuzic-yellow, #FFBB33); } body[data-visual="nuzic"][data-theme="dark"] .timeline .cycle-label { color: #43433b; } body[data-visual="nuzic"][data-theme="dark"] .grid-container .timeline-wrapper::before { background: var(--nuzic-yellow-light); } body[data-visual="nuzic"][data-theme="dark"] .plano-timeline-container { background: var(--nuzic-yellow-light); } /* -------------------------------------------------------------------------- FASE 5: Controls — layout compacte horitzontal nuzic -------------------------------------------------------------------------- */ /* Layout per defecte: fila horitzontal Play-BPM-Random-Reset. `flex-wrap: wrap` permet que els controls saltin a una segona fila quan l'iframe (o la finestra) és massa estret per encabir-los tots en una sola línia — pre-condició per a l'embed responsive del Sistema Interactivo. */ body[data-visual="nuzic"] .controls:not([data-layout]) { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; row-gap: 0.4rem !important; width: auto !important; height: auto !important; position: relative !important; margin: 0.625rem auto !important; transform: none !important; left: var(--nuzic-controls-offset-x, 0px); top: var(--nuzic-controls-offset-y, 0px); } body[data-visual="nuzic"] .controls:not([data-layout]) .play, body[data-visual="nuzic"] .controls:not([data-layout]) .random, body[data-visual="nuzic"] .controls:not([data-layout]) .reset { position: static !important; transform: none !important; margin: 0 !important; } /* Ordre dins del grup .controls: volum · play · bpm · random · reset. El `.sound-wrapper` viu al DOM després de `.reset` (append per header.js); l'usem a l'esquerra de tot via `order`. */ body[data-visual="nuzic"] .controls:not([data-layout]) .sound-wrapper.nuzic-inline { order: 1; } body[data-visual="nuzic"] .controls:not([data-layout]) .play { order: 2; } body[data-visual="nuzic"] .controls:not([data-layout]) .bpm-inline { order: 3; } body[data-visual="nuzic"] .controls:not([data-layout]) .random { order: 4; } body[data-visual="nuzic"] .controls:not([data-layout]) .reset { order: 5; } body[data-visual="nuzic"] .controls:not([data-layout]) .loop, body[data-visual="nuzic"] .controls:not([data-layout]) .tap { display: none !important; } body[data-visual="nuzic"] .controls:not([data-layout]) .play, body[data-visual="nuzic"] .controls:not([data-layout]) .random { width: clamp(2rem, 5vw, 3rem) !important; height: clamp(2rem, 5vw, 3rem) !important; } body[data-visual="nuzic"] .controls:not([data-layout]) .reset { width: clamp(1.5rem, 3.5vw, 2.25rem) !important; height: clamp(1.5rem, 3.5vw, 2.25rem) !important; } /* BPM: amagar .inputs quan NOMÉS conté BPM (ja mogut dins .controls via JS) */ /* NO amagar si conté altres params (.param) que l'app necessita */ body[data-visual="nuzic"] .inputs:has(.bpm-inline):not(:has(.param)) { display: none; } /* Centrat horitzontal del grup .inputs (.param pills) — coherent amb .controls. El base té `left: -20px` heretat d'un disseny antic; el neutralitzem aquí. `flex-wrap: wrap` permet que els pills (Lg, V, T, Pfr, …) saltin a una segona fila quan no caben en l'amplada disponible — sense aquesta regla, el `gap` fix combinat amb pills `clamp()` deixa el row sense via de compressió més enllà del mínim de cada pill. Només sobreescric `row-gap` perquè la separació vertical entre files quan es dispara el wrap sigui curta; el `column-gap` el deixo intacte perquè App19/App20 tenen `gap: clamp(3rem, 8vw, 7rem)` per evitar col·lisió entre el disc Compás i els pills laterals. */ body[data-visual="nuzic"] .inputs { left: 0 !important; margin-left: auto !important; margin-right: auto !important; justify-content: center !important; flex-wrap: wrap !important; row-gap: clamp(6px, 1vw, 12px) !important; } /* Controls amb data-layout (vertical/horizontal): offset posicional */ body[data-visual="nuzic"] .controls[data-layout] { position: relative !important; left: var(--nuzic-controls-offset-x, 0px) !important; top: var(--nuzic-controls-offset-y, 0px) !important; } /* Layout vertical: play centrat, botons secundaris en fila a sota, gap reduït */ body[data-visual="nuzic"] .controls[data-layout="vertical"] .control-buttons-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.25rem; } /* Play-row ocupa tota l'amplada per forçar els botons a la fila següent */ body[data-visual="nuzic"] .controls[data-layout="vertical"] .control-buttons-row .play-row { flex-basis: 100%; display: flex; justify-content: center; margin-bottom: 0.25rem; } /* Reduir gaps dels controls verticals */ body[data-visual="nuzic"] .controls[data-layout="vertical"] { gap: 0.5rem !important; } body[data-visual="nuzic"] .control-buttons-row { gap: 0.5rem !important; } /* Play-row ajustable */ body[data-visual="nuzic"] .play-row { position: relative; left: var(--nuzic-play-row-offset-x, 0px); top: var(--nuzic-play-row-offset-y, 0px); } /* Offsets individuals de botons */ body[data-visual="nuzic"] .play { transform: translate(var(--nuzic-play-offset-x, 0px), var(--nuzic-play-offset-y, 0px)); } body[data-visual="nuzic"] .controls:not([data-layout]) .play { /* Quan el play té position:absolute (layout circular), combinar amb el translate original */ transform: translate(calc(-50% + var(--nuzic-play-offset-x, 0px)), calc(-50% + var(--nuzic-play-offset-y, 0px))); } body[data-visual="nuzic"] .random { transform: translate(calc(-50% + var(--nuzic-random-offset-x, 0px)), calc(-50% + var(--nuzic-random-offset-y, 0px))); } body[data-visual="nuzic"] .reset { transform: translate(calc(-50% + var(--nuzic-reset-offset-x, 0px)), calc(-50% + var(--nuzic-reset-offset-y, 0px))); } body[data-visual="nuzic"] .loop { transform: translate(calc(-50% + var(--nuzic-loop-offset-x, 0px)), calc(-50% + var(--nuzic-loop-offset-y, 0px))); } /* -------------------------------------------------------------------------- FASE 5: Botons — play verd, +/- pastilla daurada, reset/random quadrat -------------------------------------------------------------------------- */ /* Play: cercle verd amb fons sòlid */ body[data-visual="nuzic"] .play { background: var(--nuzic-green); border-color: var(--nuzic-green); color: white; } body[data-visual="nuzic"] .play svg { fill: white; } body[data-visual="nuzic"] .play.active { background: var(--nuzic-green); border-color: var(--nuzic-green); color: white; box-shadow: 0 0 10px var(--nuzic-green); } /* Loop: mantenir coherència amb play */ body[data-visual="nuzic"] .loop { border-color: var(--nuzic-grey); color: var(--nuzic-grey); } body[data-visual="nuzic"] .loop.active { background: var(--nuzic-green-light); border-color: var(--nuzic-green); color: var(--nuzic-green); } /* Random: cercle verd saturat (mateixa identitat que play). Reset: cercle fosc amb icona clara. Hex hardcoded per no flipar en dark mode; el dark override només intercanvia reset (clar/fosc). */ body[data-visual="nuzic"] .random { border-radius: 50%; background: #7cd6b3; border-color: #7cd6b3; color: #ffffff; opacity: 1; } body[data-visual="nuzic"] .reset { border-radius: 50%; background: #43433b; border-color: #43433b; color: #eee8d8; opacity: 1; } body[data-visual="nuzic"] .random svg { fill: #ffffff; } body[data-visual="nuzic"] .reset svg { fill: #eee8d8; } /* Tap: quadrat arrodonit coherent */ body[data-visual="nuzic"] .tap { border-radius: 6px; background: var(--nuzic-light); border-color: var(--nuzic-light); color: var(--nuzic-dark); } /* BPM spinner: pastilla daurada — INVARIANT, sempre groc. El BPM és la mateixa pastilla a totes les apps i no ha d'heretar el color de la var `--nuzic-spin-bg` (que les apps poden override per altres pills com Registro/Longitud). Per això usem `.bpm-inline:not(.param)` (BPM pur) amb groc fix, i la versió genèrica `.bpm-inline.param` (les altres pills) llegeix la var. */ body[data-visual="nuzic"] .bpm-inline:not(.param) .spin { background: var(--nuzic-yellow); border-radius: 6px; } body[data-visual="nuzic"] .bpm-inline:not(.param) .spin:hover { background: #e6a82e; } /* Pastilles `.bpm-inline.param.*` (Registro/Longitud/etc): color via var, el default segueix sent el groc del BPM. */ body[data-visual="nuzic"] .bpm-inline.param .spin { background: var(--nuzic-spin-bg, var(--nuzic-yellow)); border-radius: 6px; } body[data-visual="nuzic"] .bpm-inline.param .spin:hover { background: var(--nuzic-spin-bg-hover, #e6a82e); } body[data-visual="nuzic"] .bpm-inline .spin.up::before { border-bottom-color: white; } body[data-visual="nuzic"] .bpm-inline .spin.down::before { border-top-color: white; } /* -------------------------------------------------------------------------- FASE 5: Botons — dark mode -------------------------------------------------------------------------- */ body[data-visual="nuzic"][data-theme="dark"] .play { background: var(--nuzic-green); border-color: var(--nuzic-green); color: white; } /* Random: invariant entre temes (verd saturat, icona blanca). Reset: intercanvia colors en dark mode — fons clar, icona fosca. */ body[data-visual="nuzic"][data-theme="dark"] .random { background: #7cd6b3; border-color: #7cd6b3; color: #ffffff; } body[data-visual="nuzic"][data-theme="dark"] .reset { background: #eee8d8; border-color: #eee8d8; color: #43433b; } body[data-visual="nuzic"][data-theme="dark"] .random svg { fill: #ffffff; } body[data-visual="nuzic"][data-theme="dark"] .reset svg { fill: #43433b; } /* -------------------------------------------------------------------------- Volume button (.sound-wrapper) relocated by header.js in nuzic mode. Two placements coexist: • `.nuzic-inline` — inside `.controls`, after random/reset (App34, etc.) • `.nuzic-floating` — absolutely positioned between play buttons, used by scale apps (App21-24) that have no `.controls` and render two (or one) `.soundline-play` buttons. The shared button + fader popup styles target `.nuzic-inline`, which both modes carry. `.nuzic-floating` adds the `position: fixed` placement on top. -------------------------------------------------------------------------- */ body[data-visual="nuzic"] .sound-wrapper.nuzic-inline { position: relative; padding: 0; display: flex; align-items: center; justify-content: center; z-index: 100; } /* Floating mode: JS sets `left`/`top` inline from the play-button rects. `translate(-50%, -50%)` centers the wrapper on that coordinate. `position: fixed` ancora el botó al viewport en embed (no necessita scrollejar amb el contingut perquè l'iframe no fa scroll); en standalone el contingut pot sobreïxer del viewport, així que usem `position: absolute` perquè el botó scrolli amb la pàgina. */ body[data-visual="nuzic"] .sound-wrapper.nuzic-floating { position: absolute; transform: translate(-50%, -50%); } html[data-embed="true"] body[data-visual="nuzic"] .sound-wrapper.nuzic-floating { position: fixed; } /* En embed vertical (App23/App24 al pas 24/25 del sistema) el `main` passa a `overflow-y: auto`. Si el botó volum està `position: fixed` queda ancorat al viewport mentre el contingut scrolleja → el botó acaba flotant per sobre del pentagrama. Tornem a `absolute` perquè scrolli amb la pàgina, que és el que cal en aquest mode. Mateix breakpoint que el del sistema i el de les apps. */ @media (max-width: 900px) { html[data-embed="true"] body[data-visual="nuzic"].app23 .sound-wrapper.nuzic-floating, html[data-embed="true"] body[data-visual="nuzic"].app24 .sound-wrapper.nuzic-floating { position: absolute; } } /* Round speaker button — same shape/size as .reset (small). Dark circle with light icon, hex hardcoded so it doesn't flip in dark mode. */ body[data-visual="nuzic"] .sound-wrapper.nuzic-inline .sound { width: clamp(1.5rem, 3.5vw, 2.25rem); height: clamp(1.5rem, 3.5vw, 2.25rem); padding: 0; border-radius: 50%; background: #43433b; border: 2px solid #43433b; color: #eee8d8; display: flex; align-items: center; justify-content: center; cursor: pointer; } body[data-visual="nuzic"] .sound-wrapper.nuzic-inline .sound svg { width: 60%; height: 60%; fill: #eee8d8; color: #eee8d8; } /* Volume fader: floating popup above the button. `transform-origin: bottom center` means the scaleY(0→1) animation grows upward into view. The `show`/`hide` classes come from `wireControls()` in header.js. */ body[data-visual="nuzic"] .sound-wrapper.nuzic-inline #volumeSlider { /* Slider horizontal, situat a l'ESQUERRA del botó (no a sobre). Així no s'amaga sota la timeline ni el title quan el botó viu a `.controls`. La hitbox de pas (entre botó i slider) és el gap de 0.5rem, que el `scheduleHide` 500ms cobreix. */ position: absolute; right: calc(100% + 0.5rem); top: 50%; width: 5rem; height: 1.5rem; -webkit-appearance: none; appearance: none; background: transparent; display: none; transform: translateY(-50%) scaleX(0); transform-origin: right center; transition: transform 0.3s ease-out; margin: 0; } body[data-visual="nuzic"] .sound-wrapper.nuzic-inline #volumeSlider.show { transform: translateY(-50%) scaleX(1); } body[data-visual="nuzic"] .sound-wrapper.nuzic-inline #volumeSlider.hide { transform: translateY(-50%) scaleX(0); } body[data-visual="nuzic"] .sound-wrapper.nuzic-inline #volumeSlider::-webkit-slider-runnable-track { width: 100%; height: 0.25rem; background: var(--nuzic-dark, #43433b); border-radius: 0.125rem; } body[data-visual="nuzic"] .sound-wrapper.nuzic-inline #volumeSlider::-moz-range-track { width: 100%; height: 0.25rem; background: var(--nuzic-dark, #43433b); border-radius: 0.125rem; } /* Thumb colors reflect the speaker button's circle color: dark in light mode (fosc com el botó), light in dark mode (clar com el botó invertit). Hex hardcoded to avoid CSS-var flipping. `margin-top` (negative half of thumb-track height delta) centers the thumb on the horizontal track. */ body[data-visual="nuzic"] .sound-wrapper.nuzic-inline #volumeSlider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.125rem; height: 1.125rem; background: #43433b; border-radius: 50%; cursor: grab; border: 2px solid #43433b; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); margin-top: -0.4375rem; } body[data-visual="nuzic"] .sound-wrapper.nuzic-inline #volumeSlider::-moz-range-thumb { width: 1.125rem; height: 1.125rem; background: #43433b; border-radius: 50%; cursor: grab; border: 2px solid #43433b; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } body[data-visual="nuzic"][data-theme="dark"] .sound-wrapper.nuzic-inline #volumeSlider::-webkit-slider-thumb { background: #eee8d8; border-color: #eee8d8; } body[data-visual="nuzic"][data-theme="dark"] .sound-wrapper.nuzic-inline #volumeSlider::-moz-range-thumb { background: #eee8d8; border-color: #eee8d8; } body[data-visual="nuzic"] .sound-wrapper.nuzic-inline #volumeSlider::-webkit-slider-thumb:active, body[data-visual="nuzic"] .sound-wrapper.nuzic-inline #volumeSlider::-moz-range-thumb:active { cursor: grabbing; } /* Dark mode: intercanvia colors (fons clar, icona fosca), com el reset. */ body[data-visual="nuzic"][data-theme="dark"] .sound-wrapper.nuzic-inline .sound { background: #eee8d8; border-color: #eee8d8; color: #43433b; } /* Icon color: the path uses `fill="currentColor"`. In dark mode the circle is light, so the icon becomes dark (intercanvi vs light mode). */ body[data-visual="nuzic"][data-theme="dark"] .sound-wrapper.nuzic-inline .sound svg { color: #43433b; fill: #43433b; } body[data-visual="nuzic"][data-theme="dark"] .bpm-inline:not(.param) .spin { background: var(--nuzic-yellow); } body[data-visual="nuzic"][data-theme="dark"] .bpm-inline.param .spin { background: var(--nuzic-spin-bg, var(--nuzic-yellow)); } body[data-visual="nuzic"][data-theme="dark"] .bpm-inline .spin.up::before { border-bottom-color: var(--nuzic-dark); } body[data-visual="nuzic"][data-theme="dark"] .bpm-inline .spin.down::before { border-top-color: var(--nuzic-dark); } /* -------------------------------------------------------------------------- FASE 6: BPM inline horitzontal — BPM [–] 120 [+] en pastilla -------------------------------------------------------------------------- */ /* Contenidor principal: fila horitzontal + posició ajustable */ body[data-visual="nuzic"] .bpm-inline { flex-direction: row; align-items: center; gap: 0.35rem; position: relative; left: var(--nuzic-bpm-offset-x, 0px); top: var(--nuzic-bpm-offset-y, 0px); } /* Circle → pastilla única que conté [–] 120 [+] com a tres segments enganxats. Mateixa alçada que play/random per coherència visual. */ body[data-visual="nuzic"] .bpm-inline .circle { width: auto; height: clamp(2rem, 5vw, 3rem); border-radius: 999px; border: 1px solid var(--nuzic-grey); background: var(--nuzic-white); display: flex; align-items: stretch; padding: 0; gap: 0; overflow: hidden; } body[data-visual="nuzic"] .bpm-inline input { font-size: clamp(1rem, 1.8vw, 1.35rem); width: clamp(3rem, 6vw, 4.5rem); height: 100%; font-family: 'Ubuntu', sans-serif; font-weight: 700; text-align: center; background: transparent; border: 0; order: 2; /* Número al mig */ } /* Spinner: horitzontal dins la pastilla */ body[data-visual="nuzic"] .bpm-inline .spinner { position: static; display: contents; /* Fills participen al flex de .circle */ transform: none; } /* Botó down (–) ocupa la mitja pastilla esquerra */ body[data-visual="nuzic"] .bpm-inline .spin.down { order: 1; width: clamp(2rem, 4vw, 2.75rem); height: 100%; border-radius: 999px 0 0 999px; border: 0; display: flex; align-items: center; justify-content: center; } /* Botó up (+) ocupa la mitja pastilla dreta */ body[data-visual="nuzic"] .bpm-inline .spin.up { order: 3; width: clamp(2rem, 4vw, 2.75rem); height: 100%; border-radius: 0 999px 999px 0; border: 0; display: flex; align-items: center; justify-content: center; } /* Fletxes proporcionades a la nova mida */ body[data-visual="nuzic"] .bpm-inline .spin.up::before { border-left-width: 5px; border-right-width: 5px; border-bottom-width: 7px; } body[data-visual="nuzic"] .bpm-inline .spin.down::before { border-left-width: 5px; border-right-width: 5px; border-top-width: 7px; } /* Label BPM: queda fora de la pastilla, a l'esquerra */ body[data-visual="nuzic"] .bpm-inline .abbr { font-size: clamp(0.65rem, 1.2vw, 0.8rem); } /* -------------------------------------------------------------------------- FASE 6: BPM inline — dark mode -------------------------------------------------------------------------- */ body[data-visual="nuzic"][data-theme="dark"] .bpm-inline .circle { background: var(--nuzic-white); border-color: rgba(255, 255, 255, 0.2); } /* -------------------------------------------------------------------------- FASE 10: Dark mode — overrides addicionals de contrast -------------------------------------------------------------------------- */ /* Soundline numbers: text fosc sobre fons rosa (identitari, no canvia amb tema) */ body[data-visual="nuzic"][data-theme="dark"] .grid-container .soundline-number { color: #43433b; } body[data-visual="nuzic"][data-theme="dark"] .plano-soundline-note { color: #43433b; } body[data-visual="nuzic"][data-theme="dark"] .soundline-container .soundline-number { color: #43433b; } /* Timeline numbers: text fosc sobre fons crema (identitari, no canvia amb tema) */ body[data-visual="nuzic"][data-theme="dark"] .grid-container .pulse-marker { color: #43433b; } body[data-visual="nuzic"][data-theme="dark"] .grid-container .pulse-marker::before, body[data-visual="nuzic"][data-theme="dark"] .grid-container .pulse-marker::after { background: #43433b; } body[data-visual="nuzic"][data-theme="dark"] .plano-timeline-number { color: #43433b; } body[data-visual="nuzic"][data-theme="dark"] .plano-timeline-number::before, body[data-visual="nuzic"][data-theme="dark"] .plano-timeline-number::after { background: #43433b; } body[data-visual="nuzic"][data-theme="dark"] .plano-timeline-number.plano-highlight { color: #43433b !important; } /* BPM input text: clar sobre fons fosc */ body[data-visual="nuzic"][data-theme="dark"] .bpm-inline input { color: var(--nuzic-dark); } body[data-visual="nuzic"][data-theme="dark"] .bpm-inline .abbr { color: var(--nuzic-dark); } /* Cell labels: clar sobre fons fosc */ body[data-visual="nuzic"][data-theme="dark"] .cell-label, body[data-visual="nuzic"][data-theme="dark"] .plano-cell-label, body[data-visual="nuzic"][data-theme="dark"] .plano-highlight-label { color: var(--nuzic-dark); } /* Matrix container: fons coherent */ body[data-visual="nuzic"] .matrix-container { overflow: visible; } body[data-visual="nuzic"][data-theme="dark"] .matrix-container { background: transparent; } /* Hover en plano-modular dark */ body[data-visual="nuzic"][data-theme="dark"] .plano-cell:hover::after { background: var(--nuzic-blue-light); } /* Loop button dark */ body[data-visual="nuzic"][data-theme="dark"] .loop { border-color: var(--nuzic-grey); color: var(--nuzic-grey); } body[data-visual="nuzic"][data-theme="dark"] .loop.active { background: var(--nuzic-green-light); border-color: var(--nuzic-green); color: var(--nuzic-green); } /* Tap button dark */ body[data-visual="nuzic"][data-theme="dark"] .tap { background: var(--nuzic-light); border-color: var(--nuzic-light); color: var(--nuzic-dark); } /* -------------------------------------------------------------------------- FASE 11: Pastilles d'input genèriques (.param .circle) Unifiquen el patró de la BPM pill a qualsevol `.param` que tingui input: cercle fos en pastilla horitzontal de la mateixa alçada que play/random, amb fletxes `[−]/[+]` grogues als laterals i l'etiqueta `.abbr` a sobre. Pastilles info pura (amb ``) conserven el seu tractament — les excloem via `:has(.circle > input)`. `!important` a algunes regles perquè les regles base de `index.css` tenen la mateixa especificitat i precedeixen al load (i `.unit` té `!important` al base). -------------------------------------------------------------------------- */ /* Contenidor: etiqueta `.abbr` a sobre, pastilla a sota */ body[data-visual="nuzic"] .param:not(.param--large):has(.circle > input) { flex-direction: column !important; align-items: center !important; gap: 0.25rem !important; font-size: inherit !important; } body[data-visual="nuzic"] .param:not(.param--large):has(.circle > input) .abbr { font-size: clamp(0.75rem, 1.1vw, 0.95rem) !important; font-weight: 600; order: 0; position: static !important; transform: none !important; text-align: center; } /* Pastilla: alçada fixa tipus BPM, 3 segments enganxats, sense overflow */ body[data-visual="nuzic"] .param:not(.param--large):has(.circle > input) .circle { width: auto !important; height: clamp(2rem, 5vw, 3rem) !important; border-radius: 999px !important; border: 1px solid var(--nuzic-grey) !important; background: var(--nuzic-white) !important; display: flex !important; align-items: stretch !important; justify-content: flex-start !important; padding: 0 !important; gap: 0 !important; overflow: hidden !important; order: 1; position: relative; } /* Input central */ body[data-visual="nuzic"] .param:not(.param--large):has(.circle > input) .circle input { font-size: clamp(1rem, 1.8vw, 1.35rem) !important; font-family: 'Ubuntu', sans-serif !important; font-weight: 700 !important; width: clamp(3rem, 6vw, 4.5rem) !important; height: 100% !important; background: transparent !important; border: 0 !important; text-align: center !important; color: var(--nuzic-dark) !important; padding: 0 !important; order: 2; outline: none; } /* Amagar `.unit` i `.led` interiors — l'info la porta `.abbr` a sobre. El base té `display: block !important`, per això cal força. */ body[data-visual="nuzic"] .param:not(.param--large):has(.circle > input) .circle .unit, body[data-visual="nuzic"] .param:not(.param--large):has(.circle > input) .circle .led { display: none !important; } /* Spinner: els botons `+/−` participen al flex de `.circle` */ body[data-visual="nuzic"] .param:not(.param--large):has(.circle > input) .circle .spinner { position: static !important; display: contents !important; transform: none !important; width: auto !important; height: auto !important; top: auto !important; right: auto !important; flex-direction: row !important; gap: 0 !important; } /* `−` meitat esquerra. Els selectors encadenats `.param.param` pugen l'especificitat per batre regles per-app com ara App19 que força `.inputs .param .spin { border-radius: 50% !important }`. */ body[data-visual="nuzic"] .param.param:not(.param--large):has(.circle > input) .circle .spin.down { order: 1 !important; flex: 0 0 clamp(2rem, 4vw, 2.75rem) !important; width: clamp(2rem, 4vw, 2.75rem) !important; height: 100% !important; border-radius: 999px 0 0 999px !important; border: 0 !important; background: var(--nuzic-spin-bg, var(--nuzic-yellow)) !important; aspect-ratio: auto !important; cursor: pointer; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } /* `+` meitat dreta */ body[data-visual="nuzic"] .param.param:not(.param--large):has(.circle > input) .circle .spin.up { order: 3 !important; flex: 0 0 clamp(2rem, 4vw, 2.75rem) !important; width: clamp(2rem, 4vw, 2.75rem) !important; height: 100% !important; border-radius: 0 999px 999px 0 !important; border: 0 !important; background: var(--nuzic-spin-bg, var(--nuzic-yellow)) !important; aspect-ratio: auto !important; cursor: pointer; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } body[data-visual="nuzic"] .param:not(.param--large):has(.circle > input) .circle .spin:hover { background: var(--nuzic-spin-bg-hover, #e6a82e) !important; } /* Fletxes blanques */ body[data-visual="nuzic"] .param:not(.param--large):has(.circle > input) .circle .spin::before { content: ''; border-left: 5px solid transparent; border-right: 5px solid transparent; } body[data-visual="nuzic"] .param:not(.param--large):has(.circle > input) .circle .spin.up::before { border-bottom: 7px solid #ffffff !important; border-top: 0 !important; } body[data-visual="nuzic"] .param:not(.param--large):has(.circle > input) .circle .spin.down::before { border-top: 7px solid #ffffff !important; border-bottom: 0 !important; } /* Variant sense spinner (input sol dins el circle): pill buida */ body[data-visual="nuzic"] .param:not(.param--large):has(.circle > input):not(:has(.spinner)) .circle { padding: 0 clamp(0.5rem, 1.5vw, 1rem) !important; } /* -------------------------------------------------------------------------- Info pure (ex: "Longitud" d'App19): `.circle > span` sense ``. Mateixa pill horitzontal, contingut centrat, `.abbr` a sobre. -------------------------------------------------------------------------- */ /* Info-pure: abbr a l'esquerra, pill a la dreta (horitzontal, igual que l'adjunt "LONGITUD 12"). El `.abbr` segueix el seu estil ja existent. */ body[data-visual="nuzic"] .param:has(.circle > span):not(:has(.circle > input)) { flex-direction: row !important; align-items: center !important; gap: clamp(0.5rem, 1.2vw, 0.875rem) !important; font-size: inherit !important; } body[data-visual="nuzic"] .param:has(.circle > span):not(:has(.circle > input)) .abbr { font-size: clamp(0.75rem, 1.1vw, 0.95rem) !important; font-weight: 600; position: static !important; transform: none !important; } body[data-visual="nuzic"] .param:has(.circle > span):not(:has(.circle > input)) .circle { width: auto !important; min-width: clamp(3rem, 6vw, 4.5rem); height: clamp(2rem, 5vw, 3rem) !important; border-radius: 999px !important; border: 1px solid var(--nuzic-yellow) !important; background: var(--nuzic-white) !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 clamp(0.75rem, 2vw, 1.5rem) !important; order: 1; } body[data-visual="nuzic"] .param:has(.circle > span):not(:has(.circle > input)) .circle > span { font-family: 'Ubuntu', sans-serif !important; font-size: clamp(1rem, 1.8vw, 1.35rem) !important; font-weight: 700 !important; color: var(--nuzic-dark) !important; text-align: center; line-height: 1; position: static !important; transform: none !important; } body[data-visual="nuzic"][data-theme="dark"] .param:has(.circle > span):not(:has(.circle > input)) .circle { background: var(--nuzic-white) !important; border-color: rgba(255, 255, 255, 0.2) !important; } body[data-visual="nuzic"][data-theme="dark"] .param:has(.circle > span):not(:has(.circle > input)) .circle > span { color: var(--nuzic-dark) !important; } /* Dark mode: colors idèntics als de light (pastilla invariant entre temes) */ body[data-visual="nuzic"][data-theme="dark"] .param:not(.param--large):has(.circle > input) .circle { background: var(--nuzic-white) !important; border-color: rgba(255, 255, 255, 0.2) !important; } body[data-visual="nuzic"][data-theme="dark"] .param:not(.param--large):has(.circle > input) .circle input { color: var(--nuzic-dark) !important; } body[data-visual="nuzic"][data-theme="dark"] .param:not(.param--large):has(.circle > input) .circle .spin { background: var(--nuzic-spin-bg, var(--nuzic-yellow)) !important; } body[data-visual="nuzic"][data-theme="dark"] .param:not(.param--large):has(.circle > input) .circle .spin.up::before { border-bottom-color: #ffffff !important; } body[data-visual="nuzic"][data-theme="dark"] .param:not(.param--large):has(.circle > input) .circle .spin.down::before { border-top-color: #ffffff !important; } /* -------------------------------------------------------------------------- FASE 13: Pastilla reforçada (`.param--large`) Variant "hero" per controls destacats com "Pulsos por Compás" d'App16/17. Estructura: cercle groc gruixut amb cèrcol blanc interior (petit, just per als dígits), flanquejat per mitges pastilles grogues amb `−`/`+` textuals. Activada afegint la classe `.param--large` al `
`. -------------------------------------------------------------------------- */ body[data-visual="nuzic"] .param.param--large { display: flex !important; flex-direction: column !important; align-items: center !important; gap: clamp(0.5rem, 1.2vw, 1rem) !important; font-size: inherit !important; position: relative; } /* Label a sobre — mateix tamany que els títols estàndard de les altres pastilles `.param` (no la mida hero original). Aplica a App16, App17, App18, App19, App20 (totes les apps que utilitzen `.param--large`). */ body[data-visual="nuzic"] .param.param--large .abbr { font-family: 'Ubuntu', sans-serif !important; font-size: clamp(0.9rem, 1.4vw, 1.2rem) !important; font-weight: 700 !important; color: var(--nuzic-dark) !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.2 !important; text-align: center; position: static !important; transform: none !important; order: 0; } /* Contenidor del cercle: relatiu per ancorar els spinners als costats */ body[data-visual="nuzic"] .param.param--large .circle { position: relative !important; width: clamp(4rem, 10vw, 7rem) !important; height: clamp(4rem, 10vw, 7rem) !important; aspect-ratio: 1 !important; border-radius: 50% !important; background: var(--nuzic-yellow) !important; border: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: visible !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); order: 1; } /* Cèrcol blanc interior — petit, just per als dígits */ body[data-visual="nuzic"] .param.param--large .circle::before { content: ''; position: absolute; width: clamp(1.8rem, 4.4vw, 3rem); height: clamp(1.8rem, 4.4vw, 3rem); border-radius: 50%; background: #ffffff; z-index: 0; } /* Input centrat sobre el cèrcol blanc */ body[data-visual="nuzic"] .param.param--large .circle input { position: relative; z-index: 1; width: clamp(1.8rem, 4.4vw, 3rem) !important; height: clamp(1.8rem, 4.4vw, 3rem) !important; background: transparent !important; border: 0 !important; font-family: 'Ubuntu', sans-serif !important; font-weight: 700 !important; font-size: clamp(1rem, 1.8vw, 1.35rem) !important; color: var(--nuzic-dark) !important; text-align: center !important; padding: 0 !important; outline: none; } body[data-visual="nuzic"] .param.param--large .circle input::-webkit-outer-spin-button, body[data-visual="nuzic"] .param.param--large .circle input::-webkit-inner-spin-button { -webkit-appearance: none !important; appearance: none !important; margin: 0 !important; } body[data-visual="nuzic"] .param.param--large .circle input { -moz-appearance: textfield !important; appearance: textfield !important; } /* Spinner: container neutralitzat; els botons fills es posicionen absoluts respecte al `.circle` (que té `position: relative`). */ body[data-visual="nuzic"] .param.param--large .circle .spinner { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; height: auto !important; display: block !important; transform: none !important; pointer-events: none !important; flex-direction: row !important; } /* Mides comunes dels spin (mitja pastilla) */ body[data-visual="nuzic"] .param.param--large .circle .spin { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: clamp(2.25rem, 4.5vw, 3rem) !important; height: clamp(2.6rem, 6vw, 4rem) !important; padding: 0 !important; border: 0 !important; background: var(--nuzic-yellow) !important; color: var(--nuzic-dark) !important; font-family: 'Ubuntu', sans-serif !important; font-weight: 700 !important; font-size: clamp(1rem, 1.8vw, 1.4rem) !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer; aspect-ratio: auto !important; pointer-events: auto !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); } /* `−` a l'esquerra: cantons externs arrodonits com a mitja pastilla */ body[data-visual="nuzic"] .param.param--large .circle .spin.down { right: calc(100% + clamp(0.25rem, 0.8vw, 0.6rem)) !important; left: auto !important; border-radius: 999px 0 0 999px !important; } /* `+` a la dreta */ body[data-visual="nuzic"] .param.param--large .circle .spin.up { left: calc(100% + clamp(0.25rem, 0.8vw, 0.6rem)) !important; right: auto !important; border-radius: 0 999px 999px 0 !important; } /* Neutralitzar els triangles ::before de les spin de pastilla normal */ body[data-visual="nuzic"] .param.param--large .circle .spin::before { content: none !important; border: 0 !important; } body[data-visual="nuzic"] .param.param--large .circle .spin:hover { background: #e6a82e !important; } /* Dark mode: mateix palette groc/blanc/fosc (invariant — els colors estan hardcoded amb hex per evitar que els tokens `--nuzic-dark`/`--nuzic-light` flipin i canviïn la identitat de la pastilla). */ body[data-visual="nuzic"][data-theme="dark"] .param.param--large .abbr { color: #43433b !important; } body[data-visual="nuzic"][data-theme="dark"] .param.param--large .circle, body[data-visual="nuzic"][data-theme="dark"] .param.param--large .circle .spin { background: var(--nuzic-yellow) !important; } body[data-visual="nuzic"][data-theme="dark"] .param.param--large .circle::before { background: #ffffff !important; } body[data-visual="nuzic"][data-theme="dark"] .param.param--large .circle input { color: #43433b !important; } body[data-visual="nuzic"][data-theme="dark"] .param.param--large .circle .spin { color: #43433b !important; } /* -------------------------------------------------------------------------- FASE 14: Pastilla `.param--large--dual` — Compás amb cycle niat Variant de `.param--large` on el disc groc conté DOS inputs apilats: - cercle blanc a dalt amb input principal (Compás) - mini-pastilla blanca a baix amb input secundari (Cycle) Els spinners laterals actuen sobre l'input principal. Activada amb la classe addicional `.param--large--dual`. -------------------------------------------------------------------------- */ /* Keep the disc perfectly round — make it slightly larger so the two apilats pills (primary + secondary) fit inside without becoming elliptical. */ body[data-visual="nuzic"] .param.param--large--dual .circle { width: clamp(5rem, 12vw, 8rem) !important; height: clamp(5rem, 12vw, 8rem) !important; aspect-ratio: 1 !important; border-radius: 50% !important; flex-direction: column !important; gap: clamp(0.15rem, 0.5vw, 0.35rem) !important; padding: 0 !important; } /* Desactivem el cèrcol blanc central de .param--large (el substitueix el `.pl-primary` extern) */ body[data-visual="nuzic"] .param.param--large--dual .circle::before { display: none !important; } /* Cèrcol blanc principal (contenidor de l'input Compás) */ body[data-visual="nuzic"] .param.param--large--dual .pl-primary { position: relative; z-index: 2; margin-top: 8%; width: clamp(1.6rem, 4vw, 2.6rem); height: clamp(1.6rem, 4vw, 2.6rem); border-radius: 50%; background: #ffffff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } body[data-visual="nuzic"] .param.param--large--dual .pl-primary input { width: 100% !important; height: 100% !important; background: transparent !important; border: 0 !important; font-family: 'Ubuntu', sans-serif !important; font-weight: 700 !important; font-size: clamp(1rem, 1.8vw, 1.35rem) !important; color: var(--nuzic-dark) !important; text-align: center !important; padding: 0 !important; outline: none; } body[data-visual="nuzic"] .param.param--large--dual .pl-primary input::-webkit-outer-spin-button, body[data-visual="nuzic"] .param.param--large--dual .pl-primary input::-webkit-inner-spin-button { -webkit-appearance: none !important; appearance: none !important; margin: 0 !important; } body[data-visual="nuzic"] .param.param--large--dual .pl-primary input { -moz-appearance: textfield !important; appearance: textfield !important; } /* Mini-pastilla blanca (Cycle). Amplada igualada al `.pl-primary` (cercle del Compás) per encabir còmodament valors de 2 dígits (fins a 12) sense retallar el text. L'alçada es manté curta perquè la pastilla segueixi sent visualment secundària dins el cercle groc. */ body[data-visual="nuzic"] .param.param--large--dual .pl-secondary { position: relative; z-index: 2; width: clamp(1.6rem, 4vw, 2.6rem); height: clamp(0.8rem, 2vw, 1.2rem); border-radius: 999px; background: #ffffff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Etiqueta secundària "Nº de compases" sota el cercle groc gran. Apunta al `inputCycle` (mini-pastilla blanca dins del cercle groc). `.pl-secondary` ja té `position: relative` — l'offset `top: 100% + N` col·loca la label fora del cercle (la mini-pastilla està situada cap al fons del cercle, així que un offset moderat ja la treu). */ body[data-visual="nuzic"] .param.param--large--dual .pl-secondary .abbr--secondary { position: absolute !important; top: calc(100% + clamp(0.9rem, 2.5vw, 2.1rem)) !important; /* La mini-pastilla `.pl-secondary` està horitzontalment centrada al cercle groc (flex-direction: column al .circle), així que el seu `left: 0` ja queda alineat amb el centre del conjunt. No cal `translateX(-50%)`. */ transform: translateX(0%) !important; font-family: 'Ubuntu', sans-serif !important; font-size: clamp(0.77rem, 1.1vw, 0.94rem) !important; font-weight: 700 !important; color: var(--nuzic-dark) !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.2 !important; white-space: nowrap !important; pointer-events: none; text-align: center; } body[data-visual="nuzic"][data-theme="dark"] .param.param--large--dual .pl-secondary .abbr--secondary { color: var(--nuzic-dark) !important; } body[data-visual="nuzic"] .param.param--large--dual .pl-secondary input { width: 100% !important; height: 100% !important; background: transparent !important; border: 0 !important; font-family: 'Ubuntu', sans-serif !important; font-weight: 700 !important; font-size: clamp(0.65rem, 1.3vw, 0.95rem) !important; color: var(--nuzic-dark) !important; text-align: center !important; padding: 0 !important; outline: none; } body[data-visual="nuzic"] .param.param--large--dual .pl-secondary input::-webkit-outer-spin-button, body[data-visual="nuzic"] .param.param--large--dual .pl-secondary input::-webkit-inner-spin-button { -webkit-appearance: none !important; appearance: none !important; margin: 0 !important; } body[data-visual="nuzic"] .param.param--large--dual .pl-secondary input { -moz-appearance: textfield !important; appearance: textfield !important; } /* Dark mode: pastilles internes blanques, input fosc invariant */ body[data-visual="nuzic"][data-theme="dark"] .param.param--large--dual .pl-primary, body[data-visual="nuzic"][data-theme="dark"] .param.param--large--dual .pl-secondary { background: #ffffff !important; } body[data-visual="nuzic"][data-theme="dark"] .param.param--large--dual .pl-primary input, body[data-visual="nuzic"][data-theme="dark"] .param.param--large--dual .pl-secondary input { color: #43433b !important; } /* -------------------------------------------------------------------------- FASE 15: Variant rosa de `.param--large` (`.param--large--pink`) Mateixa estructura i geometria que la pastilla groga (FASE 13) però amb el palette `--nuzic-pink` al disc i als spinners. Pensada per apps on el control principal NO és un pols/compàs sinó un registre o identitat que ha de visualitzar-se clarament diferent (p.ex. App18). S'activa afegint la classe `.param--large--pink` al mateix `
` que ja porta `.param--large`. -------------------------------------------------------------------------- */ body[data-visual="nuzic"] .param.param--large--pink .circle { background: var(--nuzic-pink) !important; } body[data-visual="nuzic"] .param.param--large--pink .circle .spin { background: var(--nuzic-pink) !important; } body[data-visual="nuzic"] .param.param--large--pink .circle .spin:hover { /* Darker pink for hover — visually analogous to yellow's #e6a82e. */ background: #d96a93 !important; } /* Dark mode: keep the pink identity invariant (disc + spinners stay pink in both themes, same approach as the yellow variant). */ body[data-visual="nuzic"][data-theme="dark"] .param.param--large--pink .circle, body[data-visual="nuzic"][data-theme="dark"] .param.param--large--pink .circle .spin { background: var(--nuzic-pink) !important; }