/********************************************************************************************************************* NOIR WHITE THEME — palette tokens *********************************************************************************************************************/ :root { /* Three-level dark palette so every layer reads distinctly: page (deepest, almost-black) → section body (lifted) → section header (brightest of the three, sits like a tab on top of the body). Inputs / popovers reuse --bg-elevated (mid-tone). */ --bg: #000000; /* page background — pure black */ --bg-elevated: #1c1c1c; /* inputs / popovers / dropdowns */ --bg-hover: #2a2a2a; --surface: #141414; /* section body — lifted from the page */ --surface-head: #232323; /* section header — top tab, brightest layer */ --status-bg: #0e0e0e; /* sticky status bar — between page and section body */ --surface-raised:#1a1a1a; --border: #2e2e2e; --border-strong: #5a5a5a; --border-soft: #1a1a1a; --fg: #ffffff; --text: #f0f0f0; --muted: #888888; --muted-dim: #666666; --accent: #ffffff; --accent-hi: #5fe8e0; --catno: #5fe8e0; --radius: 6px; --input-h: 28px; --font: Optima, "Optima Nova", "Avenir Next", Avenir, Futura, "Trebuchet MS", Geneva, "Helvetica Neue", system-ui, sans-serif; } /********************************************************************************************************************* WIDTHS / HEIGHTS *********************************************************************************************************************/ table { min-width:960px; width:98%; } .section { width:98%; min-width:1000px; margin:14px auto; padding:0; border-radius:10px; background: var(--surface); border: 1px solid #1f1f1f; box-shadow: 0 4px 14px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.03) inset; } /* Nested sections (e.g. Tunings inside Fretboard) get a softer shadow so they read as lifted slightly off the parent card without competing. */ .nested_section { box-shadow: 0 2px 6px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.03) inset !important; } #view_src, #print_btn { width:100px; } .cg_chord_label { width:88px !important; } .cg_deg_header { height:24px !important; } #f0,#f_cyo,#f_cyo_dark { width:5%; } #f1 { width:8.5%; } #f2,#f3 { width:8.5%; } #f4,#f5 { width:8%; } #f6,#f7 { width:7.5%; } #f8,#f9 { width:7%; } #f10,#f11,#f12 { width:6.5%; } /********************************************************************************************************************* BG COLORS *********************************************************************************************************************/ body, #hl_button { background-color: var(--bg) !important; } #hl_button_x, #view_src, #print_btn,table { background-color:#0e0e0e; } #section_3,#section_4,#section_5, #section_1,#section_2 { background-color:#0a0a0a; } /* Fretboard + chord/scale grids share the same light 'tabletop' so the three visualizations read as one family. Tunings list stays on the dark surface. */ /* Table bg now acts as the "grout" between cells — darker than the cell fills (#a8a8a8) so the 1px border-spacing reads as a deliberate frame around every cell rather than empty gap. */ #fretboard, #chord_grid, #scale_grid { background-color:#555555; } #_no_highlight_, #_x_ { background-color:#a8a8a8; } #tunings { background-color:#0a0a0a; } table.sortable { background-color:#0a0a0a; } table.sortable tbody tr:nth-child(odd) { background-color:#1a1a1a; } #fretnums, #f_cyo_dark { background-color:#1a1a1a; } #_x_ { accent-color:#1a1a1a; } #red_bg { background-color:#ff0000 !important; } #_1_ { background-color:#ff0000; accent-color:#ff0000; } #_b2_ { background-color:#674ea7; accent-color:#674ea7; } #_2_ { background-color:#9900ff; accent-color:#9900ff; } #_b3_ { background-color:#f6b26b; accent-color:#f6b26b; } #_3_ { background-color:#ff6d01; accent-color:#ff6d01; } #_4_ { background-color:#00ffff; accent-color:#00ffff; } #_b5_ { background-color:#3d85c6; accent-color:#3d85c6; } #_5_ { background-color:#0000ff; accent-color:#0000ff; } #_b6_ { background-color:#6aa84f; accent-color:#6aa84f; } #_6_ { background-color:#0cc016; accent-color:#0cc016; } #_b7_ { background-color:#a64d79; accent-color:#a64d79; } #_7_ { background-color:#ff00ff; accent-color:#ff00ff; } /* Screen-reader-only utility: kept in the DOM so crawlers and assistive tech read it, but invisible (and not focusable) for sighted users. */ .sr_only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /********************************************************************************************************************* FONT FAMILY *********************************************************************************************************************/ /* Reserve the vertical scrollbar gutter at all times so opening the tunings popup (or any tall popover) doesn't cause the page content to jump left when a scrollbar appears. */ html { scrollbar-gutter: stable; } body { font-family: var(--font); } /********************************************************************************************************************* FONT SIZES *********************************************************************************************************************/ body { font-size:0.95em; } h1,.slant { font-size:0.92em; } .finder { font-size:0.88em; } h2 { font-size:1.4em; } .pro { font-size:.6em; } h3 { font-size:1.05em; } #info_l, #info_r { font-size:1em; } #fretnums { font-size:.78em; } h4 { font-size:1.05em; } #hl_button, #hl_button_x { line-height:3em; } /********************************************************************************************************************* FONT COLORS *********************************************************************************************************************/ body, a,a:link,a:visited,a:active, #f_cyo, #f_cyo_dark { color: #f0f0f0 !important; } .finder { color:var(--accent-hi) !important; } .red_fg, #red_fg { color:var(--accent-hi) !important; } a:hover { color:var(--accent-hi); } /* Degree-colored cells need dark text against their bright backgrounds (everything except _5_, which has its own light text on dark blue) — body's light color would be illegible on orange / magenta / cyan / etc. */ #_1_, #_b2_, #_2_, #_b3_, #_3_, #_4_, #_b5_, #_b6_, #_6_, #_b7_, #_7_ { color:#000000 !important; } #_no_highlight_, #_x_ { color:#333333 !important; } /* Chord/scale name links in the builder header rows now sit on a light grid bg — text needs to be dark to read. */ #chord_grid a, #scale_grid a { color:#111 !important; } #fretnums, #blurb { color:#bdbdbd; } /* Non-marker frets (1, 2, 4, 6, 8, 10, 11) get a smaller, dimmer label so they're readable but don't compete with the marker frets (3, 5, 7, 9, 12). */ #fretnums .fret_minor { font-size: 0.78em; color: #555555; opacity: 0.85; } /* "Load preset into custom" dropdown — sits in the bottom-left empty cell under the custom-tuning column. Compact native select sized to fit the cell width. Picking a preset populates s1..sN without touching x. */ .custom_tun_loader { width: 100%; box-sizing: border-box; padding: 4px 6px; font: 400 0.9em var(--font); background: var(--bg-elevated); color: var(--accent); border: 1px solid #2a2a2a; border-radius: 3px; cursor: pointer; text-align: center; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .custom_tun_loader:hover { border-color: var(--accent-hi); } .custom_tun_loader:focus { outline: none; border-color: var(--accent-hi); } .custom_tun_loader option { background: var(--bg-elevated); color: var(--accent); } @media print { .custom_tun_loader { display: none !important; } } #_5_ { color:#dddddd; } ._i_ { color:#ff0000; } ._ii_ { color:#9900ff; } ._mii_ { color:#674ea7; } ._iii_, .Major, .Maj { color:#ff6d01; } ._miii_, .Minor, .Min, .Min7 { color:#c5a250; } ._iv_ { color:#00ffff; } ._v_ { color:#0000ff; } ._mv_, .Dim, .Dim7, .Major_Pentatonic { color:#3d85c6; } ._vi_, .Melodic_Minor, .Maj6, .Min6 { color:#0cc016; } ._mvi_, .Harmonic_Minor, .Aug { color:#6aa84f; } ._vii_, .Maj7 { color:#ff00ff; } ._mvii_, .Minor_Pentatonic, .Dom7 { color:#a64d79; } /********************************************************************************************************************* FONT WEIGHTS / STYLES / SPACING / ETC *********************************************************************************************************************/ body { font-weight:500; /* Sections may legitimately contain wide tables (the keyboard runs ~1400px). Cap the body so the page doesn't horizontally scroll; each wide section gets its own internal scroll container instead. */ overflow-x: hidden; } a:hover,a,a:link,a:visited,a:active { text-decoration:none; } .finder { font-weight:normal; } .slant { font-style:oblique; } .slant,.finder,.pro { letter-spacing:-.08em; } /********************************************************************************************************************* PADDING / MARGINS *********************************************************************************************************************/ #fretboard, #chord_grid, #scale_grid, #keyboard, #tunings { margin: 12px auto 12px auto; padding: 0; } body { margin: 0; padding: 0; } .pro { margin-left:-5px; } h1, h2, h3, h4, input { margin: 6px auto 6px auto ; } #info_l, #info_r, #view_src, #print_btn { margin: .5vmax 3vmax .5vmax 3vmax; padding: auto; } #hl_button, #hl_button_x { margin: 6px 14px 6px 10px; padding: 4px 8px 4px 8px; } #tunings td { padding: 6px 12px 6px 12px; } #f_cyo,#f_cyo_dark,#_x_,#_1_,#_b2_,#_2_,#_b3_,#_3_,#_4_,#_b5_,#_5_,#_b6_,#_6_,#_b7_,#_7_ { padding: 4px; } /******************************************** ************************************************************************ POSITIONS / ALIGNMENTS / FLOAT / DISPLAY / OVERFLOW / WHITE-SPACE *********************************************************************************************************************/ body, #info_l, #info_r, #view_src, #print_btn, #f_cyo, #f_cyo_dark, #tunings tr { text-align:center; } #tunings td, #blurb { text-align:left; } .name { text-align:right; } .cg_chord_label { text-align:center; } .cg_deg_header { text-align:center; } #hl_button, #hl_button_x, #info_l, #info_r, #view_src, #print_btn { display:inline; } #view_src, #info_l { float:left; } #print_btn, #info_r { float:right; } #keyboard td,#keyboard tr { white-space:nowrap; overflow:hidden; } table { table-layout:fixed; position:inherit; } #section_3,#section_4,#section_5, #section_1,#section_2 { table-layout:fixed; } table td { vertical-align:middle; } /********************************************************************************************************************* BORDERS / CORNERS *********************************************************************************************************************/ #view_src, #print_btn, #hl_button, #hl_button_x { border-radius:10px; } #fretboard, #chord_grid, #scale_grid, #keyboard, #tunings { border-radius:8px; overflow:hidden; } /* Keyboard sits on a grey piano-body inside the dark section frame — matches the fretboard's tabletop colour. */ /* Keyboard keeps its piano-look internal borders + tabletop colour — the grid grout treatment doesn't fit because the cells aren't rounded. The OUTER frame uses the same #555 the grids use as grout, so the keyboard reads as part of the same family of cards. */ .ritz { background-color:#a8a8a8; padding:0; border: 2px solid #555555; border-radius:6px; margin:0 6px; /* Keyboard table is naturally ~1400px wide; let it scroll inside its own card so the body never has to grow to fit it. */ overflow-x: auto; } /* Slimmer, lighter internal gridlines for the keyboard table cells. */ .ritz .waffle, .ritz .waffle td { border:1px solid rgba(0,0,0,0.08) !important; } /* White-key cells (A B C D E F G) get a thin grey vertical border between each one so the keyboard reads as a row of discrete piano keys, not one long white slab. */ .ritz .waffle .s47, .ritz .waffle .s48, .ritz .waffle .s49, .ritz .waffle .s50, .ritz .waffle .s51, .ritz .waffle .s52, .ritz .waffle .s53 { border-left: 1px solid #888 !important; border-right: 1px solid #888 !important; } /* Black-key row — piano look: - The actual black-key cells (s33 = A♯, s36/s45 = C♯, s38 = D♯, s41 = F♯, s43 = G♯, s44 = A♯ in higher octaves) have no left/right borders so adjacent black-key cells in the same octave stack visually as one solid black rectangle. - The gap cells between black keys (s32, s34, s35, s37, s39, s40, s42) keep the same thin grey vertical borders the white keys use, so the white-key boundaries appear to continue UP through the black-key row at B-C and E-F (and, partially behind black keys, at every other boundary). - No horizontal line between this row and the white-key row below, so black keys appear to rest directly on the white keys. */ .ritz .waffle .s33, .ritz .waffle .s36, .ritz .waffle .s38, .ritz .waffle .s41, .ritz .waffle .s43, .ritz .waffle .s44, .ritz .waffle .s45 { border-left: none !important; border-right: none !important; } .ritz .waffle .s32, .ritz .waffle .s34, .ritz .waffle .s35, .ritz .waffle .s37, .ritz .waffle .s39, .ritz .waffle .s40, .ritz .waffle .s42 { border-left: 1px solid #888 !important; border-right: 1px solid #888 !important; } /* Drop the horizontal border between the black-key row (5th tr) and the white-key row (6th tr) so the black keys rest seamlessly on the white keys instead of being visually capped by a divider line. */ #keyboard > tbody > tr:nth-of-type(5) > td { border-bottom: none !important; } #keyboard > tbody > tr:nth-of-type(6) > td { border-top: none !important; } /* Steel Gauges, MXR EQ band, and Frequency Hz rows: drop the multicolor scheme and let the populated cells match the white-key bg below them. Also clears the grey text override on the row's blank/label cells. */ .ritz .waffle .s13, .ritz .waffle .s14, .ritz .waffle .s15, .ritz .waffle .s16, .ritz .waffle .s17, .ritz .waffle .s18, .ritz .waffle .s19, .ritz .waffle .s23, .ritz .waffle .s25, .ritz .waffle .s26, .ritz .waffle .s27, .ritz .waffle .s28, .ritz .waffle .s29, .ritz .waffle .s30 { background-color:#a8a8a8 !important; color:#888 !important; } .ritz .waffle .s12, .ritz .waffle .s22 { color:#888 !important; } .nut { border-right:10px solid #2a2a2a !important; } .nut1 { border-left:10px solid #2a2a2a !important; } table, table td { border:1px solid var(--border); border-collapse:separate; } #view_src, #print_btn { border:1px solid #5fe8e0; } #hl_button, #hl_button_x { border:1px solid #000000 !important; } /********************************************************************************************************************* SORTABLE TUNINGS TABLE AND KEYBOARD *********************************************************************************************************************/ table.sortable th.no-sort { padding-top:0.35em; }table.sortable th button { padding:4px; margin:1px; background-color:transparent; border:none; display:inline; right:0; left:0; top:0; bottom:0; width:98%; outline:none; cursor:pointer; }table.sortable th button span { right:4px; }table.sortable th[aria-sort='descending'] span::after { content:'▼'; color:currentcolor; top:0; }table.sortable th[aria-sort='ascending'] span::after { content:'▲'; color:currentcolor; top:0; }table.sortable td,table.sortable th { padding:0.125em 0.25em; }table.sortable th:not([aria-sort]) button:focus span::after,table.sortable th:not([aria-sort]) button:hover span::after { content:'▼'; color:currentcolor; top:0; }table.show-unsorted-icon th:not([aria-sort]) button span::after { content:'▲'; color:currentcolor; position:relative; top:-3px; left:-4px; } .ritz .waffle a { color:inherit; }.ritz .waffle .s0,.ritz .waffle .s10,.ritz .waffle .s11,.ritz .waffle .s12,.ritz .waffle .s20,.ritz .waffle .s21,.ritz .waffle .s22,.ritz .waffle .s24,.ritz .waffle .s31,.ritz .waffle .s33,.ritz .waffle .s36,.ritz .waffle .s38,.ritz .waffle .s41,.ritz .waffle .s43,.ritz .waffle .s44,.ritz .waffle .s45,.ritz .waffle .s46,.ritz .waffle .s54,.ritz .waffle .s55,.ritz .waffle .s56,.ritz .waffle .s57,.ritz .waffle .s59,.ritz .waffle .s61{ background-color:#000000 !important; }.ritz .waffle .s0,.ritz .waffle .s10,.ritz .waffle .s11,.ritz .waffle .s21,.ritz .waffle .s31,.ritz .waffle .s32,.ritz .waffle .s34,.ritz .waffle .s35,.ritz .waffle .s37,.ritz .waffle .s42,.ritz .waffle .s46{ color:#ffffff; }.ritz .waffle .s0,.ritz .waffle .s1,.ritz .waffle .s2,.ritz .waffle .s3,.ritz .waffle .s4,.ritz .waffle .s5,.ritz .waffle .s6,.ritz .waffle .s7,.ritz .waffle .s8,.ritz .waffle .s9,.ritz .waffle .s10,.ritz .waffle .s11,.ritz .waffle .s12,.ritz .waffle .s13,.ritz .waffle .s14,.ritz .waffle .s15,.ritz .waffle .s16,.ritz .waffle .s17,.ritz .waffle .s18,.ritz .waffle .s19,.ritz .waffle .s20,.ritz .waffle .s21,.ritz .waffle .s23,.ritz .waffle .s24,.ritz .waffle .s25,.ritz .waffle .s26,.ritz .waffle .s27,.ritz .waffle .s28,.ritz .waffle .s29,.ritz .waffle .s30,.ritz .waffle .s31,.ritz .waffle .s46{ font-size:8pt; }.ritz .waffle .s1{ background-color:#34a853; }.ritz .waffle .s1,.ritz .waffle .s2,.ritz .waffle .s3,.ritz .waffle .s4,.ritz .waffle .s5,.ritz .waffle .s6,.ritz .waffle .s7,.ritz .waffle .s8,.ritz .waffle .s9,.ritz .waffle .s13,.ritz .waffle .s14,.ritz .waffle .s15,.ritz .waffle .s16,.ritz .waffle .s17,.ritz .waffle .s18,.ritz .waffle .s19,.ritz .waffle .s20,.ritz .waffle .s23,.ritz .waffle .s24,.ritz .waffle .s25,.ritz .waffle .s26,.ritz .waffle .s27,.ritz .waffle .s28,.ritz .waffle .s29,.ritz .waffle .s30,.ritz .waffle .s39,.ritz .waffle .s40,.ritz .waffle .s47,.ritz .waffle .s48,.ritz .waffle .s49,.ritz .waffle .s50,.ritz .waffle .s51,.ritz .waffle .s52,.ritz .waffle .s53,.ritz .waffle .s54,.ritz .waffle .s55,.ritz .waffle .s56,.ritz .waffle .s57,.ritz .waffle .s58,.ritz .waffle .s59,.ritz .waffle .s60,.ritz .waffle .s61,.ritz .waffle .s62,.ritz .waffle .s63,.ritz .waffle .s64,.ritz .waffle .s65,.ritz .waffle .s66,.ritz .waffle .s67{ color: #f0f0f0 !important; }.ritz .waffle .s2{ background-color:#65ae49; }.ritz .waffle .s3{ background-color:#96b53e; }.ritz .waffle .s4{ background-color:#c7bc33; }.ritz .waffle .s5{ background-color:#f8c328; }.ritz .waffle .s6{ background-color:#f5a022; }.ritz .waffle .s7{ background-color:#f17c1b; }.ritz .waffle .s8{ background-color:#ee5915; }.ritz .waffle .s9{ background-color:#ea350e; }.ritz .waffle .s12{ color:#434343; }.ritz .waffle .s13,.ritz .waffle .s25{ background-color:#93c47d; }.ritz .waffle .s14,.ritz .waffle .s23{ background-color:#d5a6bd; }.ritz .waffle .s15,.ritz .waffle .s26{ background-color:#ea9999; }.ritz .waffle .s16,.ritz .waffle .s27{ background-color:#b4a7d6; }.ritz .waffle .s17,.ritz .waffle .s28{ background-color:#f9cb9c; }.ritz .waffle .s18,.ritz .waffle .s29{ background-color:#a2c4c9; }.ritz .waffle .s19,.ritz .waffle .s30,.ritz .waffle .s64{ background-color:#a4c2f4; }.ritz .waffle .s22{ color:#666666; }.ritz .waffle .s22,.ritz .waffle .s54,.ritz .waffle .s55,.ritz .waffle .s56,.ritz .waffle .s57,.ritz .waffle .s58,.ritz .waffle .s59,.ritz .waffle .s60,.ritz .waffle .s61,.ritz .waffle .s62,.ritz .waffle .s63,.ritz .waffle .s64,.ritz .waffle .s65,.ritz .waffle .s66,.ritz .waffle .s67{ font-size:9pt; }.ritz .waffle .s32,.ritz .waffle .s47{ background-color:#0cc016; }.ritz .waffle .s32,.ritz .waffle .s33,.ritz .waffle .s34,.ritz .waffle .s35,.ritz .waffle .s36,.ritz .waffle .s37,.ritz .waffle .s38,.ritz .waffle .s39,.ritz .waffle .s40,.ritz .waffle .s41,.ritz .waffle .s42,.ritz .waffle .s43,.ritz .waffle .s44,.ritz .waffle .s45{ font-size:10pt; }.ritz .waffle .s33{ color:#8e7cc3; }.ritz .waffle .s34,.ritz .waffle .s48{ background-color:#ff00ff; }.ritz .waffle .s35,.ritz .waffle .s49{ background-color:#ff0000; }.ritz .waffle .s36,.ritz .waffle .s45{ color:#674ea7; }.ritz .waffle .s37,.ritz .waffle .s50{ background-color:#9900ff; }.ritz .waffle .s38{ color:#f6b26b; }.ritz .waffle .s39,.ritz .waffle .s51{ background-color:#ff6d01; }.ritz .waffle .s40,.ritz .waffle .s52{ background-color:#00ffff; }.ritz .waffle .s41{ color:#6fa8dc; }.ritz .waffle .s42,.ritz .waffle .s53{ background-color:#0000ff; }.ritz .waffle .s43{ color:#93c47d; }.ritz .waffle .s44{ color:#d5a6bd; }.ritz .waffle .s45,.ritz .waffle .s46{ border-left:none; }.ritz .waffle .s45{ border-right:none; }.ritz .waffle .s47,.ritz .waffle .s48,.ritz .waffle .s49,.ritz .waffle .s50,.ritz .waffle .s51,.ritz .waffle .s52,.ritz .waffle .s53{ font-size:12pt; }.ritz .waffle .s58{ background-color:#6aa84f; }.ritz .waffle .s60{ background-color:#b6d7a8; }.ritz .waffle .s62{ background-color:#6d9eeb; }.ritz .waffle .s63{ background-color:#6fa8dc; }.ritz .waffle .s65{ background-color:#9fc5e8; }.ritz .waffle .s66{ background-color:#cfe2f3; }.ritz .waffle .s67{ background-color:#c9daf8; } /********************************************************************************************************************* RESPONSIVE — keep every section visible on mobile *********************************************************************************************************************/ /* The fretboard / chord builder / scale builder / keyboard need their full 1000px+ width to read correctly. On phones / tablets we keep the layout intact and let the page scroll horizontally — combined with the in index.html, the browser shows a zoomed-out version of the desktop layout that the user can pinch-zoom into. No section is hidden any more. */ @media only screen and (max-width: 1024px) { body { font-size:.92em; } } @media only screen and (min-width: 1025px) and (max-width: 1200px) { body { font-size:.95em; } } @page { margin: 0.6cm; size: landscape; } @media print { /* Common: strip page chrome, force black text where it matters */ body, h1, .slant, .finder, .pro, #fretboard, #fretnums, #info_l, #info_r, #_no_highlight_ { color:black !important; letter-spacing:normal; } body { background:none !important; margin:0 !important; padding:0 !important; } .section { background:none !important; border:none !important; min-width:0 !important; margin:0 !important; padding:0 !important; border-radius:0 !important; box-shadow:none !important; width:100% !important; max-width:100% !important; } /* Always hide section chrome that doesn't belong on paper */ #blurb, #print_btn, #view_src, .section_help, .section_print, .section_key_picker { display:none !important; } /* Per-section print: hide everything except the section being printed. The section is forced open via JS, so the
children show. */ body[data-print] > * { display:none !important; } body[data-print="section_2"] #section_2, body[data-print="section_3"] #section_3, body[data-print="section_4"] #section_4, body[data-print="section_5"] #section_5, body[data-print="section_6"] #section_6, body[data-print="section_8"] #section_8, body[data-print="section_9"] #section_9 { display:block !important; } body[data-print] details > * { display:block !important; } body[data-print] details > summary { display:none !important; } /* Tunings List is nested INSIDE the fretboard section now. When printing just Tunings, reveal section_2 as an ancestor but hide the fretboard sibling content so only the tunings table reaches the page. */ body[data-print="section_5"] #section_2 { display:block !important; } body[data-print="section_5"] #section_2 > *:not(#section_5):not(summary) { display:none !important; } /* Conversely, when printing the Fretboard alone, drop the nested tunings so a paper Fretboard print isn't 100 pages of tunings table. */ body[data-print="section_2"] #section_5 { display:none !important; } /* Force colored highlights to print when the user has opted in */ body.print-colors #_1_, body.print-colors #_b2_, body.print-colors #_2_, body.print-colors #_b3_, body.print-colors #_3_, body.print-colors #_4_, body.print-colors #_b5_, body.print-colors #_5_, body.print-colors #_b6_, body.print-colors #_6_, body.print-colors #_b7_, body.print-colors #_7_ { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } /* ===== Section 2: Fretboard ===== */ body[data-print="section_2"] #tunings_drop, body[data-print="section_2"] table td:first-child { display:none !important; } body[data-print="section_2"] #fretboard{ background-color:#fff !important; width:100% !important; border-radius:0 !important; } body[data-print="section_2"] #fretboard tr { height:2em; } body[data-print="section_2"] #fretnums { height:2em !important; font-weight:normal !important; background-color:#1a1a1a !important; } body[data-print="section_2"] #info_l, body[data-print="section_2"] #info_r { display:block !important; text-align:center !important; margin:2px auto !important; font-size:1em; } /* ===== Section 3: Chord Builder Grid ===== Tight rows + landscape page should put the entire flipped grid on one page. ~28 chord rows × 12px = 336px, plus header rows + section chrome, fits inside a landscape A4 page height. */ body[data-print="section_3"] #chord_grid { font-size:0.55em; width:100% !important; border-radius:0 !important; border-spacing: 0 !important; } body[data-print="section_3"] #chord_grid tr { height: 12px !important; } body[data-print="section_3"] #chord_grid td { padding:0 1px !important; line-height: 1.05 !important; } body[data-print="section_3"] .cg_chord_label { width:60px !important; } body[data-print="section_3"] .cg_corner_label { font-size: 0.85em !important; } /* ===== Section 4: Keyboard ===== */ body[data-print="section_4"] #keyboard { font-size:0.5em; width:100% !important; border-radius:0 !important; } body[data-print="section_4"] #keyboard td { padding:0 !important; } /* ===== Section 5: Tunings List ===== */ body[data-print="section_5"] #filter { display:none !important; } body[data-print="section_5"] #tunings { font-size:0.62em; width:100% !important; border-radius:0 !important; } body[data-print="section_5"] #tunings td, body[data-print="section_5"] #tunings th { padding:1px 4px !important; } /* ===== Section 6: Scale Builder Grid ===== 16 scales × ~16px row = ~256px, fits one landscape page easily. */ body[data-print="section_6"] #scale_grid { font-size:0.8em; width:100% !important; border-radius:0 !important; border-spacing: 0 !important; } body[data-print="section_6"] #scale_grid tr { height: 16px !important; } body[data-print="section_6"] #scale_grid td { padding:1px 2px !important; line-height: 1.1 !important; } body[data-print="section_6"] .cg_corner_label { font-size: 0.85em !important; } /* ===== Section 9: Key Signatures ===== Two panels side-by-side × 8 rows each. Tighten padding + font so both panels fit on a single landscape page without the second page wrapping. */ body[data-print="section_9"] .ks_grid { gap: 8px !important; } body[data-print="section_9"] .ks_panel { background: none !important; border: 1px solid #888 !important; break-inside: avoid; page-break-inside: avoid; } body[data-print="section_9"] .ks_panel_title { background: none !important; padding: 4px 8px !important; font-size: 0.85em !important; } body[data-print="section_9"] .ks_table { font-size: 0.78em !important; } body[data-print="section_9"] .ks_table thead th { padding: 3px 6px !important; } body[data-print="section_9"] .ks_table tbody td { padding: 2px 6px !important; } body[data-print="section_9"] .ks_table .ks_key { width: 60px !important; } body[data-print="section_9"] .ks_table .ks_key .ks_major { display: none !important; } body[data-print="section_9"] .ks_table .ks_sig_count { width: 18px !important; padding-left: 4px !important; } body[data-print="section_9"] .ks_table .ks_sig_staff { width: 36px !important; } body[data-print="section_9"] .ks_table .ks_sig_hand { width: 30px !important; padding-right: 4px !important; } body[data-print="section_9"] .ks_staff { transform: scale(0.6) !important; } body[data-print="section_9"] .ks_hand { width: 14px !important; height: 14px !important; background-size: 70px 14px !important; } body[data-print="section_9"] .ks_hand_1 { background-position: 0 0 !important; } body[data-print="section_9"] .ks_hand_2 { background-position: -14px 0 !important; } body[data-print="section_9"] .ks_hand_3 { background-position: -28px 0 !important; } body[data-print="section_9"] .ks_hand_4 { background-position: -42px 0 !important; } body[data-print="section_9"] .ks_hand_5 { background-position: -56px 0 !important; } body[data-print="section_9"] .ks_help { display: none !important; } /* ===== Tighten new theory components for one-page print ===== The chord/scale builder grids and key-sig table are the primary print targets; the supplementary panels (identify strips, key chooser row, inversions, progressions, key extras, quiz sidebar) distract and push everything onto a second page. Hide on prints. */ body[data-print] .section_key_row_outer, body[data-print] .identify_strip, body[data-print] #inversions_root, body[data-print] .quiz_sidebar, body[data-print] .dia_legend, body[data-print] .dia_toggle, body[data-print] .modes_intro, body[data-print] .prog_intro, body[data-print] .prog_play, body[data-print] .kx_cad_play, body[data-print] .audio_toggle, body[data-print] .section_apply_all { display: none !important; } /* Section 3 chord builder: hide nested Progressions sub-section so the chord grid + diatonic chart fit on one landscape page. */ body[data-print="section_3"] #section_11 { display: none !important; } body[data-print="section_3"] .dia_chart { padding: 4px 12px !important; background: none !important; border-top: 1px solid #888 !important; } body[data-print="section_3"] .dia_head { margin-bottom: 4px !important; } body[data-print="section_3"] .dia_row { gap: 4px !important; margin-bottom: 4px !important; } body[data-print="section_3"] .dia_cell { padding: 4px 2px !important; background: none !important; border-color: #aaa !important; } /* Section 6 scale grid: keep modes visible but compact. */ body[data-print="section_6"] .modes_panel { padding: 4px 12px !important; background: none !important; border-top: 1px solid #888 !important; } body[data-print="section_6"] .modes_grid { gap: 4px !important; } body[data-print="section_6"] .mode_cell { padding: 4px 2px !important; background: none !important; border-color: #aaa !important; } /* Section 9 key signatures: hide the new key-extras (intervals + contains + cadences) so the staff table and Circle of Fifths still fit on a single landscape page. */ body[data-print="section_9"] #key_extras_root { display: none !important; } /* Hide all-section nav cruft on every print. */ body[data-print] #seo_lede, body[data-print] #auth_widget, body[data-print] #mobile_hint, body[data-print] #site_title, body[data-print] #build_num, body[data-print] #site_footer { display: none !important; } } /* Outside @media print so the property carries into the print render reliably */ body.print-colors td[id="_1_"], body.print-colors td[id="_b2_"], body.print-colors td[id="_2_"], body.print-colors td[id="_b3_"], body.print-colors td[id="_3_"], body.print-colors td[id="_4_"], body.print-colors td[id="_b5_"], body.print-colors td[id="_5_"], body.print-colors td[id="_b6_"], body.print-colors td[id="_6_"], body.print-colors td[id="_b7_"], body.print-colors td[id="_7_"], body.print-colors .ritz .waffle td { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /********************************************************************************************************************* VIEW SOURCE MODAL *********************************************************************************************************************/ #view_source_modal { position:fixed; inset:0; z-index:9999; } #view_source_modal .vs_backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.7); } /* Help / about modal — dark theme, sized to its content (capped at 720x80vh), centred on screen. The previous full-screen white panel felt out of place against the rest of the dark UI. */ #view_source_modal .vs_panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(720px, 92vw); max-height: 80vh; background: var(--surface); color: var(--accent); border: 1px solid #2a2a2a; border-radius: 8px; box-shadow: 0 12px 48px rgba(0,0,0,0.6); display: flex; flex-direction: column; overflow: hidden; } #view_source_modal .vs_close { position: absolute; top: 4px; right: 8px; width: 28px; height: 28px; font-size: 22px; line-height: 1; background: transparent; border: none; cursor: pointer; color: var(--muted); z-index: 1; } #view_source_modal .vs_close:hover { color: var(--accent-hi); } #view_source_modal .vs_pre { margin: 0; padding: 28px 22px 18px 22px; flex: 1; overflow: auto; white-space: pre-wrap; word-break: break-word; font-family: Consolas, Menlo, monospace; font-size: 0.85em; font-weight: normal; color: var(--accent); background: var(--surface); text-align: left; } @media print { #view_source_modal { display:none !important; } } /********************************************************************************************************************* CLEAR HIGHLIGHTS BUTTON *********************************************************************************************************************/ #clear_hl_btn { display:inline-block; padding:2px 10px; border:1px solid #5fe8e0; border-radius:3px; background:#0e0e0e; color: #f0f0f0 !important; text-decoration:none; font-size:.9em; } #clear_hl_btn:hover { background:#ffdddd; } /********************************************************************************************************************* COLLAPSIBLE SECTIONS *********************************************************************************************************************/ details.collapsible { padding:0; } details.collapsible > summary { cursor:pointer; user-select:none; list-style:none; padding:8px 14px; margin:0; font-size:1.2em; font-weight:bold; background-color:#1a1a1a; text-align:left; } details.collapsible > summary::-webkit-details-marker { display:none; } /* Disclosure arrow lives on the .summary_title element (not the summary itself) so a click on the arrow registers as a click inside the title. That lets the toggle-scope handler below block clicks on the rest of the summary bar (padding, status spacer, button row) while keeping the arrow + title clickable. */ details.collapsible > summary > .summary_title::before { content:'▼ '; display:inline-block; width:1em; transition:transform .15s; } details.collapsible:not([open]) > summary > .summary_title::before { content:'▶ '; } details.collapsible > summary:hover { background-color:#1a1a1a; } @media print { details.collapsible > summary { display:none !important; } details.collapsible { padding:0 !important; margin:0 !important; } } /********************************************************************************************************************* SCALE BUILDER — inherits chord-grid styling *********************************************************************************************************************/ /* scale_grid bg is set in the unified rule near the top — keep section_6 dark here and don't repeat #scale_grid (it stays light grey like the fretboard). */ #section_6 { background-color:#0a0a0a; } #section_6 { table-layout:fixed; } @media print { #section_6 { display:none !important; } } /********************************************************************************************************************* STYLE AUDIT — softer corners, polished form, more breathing room *********************************************************************************************************************/ /* Section summary header (matches .section's 10px corner radius) — brightest layer in the dark stack, with a thin bottom border separating it from the section body. */ details.collapsible > summary { border-radius: 10px 10px 0 0; padding: 4px 16px; font-size: 1.05em; background: var(--surface); color: #fff; border-bottom: 1px solid #1f1f1f; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; /* align-content: flex-start packs the wrapped lines at the TOP of the summary so they don't stretch across the cross-axis when the summary's content is shorter than its min-height. */ align-content: flex-start; justify-content: flex-end; position: relative; height: 38px; min-height: 38px; box-sizing: border-box; } /* Nested sub-section summaries match the top-level slim height. */ details.collapsible.nested_section > summary { height: 38px; min-height: 38px; } /* Key-button row, hosted directly below the summary inside the section body. Centred and visually grouped with the section content. */ .section_key_row_outer { display: flex; justify-content: center; padding: 6px 12px 4px; } @media print { .section_key_row_outer { display: none !important; } } details.collapsible:not([open]) > summary { border-bottom-color: transparent; } /* Title + arrow centered as one click target, ~3× the text width so users can tap-to-toggle without aiming directly at the small text. Sits on top of the absolutely-positioned right-side controls via a higher z-index. */ details.collapsible > summary .summary_title { font-weight: 700; cursor: pointer; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 4px 40px; border-radius: 6px; z-index: 1; } /* When a section's summary has the key-button row below the title, anchor the title to the top of the bar instead of letting absolute positioning leave it floating in the vertical centre of the whole (now-taller) strip. */ details.collapsible > summary:has(.summary_keys) .summary_title { top: 0; } details.collapsible > summary .summary_title:hover { background: rgba(255,255,255,0.08); } /* Outside the title, the cursor stays default — only the title is the toggle. */ details.collapsible > summary { cursor: default; } /* Help (?) button next to each section title */ .section_help { display: inline-block; width: 22px; height: 22px; padding: 0; margin-left: 8px; vertical-align: middle; border-radius: 50%; border: 1px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.18); color: #fff; font: 600 0.85em/20px inherit; text-align: center; cursor: pointer; } .section_help:hover { background: rgba(255,255,255,0.4); border-color: #fff; } /* Print button next to each section title */ .section_print { display: inline-block; margin-left: 4px; padding: 2px 10px; vertical-align: middle; font: 500 0.78em inherit; border-radius: 12px; border: 1px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.18); color: #fff; cursor: pointer; } .section_print:hover { background: rgba(255,255,255,0.4); border-color: #fff; } /* "Apply all" toggle — same pill shape as section_print but the engaged state is highlighted with the cyan accent so it reads as "currently linking sections together." Disengaged is the default neutral chip look. */ .section_apply_all { display: inline-block; margin-left: 4px; padding: 2px 10px; vertical-align: middle; font: 600 0.78em inherit; border-radius: 12px; border: 1px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.18); color: #fff; cursor: pointer; letter-spacing: 0.02em; } .section_apply_all:hover { background: rgba(255,255,255,0.4); border-color: #fff; } .section_apply_all.on { background: var(--accent-hi); border-color: var(--accent-hi); color: #001014; } .section_apply_all.on:hover { background: #fff; border-color: #fff; color: #001014; } @media print { .section_apply_all { display: none !important; } } /* Audio toggle (♪): off = subtle outline, on = filled accent. Sits to the right of the Linked toggle in the Fretboard summary. */ .section_audio_toggle { display: inline-block; margin-left: 4px; padding: 2px 10px; border: 1px solid rgba(255,255,255,0.55); border-radius: 12px; background: rgba(255,255,255,0.18); color: #fff; cursor: pointer; font: 600 0.95em inherit; line-height: 18px; } .section_audio_toggle:hover { background: rgba(255,255,255,0.4); border-color: #fff; } .section_audio_toggle.on { background: var(--accent-hi); border-color: var(--accent-hi); color: #001014; } .section_audio_toggle.on:hover { background: #fff; border-color: #fff; color: #001014; } @media print { .section_audio_toggle { display: none !important; } } /* CSV export pill — same shape as the Print pill so the right-side row reads as a consistent set of action chips. */ .section_export { display: inline-block; margin-left: 4px; padding: 2px 10px; vertical-align: middle; font: 500 0.78em inherit; letter-spacing: 0.04em; border-radius: 12px; border: 1px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.18); color: #fff; cursor: pointer; } .section_export:hover { background: rgba(255,255,255,0.4); border-color: #fff; } @media print { .section_export { display: none !important; } } /* Per-section Key dropdown + Clear, in each summary after the Print button */ .summary_extras { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; vertical-align: middle; font-weight: normal; } .summary_extras .section_key_picker { display: inline-flex; align-items: center; padding: 0; } .summary_extras label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-size: 0.85em; color: #fff; } .summary_extras select.inputs { padding: 2px 8px; font-size: 0.85em; border-radius: 4px; border: 1px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.18); color: #fff; cursor: pointer; } .summary_extras select.inputs:hover { background: rgba(255,255,255,0.4); border-color: #fff; } .summary_extras select.inputs option { color: var(--text); background: var(--bg-elevated); } .summary_extras .section_clear { padding: 2px 12px; font-size: 0.82em; border-radius: 12px; border: 1px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.18); color: #fff !important; text-decoration: none; cursor: pointer; } .summary_extras .section_clear:hover { background: rgba(255,255,255,0.4); border-color: #fff; } /* Compact Key + Tuning status, centered in every section title bar (except Learn). Two short lines stacked; flex-grows to fill the middle space. Truncates with ellipsis if it gets crowded. */ .summary_status { flex: 1 1 auto; min-width: 0; padding: 0 12px; font: 400 0.78em var(--font); font-weight: normal; color: rgba(240,240,240,0.75); text-align: center; display: flex; flex-direction: column; gap: 1px; height: 48px; overflow: hidden; user-select: text; cursor: text; } .summary_status > span { line-height: 14px; min-height: 14px; } /* The per-section status spans are intentionally empty now that the sticky #status_bar holds the canonical Key/chord/Tuning readout. Keep them visible as flex spacers (display: flex from the parent rule) so the trailing buttons (Key picker, Clear, Print, ?) stay pinned to the right edge of every summary bar. */ .summary_status .status_key, .summary_status .status_tun { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .summary_status .status_sep { display: none; } .summary_status .status_key { color: rgba(240,240,240,0.92); } .summary_status .status_hl { color: var(--accent-hi); } .summary_status .status_tun { color: rgba(240,240,240,0.75); } /* Custom Tuning header doubles as a toggle switch (replaces 'Show custom tuning' checkbox) */ .cyo_switch { padding: 0 !important; } .cyo_switch a { display: block; padding: 4px 6px; font-size: 0.78em; font-weight: 600; text-decoration: none; color: #fff !important; letter-spacing: 0.02em; } .cyo_off { background-color: #2e2e2e !important; } .cyo_on { background-color: var(--accent-hi) !important; } .cyo_on a { color: #000 !important; } .cyo_switch:hover { filter: brightness(1.12); } /* Tuning-direction switch sits to the right of the tuning picker in the form. .y_switch_sm is the compact variant used there (smaller padding, smaller font); plain .y_switch keeps the original size for any place that still uses it. */ .y_switch { display: inline-flex; align-items: center; padding: 5px 10px; margin-left: 8px; border-radius: 5px; font: 600 0.85em/1 inherit; letter-spacing: 0.04em; text-decoration: none; color: #fff !important; border: 1px solid transparent; cursor: pointer; } .y_switch.y_switch_sm { padding: 3px 8px; font-size: 0.75em; margin-left: 6px; } .y_off { background-color: #2e2e2e; } .y_on { background-color: var(--accent-hi); color: #000 !important; } .y_switch:hover { filter: brightness(1.12); border-color: rgba(255,255,255,0.4); } .opt_row_main { gap: 0; } /* Tunings List filter bar — search input + quick-filter buttons in a centered row, persisted via ?f= and ?fc= so a user who only plays 6-string can pin "6-string" once and keep it across reloads. */ .tunings_filter_bar { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 14px; } .tunings_filter_input { flex: 0 1 auto; width: min(360px, 100%); padding: 6px 10px; font: 400 0.95em var(--font); color: var(--accent); background: var(--bg-elevated); border: 1px solid #2a2a2a; border-radius: 4px; outline: none; } .tunings_filter_input:focus { border-color: var(--accent-hi); } .tunings_strs { display: flex; flex-wrap: wrap; gap: 4px; } .tunings_str_btn { padding: 4px 12px; font: 400 0.82em var(--font); background: transparent; color: var(--muted); border: 1px solid #2a2a2a; border-radius: 999px; cursor: pointer; } .tunings_str_btn:hover { color: var(--accent-hi); border-color: var(--accent-hi); } .tunings_str_btn.active { background: var(--accent-hi); color: #000; border-color: var(--accent-hi); font-weight: 600; } @media print { .tunings_filter_bar { display: none !important; } } details.collapsible > summary:hover { background: var(--bg-hover); } details.collapsible:not([open]) > summary { border-radius: 10px; } details.collapsible > summary > .summary_title::before { color: rgba(255,255,255,0.85); } /* Form layout: stacked rows with proper gaps */ /* Both sections' pill-row stacks (fretboard #tunings_drop and keyboard #kb_picks_root) share the same column gap so the rows look identical in spacing across both sections. 40% of the previous 12px value. */ #tunings_drop { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 5px; align-items: center; font-weight: 500; } /* The tuning-picker row (top of the fretboard form) wants more breathing room before the pill rows below it. */ #tunings_drop .opt_row_main { margin-bottom: 6px; } .opt_row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: center; } .opt_row label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.95em; } .opt_row select.inputs { padding: 5px 10px; border: 1px solid #5a5a5a; border-radius: 6px; background: #0e0e0e; font-family: inherit; font-size: 0.95em; color: #f0f0f0; cursor: pointer; } .opt_row select.inputs:hover, .opt_row select.inputs:focus { border-color: #888888; outline: none; } .opt_row select.inputs option { color: var(--text); background: var(--bg-elevated); } .opt_row_main select { min-width: 540px; max-width: 90vw; } .opt_row_highlights { background: rgba(255,255,255,0.04); padding: 8px 14px; border-radius: 6px; gap: 6px 8px; } .opt_row_highlights .hl_title { font-size: 0.95em; opacity: 0.7; padding-right: 4px; color: var(--muted);} .hl_pill { padding: 2px 8px; border-radius: 5px; color: var(--text); background: rgba(255,255,255,0.06); font-size: 0.92em; border: 1px solid rgba(255,255,255,0.15); transition: background .12s; } .hl_pill:hover { background: rgba(255,255,255,0.15); } .hl_pill input[type="checkbox"] { margin: 0; } /* Buttons: View Source / Print / Clear */ #view_src button, #print_btn button { cursor: pointer; border-radius: 5px; padding: 4px 12px; font-size: 0.85em; font-family: inherit; font-weight: 500; background: #0e0e0e; border: 1px solid #5fe8e0; color: #f0f0f0; } #view_src button:hover, #print_btn button:hover { background: #ffdddd; } #clear_hl_btn { padding: 3px 14px; font-size: 0.85em; } /* Print-color toggle, sits next to the Print button */ .print_color_toggle { display: inline-flex; align-items: center; gap: 5px; margin-right: 10px; font-size: 0.85em; cursor: pointer; vertical-align: middle; } .print_color_toggle input { margin: 0; } /* Mini key picker shown at the top of chord-grid / scale-grid / keyboard sections */ .section_key_picker { display: flex; justify-content: flex-end; padding: 6px 14px 0; font-size: 0.9em; } .section_key_picker label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .section_key_picker select.inputs { padding: 4px 10px; border: 1px solid #5a5a5a; border-radius: 5px; background: #0e0e0e; font-family: inherit; font-size: 0.95em; color: #f0f0f0; cursor: pointer; } .section_key_picker select.inputs:hover, .section_key_picker select.inputs:focus { border-color: #888888; outline: none; } .section_key_picker select.inputs option { color: var(--text); background: var(--bg-elevated); } /* Per-section chromatic key buttons. Lives inside the section's as a block-level child below the title text. We don't put display:flex on the summary itself (would break the existing inline title / status / button positioning); instead, .summary_keys is a block element which forces a line break inside the summary. The summary's dark background extends to contain it, so the buttons visually sit in the same header strip as the title above. */ /* flex-basis:100% forces the summary's flex layout to wrap onto a second line, with this element consuming the full width. The other summary children (title, status, extras, buttons) stay on row 1 exactly as before. */ .summary_keys { flex-basis: 100%; min-width: 100%; display: flex; justify-content: center; padding: 0 0 2px; margin-top: -8px; } .section_key_row { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; align-items: center; padding: 0; font-weight: normal; } .section_key_row .key_label { color: var(--muted); font: 600 1em monospace; letter-spacing: 0.06em; text-transform: uppercase; margin-right: 6px; } .section_key_row .key_hidden_select { display: none; } .section_key_row .key_btn { background: #0e0e0e; border: 1px solid #5a5a5a; border-radius: 5px; color: #f0f0f0; font: 600 0.85em inherit; padding: 3px 9px; min-width: 32px; cursor: pointer; } .section_key_row .key_btn:hover { border-color: #888; } .section_key_row .key_btn.active { background: rgba(95,232,224,0.20); border-color: var(--accent); color: var(--accent); } /* Cover any other selects (per-string custom-tuning dropdowns inside the fretboard) */ select option { color: var(--text); background: var(--bg-elevated); } /********************************************************************************************************************* FRETBOARD HEADER (single stack: key info, tuning info, form) *********************************************************************************************************************/ .fb_header { padding: 8px 16px 4px; text-align: center; } .fb_header #info_l, .fb_header #info_r { display: block !important; float: none !important; margin: 0 0 2px !important; text-align: center !important; font-size: 0.95em; opacity: 0.9; } /********************************************************************************************************************* LEARN / QUIZ *********************************************************************************************************************/ #section_7 { background-color:#0a0a0a; } /* Quiz layout: subject sidebar on the left, question card on the right. */ .quiz_layout { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 16px 18px; } .quiz_sidebar { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--bg-elevated); border: 1px solid #2a2a2a; border-radius: 6px; } .quiz_sidebar_title { font: 600 0.78em var(--font); color: var(--accent-hi); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; } .quiz_subj { padding: 6px 10px; font: 500 0.85em var(--font); text-align: left; cursor: pointer; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); color: var(--muted); border-radius: 4px; } .quiz_subj:hover { background: rgba(255,255,255,0.10); color: var(--text); } .quiz_subj.on { background: rgba(95,232,224,0.18); border-color: var(--accent-hi); color: var(--text); font-weight: 600; } .quiz_subj.on:hover { background: rgba(95,232,224,0.28); } @media print { .quiz_sidebar { display: none !important; } } .quiz_card { padding: 24px 20px 28px; text-align: center; background: var(--bg-elevated); border: 1px solid #2a2a2a; border-radius: 6px; } .quiz_prompt { font-size: 1em; opacity: 0.8; margin-bottom: 4px; } .quiz_showcase { display: inline-block; font-size: 1.7em; font-weight: 600; letter-spacing: 0.06em; padding: 14px 24px; margin: 14px 0 22px; background: rgba(255,255,255,0.06); border-radius: 8px; min-width: 200px; } .quiz_choices { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 12px auto 0; } .quiz_choice { padding: 9px 20px; font-size: 0.95em; font-family: inherit; font-weight: 500; min-width: 150px; cursor: pointer; border: 1px solid #5a5a5a; border-radius: 6px; background: #0e0e0e; color: #f0f0f0; transition: background .12s, border-color .12s; } .quiz_choice:hover:not(:disabled) { background: #1a1a1a; border-color: #888888; } .quiz_choice:disabled { cursor: default; opacity: 0.55; } .quiz_choice.quiz_correct { background: #6aa84f; color: #fff; opacity: 1; border-color: #4a7a36; } .quiz_choice.quiz_wrong { background: #c0392b; color: #fff; opacity: 1; border-color: #8b2a20; } .quiz_feedback { margin-top: 18px; min-height: 2em; font-size: 1.05em; display: flex; align-items: center; justify-content: center; gap: 16px; } .quiz_feedback .quiz_correct { color: #4a7a36; font-weight: 700; } .quiz_feedback .quiz_wrong { color: #8b2a20; font-weight: 700; } .quiz_next { padding: 6px 18px; font-size: 0.95em; font-family: inherit; border: 1px solid #5a5a5a; border-radius: 6px; background: #0e0e0e; color: #f0f0f0; cursor: pointer; } .quiz_next:hover { background: #1a1a1a; border-color: #888888; } @media print { #section_7 { display: none !important; } } /* Title: bare

at the top of the page, no wrapper section, sits directly on the darkest page bg. */ #site_title { text-align: left; letter-spacing: -0.02em; margin: 0; padding: 0; line-height: 1; background: transparent; border: none; box-shadow: none; } /* Sticky top bar — logo on the left, current tuning indicator in the middle, global controls (Linked / Audio / Clear) on the right. Pinned so the controls follow the user as they scroll. */ .site_header_sticky { position: sticky; top: 0; z-index: 100; /* 3-col grid keeps the logo perfectly centred while the tuning text sits left-aligned and the controls sit at the right edge. min-width: 0 on the side cells lets them shrink so the logo never gets pushed off-centre. */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding: 6px 16px; background: var(--bg); border-bottom: 1px solid #1f1f1f; } #site_tuning { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; justify-self: start; } #site_global_controls { display: inline-flex; align-items: center; gap: 6px; justify-self: end; min-width: 0; } /* The Clerk auth widget originally floats fixed at top:right; once it lives inside the sticky header we want it inline with the other controls, sized to match. */ #site_global_controls #auth_widget { position: static !important; top: auto; right: auto; display: inline-flex; align-items: center; } /* Auth widget's inner pill has its own wrapper structure (#auth_widget > .auth_pill > .auth_btn). Strip the wrapper layout so the pill itself styles like the other controls. */ #site_global_controls .auth_pill { display: inline-flex; align-items: center; background: none; border: none; padding: 0; margin: 0; position: relative; } /* Make the Linked / Audio / Clear / Account pills share the same pill shape so they sit on a clean right-side row. inline-flex centres the text vertically so the Clear anchor doesn't float to the top. */ #site_global_controls .section_apply_all, #site_global_controls .section_audio_toggle, #site_global_controls .section_clear, #site_global_controls .auth_btn, #site_global_controls .auth_loading { display: inline-flex !important; align-items: center; justify-content: center; height: 26px; padding: 2px 14px; box-sizing: border-box; font: 600 0.82em var(--font); letter-spacing: 0.04em; border-radius: 13px; line-height: 1; border: 1px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.18); color: #fff !important; text-decoration: none; cursor: pointer; white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; } #site_global_controls .section_apply_all:hover, #site_global_controls .section_audio_toggle:hover, #site_global_controls .section_clear:hover, #site_global_controls .auth_btn:hover { background: rgba(255,255,255,0.4); border-color: #fff; } /* ============================================================== */ /* Custom Account Modal */ /* ============================================================== */ #account_modal { position: fixed; inset: 0; z-index: 9999; } #account_modal[hidden] { display: none !important; } #account_modal .am_backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.7); } #account_modal .am_panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(420px, 92vw); background: var(--bg-elevated); border: 1px solid #2a2a2a; border-radius: 10px; box-shadow: 0 18px 48px rgba(0,0,0,0.6); padding: 22px 24px 20px; } #account_modal .am_close { position: absolute; top: 6px; right: 8px; width: 28px; height: 28px; padding: 0; background: none; border: none; color: var(--muted); font: 400 24px/1 var(--font); cursor: pointer; } #account_modal .am_close:hover { color: var(--accent-hi); } #account_modal .am_title { margin: 0 0 14px; font: 600 1.15em var(--font); color: var(--accent-hi); letter-spacing: 0.04em; } #account_modal .am_user { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06); } #account_modal .am_avatar { width: 44px; height: 44px; border-radius: 50%; background: rgba(95,232,224,0.18); color: var(--accent-hi); display: flex; align-items: center; justify-content: center; font: 700 1.2em var(--font); background-size: cover; background-position: center; } #account_modal .am_user_text { flex: 1 1 auto; min-width: 0; } #account_modal .am_name { font: 600 1em var(--font); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #account_modal .am_email { font: 400 0.85em var(--font); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #account_modal .am_meta { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 14px 0 18px; font-size: 0.88em; } #account_modal .am_meta dt { color: var(--muted); font-weight: 600; } #account_modal .am_meta dd { margin: 0; color: var(--text); } #account_modal .am_actions { display: flex; flex-direction: column; gap: 8px; } #account_modal .am_btn { padding: 8px 14px; font: 600 0.92em var(--font); background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid rgba(255,255,255,0.18); border-radius: 6px; cursor: pointer; } #account_modal .am_btn:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.4); } #account_modal .am_btn_primary { background: var(--accent-hi); color: #001014; border-color: var(--accent-hi); } #account_modal .am_btn_primary:hover { background: #fff; border-color: #fff; } @media print { #account_modal { display: none !important; } } /* Active/engaged states for the toggles — match the existing accent. */ #site_global_controls .section_apply_all.on, #site_global_controls .section_audio_toggle.on { background: var(--accent-hi); border-color: var(--accent-hi); color: #001014 !important; } #site_global_controls .section_apply_all.on:hover, #site_global_controls .section_audio_toggle.on:hover { background: #fff; border-color: #fff; } /* The audio toggle is a 1-glyph button — keep it round and tight. */ #site_global_controls .section_audio_toggle{ padding: 0; width: 26px; } @media print { .site_header_sticky { display: none !important; } } /* Per-section action buttons (compact / Clear / Print / ?) — pinned to the top-right of the section body, on the same visual row as the chromatic key-button row when present. */ details.collapsible.section { position: relative; } .section_actions { position: absolute; top: 8px; right: 12px; display: inline-flex; align-items: center; gap: 6px; z-index: 2; } @media print { .section_actions { display: none !important; } } /* Build number snugs right under the logo. line-height:1 on both #site_title and #build_num kills the descender / leading extra space, so the only gap left is the negative margin-top here. */ #build_num { text-align: center; font: italic 400 0.68em var(--font); line-height: 1; color: var(--muted-dim); letter-spacing: 0.06em; margin: 6px 0 4px; opacity: 0.55; } /* "Build " label injected via CSS so the stamp_build.py regex (anchored to
[0-9.]+
) keeps matching the raw timestamp without having to learn the prefix. */ #build_num::before { content: 'Build '; opacity: 0.8; } /* Blurb at the bottom — sits on the light page bg, needs dark text */ #blurb { font-size: 0.78em; color: #555555; opacity: 0.85; margin: 12px 0; } /* Keyboard chrome override — must come AFTER the inline ritz/waffle CSS block (which sets these cells to bg:#000 with !important and gives most cells a !important #f0f0f0 light text). Every non-piano-key cell gets a dim #555 text colour so the actual piano keys read as the focal point. */ .ritz .waffle .s0, .ritz .waffle .s10, .ritz .waffle .s11, .ritz .waffle .s12, .ritz .waffle .s13, .ritz .waffle .s14, .ritz .waffle .s15, .ritz .waffle .s16, .ritz .waffle .s17, .ritz .waffle .s18, .ritz .waffle .s19, .ritz .waffle .s20, .ritz .waffle .s21, .ritz .waffle .s22, .ritz .waffle .s23, .ritz .waffle .s24, .ritz .waffle .s25, .ritz .waffle .s26, .ritz .waffle .s27, .ritz .waffle .s28, .ritz .waffle .s29, .ritz .waffle .s30, .ritz .waffle .s31, .ritz .waffle .s46, .ritz .waffle .s54, .ritz .waffle .s55, .ritz .waffle .s56, .ritz .waffle .s57, .ritz .waffle .s58, .ritz .waffle .s59, .ritz .waffle .s60, .ritz .waffle .s61, .ritz .waffle .s62, .ritz .waffle .s63, .ritz .waffle .s64, .ritz .waffle .s65, .ritz .waffle .s66, .ritz .waffle .s67 { background-color:#a8a8a8 !important; color:#888 !important; } /* Footer "Jimmy Witherfork Strikes Again" — sits on the dark page bg */ #site_footer { text-align: center; padding: 8px 16px 12px; margin-top: 4px; } #site_footer #footer_witherfork { color: var(--muted) !important; font-size: 0.78em; letter-spacing: 0.04em; text-decoration: none; cursor: pointer; transition: color .12s; } #site_footer #footer_witherfork:hover { color: var(--accent-hi) !important; } @media print { #site_footer { display: none !important; } } /* Witherfork modal — tiny, centered, just a link to SeaDisco.com */ #view_source_modal.wf_compact .vs_panel { top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: auto; height: auto; max-width: 280px; max-height: none; background: #0a0a0a; color: #f0f0f0; border: 1px solid rgba(95,232,224,0.35); } #view_source_modal.wf_compact .vs_pre { padding: 28px 32px; text-align: center; font-family: var(--font); font-size: 1.05em; white-space: normal; overflow: visible; background: #0a0a0a; color: #f0f0f0; } /* Higher specificity than the body 'a:link / a:visited' rule so the link actually picks up the cyan colour on the white modal panel. */ #view_source_modal a.wf_link, #view_source_modal a.wf_link:link, #view_source_modal a.wf_link:visited, #view_source_modal a.wf_link:active { color: var(--accent-hi) !important; text-decoration: none; font-weight: 600; letter-spacing: 0.02em; border-bottom: 1px solid rgba(95,232,224,0.45); } #view_source_modal a.wf_link:hover { border-bottom-color: var(--accent-hi); } /* Witherfork popup: no close button — click anywhere outside (or press Esc) to dismiss. */ #view_source_modal.wf_compact .vs_close { display: none !important; } /* Fretboard info bar */ #info_l, #info_r { font-weight: 600; opacity: 0.9; } /* Make the entire chord/scale name cell the click target — fill the with the so users can hit anywhere on the cell, not just the text. Applies to the leftmost / rightmost label cell of each chord (or scale) row in the flipped grid. Text aligns toward the middle of the table: right-aligned on the left edge, left-aligned on the right edge. */ #chord_grid td.cg_chord_label > a, #scale_grid td.cg_chord_label > a { display: block; padding: 4px 8px; height: 100%; text-decoration: none; box-sizing: border-box; } #chord_grid tr > td.cg_chord_label:first-child > a, #scale_grid tr > td.cg_chord_label:first-child > a { text-align: right; } #chord_grid tr > td.cg_chord_label:last-child > a, #scale_grid tr > td.cg_chord_label:last-child > a { text-align: left; } /* When a chord/scale is the active selection, paint the whole label cell like a highlighted pill so the grid mirrors the pill row state at a glance. */ #chord_grid td.cg_selected, #scale_grid td.cg_selected { background: var(--accent-hi); } #chord_grid td.cg_selected > a, #scale_grid td.cg_selected > a { color: #000 !important; font-weight: 600; } /* And paint the empty (#_x_) cells in the selected row the same accent so the entire row reads as one highlighted band. The filled note cells keep their per-degree colours since those carry information. */ #chord_grid tr.cg_row_selected #_x_, #scale_grid tr.cg_row_selected #_x_ { background: var(--accent-hi) !important; } /* Muted internal cell borders + soft corners for the fretboard and the flipped chord / scale grids. Their tabletop is #a8a8a8; #2e2e2e on top reads as black, so step it up to a light grey that just hints at the cell edges. */ /* Cells get no individual border — the table bg shows through the 1px border-spacing as a thin dark grout between every cell. */ #fretboard td, #chord_grid td, #scale_grid td { border: 0 !important; } #fretboard, #chord_grid, #scale_grid { border: 0 !important; } /* Cells without an explicit background (chord/scale name labels and degree header rows) need one too so they don't show through as the dark grout. */ #chord_grid .cg_chord_label, #chord_grid .cg_deg_header, #scale_grid .cg_chord_label, #scale_grid .cg_deg_header, #chord_grid .cg_corner_label, #scale_grid .cg_corner_label { background-color: #a8a8a8; } /* Section-name corner labels in the chord/scale grids — quieter than the degree headers, italic so they read as a note about what the grid is. */ #chord_grid .cg_corner_label, #scale_grid .cg_corner_label { color: #555; font: italic 600 0.78em var(--font); letter-spacing: 0.06em; text-transform: uppercase; text-align: center; } #fretboard td, #chord_grid td, #scale_grid td { border-radius: 3px; } /* Cell spacing so the rounded corners actually show up between neighbours instead of butting up against each other. */ #fretboard, #chord_grid, #scale_grid { border-spacing: 1px; } /* Consistent row heights inside the chord and scale builder grids so the data cells feel as deliberate as the fretboard's fret rows. */ /* Both grids now have the same column count and the same cell-content shape (e.g. "F♯(9)"), so they read with one font size and one row height across the board. */ #chord_grid tr, #scale_grid tr { height: 26px; } #chord_grid td, #scale_grid td { font-size: 0.85em; } /* Compact-mode toggle button: lives in each grid section's header before the Key picker. Clicking it flips between full-grid and stacked-cell modes — icon swaps to mirror the action available on next click. */ .section_compact { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 22px; padding: 0; margin-right: 4px; vertical-align: middle; border-radius: 6px; border: 1px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.18); color: #fff; cursor: pointer; } .section_compact:hover { background: rgba(255,255,255,0.4); border-color: #fff; } .section_compact_on { background: var(--accent-hi); border-color: var(--accent-hi); color: #001014; } .section_compact_on:hover { background: var(--accent-hi); border-color: #fff; } .section_compact svg { fill: currentColor; display: block; } /* In compact mode each row has a different filled-cell count, but every cell keeps a fixed width so the populated cells still line up vertically across rows even though the row's total length varies. */ #chord_grid.cg_compact, #scale_grid.cg_compact { table-layout: auto; min-width: 0; width: auto; margin-left: 14px; } #chord_grid.cg_compact td, #scale_grid.cg_compact td { width: 64px; min-width: 64px; max-width: 64px; padding: 0; } #chord_grid.cg_compact .cg_chord_label, #scale_grid.cg_compact .cg_chord_label { width: 88px !important; min-width: 88px; max-width: 88px; } /* "All" pill in the highlight row — matches the .hl_pill chips but acts as a link (no checkbox inside). */ .hl_all_pill { color: var(--text) !important; text-decoration: none; cursor: pointer; } /* Pin the fretboard row + cell heights so the table doesn't grow/shrink when the highlight state changes between renders. box-sizing keeps any border inside the cell so it doesn't add to the row size. */ #fretboard tr { height: 32px; } #fretboard #fretnums { height: 24px; } #fretboard td { box-sizing: border-box; } /* Highlighted-degree markers on the fretboard: now signalled only by the cell's degree-coloured background — no yellow ring. */ /* Quick-pick chord + scale link strip above the fretboard. Same href logic as the chord/scale builder grid title rows; selected state shows the same yellow ring + bold text. */ #quick_picks, #kb_quick_picks { padding: 6px 14px 4px; display: flex; flex-direction: column; gap: 4px; } #quick_picks .qp_row, #kb_quick_picks .qp_row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; line-height: 1; } #quick_picks .qp_link, #kb_quick_picks .qp_link { display: inline-block; padding: 3px 9px; font-size: 0.85em; color: var(--text) !important; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; text-decoration: none; transition: background .12s, border-color .12s; } #quick_picks .qp_link:hover, #kb_quick_picks .qp_link:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3);} #quick_picks .qp_link.cg_selected, #kb_quick_picks .qp_link.cg_selected { background: var(--accent-hi) !important; color: #000 !important; border-color: var(--accent-hi) !important; } /* Highlight-degree row — used both inside the fretboard form (.fb_hl_row) and above the keyboard's quick picks (.kb_hl_row). Pills are toggle links: clicking flips just that degree in the URL, then the link interceptor re-renders in place (no scroll jump). On-state pills are coloured per-degree via inline styles set by highlightPillsLinkHtml. */ /* Both pill rows (notes + degrees) use the same 12-column grid so each note pill sits directly above its matching degree pill. Stacked tightly with no padding between rows — they read as one block. */ .opt_row_highlights.kb_hl_row, .opt_row_highlights.fb_hl_row, .opt_row_notes.kb_hn_row, .opt_row_notes.fb_hn_row { display: grid; grid-template-columns: repeat(12, 44px); justify-content: center; align-items: center; gap: 4px; padding: 1px 14px; line-height: 1; background: transparent; border-radius: 0; } /* Shared All / None row — flex, centred. Inherits .hl_pill styling so the buttons match the pill rows above. */ .opt_row_allnone { display: flex; gap: 6px; justify-content: center; padding: 4px 14px; line-height: 1; } .opt_row_allnone a.hl_pill { display: inline-block; padding: 3px 12px; font-size: 0.85em; color: var(--text) !important; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; text-decoration: none; transition: background .12s, border-color .12s; } .opt_row_allnone a.hl_pill:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3);} /* Wrap the keyboard's mirror controls in the same padded container as the fretboard form (#tunings_drop), so the highlight strip + chord/scale chip rows have matching side margins and a consistent gap below. */ #kb_picks_root { display: flex; flex-direction: column; gap: 5px; padding: 10px 18px 14px; } .opt_row_highlights .hl_title { color: var(--muted); font: 600 0.78em var(--font); letter-spacing: 0.06em; text-transform: uppercase; padding-right: 4px; } .opt_row_highlights a.hl_pill { display: block; padding: 3px 4px; font-size: 0.85em; text-align: center; color: var(--text) !important; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; text-decoration: none; transition: background .12s, border-color .12s; } .opt_row_highlights a.hl_pill:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3);} .opt_row_highlights a.hl_pill_on { font-weight: 600; } .opt_row_highlights a.hl_all_pill, .opt_row_highlights a.hl_none_pill { margin-left: 0; } /* Note-letter highlight row — drives the same hl= state as the degree pill row below it. The on-state colour matches the degree's pill colour (applied inline by notePillsLinkHtml) so the two rows agree visually when the same item is engaged. The row sits flush against the degree row beneath with no extra padding between. */ .opt_row_notes .hl_title { color: var(--muted); font: 600 0.78em var(--font); letter-spacing: 0.06em; text-transform: uppercase; padding-right: 4px; } .opt_row_notes a.note_pill { display: block; padding: 3px 4px; font-size: 0.85em; text-align: center; color: var(--text) !important; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; text-decoration: none; transition: background .12s, border-color .12s; } .opt_row_notes a.note_pill:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3);} .opt_row_notes a.note_pill_on { font-weight: 600; } .opt_row_notes a.note_all_pill, .opt_row_notes a.note_none_pill { margin-left: 0; } /* Pull the degree-pill row right up under the note-pill row in both the fretboard and keyboard panes (no gap between the two views of the same selection). */ .opt_row_notes + .opt_row_highlights { padding-top: 4px; } /* Click-to-pick highlight for the chord identifier — fluorescent yellow. Inset shadow doesn't change cell dimensions (no layout shift). */ #fretboard td.note_pk { box-shadow: inset 0 0 0 3px #ffeb00; } #fretboard td[data-note] { cursor: pointer; } /* Keyboard pick ring uses the same yellow via a dynamic stylesheet rule added by applyKeyboardColors (see app.js). Cursor styling here so static keys still feel clickable. */ .ritz .waffle [data-note] { cursor: pointer; } /* ---------- Chord identify strip (below fretboard / keyboard) ---------- */ #fb_identify_root, #kb_identify_root { padding: 8px 18px 4px; } /* Per-strip control cluster (◀ / ▶ shift, ID toggle) — pinned to the right edge of the identify strip so it sits in the same plane as the section's print button. */ .identify_btns { position: absolute; top: 6px; right: 8px; display: inline-flex; align-items: center; gap: 4px; } .identify_toggle, .identify_shift, .identify_clear_btn { padding: 2px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.18); color: #fff; font: 600 0.78em var(--font); cursor: pointer; letter-spacing: 0.06em; } .identify_toggle:hover, .identify_shift:hover, .identify_clear_btn:hover { background: rgba(255,255,255,0.4); border-color: #fff; } .identify_toggle.on { background: var(--accent-hi); border-color: var(--accent-hi); color: #001014; } .identify_toggle.on:hover { background: #fff; border-color: #fff; color: #001014; } .identify_shift { padding: 2px 8px; } .identify_shift[disabled] { opacity: 0.35; cursor: default; } .identify_shift[disabled]:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.55); } @media print { .identify_btns { display: none !important; } } .identify_strip { position: relative; background: rgba(255,255,255,0.04); border-radius: 6px; padding: 10px 14px; font-size: 0.9em; line-height: 1.45; } .identify_hint { color: var(--muted); font-style: italic; } .identify_hint .identify_count { color: #ffeb00; } .identify_label { font: 600 0.78em var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-right: 8px; } .identify_head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.08); } .identify_picks { color: var(--text); font-weight: 600; } .identify_clear { color: var(--muted); font-size: 0.85em; text-decoration: underline; } .identify_clear:hover { color: var(--text); } .identify_row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .identify_bucket_label { font: 600 0.75em var(--font); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); min-width: 110px; } .identify_chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; } .identify_empty { color: var(--muted); font-style: italic; } .identify_chip { display: inline-block; padding: 2px 8px; font-size: 0.85em; color: var(--text) !important; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; text-decoration: none; transition: background .12s, border-color .12s; } .identify_chip:hover { background: rgba(255,235,0,0.15); border-color: #ffeb00; } a.identify_chip_on, a.identify_chip_on:link, a.identify_chip_on:visited, a.identify_chip_on:active { background: #ffeb00; color: #1a1a00 !important; border-color: #ffeb00; font-weight: 600; } .identify_extras_toggle { display: inline-flex; gap: 2px; margin-right: 4px; } .identify_pill { display: inline-block; padding: 1px 8px; font-size: 0.8em; color: var(--text) !important; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; text-decoration: none; } .identify_pill:hover { background: rgba(255,255,255,0.12); } a.identify_pill_on, a.identify_pill_on:link, a.identify_pill_on:visited, a.identify_pill_on:active { background: #ffeb00; color: #1a1a00 !important; border-color: #ffeb00; } @media print { #quick_picks, #kb_quick_picks, #kb_picks_root, #fb_identify_root, #kb_identify_root { display: none !important; } } /* ---------- Tuning picker (sortable / filterable popover) ---------- */ .tun_picker { position: relative; display: inline-block; flex: 0 1 auto; min-width: 320px; width: min(640px, 80vw); max-width: 100%; } .tun_picker_btn { display: flex; width: 100%; align-items: center; gap: 8px; padding: 4px 10px; min-height: 30px; cursor: pointer; text-align: left; background: var(--bg-elevated); color: var(--accent); border: 1px solid #2a2a2a; border-radius: 3px; font: 400 0.95em var(--font); } .tun_picker_btn:hover { border-color: var(--accent-hi); } .tun_picker_btn[aria-expanded="true"] { border-color: var(--accent-hi); } .tun_btn_main { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tun_btn_caret { color: var(--muted); flex: 0 0 auto; } .tun_hidden_select { display: none !important; } .tun_pop { position: absolute; top: calc(100% + 4px); left: 50%; right: auto; transform: translateX(-50%); z-index: 1500; width: min(900px, 96vw); max-height: 60vh; background: var(--surface); color: var(--accent); border: 1px solid #2a2a2a; border-radius: 6px; box-shadow: 0 12px 36px rgba(0,0,0,0.6); display: flex; flex-direction: column; overflow: hidden; } .tun_pop[hidden] { display: none !important; } .tun_pop_head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 6px; background: var(--bg-elevated); } .tun_pop_filter { flex: 1 1 auto; padding: 5px 8px; font: 400 0.9em var(--font); background: var(--bg); color: var(--accent); border: 1px solid #2a2a2a; border-radius: 3px; outline: none; } .tun_pop_filter:focus { border-color: var(--accent-hi); } .tun_pop_count { color: var(--muted-dim); font: 400 0.78em var(--font); flex: 0 0 auto; letter-spacing: 0.04em; } /* Quick string-count radio row sits just under the search input. One-tap filter for the most common case ("show me only 8-string tunings"). */ .tun_pop_strs { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; background: var(--bg-elevated); border-bottom: 1px solid #1f1f1f; } .tun_pop_str_btn { padding: 4px 12px; font: 400 0.82em var(--font); background: transparent; color: var(--muted); border: 1px solid #2a2a2a; border-radius: 999px; cursor: pointer; } .tun_pop_str_btn:hover { color: var(--accent-hi); border-color: var(--accent-hi); } .tun_pop_str_btn.active { background: var(--accent-hi); color: #000; border-color: var(--accent-hi); font-weight: 600; } .tun_pop_body { flex: 1 1 auto; overflow: auto; } /* table-layout: fixed makes the column widths defined on the th's actually stick. Without it, browsers ignore widths and let content drive layout. */ .tun_pop_table { width: 100%; table-layout: fixed; border-collapse: collapse; font: 400 0.85em var(--font); } .tun_pop_table th[data-col="strs"] { width: 36px; } .tun_pop_table th[data-col="name"] { width: 100px; } .tun_pop_table th[data-col="notes"] { width: 220px; } .tun_pop_table th[data-col="dgs"] { width: 130px; } /* Info column takes the remaining width via the implicit auto. */ .tun_pop_table thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-elevated); color: var(--muted); text-align: left; padding: 6px 10px; border-bottom: 1px solid #2a2a2a; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; user-select: none; } .tun_pop_table thead th.active { color: var(--accent-hi); } .tun_pop_table thead th:hover { color: var(--accent-hi); } .tun_pop_arrow { color: var(--accent-hi); margin-left: 2px; } .tun_pop_table tbody tr { cursor: pointer; } .tun_pop_table tbody td { padding: 5px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--accent); } .tun_pop_table tbody tr:hover td { background: rgba(95,232,224,0.08); } .tun_pop_table tbody tr.tun_pop_row_selected td { background: rgba(95,232,224,0.18); color: var(--accent-hi); } .tun_pop_table tbody tr:focus { outline: none; } .tun_pop_table tbody tr:focus td { background: rgba(95,232,224,0.14); } /* Tight Strings column — just wide enough for "12". */ .tun_pop_table th.c_strs_h, .tun_pop_table .c_strs { white-space: nowrap; color: var(--muted); width: 36px; min-width: 36px; max-width: 36px; padding-left: 8px; padding-right: 8px; text-align: left; } /* All other columns left-align text + cap their widths so the table reads compact. Long content truncates with an ellipsis. */ .tun_pop_table .c_name { white-space: nowrap; font-weight: 600; max-width: 100px; overflow: hidden; text-overflow: ellipsis; text-align: left; } .tun_pop_table .c_notes { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; text-align: left; } .tun_pop_table .c_dgs { white-space: nowrap; color: var(--muted); max-width: 130px; overflow: hidden; text-overflow: ellipsis; text-align: left; } .tun_pop_table .c_info { color: var(--muted); font-style: italic; text-align: left; } .tun_pop_empty { padding: 14px; text-align: center; color: var(--muted-dim); } @media print { .tun_pop, .tun_picker_btn { display: none !important; } } /* Tuning indicator on the Fretboard section title — sits inline with the title so users see the loaded tuning at a glance from that one section (the only place it's relevant). Reuses the muted-label / accent-value pattern other status readouts use. */ .summary_tuning { display: inline-flex; align-items: baseline; gap: 6px; margin-left: 12px; font: 400 0.82em var(--font); color: var(--muted); white-space: nowrap; } .summary_tuning .st_lab { color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85em; } .summary_tuning .st_val { color: var(--accent); font-weight: 600; } .summary_tuning .st_notes { color: var(--text); } .summary_tuning .st_dgs { color: var(--muted); } .summary_tuning .st_sep { color: var(--muted-dim); } .summary_tuning .st_chord { color: var(--accent-hi); font-weight: 600; } /* "custom" pill — only renders when z=y, so the user sees at a glance that the custom tuning path is active. */ .summary_tuning .st_custom_pill { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 8px; background: var(--accent-hi); color: #000; border-radius: 999px; font-size: 0.7em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .summary_tuning:empty { display: none; } /* The tunings list lives nested inside the Fretboard section; pad it in from the section's left/right edges and keep the top + bottom margins tight so it sits flush against the fretboard above. */ #section_5.nested_section { margin: 4px 18px 8px; } /* The nested Tunings header reads as a sub-section, not a top-level section, so trim its summary down — shorter height, smaller title + button row — to differentiate it visually. */ #section_5.nested_section > summary { height: 38px !important; padding: 4px 14px !important; font-size: 0.95em !important; /* Tinted bg so the nested Tunings header stands apart from the top-level section headers (which use --surface). */ background: #1f2a2a !important; border-bottom: 1px solid #2a3838 !important; } #section_5.nested_section > summary > .summary_title { font-size: 0.92em; } #section_5.nested_section > summary > .section_export, #section_5.nested_section > summary > .section_print, #section_5.nested_section > summary > .section_help { padding-top: 1px; padding-bottom: 1px; font-size: 0.72em; } /* Without a .summary_status spacer in this section's summary, the trailing buttons would sit right next to the title. Push the first one (CSV on tunings, ? on tab) to the right with margin-left:auto and the rest follow. */ #section_5.nested_section > summary > .section_export, #section_8 > summary > .section_help { margin-left: auto; } /* Top 4 keyboard rows (Octaves, Steel Gauges, 10-band EQ, Frequency Hz): force dark text so the numbers stay readable on the colored cell bgs the inline ritz CSS sets up. Higher specificity beats those .ritz .waffle colour rules. */ #keyboard > tbody > tr:nth-child(-n+4) > td, #keyboard > tbody > tr:nth-child(-n+4) > td.s0, #keyboard > tbody > tr:nth-child(-n+4) > td[class^="s"] { color: #1a1a1a !important; } /* Bottom 2 keyboard rows (Instrument Ranges — Guitar / Bass): same treatment. The "Guitar" / "Bass" labels and any future range text read as black. */ #keyboard > tbody > tr:nth-last-child(-n+2) > td, #keyboard > tbody > tr:nth-last-child(-n+2) > td.s0, #keyboard > tbody > tr:nth-last-child(-n+2) > td[class^="s"] { color: #1a1a1a !important; } /* Keyboard bookend cells: leftmost row labels (s0 = Octaves / EQ / etc., s11 = Steel Gauges, s31 = Black Keys label) and the rightmost trailing cells (s10/s21/s46) read as a neutral grey "header column" — distinct from both the page bg and the white piano keys. */ #keyboard > tbody > tr > td.s0, #keyboard > tbody > tr > td.s10, #keyboard > tbody > tr > td.s11, #keyboard > tbody > tr > td.s21, #keyboard > tbody > tr > td.s31, #keyboard > tbody > tr > td.s46 { background-color: #a8a8a8 !important; color: #1a1a1a !important; } /* Sortable header buttons */ table.sortable thead { background-color: rgba(95,232,224,0.06); } table.sortable th { font-size: 0.92em; font-weight: 600; border-bottom: 2px solid var(--border-strong) !important; } table.sortable th button { color: var(--text); font-weight: 600; } table.sortable th button:hover { color: var(--accent-hi); cursor: pointer; } table.sortable th[aria-sort] { background-color: rgba(95,232,224,0.12); } table.sortable th[aria-sort] button { color: var(--accent-hi); } /* Tunings table padding (was 6px 12px — keeps that, but lighter row separation) */ #tunings tbody tr { transition: background-color .1s; } #tunings tbody tr:hover { background-color: #1a1a1a !important; } /* Currently chosen tuning row: highlight border removed. */ /* Print resets so the polish doesn't show in print */ @media print { details.collapsible > summary { background: none !important; color: #000 !important; } .opt_row_highlights { background: none !important; } .hl_pill { background: none !important; border: none !important; } /* Force the fretboard contents to print whether or not the section is open */ details#section_2 > * { display: block !important; } details#section_2 > summary { display: none !important; } } /* ============================================================ Key Signatures section — side-by-side reference tables ============================================================ */ .ks_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 12px 18px; min-width: 0; max-width: 100%; box-sizing: border-box; } .ks_grid > * { min-width: 0; } /* New 2-column layout: combined key-sig table on the left, placeholder slot on the right. Each side gets exactly half the section width. */ .ks_layout { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 12px 18px; min-width: 0; max-width: 100%; box-sizing: border-box; } .ks_layout > * { min-width: 0; } .ks_side { background: var(--bg-elevated); border: 1px solid #2a2a2a; border-radius: 6px; min-height: 200px; display: flex; flex-direction: column; align-items: center; padding: 18px; gap: 14px; } /* "In major" sits inside .ks_side directly below the SVG, full width, no extra panel chrome (the .ks_side already provides it). */ .ks_in_side { width: 100%; background: none !important; border: none !important; padding: 0 4px !important; } .ks_in_side .kx_dl { font-size: 0.88em; } /* Circle of Fifths SVG — interactive, click-to-set-key wedges. */ .cof_svg { width: 100%; max-width: 380px; height: auto; display: block; } .cof_wedge { cursor: pointer; outline: none; } .cof_wedge path { transition: fill 120ms ease; } .cof_wedge:hover path { fill: rgba(95,232,224,0.14); } .cof_wedge.cof_active path { fill: rgba(95,232,224,0.28); } .cof_lab { fill: var(--text); font-family: var(--font); font-weight: 700; pointer-events: none; user-select: none; } .cof_lab_maj { font-size: 18px; } .cof_lab_min { font-size: 13px; fill: var(--muted); } .cof_lab_enh { font-size: 11px; fill: var(--muted-dim); } .cof_lab_deg { font-size: 10px; fill: var(--muted); font-weight: 400; font-style: italic; letter-spacing: 0.02em; } .cof_wedge:hover .cof_lab { fill: var(--accent-hi); } .ks_panel { background: var(--bg-elevated); border: 1px solid #2a2a2a; border-radius: 6px; overflow: hidden; /* Grid items default to `min-width: auto`, which lets them grow past their `1fr` allocation if their content (the table) is wider. min-width: 0 forces the panel to obey its 1fr share so the table inside can't push it wider than half the grid. */ min-width: 0; } .ks_panel_title { padding: 8px 12px; font: 600 0.78em var(--font); color: var(--accent-hi); letter-spacing: 0.08em; text-transform: uppercase; background: #161616; border-bottom: 1px solid #1f1f1f; } .ks_table { width: 100%; max-width: 100%; min-width: 0; border-collapse: collapse; table-layout: auto; font: 400 1.15em var(--font); color: var(--accent); } .ks_table .ks_col_key { width: 64px; } .ks_table .ks_col_sig_count { width: 26px; } .ks_table .ks_col_sig_staff { width: 50px; } .ks_table .ks_col_sig_hand { width: 44px; } /* ks_col_notes width is intentionally unset → it absorbs all remaining panel width so the longest accidentals string ("B♭ E♭ A♭ D♭ G♭ C♭") never clips. */ .ks_table thead th { text-align: center; padding: 6px 12px; font: 600 0.78em var(--font); color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; background: #131313; } .ks_table tbody td { padding: 6px 12px; border-bottom: 1px solid #1f1f1f; } .ks_table tbody tr:last-child td { border-bottom: none; } .ks_table tbody tr.ks_row_current td { background: rgba(95,232,224,0.14); color: var(--accent-hi); font-weight: 600; } .ks_table tbody tr:hover td { background: rgba(255,255,255,0.04); } .ks_table .ks_key { white-space: nowrap; } .ks_table .ks_key a, .ks_table .ks_notes a { color: inherit; text-decoration: none; display: block; } .ks_table .ks_key a:hover, .ks_table .ks_notes a:hover { color: var(--accent-hi); } .ks_table .ks_key .ks_major { color: var(--muted-dim); font-size: 0.85em; margin-left: 2px; } /* Three sub-cells under the single "Signature" header. Each piece keeps its own grid track so values line up vertically across rows, but the sub-cells share borders so the trio reads as one column visually. */ .ks_table .ks_sig { text-align: center; } .ks_table tbody .ks_sig_count, .ks_table tbody .ks_sig_staff, .ks_table tbody .ks_sig_hand { padding: 4px 6px; vertical-align: middle; text-align: center; } .ks_table tbody .ks_sig_count { color: var(--text); font-weight: 600; padding-left: 4px; padding-right: 4px; } .ks_table tbody .ks_sig_staff { color: var(--text); padding-left: 0; padding-right: 0; } .ks_table tbody .ks_sig_hand { padding-left: 0; padding-right: 4px; } /* Staff + hand glyph sizes scaled up to match the larger 1.15em font. */ .ks_table .ks_staff { transform: scale(0.85); transform-origin: left center; } .ks_table .ks_fingers { margin-left: 0; } .ks_table .ks_hand { width: 26px; height: 26px; background-size: 130px 26px; } .ks_table .ks_hand_1 { background-position: 0 0; } .ks_table .ks_hand_2 { background-position: -26px 0; } .ks_table .ks_hand_3 { background-position: -52px 0; } .ks_table .ks_hand_4 { background-position: -78px 0; } .ks_table .ks_hand_5 { background-position: -104px 0; } .ks_staff { color: var(--text); display: inline-block; vertical-align: middle; } /* Jazz hand-signal indicator: sprite from img/fingers-{up,down}.png. Each sprite is 5 panels side by side (1, 2, 3, 4, 5 fingers). The display size below scales the source 1164×233 sprite down to 140×28 (so each panel = 28×28). Counts 6 / 7 render two .ks_hand spans side by side. */ .ks_fingers { display: inline-flex; align-items: center; gap: 0; vertical-align: middle; } .ks_hand { display: inline-block; width: 28px; height: 28px; background-repeat: no-repeat; background-size: 140px 28px; flex-shrink: 0; } .ks_hand_up { background-image: url(../img/fingers-up.png); } .ks_hand_down { background-image: url(../img/fingers-down.png); } .ks_hand_1 { background-position: 0 0; } .ks_hand_2 { background-position: -28px 0; } .ks_hand_3 { background-position: -56px 0; } .ks_hand_4 { background-position: -84px 0; } .ks_hand_5 { background-position: -112px 0; } .ks_hand_mirror { transform: scaleX(-1); } .ks_table .ks_notes { color: var(--text); /* Allow wrapping if needed so the longest accidentals string ("B♭ E♭ A♭ D♭ G♭ C♭") never forces the table wider than the panel — content-driven width has no min-width with normal wrapping, so the table can shrink to its container. */ white-space: normal; word-spacing: 0.05em; /* Accidentals column lives on the LEFT of the table; right-align so the rightmost characters sit adjacent to the Key column. */ text-align: right; padding-right: 14px; min-width: 0; } .ks_table thead th.ks_notes { text-align: right; } /* Light, desaturated tints for the seven natural letters in the accidentals column — picks colour-by-letter so the same note keeps the same colour across rows. Soft enough to read on the dark panel. */ .ks_acc { font-weight: 600; } .ks_acc_F { color: #f3c89e; } /* peach */ .ks_acc_C { color: #efe4a3; } /* cream */ .ks_acc_G { color: #b8dfb0; } /* mint */ .ks_acc_D { color: #a8d8d8; } /* aqua */ .ks_acc_A { color: #a8c4e0; } /* sky */ .ks_acc_E { color: #c8b4e0; } /* lavender */ .ks_acc_B { color: #e8b8cc; } /* rose */ /* ============================================================== */ /* Music-theory teaching panels */ /* ============================================================== */ /* ----- Diatonic Chord Chart (inside Chord Builder) ----- */ .dia_chart { padding: 12px 18px; background: rgba(255,255,255,0.02); border-top: 1px solid rgba(255,255,255,0.05); } .dia_head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .dia_title { font: 600 0.92em var(--font); color: var(--accent-hi); letter-spacing: 0.04em; } .dia_toggle { padding: 2px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.18); color: #fff; font: 600 0.78em var(--font); cursor: pointer; letter-spacing: 0.06em; margin-left: auto; } .dia_toggle:hover { background: rgba(255,255,255,0.4); border-color: #fff; } .dia_toggle.on { background: var(--accent-hi); border-color: var(--accent-hi); color: #001014; } .dia_row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 10px; } .dia_cell { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: var(--text); text-decoration: none; transition: background 100ms; } .dia_cell:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.3); } .dia_roman { font: 600 1.05em var(--font); letter-spacing: 0.03em; } /* Fixed-width label so a ♯-containing chord name (e.g. "C♯m") doesn't reflow the cell vs a plain one ("C"). Same trick on every place that shows a key-derived note label below. */ .dia_chord { font: 600 1.1em var(--font); margin: 4px 0 2px; display: inline-block; min-width: 3.2em; text-align: center; } .dia_fn { font: 600 0.7em monospace; letter-spacing: 0.1em; padding: 1px 6px; border-radius: 8px; opacity: 0.85; } /* Function colour bands — light, desaturated. */ .dia_fn_T { border-color: rgba(168, 196, 224, 0.35); } .dia_fn_T .dia_fn { background: rgba(168, 196, 224, 0.22); color: #cfe0f0; } .dia_fn_S { border-color: rgba(184, 223, 176, 0.35); } .dia_fn_S .dia_fn { background: rgba(184, 223, 176, 0.22); color: #d4ecc8; } .dia_fn_D { border-color: rgba(232, 184, 204, 0.35); } .dia_fn_D .dia_fn { background: rgba(232, 184, 204, 0.22); color: #f4d2dd; } .dia_legend { display: flex; gap: 14px; align-items: center; font: 400 0.78em var(--font); color: var(--muted); } .dia_swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; } .dia_swatch.dia_fn_T { background: #a8c4e0; } .dia_swatch.dia_fn_S { background: #b8dfb0; } .dia_swatch.dia_fn_D { background: #e8b8cc; } /* ----- Inversions Panel (inside Chord Builder) ----- */ .inv_panel { padding: 10px 18px; } .inv_intro { font: 400 0.85em var(--font); color: var(--muted); margin-bottom: 8px; } .inv_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; } .inv_cell { padding: 8px; border-radius: 6px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); } .inv_label { font: 600 0.78em var(--font); color: var(--accent-hi); letter-spacing: 0.04em; margin-bottom: 6px; } .inv_notes { display: flex; gap: 6px; margin-bottom: 4px; } .inv_note { padding: 2px 8px; border-radius: 4px; background: rgba(255,255,255,0.08); font-weight: 600; } .inv_note_bass { background: var(--accent-hi); color: #001014; } .inv_bass { font: 400 0.75em var(--font); color: var(--muted); } /* ----- Progressions Section ----- */ .prog_panel { padding: 8px 18px; } .prog_intro { font: 400 0.88em var(--font); color: var(--muted); margin-bottom: 12px; } .prog_row { display: grid; grid-template-columns: 220px 1fr; gap: 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.04); } .prog_row:last-child { border-bottom: none; } .prog_meta { display: flex; align-items: center; gap: 8px; } .prog_play { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.08); color: #fff; cursor: pointer; font-size: 0.75em; line-height: 1; } .prog_play:hover { background: var(--accent-hi); color: #001014; border-color: var(--accent-hi); } .prog_name { font: 600 0.92em var(--font); } .prog_style { font: 400 0.78em var(--font); color: var(--muted); } .prog_chords { display: flex; flex-wrap: wrap; gap: 6px; } .prog_chip { display: inline-flex; flex-direction: column; align-items: center; padding: 4px 10px; border-radius: 6px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: var(--text); text-decoration: none; min-width: 44px; } .prog_chip:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.3); } .prog_chip_roman { font: 600 0.78em var(--font); color: var(--accent-hi); letter-spacing: 0.04em; } .prog_chip_name { font: 600 0.92em var(--font); display: inline-block; min-width: 2.4em; text-align: center; } /* ----- Modes Visualizer (inside Scale Builder) ----- */ .modes_panel { padding: 12px 18px; background: rgba(255,255,255,0.02); border-top: 1px solid rgba(255,255,255,0.05); } .modes_intro { font: 400 0.85em var(--font); color: var(--muted); margin-bottom: 10px; } .modes_grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .mode_cell { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 6px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: var(--text); text-decoration: none; } .mode_cell:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.3); } .mode_cell.mode_major { border-color: rgba(184, 223, 176, 0.35); } .mode_cell.mode_minor { border-color: rgba(168, 196, 224, 0.35); } .mode_root { font: 700 1.1em var(--font); display: inline-block; min-width: 1.6em; text-align: center; } .mode_name { font: 600 0.85em var(--font); color: var(--accent-hi); margin: 4px 0 2px; } .mode_sig { font: 600 0.72em monospace; color: var(--muted-dim); letter-spacing: 0.02em; min-height: 1em; } .mode_char { font: 400 0.7em monospace; color: var(--muted); margin-top: 2px; min-height: 1em; } /* Chord / scale grid label cells: stack the chord/scale name above its degree formula (and step pattern for scales) inside the same . */ .cg_label_name { display: block; font-weight: 600; } .cg_label_formula { display: block; font: 400 0.72em monospace; color: var(--muted-dim); letter-spacing: 0.02em; margin-top: 1px; } .cg_label_steps { display: block; font: 400 0.66em monospace; color: var(--muted-dim); letter-spacing: 0.02em; } #chord_grid td.cg_selected .cg_label_formula, #scale_grid td.cg_selected .cg_label_formula, #scale_grid td.cg_selected .cg_label_steps { color: rgba(0,16,20,0.7); } /* Slightly more vertical room for the stacked label content. */ #chord_grid tr, #scale_grid tr { height: auto; } #chord_grid td.cg_chord_label, #scale_grid td.cg_chord_label { padding: 4px 0; } /* Roman-numeral legend items inside the diatonic chart legend. */ .dia_legend_sep { width: 1px; height: 14px; background: rgba(255,255,255,0.15); margin: 0 4px; } .dia_legend_rn { font: 400 0.78em var(--font); color: var(--muted); } .dia_legend_rn strong { color: var(--accent-hi); font-weight: 700; } /* Relative-minor pairing on the key signatures table. */ .ks_table .ks_key .ks_relmin { color: var(--muted); font: 400 0.85em var(--font); margin-left: 4px; } /* Enharmonic-equivalents callout under the key sig table. */ .ks_enharm { padding: 8px 14px; margin: 8px 4px 4px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 6px; font: 400 0.82em var(--font); color: var(--muted); line-height: 1.45; } .ks_enharm strong { color: var(--accent-hi); font-weight: 700; } /* ----- Key Extras (inside Key Signatures) ----- */ .kx_panel { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 12px 18px; } .kx_right_stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .kx_block { background: var(--bg-elevated); border: 1px solid #2a2a2a; border-radius: 6px; padding: 12px 14px; } .kx_block_title { font: 600 0.85em var(--font); color: var(--accent-hi); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 10px; } .kx_dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: 0.9em; } .kx_dl dt { color: var(--muted); font-weight: 600; } .kx_dl dd { margin: 0; color: var(--text); } .kx_dl a { color: var(--accent-hi); text-decoration: none; } .kx_dl a:hover { text-decoration: underline; } .kx_cad_list { list-style: none; padding: 0; margin: 0; } .kx_cad_row { display: grid; grid-template-columns: 24px 80px 1fr; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.04); } .kx_cad_row:last-child { border-bottom: none; } .kx_cad_play { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.08); color: #fff; cursor: pointer; font-size: 0.7em; line-height: 1; } .kx_cad_play:hover { background: var(--accent-hi); color: #001014; border-color: var(--accent-hi); } .kx_cad_name_l { font: 600 0.88em var(--font); } .kx_cad_chips { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; } .kx_cad_chip { display: inline-flex; flex-direction: column; align-items: center; padding: 2px 8px; border-radius: 4px; background: rgba(255,255,255,0.06); font-size: 0.85em; } .kx_cad_roman { font: 600 0.7em var(--font); color: var(--accent-hi); letter-spacing: 0.04em; } .kx_cad_name { font-weight: 600; display: inline-block; min-width: 2.4em; text-align: center; } .kx_cad_arrow { color: var(--muted-dim); margin: 0 2px; } .kx_cad_desc { grid-column: 2 / -1; font: 400 0.78em var(--font); color: var(--muted-dim); } .kx_intv_table { width: 100%; border-collapse: collapse; font-size: 0.85em; } .kx_intv_table td { padding: 3px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); } .kx_intv_short { font: 600 0.95em monospace; color: var(--accent-hi); width: 56px; text-align: right; } .kx_intv_long { color: var(--text); } .kx_intv_semi { color: var(--muted-dim); font: 400 0.85em var(--font); width: 70px; } .kx_intv_note { font-weight: 600; text-align: left; width: 80px; } @media print { .dia_toggle, .prog_play, .kx_cad_play { display: none !important; } } .ks_help { padding: 0 18px 14px; font: 400 0.82em var(--font); color: var(--muted); text-align: center; } /* Quiz: sub-showcase line shows the matching notes (or degrees) below the main showcase, dimmer so the question stays the focus. */ .quiz_showcase_sub { font: 400 0.95em var(--font); color: var(--muted); text-align: center; margin: 4px 0 8px; letter-spacing: 0.08em; min-height: 1.5em; } .quiz_showcase_sub_empty { visibility: hidden; } .quiz_showcase_sub .quiz_sub_label { color: var(--muted-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85em; margin-right: 4px; } /* Quiz skip button — sits below the answer choices, dim by default so it doesn't compete with the actual answers. */ .quiz_skip_row { display: flex; justify-content: center; margin-top: 12px; } .quiz_skip { padding: 6px 16px; font: 400 0.82em var(--font); color: var(--muted); background: transparent; border: 1px solid #2a2a2a; border-radius: 999px; cursor: pointer; letter-spacing: 0.04em; } .quiz_skip:hover { color: var(--accent-hi); border-color: var(--accent-hi); } /* ---------- Mobile hint banner ---------- Shown only on narrow viewports. Hidden on desktop and on landscape phones so it doesn't nag users who already have enough room to read. */ #mobile_hint { display: none; } /* ===================================================================== Mobile (< 700px wide). Desktop above stays untouched. The wide tables stay wide; their parent sections become horizontal-scroll containers so the user can swipe through them inside each card. Sections still stack vertically. Pills wrap, fonts shrink slightly, padding tightens. ===================================================================== */ @media (max-width: 700px) { #mobile_hint { display: block; padding: 10px 14px; background: rgba(255,235,0,0.10); color: #ffe680; border-bottom: 1px solid rgba(255,235,0,0.25); font-size: 0.85em; line-height: 1.35; } /* Section padding tightens; the inner tables get their own scroll. */ .section, .nested_section { padding-left: 6px; padding-right: 6px; } details > summary { font-size: 0.95em; } /* Wide reference tables: scroll horizontally inside their card so the viewport doesn't stretch sideways. The tables keep their min-width. */ #fretboard_root, #fb_identify_root, #kb_picks_root, #kb_identify_root, #keyboard_key_root, .ritz, #chord_grid_root, #scale_grid_root, #tunings_root { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100vw; } /* Identify-strip pills/chips wrap rather than overflow horizontally. */ .identify_strip { font-size: 0.85em; } .identify_chips { gap: 3px; } .identify_chip { font-size: 0.78em; padding: 2px 6px; } /* Quick-pick / pill rows — already wrap; just shrink the chip font so more fit per line. */ .qp_row a.qp_link { font-size: 0.78em; padding: 2px 6px; } .opt_row_highlights a.hl_pill, .opt_row_notes a.note_pill { font-size: 0.78em; padding: 2px 7px; } /* Keep the section title bar from overflowing on narrow screens — the status / tuning / extras spans collapse into smaller text. */ .summary_title { font-size: 1em; } .summary_status, .summary_tuning, .summary_extras { font-size: 0.78em; } /* Section help/print/CSV buttons shrink slightly on phone. */ .section_help, .section_print, .section_export { font-size: 0.75em; padding: 2px 6px; } /* Site title — keep impact but no longer dominates the viewport. */ #site_title { font-size: 1.5em; margin: 8px 12px; } /* Body padding is tiny so there's no double-margin against the section scroll containers. */ body { padding: 0; margin: 0; } } /* Landscape phones get more room — kill the hint banner since the wide tables fit roughly 1:1 in landscape on most modern phones. */ @media (max-width: 900px) and (orientation: landscape) { #mobile_hint { display: none; } } /* ====================================================================== */ /* Per-section dark tints — subtle hue shift so each section reads as */ /* its own panel. Body + summary header + border all pick up the tint */ /* from --tint-body / --tint-head / --tint-border tokens defined per */ /* section ID. Print mode's `.section { background: none !important }` */ /* rule still wins (it uses !important; we don't), so paper output is */ /* unaffected. */ /* ====================================================================== */ /* Feature-flag gating. Mark DOM nodes with class="feature_" — the matching `body[data-features~=""]` rule un-hides them once js/features.js decides the feature is visible (per its stage table: 'admin' / 'public' / 'hidden'). Adding a new feature gate is two lines here + an entry in js/features.js's FLAGS table. */ .feature_tab, .feature_sheetmusic { display: none; } body[data-features~="tab"] .feature_tab { display: block; } body[data-features~="sheetmusic"] .feature_sheetmusic { display: block; } #section_2 { --tint-body: #0e1628; --tint-head: #1e2640; --tint-border: #1a223a; /* Fretboard — blue */ } #section_5 { --tint-body: #161e34; --tint-head: #242e4c; --tint-border: #1f2a48; /* Tunings — lt blue */ } #section_4 { --tint-body: #061a1c; --tint-head: #163032; --tint-border: #142a2c; /* Keyboard — teal */ } #section_3 { --tint-body: #1c0e1c; --tint-head: #321c34; --tint-border: #2c1a30; /* Chord — plum */ } #section_6 { --tint-body: #08180c; --tint-head: #182e1e; --tint-border: #14281a; /* Scale — forest */ } #section_8 { --tint-body: #1e1608; --tint-head: #322820; --tint-border: #2c241a; /* Tab — amber */ } #section_9 { --tint-body: #100e22; --tint-head: #221c3c; --tint-border: #1f1d36; /* Key sigs — indigo */ } #section_7 { --tint-body: #1c0a10; --tint-head: #34181e; --tint-border: #2c1820; /* Learn — maroon */ } #section_10 { --tint-body: #14181e; --tint-head: #242a36; --tint-border: #1f2532; /* Sheet music — slate */ } #section_11 { --tint-body: #1a141e; --tint-head: #2e2438; --tint-border: #281f30; /* Progressions — orchid */ } .sm_placeholder { padding: 24px 32px; color: var(--muted); font: 400 0.95em var(--font); line-height: 1.55; max-width: 720px; margin: 0 auto; } .sm_header { display: flex; align-items: center; gap: 12px; padding: 12px 18px; flex-wrap: wrap; border-bottom: 1px solid var(--tint-border); } .sm_search { flex: 1 1 280px; min-width: 200px; height: 32px; padding: 0 12px; font: 400 0.95em var(--font); background: #0b0e14; color: var(--text); border: 1px solid #2a3344; border-radius: 4px; } .sm_search:focus { outline: none; border-color: var(--accent-hi); } .sm_only_label { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 0.85em; cursor: pointer; white-space: nowrap; } .sm_conf, .sm_book { background: #0b0e14; color: var(--text); border: 1px solid #2a3344; border-radius: 4px; font: 400 0.85em var(--font); padding: 4px 8px; height: 32px; cursor: pointer; } .sm_conf:focus, .sm_book:focus { outline: none; border-color: var(--accent-hi); } .sm_book { max-width: 240px; } .sm_stats { color: var(--muted); font-size: 0.78em; margin-left: auto; } .sm_split { display: grid; grid-template-columns: 360px 1fr; min-height: 480px; height: 70vh; } .sm_results { overflow-y: auto; border-right: 1px solid var(--tint-border); } .sm_empty { padding: 24px 16px; color: var(--muted); font-style: italic; text-align: center; font-size: 0.9em; } .sm_row { padding: 8px 14px; border-bottom: 1px solid #1a2030; cursor: pointer; display: flex; gap: 8px; align-items: center; justify-content: space-between; } .sm_row:hover { background: rgba(95,232,224,0.08); } .sm_row.active { background: rgba(95,232,224,0.18); } .sm_row_title { color: var(--text); font-weight: 600; font-size: 0.95em; } .sm_row_book { color: var(--muted); font-size: 0.78em; margin-top: 2px; } .sm_row_key { color: var(--accent-hi); font-size: 0.85em; white-space: nowrap; } .sm_badge { color: var(--accent-hi); font-size: 0.85em; } .sm_viewer { overflow-y: auto; padding: 14px 18px; } .sm_head { margin-bottom: 12px; } .sm_title { font: 700 1.15em var(--font); color: var(--text); margin-bottom: 4px; } .sm_meta { color: var(--muted); font-size: 0.85em; } .sm_meta b { color: var(--accent-hi); font-weight: 700; } .sm_meta button { background: rgba(255,255,255,0.06); border: 1px solid rgba(95,232,224,0.30); color: var(--accent-hi); padding: 0 6px; height: 19px; line-height: 17px; font: 600 0.82em var(--font); border-radius: 3px; cursor: pointer; vertical-align: baseline; margin: 0 1px; } .sm_meta button:hover { background: rgba(95,232,224,0.18); color: #fff; } .sm_keylabel { display: inline-block; min-width: 5.5em; text-align: center; } .sm_meta select.sm_barmode { background: rgba(255,255,255,0.06); color: var(--accent-hi); border: 1px solid rgba(95,232,224,0.30); border-radius: 3px; font: 600 0.82em var(--font); padding: 1px 4px; height: 19px; cursor: pointer; vertical-align: baseline; margin: 0 1px; } .sm_meta select.sm_barmode:focus { outline: none; border-color: var(--accent-hi); } .sm_chartwrap { padding-top: 4px; } .sm_chart { display: flex; flex-direction: column; gap: 10px; background: rgba(0,0,0,0.35); padding: 12px 14px; border-radius: 4px; overflow-x: auto; } .sm_chart_line { display: flex; gap: 22px; align-items: stretch; } .sm_four { display: flex; } .sm_bar { padding: 4px 12px; border-left: 1px solid rgba(255,255,255,0.30); min-width: 56px; } .sm_four:first-child > .sm_bar:first-child { border-left: 2px solid rgba(255,255,255,0.6); } .sm_four:last-child > .sm_bar:last-child { border-right: 2px solid rgba(255,255,255,0.6); padding-right: 12px; } .sm_chord_row { display: flex; gap: 8px; color: #f0f0f0; font-weight: 600; font-size: 0.95em; min-height: 1.2em; } .sm_deg_row { display: flex; gap: 8px; color: var(--accent-hi); margin-top: 4px; min-height: 1.2em; align-items: baseline; } .sm_deg_root { font-size: 1.05em; font-weight: 700; } .sm_deg_suffix { font-size: 0.72em; vertical-align: super; opacity: 0.95; } .sm_chord, .sm_deg_unit { white-space: nowrap; } .sm_notes { color: var(--muted); font-size: 0.82em; font-style: italic; margin-top: 8px; } /* Inline edit panel — admin only. Reveals replacing the chart. */ .sm_edit_btn { background: rgba(255,255,255,0.06); color: var(--accent-hi); border: 1px solid rgba(95,232,224,0.30); border-radius: 3px; font: 600 0.82em var(--font); padding: 0 8px; height: 19px; line-height: 17px; cursor: pointer; vertical-align: baseline; } .sm_edit_btn:hover { background: rgba(95,232,224,0.18); color: #fff; } .sm_edit { background: rgba(0,0,0,0.35); border-radius: 4px; padding: 12px 14px; margin-top: 10px; display: flex; flex-direction: column; gap: 10px; } .sm_edit_label { display: flex; flex-direction: column; gap: 4px; } .sm_edit_lbl { color: var(--muted); font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .sm_edit_hint { color: var(--muted-dim); font-size: 0.78em; font-style: italic; } .sm_edit_chords { width: 100%; box-sizing: border-box; background: #0b0e14; color: var(--text); border: 1px solid #2a3344; border-radius: 4px; padding: 8px 10px; font: 400 0.95em ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; line-height: 1.4; resize: vertical; min-height: 100px; } .sm_edit_chords:focus { outline: none; border-color: var(--accent-hi); } .sm_edit_row { display: flex; gap: 12px; flex-wrap: wrap; } .sm_edit_field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 140px; } .sm_edit_field input, .sm_edit_field select { height: 30px; padding: 0 8px; box-sizing: border-box; background: #0b0e14; color: var(--text); border: 1px solid #2a3344; border-radius: 4px; font: 400 0.9em var(--font); } .sm_edit_field input:focus, .sm_edit_field select:focus { outline: none; border-color: var(--accent-hi); } .sm_edit_actions { display: flex; align-items: center; gap: 8px; } .sm_save, .sm_cancel { height: 30px; padding: 0 14px; cursor: pointer; border-radius: 4px; font: 600 0.9em var(--font); } .sm_save { background: var(--accent-hi); color: #001014; border: 1px solid var(--accent-hi); } .sm_save:hover { background: #fff; border-color: #fff; } .sm_save:disabled { opacity: 0.6; cursor: not-allowed; } .sm_cancel { background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid #2a3344; } .sm_cancel:hover { border-color: var(--accent-hi); color: var(--accent-hi); } .sm_edit_status { color: var(--muted); font-size: 0.85em; margin-left: auto; font-style: italic; } @media print { #section_10 { display: none !important; } } @media (max-width: 900px) { .sm_split { grid-template-columns: 1fr; height: auto; } .sm_results { max-height: 320px; border-right: none; border-bottom: 1px solid var(--tint-border); } } #section_2, #section_3, #section_4, #section_5, #section_6, #section_7, #section_8, #section_9, #section_10, #section_11 { background-color: var(--tint-body); border-color: var(--tint-border); } #section_2 > summary, #section_3 > summary, #section_4 > summary, #section_5 > summary, #section_6 > summary, #section_7 > summary, #section_8 > summary, #section_9 > summary, #section_10 > summary, #section_11 > summary { background: var(--tint-head); } /* Hover on the section title — keep the same accent feel but lift slightly above the (now tinted) header so the click target still reads as live. */ #section_2 > summary:hover, #section_3 > summary:hover, #section_4 > summary:hover, #section_5 > summary:hover, #section_6 > summary:hover, #section_7 > summary:hover, #section_8 > summary:hover, #section_9 > summary:hover, #section_10 > summary:hover, #section_11 > summary:hover { background: var(--tint-head); } /* ====================================================================== */ /* Auth widget — top-right Clerk sign-in / signed-in pill. */ /* Filled in by js/auth.js once Clerk JS finishes loading. */ /* ====================================================================== */ #auth_widget { position: fixed; top: 8px; right: 12px; z-index: 1500; } .auth_loading { color: var(--muted); font-size: 0.78em; opacity: 0.6; padding: 4px 8px; } .auth_btn { font: 600 0.85em var(--font); padding: 4px 10px; height: 26px; background: rgba(255,255,255,0.10); color: var(--accent); border: 1px solid rgba(95,232,224,0.40); border-radius: 4px; cursor: pointer; } .auth_btn:hover { background: rgba(95,232,224,0.20); color: #fff; border-color: var(--accent-hi); } .auth_signin { background: rgba(95,232,224,0.18); } .auth_user { background: rgba(95,232,224,0.25); color: #001014; font-weight: 700; min-width: 50px; } .auth_pill { position: relative; display: inline-block; } .auth_menu { position: absolute; top: 100%; right: 0; margin-top: 4px; min-width: 140px; background: #1a1a1a; border: 1px solid #333; border-radius: 4px; box-shadow: 0 6px 20px rgba(0,0,0,0.5); padding: 4px; z-index: 1600; } .auth_menu[hidden] { display: none; } .auth_menu_item { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); font: 400 0.85em var(--font); padding: 6px 10px; border-radius: 3px; cursor: pointer; } .auth_menu_item:hover { background: rgba(95,232,224,0.18); color: var(--accent-hi); } @media print { #auth_widget { display: none !important; } }