/* This file's box-shadow/text-shadow/filter glows (title glow, badge glows, hover states) use var(--crimson-blood) (#8B0000) — numerically the old pre-spec VTM accent (see wizard.css:65) predating the current --vtm-* ramp. Deliberately NOT var(--aggravated): that semantic alias means "aggravated damage severity", not "VTM legacy accent glow". Reused the --crimson-blood primitive directly so the glow reads from the token system without borrowing damage-severity semantics. */ /* ===== VTM SHEET LOCAL TOKENS ===== */ /* * D1 fix: vtm-sheet.css previously had no :root and borrowed --bg-dark, * --bg-card, --neuro-*, --text-muted, --success, --danger implicitly from * htr-sheet.css / wta-sheet.css via cascade load order. This :root block * makes all VTM sheet dependencies explicit and eliminates the hidden * coupling to sibling sheet files. * * Semantic tokens (--accent, --danger, --text, etc.) resolve from tokens.css * via the global :root and the [data-splat="vtm"] override on . * Local vars below are VTM-specific implementation details only. */ :root { /* VTM splat accent refs — point at primitive ramp */ --vtm-red: var(--vtm-500); /* #6B1E3C — spec base accent (bright); active = #3D0F22 */ --vtm-red-dark: var(--vtm-700); /* #3D0F22 */ --vtm-red-light: var(--vtm-300); /* #A85070 */ /* Surface / layout vars (formerly borrowed from htr-sheet.css :root) */ --bg-black: var(--parchment-900); /* #150f0a */ --bg-dark: var(--parchment-800); /* #281e12 */ --bg-card: var(--parchment-700); /* #3a2c1a */ --text-white: var(--parchment-300); /* #c4b59c — warm, not pure white */ --text-gray: var(--parchment-400); /* #9d8d77 */ --text-muted: var(--parchment-400); /* alias of text-gray */ --border-color: var(--parchment-600); /* #58493a */ /* Status — wire to semantic tokens */ --danger: var(--crimson-600); /* #7d3124, matches tokens.css */ /* Neumorphic shadows — VTM-flavored (claret ambient glow) */ --neuro-radius: 0; /* sharp corners — matches .btn-add's border-radius: 0 */ --neuro-bg-1: var(--parchment-900); --neuro-bg-2: var(--ink-900); --neuro-shadow-glow: rgba(140, 47, 82, 0.15); /* vtm-500 ambient */ } /* --neuro-shadow-dark/light derive from --accent, so they must be declared on [data-splat="vtm"] itself rather than :root above — :root only ever sees the shell's default gold --accent, since [data-splat] lives on , a descendant of :root, and custom properties resolve var() using the value at the declaring element, not the consuming one. */ [data-splat="vtm"] { --neuro-shadow-dark: color-mix(in oklch, var(--accent), black 70%); --neuro-shadow-light: color-mix(in oklch, var(--accent), black 40%); } /* ===== LAYOUT ===== */ /* VTM Phase 1 - Layout Restructuring CSS */ /* ===== NEW HEADER ===== */ .sheet-header-new { text-align: center; margin-bottom: 2rem; padding: 1.5rem; padding-bottom: 1.5rem; background: transparent; border-bottom: 3px solid var(--vtm-red-dark); position: relative; } /* Clan Symbol in Header - hidden for now */ .clan-symbol-header { display: none; } .character-title { font-family: 'Brush Script MT', 'Brush Script', cursive; font-size: 3rem; color: var(--vtm-red-light); margin-bottom: 0.5rem; font-weight: 400; letter-spacing: 3px; text-shadow: 0 0 10px color-mix(in srgb, var(--crimson-blood) 80%, transparent), 0 0 20px color-mix(in srgb, var(--crimson-blood) 60%, transparent), 0 0 15px color-mix(in srgb, var(--crimson-blood) 40%, transparent), 2px 2px 4px rgba(0, 0, 0, 0.8); } /* "the 9th generation Ventrue of the chronicle" — sits between the contenteditable name and the rest of the header. Only the chronicle-name-inline span (below) is itself editable; deliberately not inside the h1 (contenteditable would let it get edited/saved as part of char.name) and deliberately not the big cursive treatment (that's reserved for the name itself). */ .character-epithet { font-family: 'IM Fell English', Georgia, serif; font-style: italic; font-size: 1.1rem; color: var(--text-gray); letter-spacing: 0.5px; margin-top: -0.25rem; margin-bottom: 0.5rem; } /* The editable chronicle name, inline within .character-epithet — same contenteditable pattern as char.name/chronicle used to use as their own heading (.chronicle-subheader), just folded into the sentence. */ .chronicle-name-inline { cursor: text; padding: 0 0.15rem; border-radius: 3px; transition: background-color 0.2s; outline: none; } .chronicle-name-inline:hover { background-color: color-mix(in srgb, var(--crimson-blood) 10%, transparent); } .chronicle-name-inline:focus { background-color: color-mix(in srgb, var(--crimson-blood) 20%, transparent); color: var(--text-white); } /* ===== 3-COLUMN GRID (ABOVE PAGE BREAK) ===== */ .sheet-grid-three-column { display: grid; grid-template-columns: 40% 4px 35% 4px 25%; gap: 0; margin-bottom: 2rem; position: relative; width: 100%; max-width: 100%; } /* Adjust for divider width - make total equal 100% */ .sheet-grid-three-column { grid-template-columns: calc(40% - 5px) 4px calc(35% - 6px) 4px calc(25% - 5px); } /* ===== 2-COLUMN GRID (BELOW PAGE BREAK) ===== */ .sheet-grid-two-column { display: grid; grid-template-columns: calc(65% - 4px) 4px calc(35% - 4px); gap: 0; margin-bottom: 2rem; position: relative; width: 100%; max-width: 100%; } .column-one, .column-two, .column-three { display: flex; flex-direction: column; gap: 0.5rem; padding: 0 0.75rem; overflow-x: hidden; } /* ===== DRAGGABLE COLUMN DIVIDERS ===== */ .column-divider { width: 4px; background: transparent; cursor: col-resize; position: relative; display: flex; align-items: stretch; justify-content: center; transition: background-color 0.2s; flex-shrink: 0; } .column-divider:hover { background-color: color-mix(in srgb, var(--crimson-blood) 15%, transparent); } .column-divider:active { background-color: color-mix(in srgb, var(--crimson-blood) 30%, transparent); } .divider-handle { width: 3px; background: linear-gradient( to bottom, transparent 0%, var(--border-color) 10%, var(--vtm-red-dark) 50%, var(--border-color) 90%, transparent 100% ); opacity: 0.6; transition: opacity 0.2s; box-shadow: 0 0 4px color-mix(in srgb, var(--crimson-blood) 30%, transparent); } .column-divider:hover .divider-handle { opacity: 1; background: linear-gradient( to bottom, transparent 0%, var(--vtm-red) 10%, var(--vtm-red-light) 50%, var(--vtm-red) 90%, transparent 100% ); box-shadow: 0 0 6px color-mix(in srgb, var(--crimson-blood) 60%, transparent); } /* Resize hint — hidden until the divider's been hovered a beat, so it doesn't flash on every incidental pass over the 4px hit target. */ .divider-tooltip { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--leather-800); border: 1px solid var(--parchment-600); border-radius: 3px; padding: 2px 8px; font-family: 'Special Elite', Courier, monospace; font-size: 9px; color: var(--parchment-400); letter-spacing: 1px; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; z-index: 10; } .column-divider:hover .divider-tooltip { opacity: 1; transition-delay: 0.5s; } /* Trackers Section (moved from Chronicle grid) */ .trackers-section { margin-top: 0; } .trackers-section .trackers-compact { background: linear-gradient(145deg, var(--neuro-bg-1), var(--neuro-bg-2)); padding: 1rem; border-radius: var(--neuro-radius); border: none; box-shadow: 9px 9px 11px var(--neuro-shadow-dark), -5px -5px 6px var(--neuro-shadow-light), 0 0 4px var(--neuro-shadow-glow); } .grid-box { background: linear-gradient(145deg, var(--neuro-bg-1), var(--neuro-bg-2)); padding: 1rem; border-radius: var(--neuro-radius); border: none; box-shadow: 9px 9px 11px var(--neuro-shadow-dark), -5px -5px 6px var(--neuro-shadow-light), 0 0 4px var(--neuro-shadow-glow); } .form-group-compact { margin-bottom: 0.75rem; } .form-group-compact:last-child { margin-bottom: 0; } .form-group-compact label { display: block; font-size: 0.85rem; color: var(--text-gray); margin-bottom: 0.25rem; font-weight: bold; } .form-group-compact input, .form-group-compact textarea { width: 100%; padding: 0.4rem; background-color: var(--bg-dark); background-image: none; border: 1px solid var(--border-color); border-radius: 3px; color: var(--text-white); font-size: 0.9rem; } /* Horizontal form layout for Chronicle Info single-line inputs */ .form-group-compact-horizontal { margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; } .form-group-compact-horizontal:last-child { margin-bottom: 0; } .form-group-compact-horizontal label { font-size: 0.85rem; color: var(--text-gray); font-weight: bold; min-width: 90px; flex-shrink: 0; } .form-group-compact-horizontal input, .form-group-compact-horizontal select { flex: 1; min-width: 0; /* Allow inputs to shrink below content width when column resizes */ padding: 0.4rem; background-color: var(--bg-dark); background-image: none; /* select's own chevron image below still wins the tie */ border: 1px solid var(--border-color); border-radius: 3px; color: var(--text-white); font-size: 0.9rem; } .form-group-compact-horizontal select { cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(160,160,160)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 1em; padding-right: 2rem; } .form-group-compact-horizontal select option { background-color: var(--bg-dark); color: var(--text-white); } .form-group-compact-horizontal select:focus, .form-group-compact-horizontal input:focus { outline: none; border-color: var(--vtm-red); box-shadow: 0 0 0 2px color-mix(in srgb, var(--crimson-blood) 20%, transparent); } /* Compact Trackers in Bottom Right Grid Box */ .trackers-compact { display: flex; flex-direction: column; gap: 0.75rem; } .tracker-row-compact { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .tracker-row-compact:last-child { border-bottom: none; padding-bottom: 0; } .tracker-row-compact label { font-size: 0.85rem; color: var(--text-gray); font-weight: bold; min-width: 70px; text-align: left; } .box-tracker-small { display: flex; gap: 0.2rem; flex-wrap: wrap; flex: 1; justify-content: flex-end; } /* Health: heart shape via clip-path */ .health-box.small { width: 14px; height: 14px; box-sizing: border-box; /* keeps the .empty state's border from growing the box */ background-color: var(--parchment-700); background-image: none; border: none; transform: none; clip-path: path("M7 2.578c-1.648-3.322-6.999-2.37-6.999 1.907 0 4.24 5.774 6.38 6.999 8.931 1.222-2.551 6.996-4.69 6.996-8.931 0-4.274-5.349-5.234-6.996-1.907z"); } .health-box.small > span { display: none; } /* Willpower: solid circle */ .willpower-box.small { width: 14px; height: 14px; box-sizing: border-box; /* keeps the .empty state's border from growing the box */ background-color: var(--parchment-700); background-image: none; border: none; border-radius: 50%; transform: none; } .willpower-box.small > span { display: none; } /* Humanity: diamond via clip-path (same pattern as health/willpower) */ .humanity-box.small { width: 14px; height: 14px; box-sizing: border-box; /* keeps the .empty state's border from growing the box */ border: none; background-image: none; transform: none; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); box-shadow: none; outline: none; -webkit-tap-highlight-color: transparent; transition: background-color 0.15s; } .humanity-box.small:active { box-shadow: none; outline: none; } /* States — three distinct levels: filled (undamaged) → superficial → aggravated */ /* clip-path clips the box's straight-edged border along with everything else, so a real `border` never traces the heart/diamond curve. Instead, fill the full clipped shape with the ring color, then lay a smaller copy of the same clip-path on top (scaled down via ::after, since transform scales a clipped box without needing to hand-derive an inset path) in a color matching the sheet's actual dark backdrop — punching an accurately-shaped "hole" out of the middle. */ .health-box.small.empty, .humanity-box.small.empty { background-color: rgba(255, 221, 170, 0.4); border: none; position: relative; } .health-box.small.empty::after, .humanity-box.small.empty::after { content: ''; position: absolute; inset: 0; background-color: var(--ink-900); transform: scale(0.75); } .health-box.small.empty::after { clip-path: path("M7 2.578c-1.648-3.322-6.999-2.37-6.999 1.907 0 4.24 5.774 6.38 6.999 8.931 1.222-2.551 6.996-4.69 6.996-8.931 0-4.274-5.349-5.234-6.996-1.907z"); } .humanity-box.small.empty::after { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } /* Plain circle — no clip-path, so a real border traces it cleanly. Matches the sitewide .dot.empty outline (rgba(255, 221, 170, 0.4)). */ .willpower-box.small.empty { background-color: transparent; border: 1.5px solid rgba(255, 221, 170, 0.4); } .health-box.small.filled, .willpower-box.small.filled, .humanity-box.small.filled { background-color: var(--vtm-red); /* undamaged / at-humanity: vampire red */ } .health-box.small.superficial { background-color: var(--superficial); } /* recoverable damage */ .health-box.small.aggravated { background-color: var(--ink-900); } /* severe damage: near-black */ .willpower-box.small.superficial { background-color: var(--superficial); border-radius: 50%; } .willpower-box.small.aggravated { background-color: var(--ink-900); border-radius: 50%; } .humanity-box.small.stained { background-color: var(--ink-900); } /* Add spacing between 5th and 6th dots to create visual rows of 5 */ .health-box.small:nth-of-type(6), .willpower-box.small:nth-of-type(6), .humanity-box.small:nth-of-type(6) { margin-left: 0.5rem; } /* Hunger dots in compact tracker format - CSS BLOOD DROPS */ .hunger-dots-compact { display: flex; gap: 0.6rem; /* Doubled from 0.3rem */ flex: 1; justify-content: flex-end; align-items: center; } /* Sized so the 5-dot Hunger track's left edge lines up with the 10-box Health/Willpower/Humanity tracks' left edge (both right-align via .hunger-dots-compact/.box-tracker-small's justify-content: flex-end, so matching total track width is what lines up the left edges). */ .hunger-dot-compact { position: relative; display: inline-block; width: 28px; height: 28px; cursor: pointer; font-size: 0; transition: all 0.2s ease; } /* Blood drop shape using ::before pseudo-element */ .hunger-dot-compact::before { content: ''; position: absolute; top: 0; left: 50%; width: 24px; height: 24px; box-sizing: border-box; /* keeps the .empty state's border from growing the shape */ background: var(--parchment-700); border: none; border-radius: 50% 50% 50% 0; transform: translateX(-50%) rotate(135deg); /* Flipped vertically - changed from -45deg to 135deg */ transition: all 0.2s ease; } /* Empty state — border-radius (not clip-path), so a real border traces the drop shape cleanly. */ .hunger-dot-compact.empty::before { background: transparent; border: 1.5px solid rgba(255, 221, 170, 0.4); } /* Empty state on hover - brighten the outline instead of filling it */ .hunger-dot-compact.empty:hover::before { background: transparent; border-color: rgba(255, 221, 170, 0.8); transform: translateX(-50%) rotate(135deg) scale(1.1); } /* Filled state - solid red blood drop */ .hunger-dot-compact.filled::before { background: var(--vtm-red); } /* Danger state (4-5 dots) - darker red */ .hunger-dot-compact.danger::before { background: var(--vtm-red-dark); animation: pulse-danger 2s ease-in-out infinite; } /* Filled state on hover - brighter glow */ .hunger-dot-compact.filled:hover::before { background: var(--vtm-red-light); transform: translateX(-50%) rotate(135deg) scale(1.1); box-shadow: 0 0 8px color-mix(in srgb, var(--crimson-blood) 60%, transparent); } /* Danger state hover - intense glow */ .hunger-dot-compact.danger:hover::before { transform: translateX(-50%) rotate(135deg) scale(1.15); box-shadow: 0 0 12px color-mix(in srgb, var(--crimson-blood) 80%, transparent); } /* Pulse animation for danger state (high hunger) */ @keyframes pulse-danger { 0%, 100% { box-shadow: 0 0 4px color-mix(in srgb, var(--crimson-blood) 40%, transparent); } 50% { box-shadow: 0 0 8px color-mix(in srgb, var(--crimson-blood) 70%, transparent); } } /* ===== ATTRIBUTES SECTION ===== */ .attributes-header { text-align: center; font-size: 1.1rem; color: var(--text-white); text-transform: uppercase; letter-spacing: 3px; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } /* Apply same style to all section headers */ .sheet-section h2 { text-align: center; font-size: 1.1rem; color: rgba(255, 190, 155, 0.5); text-transform: uppercase; letter-spacing: 3px; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .attributes-three-column { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; overflow-x: auto; padding: 1.5rem; background: linear-gradient(145deg, var(--neuro-bg-1), var(--neuro-bg-2)); border-radius: var(--neuro-radius); box-shadow: 9px 9px 11px var(--neuro-shadow-dark), -5px -5px 6px var(--neuro-shadow-light), 0 0 4px var(--neuro-shadow-glow); } .attribute-column { display: flex; flex-direction: column; min-width: 0; /* Prevent overflow */ } .attribute-category-label { font-size: 0.7rem; color: var(--vtm-red-light); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.5rem; text-align: center; font-weight: normal; font-style: italic; } .attribute-column .attribute-row { display: flex; justify-content: space-between; align-items: center; padding: 0.15rem 0; gap: 0.25rem; /* Reduced from 0.5rem for tighter spacing */ } .attribute-column .attribute-row:last-child { border-bottom: none; } .attribute-column .attribute-name { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; color: var(--text-gray); font-weight: bold; min-width: 0; } /* Attribute dots - smaller and tighter for responsive compression */ .attribute-column .dot-tracker { display: flex; gap: 0.03rem; /* Reduced from default for tighter dots */ flex-shrink: 0; /* Don't let tracker shrink */ min-width: fit-content; } .attribute-column .dot { font-size: 1rem; /* Smaller dots for better fit */ line-height: 1; } /* ===== BACKGROUNDS, MERITS & FLAWS ===== */ .background-entry { margin-bottom: 1rem; padding: 1rem; background: linear-gradient(145deg, var(--neuro-bg-1), var(--neuro-bg-2)); border-radius: var(--neuro-radius); box-shadow: 7px 7px 9px var(--neuro-shadow-dark), -4px -4px 5px var(--neuro-shadow-light), 0 0 4px var(--neuro-shadow-glow); transition: all 0.3s ease; } .background-entry:last-of-type { margin-bottom: 0; } .background-entry:hover { box-shadow: 7px 7px 9px var(--neuro-shadow-dark), -4px -4px 5px var(--neuro-shadow-light), 0 0 35px color-mix(in srgb, var(--crimson-blood) 25%, transparent), inset 0 0 15px color-mix(in srgb, var(--crimson-blood) 8%, transparent); } .background-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; flex-wrap: nowrap; /* Prevent wrapping */ } .background-category-dropdown { flex-shrink: 0; min-width: 110px; } .background-category-dropdown select { width: 100%; padding: 0.5rem; background-color: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-white); font-size: 0.9rem; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(160,160,160)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 1em; padding-right: 2rem; } .background-category-dropdown select:focus { outline: none; border-color: var(--vtm-red); box-shadow: 0 0 0 2px color-mix(in srgb, var(--crimson-blood) 20%, transparent); } .background-type-row { margin-bottom: 0.5rem; } .background-type-row input[type="text"] { width: 100%; box-sizing: border-box; padding: 0.5rem; background-color: var(--bg-dark); background-image: none; border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-white); } .background-dots { display: flex; gap: 0.3rem; flex-shrink: 0; } .background-dots .dot { font-size: 0; cursor: pointer; transition: background-color 0.2s; line-height: 1; } .background-dots .dot.filled { background-color: var(--vtm-red); } .background-dots .dot.empty { background-color: transparent; border: 1.5px solid rgba(255, 221, 170, 0.4); } .background-dots .dot.empty:hover { background-color: transparent; border-color: rgba(255, 221, 170, 0.7); } .background-dots .dot.filled:hover { background-color: var(--vtm-red-light); } /* Description textarea grows to fit its content via autoGrow() in the Alpine component, so a manual resize handle and scrollbar would just fight the auto-sized height. Extra .form-group qualifier (rather than just `.background-entry textarea`) to beat .form-group textarea's resize:vertical on specificity instead of relying on source order. */ .background-entry .form-group textarea { resize: none; overflow: hidden; } /* Remove background button */ .btn-remove-bg { background: none; border: none; color: var(--parchment-500); cursor: pointer; font-size: 1.2rem; padding: 0; line-height: 1; transition: color 0.2s; flex-shrink: 0; } .btn-remove-bg:hover { color: var(--text-muted); } .btn-add { width: 100%; padding: 0.75rem; background-color: var(--bg-dark); border: 1px dashed var(--border-color); border-radius: 4px; color: var(--text-gray); cursor: pointer; transition: all 0.2s; } .btn-add:hover { background-color: color-mix(in srgb, var(--crimson-blood) 10%, transparent); border-color: var(--vtm-red); color: var(--vtm-red-light); } /* ===== VTM FANCY ADD BUTTONS ===== */ .vtm-sheet .btn-add { display: block; position: relative; width: 100%; padding: 0.6rem 1rem; background: transparent; border: 1px solid rgba(255, 221, 170, 0.4); border-radius: 0; color: var(--text-muted); cursor: pointer; font-family: inherit; font-size: 0.85rem; text-align: center; transition: color 0.4s; overflow: visible; box-sizing: border-box; } .vtm-sheet .btn-add::after { content: ""; border: 1px solid transparent; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transition: all 0.4s; pointer-events: none; } .vtm-sheet .btn-add:hover { background: transparent; color: rgba(255, 190, 155, 0.5); border-color: var(--gold-200); } .vtm-sheet .btn-add:hover::after { border: 1px solid var(--gold-200); width: calc(100% - 8px); height: calc(100% + 8px); } /* .btn-small (Award/Spend XP, and the Award/Cancel/Spend/Cancel pairs in the forms below) never got this treatment — same transparent/gold look as .btn-add above, minus width:100%/display:block since these sit side by side rather than stacked full-width. */ .vtm-sheet .btn-small { background: transparent; border: 1px solid rgba(255, 221, 170, 0.4); border-radius: 0; color: var(--text-muted); transition: color 0.4s, border-color 0.4s; } .vtm-sheet .btn-small:hover { background: transparent; color: rgba(255, 190, 155, 0.5); border-color: var(--gold-200); } /* Add spacing above the Add button in Backgrounds section */ .sheet-section .btn-add { margin-top: 1rem; } /* ===== BLOOD POTENCY NEW LAYOUT ===== */ .blood-potency-new .bp-tracker-header { text-align: center; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .blood-potency-new .bp-tracker-header .dot-tracker { display: flex; justify-content: center; gap: 0.3rem; } .bp-two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.5rem; background: linear-gradient(145deg, var(--neuro-bg-1), var(--neuro-bg-2)); border-radius: var(--neuro-radius); box-shadow: 9px 9px 11px var(--neuro-shadow-dark), -5px -5px 6px var(--neuro-shadow-light), 0 0 4px var(--neuro-shadow-glow); } .bp-column-left, .bp-column-right { display: flex; flex-direction: column; gap: 0.5rem; } /* ===== PAGE BREAK DIVIDER ===== */ .page-break-divider { height: 3px; background: linear-gradient(to right, transparent, var(--vtm-red), transparent); margin: 2rem 0; } /* ===== 6-BOX PORTRAIT GRID (UPDATED SIZES) ===== */ .portrait-six-box .portrait-grid-fixed { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 300px auto; gap: 1rem; min-height: 600px; position: relative; } .portrait-box { background: linear-gradient(145deg, var(--neuro-bg-1), var(--neuro-bg-2)); border: none; border-radius: var(--neuro-radius); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; overflow: hidden; box-shadow: 9px 9px 11px var(--neuro-shadow-dark), -5px -5px 6px var(--neuro-shadow-light), 0 0 4px var(--neuro-shadow-glow); } .portrait-box::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: color-mix(in srgb, var(--crimson-blood) 10%, transparent); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .portrait-box:hover { box-shadow: 9px 9px 11px var(--neuro-shadow-dark), -5px -5px 6px var(--neuro-shadow-light), 0 0 40px color-mix(in srgb, var(--crimson-blood) 40%, transparent), inset 0 0 15px color-mix(in srgb, var(--crimson-blood) 15%, transparent); transform: scale(1.02); } .portrait-box:hover::after { opacity: 1; } .portrait-box:hover .portrait-placeholder, .portrait-box:hover .portrait-placeholder-small { color: var(--vtm-red-light); transform: scale(1.1); transition: all 0.3s ease; } /* Body: 200x300, left side, spans 1 row */ .portrait-body { grid-column: 1; grid-row: 1; width: 200px; height: 300px; } /* Hobby Stack: Right side, top row, fills remaining width */ .hobby-stack { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 0.75rem; height: 300px; } /* x-for wrapper divs: each takes an equal share of the stack height */ .hobby-stack > div { flex: 1; display: flex; flex-direction: column; min-height: 0; } /* Hobby boxes: fill their wrapper, width follows column */ .portrait-hobby { flex: 1; width: 100%; min-height: 0; } /* Face: 300x300, below body, spans both columns */ .portrait-face { grid-column: 1 / 3; grid-row: 2; width: 100%; height: 300px; } .portrait-placeholder, .portrait-placeholder-small { color: var(--text-gray); font-size: 1.2rem; text-align: center; user-select: none; -webkit-user-select: none; -moz-user-select: none; } .portrait-placeholder-small { font-size: 2rem; } /* Size hints for image placeholders */ .size-hint { font-size: 0.75rem; color: var(--text-gray); opacity: 0.7; display: block; margin-top: 0.25rem; } .size-hint-small { font-size: 0.6rem; color: var(--text-gray); opacity: 0.7; display: block; margin-top: 0.25rem; } .hobby-icon { font-size: 1.2rem; display: block; margin-bottom: 0.25rem; user-select: none; -webkit-user-select: none; -moz-user-select: none; } /* "Double tap to upload" — hidden until the box has been hovered a beat (mirrors .divider-tooltip's delayed-fade above, same reason: avoid flashing on every incidental pass). Wraps instead of nowrap so it still fits inside the small hobby-icon boxes. .portrait-box already has position:relative, so no extra positioning-context rule needed. */ .portrait-hint { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); max-width: calc(100% - 12px); text-align: center; background: var(--leather-800); border: 1px solid var(--border-color); border-radius: 3px; padding: 2px 6px; font-family: 'Special Elite', Courier, monospace; font-size: 8px; line-height: 1.3; color: var(--text-gray); letter-spacing: 0.5px; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; z-index: 4; } .portrait-box:hover .portrait-hint { opacity: 1; } /* Alias Overlay - positioned between body and face */ .portrait-grid-fixed .alias-overlay { position: absolute; top: 250px; /* Position near bottom of body image (300px - 50px overlap) */ left: 0; width: 100%; /* Match face width (spans full grid) */ z-index: 100; padding: 1.5rem 1rem; pointer-events: auto; background: transparent; } .vtm-sheet .alias-input { width: 100%; background: transparent !important; border: none !important; box-shadow: none !important; color: var(--gold-400); font-size: 3.25rem; font-weight: 900; text-align: center; letter-spacing: 3px; font-family: 'Lucida Handwriting', 'Brush Script MT', cursive; text-transform: none; opacity: 0.8; } .vtm-sheet .alias-input:focus { outline: none; color: var(--gold-300); background: transparent !important; border: none !important; box-shadow: none !important; } .vtm-sheet .alias-input::placeholder { color: color-mix(in srgb, var(--gold-400) 50%, transparent); font-weight: 700; } .identity-section, .skills-section { display: flex; flex-direction: column; } .identity-box { position: relative; /* Removed overflow: hidden to allow neumorphic shadow to show */ } .identity-content { position: relative; padding: 1.5rem; background: linear-gradient(145deg, var(--neuro-bg-1), var(--neuro-bg-2)); border-radius: var(--neuro-radius); box-shadow: 9px 9px 11px var(--neuro-shadow-dark), -5px -5px 6px var(--neuro-shadow-light), 0 0 4px var(--neuro-shadow-glow); overflow: hidden; /* Contain clan watermark within content box */ } .identity-box h2 { position: relative; z-index: 2; margin-bottom: 1rem; padding-bottom: 0.5rem; } .identity-box .form-group { margin-bottom: 1rem; position: relative; z-index: 2; } .identity-box .form-group-compact-horizontal { position: relative; z-index: 2; max-width: 100%; } .identity-box .form-group-compact-horizontal input, .identity-box .form-group-compact-horizontal select { min-width: 0; } .identity-box .form-group-compact-horizontal input { background: transparent; } /* background-color only (not the `background` shorthand) so the select's custom chevron background-image from .form-group-compact-horizontal select survives this override. */ .identity-box .form-group-compact-horizontal select { background-color: transparent; } .identity-box label { font-size: 0.9rem; } /* Chronicle Information: transparent text inputs to match identity box */ .chronicle-grid .form-group-compact-horizontal input, .chronicle-grid .grid-box .form-group-compact textarea { background: transparent; } /* background-color only — preserves the select's chevron background-image from .form-group-compact-horizontal select (see identity-box rule above). */ .chronicle-grid .form-group-compact-horizontal select { background-color: transparent; } /* Touchstones, Backgrounds/Merits/Flaws, Chronicle Tenets, and Experience: same transparent-input treatment as Chronicle Information above. input[type="text"] (not plain `input`) to match .form-group's own selector specificity (0,2,1) with one extra scoping class so this wins regardless of source order — a plain `input` here ties with .form-group input[type="text"] and silently loses to whichever is later in the file. */ .touchstone-entry .form-group input[type="text"], .touchstone-entry .form-group textarea, .background-entry .background-type-row input[type="text"], .background-entry .form-group textarea, .chronicle-tenets-numbered .tenet-row textarea, .xp-section .xp-input, .discipline-entry .power-input { background: transparent; } /* background-color only — preserves the select's chevron background-image from .background-category-dropdown/.discipline-select. */ .background-entry .background-category-dropdown select, .discipline-entry .discipline-select { background-color: transparent; } /* Chronicle Information: grid-box is the positioning context for faction watermark */ .chronicle-grid .grid-box { position: relative; overflow: hidden; } /* Form rows sit above the watermark */ .chronicle-grid .form-group-compact-horizontal, .chronicle-grid .form-group-compact { position: relative; z-index: 2; } /* Faction symbol watermark — mirrors clan watermark pattern */ .faction-symbol-overlay { position: absolute; top: 50%; left: calc(50% + 30px); transform: translate(-50%, -50%); z-index: 1; pointer-events: none; } .faction-symbol-image { width: 527px; height: 527px; object-fit: contain; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--crimson-blood) 30%, transparent)); opacity: 0.12; } /* Clan Symbol Watermark in Identity Box */ .clan-symbol-overlay-identity { position: absolute; top: -110px; left: calc(50% + 30px); transform: translateX(-50%); z-index: 1; pointer-events: none; } .clan-symbol-image-identity { width: 527px; height: 527px; object-fit: contain; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--crimson-blood) 30%, transparent)); opacity: 0.12; } /* Discipline symbol watermark — per-entry, mirrors the clan/faction watermark pattern (large, low-opacity, absolutely positioned behind the card's content) rather than the old icon-chip row above the list, which read the discipline's name from the same select the card already shows. Sized to the entry card, not the 527px used for the much bigger Chronicle Info/Identity boxes. */ .discipline-symbol-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; pointer-events: none; } /* Discipline art (unlike the clan/faction PNGs) ships as plain black glyphs, so it's recolored to the same crimson-blood red via mask-image instead of relying on the source art's own color like clan/faction do. */ .discipline-symbol-image { width: 160px; height: 160px; background-color: var(--crimson-blood); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--crimson-blood) 30%, transparent)); opacity: 0.12; } /* ===== CLAN SYMBOL OVERLAY ===== */ .clan-symbol-overlay { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); z-index: 10; pointer-events: none; } .clan-symbol-image { width: 200px; height: 200px; object-fit: contain; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--crimson-blood) 50%, transparent)); opacity: 0.9; } /* ===== SKILLS CLEAN LIST (NO HEADERS) ===== */ .skills-clean-list { /* Parent container - no neumorphism */ } .skills-content { padding: 1rem; background: linear-gradient(145deg, var(--neuro-bg-1), var(--neuro-bg-2)); border-radius: var(--neuro-radius); box-shadow: 9px 9px 11px var(--neuro-shadow-dark), -5px -5px 6px var(--neuro-shadow-light), 0 0 4px var(--neuro-shadow-glow); } .skill-row-clean { display: flex; flex-direction: column; padding: 0.4rem 0; border-bottom: 1px solid var(--border-color); } .skill-row-clean:last-child { border-bottom: none; } .skill-row-clean > div:first-child { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; min-height: 24px; } .skill-spacer { height: 1rem; } /* ===== CHRONICLE TENETS - NUMBERED INPUTS ===== */ .chronicle-tenets-numbered { /* Parent container - no neumorphism */ } .tenets-content { padding: 1.5rem; background: linear-gradient(145deg, var(--neuro-bg-1), var(--neuro-bg-2)); border-radius: var(--neuro-radius); box-shadow: 9px 9px 11px var(--neuro-shadow-dark), -5px -5px 6px var(--neuro-shadow-light), 0 0 4px var(--neuro-shadow-glow); } .tenet-row { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; } .tenet-numeral { font-size: 1.2rem; font-weight: bold; color: var(--vtm-red-light); min-width: 30px; text-align: right; padding-top: 0.5rem; } .tenet-row textarea { flex: 1; min-width: 0; padding: 0.5rem; background-color: var(--bg-dark); background-image: none; border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-white); font-family: inherit; font-size: 1rem; line-height: 1.2; resize: none; overflow: hidden; } /* ===== HISTORY/NOTES TEXTAREAS ===== */ .sheet-grid-two-column .column-one textarea { width: 100%; padding: 0.75rem; background: linear-gradient(145deg, var(--neuro-bg-1), var(--neuro-bg-2)); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-white); font-family: inherit; font-size: 0.9rem; resize: vertical; min-height: 150px; } .sheet-grid-two-column .column-one textarea::placeholder { color: var(--text-gray); opacity: 0.6; } /* ===== RESPONSIVE ADJUSTMENTS ===== */ @media (max-width: 1400px) { .sheet-grid-three-column { grid-template-columns: 1fr 1fr; } .column-three { grid-column: 1 / 3; } } @media (max-width: 1200px) { .sheet-grid-three-column { grid-template-columns: 1fr; } .column-three { grid-column: 1; } .sheet-grid-two-column { grid-template-columns: 1fr; } .sheet-grid-two-column .column-divider { display: none; } .portrait-grid-fixed { grid-template-columns: 1fr; } .portrait-body { grid-row: auto; grid-column: 1; min-height: 400px; } .portrait-grid-fixed .alias-overlay { position: static; width: 100%; margin: -2rem 0 1rem 0; } .hobby-stack { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; } .portrait-face { grid-column: 1; grid-row: auto; } .bp-two-column { grid-template-columns: 1fr; } .attributes-three-column { grid-template-columns: 1fr; } } @media (max-width: 768px) { .character-title { font-size: 1.8rem; } /* Hide column dividers on mobile (not touch-friendly) */ .column-divider { display: none; } /* Adjust grid to remove divider spacing */ .sheet-grid-three-column { grid-template-columns: 1fr !important; gap: 1.5rem; } /* Fix chronicle info horizontal labels on small screens */ .form-group-compact-horizontal { flex-direction: column; align-items: stretch; gap: 0.25rem; } .form-group-compact-horizontal label { font-size: 0.85rem; } /* Improve skills section dot wrapping */ .skill-row-clean > div { flex-wrap: wrap; } .skill-right { margin-top: 0.5rem; width: 100%; } /* Make hobby boxes larger on mobile */ .portrait-hobby { min-height: 120px; } /* Adjust alias font size for mobile */ .alias-input { font-size: 2.35rem; letter-spacing: 2px; } /* Adjust clan symbol size for mobile */ .clan-symbol-image-identity { width: 80px; height: 80px; opacity: 0.08; } } /* ===== EMPTY STATE PLACEHOLDERS ===== */ .empty-state { text-align: center; padding: 2rem; color: var(--text-gray); font-style: italic; background-color: var(--bg-dark); border-radius: 4px; border: 2px dashed var(--border-color); margin: 1rem 0; } .empty-state-icon { font-size: 3rem; display: block; margin-bottom: 0.5rem; opacity: 0.5; } .empty-state-text { font-size: 1rem; margin-bottom: 0.5rem; } .empty-state-hint { font-size: 0.85rem; opacity: 0.7; } .back-link { display: flex; align-items: center; gap: 1.5rem; padding: 0.75rem 1rem; font-size: 0.85rem; } .back-link a { color: var(--text-muted); text-decoration: none; } .back-link a:hover { color: var(--text-white); } .back-link-top { padding: 0.5rem 1rem 0; } /* #fossil 2026-07-19: orphaned — zero references. Duplicated at sheet-layout.css:487, also orphaned. */ .sheet-watermark { margin-left: auto; color: var(--text-muted); font-size: 0.75rem; opacity: 0.5; } /* ===== PRINT STYLES ===== */ @media print { .page-break-divider { page-break-before: always; height: 0; background: none; } .clan-symbol-overlay { opacity: 0.3; } } /* ===== FIXED SAVE INDICATOR (FLOATING UPPER RIGHT) ===== */ /* Fixed-position save indicator in upper right corner */ .save-indicator { position: fixed !important; top: 20px; right: 20px; z-index: 6500; /* persistent status toast tier — see z-index scale doc in sheet-layout.css */ background-color: rgba(26, 26, 26, 0.95); padding: 0.75rem 1.5rem; border-radius: 4px; border: 1px solid var(--border-color); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); font-size: 0.9rem; pointer-events: none; animation: slideIn 0.3s ease-out; margin: 0 !important; } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .save-indicator .saved { color: var(--success); } .save-indicator .error { color: var(--danger); } /* ===== INTERACTIVE ===== */ /* VTM Interactive Character Sheet */ /* ===== LOADING OVERLAY ===== */ .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); display: flex; align-items: center; justify-content: center; z-index: 9000; /* full-page block tier — see z-index scale doc in sheet-layout.css */ } .loading-spinner { text-align: center; color: var(--text-white); } .spinner { border: 4px solid var(--border-color); border-top: 4px solid var(--vtm-red); border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; margin: 0 auto 1rem; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading-spinner p { font-size: 1.2rem; color: var(--text-gray); } /* ===== GRID LAYOUT ===== */ .sheet-grid { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 2rem; margin-top: 2rem; } /* ===== SHEET SECTIONS ===== */ .sheet-section { background: linear-gradient(145deg, var(--neuro-bg-1), var(--neuro-bg-2)); padding: 1.5rem; border-radius: var(--neuro-radius); border: none; box-shadow: 9px 9px 11px var(--neuro-shadow-dark), -5px -5px 6px var(--neuro-shadow-light), 0 0 4px var(--neuro-shadow-glow); } /* VTM sheet: all sections flat by default */ .vtm-sheet .sheet-section { background: transparent; box-shadow: none; padding: 0.5rem 0; border-radius: 0; } /* Reduce heading margin for textarea sections */ .vtm-sheet .sheet-section:has(> textarea) h2 { margin-bottom: 0.5rem; } .sheet-section h2 { color: rgba(255, 190, 155, 0.5); font-size: 1.3rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .sheet-section h3 { color: var(--text-gray); font-size: 1.1rem; margin-bottom: 0.5rem; } /* ===== SAVE INDICATOR ===== */ .save-indicator { font-size: 0.9rem; padding: 0.5rem 1rem; border-radius: 4px; transition: all 0.3s ease; } .save-indicator span { display: inline-block; transition: all 0.3s ease; } .save-indicator .saved { color: var(--success); animation: fadeInPulse 0.5s ease; } .save-indicator .error { color: var(--danger); animation: shake 0.5s ease; } @keyframes fadeInPulse { 0% { opacity: 0; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } /* ===== FORM ELEMENTS ===== */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; margin-bottom: 0.5rem; color: var(--text-gray); font-size: 0.9rem; font-weight: bold; } .form-group input[type="text"], .form-group input[type="number"], .form-group select, .form-group textarea { width: 100%; box-sizing: border-box; padding: 0.5rem; background-color: var(--bg-dark); background-image: none; border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-white); font-family: inherit; font-size: 0.95rem; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--vtm-red); } .form-group textarea { resize: vertical; min-height: 60px; } /* ===== DOT TRACKERS ===== */ .attribute-row, .skill-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--border-color); } .attribute-row:last-child, .skill-row:last-child { border-bottom: none; } .attribute-name, .skill-name { font-size: 1rem; color: var(--text-gray); font-weight: bold; font-style: italic; min-width: 120px; } .dot-tracker { display: flex; gap: 4px; align-items: center; cursor: pointer; user-select: none; } .dot { display: inline-block; width: 12px; height: 12px; min-width: 12px; border-radius: 50%; font-size: 0; /* hide ● glyph */ color: transparent; text-shadow: none; vertical-align: middle; transition: background-color 0.2s ease; cursor: pointer; } .dot.filled, .vtm-sheet .dot-tracker span.filled { background: var(--vtm-red); box-shadow: none; } .vtm-sheet .dot-tracker span.filled { border: none; box-shadow: none; } .vtm-sheet .dot-tracker span::after { display: none; } .dot.empty { background-color: transparent; border: 1.5px solid rgba(255, 221, 170, 0.4); } .dot.filled:hover { background-color: var(--vtm-red-light); } .dot.empty:hover { background-color: transparent; border-color: rgba(255, 221, 170, 0.7); } .dot:hover { transform: scale(1.2); } .dot:active { transform: scale(0.95); animation: dotPulse 0.3s ease; } @keyframes dotPulse { 0% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.3); filter: brightness(1.5); } 100% { transform: scale(0.95); filter: brightness(1); } } /* ===== TOUCHSTONES ===== */ .touchstone-entry { background: linear-gradient(145deg, var(--neuro-bg-1), var(--neuro-bg-2)); padding: 1rem; margin-bottom: 1rem; border-radius: var(--neuro-radius); transition: all 0.3s ease; animation: slideIn 0.3s ease; box-shadow: 7px 7px 9px var(--neuro-shadow-dark), -4px -4px 5px var(--neuro-shadow-light), 0 0 4px var(--neuro-shadow-glow); } .touchstone-entry:hover { transform: translateX(3px); box-shadow: 7px 7px 9px var(--neuro-shadow-dark), -4px -4px 5px var(--neuro-shadow-light), 0 0 35px color-mix(in srgb, var(--crimson-blood) 30%, transparent), inset 0 0 20px color-mix(in srgb, var(--crimson-blood) 10%, transparent); } .touchstone-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; } .touchstone-header strong { color: var(--vtm-red-light); font-style: italic; } /* Description/Conviction grow to fit their content via autoGrow() in the Alpine component (see .background-entry's identical rule), so a manual resize handle and scrollbar would just fight the auto-sized height. */ .touchstone-entry .form-group textarea { resize: none; overflow: hidden; } /* Style touchstone remove button to match background boxes */ .touchstone-entry .btn-remove-small { background: none; border: none; color: var(--parchment-500); padding: 0; font-size: 1.2rem; line-height: 1; transition: color 0.2s; } .touchstone-entry .btn-remove-small:hover { color: var(--text-muted); } /* ===== BACKGROUND ENTRIES ===== */ .background-entry { background: linear-gradient(145deg, var(--neuro-bg-1), var(--neuro-bg-2)); padding: 0.75rem; margin-bottom: 0.75rem; border-radius: var(--neuro-radius); transition: all 0.3s ease; animation: slideIn 0.3s ease; box-shadow: 7px 7px 9px var(--neuro-shadow-dark), -4px -4px 5px var(--neuro-shadow-light), 0 0 4px var(--neuro-shadow-glow); } .background-entry:hover { transform: translateX(3px); box-shadow: 7px 7px 9px var(--neuro-shadow-dark), -4px -4px 5px var(--neuro-shadow-light), 0 0 35px color-mix(in srgb, var(--crimson-blood) 25%, transparent), inset 0 0 15px color-mix(in srgb, var(--crimson-blood) 8%, transparent); } @keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* ===== BUTTONS ===== */ .btn-add, .btn-remove-small, .btn-small { padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9rem; transition: all 0.3s; } .btn-add { background-color: var(--vtm-red-dark); color: white; width: 100%; } .btn-add:hover { background-color: var(--vtm-red); } .btn-remove-small { background-color: var(--danger); color: white; padding: 0.25rem 0.5rem; font-size: 1rem; line-height: 1; } .btn-small { background-color: var(--bg-dark); color: var(--text-white); border: 1px solid var(--border-color); } .btn-small:hover { background-color: var(--bg-card); } .portrait-placeholder { color: var(--text-gray); font-size: 1.2rem; } /* ===== TRACKERS SECTION ===== */ .trackers-section { background-color: var(--bg-black); } .tracker-row { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--border-color); } .tracker-row:last-child { border-bottom: none; } .tracker-row label { font-weight: bold; color: var(--text-white); min-width: 100px; } .box-tracker { display: flex; gap: 0.3rem; } .placeholder { color: var(--text-gray); font-style: italic; font-size: 0.9rem; } /* ===== CLAN DISCIPLINES ===== */ .clan-disciplines { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color); } .clan-disciplines label { display: block; margin-bottom: 0.5rem; color: var(--text-gray); font-size: 0.9rem; font-weight: bold; } .discipline-icons { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; } /* ===== EXPERIENCE SECTION ===== */ .xp-section { text-align: center; position: relative; } /* Create neumorphic background for XP content */ .xp-section::after { content: ''; position: absolute; top: calc(1em + 2.5rem); /* Position below h2 */ left: 0; right: 0; bottom: 0; background: linear-gradient(145deg, var(--neuro-bg-1), var(--neuro-bg-2)); border-radius: var(--neuro-radius); box-shadow: 9px 9px 11px var(--neuro-shadow-dark), -5px -5px 6px var(--neuro-shadow-light), 0 0 4px var(--neuro-shadow-glow); z-index: -1; pointer-events: none; } .xp-section .xp-display, .xp-section .xp-buttons { position: relative; z-index: 1; padding: 0 1.5rem; } .xp-section .xp-display { padding-top: 1.5rem; } .xp-section .xp-buttons { padding-bottom: 1.5rem; } .xp-display { font-size: 2rem; font-weight: bold; margin: 1rem 0; color: var(--vtm-red-light); } .xp-value { color: var(--success); } .xp-separator { margin: 0 0.5rem; } .xp-total { color: var(--text-gray); } .xp-caption { font-style: italic; } .xp-buttons { display: flex; gap: 0.5rem; justify-content: center; } /* Award/Spend XP forms — same neumorphic panel as the sheet's other interior boxes (was a hardcoded #1a0808/#3a2020 box, off the token system entirely). */ .xp-form-panel { margin-top: 8px; padding: 0.75rem; background: linear-gradient(145deg, var(--neuro-bg-1), var(--neuro-bg-2)); border-radius: var(--neuro-radius); box-shadow: 7px 7px 9px var(--neuro-shadow-dark), -4px -4px 5px var(--neuro-shadow-light), 0 0 4px var(--neuro-shadow-glow); } /* ===== SKILLS SECTION ===== */ .skills-section .skill-category { margin-bottom: 1.5rem; } .skills-section .skill-category h3 { color: var(--vtm-red-light); font-size: 1rem; text-transform: uppercase; margin-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.3rem; } .skill-row { display: flex; flex-direction: column; padding: 0.5rem 0; border-bottom: 1px solid var(--border-color); } .skill-row:last-child { border-bottom: none; } .skill-row > div:first-child { display: flex; justify-content: space-between; align-items: center; } .skill-right { display: flex; gap: 0.5rem; align-items: center; position: relative; } /* Tighter dot spacing than the sitewide .dot-tracker default — frees up horizontal room for specialty tags without touching the other dot trackers (Health/Willpower/Humanity/Blood Potency/Disciplines) that still use the base gap. */ .skill-right .dot-tracker { gap: 1px; } /* FIXED: Specialty button doesn't shift dots */ .btn-add-specialty { background-color: transparent; color: rgba(255, 221, 170, 0.4); border: none; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; font-size: 0.9rem; line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .btn-add-specialty:hover { background-color: transparent; color: rgba(255, 221, 170, 0.8); } /* Specialty tags + inline "add" input (.specialty-inline-input / .specialty-input-field are the shared HTR/WTA classes from main.css). A full-width row below the skill name + dot tracker, not squeezed into the gap between them — that made the name truncate and forced each tag onto its own line, since the tags never had more than a thin sliver to wrap inside. Full width gives multiple tags room to share a line, and the name/dots line above never has to compete with tags for space at all. */ .specialties-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; width: 100%; margin-top: 0.3rem; } .specialties-inline .specialty-inline-input { margin-top: 0; display: inline-flex; } .specialties-inline .specialty-input-field { max-width: 100px; } /* Badge (§Badge — .hbadge recipe applied in place; see journal-theme.css) */ .specialty-tag { background-color: var(--bg-dark); /* Same gold as .btn-add's resting border (no glow anywhere on this tag — box-shadow/filter/text-shadow are all none — var(--gold-400) at full opacity just reads brighter than the button's dimmed one). */ border: 1px solid rgba(255, 221, 170, 0.4); clip-path: polygon(3px 0%, calc(100% - 3px) 0%, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0% calc(100% - 3px), 0% 3px); border-radius: 0; padding: 2px 6px; font-family: 'Special Elite', 'Courier New', monospace; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; display: inline-flex; gap: 3px; align-items: center; color: var(--gold-400); /* Never bleed past the specialties-inline row's width — wrap the tag's own text instead. Only matters on a heavily narrow (resized) column with a long specialty name. */ max-width: 100%; box-sizing: border-box; } /* sheet-layout.css (loaded sitewide via base.html) has its own, separate .specialty-tag::before/::after rule that stamps a flanking ◆ glyph on either side of the text — same class name, different file, so it isn't overridden by anything above (there was nothing here for it to lose a cascade fight against; the properties just went undeclared). Explicit `content: none` cancels it out for the VTM sheet specifically. */ .specialty-tag::before, .specialty-tag::after { content: none; } .specialty-tag > span:first-child { overflow-wrap: break-word; word-break: break-word; min-width: 0; } .specialty-tag button { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; } /* ===== HEALTH/WILLPOWER/HUMANITY TRACKERS - SMALLER DIAMONDS ===== */ .health-box, .willpower-box, .humanity-box { width: 18px; height: 18px; border: none; background-color: var(--parchment-700); border-radius: 3px; transform: rotate(45deg); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.9rem; font-weight: bold; transition: all 0.2s; user-select: none; } .health-box > span, .willpower-box > span { transform: rotate(-45deg); } .health-box:hover, .willpower-box:hover, .humanity-box:hover { transform: rotate(45deg) scale(1.15); } .health-box.small:hover, .willpower-box.small:hover, .humanity-box.small:hover { transform: scale(1.2); } .health-box.empty, .humanity-box.empty { background-color: color-mix(in srgb, var(--gold-200) 20%, transparent); border: none; } .willpower-box.empty { background-color: color-mix(in srgb, var(--gold-200) 20%, transparent); border: none; } .health-box.filled, .willpower-box.filled, .humanity-box.filled { background-color: var(--vtm-red); } .health-box.superficial, .willpower-box.superficial { background-color: var(--superficial); color: var(--ink-900); } .health-box.aggravated, .willpower-box.aggravated { background-color: var(--ink-900); color: var(--vtm-red); } .humanity-box.stained { background-color: var(--ink-900); } /* ===== HUNGER TRACKER ===== */ .hunger-dot.danger { color: var(--alarm) !important; text-shadow: 0 0 8px var(--alarm); } .bp-value-row { display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 0; border-bottom: 1px solid var(--border-color); } .bp-value-row:last-child { border-bottom: none; } .bp-label { color: var(--text-gray); font-size: 0.9rem; font-style: italic; } .bp-number, .bp-text { color: var(--vtm-red-light); font-weight: bold; } /* ===== DISCIPLINES SECTION ===== */ .discipline-entry { position: relative; overflow: hidden; background: linear-gradient(145deg, var(--neuro-bg-1), var(--neuro-bg-2)); padding: 1rem; margin-bottom: 1rem; border-radius: var(--neuro-radius); border-left: 3px solid var(--vtm-red); box-shadow: 7px 7px 9px var(--neuro-shadow-dark), -4px -4px 5px var(--neuro-shadow-light), 0 0 4px var(--neuro-shadow-glow); transition: all 0.3s ease; } /* Content sits above the watermark */ .discipline-entry .discipline-header, .discipline-entry .discipline-powers { position: relative; z-index: 2; } .discipline-entry:hover { box-shadow: 7px 7px 9px var(--neuro-shadow-dark), -4px -4px 5px var(--neuro-shadow-light), 0 0 35px color-mix(in srgb, var(--crimson-blood) 30%, transparent), inset 0 0 20px color-mix(in srgb, var(--crimson-blood) 10%, transparent); } .discipline-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; gap: 1rem; } .discipline-select { flex: 1; padding: 0.5rem; background-color: var(--bg-card); background-image: none; border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-white); font-size: 0.95rem; } .discipline-select:disabled { opacity: 0.7; cursor: not-allowed; } .discipline-dots { display: flex; gap: 0.3rem; } .btn-remove-discipline { background: none; border: none; color: var(--parchment-500); cursor: pointer; font-size: 1.2rem; padding: 0; line-height: 1; transition: color 0.2s; flex-shrink: 0; } .btn-remove-discipline:hover { color: var(--text-muted); } .discipline-powers { margin-top: 0.75rem; } /* "Powers +" — the add button sits right next to the heading rather than pushed to the far edge via space-between. */ .powers-header { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; } .discipline-powers label { color: var(--text-gray); font-size: 0.85rem; font-weight: bold; margin: 0; } .power-entry { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .power-bullet { color: var(--vtm-red); font-size: 1.2rem; line-height: 1; flex-shrink: 0; } .power-input { flex: 1; padding: 0.5rem; background-color: var(--bg-dark); background-image: none; border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-white); font-family: inherit; font-size: 0.9rem; } .power-input:focus { outline: none; border-color: var(--vtm-red); box-shadow: 0 0 0 2px color-mix(in srgb, var(--crimson-blood) 20%, transparent); } .btn-remove-power { background: none; border: none; color: var(--parchment-500); cursor: pointer; font-size: 1.2rem; padding: 0; line-height: 1; transition: color 0.2s; flex-shrink: 0; } .btn-remove-power:hover { color: var(--text-muted); } /* Same minimal circular treatment as .btn-add-specialty — no more tinted box, just a small "+" sitting next to the heading. */ .btn-add-power-inline { background-color: transparent; color: rgba(255, 221, 170, 0.4); border: none; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: 0.85rem; line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: color 0.2s; } .btn-add-power-inline:hover { background-color: transparent; color: rgba(255, 221, 170, 0.8); } /* ===== XP LOG ===== */ .xp-log { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border-color); } .xp-log h3 { font-size: 1rem; color: var(--text-gray); margin-bottom: 0.75rem; } /* Same neumorphic panel as Skills/Chronicle Tenets' list containers — this list previously sat directly on the page background with no box at all, unlike every other repeated-entry list on the sheet. */ .xp-log-entries { max-height: 300px; overflow-y: auto; padding: 0.75rem; background: linear-gradient(145deg, var(--neuro-bg-1), var(--neuro-bg-2)); border-radius: var(--neuro-radius); box-shadow: 9px 9px 11px var(--neuro-shadow-dark), -5px -5px 6px var(--neuro-shadow-light), 0 0 4px var(--neuro-shadow-glow); } .xp-log-entry { display: grid; grid-template-columns: auto auto 1fr; gap: 0.75rem; padding: 0.5rem; border-bottom: 1px solid var(--border-color); font-size: 0.9rem; } .xp-log-entry:last-child { border-bottom: none; } .xp-log-entry.add .xp-amount { color: var(--success); } .xp-log-entry.spend .xp-amount { color: var(--danger); } .xp-date { color: var(--text-gray); font-size: 0.85rem; } .xp-amount { font-weight: bold; } .xp-reason { color: var(--text-white); } /* ===== RESPONSIVE DESIGN ===== */ /* Tablet */ @media (max-width: 1200px) { .sheet-grid { grid-template-columns: 1fr 1fr; } } /* Mobile */ @media (max-width: 768px) { .sheet-grid { grid-template-columns: 1fr; } } /* ===== PRINT STYLES ===== */ @media print { .sheet-header .save-indicator, .btn-add, .btn-remove-small, .btn-small, .btn-secondary, .back-link { display: none !important; } body { background: white; color: black; } .sheet-section { background: white; border: 1px solid #333; } .dot.filled { color: black; } .dot.empty { color: #ccc; } } /* ===== OVERRIDES ===== */ .sheet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid var(--vtm-red); } .sheet-header h1 { color: var(--vtm-red-light); } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; margin-bottom: 0.5rem; color: var(--text-gray); font-weight: bold; } .form-group input[type="text"], .form-group input[type="number"], .form-group select, .form-group textarea { width: 100%; box-sizing: border-box; padding: 0.75rem; background-color: var(--bg-dark); background-image: none; border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-white); font-family: inherit; font-size: 1rem; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--vtm-red); } .form-group textarea { min-height: 100px; resize: vertical; } /* ===== VTM SHEET — SCOPED LAYOUT & MISC RULES ===== */ /* Sheet border matching page-break-divider color */ .vtm-sheet { border: 2px solid var(--vtm-red); border-radius: 6px; padding: 1rem; } /* Above-the-fold grid aligns columns to top */ .sheet-grid-above { align-items: start; } .vtm-sheet .column-divider { align-self: stretch; } /* Discipline select option background */ .discipline-select option { background: var(--vtm-900); } .discipline-select { min-width: 0; } .discipline-dots { flex-shrink: 0; } /* Prevent dots overflowing skill/discipline rows on column resize. skill-name no longer flexes to fill the row — .specialties-inline does that now, so tags have room to sit between the name and the dots. */ .vtm-sheet .skill-row-clean > div:first-child { min-width: 0; } .vtm-sheet .skill-name { flex: 0 1 auto; max-width: 45%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vtm-sheet .skill-right { flex-shrink: 0; } /* Mobile: the row is genuinely stuck at flex-wrap:nowrap — the "Improve skills section dot wrapping" rule further up (.skill-row-clean > div { flex-wrap: wrap }) never actually applied, since it loses to .skill-row-clean > div:first-child's own flex-wrap:nowrap above (the :first-child pseudo-class outranks plain descendant .skill-row-clean > div regardless of media query or source order). That's fine — keep the dot tracker inline with the label, same as desktop. What broke it was .skill-right's width:100% (further up, same breakpoint): with flex-shrink:0 it demanded the full line for itself, crushing skill-name — the only shrinkable sibling — to 0 width. Drop back to auto width so skill-right sizes to its own content and justify-content:space-between right-aligns it next to the (ellipsis-truncating) label. */ @media (max-width: 768px) { .skill-right { width: auto; margin-top: 0; } } /* Mobile: Character Portraits' single-column collapse never actually applied — .portrait-grid-fixed (1 class) tried to override grid-template-columns to 1fr, but loses to the desktop rule .portrait-six-box .portrait-grid-fixed (2 classes), which stays at "200px 1fr" regardless of media query or source order. Every portrait box and the alias overlay then got auto-placed against that still-live 200px column, cramming Body/hobby icons/Face into one narrow strip while the alias overlay (never assigned a column of its own) landed in the empty second column beside them — "mashed up" boxes and a "floating, misplaced" alias. Match the winning selector's specificity so the collapse actually lands, and give the alias its own full-width row in normal flow instead of the desktop absolute-overlay/negative- margin trick, which has no room to work with on a narrow screen. */ @media (max-width: 768px) { .portrait-six-box .portrait-grid-fixed { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; } .portrait-body { grid-column: 1; grid-row: auto; width: 100%; height: auto; min-height: 350px; } .hobby-stack { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; height: auto; } .hobby-stack > div { flex: 1 1 45%; } .portrait-face { grid-column: 1; grid-row: auto; width: 100%; height: 300px; } .portrait-grid-fixed .alias-overlay { position: static; grid-column: 1; grid-row: auto; width: 100%; margin: 0.5rem 0; padding: 0.5rem 1rem; } }