/* ============================================ ARMAND MICKAEL — LIFE JOURNAL Hoja de estilos compartida. Copia este archivo tal cual a css/style.css en cada carpeta / no lo dupliques por página. ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600&family=Cinzel+Decorative:wght@700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap'); :root{ --ink:#fbf2f3; --ink-soft:#f0d8dd; --ink-strong:#300911; --panel:#ffffff; --panel-line:#e7bfc7; --parchment:#3a0f18; --parchment-ink:#2b2416; --text:#3a0f18; --text-dim:#8a5763; --gold:#bf6979; --line:#d89aa5; /* Colores de reino — se sobreescriben por página con [data-realm] */ --realm:#bf6979; --realm-soft:rgba(191,105,121,0.15); --serif-display:'Cinzel', serif; --serif-deco:'Cinzel Decorative', serif; --serif-body:'EB Garamond', serif; --mono:'IBM Plex Mono', monospace; } /* Paletas de cada reino — usar como data-realm="inner" etc en */ [data-realm="inner"] { --realm:#5f8fc4; --realm-soft:rgba(95,143,196,.16); } [data-realm="home"] { --realm:#b98a5c; --realm-soft:rgba(185,138,92,.16); } [data-realm="war"] { --realm:#b3495a; --realm-soft:rgba(179,73,90,.16); } [data-realm="sustenance"] { --realm:#c9a13a; --realm-soft:rgba(201,161,58,.16); } [data-realm="pleasure"] { --realm:#96435f; --realm-soft:rgba(150,67,95,.16); } [data-realm="nature"] { --realm:#4a8f5c; --realm-soft:rgba(74,143,92,.16); } [data-realm="shadow"] { --realm:#6b4fa3; --realm-soft:rgba(107,79,163,.16); } [data-realm="authority"] { --realm:#cf9d4f; --realm-soft:rgba(207,157,79,.16); } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background-color:var(--ink); background-image: radial-gradient(ellipse at 12% 0%, rgba(191,105,121,.12), transparent 55%), radial-gradient(ellipse at 88% 8%, rgba(126,71,82,.08), transparent 50%), radial-gradient(ellipse at 50% 100%, rgba(240,216,221,.6), transparent 60%); background-attachment:fixed; color:var(--text); font-family:var(--serif-body); font-size:18px; line-height:1.6; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } ::selection{ background:var(--realm); color:#fff; } /* ---------- utilidades de texto ---------- */ .eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim); } .display{ font-family:var(--serif-display); letter-spacing:.04em; text-transform:uppercase; } /* ---------- barra superior de instrumentos (Calendar / History / Statistics) ---------- */ .instruments{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin:36px 0 0; } .instruments a{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding:9px 18px; border:1px solid var(--panel-line); border-radius:999px; color:var(--text-dim); transition:border-color .2s ease, color .2s ease, background .2s ease; } .instruments a:hover{ color:var(--text); border-color:var(--realm); background:var(--realm-soft); } /* ---------- back link ---------- */ .back-link{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); padding:8px 4px; } .back-link:hover{ color:var(--realm); } /* ============================================ DASHBOARD ============================================ */ .topnav{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:16px 24px; background:var(--ink-strong); border-bottom:1px solid var(--panel-line); position:sticky; top:0; z-index:10; } .topnav .links{ display:flex; gap:20px; flex-wrap:wrap; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; } .topnav .links a{ color:var(--ink-soft); } .topnav .links a:hover{ color:#fff; } .topnav .links a.current{ color:#fff; } .banner-img{ width:100%; max-height:260px; object-fit:cover; display:block; border-bottom:1px solid var(--panel-line); } .profile-block{ max-width:760px; margin:0 auto; padding:0 24px; } .avatar-lg{ width:118px; height:118px; border-radius:50%; object-fit:cover; margin-top:-64px; border:4px solid var(--ink); box-shadow:0 0 0 1px var(--panel-line), 0 12px 34px -10px rgba(0,0,0,.6); } .profile-block h1{ font-family:var(--serif-display); font-size:28px; color:var(--parchment); margin:18px 0 2px; } .profile-block .handle{ font-family:var(--mono); font-size:13px; color:var(--realm); } .profile-block .traits{ font-family:var(--serif-body); font-style:italic; color:var(--text-dim); margin-top:10px; font-size:15px; } .profile-block .quote{ margin-top:18px; padding:16px 20px; background:var(--ink-soft); border-left:3px solid var(--realm); font-style:italic; color:var(--text-dim); font-size:14.5px; } /* HP / Nivel / Mana */ .vitals{ margin-top:26px; display:flex; flex-direction:column; gap:10px; } .vitals .row{ display:flex; align-items:center; gap:12px; } .vitals .vlabel{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); width:60px; flex-shrink:0; } .hearts{ letter-spacing:2px; font-size:15px; } .bar-track{ flex:1; height:9px; background:var(--panel); border:1px solid var(--panel-line); border-radius:999px; overflow:hidden; } .bar-fill{ height:100%; border-radius:999px; } .bar-fill.exp{ background:linear-gradient(90deg, var(--realm), var(--ink-soft)); } .bar-fill.mana{ background:linear-gradient(90deg, #5f8fc4, #b6d3ef); } .vitals .vval{ font-family:var(--mono); font-size:11px; color:var(--text-dim); width:64px; text-align:right; } /* Kinnies */ .kinnies{ margin-top:36px; } .kinnies h3{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); margin-bottom:14px; } .kinnie-grid{ display:flex; gap:18px; flex-wrap:wrap; } .kinnie{ text-align:center; width:76px; } .kinnie img{ width:76px; height:76px; border-radius:50%; object-fit:cover; border:2px solid var(--panel-line); } .kinnie span{ display:block; margin-top:8px; font-family:var(--serif-body); font-size:12px; color:var(--text-dim); } .enter-journal{ display:inline-block; margin:44px 0 60px; padding:14px 30px; border:1px solid var(--realm); border-radius:2px; font-family:var(--serif-display); font-size:14px; letter-spacing:.06em; color:var(--parchment); background:var(--realm-soft); transition:background .2s ease; } .enter-journal:hover{ background:var(--realm); color:var(--ink-strong); } /* ============================================ JOURNAL — calendario interactivo ============================================ */ .tabs{ display:flex; gap:10px; margin-bottom:28px; } .tab-btn{ font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; background:none; border:1px solid var(--panel-line); color:var(--text-dim); padding:9px 16px; border-radius:999px; cursor:pointer; } .tab-btn.active{ color:var(--ink-strong); background:var(--realm); border-color:var(--realm); } .cal-header{ display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:16px; } .cal-header button{ background:none; border:1px solid var(--panel-line); color:var(--text); width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:14px; } .cal-header button:hover{ border-color:var(--realm); color:var(--realm); } .cal-month-label{ font-family:var(--serif-display); text-transform:capitalize; font-size:16px; color:var(--parchment); min-width:180px; text-align:center; } .cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:22px; } .cal-dow{ font-family:var(--mono); font-size:10px; text-align:center; color:var(--text-dim); padding-bottom:6px; } .cal-cell{ aspect-ratio:1; border:1px solid var(--panel-line); border-radius:3px; display:flex; align-items:flex-start; justify-content:flex-end; padding:5px 7px; font-family:var(--mono); font-size:11px; color:var(--text); cursor:pointer; transition:transform .15s ease; } .cal-cell:hover{ transform:scale(1.05); border-color:var(--realm); } .cal-cell.empty{ border:none; cursor:default; } .cal-cell.empty:hover{ transform:none; } .day-editor{ background:var(--panel); border:1px solid var(--panel-line); border-radius:3px; padding:18px 20px; margin-bottom:26px; } .day-editor-head{ font-family:var(--serif-display); font-size:13px; color:var(--parchment); margin-bottom:12px; text-transform:capitalize; } .swatch-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; } .swatch-btn{ width:26px; height:26px; border-radius:50%; border:2px solid transparent; cursor:pointer; } .swatch-btn.selected{ border-color:var(--parchment); box-shadow:0 0 0 2px var(--realm); } .swatch-btn.clear-btn{ background:var(--ink-soft); color:var(--text-dim); border:1px solid var(--panel-line); font-size:11px; } .day-editor textarea{ width:100%; min-height:80px; resize:vertical; background:var(--ink-soft); border:1px solid var(--panel-line); border-radius:3px; color:var(--text); font-family:var(--serif-body); font-size:14px; padding:10px 12px; margin-bottom:12px; } .save-btn{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; background:var(--realm); color:var(--ink-strong); border:none; padding:9px 18px; border-radius:999px; cursor:pointer; } .legend{ border-top:1px solid var(--panel-line); padding-top:18px; } .legend h3{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); margin-bottom:12px; } .legend-row{ display:flex; align-items:center; gap:10px; padding:5px 0; font-size:13.5px; } .legend-row .swatch{ width:14px; height:14px; border-radius:50%; flex-shrink:0; border:1px solid var(--panel-line); } .legend-hex{ font-family:var(--mono); font-size:11px; color:var(--text-dim); width:70px; } .legend-label{ color:var(--text); } .history-list{ display:flex; flex-direction:column; gap:2px; } .history-row{ display:flex; align-items:center; gap:12px; padding:10px 8px; border-bottom:1px solid var(--panel-line); cursor:pointer; font-size:13.5px; } .history-row:hover{ background:var(--panel); } .history-row .swatch{ width:12px; height:12px; border-radius:50%; flex-shrink:0; } .history-date{ font-family:var(--mono); font-size:11.5px; color:var(--text-dim); width:90px; } .history-label{ width:100px; color:var(--realm); font-size:12.5px; } .history-note{ color:var(--text-dim); font-size:12.5px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .empty-msg{ color:var(--text-dim); font-style:italic; font-size:14px; } .stats-box{ display:flex; flex-direction:column; gap:12px; } .stat-row{ display:flex; align-items:center; gap:12px; } .stat-label{ width:110px; font-size:13px; color:var(--text-dim); flex-shrink:0; } .stat-bar-track{ flex:1; height:14px; background:var(--panel); border-radius:999px; overflow:hidden; } .stat-bar-fill{ height:100%; } .stat-count{ width:24px; text-align:right; font-family:var(--mono); font-size:12px; color:var(--text-dim); } /* ---------- footer sencillo ---------- */ .site-footer{ text-align:center; padding:60px 20px 80px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--text-dim); opacity:.6; }