/* Self-hosted Outfit — latin-ext (Spanish diacritics) */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/outfit-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Self-hosted Outfit — latin */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/outfit-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --primary-color: #D4B483; --primary-hover: #C4A473; --card-bg: #3C3832; --text-main: #F0ECE6; --text-muted: #9A9590; --border-color: #4A4540; --font-family: 'Outfit', sans-serif; --font-mono: 'Courier New', Courier, monospace; /* Type scale */ --text-xs: 0.7rem; --text-sm: 0.82rem; --text-base: 1rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem; --sticky-nav-bg: color-mix(in srgb, var(--card-bg) 80%, var(--surface)); /* Ink — text on light surfaces */ --ink: #2a2420; --ink-soft: #4a3a2a; --ink-muted: #5a4a3a; --ink-faint: #6b5b4b; /* Warm — text on dark surfaces */ --warm-light: #f0ece4; --warm-mid: #b5a99a; --warm-dim: #a8967e; /* Surfaces */ --surface: #2A2622; --surface-ui: #484340; --surface-light: #DDD8CC; /* Highlight — lyric matches, inline links */ --link-color: #c47500; /* Text on primary-colored backgrounds */ --on-primary: #1e293b; /* Avatar (lyrics artist cards) */ --avatar-bg: #5D5850; --avatar-fg: #F0ECE4; --avatar-mid: #867566; /* Hover tint — white in dark mode, black in light mode */ --hover-tint: rgba(255, 255, 255, 0.08); /* Subtle border/divider — mode-aware */ --border-subtle: rgba(255, 255, 255, 0.08); /* Grid line color — used in decorative grids */ --grid-line: rgba(255, 255, 255, 0.06); /* Primary tints — subtle branded backgrounds */ --primary-wash: rgba(212, 180, 131, 0.05); --primary-tint: rgba(212, 180, 131, 0.1); /* Spacing scale */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; /* Radius scale */ --radius-sm: 0.35rem; /* cards, search section */ --radius-md: 0.5rem; /* buttons, tabs, close btn */ --radius-lg: 0.75rem; /* inputs, controls, lyrics cards, drawer corners */ --radius-pill: 2rem; /* chips, pill shapes */ --radius-full: 50%; /* circles — avatars, icon buttons */ /* Shadows */ --shadow-card: 2px 3px 8px rgba(0, 0, 0, 0.25); --shadow-hover: 4px 6px 16px rgba(0, 0, 0, 0.3); /* Card hover state */ --card-bg-hover: #44403A; /* Error */ --error-color: #ef4444; --error-wash: rgba(239, 68, 68, 0.1); /* Overlay / scrim */ --overlay-bg: rgba(0, 0, 0, 0.06); /* Frosted surfaces */ --results-card-bg: rgba(38, 34, 30, 0.75); /* Input borders */ --input-border: rgba(255, 255, 255, 0.12); --input-focus-border: rgba(212, 180, 131, 0.5); /* Section background — syllable groups */ --section-bg: var(--surface); } /* Mode colors — set via body[data-mode], default in */ body[data-mode="rhymes"], body[data-mode="spell"] { --mode-color: #9E5252; --mode-color-dark: #874040; --mode-color-text: #f5e8e8; } body[data-mode="related"] { --mode-color: #8E5278; --mode-color-dark: #784066; --mode-color-text: #f5e8f2; } body[data-mode="adjectives"] { --mode-color: #406E96; --mode-color-dark: #33597b; --mode-color-text: #e0ecf8; } body[data-mode="lyrics"] { --mode-color: #537A58; --mode-color-dark: #416448; --mode-color-text: #e8f5ea; } body[data-mode="definitions"] { --mode-color: #A86830; --mode-color-dark: #8a5320; --mode-color-text: #f5ede0; } * { box-sizing: border-box; margin: 0; padding: 0; } .hidden { display: none !important; } .no-transition { transition: none !important; } body { font-family: var(--font-family); background-color: var(--surface); color: var(--text-main); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; align-items: center; position: relative; } /* Dither canvas — fixed behind everything */ #dither-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .app-container { width: 100%; max-width: 1200px; padding: 2rem 1rem; display: flex; flex-direction: column; gap: var(--sp-4); flex: 1; } header { text-align: center; margin-bottom: 0.1rem; } /* Search card label — flash card style with decorative divider lines */ .search-card-label { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--warm-mid); white-space: nowrap; } .search-card-label::before, .search-card-label::after { content: ''; flex: 1; height: 1px; background: var(--border-subtle); } /* Search Section — flat flash card style */ .search-section { display: flex; flex-direction: column; gap: var(--sp-3); background: color-mix(in srgb, var(--card-bg) 92%, transparent); padding: 1.25rem 1.5rem; border-radius: var(--radius-sm); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 24px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.12); border: 1px solid rgba(255, 255, 255, 0.06); margin-bottom: 0.75rem; position: relative; overflow: hidden; } .light-mode .search-section { background: color-mix(in srgb, var(--card-bg) 90%, transparent); border-color: rgba(0, 0, 0, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04); } /* Color accent strip — bottom edge */ .search-section::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; pointer-events: none; background: var(--mode-color); opacity: 0.7; transition: background 0.3s ease, opacity 0.3s ease; } input[type="text"] { width: 100%; padding: 1rem 1.5rem; font-size: var(--text-lg); background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-lg); color: var(--text-main); font-family: var(--font-family); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12); } /* Override for search section inputs */ .search-section input[type="text"] { background-color: var(--hover-tint); border: 1px solid var(--input-border); color: var(--warm-light); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15); } .light-mode .search-section input[type="text"] { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06); } .search-section input[type="text"]:focus { border-color: var(--input-focus-border); } .search-section input[type="text"]::placeholder { color: var(--warm-dim); } input[type="text"]:focus { outline: none; border-color: var(--primary-color); } /* Suggestions Dropdown */ .input-wrapper { position: relative; width: 100%; } .suggestions-container { background-color: var(--surface-light); border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 0 0 var(--radius-sm) var(--radius-sm); border-top: none; box-shadow: var(--shadow-card); z-index: 1100; overflow: hidden; } .suggestions-list { list-style: none; margin: 0; padding: 0; } .suggestion-item { padding: 0.75rem 1.5rem; cursor: pointer; color: var(--ink); } .suggestion-item:hover, .suggestion-item.selected { background-color: rgba(0, 0, 0, 0.1); color: var(--ink); font-weight: 600; } .search-actions { display: flex; gap: var(--sp-2); justify-content: center; padding: 0.4rem 0.6rem; border-radius: var(--radius-lg); background: rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12); } .light-mode .search-actions { background: rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06); } /* Base button — minimal reset so descendants don't need !important */ button { cursor: pointer; font-family: var(--font-family); font-weight: 600; border: none; background: transparent; font-size: var(--text-base); transition: color 0.1s ease, background-color 0.1s ease; } /* Search Actions — tab-like toggles */ .search-actions button { color: var(--text-muted); border-radius: var(--radius-md); padding: 0.5rem 1rem; background: transparent; border: 1px solid transparent; transition: color 0.15s ease, background-color 0.15s ease; } .search-actions button:hover { color: var(--primary-color); background: rgba(255, 255, 255, 0.06); } .light-mode .search-actions button:hover { background: rgba(0, 0, 0, 0.04); } /* Active search-action uses current mode color */ .search-actions button.active { background-color: var(--mode-color); color: var(--mode-color-text); font-weight: 700; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); } /* Results Section */ #results-container { display: flex; flex-direction: column; gap: var(--sp-2); min-height: 60vh; } .tabs { display: flex; gap: var(--sp-2); padding: 0.4rem 0.6rem; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--card-bg) 90%, transparent); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15); border: 1px solid rgba(255, 255, 255, 0.06); } .light-mode .tabs { background: color-mix(in srgb, var(--card-bg) 88%, transparent); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08); border-color: rgba(0, 0, 0, 0.06); } .tab-btn, .sticky-tab-btn { background: transparent; color: var(--text-muted); border-radius: var(--radius-md); padding: 0.5rem 1rem; border: 1px solid transparent; } /* Active tab uses current mode color */ .tab-btn.active, .sticky-tab-btn.active { background-color: var(--mode-color); color: var(--mode-color-text); font-weight: 700; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); } /* Inactive tab hover */ .tab-btn:hover:not(.active), .sticky-tab-btn:hover:not(.active) { color: var(--primary-color); background: rgba(255, 255, 255, 0.06); } .light-mode .tab-btn:hover:not(.active), .light-mode .sticky-tab-btn:hover:not(.active) { background: rgba(0, 0, 0, 0.04); } /* Theme Variables — light mode (mirrors :root order) */ .light-mode { --primary-color: #C06A30; --primary-hover: #A85A28; --card-bg: #F3EBE0; --text-main: #2A2018; --text-muted: #6B5D4E; --border-color: #D6C8B8; --ink: #2a2420; --ink-soft: #4a3a2a; --ink-muted: #5a4a3a; --ink-faint: #6b5b4b; --warm-light: #2A2018; --warm-mid: #5A4A38; --warm-dim: #7A6A56; --surface: #DDD0C0; --surface-ui: #E8DDD0; --surface-light: #FAF5EE; --link-color: #B05E20; --on-primary: #FBF7EE; --avatar-bg: #A09080; --avatar-fg: #2A2018; --avatar-mid: #C4B8A8; --hover-tint: rgba(0, 0, 0, 0.06); --border-subtle: rgba(80, 60, 30, 0.09); --grid-line: rgba(80, 60, 30, 0.07); --primary-wash: rgba(192, 106, 48, 0.06); --primary-tint: rgba(192, 106, 48, 0.12); --shadow-card: 2px 3px 8px rgba(50, 35, 15, 0.10); --shadow-hover: 4px 6px 16px rgba(50, 35, 15, 0.15); --card-bg-hover: #EBE2D4; --error-color: #C03020; --error-wash: rgba(192, 48, 32, 0.08); --overlay-bg: rgba(42, 32, 24, 0.04); --results-card-bg: rgba(221, 208, 192, 0.75); --input-border: rgba(80, 60, 30, 0.16); --input-focus-border: rgba(192, 106, 48, 0.5); --section-bg: var(--surface); --sticky-nav-bg: color-mix(in srgb, var(--card-bg) 80%, var(--surface)); } /* Header & Theme Toggle */ .header-top { display: flex; justify-content: flex-end; align-items: center; width: 100%; margin-bottom: -2rem; position: relative; z-index: 10; } /* Split Button (M3 pattern) */ .split-btn { display: inline-flex; align-items: center; background: color-mix(in srgb, var(--card-bg) 90%, transparent); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius-sm); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15); position: relative; touch-action: manipulation; } .split-btn-main { height: 1.75rem; padding-inline: 0.5rem; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; border-start-start-radius: var(--radius-sm); border-end-start-radius: var(--radius-sm); color: var(--warm-mid); cursor: pointer; } .split-btn-main:hover { color: var(--primary-color); } /* Show moon in dark, sun in light */ .split-btn-main .icon-sun { display: none; } .split-btn-main .icon-moon { display: block; } .light-mode .split-btn { background: var(--surface-ui); border-color: rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08); } .light-mode .split-btn-main .icon-sun { display: block; } .light-mode .split-btn-main .icon-moon { display: none; } /* Controls Bar */ .controls { display: flex; align-items: center; gap: var(--sp-3); padding: 0; } .sort-controls { display: flex; align-items: center; gap: var(--sp-4); flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; contain: layout style; } .sort-controls::-webkit-scrollbar { display: none; } .sort-buttons { display: flex; gap: var(--sp-2); flex-wrap: nowrap; padding: 0.35rem 0.5rem; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--card-bg) 90%, transparent); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15); border: 1px solid rgba(255, 255, 255, 0.06); } .light-mode .sort-buttons { background: color-mix(in srgb, var(--card-bg) 88%, transparent); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06); border-color: rgba(0, 0, 0, 0.06); } .sort-btn { color: var(--text-muted); padding: 0.3rem 0.7rem; border-radius: var(--radius-sm); font-size: var(--text-sm); background: transparent; border: 1px solid transparent; transition: color 0.15s ease, background-color 0.15s ease; } .sort-btn:hover { color: var(--primary-color); background: rgba(255, 255, 255, 0.06); } .light-mode .sort-btn:hover { background: rgba(0, 0, 0, 0.04); } .sort-btn.active { background-color: var(--primary-color); color: var(--on-primary); font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .light-mode .sort-btn.active { background-color: var(--primary-hover); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } /* Definitions Content */ #definitions-content { background-color: var(--card-bg); padding: 1.5rem; border-radius: var(--radius-lg); border: 1px solid var(--border-color); display: flex; flex-direction: column; gap: var(--sp-4); } #lyrics-content { display: flex; flex-direction: column; gap: var(--sp-4); } .def-list { list-style-type: none; display: flex; flex-direction: column; gap: var(--sp-3); } .def-item { padding-left: 1rem; border-left: 3px solid var(--primary-color); color: var(--text-main); } .wiktionary-link { display: inline-block; margin-top: 1rem; color: var(--primary-color); text-decoration: none; font-weight: 600; } .wiktionary-link:hover { text-decoration: underline; } /* Results List */ .results-list, .syllable-section-content { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); } /* Result Pills — Dark mode */ .result-item { padding: 0.6rem 1rem; border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--sp-1); transition: transform 0.15s, box-shadow 0.15s; cursor: pointer; background: var(--card-bg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; } .result-item:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } /* Hover/focus outline — amber */ .result-item.has-definition:hover, .result-item:focus { outline: 1px solid rgba(201, 130, 42, 0.35); outline-offset: 1px; } .result-item.has-definition:active { outline: 1px solid rgba(201, 130, 42, 0.5); outline-offset: 0px; transform: scale(0.98); } .word-header { display: flex; align-items: baseline; margin-bottom: var(--sp-4); } .word { font-size: var(--text-lg); font-weight: 600; color: var(--warm-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Strength amber band — bottom of pill */ .result-item::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 6px; background: rgba(122, 140, 74, var(--strength-opacity, 0)); pointer-events: none; } .result-item.strength-100 { --strength-opacity: 0.45; } .result-item.strength-96 { --strength-opacity: 0.30; } .result-item.strength-92 { --strength-opacity: 0.20; } .result-item.strength-86 { --strength-opacity: 0.12; } .result-item.strength-80 { --strength-opacity: 0.06; } #loading-indicator { text-align: center; color: var(--text-muted); padding: 2rem; } #error-message { color: var(--error-color); text-align: center; padding: 1rem; background: var(--error-wash); border-radius: var(--radius-md); } /* Mobile Responsiveness Updates */ @media (max-width: 600px) { .results-list { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .usage-hint::before, .usage-hint::after { display: none; } .usage-hint { justify-content: center; margin-top: 0; padding: var(--sp-1) var(--sp-3); font-size: var(--text-xs); } .search-card-label { font-size: 0.6rem; gap: var(--sp-2); } .sort-btn { flex-shrink: 0; } /* Unified controls bar: sort pills scroll inside, view toggle pinned right */ .controls { padding: 0.4rem 0; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--card-bg) 90%, transparent); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15); border: 1px solid rgba(255, 255, 255, 0.06); gap: 0; overflow: hidden; } .light-mode .controls { background: color-mix(in srgb, var(--card-bg) 88%, transparent); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08); border-color: rgba(0, 0, 0, 0.04); } .sort-controls { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding-left: 0.6rem; padding-right: 0.3rem; } .sort-buttons, .light-mode .sort-buttons { background: none; box-shadow: none; border: none; padding: 0; border-radius: 0; } .view-controls, .light-mode .view-controls { background: none; box-shadow: none; border: none; padding: 0; padding-left: 0.5rem; padding-right: 0.75rem; border-left: 1px solid var(--border-subtle); border-radius: 0; gap: var(--sp-1); } .view-btn { width: 2.2rem; height: 2.2rem; border-radius: var(--radius-lg); } .view-btn svg { width: 18px; height: 18px; } /* Mobile Search Actions */ .search-actions { flex-wrap: wrap; } .search-actions button { padding: 0.5rem 0.1rem; /* So that all the options fit on one line */ font-size: var(--text-sm); flex: 1 1 auto; /* Allow buttons to shrink/grow */ } /* Mobile Tabs — scrollable, hidden scrollbar */ .tabs { overflow-x: auto; white-space: nowrap; padding-bottom: 0.5rem; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } /* Tighter search section on mobile */ .search-section { padding: 0.75rem 1rem; gap: var(--sp-2); margin-bottom: 0.5rem; } /* Smaller input on mobile */ input[type="text"] { padding: 0.75rem 1rem; font-size: var(--text-base); } /* Shrink logo on mobile */ .logo-img { max-width: 140px; } header { margin-bottom: 0; } .app-container { padding: 1rem 0.75rem; gap: var(--sp-3); } } .syllable-section { grid-column: 1 / -1; /* Span all columns in grid layout */ margin-top: 1rem; background: var(--section-bg); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 0.75rem 1rem; } .syllable-header { font-weight: 600; font-size: var(--text-lg); color: var(--primary-color); margin-bottom: 0.5rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--border-color); } .syllable-header-clickable { cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; transition: color 0.2s ease; } .syllable-header-clickable:hover { color: var(--primary-hover); } .syllable-section-content { padding-top: 0.5rem; } .syllable-section-content.collapsed { display: none; } .syllable-section:not(.expanded) .syllable-header { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .word-link { text-decoration: none; color: inherit; cursor: pointer; transition: color 0.1s; } .word-link:hover { color: var(--primary-color); text-decoration: underline; } .logo-link { display: inline-block; cursor: pointer; } .logo-img { max-width: 200px; height: auto; } .logo-link:hover { transform: scale(1.02); } /* Lyrics Match Highlighting */ .lyric-match, .lyric-highlight-blue { font-weight: bold; color: var(--link-color); } /* Decorative border strip above footer */ .footer-border { display: flex; align-items: center; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding: var(--sp-2) 0; margin-top: auto; margin-bottom: 0; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; background-color: var(--surface); position: relative; z-index: 1; } .footer-border::before { content: ''; flex: 1; height: 18px; background-image: url("img/shape-pattern.svg"); background-repeat: repeat-x; background-size: auto 18px; background-position: center center; } /* Footer Links */ #main-footer { text-align: center; margin-top: auto; color: var(--warm-mid); background-color: var(--card-bg); background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: 40px 40px; padding: 1.25rem 1.5rem; font-size: var(--text-sm); width: 100%; } .footer-links { margin-top: 0.5rem; font-size: var(--text-sm); } .search-tips { margin-top: var(--sp-2); font-size: var(--text-xs); text-align: center; color: var(--warm-dim); } /* light-mode .search-tips: auto-switches via --warm-dim */ .search-tips a { color: var(--warm-mid); text-decoration: none; transition: color 0.1s; font-weight: 600; } .search-tips a:hover { color: var(--warm-light); text-decoration: underline; } /* light-mode search-tips links: auto-switches via --warm-mid / --warm-light */ .footer-links a { color: var(--warm-mid); text-decoration: none; margin: 0 0.5rem; transition: color 0.1s; } .footer-links a:hover { color: var(--warm-light); } /* light-mode footer links: auto-switches via --warm-mid / --warm-light */ .lyricfind-ack { margin-top: var(--sp-3); font-size: var(--text-xs); color: var(--warm-mid); } .lyricfind-ack a { color: var(--primary-color); text-decoration: none; } .lyricfind-ack a:hover { text-decoration: underline; } /* Lyrics results card */ .lyrics-results-card > .lyrics-grid, .lyrics-results-card > .lyricfind-ack { padding: 0 var(--sp-4); } .lyrics-results-card > .lyricfind-ack { padding-bottom: var(--sp-4); } .lyrics-heading { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); font-weight: 600; color: var(--warm-mid); } /* Lyrics Cards - Minimal Version */ .lyrics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); } .lyrics-section { margin-bottom: 2rem; } .lyrics-section-header { font-size: var(--text-lg); font-weight: 700; color: var(--text-main); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-color); } .lyric-card { display: flex; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; } .lyric-card:hover { border-color: var(--primary-color); } .lyric-artist-section { flex-shrink: 0; width: 120px; padding: 1rem 1rem 0.5rem 1rem; display: flex; flex-direction: column; align-items: center; border-right: 1px solid var(--border-color); background: var(--primary-wash); } /* Artist avatar: 90px square in main results */ .artist-avatar { width: 90px; height: 90px; border-radius: var(--radius-md); border: 1px solid var(--border-color); overflow: hidden; background: linear-gradient(135deg, var(--avatar-bg), var(--avatar-mid)); color: var(--avatar-fg); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; font-weight: 700; object-fit: cover; flex-shrink: 0; } /* Drawer avatar: fills parent container */ .drawer-avatar { width: 100%; height: 100%; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--avatar-bg), var(--avatar-mid)); color: var(--avatar-fg); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--text-xl); object-fit: cover; } /* Mini avatar: 36px circle, used in drawer preview stacks */ .mini-avatar { width: 36px; height: 36px; border-radius: var(--radius-full); border: 2px solid var(--surface); flex-shrink: 0; object-fit: cover; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--text-xs); color: var(--avatar-fg); background: var(--avatar-mid); } .mini-avatar + .mini-avatar { margin-left: -12px; } /* Drawer lyric card layout */ .drawer-lyric-card-link { text-decoration: none; color: inherit; display: block; } .drawer-lyric-card-layout { display: flex; height: 240px; } .drawer-lyric-card-avatar { width: 30%; height: 100%; flex-shrink: 0; display: flex; align-items: center; margin-right: 1rem; } .drawer-lyric-card-body { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; } .drawer-lyric-card-artist { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: 0.25rem; flex-shrink: 0; } .drawer-lyric-card-title { font-size: var(--text-base); font-weight: 600; color: var(--text-main); margin: 0 0 0.5rem 0; flex-shrink: 0; } .drawer-lyric-card-context { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.4; flex: 1; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; } /* +N remaining badge */ .mini-avatar-badge { background: var(--primary-color); color: var(--on-primary); font-size: var(--text-sm); } .artist-name { font-size: var(--text-sm); font-weight: 600; text-align: center; overflow-wrap: break-word; margin-top: 0.5rem; } .artist-metadata { display: flex; gap: 0.3rem; font-size: var(--text-sm); margin-top: auto; } .metadata-badge { padding: 0.1rem 0.3rem; background: var(--surface); border-radius: var(--radius-sm); } .lyric-content-link, .lyric-content-section { flex: 1; padding: 1rem; text-decoration: none; color: inherit; } .lyric-title { font-weight: 700; margin-bottom: 0.5rem; overflow-wrap: break-word; } .lyric-excerpt { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Related Words Card - Below results */ .related-words-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 1.5rem; margin: 3rem 0; box-shadow: var(--shadow-card); } @media (max-width: 768px) { .related-words-card { padding: 1rem; margin: 2rem 0; } } .related-words-header { font-size: var(--text-lg); font-weight: 600; margin-bottom: 1rem; color: var(--text-main); } .related-words-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .related-word-chip { background-color: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-pill); padding: 0.5rem 1rem; font-size: var(--text-base); color: var(--text-main); text-decoration: none; transition: color 0.1s ease, background-color 0.1s ease, border-color 0.1s ease, transform 0.1s ease; cursor: pointer; } .related-word-chip:hover { color: var(--primary-color); border-color: var(--primary-color); } /* Drawer Overlay */ .drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--overlay-bg); z-index: 999; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; overscroll-behavior: contain; } .drawer-overlay:not(.hidden) { opacity: 1; } /* Definition Drawer */ .definition-drawer { position: fixed; bottom: 0; left: 0; right: 0; background-color: var(--sticky-nav-bg); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 -10px 25px -5px rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.06); border-bottom: none; z-index: 1000; transform: translateY(100%); transition: transform 0.3s ease; height: 35vh; display: flex; flex-direction: column; overscroll-behavior: contain; overflow: hidden; } .definition-drawer::before { content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background-color: color-mix(in srgb, var(--primary-color) 10%, transparent); opacity: 0.5; pointer-events: none; z-index: 0; } .definition-drawer > * { position: relative; z-index: 1; } .light-mode .definition-drawer { border-color: rgba(0, 0, 0, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.05), 0 -10px 25px -5px rgba(0, 0, 0, 0.1); } .definition-drawer:not(.hidden) { transform: translateY(0); } .drawer-content { display: flex; flex-direction: column; height: 100%; position: relative; z-index: 1; } .drawer-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: 1rem 1.25rem; border-top: 10px solid var(--mode-color); border-bottom: 1px solid var(--border-color); flex-shrink: 0; position: relative; background: linear-gradient( to bottom, color-mix(in srgb, var(--mode-color) 12%, transparent) 0%, color-mix(in srgb, var(--mode-color) 4%, transparent) 40%, transparent 100% ), var(--card-bg); } .drawer-word { font-size: var(--text-xl); font-family: var(--font-mono); font-weight: 700; font-style: italic; color: var(--text-main); margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); } .drawer-word-clickable { text-decoration: underline; cursor: pointer; transition: color 0.2s ease; } .drawer-word-clickable:hover { color: var(--primary-color); } .drawer-potencia { display: inline-block; font-size: var(--text-sm); font-family: var(--font-family); font-style: normal; font-weight: 600; color: #fff; background: rgb(122, 140, 74); padding: 0.2rem 0.65rem; border-radius: var(--radius-pill); margin-left: 0.5rem; text-decoration: none; cursor: default; } .drawer-close-btn { color: var(--text-muted); padding: 0.3rem; border-radius: var(--radius-full); transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.08); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } .light-mode .drawer-close-btn { background: rgba(0, 0, 0, 0.04); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06); } .drawer-close-btn svg { width: 18px; height: 18px; } .drawer-close-btn:hover { color: var(--primary-color); background-color: var(--primary-tint); } .drawer-body { padding: 1.5rem; overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; position: relative; min-height: 0; overscroll-behavior: contain; contain: layout style; } /* Drawer Tabs */ .drawer-header-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); } .drawer-tabs { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-1); overflow-x: auto; padding: 0.35rem 0.5rem; scrollbar-width: none; max-width: 400px; border-radius: var(--radius-lg); background: rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12); } .light-mode .drawer-tabs { background: rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06); } /* Mobile: Force two rows */ @media (max-width: 768px) { .drawer-header { flex-direction: column; align-items: stretch; gap: var(--sp-2); } .drawer-header-top { justify-content: space-between; width: 100%; } .drawer-tabs { width: 100%; max-width: none; justify-content: flex-start; } .drawer-tab-btn { flex: 0 0 auto; padding: 0.6rem 1rem; gap: 0.3rem; } } /* Desktop: One row */ @media (min-width: 769px) { .drawer-header { flex-direction: row; justify-content: space-between; align-items: center; } .drawer-header-top { display: contents; } .drawer-word { order: 1; flex-shrink: 0; } .drawer-tabs { order: 2; flex-shrink: 0; margin-left: auto; margin-right: 1rem; } .drawer-close-btn { order: 3; flex-shrink: 0; } .definition-drawer { height: 55vh; } } .drawer-tabs::-webkit-scrollbar { height: 4px; } .drawer-tabs::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 2px; } .drawer-tab-btn { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; border-radius: var(--radius-md); padding: 0.3rem 0.65rem; background: transparent; color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; transition: color 0.15s ease, background-color 0.15s ease; min-width: 60px; } .drawer-tab-btn svg { width: 20px; height: 20px; stroke: currentColor; } .drawer-tab-btn span { margin-top: 0.15rem; } .drawer-tab-btn:hover { color: var(--warm-dim); background: rgba(255, 255, 255, 0.06); } .light-mode .drawer-tab-btn:hover { background: rgba(0, 0, 0, 0.04); } .drawer-tab-btn.active { color: var(--primary-color); background: rgba(255, 255, 255, 0.08); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .light-mode .drawer-tab-btn.active { background: rgba(255, 255, 255, 0.25); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.4); } /* Link tabs — visually distinct: dimmer, underlined, with arrow hint */ .drawer-tab-link { opacity: 0.65; } .drawer-tab-link span { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--text-muted); } .drawer-tab-link:hover { opacity: 1; color: var(--primary-color); background: transparent; } .drawer-tab-link:hover span { text-decoration-color: var(--primary-color); text-decoration-style: solid; } /* Link tabs can't be "active" in the track sense */ .drawer-tab-link.active { background: transparent; box-shadow: none; } .drawer-tab-divider { width: 1px; height: 20px; background: var(--border-subtle); flex-shrink: 0; } /* Drawer Accordion */ .drawer-accordion-section { border-bottom: none; transition: border-left 0.2s ease; } .drawer-accordion-section + .drawer-accordion-section { border-top: 1px solid var(--border-color); } .drawer-accordion-section.expanded { border-left: 3px solid var(--primary-color); } .drawer-accordion-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; cursor: pointer; transition: background 0.2s ease; } .drawer-accordion-header:hover { background: var(--primary-wash); } .drawer-accordion-section.expanded .drawer-accordion-header { background: var(--primary-wash); } .drawer-accordion-section.expanded .section-title { color: var(--primary-color); font-weight: 700; } .section-info { flex: 1; display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; } .section-title { font-weight: 600; color: var(--text-main); font-size: var(--text-base); } .section-preview { font-size: var(--text-sm); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity 0.2s ease, max-height 0.2s ease; display: flex; align-items: center; } .drawer-accordion-section.expanded .section-preview { opacity: 0; max-height: 0; overflow: hidden; } /* Letras Preview - Avatar circles with count + text */ .letras-preview-container { display: flex; align-items: center; gap: var(--sp-2); } .letras-preview-avatars { display: flex; align-items: center; flex-shrink: 0; } .letras-preview-text { font-size: var(--text-sm); color: var(--text-muted); white-space: normal; line-height: 1.3; flex: 1; min-width: 0; } /* Mobile: Allow text to wrap to 2 lines */ @media (max-width: 768px) { .letras-preview-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } } .accordion-icon { flex-shrink: 0; transition: transform 0.3s ease; color: var(--text-muted); } .drawer-accordion-section.expanded .accordion-icon, .syllable-section.expanded .accordion-icon { transform: rotate(180deg); } .drawer-accordion-content { overflow-y: auto; overflow-x: hidden; transition: max-height 0.3s ease, padding 0.3s ease, background 0.2s ease; padding: 0 1rem 1rem 1rem; max-height: 2000px; } .drawer-accordion-content.collapsed { max-height: 0; padding: 0 1rem; overflow: hidden; } .drawer-accordion-section.expanded .drawer-accordion-content { background: var(--primary-wash); } /* Drawer Section Content */ /* Drawer Lyrics Grid - Responsive Columns */ .drawer-lyrics-grid { display: grid; } .drawer-lyric-card { display: flex; gap: var(--sp-4); padding: 1rem; border-bottom: 1px solid var(--border-color); border-right: 1px solid var(--border-color); height: 100%; min-height: 150px; } /* Mobile: 1 column, drawer optimizations */ @media (max-width: 768px) { .drawer-lyrics-grid { grid-template-columns: 1fr; } .drawer-lyric-card { border-right: none; } .definition-drawer { height: 60vh; } .drawer-header { padding: 1rem; } .drawer-body { padding: 0; } .drawer-word { font-size: var(--text-lg); } } /* Tablet: 2 columns - remove right border on even items */ @media (min-width: 769px) and (max-width: 1200px) { .drawer-lyrics-grid { grid-template-columns: repeat(2, 1fr); } .drawer-lyric-card:nth-child(2n) { border-right: none; } } /* Desktop: 3 columns - remove right border on every 3rd item */ @media (min-width: 1201px) { .drawer-lyrics-grid { grid-template-columns: repeat(3, 1fr); } .drawer-lyric-card:nth-child(3n) { border-right: none; } } /* Sticky Header - All Screen Sizes */ .sticky-header { position: fixed; top: var(--sp-2); left: var(--sp-3); right: var(--sp-3); width: auto; max-width: 600px; margin: 0 auto; background-color: color-mix(in srgb, var(--sticky-nav-bg) 85%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); z-index: 100; border-radius: var(--radius-pill); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 4px 24px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15); border: 1px solid rgba(255, 255, 255, 0.06); overflow: hidden; } .light-mode .sticky-header { border-color: rgba(0, 0, 0, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.05), 0 4px 24px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06); } .sticky-header::before { content: ''; position: absolute; inset: 0; border-radius: var(--radius-pill); background-color: color-mix(in srgb, var(--primary-color) 10%, transparent); opacity: 0.5; pointer-events: none; z-index: 0; } .sticky-header > * { position: relative; z-index: 1; } .sticky-header-content { width: 100%; } .sticky-header-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0.6rem 1.5rem; gap: var(--sp-4); transition: padding 0.2s ease; } .sticky-left { display: flex; justify-content: flex-start; align-items: center; } .sticky-right { display: flex; justify-content: flex-end; align-items: center; } .sticky-header .split-btn { border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.05); } .light-mode .sticky-header .split-btn { border-color: rgba(0, 0, 0, 0.08); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.4); } /* Sticky tab buttons — pill-shaped inside recessed track */ .sticky-tab-btn { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-muted); border-radius: var(--radius-pill); } .sticky-tab-btn:hover:not(.active) { background: rgba(255, 255, 255, 0.06); } .light-mode .sticky-tab-btn:hover:not(.active) { background: rgba(0, 0, 0, 0.04); } /* Active sticky tab — raised pill inside track */ .sticky-tab-btn.active { background-color: var(--mode-color); color: var(--mode-color-text); border-color: transparent; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1); } /* Inset search icon button */ .sticky-header .search-icon-btn { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.06); background: var(--surface-ui); } .light-mode .sticky-header .search-icon-btn { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.4); border-color: rgba(0, 0, 0, 0.08); } .search-icon-btn { color: var(--text-muted); padding: 0.35rem; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; } .search-icon-btn svg { width: 18px; height: 18px; } .search-icon-btn:hover { color: var(--primary-color); background-color: var(--primary-tint); } .sticky-logo { display: flex; justify-content: center; align-items: center; } .sticky-logo-link { display: flex; align-items: center; cursor: pointer; } .sticky-logo img { height: 40px; width: auto; transition: height 0.2s ease; } /* Light-mode logo swap — both are