/** * Shared styles for rule pages * Uses same design tokens as main app (sinaran-css) */ /* === Design Tokens (matching sinaran-css) === */ :root { /* Light mode - Yellow theme (default) */ --background: #fffef5; --secondary-background: #ffffff; --foreground: #000000; --main: #fcd34d; --main-foreground: #000000; --border: #000000; --border-radius: 5px; --box-shadow-x: 4px; --box-shadow-y: 4px; --shadow: var(--box-shadow-x) var(--box-shadow-y) 0px 0px var(--border); /* App-specific */ --font-ipa: 'Gentium Plus', 'Doulos SIL', 'Charis SIL', serif; --color-phonemic: #525252; --color-phonetic: #2563eb; } /* Dark mode - matches .dark in main app */ @media (prefers-color-scheme: dark) { :root { --background: #1a1a1a; --secondary-background: #262626; --foreground: #e5e5e5; --main: #eab308; --main-foreground: #000000; --border: #000000; --color-phonemic: #a3a3a3; --color-phonetic: #60a5fa; } } /* === Base === */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--background); color: var(--foreground); line-height: 1.6; } /* Container */ .container { max-width: 800px; margin: 0 auto; padding: 2rem; } /* Compact mode when inside iframe */ body.in-iframe .container { padding: 1rem; } body.in-iframe .page-header, body.in-iframe .page-footer { display: none; } /* Header */ .page-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid var(--border); /* Top padding grows to match the iOS Dynamic Island / Android cutout when the Telegram SDK reports a non-zero safe-area-inset-top. In a plain browser (no SDK) the var is unset and max() falls back to the base 1rem, so layout is unchanged. See rule-page.js for how these CSS vars get populated. */ padding-top: max(1rem, var(--tg-safe-area-inset-top, 0px)); padding-right: 2rem; padding-bottom: 1rem; padding-left: 2rem; margin-bottom: 1rem; } /* Mobile-fullscreen Telegram: Close (top-left) and ⌄/⋯ (top-right) overlay our webview in the same row as the page header. Squeeze the header horizontally so the "Sound Right" link + language switcher fit between those controls. The shared-JS file toggles this class on when tg.isFullscreen && platform is mobile. */ html.tg-mobile-fullscreen .page-header { padding-left: 92px; padding-right: 92px; } .page-header a { color: var(--foreground); text-decoration: none; font-weight: 600; } /* Language switcher — shown only on standalone doc pages (not inside the main-app iframe; see rule-page.js `injectLangSwitcher`). Styled to match the neo-brutalist rule cards: thin border, no default native-select chrome. */ .lang-switcher { font-family: inherit; font-size: 0.85rem; color: var(--foreground); background: var(--background, #fff); border: 1px solid var(--border); border-radius: 4px; padding: 0.25rem 0.5rem; cursor: pointer; } .lang-switcher:focus { outline: 2px solid var(--border); outline-offset: 1px; } /* Title */ h1 { font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--foreground); } h1 .subtitle { display: block; font-size: 1rem; font-weight: 400; opacity: 0.7; margin-top: 0.25rem; } /* Sections (cards) */ .section { background: var(--secondary-background); border: 3px solid var(--border); border-radius: var(--border-radius); padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--shadow); } .section h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border); } .section h3 { font-size: 1rem; font-weight: 600; margin: 1.5rem 0 0.75rem; color: var(--foreground); } .section h3:first-child { margin-top: 0; } .section p { margin-bottom: 1rem; } .section p:last-child { margin-bottom: 0; } .section ul, .section ol { margin: 0.5rem 0 1rem 1.5rem; } .section li { margin-bottom: 0.5rem; } .section a { color: var(--foreground); } /* IPA text */ .ipa { font-family: var(--font-ipa); } .phonemic { color: var(--color-phonemic); } .phonetic { color: var(--color-phonetic); font-weight: 500; } /* Example box */ .example { background: var(--main); color: var(--main-foreground); border: 2px solid var(--border); border-radius: var(--border-radius); padding: 1rem; margin: 1rem 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap; overflow-x: auto; } .example-word { font-weight: 700; font-size: 1.25rem; } .example .arrow { opacity: 0.7; } .example .phonemic, .example .phonetic { color: var(--main-foreground); } /* Word chips */ .word-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; } .word-item, a.word-item, a.word-item:visited, a.word-item:hover, a.word-item:active { display: inline-block; background: var(--main); color: #000 !important; border: 2px solid var(--border); border-radius: var(--border-radius); padding: 0.25rem 0.75rem; font-size: 0.9rem; text-decoration: none; transition: transform 0.1s, box-shadow 0.1s; cursor: pointer; } .word-item:hover { transform: translate(calc(var(--box-shadow-x) * -0.5), calc(var(--box-shadow-y) * -0.5)); box-shadow: calc(var(--box-shadow-x) * 0.5) calc(var(--box-shadow-y) * 0.5) 0 var(--border); } /* Highlighted grapheme in word chips (the "target" sound) */ .word-item strong { font-size: 1.15em; text-decoration: underline; text-underline-offset: 2px; } /* Grapheme spans for playback animation */ .word-item .g { transition: background-color 0.05s; border-radius: 2px; } .word-item .g-active { background-color: rgba(0, 0, 0, 0.2); } /* Silent graphemes — grayed out in word chips */ .word-item .g.silent, .sound-example .g.silent, .play-word .g.silent { opacity: 0.35; } /* Audio indicator - always visible */ .word-item[data-word]::after { content: '\1F50A'; margin-left: 0.25rem; font-size: 0.75rem; } /* Inline playable word (no button styling) */ .play-word { cursor: pointer; border-bottom: 1px dotted currentColor; } .play-word::after { /* NBSP (\00A0) instead of a regular space so the speaker emoji can't wrap onto the next line away from its word — common in compact mode when the word lands near the right edge. */ content: '\00A0\1F50A'; font-size: 0.7em; } .play-word:hover { opacity: 0.7; } /* Inside tip/example boxes (yellow bg), use dark color for links */ .tip a, .example a { color: #000; } .tip a:hover, .example a:hover, .tip .play-word:hover, .example .play-word:hover { color: #000; opacity: 0.7; } /* Category headers (for index page) */ .category-header { font-size: 1.25rem; font-weight: 600; margin: 2rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border); } /* Jump nav (A-Z or By-Type table of contents) */ .jump-nav { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 1rem 0 1.5rem; padding: 0.75rem; background: var(--secondary-background); border: 2px solid var(--border); border-radius: var(--border-radius); box-shadow: var(--shadow); } .jump-nav a { display: inline-block; padding: 0.25rem 0.55rem; min-width: 1.75rem; text-align: center; background: var(--background); color: var(--foreground); border: 1.5px solid var(--border); border-radius: 3px; font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: background 0.1s, transform 0.1s; } .jump-nav a:hover { background: var(--main); color: var(--main-foreground); transform: translate(-1px, -1px); } .jump-nav a.disabled { opacity: 0.3; pointer-events: none; } .jump-nav--type a { min-width: auto; font-size: 0.85rem; font-weight: 500; } /* Back to top link on each section header. Matches both the heteronyms layout (`.section h2`) and the phoneme/rules index pages which use `.category-header`. Small, muted, borderless — gets a subtle border and full opacity on hover. No default-blue link styling. */ .section h2 .back-to-top, .category-header .back-to-top { float: right; font-size: 0.7rem; font-weight: 400; opacity: 0.6; text-decoration: none; color: var(--foreground); padding: 0.1rem 0.4rem; border: 1px solid transparent; border-radius: 3px; } .section h2 .back-to-top:hover, .category-header .back-to-top:hover { opacity: 1; border-color: var(--border); background: var(--background); } .category-header:first-of-type { margin-top: 1rem; } /* Sounds index page — mode toggle + pair layout */ .sound-mode-toggle { display: inline-flex; margin: 1rem 0 1.5rem; border: 2px solid var(--border); border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow); } .mode-btn { background: var(--secondary-background); color: var(--foreground); border: none; padding: 0.5rem 1.25rem; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: background 0.1s; } .mode-btn:not(:last-child) { border-right: 2px solid var(--border); } .mode-btn.active { background: var(--main); color: var(--main-foreground); font-weight: 600; } .mode-btn:hover:not(.active) { background: var(--background); } /* Paired sounds side-by-side on wide screens */ .sound-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } .sound-pair .rule-card { margin-bottom: 0; } @media (max-width: 600px) { .sound-pair { grid-template-columns: 1fr; } } /* Sound-specific tweaks on the shared rule-card */ .sound-card .sound-card-name { font-size: 0.85rem; font-weight: 500; letter-spacing: 0.03em; opacity: 0.7; margin-left: 0.4rem; } .sound-card .sound-card-count { font-size: 0.8rem; font-weight: 400; opacity: 0.55; margin-left: 0.4rem; } /* Example words on sound cards use UI font, not IPA font */ .sound-example { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 0.95rem; flex-wrap: wrap; } .sound-example .play-word { border-bottom: none; } .sound-example .play-word strong { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .sound-example .play-word .g-active { background-color: rgba(0, 0, 0, 0.2); border-radius: 2px; } .category-desc { font-size: 0.9rem; opacity: 0.7; margin: -0.5rem 0 1rem; } .pair-note { font-size: 0.85rem; opacity: 0.75; margin: -0.25rem 0 1rem; font-style: italic; } /* Rule cards (for index page) */ .rule-card { display: block; padding: 1.5rem; background: var(--secondary-background); color: var(--foreground); border: 2px solid var(--border); border-radius: var(--border-radius); margin-bottom: 1rem; text-decoration: none; box-shadow: var(--shadow); transition: transform 0.1s, box-shadow 0.1s; } .rule-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--border); } .rule-name { font-size: 1.1rem; font-weight: 600; color: var(--foreground); margin-bottom: 0.5rem; } .rule-example { background: var(--main); color: var(--main-foreground); border: 2px solid var(--border); border-radius: var(--border-radius); padding: 0.75rem 1rem; font-family: var(--font-ipa); display: flex; align-items: center; gap: 0.5rem; } .rule-example + .rule-example { margin-top: 0.5rem; } .rule-example .play-word { color: var(--main-foreground); } .rule-example .play-word:hover { opacity: 0.7; } .rule-card .rule-word { font-weight: 600; font-family: system-ui, sans-serif; } .rule-desc { font-size: 0.9rem; margin-top: 0.75rem; color: var(--foreground); opacity: 0.8; } /* Table */ .rule-table { width: 100%; border-collapse: collapse; margin: 1rem 0; } .rule-table th, .rule-table td { border: 2px solid var(--border); padding: 0.75rem; text-align: left; } .rule-table th { background: var(--main); color: var(--main-foreground); font-weight: 600; } .rule-table td { background: var(--secondary-background); } /* Tip/note box */ .tip { background: var(--main); color: var(--main-foreground); border-left: 4px solid var(--border); padding: 1rem; margin: 1rem 0; border-radius: 0 var(--border-radius) var(--border-radius) 0; } /* Breadcrumb nav */ .breadcrumb { font-size: 0.9rem; margin-bottom: 1rem; opacity: 0.7; } .breadcrumb a { color: var(--foreground); text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } /* Phoneme images */ .phoneme-image { margin: 1rem 0; text-align: center; } .phoneme-image img { max-width: 100%; max-height: 300px; border: 3px solid var(--border); border-radius: var(--border-radius); box-shadow: var(--shadow); } .phoneme-image figcaption { margin-top: 0.5rem; font-size: 0.85rem; opacity: 0.7; font-style: italic; } /* Footer nav */ .page-footer { margin-top: 2rem; padding-top: 1rem; border-top: 2px solid var(--border); } .footer-nav { display: flex; justify-content: space-between; gap: 1rem; } .footer-nav a { color: var(--foreground); text-decoration: none; font-weight: 500; } .footer-nav a:hover { color: var(--main); } /* Video embed */ .video-container { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; overflow: hidden; margin: 1rem 0; border: 3px solid var(--border); border-radius: var(--border-radius); } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } /* Responsive */ @media (max-width: 600px) { .container { padding: 1rem; } h1 { font-size: 1.5rem; } .section { padding: 1rem; } } /* Heteronym entry — one per word, separated by a thin divider */ .heteronym { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px dashed var(--border); } .heteronym:last-child { border-bottom: none; margin-bottom: 0; } .heteronym h3 { margin-bottom: 0.4rem; } .heteronym p { margin: 0.5rem 0; } .heteronym .word-item { margin-top: 0.35rem; } /* Heteronym word inside sentence: just bold, no upsize/underline. (The default `.word-item strong` rule is for single-word chips.) */ .heteronym .word-item strong { font-size: inherit; text-decoration: none; font-weight: 700; } /* Heteronym variant header — sits between the IPA chip and the sentence. Three visual tiers: meaning (primary), POS tag (subdued italic), stress description (subdued footnote). Replaces the older nested-parens layout "(meaning (pos)) — stress…". */ .heteronym .usage-meaning { margin-left: 0.2em; } .heteronym .usage-pos { color: var(--foreground, #555); opacity: 0.65; font-style: italic; margin-left: 0.4em; } .heteronym .stress-note { color: var(--foreground, #555); opacity: 0.65; margin-left: 0.4em; } /* Secondary translation line beneath the clickable English sentence (Option B rendering — see scripts/build_heteronyms.py `sentence_gloss`). Muted, smaller, display:block so it sits on its own line under the word-item. Empty element is not emitted, so no extra gap when no gloss. */ .heteronym .sentence-gloss { display: block; margin-top: 0.2rem; color: var(--foreground, #555); opacity: 0.65; font-size: 0.85em; line-height: 1.35; } /* Khmer equivalent block — prepended to each /km/phoneme/{id}/ page. Gives the learner an anchor in their own language before the English spelling guide starts. Two states: has_equivalent (accent border), no_equivalent (muted warning style). */ .khmer-equivalent { margin: 1rem 0 1.5rem; padding: 0.75rem 1rem; border-left: 4px solid var(--main, #ffc600); background: rgba(255, 198, 0, 0.08); border-radius: 0.25rem; } .khmer-equivalent h3 { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 600; } .khmer-equivalent p { margin: 0.25rem 0; } .khmer-equivalent .khmer-equivalent-note { font-size: 0.85em; opacity: 0.75; margin-top: 0.4rem; line-height: 1.4; } .khmer-equivalent--none { border-left-color: var(--foreground, #888); background: rgba(128, 128, 128, 0.06); }