/* ══════════════════════════════════════════════════════════════ PALMO — Global styles + dark mode Cargado en TODAS las páginas via functions.php ══════════════════════════════════════════════════════════════ */ /* ── NAV ──────────────────────────────────────────────────── */ .p-nav { position: fixed; inset: 0 0 auto 0; z-index: 50; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; padding: 1.1rem var(--gutter, clamp(1.4rem,4vw,4rem)); pointer-events: none; } .p-nav a, .p-nav button { pointer-events: all; background: none; border: 0; font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; padding: 0; text-decoration: none; } .p-nav-logo { justify-self: start; } .wm-logo { display: block; height: 14px; width: auto; } /* Dual logo: light/dark versions */ html[data-theme="light"] .wm-logo--dark { display: none; } html[data-theme="dark"] .wm-logo--light { display: none; } /* Default (before JS sets theme): show light logo */ html:not([data-theme="dark"]) .wm-logo--dark { display: none; } /* Contact now lives in p-nav-right, no longer center */ .p-nav-contact { opacity: .55; transition: opacity .2s; } .p-nav-contact:hover { opacity: 1; } /* ── Switch in nav center ── */ .p-nav-switch { justify-self: center; display: flex; align-items: center; gap: 0; pointer-events: all; } .p-nav-sw-btn { font-family: 'JetBrains Mono', 'Courier New', monospace !important; font-size: .72rem !important; letter-spacing: .1em !important; text-transform: uppercase !important; padding: .3rem .9rem !important; border-radius: 999px; color: currentColor; opacity: .38; transition: opacity .2s, background .2s, color .2s; border: 0 !important; background: transparent !important; } /* Active: always explicit — white pill on dark, dark pill on light */ .p-nav-sw-btn[aria-pressed="true"] { opacity: 1; background: #ffffff !important; color: #111111 !important; } html[data-theme="light"] .p-nav-sw-btn[aria-pressed="true"] { background: #111111 !important; color: #ffffff !important; } .p-nav-sw-btn:hover:not([aria-pressed="true"]) { opacity: .7; } /* Back link — project pages, same position as switch */ .p-nav-back { justify-self: center; font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; opacity: .5; transition: opacity .2s; pointer-events: all; } .p-nav-back:hover { opacity: 1; } /* Hide switch on project pages (handled by PHP now, but belt+suspenders) */ body.single-project .p-nav-switch, body.v4-page .p-nav-switch { display: none; } .p-nav-right { justify-self: end; display: flex; align-items: center; gap: 1.4rem; } /* Theme toggle icon */ .p-nav-theme { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; opacity: .65; transition: opacity .2s; } .p-nav-theme:hover { opacity: 1; } .p-nav-theme-icon { display: block; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); transition: transform .4s cubic-bezier(.72,0,.18,1); } html[data-theme="dark"] .p-nav-theme-icon { transform: rotate(180deg); } @media (max-width: 640px) { .p-nav-contact { display: none; } /* Theme toggle: hidden on mobile */ .p-nav-theme { display: none; } /* Switch: smaller, tighter */ .p-nav-sw-btn { font-size: .58rem !important; padding: .22rem .6rem !important; letter-spacing: .08em !important; } } /* ══════════════════════════════════════════════════════════════ DARK MODE — sistema global palmo-theme.js aplica data-theme="dark" al elemento . Estos selectores sobreescriben CUALQUIER color hardcodeado en los templates de proyecto. ══════════════════════════════════════════════════════════════ */ /* Light (default) */ html, html[data-theme="light"] { --pg-bg: #ffffff; --pg-ink: #0e0e0e; --pg-mu: rgba(14,14,14,.32); --pg-rule: rgba(14,14,14,.09); } /* Dark */ html[data-theme="dark"] { --pg-bg: #0e0e0e; --pg-ink: #f0ede8; --pg-mu: rgba(240,237,232,.35); --pg-rule: rgba(240,237,232,.1); } /* Aplica en todas las páginas */ html[data-theme="dark"], html[data-theme="dark"] body { background-color: var(--pg-bg) !important; color: var(--pg-ink) !important; } /* Cubrir elementos con color hardcodeado en templates v1/v2/v4 */ html[data-theme="dark"] *:not(script):not(style):not(.p-nav-theme-icon):not(img):not(video) { color: inherit; } /* Overrides específicos para variables --v4-* del template_project_v4 */ html[data-theme="dark"] { --v4-bg: #0e0e0e !important; --v4-fg: #f0ede8 !important; --v4-mu: rgba(240,237,232,.35) !important; --v4-ru: rgba(240,237,232,.1) !important; --v4-panel-bg: #111110 !important; --v4-panel-fg: #f0ede8 !important; --v4-panel-mu: rgba(240,237,232,.4) !important; --v4-panel-rule: rgba(240,237,232,.1) !important; } /* ══════════════════════════════════════════════════════════════ PALMO — MODE SWITCHER + JOURNAL GRID Añadido en palmo-global.css (cargado en todas las páginas) ══════════════════════════════════════════════════════════════ */ /* Scroll fix — palmo.css pone overflow:hidden en body */ body.home, body.tpl_frontpage, .primary_frontpage { overflow: visible !important; } /* Journal panel oculto por defecto */ #fp_panel_journal { display: none; } /* ── Switcher pill ── */ .fp_mode_switcher { position: fixed; bottom: 2.4vw; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; align-items: center; background: rgba(20, 20, 20, 0.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 100px; padding: 4px; gap: 2px; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 8px 32px rgba(0,0,0,0.55); } .fp_mode_btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 24px; border-radius: 100px; font-family: 'Manrope', sans-serif; font-size: clamp(12px, 0.9vw, 15px); font-weight: 500; letter-spacing: 0.01em; color: rgba(255,255,255,0.5); cursor: pointer; border: none; background: transparent; transition: background 0.2s ease, color 0.2s ease; user-select: none; white-space: nowrap; line-height: 1; } .fp_mode_btn.is-active { background: #ffffff; color: #111111; } .fp_mode_btn:hover:not(.is-active) { color: rgba(255,255,255,0.9); } /* ── Journal grid ── */ #fp_gallery_wrap_journal { width: 100%; padding: 0 !important; } #fp_gallery_journal { display: grid !important; grid-template-columns: repeat(8, 1fr) !important; gap: 3px !important; padding: 0 !important; width: 100% !important; align-items: start !important; box-sizing: border-box; } #fp_gallery_journal .fp_thumb { position: relative; overflow: hidden; background: #111; cursor: pointer; } #fp_gallery_journal .fp_thumb_real_img { display: block !important; width: 100% !important; height: auto !important; max-height: none !important; object-fit: cover; transition: transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; will-change: transform; } #fp_gallery_journal .fp_thumb:hover .fp_thumb_real_img { transform: scale(1.04) !important; } .journal_empty { grid-column: 1 / -1; padding: 8vw 0; text-align: center; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.25); } @media (max-width: 900px) { #fp_gallery_journal { grid-template-columns: repeat(3, 1fr) !important; gap: 2px !important; } .fp_mode_switcher { bottom: 5vw; } .fp_mode_btn { padding: 7px 18px; font-size: 13px; } } /* ── Scroll fix proyectos — palmo.css overflow:hidden mata el scroll ── */ body.single-project, body.v4-page { overflow-y: auto !important; height: auto !important; }