/* ── Dilang Pinoy ───────────────────────────────────────────────────────── Palette leans on Philippine flag colours: deep blue ink, flag red as the primary accent, sun-gold as the secondary. Both themes are authored; the `data-theme` attribute on overrides the media query in both directions so the toggle always wins. ─────────────────────────────────────────────────────────────────────── */ :root { --bg: #fbf8f3; --bg-soft: #f3ede3; --surface: #ffffff; --surface-2: #f7f3ec; --border: #e2d9c9; --border-strong: #cdc0aa; --text: #1d1a16; --text-soft: #5c554b; --text-faint: #8a8175; --accent: #c1272d; /* flag red */ --accent-soft: #f7e4e3; --accent-text: #ffffff; --gold: #b8860b; --gold-soft: #fbf1d6; --blue: #14418b; --good: #17694a; --good-soft: #e0f0e6; --bad: #a8271f; --bad-soft: #fbe5e2; --shadow: 0 1px 2px rgba(29, 26, 22, .05), 0 12px 32px -12px rgba(29, 26, 22, .18); --radius: 18px; --font: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: ui-rounded, "SF Pro Rounded", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif; } @media (prefers-color-scheme: dark) { :root { --bg: #12100e; --bg-soft: #1a1714; --surface: #1c1917; --surface-2: #24201d; --border: #322c27; --border-strong: #463e37; --text: #f5f0e8; --text-soft: #b6ada1; --text-faint: #857c72; --accent: #e8484c; --accent-soft: #33191a; --accent-text: #1a0e0e; --gold: #e5b45c; --gold-soft: #2b2317; --blue: #6f9be8; --good: #6cd9a0; --good-soft: #16281f; --bad: #f0736b; --bad-soft: #2c1917; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 40px -14px rgba(0, 0, 0, .7); } } :root[data-theme="light"] { --bg: #fbf8f3; --bg-soft: #f3ede3; --surface: #ffffff; --surface-2: #f7f3ec; --border: #e2d9c9; --border-strong: #cdc0aa; --text: #1d1a16; --text-soft: #5c554b; --text-faint: #8a8175; --accent: #c1272d; --accent-soft: #f7e4e3; --accent-text: #ffffff; --gold: #b8860b; --gold-soft: #fbf1d6; --blue: #14418b; --good: #17694a; --good-soft: #e0f0e6; --bad: #a8271f; --bad-soft: #fbe5e2; --shadow: 0 1px 2px rgba(29, 26, 22, .05), 0 12px 32px -12px rgba(29, 26, 22, .18); } :root[data-theme="dark"] { --bg: #12100e; --bg-soft: #1a1714; --surface: #1c1917; --surface-2: #24201d; --border: #322c27; --border-strong: #463e37; --text: #f5f0e8; --text-soft: #b6ada1; --text-faint: #857c72; --accent: #e8484c; --accent-soft: #33191a; --accent-text: #1a0e0e; --gold: #e5b45c; --gold-soft: #2b2317; --blue: #6f9be8; --good: #6cd9a0; --good-soft: #16281f; --bad: #f0736b; --bad-soft: #2c1917; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 40px -14px rgba(0, 0, 0, .7); } * { box-sizing: border-box; } /* Several elements below set `display`, which would otherwise beat the UA stylesheet's rule for the `hidden` attribute and leave them on screen. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.55; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } /* Subtle warm glow behind everything. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(60% 45% at 50% -5%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%), radial-gradient(45% 40% at 92% 8%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 70%); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -999px; top: .5rem; z-index: 100; background: var(--surface); color: var(--text); padding: .6rem 1rem; border-radius: 10px; border: 1px solid var(--border); } .skip-link:focus { left: .5rem; } :where(button, select, input, a):focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; } /* ── Top bar ───────────────────────────────────────────────────────────── */ .topbar { display: flex; align-items: center; gap: 1rem; padding: .85rem clamp(.9rem, 3vw, 2rem); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 20; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: .55rem; font-size: 1.05rem; } .brand-mark { color: var(--accent); display: grid; place-items: center; } .brand-text { letter-spacing: -.01em; color: var(--text-soft); } .brand-text strong { color: var(--text); font-weight: 700; } .tabs { display: flex; gap: .25rem; margin-inline: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: .25rem; overflow-x: auto; scrollbar-width: none; max-width: 100%; } .tabs::-webkit-scrollbar { display: none; } .tab { appearance: none; border: 0; background: transparent; color: var(--text-soft); font: inherit; font-size: .9rem; padding: .45rem 1rem; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .18s, color .18s; } .tab:hover { color: var(--text); } .tab.is-active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); } .icon-btn { appearance: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); cursor: pointer; transition: color .18s, border-color .18s, background .18s; flex: none; } .icon-btn:hover { color: var(--text); border-color: var(--border-strong); } .icon-btn-sm { width: 2rem; height: 2rem; border-color: transparent; background: transparent; } /* Show the icon for the theme you'd switch *to*. */ .i-moon { display: none; } @media (prefers-color-scheme: dark) { .i-sun { display: none; } .i-moon { display: block; } } :root[data-theme="light"] .i-sun { display: none; } :root[data-theme="light"] .i-moon { display: block; } :root[data-theme="dark"] .i-sun { display: block; } :root[data-theme="dark"] .i-moon { display: none; } /* ── Layout ────────────────────────────────────────────────────────────── */ main { flex: 1; width: 100%; max-width: 62rem; margin: 0 auto; padding: clamp(1.1rem, 3vw, 2.2rem) clamp(.9rem, 3vw, 1.5rem); } .view { display: none; } .view.is-active { display: block; animation: fade .25s ease; } @keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* ── Flashcard ─────────────────────────────────────────────────────────── */ .flash-wrap { max-width: 40rem; margin: 0 auto; } .card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 26px; box-shadow: var(--shadow); padding: clamp(1.3rem, 4vw, 2.1rem); overflow: hidden; } /* Thin gradient rule along the top edge. */ .card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--gold) 55%, var(--blue)); } .card.is-swapping { animation: swap .38s ease; } @keyframes swap { 0% { opacity: .25; transform: translateY(8px) scale(.995); } 100% { opacity: 1; transform: none; } } .card-top { display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem; } .spacer { flex: 1; } .chip { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 650; padding: .22rem .6rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; } .chip-quiet { background: var(--surface-2); color: var(--text-faint); } #star-btn[aria-pressed="true"] { color: var(--gold); } #star-btn[aria-pressed="true"] svg path { fill: var(--gold); } .ceb { font-family: var(--font-display); font-size: clamp(2.6rem, 11vw, 4.2rem); font-weight: 700; letter-spacing: -.03em; /* Roomy enough that descenders (sayo, pagkaon, bugsay) sit inside the line box. At 1.05 the glyphs overflow it and collide with the Tagalog pill. */ line-height: 1.16; margin: .2rem 0 1.1rem; overflow-wrap: break-word; hyphens: auto; } /* Headword + speak button sit on one line, the button pinned to the headword's baseline rather than floating beside a tall block. */ /* The row zeroes the headword's own bottom margin, so it has to supply the gap itself — otherwise the translations sit directly under the glyphs. */ .ceb-row { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.15rem; } .ceb-row .ceb, .ceb-row .q-word { margin-bottom: 0; } /* A flex item defaults to min-width:auto, which floors it at the width of the longest unbreakable word — `overflow-wrap` does not shrink min-content. So a long headword like "sementeryo" refuses to shrink and shoves whatever shares its row out past the edge of the card. That was the picture until it moved to its own row; the speak button is still in here and still needs this. */ .ceb-row .ceb { min-width: 0; } .ceb-row-center { justify-content: center; margin-bottom: 1.7rem; } .ceb-row-center .q-word { margin: .3rem 0; } /* Centred on its own row above the headword, so it reads as an illustration of the word rather than part of it. Decorative only. It sat at the end of the headword row until the picture was doubled, which is a layout that only works while the picture is small: a flex row hands the picture whatever the headword leaves over, and at this size the headword needs all of it. See the note in index.html for the numbers. The slot is a fixed square whether it holds a picture or the emoji standing in for one, so the card keeps its height when a picture fails to load or has not landed yet — these arrive mid-rotation, and a slot that grew on arrival would shove the headword down under the reader's eye. */ .pictogram { margin: 0 auto 1rem; display: grid; place-items: center; /* Fills the card, capped at the picture's own resolution. The generated files are 512px square and that is the largest tier there is, so 32rem is where enlarging stops adding detail and starts only adding blur. A phone's card is narrower than the cap, so there the screen decides. */ width: min(100%, 32rem); /* Not a matching `height`: a percentage height would resolve against the card, which has no fixed one. This ties the square to the width instead, and still reserves the space before the file lands. */ aspect-ratio: 1; font-size: min(46vw, 18.5rem); line-height: 1; opacity: .9; user-select: none; } /* The generated pictures are square and full-bleed; `cover` keeps one that ever comes back off-square from letterboxing inside the slot. The tinted box under it stands in while the file is still on the wire, so the card shows a resting shape rather than a hole. */ .pictogram-img { width: 100%; height: 100%; object-fit: cover; border-radius: 15px; border: 1px solid var(--border); background: var(--surface-2); } .speak-btn { appearance: none; flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-soft); cursor: pointer; transition: color .18s, border-color .18s, transform .12s; } .speak-btn:hover { color: var(--accent); border-color: var(--accent); } .speak-btn:active { transform: scale(.92); } .speak-btn .wave { opacity: .85; } .speak-btn.is-speaking { color: var(--accent); border-color: var(--accent); } .speak-btn.is-speaking .wave-1 { animation: pulse .9s ease-in-out infinite; } .speak-btn.is-speaking .wave-2 { animation: pulse .9s ease-in-out .15s infinite; } @keyframes pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } } /* ── pronunciation settings ────────────────────────────────────────────── */ .speech-panel { margin-top: 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: .88rem; } .speech-panel > summary { cursor: pointer; padding: .6rem .9rem; font-weight: 600; color: var(--text-soft); list-style: none; display: flex; align-items: center; gap: .45rem; } .speech-panel > summary::-webkit-details-marker { display: none; } .speech-panel > summary::before { content: ""; width: .4rem; height: .4rem; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(-45deg); transition: transform .18s; } .speech-panel[open] > summary::before { transform: rotate(45deg); } .speech-panel > summary:hover { color: var(--text); } .speech-body { padding: 0 .9rem 1rem; display: grid; gap: .85rem; } .speech-opts { display: grid; gap: .85rem; padding-top: .3rem; border-top: 1px solid var(--border); } .speech-opts .field select { width: 100%; max-width: 22rem; } input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; max-width: 22rem; height: 1.4rem; background: transparent; cursor: pointer; } input[type="range"]::-webkit-slider-runnable-track { height: .35rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); } input[type="range"]::-moz-range-track { height: .35rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.05rem; height: 1.05rem; margin-top: -.38rem; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); } input[type="range"]::-moz-range-thumb { width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); } .speech-note { margin: 0; font-size: .8rem; color: var(--text-soft); background: var(--gold-soft); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; padding: .5rem .7rem; } .col-speak { width: 2.2rem; } .row-speak { appearance: none; border: 0; background: none; cursor: pointer; color: var(--border-strong); padding: .1rem; line-height: 1; } .row-speak:hover { color: var(--accent); } .alt-spelling { /* Tucked up under the headword, against the row's new bottom margin. */ margin: -.85rem 0 .85rem; font-size: .85rem; color: var(--text-faint); font-style: italic; } .translations { display: grid; gap: .55rem; } .translations.is-hidden { visibility: hidden; height: 0; overflow: hidden; margin: 0; } .tr { display: flex; align-items: baseline; gap: .75rem; padding: .6rem .85rem; background: var(--surface-2); border-radius: 12px; border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); } .tr-label { flex: none; width: 4.6rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 650; color: var(--text-faint); } .tr-value { font-size: clamp(1.05rem, 3.6vw, 1.3rem); font-weight: 550; } .reveal-btn { width: 100%; appearance: none; border: 1.5px dashed var(--border-strong); background: transparent; color: var(--text-soft); font: inherit; padding: 1.15rem; border-radius: 12px; cursor: pointer; transition: border-color .18s, color .18s; } .reveal-btn:hover { border-color: var(--accent); color: var(--accent); } .example { margin: 1.1rem 0 0; padding: .85rem 0 0; border-top: 1px solid var(--border); } .example blockquote { margin: 0; font-size: 1.02rem; font-style: italic; color: var(--text); } .example figcaption { margin-top: .2rem; font-size: .9rem; color: var(--text-faint); } .note { margin: .9rem 0 0; padding: .6rem .75rem; font-size: .87rem; background: var(--gold-soft); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; color: var(--text-soft); } /* Controls */ .controls { display: flex; align-items: center; justify-content: center; gap: 1.4rem; margin: 1.4rem 0 .4rem; } .ctl { appearance: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); cursor: pointer; width: 2.9rem; height: 2.9rem; transition: color .18s, border-color .18s, transform .12s; } .ctl:hover { color: var(--text); border-color: var(--border-strong); } .ctl:active { transform: scale(.94); } .ctl-timer { position: relative; width: 3.9rem; height: 3.9rem; border: 0; background: transparent; } .ring { position: absolute; inset: 0; transform: rotate(-90deg); width: 100%; height: 100%; } .ring-track { stroke: var(--border); } .ring-fill { stroke: var(--accent); transition: stroke-dashoffset .95s linear; } .ctl-timer[aria-pressed="true"] .ring-fill { stroke: var(--text-faint); transition: none; } .countdown { position: relative; font-variant-numeric: tabular-nums; font-size: 1rem; font-weight: 650; color: var(--text); } .ctl-timer[aria-pressed="true"] .countdown { color: var(--text-faint); } /* Options row under the card */ .flash-opts { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: end; justify-content: center; margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--border); } .field { display: grid; gap: .3rem; font-size: .82rem; color: var(--text-faint); } .field > span { font-weight: 600; letter-spacing: .01em; } select, input[type="search"] { appearance: none; font: inherit; font-size: .92rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: .5rem 2rem .5rem .7rem; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 1.05rem center, right .8rem center; background-size: .28rem .28rem, .28rem .28rem; background-repeat: no-repeat; } input[type="search"] { background-image: none; padding-right: .7rem; cursor: text; } /* The two flashcard checkboxes stack beside the selects rather than pushing the row wider, which keeps the options block from wrapping awkwardly. */ .opt-checks { display: grid; gap: .4rem; } .check-standalone { margin-bottom: 1.4rem; } .check-count { color: var(--text-faint); font-variant-numeric: tabular-nums; } /* Aligned to the first line rather than centred, so the box stays next to the text when a long label wraps on a narrow screen instead of floating between the two lines. The nudge re-centres it on that first line. */ .check { display: flex; align-items: flex-start; gap: .45rem; font-size: .88rem; color: var(--text-soft); cursor: pointer; } .check input { width: 1.05rem; height: 1.05rem; margin-top: .16rem; accent-color: var(--accent); cursor: pointer; flex: none; } .seen-line { text-align: center; font-size: .82rem; color: var(--text-faint); margin: 1rem 0 0; } /* ── Panels (quiz + browse) ────────────────────────────────────────────── */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1.2rem, 4vw, 2rem); max-width: 44rem; margin: 0 auto; } .panel h2 { margin: 0 0 .35rem; font-size: 1.45rem; letter-spacing: -.02em; } .panel h3 { margin: 1.6rem 0 .6rem; font-size: 1.05rem; } .lede { margin: 0 0 1.4rem; color: var(--text-soft); font-size: .95rem; } .setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .setup-grid select { width: 100%; } .btn { appearance: none; font: inherit; font-weight: 600; font-size: .95rem; padding: .7rem 1.4rem; border-radius: 11px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); cursor: pointer; transition: transform .12s, filter .18s, background .18s; } .btn:hover { filter: brightness(1.04); } .btn:active { transform: scale(.98); } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); width: 100%; } .link-btn { appearance: none; border: 0; background: none; font: inherit; font-size: .85rem; color: var(--text-faint); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0; margin-top: 1.5rem; } .link-btn:hover { color: var(--accent); } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 1rem; margin: 1.8rem 0 0; padding-top: 1.3rem; border-top: 1px solid var(--border); } .stats dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); font-weight: 650; } .stats dd { margin: .15rem 0 0; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; } /* Quiz in play */ .q-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.8rem; } .q-progress, .q-score { font-size: .82rem; font-variant-numeric: tabular-nums; color: var(--text-faint); font-weight: 650; flex: none; } .q-score::before { content: "✓ "; color: var(--good); } .q-bar { flex: 1; height: 5px; background: var(--surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); } .q-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--gold)); border-radius: 999px; transition: width .3s ease; } .q-prompt-label { margin: 0; font-size: .85rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .07em; font-weight: 650; text-align: center; } .q-word { font-family: var(--font-display); font-size: clamp(2.2rem, 9vw, 3.2rem); font-weight: 700; letter-spacing: -.03em; text-align: center; margin: .3rem 0 1.7rem; overflow-wrap: break-word; } .options { display: grid; gap: .6rem; } .opt { appearance: none; font: inherit; font-size: 1rem; text-align: left; padding: .9rem 1.1rem; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; display: flex; align-items: center; gap: .8rem; transition: border-color .15s, background .15s, transform .12s; } .opt:hover:not(:disabled) { border-color: var(--accent); } .opt:active:not(:disabled) { transform: scale(.99); } .opt:disabled { cursor: default; } .opt-key { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); font-size: .78rem; font-weight: 650; color: var(--text-faint); } .opt.is-right { border-color: var(--good); background: var(--good-soft); } .opt.is-right .opt-key { border-color: var(--good); color: var(--good); } .opt.is-wrong { border-color: var(--bad); background: var(--bad-soft); } .opt.is-wrong .opt-key { border-color: var(--bad); color: var(--bad); } .opt.is-dim { opacity: .5; } .q-foot { min-height: 3.2rem; display: flex; align-items: center; gap: 1rem; margin-top: 1.2rem; flex-wrap: wrap; } .q-feedback { margin: 0; font-size: .95rem; font-weight: 550; flex: 1; min-width: 12rem; } .q-feedback.is-right { color: var(--good); } .q-feedback.is-wrong { color: var(--bad); } /* Quiz results */ .score-hero { text-align: center; margin: 1.5rem 0 2rem; } .score-big { display: block; font-family: var(--font-display); font-size: clamp(3.4rem, 15vw, 5rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--accent); } .score-sub { display: block; margin-top: .4rem; color: var(--text-soft); } .done-actions { display: flex; flex-wrap: wrap; gap: .7rem; } .done-actions .btn { flex: 1; min-width: 12rem; } .done-actions .btn-primary { width: auto; } .missed { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .missed li { padding: .7rem .9rem; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--bad); font-size: .93rem; } .missed .m-ceb { font-weight: 700; font-size: 1.05rem; } .missed .m-tr { color: var(--text-soft); } .missed .m-tr span { color: var(--text-faint); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 650; } /* ── Browse ────────────────────────────────────────────────────────────── */ .browse-bar { display: flex; gap: .7rem; flex-wrap: wrap; margin: 1.1rem 0 .5rem; } .browse-bar input[type="search"] { flex: 1; min-width: 12rem; } .result-count { font-size: .82rem; color: var(--text-faint); margin: 0 0 .8rem; } .table-scroll { overflow-x: auto; } .words { width: 100%; border-collapse: collapse; font-size: .93rem; } .words th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); padding: .5rem .6rem; border-bottom: 1px solid var(--border-strong); position: sticky; top: 0; background: var(--surface); } .words td { padding: .55rem .6rem; border-bottom: 1px solid var(--border); vertical-align: top; } .words tbody tr:hover { background: var(--surface-2); } /* A flex row, so the thumbnail is a fixed column and the headword keeps its own box beside it. Floating it instead let a two-word entry wrap under the picture, which read as a ragged second line rather than a caption. */ .words .w-ceb { font-weight: 650; display: flex; align-items: center; gap: .45rem; } .words .w-ceb-text { min-width: 0; } .words .w-alt { font-weight: 400; color: var(--text-faint); font-size: .88em; } .words .w-emoji { margin-right: .4rem; font-size: 1.05em; } /* Fixed box so a row is the same height whether its thumbnail has arrived, failed back to the emoji, or is still below the fold waiting to load. Sized here and by width/height attributes both, so the row cannot reflow in the window between first paint and the stylesheet applying. */ .words .w-thumb { flex: none; width: 26px; height: 26px; border-radius: 7px; object-fit: cover; background: var(--surface-2); border: 1px solid var(--border); } .words .col-cat { color: var(--text-faint); } .words td.col-cat { font-size: .8rem; color: var(--text-faint); } .col-save { width: 2.2rem; } .save-cell { text-align: right; } .save-btn { appearance: none; border: 0; background: none; cursor: pointer; color: var(--border-strong); padding: .1rem; line-height: 1; } .save-btn:hover { color: var(--gold); } .save-btn[aria-pressed="true"] { color: var(--gold); } .save-btn[aria-pressed="true"] svg path { fill: var(--gold); } #load-more { margin: 1.1rem auto 0; display: block; } .empty { text-align: center; color: var(--text-faint); padding: 2.5rem 1rem; } /* ── Footer + toast ────────────────────────────────────────────────────── */ .footer { text-align: center; padding: 2rem 1.2rem 2.6rem; color: var(--text-faint); font-size: .84rem; border-top: 1px solid var(--border); margin-top: 2rem; } .footer p { margin: .2rem 0; } .footer-small { font-size: .78rem; opacity: .8; max-width: 34rem; margin-inline: auto; } .toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%) translateY(1rem); background: var(--text); color: var(--bg); padding: .6rem 1.1rem; border-radius: 999px; font-size: .88rem; font-weight: 550; box-shadow: var(--shadow); opacity: 0; transition: opacity .2s, transform .2s; z-index: 50; pointer-events: none; } .toast.is-up { opacity: 1; transform: translateX(-50%); } @media (max-width: 34rem) { .topbar { gap: .6rem; } .brand-text { display: none; } .tabs { order: 3; width: 100%; margin: 0; } .tab { flex: 1; text-align: center; padding: .45rem .6rem; } .brand { margin-right: auto; } .tr-label { width: 3.9rem; } .col-cat { display: none; } /* The Cebuano column is squeezed hardest here, so the thumbnail gives some width back rather than pushing the headword onto a line of its own. */ .words .w-thumb { width: 20px; height: 20px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ── dialect picker ──────────────────────────────────────────────────────── A full-screen layer rather than a modal: on a first visit there is nothing behind it worth seeing, and the choice decides what every other screen says. It sits above the toast so a stray message cannot cover the only control on the page. */ .picker { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1.5rem; overflow-y: auto; background: var(--bg); } .picker-inner { width: min(34rem, 100%); } .picker-title { font-family: var(--font-display); font-size: clamp(2rem, 8vw, 3rem); line-height: 1.12; letter-spacing: -.03em; text-align: center; margin: 0 0 .9rem; } .picker-lede { text-align: center; color: var(--text-soft); margin: 0 0 1.6rem; } .picker-list { display: grid; gap: .85rem; } .picker-card { appearance: none; display: grid; gap: .25rem; width: 100%; text-align: left; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: inherit; font: inherit; cursor: pointer; transition: border-color .15s ease, transform .15s ease; } .picker-card:hover, .picker-card:focus-visible { border-color: var(--accent); } .picker-card:active { transform: scale(.995); } .picker-card.is-current { border-color: var(--accent); } .picker-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; font-size: 1.3rem; } .picker-name strong { font-weight: 700; } .picker-also { color: var(--accent); font-size: .92rem; } .picker-where { color: var(--text-soft); font-size: .94rem; } .picker-speakers { color: var(--text-faint); font-size: .85rem; } .picker-foot { text-align: center; color: var(--text-faint); font-size: .87rem; margin: 1.4rem 0 0; } /* Inline text button, for "Change dialect" in the footer. */ .link-btn { appearance: none; border: 0; background: none; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }