/* css/rky-content.css * * Shared polish for the CONTENT inside every tool: one type scale, * readable labels, consistent form fields, tables, badges, buttons and * empty states. Styling only — no tool's code or behaviour changes. * * Each tool's carries data-rky-tool="", so every rule * here is scoped to the tool it was written for (and wins over the tool's * own older styles without !important). * * Type scale used throughout: * section title 16px / 650, full ink, sentence case * label 12.5px / 500, secondary ink, sentence case * table header 12px / 500, tertiary ink, sentence case * small print never below 12px */ /* ===================================================================== 1. Section titles — tiny grey CAPITALS become calm sentence-case titles ===================================================================== */ [data-rky-tool="subscriptions"] main h2, [data-rky-tool="sliceacc"] main h2, [data-rky-tool="asset-position"] main h2, [data-rky-tool="equity-details"] h3.sh{ text-transform:none; letter-spacing:-.01em; font-size:16px; font-weight:650; line-height:1.3; color:var(--rky-ink); margin-top:30px; margin-bottom:12px; } [data-rky-tool="subscriptions"] main h2:first-of-type{margin-top:6px} /* the small note beside a title */ [data-rky-tool="subscriptions"] h2 .h2sub, [data-rky-tool="sliceacc"] h2 .tag, [data-rky-tool="asset-position"] h2 .tag{ font-size:12.5px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--rky-ink-3); } /* ===================================================================== 2. Labels on summary cards and form fields ===================================================================== */ [data-rky-tool="subscriptions"] .card .lbl, [data-rky-tool="jewellery"] .card .lbl, [data-rky-tool="sliceacc"] .card .lab, [data-rky-tool="asset-position"] .card .lab, [data-rky-tool="equity-details"] .card .k, [data-rky-tool="investment-tracker"] .hero .k{ text-transform:none; letter-spacing:0; font-size:12.5px; font-weight:500; color:var(--rky-ink-2); } [data-rky-tool="subscriptions"] .field label, [data-rky-tool="equity-details"] .fld label, [data-rky-tool="sliceacc"] .fld label, [data-rky-tool="asset-position"] .fld label{ text-transform:none; letter-spacing:0; font-size:12.5px; font-weight:550; color:var(--rky-ink-2); } /* small print: nothing below 12px */ [data-rky-tool="subscriptions"] .card .sub, [data-rky-tool="subscriptions"] .submeta, [data-rky-tool="subscriptions"] .subamt .meq, [data-rky-tool="sliceacc"] .card .sub, [data-rky-tool="asset-position"] .card .sub, [data-rky-tool="jewellery"] .card .sub{ font-size:12.5px; line-height:1.45; } /* repeating/category words were shouted in capitals */ [data-rky-tool="subscriptions"] .cyc, [data-rky-tool="subscriptions"] .uprow .upcyc, [data-rky-tool="subscriptions"] .caldetail .cdcyc{ text-transform:capitalize; letter-spacing:0; font-size:12px; font-weight:500; } [data-rky-tool="subscriptions"] .rcell .rmonth, [data-rky-tool="subscriptions"] .caldetail .cdhead{ text-transform:none; letter-spacing:0; font-size:12px; font-weight:600; } [data-rky-tool="subscriptions"] .rcell .rcount{font-size:11px} /* ===================================================================== 3. Tables — quiet headers, comfortable rows ===================================================================== */ [data-rky-tool] th{ text-transform:none; letter-spacing:0; font-size:12px; font-weight:500; color:var(--rky-ink-3); } [data-rky-tool="jewellery"] th, [data-rky-tool="jewellery"] td, [data-rky-tool="investment-tracker"] tbody td, [data-rky-tool="equity-details"] tbody td{ padding-top:11px; padding-bottom:11px; } [data-rky-tool="investment-tracker"] thead th, [data-rky-tool="investment-tracker"] tbody td, [data-rky-tool="investment-tracker"] tfoot td{font-size:13px} /* ===================================================================== 4. Form fields — one look, a clear focus ring ===================================================================== */ [data-rky-tool="subscriptions"] .field input, [data-rky-tool="subscriptions"] .field select, [data-rky-tool="subscriptions"] .toolbar select, [data-rky-tool="equity-details"] .fld input, [data-rky-tool="equity-details"] .fld select, [data-rky-tool="equity-details"] .fld textarea, [data-rky-tool="sliceacc"] .fld input, [data-rky-tool="sliceacc"] .fld select, [data-rky-tool="asset-position"] .fld input, [data-rky-tool="asset-position"] .fld select{ border:1px solid var(--rky-border-strong); border-radius:10px; background-color:var(--rky-surface-2); color:var(--rky-ink); min-height:42px; transition:border-color .15s ease, box-shadow .15s ease; } [data-rky-tool="subscriptions"] .field input:focus, [data-rky-tool="subscriptions"] .field select:focus, [data-rky-tool="subscriptions"] .toolbar select:focus, [data-rky-tool="equity-details"] .fld input:focus, [data-rky-tool="equity-details"] .fld select:focus, [data-rky-tool="equity-details"] .fld textarea:focus, [data-rky-tool="sliceacc"] .fld input:focus, [data-rky-tool="sliceacc"] .fld select:focus, [data-rky-tool="asset-position"] .fld input:focus, [data-rky-tool="asset-position"] .fld select:focus, [data-rky-tool="jewellery"] input:focus, [data-rky-tool="jewellery"] select:focus{ outline:none; border-color:var(--rky-accent); box-shadow:0 0 0 3px var(--rky-accent-soft); } /* ===================================================================== 5. Buttons and badges — consistent shape and weight ===================================================================== */ [data-rky-tool="subscriptions"] .btn, [data-rky-tool="subscriptions"] .iconbtn, [data-rky-tool="subscriptions"] .addbtn, [data-rky-tool="jewellery"] .btn, [data-rky-tool="equity-details"] .btn, [data-rky-tool="sliceacc"] .btn:not(.dn), [data-rky-tool="asset-position"] .btn:not(.dn){ border-radius:9px; font-weight:600; letter-spacing:0; } [data-rky-tool="subscriptions"] .iconbtn{ min-height:32px; padding:6px 12px; font-size:12.5px; background:transparent; border-color:var(--rky-border); } [data-rky-tool="subscriptions"] .iconbtn.danger{color:var(--rky-neg)} [data-rky-tool="subscriptions"] .tag, [data-rky-tool="asset-position"] .chip, [data-rky-tool="sliceacc"] .chip{ font-size:11.5px; font-weight:600; letter-spacing:0; padding:2px 9px; } /* ===================================================================== 6. Empty states — an icon above the message, not just grey text ===================================================================== */ [data-rky-tool="subscriptions"] .empty, [data-rky-tool="equity-details"] .empty, [data-rky-tool="investment-tracker"] .empty{ font-size:13.5px; line-height:1.5; color:var(--rky-ink-2); } [data-rky-tool="subscriptions"] .empty::before, [data-rky-tool="equity-details"] .empty::before, [data-rky-tool="investment-tracker"] .empty::before{ content:""; display:block; width:34px; height:34px; margin:0 auto 10px; background:var(--rky-ink-3); opacity:.7; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11L2 12v6a2 2 0 002 2h16a2 2 0 002-2v-6l-3.45-6.89A2 2 0 0016.76 4H7.24a2 2 0 00-1.79 1.11z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11L2 12v6a2 2 0 002 2h16a2 2 0 002-2v-6l-3.45-6.89A2 2 0 0016.76 4H7.24a2 2 0 00-1.79 1.11z'/%3E%3C/svg%3E") center/contain no-repeat; } /* inside charts the "not enough data" note stays compact, no icon */ [data-rky-tool="equity-details"] .chart .empty::before{display:none} /* ===================================================================== Subscriptions — redesigned rows (part B pilot) ===================================================================== */ [data-rky-tool="subscriptions"] .subcard{ padding:14px 14px 12px 16px; border-radius:14px; gap:6px 12px; } [data-rky-tool="subscriptions"] .subname{font-size:15px;font-weight:650} [data-rky-tool="subscriptions"] .submeta{gap:4px 10px;margin-top:2px} [data-rky-tool="subscriptions"] .submeta span + span::before{content:"·";margin-right:10px;color:var(--rky-ink-3)} [data-rky-tool="subscriptions"] .subamt .big{font-size:16px} [data-rky-tool="subscriptions"] .subrow-bottom{ border-top:0; margin-top:0; padding-top:2px; } [data-rky-tool="subscriptions"] .subactions{margin-top:0;align-items:center;gap:8px} [data-rky-tool="subscriptions"] .iconbtn.primary-act{ color:var(--rky-accent-ink); border-color:color-mix(in srgb, var(--rky-accent) 40%, transparent); background:var(--rky-accent-soft); } /* the ⋯ menu */ [data-rky-tool="subscriptions"] .rowmenu{position:relative} [data-rky-tool="subscriptions"] .rowmenu > summary{ list-style:none; width:34px; height:34px; border-radius:9px; display:grid; place-items:center; color:var(--rky-ink-2); border:1px solid var(--rky-border); cursor:pointer; user-select:none; } [data-rky-tool="subscriptions"] .rowmenu > summary::-webkit-details-marker{display:none} [data-rky-tool="subscriptions"] .rowmenu[open] > summary, [data-rky-tool="subscriptions"] .rowmenu > summary:hover{color:var(--rky-ink);border-color:var(--rky-border-strong)} [data-rky-tool="subscriptions"] .rowmenu-list{ position:absolute; right:0; bottom:calc(100% + 6px); z-index:20; min-width:190px; padding:6px; display:flex; flex-direction:column; background:var(--rky-surface); border:1px solid var(--rky-border-strong); border-radius:12px; box-shadow:var(--rky-shadow-3); } [data-rky-tool="subscriptions"] .rowmenu-list .iconbtn{ justify-content:flex-start; width:100%; border:0; background:transparent; min-height:38px; font-size:14px; font-weight:500; color:var(--rky-ink); border-radius:8px; } [data-rky-tool="subscriptions"] .rowmenu-list .iconbtn:hover{background:var(--rky-surface-2);color:var(--rky-ink)} [data-rky-tool="subscriptions"] .rowmenu-list .iconbtn.danger{color:var(--rky-neg)} [data-rky-tool="subscriptions"] .rowmenu-list .iconbtn.danger:hover{background:var(--rky-neg-soft)} /* empty state call-to-action */ [data-rky-tool="subscriptions"] .empty .empty-add{margin-top:14px} /* ===================================================================== Equity Details (part B) ===================================================================== */ /* "+ note" on every row was noisy: now a small pencil, stronger on hover. A share that already has a note shows a filled note icon. */ [data-rky-tool="equity-details"] button.chip[data-note]{ font-size:0; width:26px; height:22px; padding:0; display:inline-grid; place-items:center; vertical-align:middle; background:transparent; opacity:.45; transition:opacity .15s ease, background .15s ease; } [data-rky-tool="equity-details"] button.chip[data-note]::before{ content:""; width:14px; height:14px; background:var(--rky-ink-2); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center/contain no-repeat; } [data-rky-tool="equity-details"] button.chip.n[data-note]{opacity:.9} [data-rky-tool="equity-details"] button.chip.n[data-note]::before{ background:var(--rky-accent-ink); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E"); } [data-rky-tool="equity-details"] tr:hover button.chip[data-note], [data-rky-tool="equity-details"] button.chip[data-note]:focus-visible{opacity:1;background:var(--rky-surface-3)} [data-rky-tool="jewellery"] .rowbtn.danger{color:var(--rky-neg)}